diff --git a/.changeset/lazy-nails-study.md b/.changeset/lazy-nails-study.md new file mode 100644 index 0000000000..8d365c4662 --- /dev/null +++ b/.changeset/lazy-nails-study.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +feat: Enable theme overrides for components in catalog-graph plugin diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 5cb86db69f..40ee90d784 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -39,18 +39,21 @@ import { RelationPairs, } from '../EntityRelationsGraph'; -const useStyles = makeStyles({ - card: ({ height }) => ({ - display: 'flex', - flexDirection: 'column', - maxHeight: height, - minHeight: height, - }), - graph: { - flex: 1, - minHeight: 0, +const useStyles = makeStyles( + { + card: ({ height }) => ({ + display: 'flex', + flexDirection: 'column', + maxHeight: height, + minHeight: height, + }), + graph: { + flex: 1, + minHeight: 0, + }, }, -}); + { name: 'PluginCatalogGraphCatalogGraphCard' }, +); export const CatalogGraphCard = (props: { variant?: InfoCardVariants; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index a6a6c2a711..4a36d516e2 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/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; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx index 7828a60fb6..b6b03d8831 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/MaxDepthFilter.tsx +++ b/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(); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx index 316f83da62..0817a01e0b 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedKindsFilter.tsx +++ b/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; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx index 839bfbe425..197f65cef8 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SelectedRelationsFilter.tsx +++ b/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; diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx index 214080db6e..495f6b4db2 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/SwitchFilter.tsx +++ b/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(); diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx index 60a858eee6..19082cfe81 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomLabel.tsx +++ b/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 }, diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx index ae541fa997..edcdb97fcb 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx +++ b/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: { diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index c0e2f610c1..72ec4b4aed 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/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.