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 index 0e7e0c9783..27646442de 100644 --- 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; @@ -147,4 +155,5 @@ export type Extensions = Partial<{ 'dataset.delete.related': React.ComponentType; 'sqleditor.extension.form': React.ComponentType; 'sqleditor.extension.resultTable': React.ComponentType; + 'dashboard.slice.header': React.ComponentType; }>; diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx index cb5d261a1b..6dba29c661 100644 --- 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 index e16cab8daa..f452e22ac8 100644 --- 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', () => ( +
This is an extension
+ )); + + const props = createProps(); + render(, { 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 index c9cb74a8af..ea4f3b63ba 100644 --- 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 = ({ width, height, }) => { + const SliceHeaderExtension = extensionsRegistry.get('dashboard.slice.header'); const uiConfig = useUiConfig(); const dashboardPageId = useContext(DashboardPageIdContext); const [headerTooltip, setHeaderTooltip] = useState(null); @@ -239,6 +242,12 @@ const SliceHeader: FC = ({
{!editMode && ( <> + {SliceHeaderExtension && ( + + )} {crossFilterValue && (