From 5091a36ca623e74b44585471ed7c75dead3c8e34 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Thu, 30 Sep 2021 18:40:14 -0500 Subject: [PATCH 1/6] Expose SystemDiagramCard to material-ui overrides Signed-off-by: Daniel Ortiz Lira --- .../SystemDiagramCard/SystemDiagramCard.tsx | 54 +++++++++++-------- .../src/components/SystemDiagramCard/index.ts | 1 + 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx index b3326abaab..9e46fabefb 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx @@ -46,28 +46,38 @@ import { import { useApi, useRouteRef } from '@backstage/core-plugin-api'; -const useStyles = makeStyles((theme: BackstageTheme) => ({ - domainNode: { - fill: theme.palette.primary.main, - stroke: theme.palette.border, - }, - systemNode: { - fill: 'coral', - stroke: theme.palette.border, - }, - componentNode: { - fill: 'yellowgreen', - stroke: theme.palette.border, - }, - apiNode: { - fill: theme.palette.gold, - stroke: theme.palette.border, - }, - resourceNode: { - fill: 'grey', - stroke: theme.palette.border, - }, -})); +export type SystemDiagramCardClassKey = + | 'domainNode' + | 'systemNode' + | 'componentNode' + | 'apiNode' + | 'resourceNode'; + +const useStyles = makeStyles( + (theme: BackstageTheme) => ({ + domainNode: { + fill: theme.palette.primary.main, + stroke: theme.palette.border, + }, + systemNode: { + fill: 'coral', + stroke: theme.palette.border, + }, + componentNode: { + fill: 'yellowgreen', + stroke: theme.palette.border, + }, + apiNode: { + fill: theme.palette.gold, + stroke: theme.palette.border, + }, + resourceNode: { + fill: 'grey', + stroke: theme.palette.border, + }, + }), + { name: 'PluginCatalogSystemDiagramCard' }, +); // Simplifies the diagram output by hiding the default namespace and kind function readableEntityName( diff --git a/plugins/catalog/src/components/SystemDiagramCard/index.ts b/plugins/catalog/src/components/SystemDiagramCard/index.ts index 4c1427c838..bc9ed6309d 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/index.ts +++ b/plugins/catalog/src/components/SystemDiagramCard/index.ts @@ -15,3 +15,4 @@ */ export { SystemDiagramCard } from './SystemDiagramCard'; +export type { SystemDiagramCardClassKey } from './SystemDiagramCard'; From a4bb6dc73b0e5f26af3ba72264c68408dd51d6f3 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Thu, 30 Sep 2021 18:40:54 -0500 Subject: [PATCH 2/6] Expose EntityLinksEmptyState to material-ui overrides Signed-off-by: Daniel Ortiz Lira --- .../EntityLinksCard/EntityLinksEmptyState.tsx | 19 ++++++++++++------- .../src/components/EntityLinksCard/index.ts | 1 + 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx index b0e8ee5d74..0da92a9f03 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx @@ -26,13 +26,18 @@ const ENTITY_YAML = `metadata: title: My Dashboard icon: dashboard`; -const useStyles = makeStyles(theme => ({ - code: { - borderRadius: 6, - margin: `${theme.spacing(2)}px 0px`, - background: theme.palette.type === 'dark' ? '#444' : '#fff', - }, -})); +export type EntityLinksEmptyStateClassKey = 'code'; + +const useStyles = makeStyles( + theme => ({ + code: { + borderRadius: 6, + margin: `${theme.spacing(2)}px 0px`, + background: theme.palette.type === 'dark' ? '#444' : '#fff', + }, + }), + { name: 'PluginCatalogEntityLinksEmptyState' }, +); export const EntityLinksEmptyState = () => { const classes = useStyles(); diff --git a/plugins/catalog/src/components/EntityLinksCard/index.ts b/plugins/catalog/src/components/EntityLinksCard/index.ts index 04c30c0f68..fc53904a47 100644 --- a/plugins/catalog/src/components/EntityLinksCard/index.ts +++ b/plugins/catalog/src/components/EntityLinksCard/index.ts @@ -15,3 +15,4 @@ */ export { EntityLinksCard } from './EntityLinksCard'; +export type { EntityLinksEmptyStateClassKey } from './EntityLinksEmptyState'; From 241a9fe67a895fbf07da3303d8bb53b2a7de30b8 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Tue, 5 Oct 2021 10:54:24 -0500 Subject: [PATCH 3/6] Expose overridableComponents type from the package root Signed-off-by: Daniel Ortiz Lira --- plugins/catalog/src/index.ts | 1 + plugins/catalog/src/overridableComponents.ts | 31 ++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 plugins/catalog/src/overridableComponents.ts diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 54f4da5e7e..5a8ee84fa8 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -33,6 +33,7 @@ export * from './components/EntityProcessingErrorsPanel'; export * from './components/EntityPageLayout'; export * from './components/EntitySwitch'; export * from './components/FilteredEntityLayout'; +export * from './overridableComponents'; export { Router } from './components/Router'; export { CatalogEntityPage, diff --git a/plugins/catalog/src/overridableComponents.ts b/plugins/catalog/src/overridableComponents.ts new file mode 100644 index 0000000000..caa923692c --- /dev/null +++ b/plugins/catalog/src/overridableComponents.ts @@ -0,0 +1,31 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { Overrides } from '@material-ui/core/styles/overrides'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; + +import { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard'; +import { SystemDiagramCardClassKey } from './components/SystemDiagramCard'; + +type PluginCatalogComponentsNameToClassKey = { + PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey; + PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; +}; + +export type BackstageOverrides = Overrides & { + [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial< + StyleRules + >; +}; From 3ddb4d93532b2b38af97f5a83af000e1ef593d29 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Tue, 5 Oct 2021 10:58:12 -0500 Subject: [PATCH 4/6] Build api reports Signed-off-by: Daniel Ortiz Lira --- plugins/catalog/api-report.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 4937a3eb86..a404dbab89 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -23,10 +23,12 @@ import { IconComponent } from '@backstage/core-plugin-api'; import { IdentityApi } from '@backstage/core-plugin-api'; import { InfoCardVariants } from '@backstage/core-components'; import { Location as Location_2 } from '@backstage/catalog-model'; +import { Overrides } from '@material-ui/core/styles/overrides'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; +import { StyleRules } from '@material-ui/core/styles/withStyles'; import { TableColumn } from '@backstage/core-components'; import { TableProps } from '@backstage/core-components'; import { TabProps } from '@material-ui/core'; @@ -55,6 +57,16 @@ export const AboutField: ({ children, }: Props_2) => JSX.Element; +// Warning: (ae-forgotten-export) The symbol "PluginCatalogComponentsNameToClassKey" needs to be exported by the entry point index.d.ts +// Warning: (ae-missing-release-tag) "BackstageOverrides" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type BackstageOverrides = Overrides & { + [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial< + StyleRules + >; +}; + // Warning: (ae-missing-release-tag) "CatalogClientWrapper" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public From 93a13dfb422705fca0946182bb9e7ede9ff5609c Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Mon, 11 Oct 2021 16:30:50 -0500 Subject: [PATCH 5/6] Add changeset for @backstage/plugin-catalog package Signed-off-by: Daniel Ortiz Lira --- .changeset/large-pots-invent.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/large-pots-invent.md diff --git a/.changeset/large-pots-invent.md b/.changeset/large-pots-invent.md new file mode 100644 index 0000000000..269b0bd288 --- /dev/null +++ b/.changeset/large-pots-invent.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Support `material-ui` overrides in SystemDiagramCard and EmptityLinksEmptyState components From b4bdb1f1fa94b87a261bf7b40fcf1ae0b9d5d5e7 Mon Sep 17 00:00:00 2001 From: Daniel Ortiz Lira Date: Mon, 11 Oct 2021 18:30:32 -0500 Subject: [PATCH 6/6] Fix api-reports warnings Signed-off-by: Daniel Ortiz Lira --- plugins/catalog/api-report.md | 20 ++++++++++++++++--- .../EntityLinksCard/EntityLinksEmptyState.tsx | 1 + .../SystemDiagramCard/SystemDiagramCard.tsx | 1 + plugins/catalog/src/index.ts | 3 +++ plugins/catalog/src/overridableComponents.ts | 4 +++- 5 files changed, 25 insertions(+), 4 deletions(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index a404dbab89..2be7fc8575 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -57,9 +57,6 @@ export const AboutField: ({ children, }: Props_2) => JSX.Element; -// Warning: (ae-forgotten-export) The symbol "PluginCatalogComponentsNameToClassKey" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "BackstageOverrides" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// // @public (undocumented) export type BackstageOverrides = Overrides & { [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial< @@ -335,6 +332,9 @@ export const EntityLinksCard: ({ variant?: 'gridItem' | undefined; }) => JSX.Element; +// @public (undocumented) +export type EntityLinksEmptyStateClassKey = 'code'; + // Warning: (ae-missing-release-tag) "EntityListContainer" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) @@ -436,6 +436,12 @@ export function isNamespace(namespace: string): (entity: Entity) => boolean; // @public (undocumented) export const isOrphan: (entity: Entity) => boolean; +// @public (undocumented) +export type PluginCatalogComponentsNameToClassKey = { + PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey; + PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; +}; + // Warning: (ae-missing-release-tag) "Router" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public @deprecated (undocumented) @@ -445,6 +451,14 @@ export const Router: ({ EntityPage?: React_2.ComponentType<{}> | undefined; }) => JSX.Element; +// @public (undocumented) +export type SystemDiagramCardClassKey = + | 'domainNode' + | 'systemNode' + | 'componentNode' + | 'apiNode' + | 'resourceNode'; + // Warnings were encountered during analysis: // // src/components/CatalogTable/CatalogTable.d.ts:10:5 - (ae-forgotten-export) The symbol "CatalogTableProps" needs to be exported by the entry point index.d.ts diff --git a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx index 0da92a9f03..54325ffb5d 100644 --- a/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx @@ -26,6 +26,7 @@ const ENTITY_YAML = `metadata: title: My Dashboard icon: dashboard`; +/** @public */ export type EntityLinksEmptyStateClassKey = 'code'; const useStyles = makeStyles( diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx index 9e46fabefb..984ae9f982 100644 --- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx +++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx @@ -46,6 +46,7 @@ import { import { useApi, useRouteRef } from '@backstage/core-plugin-api'; +/** @public */ export type SystemDiagramCardClassKey = | 'domainNode' | 'systemNode' diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 5a8ee84fa8..d804bbaf83 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -51,3 +51,6 @@ export { EntityLinksCard, EntitySystemDiagramCard, } from './plugin'; + +export type { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard'; +export type { SystemDiagramCardClassKey } from './components/SystemDiagramCard'; diff --git a/plugins/catalog/src/overridableComponents.ts b/plugins/catalog/src/overridableComponents.ts index caa923692c..e76aafbb68 100644 --- a/plugins/catalog/src/overridableComponents.ts +++ b/plugins/catalog/src/overridableComponents.ts @@ -19,11 +19,13 @@ import { StyleRules } from '@material-ui/core/styles/withStyles'; import { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard'; import { SystemDiagramCardClassKey } from './components/SystemDiagramCard'; -type PluginCatalogComponentsNameToClassKey = { +/** @public */ +export type PluginCatalogComponentsNameToClassKey = { PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey; PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey; }; +/** @public */ export type BackstageOverrides = Overrides & { [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial< StyleRules