fix(superset): renew guest token on expiry

src/generated/graphql.tsx

@@ -15872,6 +15872,13 @@ export type SupersetDashboardsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type SupersetDashboardsQuery = { __typename?: 'Query', supersetDashboards: Array<{ __typename?: 'SupersetDashboard', id: string, embeddedId: string, dashboardTitle: string, guestToken: string }> };
 
+export type CreateSupersetGuestTokenMutationVariables = Exact<{
+  input: CreateSupersetGuestTokenInput;
+}>;
+
+
+export type CreateSupersetGuestTokenMutation = { __typename?: 'Mutation', createSupersetGuestToken?: { __typename?: 'SupersetGuestToken', guestToken: string } | null };
+
 export type GetApiKeyToEditQueryVariables = Exact<{
   apiKeyId: Scalars['ID']['input'];
 }>;
@@ -42541,6 +42548,39 @@ export type SupersetDashboardsQueryHookResult = ReturnType<typeof useSupersetDas
 export type SupersetDashboardsLazyQueryHookResult = ReturnType<typeof useSupersetDashboardsLazyQuery>;
 export type SupersetDashboardsSuspenseQueryHookResult = ReturnType<typeof useSupersetDashboardsSuspenseQuery>;
 export type SupersetDashboardsQueryResult = Apollo.QueryResult<SupersetDashboardsQuery, SupersetDashboardsQueryVariables>;
