chore: Add entry point for SliceHeader frontend extension (apache#25968)

vinothkumar66 · Nov 14, 2023 · c22c5df · c22c5df
1 parent cd52a58
commit c22c5df
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts b/superset-frontend/packages/superset-ui-core/src/ui-overrides/types.ts
@@ -127,6 +127,14 @@ export interface SQLResultTableExtentionProps {
   expandedColumns?: string[];
 }
 
+/**
+ * Interface for extensions to Slice Header
+ */
+export interface SliceHeaderExtension {
+  sliceId: number;
+  dashboardId: number;
+}
+
 export type Extensions = Partial<{
   'alertsreports.header.icon': React.ComponentType;
   'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
@@ -147,4 +155,5 @@ export type Extensions = Partial<{
   'dataset.delete.related': React.ComponentType<DatasetDeleteRelatedExtensionProps>;
   'sqleditor.extension.form': React.ComponentType<SQLFormExtensionProps>;
   'sqleditor.extension.resultTable': React.ComponentType<SQLResultTableExtentionProps>;
+  'dashboard.slice.header': React.ComponentType<SliceHeaderExtension>;
 }>;
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -59,7 +59,7 @@ const StyledFilterCount = styled.div`
       vertical-align: middle;
       color: ${theme.colors.grayscale.base};
       &:hover {
-        color: ${theme.colors.grayscale.light1}
+        color: ${theme.colors.grayscale.light1};
       }
     }
 

diff --git a/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx b/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
+import { getExtensionsRegistry } from '@superset-ui/core';
 import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import SliceHeader from '.';
@@ -472,3 +473,15 @@ test('Correct actions to "SliceHeaderControls"', () => {
   userEvent.click(screen.getByTestId('handleToggleFullSize'));
   expect(props.handleToggleFullSize).toBeCalledTimes(1);
 });
+
+test('Add extension to SliceHeader', () => {
+  const extensionsRegistry = getExtensionsRegistry();
+  extensionsRegistry.set('dashboard.slice.header', () => (
+    <div>This is an extension</div>
+  ));
+
+  const props = createProps();
+  render(<SliceHeader {...props} />, { useRedux: true, useRouter: true });
+
+  expect(screen.getByText('This is an extension')).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -24,7 +24,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { css, styled, t } from '@superset-ui/core';
+import { css, getExtensionsRegistry, styled, t } from '@superset-ui/core';
 import { useUiConfig } from 'src/components/UiConfigContext';
 import { Tooltip } from 'src/components/Tooltip';
 import { useSelector } from 'react-redux';
@@ -38,6 +38,8 @@ import { RootState } from 'src/dashboard/types';
 import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
 import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
 
+const extensionsRegistry = getExtensionsRegistry();
+
 type SliceHeaderProps = SliceHeaderControlsProps & {
   innerRef?: string;
   updateSliceName?: (arg0: string) => void;
@@ -161,6 +163,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
   width,
   height,
 }) => {
+  const SliceHeaderExtension = extensionsRegistry.get('dashboard.slice.header');
   const uiConfig = useUiConfig();
   const dashboardPageId = useContext(DashboardPageIdContext);
   const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
@@ -239,6 +242,12 @@ const SliceHeader: FC<SliceHeaderProps> = ({
       <div className="header-controls">
         {!editMode && (
           <>
+            {SliceHeaderExtension && (
+              <SliceHeaderExtension
+                sliceId={slice.slice_id}
+                dashboardId={dashboardId}
+              />
+            )}
             {crossFilterValue && (
               <Tooltip
                 placement="top"