Embedding SDK - integration commit

.gitignore

@@ -51,6 +51,7 @@
 /resources/frontend_client/embed.html
 /resources/frontend_client/index.html
 /resources/frontend_client/public.html
+/resources/embedding-sdk/dist/
 /resources/i18n/*.edn
 /resources/instance_analytics.zip
 /resources/license-backend-third-party.txt

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

@@ -0,0 +1,8 @@
+# Embedding SDK
+
+### Build
+`yarn build`
+
+`yarn build-embedding-sdk`
+
+Build results are located at `<root>/resources/embedding-sdk`

enterprise/frontend/src/embedding-sdk/components/SdkContentWrapper.tsx

@@ -0,0 +1,34 @@
+import styled from "@emotion/styled";
+
+import { alpha, color } from "metabase/lib/colors";
+import { aceEditorStyles } from "metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.styled";
+import { saveDomImageStyles } from "metabase/visualizations/lib/save-chart-image";
+
+export const SdkContentWrapper = styled.div<{ font: string }>`
+  --default-font-family: "${({ font }) => font}";
+  --color-brand: ${color("brand")};
+  --color-brand-alpha-04: ${alpha("brand", 0.04)};
+  --color-brand-alpha-88: ${alpha("brand", 0.88)};
+  --color-focus: ${color("focus")};
+
+  ${aceEditorStyles}
+  ${saveDomImageStyles}
+
+  --default-font-size: 0.875em;
+  --default-font-color: var(--color-text-dark);
+  --default-bg-color: var(--color-bg-light);
+
+  font-family: var(--default-font-family), sans-serif;
+  font-size: var(--default-font-size);
+  font-weight: 400;
+  font-style: normal;
+  color: var(--color-text-dark);
+  margin: 0;
+  height: 100%; /* ensure the entire page will fill the window */
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-light);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+`;

enterprise/frontend/src/embedding-sdk/components/public/MetabaseProvider.tsx

@@ -0,0 +1,64 @@
+import type * as React from "react";
+import { memo, useEffect, useState } from "react";
+import { Provider } from "react-redux";
+
+import reducers from "metabase/reducers-main";
+import { setOptions } from "metabase/redux/embed";
+import { getStore } from "metabase/store";
+import { EmotionCacheProvider } from "metabase/styled-components/components/EmotionCacheProvider";
+import { ThemeProvider } from "metabase/ui/components/theme/ThemeProvider";
+
+import type { SDKConfigType } from "../../config";
+import { EmbeddingContext } from "../../context";
+import { useInitData } from "../../hooks";
+import { SdkContentWrapper } from "../SdkContentWrapper";
+
+import "metabase/css/vendor.css";
+import "../../styles.css";
+
+const MetabaseProviderInternal = ({
+  children,
+  config,
+}: {
+  children: React.ReactNode;
+  config: SDKConfigType;
+}): JSX.Element => {
+  const store = getStore(reducers);
+
+  const [font, setFont] = useState<string>(config.font ?? "Lato");
+
+  useEffect(() => {
+    if (font) {
+      store.dispatch(setOptions({ font }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [font]);
+
+  const { isLoggedIn, isInitialized } = useInitData({
+    store,
+    config,
+  });
+
+  return (
+    <EmbeddingContext.Provider
+      value={{
+        isInitialized,
+        isLoggedIn,
+        font,
+        setFont,
+      }}
+    >
+      <Provider store={store}>
+        <EmotionCacheProvider>
+          <ThemeProvider>
+            <SdkContentWrapper font={font}>
+              {!isInitialized ? <div>Initializing...</div> : children}
+            </SdkContentWrapper>
+          </ThemeProvider>
+        </EmotionCacheProvider>
+      </Provider>
+    </EmbeddingContext.Provider>
+  );
+};
+
+export const MetabaseProvider = memo(MetabaseProviderInternal);

enterprise/frontend/src/embedding-sdk/components/public/QueryVisualization.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useState } from "react";
+
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { GET, POST } from "metabase/lib/api";
+import { useSelector } from "metabase/lib/redux";
+import {
+  onCloseChartType,
+  onOpenChartSettings,
+  setUIControls,
+} from "metabase/query_builder/actions";
+import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
+import ChartTypeSidebar from "metabase/query_builder/components/view/sidebars/ChartTypeSidebar";
+import { getMetadata } from "metabase/selectors/metadata";
+import { Box, Button, Group, Text } from "metabase/ui";
+import { PublicMode } from "metabase/visualizations/click-actions/modes/PublicMode";
+import Question from "metabase-lib/v1/Question";
+import type { Card, CardId, Dataset } from "metabase-types/api";
+
+import { useEmbeddingContext } from "../../hooks";
+
+interface QueryVisualizationProps {
+  questionId: CardId;
+  showVisualizationSelector?: boolean;
+}
+
+type State = {
+  loading: boolean;
+  card: Card | null;
+  result: Dataset | null;
+};
+
+export const QueryVisualizationSdk = (
+  props: QueryVisualizationProps,
+): JSX.Element | null => {
+  const { isInitialized, isLoggedIn } = useEmbeddingContext();
+  const metadata = useSelector(getMetadata);
+
+  const { questionId } = props;
+
+  const [state, setState] = useState<State>({
+    loading: false,
+    card: null,
+    result: null,
+  });
+
+  const loadCardData = async ({ questionId }: { questionId: number }) => {
+    setState(prevState => ({
+      ...prevState,
+      loading: true,
+    }));
+
+    Promise.all([
+      GET("/api/card/:cardId")({ cardId: questionId }),
+      POST("/api/card/:cardId/query")({
+        cardId: questionId,
+      }),
+    ])
+      .then(([card, result]) => {
+        setState(prevState => ({
+          ...prevState,
+          card,
+          result,
+          loading: false,
+        }));
+      })
+      .catch(([_cardError, resultError]) => {
+        setState(prevState => ({
+          ...prevState,
+          result: resultError?.data,
+        }));
+      });
+  };
+
+  useEffect(() => {
+    if (!isInitialized || !isLoggedIn) {
+      setState({
+        loading: false,
+        card: null,
+        result: null,
+      });
+
+      return;
+    }
+
+    loadCardData({ questionId });
+  }, [isInitialized, isLoggedIn, questionId]);
+
+  const { card, result } = state;
+
+  const changeVisualization = (newQuestion: Question) => {
+    setState({
+      card: newQuestion.card(),
+      result: state.result,
+      loading: false,
+    });
+  };
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <div>
+        <Text>You should be logged in to see this content.</Text>
+        <Button>Log in</Button>
+      </div>
+    );
+  }
+
+  return (
+    <LoadingAndErrorWrapper
+      className="flex-full full-width"
+      loading={!result}
+      error={typeof result === "string" ? result : null}
+      noWrapper
+    >
+      {() => {
+        const question = new Question(card, metadata);
+        const legacyQuery = question.legacyQuery({
+          useStructuredQuery: true,
+        });
+
+        return (
+          <Group h="100%" pos="relative" align="flex-start">
+            {props.showVisualizationSelector && (
+              <Box w="355px">
+                <ChartTypeSidebar
+                  question={question}
+                  result={result}
+                  onOpenChartSettings={onOpenChartSettings}
+                  onCloseChartType={onCloseChartType}
+                  query={legacyQuery}
+                  setUIControls={setUIControls}
+                  updateQuestion={changeVisualization}
+                />
+              </Box>
+            )}
+            <QueryVisualization
+              className="flex full-width"
+              question={question}
+              rawSeries={[{ card, data: result && result.data }]}
+              isRunning={state.loading}
+              isObjectDetail={false}
+              isResultDirty={false}
+              isNativeEditorOpen={false}
+              result={result}
+              noHeader
+              mode={PublicMode}
+            />
+          </Group>
+        );
+      }}
+    </LoadingAndErrorWrapper>
+  );
+};

enterprise/frontend/src/embedding-sdk/components/public/index.ts

@@ -0,0 +1,2 @@
+export { QueryVisualizationSdk } from "./QueryVisualization";
+export { MetabaseProvider } from "./MetabaseProvider";

enterprise/frontend/src/embedding-sdk/config.ts

@@ -0,0 +1,6 @@
+export type SDKConfigType = {
+  metabaseInstanceUrl: string;
+  font?: string;
+  authType: "apiKey";
+  apiKey: string;
+};

enterprise/frontend/src/embedding-sdk/context.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+
+interface EmbeddingSdkContextData {
+  isInitialized: boolean;
+  isLoggedIn: boolean;
+  font: string | null;
+  setFont: (font: string) => void;
+}
+
+export const EmbeddingContext = createContext<EmbeddingSdkContextData>({
+  isInitialized: false,
+  isLoggedIn: false,
+  font: null,
+  setFont: () => {},
+});
+
+export const useEmbeddingContext = () => {
+  return useContext(EmbeddingContext);
+};

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

@@ -0,0 +1,2 @@
+export * from "./public";
+export * from "./private";

enterprise/frontend/src/embedding-sdk/hooks/private/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-sdk-context";
+export * from "./use-init-data";

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

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import _ from "underscore";
+
+import { reloadSettings } from "metabase/admin/settings/settings";
+import api from "metabase/lib/api";
+import { refreshCurrentUser } from "metabase/redux/user";
+import registerVisualizations from "metabase/visualizations/register";
+
+import type { SDKConfigType } from "../../config";
+
+const registerVisualizationsOnce = _.once(registerVisualizations);
+
+type InitDataLoaderProps = {
+  store: any;
+  config: SDKConfigType;
+};
+
+export const useInitData = ({
+  store,
+  config,
+}: InitDataLoaderProps): {
+  isLoggedIn: boolean;
+  isInitialized: boolean;
+} => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  useEffect(() => {
+    registerVisualizationsOnce();
+  }, []);
+
+  useEffect(() => {
+    api.basename = config.metabaseInstanceUrl;
+
+    if (config.authType === "apiKey" && config.apiKey) {
+      api.apiKey = config.apiKey;
+    } else {
+      setIsLoggedIn(false);
+      return;
+    }
+
+    Promise.all([
+      store.dispatch(refreshCurrentUser()),
+      store.dispatch(reloadSettings()),
+    ]).then(() => {
+      setIsInitialized(true);
+      setIsLoggedIn(true);
+    });
+  }, [config, store]);
+
+  return {
+    isLoggedIn,
+    isInitialized,
+  };
+};

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

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+
+import { EmbeddingContext } from "../../context";
+
+export const useEmbeddingContext = () => {
+  return useContext(EmbeddingContext);
+};

enterprise/frontend/src/embedding-sdk/hooks/public/index.ts

@@ -0,0 +1,4 @@
+export * from "./use-current-user";
+export * from "./use-application-name";
+export * from "./use-question-search";
+export * from "./use-available-fonts";

enterprise/frontend/src/embedding-sdk/hooks/public/use-application-name.ts

@@ -0,0 +1,4 @@
+import { useSelector } from "metabase/lib/redux";
+import { getApplicationName } from "metabase/selectors/whitelabel";
+
+export const useApplicationName = () => useSelector(getApplicationName);

enterprise/frontend/src/embedding-sdk/hooks/public/use-available-fonts.ts

@@ -0,0 +1,14 @@
+import { useSelector } from "metabase/lib/redux";
+import { getSetting } from "metabase/selectors/settings";
+
+import { useEmbeddingContext } from "../../hooks/private/use-sdk-context";
+
+export const useAvailableFonts = () => {
+  const { font, setFont } = useEmbeddingContext();
+
+  return {
+    availableFonts: useSelector(state => getSetting(state, "available-fonts")),
+    currentFont: font,
+    setFont,
+  };
+};