Add support for material-ui overrides in explore

Signed-off-by: Tim Hansen <timbonicush@spotify.com>
2023-08-14 11:36:35 -06:00
parent 3c543a91e2
commit 41a26248c9
5 changed files with 105 additions and 84 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Support `material-ui` overrides in plugin-explore components
@@ -41,57 +41,62 @@ import classNames from 'classnames';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';

-const useStyles = makeStyles((theme: BackstageTheme) => ({
-  graph: {
-    minHeight: '100%',
-    flex: 1,
-  },
-  graphWrapper: {
-    display: 'flex',
-    height: '100%',
-  },
-  organizationNode: {
-    fill: theme.palette.secondary.light,
-    stroke: theme.palette.secondary.light,
-  },
-  groupNode: {
-    fill: theme.palette.primary.light,
-    stroke: theme.palette.primary.light,
-  },
-  centeredContent: {
-    padding: theme.spacing(1),
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: theme.palette.common.black,
-  },
-  legend: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    padding: theme.spacing(1),
-    '& .icon': {
-      verticalAlign: 'bottom',
+const useStyles = makeStyles(
+  (theme: BackstageTheme) => ({
+    graph: {
+      minHeight: '100%',
+      flex: 1,
    },
+    graphWrapper: {
+      display: 'flex',
+      height: '100%',
+    },
+    organizationNode: {
+      fill: theme.palette.secondary.light,
+      stroke: theme.palette.secondary.light,
+    },
+    groupNode: {
+      fill: theme.palette.primary.light,
+      stroke: theme.palette.primary.light,
+    },
+    centeredContent: {
+      padding: theme.spacing(1),
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: theme.palette.common.black,
+    },
+    legend: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      padding: theme.spacing(1),
+      '& .icon': {
+        verticalAlign: 'bottom',
+      },
+    },
+    textOrganization: {
+      color: theme.palette.secondary.contrastText,
+    },
+    textGroup: {
+      color: theme.palette.primary.contrastText,
+    },
+    textWrapper: {
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: 2,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      fontSize: '20px',
+    },
+  }),
+  {
+    name: 'ExploreGroupsDiagram',
  },
-  textOrganization: {
-    color: theme.palette.secondary.contrastText,
-  },
-  textGroup: {
-    color: theme.palette.primary.contrastText,
-  },
-  textWrapper: {
-    display: '-webkit-box',
-    WebkitBoxOrient: 'vertical',
-    WebkitLineClamp: 2,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: '20px',
-  },
-}));
+);

 function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
  const nodeWidth = 180;
@@ -23,13 +23,16 @@ import {
 } from '@backstage/core-components';
 import { makeStyles } from '@material-ui/core/styles';

-const useStyles = makeStyles({
-  root: {
-    height: '100%',
-    maxHeight: '100%',
-    minHeight: 0,
+const useStyles = makeStyles(
+  {
+    root: {
+      height: '100%',
+      maxHeight: '100%',
+      minHeight: 0,
+    },
  },
-});
+  { name: 'ExploreGroupsContent' },
+);

 export const GroupsExplorerContent = (props: { title?: string }) => {
  const classes = useStyles();
@@ -32,27 +32,32 @@ import React from 'react';

 // TODO: Align styling between Domain and ToolCard

-const useStyles = makeStyles<BackstageTheme>(theme => ({
-  media: {
-    height: 128,
+const useStyles = makeStyles<BackstageTheme>(
+  theme => ({
+    media: {
+      height: 128,
+    },
+    mediaContain: {
+      backgroundSize: 'contain',
+    },
+    lifecycle: {
+      lineHeight: '0.8em',
+      color: theme.palette.common.white,
+    },
+    ga: {
+      backgroundColor: theme.palette.status.ok,
+    },
+    alpha: {
+      backgroundColor: theme.palette.status.error,
+    },
+    beta: {
+      backgroundColor: theme.palette.status.warning,
+    },
+  }),
+  {
+    name: 'ExploreToolCard',
  },
-  mediaContain: {
-    backgroundSize: 'contain',
-  },
-  lifecycle: {
-    lineHeight: '0.8em',
-    color: theme.palette.common.white,
-  },
-  ga: {
-    backgroundColor: theme.palette.status.ok,
-  },
-  alpha: {
-    backgroundColor: theme.palette.status.error,
-  },
-  beta: {
-    backgroundColor: theme.palette.status.warning,
-  },
-}));
+);

 type Props = {
  card: ExploreTool;
@@ -29,16 +29,19 @@ import {
 } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';

-const useStyles = makeStyles({
-  flexContainer: {
-    flexWrap: 'wrap',
+const useStyles = makeStyles(
+  {
+    flexContainer: {
+      flexWrap: 'wrap',
+    },
+    itemText: {
+      width: '100%',
+      wordBreak: 'break-all',
+      marginBottom: '1rem',
+    },
  },
-  itemText: {
-    width: '100%',
-    wordBreak: 'break-all',
-    marginBottom: '1rem',
-  },
-});
+  { name: 'ExploreToolSearchResultListItem' },
+);

 /**
 * Props for {@link ToolSearchResultListItem}.