feat: embedded dashboard core

superset-frontend/packages/superset-ui-core/src/connection/SupersetClient.ts

@@ -20,6 +20,7 @@
 import SupersetClientClass from './SupersetClientClass';
 import { SupersetClientInterface } from './types';
 
+// this is local to this file, don't expose it
 let singletonClient: SupersetClientClass | undefined;
 
 function getInstance(): SupersetClientClass {
@@ -39,7 +40,6 @@ const SupersetClient: SupersetClientInterface = {
   reset: () => {
     singletonClient = undefined;
   },
-  getInstance,
   delete: request => getInstance().delete(request),
   get: request => getInstance().get(request),
   init: force => getInstance().init(force),

superset-frontend/packages/superset-ui-core/src/connection/SupersetClientClass.ts

@@ -40,6 +40,10 @@ export default class SupersetClientClass {
 
   csrfPromise?: CsrfPromise;
 
+  guestToken?: string;
+
+  guestTokenHeaderName: string;
+
   fetchRetryOptions?: FetchRetryOptions;
 
   baseUrl: string;
@@ -64,6 +68,8 @@ export default class SupersetClientClass {
     timeout,
     credentials = undefined,
     csrfToken = undefined,
+    guestToken = undefined,
+    guestTokenHeaderName = 'X-GuestToken',
   }: ClientConfig = {}) {
     const url = new URL(
       host || protocol
@@ -81,6 +87,8 @@ export default class SupersetClientClass {
     this.timeout = timeout;
     this.credentials = credentials;
     this.csrfToken = csrfToken;
+    this.guestToken = guestToken;
+    this.guestTokenHeaderName = guestTokenHeaderName;
     this.fetchRetryOptions = {
       ...DEFAULT_FETCH_RETRY_OPTIONS,
       ...fetchRetryOptions,
@@ -89,6 +97,9 @@ export default class SupersetClientClass {
       this.headers = { ...this.headers, 'X-CSRFToken': this.csrfToken };
       this.csrfPromise = Promise.resolve(this.csrfToken);
     }
+    if (guestToken) {
+      this.headers[guestTokenHeaderName] = guestToken;
+    }
   }
 
   async init(force = false): CsrfPromise {

superset-frontend/packages/superset-ui-core/src/connection/types.ts

@@ -130,6 +130,8 @@ export interface ClientConfig {
   protocol?: Protocol;
   credentials?: Credentials;
   csrfToken?: CsrfToken;
+  guestToken?: string;
+  guestTokenHeaderName?: string;
   fetchRetryOptions?: FetchRetryOptions;
   headers?: Headers;
   mode?: Mode;
@@ -149,7 +151,6 @@ export interface SupersetClientInterface
     | 'reAuthenticate'
   > {
   configure: (config?: ClientConfig) => SupersetClientClass;
-  getInstance: (maybeClient?: SupersetClientClass) => SupersetClientClass;
   reset: () => void;
 }
 

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -40,6 +40,7 @@ export enum FeatureFlag {
   DASHBOARD_CROSS_FILTERS = 'DASHBOARD_CROSS_FILTERS',
   DASHBOARD_NATIVE_FILTERS_SET = 'DASHBOARD_NATIVE_FILTERS_SET',
   DASHBOARD_FILTERS_EXPERIMENTAL = 'DASHBOARD_FILTERS_EXPERIMENTAL',
+  EMBEDDED_SUPERSET = 'EMBEDDED_SUPERSET',
   ENABLE_FILTER_BOX_MIGRATION = 'ENABLE_FILTER_BOX_MIGRATION',
   VERSIONED_EXPORT = 'VERSIONED_EXPORT',
   GLOBAL_ASYNC_QUERIES = 'GLOBAL_ASYNC_QUERIES',

superset-frontend/packages/superset-ui-core/test/connection/SupersetClientClass.test.ts

@@ -328,6 +328,26 @@ describe('SupersetClientClass', () => {
       );
     });
 
+    it('uses a guest token when provided', async () => {
+      expect.assertions(1);
+
+      const client = new SupersetClientClass({
+        protocol,
+        host,
+        guestToken: 'abc123',
+        guestTokenHeaderName: 'guestTokenHeader',
+      });
+
+      await client.init();
+      await client.get({ url: mockGetUrl });
+      const fetchRequest = fetchMock.calls(mockGetUrl)[0][1] as CallApi;
+      expect(fetchRequest.headers).toEqual(
+        expect.objectContaining({
+          guestTokenHeader: 'abc123',
+        }),
+      );
+    });
+
     describe('.get()', () => {
       it('makes a request using url or endpoint', async () => {
         expect.assertions(2);

superset-frontend/src/components/UiConfigContext/index.tsx

@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { createContext, useContext, useState } from 'react';
+import { URL_PARAMS } from 'src/constants';
+import { getUrlParam } from 'src/utils/urlUtils';
+
+interface UiConfigType {
+  hideTitle: boolean;
+  hideTab: boolean;
+  hideNav: boolean;
+  hideChartControls: boolean;
+}
+interface EmbeddedUiConfigProviderProps {
+  children: JSX.Element;
+}
+
+export const UiConfigContext = createContext<UiConfigType>({
+  hideTitle: false,
+  hideTab: false,
+  hideNav: false,
+  hideChartControls: false,
+});
+
+export const useUiConfig = () => useContext(UiConfigContext);
+
+export const EmbeddedUiConfigProvider: React.FC<EmbeddedUiConfigProviderProps> =
+  ({ children }) => {
+    const config = getUrlParam(URL_PARAMS.uiConfig);
+    const [embeddedConfig] = useState({
+      hideTitle: (config & 1) !== 0,
+      hideTab: (config & 2) !== 0,
+      hideNav: (config & 4) !== 0,
+      hideChartControls: (config & 8) !== 0,
+    });
+
+    return (
+      <UiConfigContext.Provider value={embeddedConfig}>
+        {children}
+      </UiConfigContext.Provider>
+    );
+  };

superset-frontend/src/constants.ts

@@ -31,6 +31,10 @@ export const URL_PARAMS = {
     name: 'standalone',
     type: 'number',
   },
+  uiConfig: {
+    name: 'uiConfig',
+    type: 'number',
+  },
   preselectFilters: {
     name: 'preselect_filters',
     type: 'object',

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -49,6 +49,7 @@ import {
 import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar';
 import Loading from 'src/components/Loading';
 import { Global } from '@emotion/react';
+import { useUiConfig } from 'src/components/UiConfigContext';
 import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
 import DashboardContainer from './DashboardContainer';
 import { useNativeFilters } from './state';
@@ -199,6 +200,8 @@ const StyledDashboardContent = styled.div<{
 
 const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const dispatch = useDispatch();
+  const uiConfig = useUiConfig();
+
   const dashboardLayout = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
@@ -243,7 +246,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const standaloneMode = getUrlParam(URL_PARAMS.standalone);
   const isReport = standaloneMode === DashboardStandaloneMode.REPORT;
   const hideDashboardHeader =
-    standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE || isReport;
+    uiConfig.hideTitle ||
+    standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
+    isReport;
 
   const barTopOffset =
     (hideDashboardHeader ? 0 : HEADER_HEIGHT) +
@@ -288,7 +293,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       <div>
         {!hideDashboardHeader && <DashboardHeader />}
         {dropIndicatorProps && <div {...dropIndicatorProps} />}
-        {!isReport && topLevelTabs && (
+        {!isReport && topLevelTabs && !uiConfig.hideNav && (
           <WithPopoverMenu
             shouldFocus={shouldFocusTabs}
             menuItems={[
@@ -321,6 +326,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       hideDashboardHeader,
       isReport,
       topLevelTabs,
+      uiConfig.hideNav,
     ],
   );
 

superset-frontend/src/dashboard/components/SliceHeader/index.tsx

@@ -18,6 +18,7 @@
  */
 import React, { FC, useMemo } from 'react';
 import { styled, t } from '@superset-ui/core';
+import { useUiConfig } from 'src/components/UiConfigContext';
 import { Tooltip } from 'src/components/Tooltip';
 import { useDispatch, useSelector } from 'react-redux';
 import EditableTitle from 'src/components/EditableTitle';
@@ -44,7 +45,6 @@ type SliceHeaderProps = SliceHeaderControlsProps & {
 
 const annotationsLoading = t('Annotation layers are still loading.');
 const annotationsError = t('One ore more annotation layers failed loading.');
-
 const CrossFilterIcon = styled(Icons.CursorTarget)`
   cursor: pointer;
   color: ${({ theme }) => theme.colors.primary.base};
@@ -84,6 +84,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   formData,
 }) => {
   const dispatch = useDispatch();
+  const uiConfig = useUiConfig();
   // TODO: change to indicator field after it will be implemented
   const crossFilterValue = useSelector<RootState, any>(
     state => state.dataMask[slice?.slice_id]?.filterState?.value,
@@ -157,32 +158,36 @@ const SliceHeader: FC<SliceHeaderProps> = ({
                 />
               </Tooltip>
             )}
-            <FiltersBadge chartId={slice.slice_id} />
-            <SliceHeaderControls
-              slice={slice}
-              isCached={isCached}
-              isExpanded={isExpanded}
-              cachedDttm={cachedDttm}
-              updatedDttm={updatedDttm}
-              toggleExpandSlice={toggleExpandSlice}
-              forceRefresh={forceRefresh}
-              logExploreChart={logExploreChart}
-              exploreUrl={exploreUrl}
-              exportCSV={exportCSV}
-              exportFullCSV={exportFullCSV}
-              supersetCanExplore={supersetCanExplore}
-              supersetCanShare={supersetCanShare}
-              supersetCanCSV={supersetCanCSV}
-              sliceCanEdit={sliceCanEdit}
-              componentId={componentId}
-              dashboardId={dashboardId}
-              addSuccessToast={addSuccessToast}
-              addDangerToast={addDangerToast}
-              handleToggleFullSize={handleToggleFullSize}
-              isFullSize={isFullSize}
-              chartStatus={chartStatus}
-              formData={formData}
-            />
+            {!uiConfig.hideChartControls && (
+              <FiltersBadge chartId={slice.slice_id} />
+            )}
+            {!uiConfig.hideChartControls && (
+              <SliceHeaderControls
+                slice={slice}
+                isCached={isCached}
+                isExpanded={isExpanded}
+                cachedDttm={cachedDttm}
+                updatedDttm={updatedDttm}
+                toggleExpandSlice={toggleExpandSlice}
+                forceRefresh={forceRefresh}
+                logExploreChart={logExploreChart}
+                exploreUrl={exploreUrl}
+                exportCSV={exportCSV}
+                exportFullCSV={exportFullCSV}
+                supersetCanExplore={supersetCanExplore}
+                supersetCanShare={supersetCanShare}
+                supersetCanCSV={supersetCanCSV}
+                sliceCanEdit={sliceCanEdit}
+                componentId={componentId}
+                dashboardId={dashboardId}
+                addSuccessToast={addSuccessToast}
+                addDangerToast={addDangerToast}
+                handleToggleFullSize={handleToggleFullSize}
+                isFullSize={isFullSize}
+                chartStatus={chartStatus}
+                formData={formData}
+              />
+            )}
           </>
         )}
       </div>