From eb575b8fee7a70015fb86fc372f731954fb1d8f4 Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 8 Nov 2023 21:54:53 -0600 Subject: [PATCH 1/8] feat: move the icon to the left Signed-off-by: blam --- .../src/components/EntityDisplayName/EntityDisplayName.tsx | 4 ++-- .../src/components/EntityRefLink/EntityRefLink.tsx | 3 +++ .../src/components/EntityRefLink/EntityRefLinks.tsx | 5 +++-- .../src/next/components/TemplateCard/TemplateCard.tsx | 1 + plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx | 6 +++++- 5 files changed, 14 insertions(+), 5 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 6bdbe83a84..357685cade 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, }, @@ -77,12 +77,12 @@ export const EntityDisplayName = ( // Optionally an icon, and wrapper around them both content = ( - {content} {Icon && !noIcon ? ( ) : null} + {content} ); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index 32627fccb2..dee0b252e5 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; + noIcon?: boolean; } & Omit; /** @@ -53,6 +54,7 @@ export const EntityRefLink = forwardRef( defaultNamespace, title, children, + noIcon, ...linkProps } = props; const entityRoute = useEntityRoute(props.entityRef); @@ -62,6 +64,7 @@ export const EntityRefLink = forwardRef( entityRef={entityRef} defaultKind={defaultKind} defaultNamespace={defaultNamespace} + noIcon={noIcon} /> ); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx index 929b3f9376..9ed23ca360 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[]; + noIcons?: 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, noIcons, ...linkProps } = props; return ( <> @@ -56,7 +57,7 @@ export function EntityRefLinks< return ( {i > 0 && ', '} - + ); })} diff --git a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx index 2a0a34823d..45f825e738 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" + noIcons /> )} diff --git a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx index d35636f507..e3d50b81f9 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 - + Date: Fri, 10 Nov 2023 20:21:36 -0600 Subject: [PATCH 2/8] feat: changeset Signed-off-by: blam --- .changeset/selfish-geese-mix.md | 6 ++++++ .changeset/tidy-gorillas-carry.md | 5 +++++ 2 files changed, 11 insertions(+) create mode 100644 .changeset/selfish-geese-mix.md create mode 100644 .changeset/tidy-gorillas-carry.md diff --git a/.changeset/selfish-geese-mix.md b/.changeset/selfish-geese-mix.md new file mode 100644 index 0000000000..83798ea533 --- /dev/null +++ b/.changeset/selfish-geese-mix.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-scaffolder-react': patch +'@backstage/plugin-scaffolder': patch +--- + +Use `EntityRefLinks` with `noIcons` property for `TemplateCard` component 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 From e98efaaf36043b1b71d0e72b728156a631228aa6 Mon Sep 17 00:00:00 2001 From: blam Date: Fri, 10 Nov 2023 20:24:20 -0600 Subject: [PATCH 3/8] chore: updated api-report, sorry freben Signed-off-by: blam --- plugins/catalog-react/api-report.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index 5ebc9de8d6..e486aad231 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -399,6 +399,7 @@ export type EntityRefLinkProps = { defaultNamespace?: string; title?: string; children?: React_2.ReactNode; + noIcon?: boolean; } & Omit; // @public @@ -412,6 +413,7 @@ export type EntityRefLinksProps< > = { defaultKind?: string; entityRefs: TRef[]; + noIcons?: boolean; fetchEntities?: boolean; getTitle?(entity: TRef): string | undefined; } & Omit; From e420b5af5af66bccd5ffb8a2439eba77ee948894 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 13 Nov 2023 12:29:19 +0100 Subject: [PATCH 4/8] chore: updating the api for hiding icons Signed-off-by: blam --- .../src/components/EntityDisplayName/EntityDisplayName.tsx | 7 ++++--- .../src/components/EntityRefLink/EntityRefLink.tsx | 6 +++--- .../src/components/EntityRefLink/EntityRefLinks.tsx | 6 +++--- .../catalog/src/components/EntityLayout/EntityLayout.tsx | 2 +- .../src/next/components/TemplateCard/TemplateCard.tsx | 2 +- .../scaffolder/src/legacy/TemplateCard/TemplateCard.tsx | 2 +- 6 files changed, 13 insertions(+), 12 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index 357685cade..e1642f8e4e 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles( */ export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; - noIcon?: boolean; + hideIcon?: boolean; noTooltip?: 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, noTooltip, defaultKind, defaultNamespace } = + props; const classes = useStyles(); const { primaryTitle, secondaryTitle, Icon } = useEntityPresentation( @@ -77,7 +78,7 @@ export const EntityDisplayName = ( // Optionally an icon, and wrapper around them both content = ( - {Icon && !noIcon ? ( + {Icon && !hideIcon ? ( diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx index dee0b252e5..c5af47e870 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx @@ -38,7 +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; - noIcon?: boolean; + hideIcon?: boolean; } & Omit; /** @@ -54,7 +54,7 @@ export const EntityRefLink = forwardRef( defaultNamespace, title, children, - noIcon, + hideIcon, ...linkProps } = props; const entityRoute = useEntityRoute(props.entityRef); @@ -64,7 +64,7 @@ export const EntityRefLink = forwardRef( entityRef={entityRef} defaultKind={defaultKind} defaultNamespace={defaultNamespace} - noIcon={noIcon} + hideIcon={hideIcon} /> ); diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx index 9ed23ca360..a9370af471 100644 --- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx +++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx @@ -32,7 +32,7 @@ export type EntityRefLinksProps< > = { defaultKind?: string; entityRefs: TRef[]; - noIcons?: boolean; + 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 */ @@ -47,7 +47,7 @@ export type EntityRefLinksProps< export function EntityRefLinks< TRef extends string | CompoundEntityRef | Entity, >(props: EntityRefLinksProps) { - const { entityRefs, noIcons, ...linkProps } = props; + const { entityRefs, hideIcons, ...linkProps } = props; return ( <> @@ -57,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 45f825e738..82dc46266d 100644 --- a/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder-react/src/next/components/TemplateCard/TemplateCard.tsx @@ -174,7 +174,7 @@ export const TemplateCard = (props: TemplateCardProps) => { style={{ marginLeft: '8px' }} entityRefs={ownedByRelations} defaultKind="Group" - noIcons + hideIcons /> )} diff --git a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx index e3d50b81f9..b4e68318d0 100644 --- a/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx +++ b/plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx @@ -246,7 +246,7 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => { From a941bbee61a2737456e46ce3f5e878b87e3d0856 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 13 Nov 2023 12:35:01 +0100 Subject: [PATCH 5/8] chore: fix api-report Signed-off-by: blam --- plugins/catalog-react/api-report.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index e486aad231..e35f1cd64a 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -196,7 +196,7 @@ export const EntityDisplayName: (props: EntityDisplayNameProps) => JSX.Element; // @public export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; - noIcon?: boolean; + hideIcon?: boolean; noTooltip?: boolean; defaultKind?: string; defaultNamespace?: string; @@ -399,7 +399,7 @@ export type EntityRefLinkProps = { defaultNamespace?: string; title?: string; children?: React_2.ReactNode; - noIcon?: boolean; + hideIcon?: boolean; } & Omit; // @public @@ -413,7 +413,7 @@ export type EntityRefLinksProps< > = { defaultKind?: string; entityRefs: TRef[]; - noIcons?: boolean; + hideIcons?: boolean; fetchEntities?: boolean; getTitle?(entity: TRef): string | undefined; } & Omit; From abb393c8cf1c906efe7c70828ddbb6d1f6469071 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 13 Nov 2023 12:35:29 +0100 Subject: [PATCH 6/8] chore: update changeset Signed-off-by: blam --- .changeset/selfish-geese-mix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/selfish-geese-mix.md b/.changeset/selfish-geese-mix.md index 83798ea533..08b78ce216 100644 --- a/.changeset/selfish-geese-mix.md +++ b/.changeset/selfish-geese-mix.md @@ -3,4 +3,4 @@ '@backstage/plugin-scaffolder': patch --- -Use `EntityRefLinks` with `noIcons` property for `TemplateCard` component to avoid double icons +Use `EntityRefLinks` with `hideIcons` property for `TemplateCard` component to avoid double icons From f1b172104d9bf7c0f535d595ca3411204e04a003 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 13 Nov 2023 12:45:08 +0100 Subject: [PATCH 7/8] chore: updating changeset Signed-off-by: blam --- .changeset/selfish-geese-mix.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/selfish-geese-mix.md b/.changeset/selfish-geese-mix.md index 08b78ce216..69e34e1b2b 100644 --- a/.changeset/selfish-geese-mix.md +++ b/.changeset/selfish-geese-mix.md @@ -1,6 +1,7 @@ --- '@backstage/plugin-scaffolder-react': patch '@backstage/plugin-scaffolder': patch +'@backstage/plugin-catalog': patch --- -Use `EntityRefLinks` with `hideIcons` property for `TemplateCard` component to avoid double icons +Use `EntityRefLinks` with `hideIcons` property to avoid double icons From 5602fc274f8b749a7a86a14bcec84aea7e599652 Mon Sep 17 00:00:00 2001 From: blam Date: Mon, 13 Nov 2023 13:43:34 +0100 Subject: [PATCH 8/8] chore: rename tooltip props too Signed-off-by: blam --- plugins/catalog-react/api-report.md | 2 +- .../src/components/EntityDisplayName/EntityDisplayName.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md index e35f1cd64a..e84fa9815c 100644 --- a/plugins/catalog-react/api-report.md +++ b/plugins/catalog-react/api-report.md @@ -197,7 +197,7 @@ export const EntityDisplayName: (props: EntityDisplayNameProps) => JSX.Element; export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; hideIcon?: boolean; - noTooltip?: boolean; + disableTooltip?: boolean; defaultKind?: string; defaultNamespace?: string; }; diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx index e1642f8e4e..de55f46391 100644 --- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx +++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx @@ -50,7 +50,7 @@ const useStyles = makeStyles( export type EntityDisplayNameProps = { entityRef: Entity | CompoundEntityRef | string; hideIcon?: boolean; - noTooltip?: boolean; + disableTooltip?: boolean; defaultKind?: string; defaultNamespace?: string; }; @@ -63,7 +63,7 @@ export type EntityDisplayNameProps = { export const EntityDisplayName = ( props: EntityDisplayNameProps, ): JSX.Element => { - const { entityRef, hideIcon, noTooltip, defaultKind, defaultNamespace } = + const { entityRef, hideIcon, disableTooltip, defaultKind, defaultNamespace } = props; const classes = useStyles(); @@ -88,7 +88,7 @@ export const EntityDisplayName = ( ); // Optionally, a tooltip as the outermost layer - if (secondaryTitle && !noTooltip) { + if (secondaryTitle && !disableTooltip) { content = ( {content}