fix(sdk): sync fetch request token function with store (#45596)

* sync fetch request token function with store

* update unit test

* update docs

* use re-render to rerender test

enterprise/frontend/src/embedding-sdk/README.md

@@ -900,6 +900,7 @@ async function fetchRefreshToken(url) {
 }
 
 // Pass this configuration to MetabaseProvider.
+// Wrap the fetchRequestToken function in useCallback if it has dependencies to prevent re-renders.
 const config = { fetchRefreshToken };
 ```
 

enterprise/frontend/src/embedding-sdk/hooks/private/use-init-data.ts

@@ -44,12 +44,14 @@ export const useInitData = ({ config }: InitDataLoaderParameters) => {
     registerVisualizationsOnce();
   }, [dispatch]);
 
+  useEffect(() => {
+    dispatch(setFetchRefreshTokenFn(config.fetchRequestToken ?? null));
+  }, [dispatch, config.fetchRequestToken]);
+
   useEffect(() => {
     if (loginStatus.status === "uninitialized") {
       api.basename = config.metabaseInstanceUrl;
 
-      dispatch(setFetchRefreshTokenFn(config.fetchRequestToken ?? null));
-
       if (isValidJwtAuth(config)) {
         setupJwtAuth(config, dispatch);
         dispatch(setLoginStatus({ status: "validated" }));

enterprise/frontend/src/embedding-sdk/hooks/private/use-init-data.unit.spec.tsx

+import { act } from "@testing-library/react";
 import fetchMock from "fetch-mock";
 
 import { setupEnterprisePlugins } from "__support__/enterprise";
@@ -10,6 +11,7 @@ import { mockSettings } from "__support__/settings";
 import { renderWithProviders, screen } from "__support__/ui";
 import { useInitData } from "embedding-sdk/hooks";
 import { sdkReducers, useSdkSelector } from "embedding-sdk/store";
+import { refreshTokenAsync } from "embedding-sdk/store/reducer";
 import { getIsLoggedIn, getLoginStatus } from "embedding-sdk/store/selectors";
 import type { LoginStatusError } from "embedding-sdk/store/types";
 import { createMockConfig } from "embedding-sdk/test/mocks/config";
@@ -18,6 +20,7 @@ import {
   createMockSdkState,
 } from "embedding-sdk/test/mocks/state";
 import type { SDKConfig } from "embedding-sdk/types";
+import { useDispatch } from "metabase/lib/redux";
 import {
   createMockSettings,
   createMockTokenFeatures,
@@ -28,6 +31,8 @@ import { createMockState } from "metabase-types/store/mocks";
 const TEST_USER = createMockUser();
 
 const TestComponent = ({ config }: { config: SDKConfig }) => {
+  const dispatch = useDispatch();
+
   const loginStatus = useSdkSelector(getLoginStatus);
   const isLoggedIn = useSdkSelector(getIsLoggedIn);
 
@@ -38,6 +43,9 @@ const TestComponent = ({ config }: { config: SDKConfig }) => {
     } as SDKConfig,
   });
 
+  const refreshToken = () =>
+    dispatch(refreshTokenAsync("http://TEST_URI/sso/metabase"));
+
   return (
     <div
       data-testid="test-component"
@@ -46,6 +54,7 @@ const TestComponent = ({ config }: { config: SDKConfig }) => {
       data-error-message={(loginStatus as LoginStatusError).error?.message}
     >
       Test Component
+      <button onClick={refreshToken}>Refresh Token</button>
     </div>
   );
 };
@@ -99,10 +108,10 @@ const setup = ({
 
   const config = createMockConfig({
     jwtProviderUri: isValidConfig ? "http://TEST_URI/sso/metabase" : "",
-    fetchRequestToken: configOpts.fetchRequestToken,
+    ...configOpts,
   });
 
-  renderWithProviders(<TestComponent config={config} {...configOpts} />, {
+  return renderWithProviders(<TestComponent config={config} />, {
     storeInitialState: state,
     customReducers: sdkReducers,
   });
@@ -176,11 +185,28 @@ describe("useInitData hook", () => {
       );
     });
 
-    it("should use the custom fetchRefreshToken function when specified", async () => {
-      const fetchRequestToken = jest.fn(async () => ({ id: "foobar", exp: 1 }));
+    it("should use a custom fetchRefreshToken function when specified", async () => {
+      let fetchRequestToken = jest.fn(async () => ({ id: "foo", exp: 10 }));
+
+      const { rerender } = setup({ isValidConfig: true, fetchRequestToken });
 
-      setup({ isValidConfig: true, fetchRequestToken });
       expect(await screen.findByText("Test Component")).toBeInTheDocument();
+      expect(fetchRequestToken).toHaveBeenCalledTimes(1);
+
+      // Pass in a new fetchRequestToken function
+      // We expect the new function to be called when the "Refresh Token" button is clicked
+      fetchRequestToken = jest.fn(async () => ({ id: "bar", exp: 10 }));
+
+      const config = createMockConfig({
+        jwtProviderUri: "http://TEST_URI/sso/metabase",
+        fetchRequestToken,
+      });
+
+      rerender(<TestComponent config={config} />);
+
+      act(() => {
+        screen.getByText("Refresh Token").click();
+      });
 
       expect(fetchRequestToken).toHaveBeenCalledTimes(1);
     });