feat: Enable theme overrides for components in catalog-graph plugin

Signed-off-by: Carlos Esteban Lopez <lcarlosesteb@vmware.com>

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -39,18 +39,21 @@ import {
   RelationPairs,
 } from '../EntityRelationsGraph';
 
-const useStyles = makeStyles<Theme, { height: number | undefined }>({
-  card: ({ height }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    maxHeight: height,
-    minHeight: height,
-  }),
-  graph: {
-    flex: 1,
-    minHeight: 0,
+const useStyles = makeStyles<Theme, { height: number | undefined }>(
+  {
+    card: ({ height }) => ({
+      display: 'flex',
+      flexDirection: 'column',
+      maxHeight: height,
+      minHeight: height,
+    }),
+    graph: {
+      flex: 1,
+      minHeight: 0,
+    },
   },
-});
+  { name: 'PluginCatalogGraphCatalogGraphCard' },
+);
 
 export const CatalogGraphCard = (props: {
   variant?: InfoCardVariants;

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx

@@ -48,57 +48,60 @@ import { SelectedRelationsFilter } from './SelectedRelationsFilter';
 import { SwitchFilter } from './SwitchFilter';
 import { useCatalogGraphPage } from './useCatalogGraphPage';
 
-const useStyles = makeStyles(theme => ({
-  content: {
-    minHeight: 0,
-  },
-  container: {
-    height: '100%',
-    maxHeight: '100%',
-    minHeight: 0,
-  },
-  fullHeight: {
-    maxHeight: '100%',
-    display: 'flex',
-    minHeight: 0,
-  },
-  graphWrapper: {
-    position: 'relative',
-    flex: 1,
-    minHeight: 0,
-    display: 'flex',
-  },
-  graph: {
-    flex: 1,
-    minHeight: 0,
-  },
-  legend: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    padding: theme.spacing(1),
-    '& .icon': {
-      verticalAlign: 'bottom',
+const useStyles = makeStyles(
+  theme => ({
+    content: {
+      minHeight: 0,
     },
-  },
-  filters: {
-    display: 'grid',
-    gridGap: theme.spacing(1),
-    gridAutoRows: 'auto',
-    [theme.breakpoints.up('lg')]: {
-      display: 'block',
+    container: {
+      height: '100%',
+      maxHeight: '100%',
+      minHeight: 0,
     },
-    [theme.breakpoints.only('md')]: {
-      gridTemplateColumns: 'repeat(3, 1fr)',
+    fullHeight: {
+      maxHeight: '100%',
+      display: 'flex',
+      minHeight: 0,
     },
-    [theme.breakpoints.only('sm')]: {
-      gridTemplateColumns: 'repeat(2, 1fr)',
+    graphWrapper: {
+      position: 'relative',
+      flex: 1,
+      minHeight: 0,
+      display: 'flex',
     },
-    [theme.breakpoints.down('xs')]: {
-      gridTemplateColumns: 'repeat(1, 1fr)',
+    graph: {
+      flex: 1,
+      minHeight: 0,
     },
-  },
-}));
+    legend: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      padding: theme.spacing(1),
+      '& .icon': {
+        verticalAlign: 'bottom',
+      },
+    },
+    filters: {
+      display: 'grid',
+      gridGap: theme.spacing(1),
+      gridAutoRows: 'auto',
+      [theme.breakpoints.up('lg')]: {
+        display: 'block',
+      },
+      [theme.breakpoints.only('md')]: {
+        gridTemplateColumns: 'repeat(3, 1fr)',
+      },
+      [theme.breakpoints.only('sm')]: {
+        gridTemplateColumns: 'repeat(2, 1fr)',
+      },
+      [theme.breakpoints.down('xs')]: {
+        gridTemplateColumns: 'repeat(1, 1fr)',
+      },
+    },
+  }),
+  { name: 'PluginCatalogGraphCatalogGraphPage' },
+);
 
 export const CatalogGraphPage = (props: {
   relationPairs?: RelationPairs;

plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx

@@ -30,12 +30,15 @@ export type Props = {
   onChange: (value: number) => void;
 };
 
-const useStyles = makeStyles({
-  formControl: {
-    width: '100%',
-    maxWidth: 300,
+const useStyles = makeStyles(
+  {
+    formControl: {
+      width: '100%',
+      maxWidth: 300,
+    },
   },
-});
+  { name: 'PluginCatalogGraphMaxDepthFilter' },
+);
 
 export const MaxDepthFilter = ({ value, onChange }: Props) => {
   const classes = useStyles();

plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx

@@ -30,11 +30,14 @@ import { Autocomplete } from '@material-ui/lab';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
-const useStyles = makeStyles({
-  formControl: {
-    maxWidth: 300,
+const useStyles = makeStyles(
+  {
+    formControl: {
+      maxWidth: 300,
+    },
   },
-});
+  { name: 'PluginCatalogGraphSelectedKindsFilter' },
+);
 
 export type Props = {
   value: string[] | undefined;

plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx

@@ -28,11 +28,14 @@ import { Autocomplete } from '@material-ui/lab';
 import React, { useCallback, useMemo } from 'react';
 import { RelationPairs } from '../EntityRelationsGraph';
 
-const useStyles = makeStyles({
-  formControl: {
-    maxWidth: 300,
+const useStyles = makeStyles(
+  {
+    formControl: {
+      maxWidth: 300,
+    },
   },
-});
+  { name: 'PluginCatalogGraphSelectedRelationsFilter' },
+);
 
 export type Props = {
   relationPairs: RelationPairs;

plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx

@@ -22,12 +22,15 @@ export type Props = {
   onChange: (value: boolean) => void;
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-    maxWidth: 300,
+const useStyles = makeStyles(
+  {
+    root: {
+      width: '100%',
+      maxWidth: 300,
+    },
   },
-});
+  { name: 'PluginCatalogGraphSwitchFilter' },
+);
 
 export const SwitchFilter = ({ label, value, onChange }: Props) => {
   const classes = useStyles();

plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx

@@ -20,14 +20,17 @@ import React from 'react';
 import { EntityEdgeData } from './types';
 import classNames from 'classnames';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
-  text: {
-    fill: theme.palette.textContrast,
-  },
-  secondary: {
-    fill: theme.palette.textSubtle,
-  },
-}));
+const useStyles = makeStyles(
+  (theme: BackstageTheme) => ({
+    text: {
+      fill: theme.palette.textContrast,
+    },
+    secondary: {
+      fill: theme.palette.textSubtle,
+    },
+  }),
+  { name: 'PluginCatalogGraphCustomLabel' },
+);
 
 export function CustomLabel({
   edge: { relations },

plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx

@@ -22,37 +22,40 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import { EntityKindIcon } from './EntityKindIcon';
 import { EntityNodeData } from './types';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
-  node: {
-    fill: theme.palette.grey[300],
-    stroke: theme.palette.grey[300],
+const useStyles = makeStyles(
+  (theme: BackstageTheme) => ({
+    node: {
+      fill: theme.palette.grey[300],
+      stroke: theme.palette.grey[300],
 
-    '&.primary': {
-      fill: theme.palette.primary.light,
-      stroke: theme.palette.primary.light,
+      '&.primary': {
+        fill: theme.palette.primary.light,
+        stroke: theme.palette.primary.light,
+      },
+      '&.secondary': {
+        fill: theme.palette.secondary.light,
+        stroke: theme.palette.secondary.light,
+      },
     },
-    '&.secondary': {
-      fill: theme.palette.secondary.light,
-      stroke: theme.palette.secondary.light,
-    },
-  },
-  text: {
-    fill: theme.palette.getContrastText(theme.palette.grey[300]),
+    text: {
+      fill: theme.palette.getContrastText(theme.palette.grey[300]),
 
-    '&.primary': {
-      fill: theme.palette.primary.contrastText,
+      '&.primary': {
+        fill: theme.palette.primary.contrastText,
+      },
+      '&.secondary': {
+        fill: theme.palette.secondary.contrastText,
+      },
+      '&.focused': {
+        fontWeight: 'bold',
+      },
     },
-    '&.secondary': {
-      fill: theme.palette.secondary.contrastText,
+    clickable: {
+      cursor: 'pointer',
     },
-    '&.focused': {
-      fontWeight: 'bold',
-    },
-  },
-  clickable: {
-    cursor: 'pointer',
-  },
-}));
+  }),
+  { name: 'PluginCatalogGraphCustomNode' },
+);
 
 export function CustomNode({
   node: {

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx

@@ -32,36 +32,39 @@ import { ALL_RELATION_PAIRS, RelationPairs } from './relations';
 import { Direction, EntityEdge, EntityNode } from './types';
 import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
 
-const useStyles = makeStyles(theme => ({
-  progress: {
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    marginLeft: '-20px',
-    marginTop: '-20px',
-  },
-  container: {
-    position: 'relative',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  graph: {
-    width: '100%',
-    flex: 1,
-    // Right now there is no good way to style edges between nodes, we have to
-    // fallback to these hacks:
-    '& path[marker-end]': {
-      transition: 'filter 0.1s ease-in-out',
+const useStyles = makeStyles(
+  theme => ({
+    progress: {
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      marginLeft: '-20px',
+      marginTop: '-20px',
     },
-    '& path[marker-end]:hover': {
-      filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,
+    container: {
+      position: 'relative',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
     },
-    '& g[data-testid=label]': {
-      transition: 'transform 0s',
+    graph: {
+      width: '100%',
+      flex: 1,
+      // Right now there is no good way to style edges between nodes, we have to
+      // fallback to these hacks:
+      '& path[marker-end]': {
+        transition: 'filter 0.1s ease-in-out',
+      },
+      '& path[marker-end]:hover': {
+        filter: `drop-shadow(2px 2px 4px ${theme.palette.primary.dark});`,
+      },
+      '& g[data-testid=label]': {
+        transition: 'transform 0s',
+      },
     },
-  },
-}));
+  }),
+  { name: 'PluginCatalogGraphEntityRelationsGraph' },
+);
 
 /**
  * Core building block for custom entity relations diagrams.