mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
chore: Add entry point for SliceHeader frontend extension (#25968)
This commit is contained in:
parent
007d22199d
commit
6b7761ecf2
@ -127,6 +127,14 @@ export interface SQLResultTableExtentionProps {
|
|||||||
expandedColumns?: string[];
|
expandedColumns?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Interface for extensions to Slice Header
|
||||||
|
*/
|
||||||
|
export interface SliceHeaderExtension {
|
||||||
|
sliceId: number;
|
||||||
|
dashboardId: number;
|
||||||
|
}
|
||||||
|
|
||||||
export type Extensions = Partial<{
|
export type Extensions = Partial<{
|
||||||
'alertsreports.header.icon': React.ComponentType;
|
'alertsreports.header.icon': React.ComponentType;
|
||||||
'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
|
'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
|
||||||
@ -147,4 +155,5 @@ export type Extensions = Partial<{
|
|||||||
'dataset.delete.related': React.ComponentType<DatasetDeleteRelatedExtensionProps>;
|
'dataset.delete.related': React.ComponentType<DatasetDeleteRelatedExtensionProps>;
|
||||||
'sqleditor.extension.form': React.ComponentType<SQLFormExtensionProps>;
|
'sqleditor.extension.form': React.ComponentType<SQLFormExtensionProps>;
|
||||||
'sqleditor.extension.resultTable': React.ComponentType<SQLResultTableExtentionProps>;
|
'sqleditor.extension.resultTable': React.ComponentType<SQLResultTableExtentionProps>;
|
||||||
|
'dashboard.slice.header': React.ComponentType<SliceHeaderExtension>;
|
||||||
}>;
|
}>;
|
||||||
|
@ -59,7 +59,7 @@ const StyledFilterCount = styled.div`
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
color: ${theme.colors.grayscale.base};
|
color: ${theme.colors.grayscale.base};
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${theme.colors.grayscale.light1}
|
color: ${theme.colors.grayscale.light1};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Router } from 'react-router-dom';
|
import { Router } from 'react-router-dom';
|
||||||
import { createMemoryHistory } from 'history';
|
import { createMemoryHistory } from 'history';
|
||||||
|
import { getExtensionsRegistry } from '@superset-ui/core';
|
||||||
import { render, screen } from 'spec/helpers/testing-library';
|
import { render, screen } from 'spec/helpers/testing-library';
|
||||||
import userEvent from '@testing-library/user-event';
|
import userEvent from '@testing-library/user-event';
|
||||||
import SliceHeader from '.';
|
import SliceHeader from '.';
|
||||||
@ -472,3 +473,15 @@ test('Correct actions to "SliceHeaderControls"', () => {
|
|||||||
userEvent.click(screen.getByTestId('handleToggleFullSize'));
|
userEvent.click(screen.getByTestId('handleToggleFullSize'));
|
||||||
expect(props.handleToggleFullSize).toBeCalledTimes(1);
|
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();
|
||||||
|
});
|
||||||
|
@ -24,7 +24,7 @@ import React, {
|
|||||||
useRef,
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} 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 { useUiConfig } from 'src/components/UiConfigContext';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
@ -38,6 +38,8 @@ import { RootState } from 'src/dashboard/types';
|
|||||||
import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
|
import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
|
||||||
import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
|
import { DashboardPageIdContext } from 'src/dashboard/containers/DashboardPage';
|
||||||
|
|
||||||
|
const extensionsRegistry = getExtensionsRegistry();
|
||||||
|
|
||||||
type SliceHeaderProps = SliceHeaderControlsProps & {
|
type SliceHeaderProps = SliceHeaderControlsProps & {
|
||||||
innerRef?: string;
|
innerRef?: string;
|
||||||
updateSliceName?: (arg0: string) => void;
|
updateSliceName?: (arg0: string) => void;
|
||||||
@ -161,6 +163,7 @@ const SliceHeader: FC<SliceHeaderProps> = ({
|
|||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
}) => {
|
}) => {
|
||||||
|
const SliceHeaderExtension = extensionsRegistry.get('dashboard.slice.header');
|
||||||
const uiConfig = useUiConfig();
|
const uiConfig = useUiConfig();
|
||||||
const dashboardPageId = useContext(DashboardPageIdContext);
|
const dashboardPageId = useContext(DashboardPageIdContext);
|
||||||
const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
|
const [headerTooltip, setHeaderTooltip] = useState<ReactNode | null>(null);
|
||||||
@ -239,6 +242,12 @@ const SliceHeader: FC<SliceHeaderProps> = ({
|
|||||||
<div className="header-controls">
|
<div className="header-controls">
|
||||||
{!editMode && (
|
{!editMode && (
|
||||||
<>
|
<>
|
||||||
|
{SliceHeaderExtension && (
|
||||||
|
<SliceHeaderExtension
|
||||||
|
sliceId={slice.slice_id}
|
||||||
|
dashboardId={dashboardId}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{crossFilterValue && (
|
{crossFilterValue && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
placement="top"
|
placement="top"
|
||||||
|
Loading…
Reference in New Issue
Block a user