diff --git a/.changeset/selfish-geese-mix.md b/.changeset/selfish-geese-mix.md new file mode 100644 index 0000000000..69e34e1b2b --- /dev/null +++ b/.changeset/selfish-geese-mix.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-catalog': patch +--- + +Use `EntityRefLinks` with `hideIcons` property to avoid double icons diff --git a/.changeset/tidy-gorillas-carry.md b/.changeset/tidy-gorillas-carry.md new file mode 100644 index 0000000000..47d8de8f30 --- /dev/null +++ b/.changeset/tidy-gorillas-carry.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Move the `EntityRefLink` icon to the left hand side as per Material-UI guidelines diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 5ebc9de8d6..e84fa9815c 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -196,8 +196,8 @@ export const EntityDisplayName: (props: EntityDisplayNameProps) => JSX.Element; // @public export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; - noIcon?: boolean; - noTooltip?: boolean; + hideIcon?: boolean; + disableTooltip?: boolean; defaultKind?: string; defaultNamespace?: string; }; @@ -399,6 +399,7 @@ export type EntityRefLinkProps = { defaultNamespace?: string; title?: string; children?: React_2.ReactNode; + hideIcon?: boolean; } & Omit; // @public @@ -412,6 +413,7 @@ export type EntityRefLinksProps< > = { defaultKind?: string; entityRefs: TRef[]; + hideIcons?: boolean; fetchEntities?: boolean; getTitle?(entity: TRef): string | undefined; } & Omit; diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 6bdbe83a84..de55f46391 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -34,7 +34,7 @@ const useStyles = makeStyles( alignItems: 'center', }, icon: { - marginLeft: theme.spacing(0.5), + marginRight: theme.spacing(0.5), color: theme.palette.text.secondary, lineHeight: 0, }, @@ -49,8 +49,8 @@ const useStyles = makeStyles( */ export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; - noIcon?: boolean; - noTooltip?: boolean; + hideIcon?: boolean; + disableTooltip?: boolean; defaultKind?: string; defaultNamespace?: string; }; @@ -63,7 +63,8 @@ export type EntityDisplayNameProps = { export const EntityDisplayName = ( props: EntityDisplayNameProps, ): JSX.Element => { - const { entityRef, noIcon, noTooltip, defaultKind, defaultNamespace } = props; + const { entityRef, hideIcon, disableTooltip, defaultKind, defaultNamespace } = + props; const classes = useStyles(); const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation( @@ -77,17 +78,17 @@ export const EntityDisplayName = ( // Optionally an icon, and wrapper around them both content = ( - {content} - {Icon && !noIcon ? ( + {Icon && !hideIcon ? ( ) : null} + {content} ); // Optionally, a tooltip as the outermost layer - if (secondaryTitle && !noTooltip) { + if (secondaryTitle && !disableTooltip) { content = ( {content} diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index 32627fccb2..c5af47e870 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx @@ -38,6 +38,7 @@ export type EntityRefLinkProps = { /** @deprecated This option should no longer be used; presentation is requested through the {@link entityPresentationApiRef} instead */ title?: string; children?: React.ReactNode; + hideIcon?: boolean; } & Omit; /** @@ -53,6 +54,7 @@ export const EntityRefLink = forwardRef( defaultNamespace, title, children, + hideIcon, ...linkProps } = props; const entityRoute = useEntityRoute(props.entityRef); @@ -62,6 +64,7 @@ export const EntityRefLink = forwardRef( entityRef={entityRef} defaultKind={defaultKind} defaultNamespace={defaultNamespace} + hideIcon={hideIcon} /> ); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx index 929b3f9376..a9370af471 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx @@ -32,6 +32,7 @@ export type EntityRefLinksProps< > = { defaultKind?: string; entityRefs: TRef[]; + hideIcons?: boolean; /** @deprecated This option is no longer used; presentation is handled by entityPresentationApiRef instead */ fetchEntities?: boolean; /** @deprecated This option is no longer used; presentation is handled by entityPresentationApiRef instead */ @@ -46,7 +47,7 @@ export type EntityRefLinksProps< export function EntityRefLinks< TRef extends string | CompoundEntityRef | Entity, >(props: EntityRefLinksProps) { - const { entityRefs, ...linkProps } = props; + const { entityRefs, hideIcons, ...linkProps } = props; return ( <> @@ -56,7 +57,7 @@ export function EntityRefLinks< return ( {i > 0 && ', '} - + ); })} diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx index fb6da04f1a..f9999f26e9 100644 --- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx +++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx @@ -79,7 +79,7 @@ function EntityLayoutTitle(props: { whiteSpace="nowrap" overflow="hidden" > - {entity ? : title} + {entity ? : title} {entity && } diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 2a0a34823d..82dc46266d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -174,6 +174,7 @@ export const TemplateCard = (props: TemplateCardProps) => { style={{ marginLeft: '8px' }} entityRefs={ownedByRelations} defaultKind="Group" + hideIcons /> )} diff --git a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx index d35636f507..b4e68318d0 100644 --- a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx @@ -243,7 +243,11 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { Owner - +