From 41a26248c91c883bfd8f581dddc8abca9f2a3981 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Mon, 14 Aug 2023 11:36:35 -0600 Subject: [PATCH] Add support for material-ui overrides in explore Signed-off-by: Tim Hansen --- .changeset/few-ducks-bake.md | 5 + .../GroupsExplorerContent/GroupsDiagram.tsx | 103 +++++++++--------- .../GroupsExplorerContent.tsx | 15 ++- .../src/components/ToolCard/ToolCard.tsx | 45 ++++---- .../ToolSearchResultListItem.tsx | 21 ++-- 5 files changed, 105 insertions(+), 84 deletions(-) create mode 100644 .changeset/few-ducks-bake.md diff --git a/.changeset/few-ducks-bake.md b/.changeset/few-ducks-bake.md new file mode 100644 index 0000000000..b9ce6941c3 --- /dev/null +++ b/.changeset/few-ducks-bake.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-explore': patch +--- + +Support `material-ui` overrides in plugin-explore components diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index 127bd193bf..2c8f6f6a6e 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -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) { const nodeWidth = 180; diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx index 62c4b093c0..61757a35b6 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx @@ -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(); diff --git a/plugins/explore/src/components/ToolCard/ToolCard.tsx b/plugins/explore/src/components/ToolCard/ToolCard.tsx index a39806dceb..c2d9079f8f 100644 --- a/plugins/explore/src/components/ToolCard/ToolCard.tsx +++ b/plugins/explore/src/components/ToolCard/ToolCard.tsx @@ -32,27 +32,32 @@ import React from 'react'; // TODO: Align styling between Domain and ToolCard -const useStyles = makeStyles(theme => ({ - media: { - height: 128, +const useStyles = makeStyles( + 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; diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx index 1aad122ee6..cb99f1c125 100644 --- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx +++ b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx @@ -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}.