fix(sdk): throw errors when sdk hooks are used outside of redux context (#45999)

* handle errors when useMetabaseAuthStatus is used outside of sdk context

* address review comments feedback

* extract useSdkContext

* fix import type error

enterprise/frontend/src/embedding-sdk/store/index.ts

@@ -4,8 +4,7 @@ import type {
   Store,
   ThunkDispatch,
 } from "@reduxjs/toolkit";
-import type { TypedUseSelectorHook } from "react-redux";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import type { SdkStoreState } from "embedding-sdk/store/types";
 import { mainReducers } from "metabase/reducers-main";
@@ -27,9 +26,10 @@ export const store = getStore(sdkReducers, null, {
   },
 }) as unknown as Store<SdkStoreState, AnyAction>;
 
-export const useSdkSelector: TypedUseSelectorHook<SdkStoreState> = useSelector;
 export const useSdkDispatch: () => ThunkDispatch<
   SdkStoreState,
   void,
   AnyAction
 > = useDispatch;
+
+export { useSdkSelector } from "./use-sdk-selector";

enterprise/frontend/src/embedding-sdk/store/use-sdk-selector.ts

+import { useContext } from "react";
+import {
+  useSelector,
+  ReactReduxContext,
+  type TypedUseSelectorHook,
+} from "react-redux";
+
+import type { SdkStoreState } from "embedding-sdk/store/types";
+
+// eslint-disable-next-line no-literal-metabase-strings -- this string only shows in the console.
+export const USE_OUTSIDE_OF_CONTEXT_MESSAGE = `Hooks from the Metabase Embedding SDK must be used within a component wrapped by the MetabaseProvider`;
+
+export const useSdkSelector: TypedUseSelectorHook<SdkStoreState> = (
+  selector,
+  options,
+) => {
+  const context = useContext(ReactReduxContext);
+
+  if (!context) {
+    throw new Error(USE_OUTSIDE_OF_CONTEXT_MESSAGE);
+  }
+
+  return useSelector(selector, options);
+};

enterprise/frontend/src/embedding-sdk/store/use-sdk-selector.unit.spec.ts

+import { renderHook } from "@testing-library/react";
+
+import {
+  useSdkSelector,
+  USE_OUTSIDE_OF_CONTEXT_MESSAGE,
+} from "./use-sdk-selector";
+
+describe("useSdkSelector", () => {
+  it("should throw an error if used outside of the MetabaseProvider", () => {
+    expect(() => {
+      renderHook(() => useSdkSelector(s => s.sdk.token));
+    }).toThrow(Error(USE_OUTSIDE_OF_CONTEXT_MESSAGE));
+  });
+});