Merge pull request #21131 from backstage/blam/fix-some-icons

Move `entityRefLink` icon to the left

.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

.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

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<LinkProps, 'to'>;
 
 // @public
@@ -412,6 +413,7 @@ export type EntityRefLinksProps<
 > = {
   defaultKind?: string;
   entityRefs: TRef[];
+  hideIcons?: boolean;
   fetchEntities?: boolean;
   getTitle?(entity: TRef): string | undefined;
 } & Omit<LinkProps, 'to'>;

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 = (
     <Box component="span" className={classes.root}>
-      {content}
-      {Icon && !noIcon ? (
+      {Icon && !hideIcon ? (
         <Box component="span" className={classes.icon}>
           <Icon fontSize="inherit" />
         </Box>
       ) : null}
+      {content}
     </Box>
   );
 
   // Optionally, a tooltip as the outermost layer
-  if (secondaryTitle && !noTooltip) {
+  if (secondaryTitle && !disableTooltip) {
     content = (
       <Tooltip enterDelay={1500} title={secondaryTitle}>
         {content}

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<LinkProps, 'to'>;
 
 /**
@@ -53,6 +54,7 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
       defaultNamespace,
       title,
       children,
+      hideIcon,
       ...linkProps
     } = props;
     const entityRoute = useEntityRoute(props.entityRef);
@@ -62,6 +64,7 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
         entityRef={entityRef}
         defaultKind={defaultKind}
         defaultNamespace={defaultNamespace}
+        hideIcon={hideIcon}
       />
     );
 

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<TRef>) {
-  const { entityRefs, ...linkProps } = props;
+  const { entityRefs, hideIcons, ...linkProps } = props;
 
   return (
     <>
@@ -56,7 +57,7 @@ export function EntityRefLinks<
         return (
           <React.Fragment key={`${i}.${entityRefString}`}>
             {i > 0 && ', '}
-            <EntityRefLink {...linkProps} entityRef={r} />
+            <EntityRefLink {...linkProps} entityRef={r} hideIcon={hideIcons} />
           </React.Fragment>
         );
       })}

plugins/catalog/src/components/EntityLayout/EntityLayout.tsx

@@ -79,7 +79,7 @@ function EntityLayoutTitle(props: {
         whiteSpace="nowrap"
         overflow="hidden"
       >
-        {entity ? <EntityDisplayName entityRef={entity} noIcon /> : title}
+        {entity ? <EntityDisplayName entityRef={entity} hideIcon /> : title}
       </Box>
       {entity && <FavoriteEntity entity={entity} />}
     </Box>

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
                 />
               </>
             )}

plugins/scaffolder/src/legacy/TemplateCard/TemplateCard.tsx

@@ -243,7 +243,11 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
           <Typography variant="body2" className={classes.label}>
             Owner
           </Typography>
-          <EntityRefLinks entityRefs={ownedByRelations} defaultKind="Group" />
+          <EntityRefLinks
+            entityRefs={ownedByRelations}
+            defaultKind="Group"
+            hideIcons
+          />
         </Box>
         <Box>
           <Typography