Merge pull request #7402 from danielortizlira/plugins-catalog-overrides

Plugins catalog component styles overrides

.changeset/large-pots-invent.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Support `material-ui` overrides in SystemDiagramCard and EmptityLinksEmptyState components

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,13 @@ export const AboutField: ({
   children,
 }: Props_2) => JSX.Element;
 
+// @public (undocumented)
+export type BackstageOverrides = Overrides & {
+  [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial<
+    StyleRules<PluginCatalogComponentsNameToClassKey[Name]>
+  >;
+};
+
 // Warning: (ae-missing-release-tag) "CatalogClientWrapper" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -323,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)
@@ -424,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)
@@ -433,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

plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx

@@ -26,13 +26,19 @@ const ENTITY_YAML = `metadata:
       title: My Dashboard
       icon: dashboard`;
 
-const useStyles = makeStyles<BackstageTheme>(theme => ({
-  code: {
-    borderRadius: 6,
-    margin: `${theme.spacing(2)}px 0px`,
-    background: theme.palette.type === 'dark' ? '#444' : '#fff',
-  },
-}));
+/** @public */
+export type EntityLinksEmptyStateClassKey = 'code';
+
+const useStyles = makeStyles<BackstageTheme>(
+  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();

plugins/catalog/src/components/EntityLinksCard/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { EntityLinksCard } from './EntityLinksCard';
+export type { EntityLinksEmptyStateClassKey } from './EntityLinksEmptyState';

plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx

@@ -46,28 +46,39 @@ 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,
-  },
-}));
+/** @public */
+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(

plugins/catalog/src/components/SystemDiagramCard/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { SystemDiagramCard } from './SystemDiagramCard';
+export type { SystemDiagramCardClassKey } from './SystemDiagramCard';

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,
@@ -50,3 +51,6 @@ export {
   EntityLinksCard,
   EntitySystemDiagramCard,
 } from './plugin';
+
+export type { EntityLinksEmptyStateClassKey } from './components/EntityLinksCard';
+export type { SystemDiagramCardClassKey } from './components/SystemDiagramCard';

plugins/catalog/src/overridableComponents.ts

@@ -0,0 +1,33 @@
+/*
+ * 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';
+
+/** @public */
+export type PluginCatalogComponentsNameToClassKey = {
+  PluginCatalogEntityLinksEmptyState: EntityLinksEmptyStateClassKey;
+  PluginCatalogSystemDiagramCard: SystemDiagramCardClassKey;
+};
+
+/** @public */
+export type BackstageOverrides = Overrides & {
+  [Name in keyof PluginCatalogComponentsNameToClassKey]?: Partial<
+    StyleRules<PluginCatalogComponentsNameToClassKey[Name]>
+  >;
+};