react dashboard embeded doesnt update after token refresh #20836

VictorEffectiv commented 2 years ago

A clear and concise description of what the bug is.

How to reproduce the bug

Create a React App
Try to embed a dashboard using the sdk
Wait for 5 min and see that after token refresh call, the dashboard doesnt update

Expected results

i would expect to see the message dashboard updated

Actual results

nothing happens. i see that the refetch token function is called but nothing else is triggered

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

(please complete the following information):

browser type and version:
superset version: superset version
python version: python --version
node.js version: node -v
any feature flags active:

Checklist

Make sure to follow these steps before submitting your issue - thank you!

[ ] I have checked the superset logs for python stacktraces and included it here as text if there are any.
[x] I have reproduced the issue with at least the latest released version of superset.
[x] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

i was able to make the dashboard refresh with a simple html and the following code

<!DOCTYPE html>
<html>
  <head>
    <!-- <meta
      http-equiv="Content-Security-Policy"
      content="default-src https: 'unsafe-eval' 'unsafe-inline':"
    /> -->
  </head>
  <body>
    <h1>Superset Embedding</h1>

    <p>First Dashboard Embedding</p>
    <style type="text/css">
      #my-superset-container {
        height: 100vh;
        width: 100vw;
      }
      #my-superset-container > iframe {
        height: 100%;
        width: 100%;
      }
    </style>

    <script src="https://unpkg.com/@preset-sdk/embedded"></script>

    <script type="text/javascript">
      async function fetchGuestTokenFromBackend() {
        let url = "url;
        const settings = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",,
          },
          body: JSON.stringify(
        try {
          let response = await fetch(url, settings);
          let data = await response.json();
          console.log("data is", data);
        } catch (e) {
          console.error(e);
        }
      }
    </script>

    <div id="my-superset-container"></div>

    <script>
      presetSdk.embedDashboard({
        id: "id", // given by the Superset embedding UI
        supersetDomain: "iddomain",
        mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
        fetchGuestToken: fetchGuestTokenFromBackend,
        debug: true,
        dashboardUiConfig: { hideTitle: false }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
      });
    </script>
  </body>
</html>

At first i thought it was CRA that was doing something wrong, but i copy pasted the same code as above inside my index.html from the CRA app and it worked fine.

When i try to embed using normal React code for some reason the dashboard t never gets refreshed after the fetchToken happens.

This is my relative React code

  useEffect(() => {
    if (iframeRef.current && data?.dashboardVizV2IDs && selectedTab) {
      const tab = data?.dashboardVizV2IDs.find((el) => el.id === selectedTab);

      if (tab) {
        embedDashboard({
          id: tab.biId, // given by the Superset embedding UI
          supersetDomain: tab.meta.superset_domain,
          mountPoint: iframeRef.current, // any html element that can contain an iframe
          fetchGuestToken: async () => {
            const result = await getDashboardToken({
              id: tab.id,
              useCase: id,
              category: type,
            });
            return result.data.dashboardVizV2EmbeddingToken.token;
          },
          debug: true,
          dashboardUiConfig: { hideTitle: true, hideChartControls: false }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
        });
      }
    }
  }, [data?.dashboardVizV2IDs, getDashboardToken, id, selectedTab, type]);

NodeJSmith commented 1 year ago

@VictorEffectiv Did you ever solve this? If not, does this address the issue?

Vitor-Avila commented 3 days ago

hey @VictorEffectiv could you please let us know if this is still an issue on your end?

preset-io / frontend-sdk