From 0358cd613fa3c32dc8211230c9564b1e611a3713 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 13 Nov 2023 17:54:58 +0100 Subject: [PATCH 1/3] chore: Add entry point for SliceHeader frontend extension --- .../superset-ui-core/src/ui-overrides/types.ts | 16 ++++++++++++++++ .../dashboard/components/FiltersBadge/index.tsx | 2 +- .../dashboard/components/SliceHeader/index.tsx | 8 +++++++- 3 files changed, 24 insertions(+), 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 index 0e7e0c9783944..8387ccfe0af0f 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,21 @@ export interface SQLResultTableExtentionProps { expandedColumns?: string[]; } +/** + * Interface for extensions to Slice Header + */ +export interface SliceHeaderExtension { + slice: { + description: string; + viz_type: string; + slice_name: string; + slice_id: number; + slice_description: string; + datasource: string; + }; + dashboardId: number; +} + export type Extensions = Partial<{ 'alertsreports.header.icon': React.ComponentType; 'embedded.documentation.configuration_details': React.ComponentType; @@ -147,4 +162,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 cb5d261a1b3a5..6dba29c6619b7 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/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx index c9cb74a8aff5e..fccf7e7d4d53a 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,9 @@ const SliceHeader: FC = ({
{!editMode && ( <> + {SliceHeaderExtension && ( + + )} {crossFilterValue && ( Date: Mon, 13 Nov 2023 18:21:09 +0100 Subject: [PATCH 2/3] add ut --- .../components/SliceHeader/SliceHeader.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx b/superset-frontend/src/dashboard/components/SliceHeader/SliceHeader.test.tsx index e16cab8daab86..f452e22ac82c8 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(); +}); From 2805d4e082633be89253405a411fea418a3b4468 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 14 Nov 2023 15:52:22 +0100 Subject: [PATCH 3/3] Pass only slice id --- .../packages/superset-ui-core/src/ui-overrides/types.ts | 9 +-------- .../src/dashboard/components/SliceHeader/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 9 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 index 8387ccfe0af0f..27646442de3d9 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 @@ -131,14 +131,7 @@ export interface SQLResultTableExtentionProps { * Interface for extensions to Slice Header */ export interface SliceHeaderExtension { - slice: { - description: string; - viz_type: string; - slice_name: string; - slice_id: number; - slice_description: string; - datasource: string; - }; + sliceId: number; dashboardId: number; } diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx index fccf7e7d4d53a..ea4f3b63ba8f3 100644 --- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx +++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx @@ -243,7 +243,10 @@ const SliceHeader: FC = ({ {!editMode && ( <> {SliceHeaderExtension && ( - + )} {crossFilterValue && (