From 916da47e8abdb880877daa18881eb8fdbb33e70a Mon Sep 17 00:00:00 2001 From: David Weber Date: Thu, 21 Dec 2023 13:59:48 +0100 Subject: [PATCH] feat: change default icon for unknown entities Signed-off-by: David Weber --- .changeset/cold-cooks-care.md | 9 ++++++ .../DefaultRenderNode.tsx | 9 ++++-- .../EntityRelationsGraph/EntityKindIcon.tsx | 4 +-- .../EntityListComponent.tsx | 12 +++---- .../components/AncestryPage.tsx | 32 +++++++++++-------- .../components/ColocatedPage.tsx | 5 --- .../components/EntityKindIcon.tsx | 4 +-- .../components/OverviewPage.tsx | 4 --- .../DefaultEntityPresentationApi.ts | 5 +-- .../apis/EntityPresentationApi/defaults.tsx | 3 -- .../EntityValidationOutput/EntityResult.tsx | 24 +++++++------- 11 files changed, 57 insertions(+), 54 deletions(-) create mode 100644 .changeset/cold-cooks-care.md diff --git a/.changeset/cold-cooks-care.md b/.changeset/cold-cooks-care.md new file mode 100644 index 0000000000..56c41a55e9 --- /dev/null +++ b/.changeset/cold-cooks-care.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-entity-validation': patch +'@backstage/plugin-catalog-import': patch +'@backstage/plugin-catalog-graph': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-catalog': patch +--- + +Change default icon for unknown entities to nothing instead of the help icon. diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx index 88de8df686..d55f4c015b 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/DefaultRenderNode.tsx @@ -14,6 +14,7 @@ * limitations under the License. */ import { DependencyGraphTypes } from '@backstage/core-components'; +import { useApp } from '@backstage/core-plugin-api'; import { humanizeEntityRef } from '@backstage/plugin-catalog-react'; import { makeStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; @@ -63,6 +64,7 @@ export function DefaultRenderNode({ const classes = useStyles(); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); + const app = useApp(); const idRef = useRef(null); useLayoutEffect(() => { @@ -85,9 +87,12 @@ export function DefaultRenderNode({ metadata: { name, namespace = DEFAULT_NAMESPACE, title }, } = entity; + const hasKindIcon = app.getSystemIcon( + `kind:${kind.toLocaleLowerCase('en-US')}`, + ); const padding = 10; const iconSize = height; - const paddedIconWidth = kind ? iconSize + padding : 0; + const paddedIconWidth = hasKindIcon ? iconSize + padding : 0; const paddedWidth = paddedIconWidth + width + padding * 2; const paddedHeight = height + padding * 2; @@ -109,7 +114,7 @@ export function DefaultRenderNode({ height={paddedHeight} rx={10} /> - {kind && ( + {hasKindIcon && ( ; } diff --git a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx index dac83a4817..86030758a7 100644 --- a/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx +++ b/plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx @@ -32,7 +32,6 @@ import { import { makeStyles } from '@material-ui/core/styles'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import WorkIcon from '@material-ui/icons/Work'; import React, { useState } from 'react'; const useStyles = makeStyles(theme => ({ @@ -127,10 +126,9 @@ export const EntityListComponent = (props: EntityListComponentProps) => { > {sortEntities(r.entities).map(entity => { - const Icon = - app.getSystemIcon( - `kind:${entity.kind.toLocaleLowerCase('en-US')}`, - ) ?? WorkIcon; + const Icon = app.getSystemIcon( + `kind:${entity.kind.toLocaleLowerCase('en-US')}`, + ); return ( { } : {})} > - - - + {Icon && } ); diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx index 90df738922..7148a051e8 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx @@ -26,7 +26,7 @@ import { Progress, ResponseErrorPanel, } from '@backstage/core-components'; -import { useApi, useRouteRef } from '@backstage/core-plugin-api'; +import { useApi, useApp, useRouteRef } from '@backstage/core-plugin-api'; import { Box, DialogContentText, makeStyles } from '@material-ui/core'; import classNames from 'classnames'; import React, { useLayoutEffect, useRef, useState } from 'react'; @@ -107,6 +107,7 @@ function CustomNode({ node }: DependencyGraphTypes.RenderNodeProps) { const entityRoute = useRouteRef(entityRouteRef); const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); + const app = useApp(); const idRef = useRef(null); useLayoutEffect(() => { @@ -123,9 +124,12 @@ function CustomNode({ node }: DependencyGraphTypes.RenderNodeProps) { } }, [width, height]); + const hasKindIcon = app.getSystemIcon( + `kind:${node.kind.toLocaleLowerCase('en-US')}`, + ); const padding = 10; const iconSize = height; - const paddedIconWidth = iconSize + padding; + const paddedIconWidth = hasKindIcon ? iconSize + padding : 0; const paddedWidth = paddedIconWidth + width + padding * 2; const paddedHeight = height + padding * 2; @@ -160,17 +164,19 @@ function CustomNode({ node }: DependencyGraphTypes.RenderNodeProps) { height={paddedHeight} rx={10} /> - + {hasKindIcon && ( + + )} } {props.entities.map(entity => ( - - - } /> ))} diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx index 4bb41c91c1..7fc95613e9 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/EntityKindIcon.tsx @@ -16,10 +16,10 @@ import { parseEntityRef } from '@backstage/catalog-model'; import { useApp } from '@backstage/core-plugin-api'; -import WorkIcon from '@material-ui/icons/Work'; import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; -const DEFAULT_ICON = WorkIcon; +const DEFAULT_ICON = SvgIcon; function getKind( kind: string | undefined, diff --git a/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx b/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx index 8b3b69a55a..f4bd8d9f25 100644 --- a/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx +++ b/plugins/catalog-react/src/components/InspectEntityDialog/components/OverviewPage.tsx @@ -36,7 +36,6 @@ import { ListItemText, ListSubheader, } from './common'; -import { EntityKindIcon } from './EntityKindIcon'; import { stringifyEntityRef } from '@backstage/catalog-model'; import { CopyTextButton } from '@backstage/core-components'; @@ -155,9 +154,6 @@ export function OverviewPage(props: { entity: AlphaEntity }) { {type}}> {groupRelations.map(group => ( - - - diff --git a/plugins/catalog/src/apis/EntityPresentationApi/DefaultEntityPresentationApi.ts b/plugins/catalog/src/apis/EntityPresentationApi/DefaultEntityPresentationApi.ts index b610173421..82862be435 100644 --- a/plugins/catalog/src/apis/EntityPresentationApi/DefaultEntityPresentationApi.ts +++ b/plugins/catalog/src/apis/EntityPresentationApi/DefaultEntityPresentationApi.ts @@ -34,7 +34,6 @@ import { DEFAULT_BATCH_DELAY, DEFAULT_CACHE_TTL, DEFAULT_ICONS, - UNKNOWN_KIND_ICON, createDefaultRenderer, } from './defaults'; @@ -395,8 +394,6 @@ export class DefaultEntityPresentationApi implements EntityPresentationApi { return false; } - return ( - this.#kindIcons[kind.toLocaleLowerCase('en-US')] ?? UNKNOWN_KIND_ICON - ); + return this.#kindIcons[kind.toLocaleLowerCase('en-US')]; } } diff --git a/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx b/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx index 813f2e3eb8..34bfd64d63 100644 --- a/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx +++ b/plugins/catalog/src/apis/EntityPresentationApi/defaults.tsx @@ -20,7 +20,6 @@ import { HumanDuration } from '@backstage/types'; import ApartmentIcon from '@material-ui/icons/Apartment'; import CategoryIcon from '@material-ui/icons/Category'; import ExtensionIcon from '@material-ui/icons/Extension'; -import HelpIcon from '@material-ui/icons/Help'; import FeaturedPlayListIcon from '@material-ui/icons/FeaturedPlayList'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import MemoryIcon from '@material-ui/icons/Memory'; @@ -33,8 +32,6 @@ export const DEFAULT_CACHE_TTL: HumanDuration = { seconds: 10 }; export const DEFAULT_BATCH_DELAY: HumanDuration = { milliseconds: 50 }; -export const UNKNOWN_KIND_ICON: IconComponent = HelpIcon; - export const DEFAULT_ICONS: Record = { api: ExtensionIcon, component: MemoryIcon, diff --git a/plugins/entity-validation/src/components/EntityValidationOutput/EntityResult.tsx b/plugins/entity-validation/src/components/EntityValidationOutput/EntityResult.tsx index 85d47fa2c2..a9989f9f70 100644 --- a/plugins/entity-validation/src/components/EntityValidationOutput/EntityResult.tsx +++ b/plugins/entity-validation/src/components/EntityValidationOutput/EntityResult.tsx @@ -27,11 +27,11 @@ import { Paper, } from '@material-ui/core'; import { humanizeEntityRef } from '@backstage/plugin-catalog-react'; -import WorkIcon from '@material-ui/icons/Work'; import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import { MarkdownContent } from '@backstage/core-components'; import { ValidationOutputOk } from '../../types'; +import SvgIcon from '@material-ui/core/SvgIcon'; const useStyles = makeStyles(theme => ({ validationOk: { @@ -60,9 +60,9 @@ export const EntityResult = ({ const app = useApp(); const [expanded, setExpanded] = useState(isFirstError); - const Icon = - app.getSystemIcon(`kind:${item.entity.kind.toLocaleLowerCase('en-US')}`) ?? - WorkIcon; + const Icon = app.getSystemIcon( + `kind:${item.entity.kind.toLocaleLowerCase('en-US')}`, + ) as typeof SvgIcon; const fetchErrorMessages = (response: ValidateEntityResponse) => { if (!response.valid) { @@ -75,13 +75,15 @@ export const EntityResult = ({ <> - + {Icon && ( + + )}