+export const CreateSupersetGuestTokenDocument = gql`
+    mutation createSupersetGuestToken($input: CreateSupersetGuestTokenInput!) {
+  createSupersetGuestToken(input: $input) {
+    guestToken
+  }
+}
+    `;
+export type CreateSupersetGuestTokenMutationFn = Apollo.MutationFunction<CreateSupersetGuestTokenMutation, CreateSupersetGuestTokenMutationVariables>;
+
+/**
+ * __useCreateSupersetGuestTokenMutation__
+ *
+ * To run a mutation, you first call `useCreateSupersetGuestTokenMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCreateSupersetGuestTokenMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [createSupersetGuestTokenMutation, { data, loading, error }] = useCreateSupersetGuestTokenMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useCreateSupersetGuestTokenMutation(baseOptions?: Apollo.MutationHookOptions<CreateSupersetGuestTokenMutation, CreateSupersetGuestTokenMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<CreateSupersetGuestTokenMutation, CreateSupersetGuestTokenMutationVariables>(CreateSupersetGuestTokenDocument, options);
+      }
+export type CreateSupersetGuestTokenMutationHookResult = ReturnType<typeof useCreateSupersetGuestTokenMutation>;
+export type CreateSupersetGuestTokenMutationResult = Apollo.MutationResult<CreateSupersetGuestTokenMutation>;
+export type CreateSupersetGuestTokenMutationOptions = Apollo.BaseMutationOptions<CreateSupersetGuestTokenMutation, CreateSupersetGuestTokenMutationVariables>;
 export const GetApiKeyToEditDocument = gql`
     query getApiKeyToEdit($apiKeyId: ID!) {
   apiKey(id: $apiKeyId) {

src/pages/dashboards/Dashboard.tsx

@@ -1,4 +1,5 @@
-import { gql } from '@apollo/client'
+import { gql, useApolloClient } from '@apollo/client'
+import { captureException } from '@sentry/react'
 import { embedDashboard, EmbeddedDashboard } from '@superset-ui/embedded-sdk'
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
@@ -15,6 +16,7 @@ import { useSupersetDashboardsQuery } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { useCurrentUser } from '~/hooks/useCurrentUser'
 import '~/main.css'
+import { createFetchSupersetGuestToken } from '~/pages/dashboards/fetchSupersetGuestToken'
 import ErrorImage from '~/public/images/maneki/error.svg'
 import { PageHeader } from '~/styles'
 
@@ -42,6 +44,7 @@ export type DashboardProps = {
 const Dashboard = ({ contentTitle, dashboardTitle, dashboardTitleTestKey }: DashboardProps) => {
   const { translate } = useInternationalization()
   const { currentMembership } = useCurrentUser()
+  const client = useApolloClient()
 
   const dashboardRef = useRef<string>('')
 
@@ -63,6 +66,7 @@ const Dashboard = ({ contentTitle, dashboardTitle, dashboardTitleTestKey }: Dash
     }
 
     let embedded: null | EmbeddedDashboard = null
+    let disposed = false
 
     const persistFilters = isFeatureFlagActive(FeatureFlags.SUPERSET_PERSISTENT_FILTERS)
     // Filter persistence key is scoped to the org from the URL slug (resolved
@@ -87,6 +91,12 @@ const Dashboard = ({ contentTitle, dashboardTitle, dashboardTitleTestKey }: Dash
         }, 500)
       : null
 
+    const fetchGuestToken = createFetchSupersetGuestToken(
+      client,
+      dashboard.id,
+      dashboard.guestToken,
+    )
+
     const mount = async () => {
       const mountPoint = document.getElementById(mountId)
 
@@ -107,7 +117,7 @@ const Dashboard = ({ contentTitle, dashboardTitle, dashboardTitleTestKey }: Dash
         id: dashboard.embeddedId,
         supersetDomain: lagoSupersetUrl,
         mountPoint,
-        fetchGuestToken: async () => dashboard?.guestToken,
+        fetchGuestToken,
         dashboardUiConfig: {
           hideTitle: true,
           emitDataMasks: persistFilters,
@@ -119,21 +129,38 @@ const Dashboard = ({ contentTitle, dashboardTitle, dashboardTitleTestKey }: Dash
         iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox'],
       })
 
+      // The SDK mounts its iframe before `embedDashboard` resolves, so cleanup that
+      // ran while this was in flight had no `embedded` to unmount.
+      if (disposed) {
+        embedded.unmount()
+
+        return
+      }
+
       if (debouncedSaveFilters) {
         embedded.observeDataMask(debouncedSaveFilters)
       }
 
       dashboardRef.current = dashboard.id
     }
 
-    mount()
+    // Nothing else observes this promise: uncaught, a bad token from Superset is an
+    // unhandled rejection and a silently blank dashboard.
+    mount().catch((mountError) => {
+      captureException(mountError, {
+        tags: { errorType: 'SupersetDashboardMountError', component: 'Dashboard' },
+        extra: { dashboardId: dashboard.id },
+      })
+    })
 
     return () => {
+      disposed = true
+      fetchGuestToken.cancel()
       debouncedSaveFilters?.cancel()
       embedded?.unmount()
       dashboardRef.current = ''
     }
-  }, [dashboard, currentMembership?.organization.id, dashboardTitle, mountId])
+  }, [dashboard, currentMembership?.organization.id, client, dashboardTitle, mountId])
 
   return (
     <>

src/pages/dashboards/__tests__/Dashboard.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react'
 
 import { GENERIC_PLACEHOLDER_TEST_ID } from '~/components/designSystem/GenericPlaceholder'
 import { getItemFromLS, setItemFromLS } from '~/core/utils/localStorage'
-import { SupersetDashboardsDocument } from '~/generated/graphql'
+import { CreateSupersetGuestTokenDocument, SupersetDashboardsDocument } from '~/generated/graphql'
 import { render, TestMocksType } from '~/test-utils'
 
 import Dashboard, { DASHBOARD_MOUNT_TEST_ID } from '../Dashboard'
@@ -79,6 +79,14 @@ const dashboardsData = {
 
 const successMock: TestMocksType = [
   { request: { query: SupersetDashboardsDocument }, result: { data: dashboardsData } },
+  {
+    request: {
+      query: CreateSupersetGuestTokenDocument,
+      variables: { input: { dashboardId: 'dash-1' } },
+    },
+    // Must differ from the seed above, or the assertion passes on the fallback too.
+    result: { data: { createSupersetGuestToken: { guestToken: 'refreshed-token' } } },
+  },
 ]
 
 const errorMock: TestMocksType = [
@@ -105,6 +113,26 @@ const renderRevenue = (mocks: TestMocksType = successMock) =>
     { mocks },
   )
 
+// Whether `promise` has settled once microtasks and 0ms timers have flushed.
+const hasSettled = async (promise: Promise<unknown>): Promise<boolean> => {
+  let settled = false
+
+  promise.then(
+    () => {
+      settled = true
+    },
+    () => {
+      settled = true
+    },
+  )
+
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, 0)
+  })
+
+  return settled
+}
+
 describe('Dashboard', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -136,7 +164,7 @@ describe('Dashboard', () => {
       expect(config.supersetDomain).toBe('https://localhost:8089')
       expect(config.mountPoint).toBe(document.getElementById('superset-lago-dashboard'))
       expect(config.dashboardUiConfig.hideTitle).toBe(true)
-      await expect(config.fetchGuestToken()).resolves.toBe('token-1')
+      await expect(config.fetchGuestToken()).resolves.toBe('refreshed-token')
     })
   })
 
@@ -228,5 +256,44 @@ describe('Dashboard', () => {
 
       expect(mockUnmount).toHaveBeenCalled()
     })
+
+    // The SDK's `unmount()` clears the iframe but not its refresh `setTimeout`
+    // (`index.js:159-163`), so cleanup has to cancel the fetcher itself.
+    it('THEN cancels the guest token fetcher so the refresh chain stops', async () => {
+      const { unmount } = renderAnalytics()
+
+      await waitFor(() => expect(mockEmbedDashboard).toHaveBeenCalledTimes(1))
+
+      const { fetchGuestToken } = mockEmbedDashboard.mock.calls[0][0]
+
+      unmount()
+
+      // A cancelled fetcher never settles; the mutation mock would have resolved it.
+      expect(await hasSettled(fetchGuestToken())).toBe(false)
+    })
+
+    // The SDK mounts its iframe before `embedDashboard` resolves, so an embed still
+    // in flight at cleanup time is orphaned unless it is unmounted once it lands.
+    it('THEN tears down an embed that only resolves after cleanup ran', async () => {
+      let resolveEmbed: (value: unknown) => void = () => {}
+
+      mockEmbedDashboard.mockReturnValue(
+        new Promise((resolve) => {
+          resolveEmbed = resolve
+        }),
+      )
+
+      const { unmount } = renderAnalytics()
+
+      await waitFor(() => expect(mockEmbedDashboard).toHaveBeenCalledTimes(1))
+
+      unmount()
+      expect(mockUnmount).not.toHaveBeenCalled()
+
+      resolveEmbed({ unmount: mockUnmount, observeDataMask: mockObserveDataMask })
+
+      await waitFor(() => expect(mockUnmount).toHaveBeenCalledTimes(1))
+      expect(mockObserveDataMask).not.toHaveBeenCalled()
+    })
   })
 })