Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add 3 new extension points for inserting custom icons #22027

Merged
merged 4 commits into from
Nov 4, 2022
Merged

feat: Add 3 new extension points for inserting custom icons #22027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
579c409
Add icon extension points
jfrag1 Nov 3, 2022
940b94c
Remove debugging code
jfrag1 Nov 3, 2022
be79723
Remove bad import
jfrag1 Nov 3, 2022
b8f0160
Fix lint
jfrag1 Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions superset-frontend/packages/superset-ui-core/src/ui-overrides/ExtensionsRegistry.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,36 @@ type ReturningDisplayable<P = void> = (props: P) => string | React.ReactElement;
* When defining a new option here, take care to keep any parameters to functions (or components) minimal.
* Any removal or alteration to a parameter will be considered a breaking change.
*/

// from src/views/components/Menu, not imported since this is a separate package
interface MenuObjectChildProps {
label: string;
name?: string;
icon?: string;
index?: number;
url?: string;
isFrontendRoute?: boolean;
perm?: string | boolean;
view?: string;
disable?: boolean;
}

type ConfigDetailsProps = {
embeddedId: string;
};
type RightMenuItemIconProps = {
menuChild: MenuObjectChildProps;
};

export type Extensions = Partial<{
'alertsreports.header.icon': React.ComponentType;
'embedded.documentation.configuration_details': React.ComponentType<ConfigDetailsProps>;
'embedded.documentation.description': ReturningDisplayable;
'embedded.documentation.url': string;
'dashboard.nav.right': React.ComponentType;
'navbar.right-menu.item.icon': React.ComponentType<RightMenuItemIconProps>;
'navbar.right': React.ComponentType;
'report-modal.dropdown.item.icon': React.ComponentType;
'welcome.message': React.ComponentType;
'welcome.banner': React.ComponentType;
'welcome.main.replacement': React.ComponentType;
Expand Down
28 changes: 27 additions & 1 deletion superset-frontend/src/components/ReportModal/HeaderReportDropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ import {
t,
SupersetTheme,
css,
styled,
useTheme,
FeatureFlag,
isFeatureEnabled,
getExtensionsRegistry,
} from '@superset-ui/core';
import Icons from 'src/components/Icons';
import { Switch } from 'src/components/Switch';
Expand All @@ -46,6 +48,8 @@ import {
import { reportSelector } from 'src/views/CRUD/hooks';
import { MenuItemWithCheckboxContainer } from 'src/explore/components/useExploreAdditionalActionsMenu/index';

const extensionsRegistry = getExtensionsRegistry();

const deleteColor = (theme: SupersetTheme) => css`
color: ${theme.colors.error.base};
`;
Expand All @@ -70,6 +74,21 @@ const onMenuItemHover = (theme: SupersetTheme) => css`
background-color: ${theme.colors.secondary.light5};
}
`;

const StyledDropdownItemWithIcon = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
> *:first-child {
margin-right: ${({ theme }) => theme.gridUnit}px;
}
`;

const DropdownItemExtension = extensionsRegistry.get(
'report-modal.dropdown.item.icon',
);

export enum CreationMethod {
CHARTS = 'charts',
DASHBOARDS = 'dashboards',
Expand Down Expand Up @@ -204,7 +223,14 @@ export default function HeaderReportDropDown({
) : (
<Menu selectable={false} css={onMenuHover}>
<Menu.Item onClick={handleShowMenu}>
{t('Set up an email report')}
{DropdownItemExtension ? (
<StyledDropdownItemWithIcon>
<div>{t('Set up an email report')}</div>
<DropdownItemExtension />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to be this specific, or could we use an extension for the whole item, passing down the text instead?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure here. On one hand having the extension be a whole replacement would allow for much more flexibility for anyone looking to use it. On the other hand, having it be specific provides one rigid supported pattern for the extension, which could be seen as a benefit.

</StyledDropdownItemWithIcon>
) : (
t('Set up an email report')
)}
</Menu.Item>
<Menu.Divider />
</Menu>
Expand Down
33 changes: 31 additions & 2 deletions superset-frontend/src/views/CRUD/alert/AlertList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@

import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { t, SupersetClient, makeApi, styled } from '@superset-ui/core';
import {
t,
SupersetClient,
makeApi,
styled,
getExtensionsRegistry,
} from '@superset-ui/core';
import moment from 'moment';
import ActionsBar, { ActionProps } from 'src/components/ListView/ActionsBar';
import FacePile from 'src/components/FacePile';
Expand Down Expand Up @@ -49,6 +55,8 @@ import Owner from 'src/types/Owner';
import AlertReportModal from './AlertReportModal';
import { AlertObject, AlertState } from './types';

const extensionsRegistry = getExtensionsRegistry();

const PAGE_SIZE = 25;

const AlertStateLabel: Record<AlertState, string> = {
Expand Down Expand Up @@ -82,6 +90,18 @@ const RefreshContainer = styled.div`
background-color: ${({ theme }) => theme.colors.grayscale.light5};
`;

const StyledHeaderWithIcon = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
> *:first-child {
margin-right: ${({ theme }) => theme.gridUnit}px;
}
`;

const HeaderExtension = extensionsRegistry.get('alertsreports.header.icon');

function AlertList({
addDangerToast,
isReportEnabled = false,
Expand Down Expand Up @@ -491,11 +511,20 @@ function AlertList({
[],
);

const header = HeaderExtension ? (
<StyledHeaderWithIcon>
<div>{t('Alerts & reports')}</div>
<HeaderExtension />
</StyledHeaderWithIcon>
) : (
t('Alerts & reports')
);

return (
<>
<SubMenu
activeChild={pathName}
name={t('Alerts & reports')}
name={header}
tabs={[
{
name: 'Alerts',
Expand Down
22 changes: 20 additions & 2 deletions superset-frontend/src/views/components/RightMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,13 @@ const StyledDiv = styled.div<{ align: string }>`
}
`;

const StyledMenuItemWithIcon = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
`;

const StyledAnchor = styled.a`
padding-right: ${({ theme }) => theme.gridUnit}px;
padding-left: ${({ theme }) => theme.gridUnit}px;
Expand Down Expand Up @@ -330,6 +337,9 @@ const RightMenu = ({
return null;
};
const RightMenuExtension = extensionsRegistry.get('navbar.right');
const RightMenuItemIconExtension = extensionsRegistry.get(
'navbar.right-menu.item.icon',
);

const handleDatabaseAdd = () => setQuery({ databaseAdded: true });
const handleDatasetAdd = () => setQuery({ datasetAdded: true });
Expand Down Expand Up @@ -447,12 +457,20 @@ const RightMenu = ({
<Menu.ItemGroup key={`${section.label}`} title={section.label}>
{section?.childs?.map?.(child => {
if (typeof child !== 'string') {
const menuItemDisplay = RightMenuItemIconExtension ? (
<StyledMenuItemWithIcon>
{child.label}
<RightMenuItemIconExtension menuChild={child} />
</StyledMenuItemWithIcon>
) : (
child.label
);
return (
<Menu.Item key={`${child.label}`}>
{isFrontendRoute(child.url) ? (
<Link to={child.url || ''}>{child.label}</Link>
<Link to={child.url || ''}>{menuItemDisplay}</Link>
) : (
<a href={child.url}>{child.label}</a>
<a href={child.url}>{menuItemDisplay}</a>
)}
</Menu.Item>
);
Expand Down