Merge pull request #9911 from backstage/blam/some-more-quick-deprecations-and-breakages-for-the-world-to-benefit-from-and-see-its-gonna-be-huge

🧹 some more deprecations and cleanup

.changeset/gorgeous-boats-hide.md

@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-graph': patch
+'@backstage/plugin-catalog-import': patch
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-fossa': patch
+'@backstage/plugin-org': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-techdocs': patch
+---
+
+- **DEPRECATION**: Deprecated `formatEntityRefTitle` in favor of the new `humanizeEntityRef` method instead. Please migrate to using the new method instead.

.changeset/large-dancers-learn.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': minor
+---
+
+- **BREAKING**: Removed the `FavouriteTemplate` export in favor of the `FavoriteEntity` from `@backstage/plugin-catalog-react`. Please migrate any usages to that component instead if you are creating your own `TemplateCard` page.

plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx

@@ -21,7 +21,7 @@ import {
 import { InfoCard, InfoCardVariants } from '@backstage/core-components';
 import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
 import {
-  formatEntityRefTitle,
+  humanizeEntityRef,
   useEntity,
   entityRouteRef,
 } from '@backstage/plugin-catalog-react';
@@ -94,7 +94,7 @@ export const CatalogGraphCard = ({
       });
       analytics.captureEvent(
         'click',
-        node.title ?? formatEntityRefTitle(nodeEntityName),
+        node.title ?? humanizeEntityRef(nodeEntityName),
         { attributes: { to: path } },
       );
       navigate(path);

plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx

@@ -24,7 +24,7 @@ import {
 import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
 import {
   entityRouteRef,
-  formatEntityRefTitle,
+  humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 import { Grid, makeStyles, Paper, Typography } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
@@ -149,14 +149,14 @@ export const CatalogGraphPage = ({
 
         analytics.captureEvent(
           'click',
-          node.title ?? formatEntityRefTitle(nodeEntityName),
+          node.title ?? humanizeEntityRef(nodeEntityName),
           { attributes: { to: path } },
         );
         navigate(path);
       } else {
         analytics.captureEvent(
           'click',
-          node.title ?? formatEntityRefTitle(nodeEntityName),
+          node.title ?? humanizeEntityRef(nodeEntityName),
         );
         setRootEntityNames([nodeEntityName]);
       }
@@ -168,7 +168,7 @@ export const CatalogGraphPage = ({
     <Page themeId="home">
       <Header
         title="Catalog Graph"
-        subtitle={rootEntityNames.map(e => formatEntityRefTitle(e)).join(', ')}
+        subtitle={rootEntityNames.map(e => humanizeEntityRef(e)).join(', ')}
       />
       <Content stretch className={classes.content}>
         <ContentHeader

plugins/catalog-graph/src/components/EntityRelationsGraph/CustomNode.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { DependencyGraphTypes } from '@backstage/core-components';
-import { formatEntityRefTitle } from '@backstage/plugin-catalog-react';
+import { humanizeEntityRef } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
@@ -95,7 +95,7 @@ export function CustomNode({
   const displayTitle =
     title ??
     (kind && name && namespace
-      ? formatEntityRefTitle({ kind, name, namespace })
+      ? humanizeEntityRef({ kind, name, namespace })
       : id);
 
   return (

plugins/catalog-import/src/components/EntityListComponent/EntityListComponent.tsx

@@ -18,7 +18,7 @@ import { Entity, EntityName } from '@backstage/catalog-model';
 import { useApp } from '@backstage/core-plugin-api';
 import {
   EntityRefLink,
-  formatEntityRefTitle,
+  humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 import {
   Collapse,
@@ -43,7 +43,7 @@ const useStyles = makeStyles(theme => ({
 
 function sortEntities(entities: Array<EntityName | Entity>) {
   return entities.sort((a, b) =>
-    formatEntityRefTitle(a).localeCompare(formatEntityRefTitle(b)),
+    humanizeEntityRef(a).localeCompare(humanizeEntityRef(b)),
   );
 }
 
@@ -130,7 +130,7 @@ export const EntityListComponent = (props: EntityListComponentProps) => {
                   ) ?? WorkIcon;
                 return (
                   <ListItem
-                    key={formatEntityRefTitle(entity)}
+                    key={humanizeEntityRef(entity)}
                     className={classes.nested}
                     {...(withLinks
                       ? {
@@ -143,7 +143,7 @@ export const EntityListComponent = (props: EntityListComponentProps) => {
                     <ListItemIcon>
                       <Icon />
                     </ListItemIcon>
-                    <ListItemText primary={formatEntityRefTitle(entity)} />
+                    <ListItemText primary={humanizeEntityRef(entity)} />
                   </ListItem>
                 );
               })}

plugins/catalog-import/src/components/StepPrepareCreatePullRequest/StepPrepareCreatePullRequest.tsx

@@ -19,7 +19,7 @@ import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { assertError } from '@backstage/errors';
 import {
   catalogApiRef,
-  formatEntityRefTitle,
+  humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 import { Box, FormHelperText, Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -139,7 +139,7 @@ export const StepPrepareCreatePullRequest = (
     });
 
     return groupEntities.items
-      .map(e => formatEntityRefTitle(e, { defaultKind: 'group' }))
+      .map(e => humanizeEntityRef(e, { defaultKind: 'group' }))
       .sort();
   });
 

plugins/catalog-react/api-report.md

@@ -413,13 +413,8 @@ export const favoriteEntityTooltip: (
   isStarred: boolean,
 ) => 'Remove from favorites' | 'Add to favorites';
 
-// @public (undocumented)
-export function formatEntityRefTitle(
-  entityRef: Entity | EntityName,
-  opts?: {
-    defaultKind?: string;
-  },
-): string;
+// @public @deprecated (undocumented)
+export const formatEntityRefTitle: typeof humanizeEntityRef;
 
 // @public @deprecated (undocumented)
 export function getEntityMetadataEditUrl(entity: Entity): string | undefined;
@@ -442,6 +437,14 @@ export function getEntitySourceLocation(
   scmIntegrationsApi: ScmIntegrationRegistry,
 ): EntitySourceLocation | undefined;
 
+// @public (undocumented)
+export function humanizeEntityRef(
+  entityRef: Entity | EntityName,
+  opts?: {
+    defaultKind?: string;
+  },
+): string;
+
 // @public
 export function InspectEntityDialog(props: {
   open: boolean;

plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx

@@ -31,7 +31,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useEntityList } from '../../hooks/useEntityListProvider';
 import { EntityOwnerFilter } from '../../filters';
 import { getEntityRelations } from '../../utils';
-import { formatEntityRefTitle } from '../EntityRefLink';
+import { humanizeEntityRef } from '../EntityRefLink';
 
 /** @public */
 export type CatalogReactEntityOwnerPickerClassKey = 'input';
@@ -86,7 +86,7 @@ export const EntityOwnerPicker = () => {
           backendEntities
             .flatMap((e: Entity) =>
               getEntityRelations(e, RELATION_OWNED_BY).map(o =>
-                formatEntityRefTitle(o, { defaultKind: 'group' }),
+                humanizeEntityRef(o, { defaultKind: 'group' }),
               ),
             )
             .filter(Boolean) as string[],

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

@@ -22,7 +22,7 @@ import {
 } from '@backstage/catalog-model';
 import React, { forwardRef } from 'react';
 import { entityRouteRef } from '../../routes';
-import { formatEntityRefTitle } from './format';
+import { humanizeEntityRef } from './humanize';
 import { Link, LinkProps } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { Tooltip } from '@material-ui/core';
@@ -72,7 +72,7 @@ export const EntityRefLink = forwardRef<any, EntityRefLinkProps>(
     namespace = namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE;
 
     const routeParams = { kind, namespace, name };
-    const formattedEntityRefTitle = formatEntityRefTitle(
+    const formattedEntityRefTitle = humanizeEntityRef(
       { kind, namespace, name },
       { defaultKind },
     );

plugins/catalog-react/src/components/EntityRefLink/humanize.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { formatEntityRefTitle } from './format';
+import { humanizeEntityRef } from './humanize';
 
 describe('formatEntityRefTitle', () => {
   it('formats entity in default namespace', () => {
@@ -30,7 +30,7 @@ describe('formatEntityRefTitle', () => {
         lifecycle: 'production',
       },
     };
-    const title = formatEntityRefTitle(entity);
+    const title = humanizeEntityRef(entity);
     expect(title).toEqual('component:software');
   });
 
@@ -48,7 +48,7 @@ describe('formatEntityRefTitle', () => {
         lifecycle: 'production',
       },
     };
-    const title = formatEntityRefTitle(entity);
+    const title = humanizeEntityRef(entity);
     expect(title).toEqual('component:test/software');
   });
 
@@ -66,7 +66,7 @@ describe('formatEntityRefTitle', () => {
         lifecycle: 'production',
       },
     };
-    const title = formatEntityRefTitle(entity, { defaultKind: 'Component' });
+    const title = humanizeEntityRef(entity, { defaultKind: 'Component' });
     expect(title).toEqual('test/software');
   });
 
@@ -76,7 +76,7 @@ describe('formatEntityRefTitle', () => {
       namespace: 'default',
       name: 'software',
     };
-    const title = formatEntityRefTitle(entityName);
+    const title = humanizeEntityRef(entityName);
     expect(title).toEqual('component:software');
   });
 
@@ -87,7 +87,7 @@ describe('formatEntityRefTitle', () => {
       name: 'software',
     };
 
-    const title = formatEntityRefTitle(entityName);
+    const title = humanizeEntityRef(entityName);
     expect(title).toEqual('component:test/software');
   });
 
@@ -98,7 +98,7 @@ describe('formatEntityRefTitle', () => {
       name: 'software',
     };
 
-    const title = formatEntityRefTitle(entityName, {
+    const title = humanizeEntityRef(entityName, {
       defaultKind: 'component',
     });
     expect(title).toEqual('test/software');

plugins/catalog-react/src/components/EntityRefLink/humanize.ts

@@ -20,8 +20,11 @@ import {
   DEFAULT_NAMESPACE,
 } from '@backstage/catalog-model';
 
+/** @public @deprecated please use {@link humanizeEntityRef} instead */
+export const formatEntityRefTitle = humanizeEntityRef;
+
 /** @public */
-export function formatEntityRefTitle(
+export function humanizeEntityRef(
   entityRef: Entity | EntityName,
   opts?: { defaultKind?: string },
 ) {

plugins/catalog-react/src/components/EntityRefLink/index.ts

@@ -18,4 +18,4 @@ export { EntityRefLink } from './EntityRefLink';
 export type { EntityRefLinkProps } from './EntityRefLink';
 export { EntityRefLinks } from './EntityRefLinks';
 export type { EntityRefLinksProps } from './EntityRefLinks';
-export { formatEntityRefTitle } from './format';
+export { humanizeEntityRef, formatEntityRefTitle } from './humanize';

plugins/catalog-react/src/components/EntityTable/columns.tsx

@@ -26,7 +26,7 @@ import { getEntityRelations } from '../../utils';
 import {
   EntityRefLink,
   EntityRefLinks,
-  formatEntityRefTitle,
+  humanizeEntityRef,
 } from '../EntityRefLink';
 
 /** @public */
@@ -38,7 +38,7 @@ export const columnFactories = Object.freeze({
     function formatContent(entity: T): string {
       return (
         entity.metadata?.title ||
-        formatEntityRefTitle(entity, {
+        humanizeEntityRef(entity, {
           defaultKind,
         })
       );
@@ -87,7 +87,7 @@ export const columnFactories = Object.freeze({
 
     function formatContent(entity: T): string {
       return getRelations(entity)
-        .map(r => formatEntityRefTitle(r, { defaultKind }))
+        .map(r => humanizeEntityRef(r, { defaultKind }))
         .join(', ');
     }
 

plugins/catalog-react/src/components/InspectEntityDialog/components/AncestryPage.tsx

@@ -33,7 +33,7 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
 import useAsync from 'react-use/lib/useAsync';
 import { catalogApiRef } from '../../../api';
-import { formatEntityRefTitle } from '../../../components/EntityRefLink/format';
+import { humanizeEntityRef } from '../../EntityRefLink';
 import { entityRouteRef } from '../../../routes';
 import { EntityKindIcon } from './EntityKindIcon';
 
@@ -132,7 +132,7 @@ function CustomNode({ node }: DependencyGraphTypes.RenderNodeProps<NodeType>) {
   const displayTitle =
     node.metadata.title ||
     (node.kind && node.metadata.name && node.metadata.namespace
-      ? formatEntityRefTitle({
+      ? humanizeEntityRef({
           kind: node.kind,
           name: node.metadata.name,
           namespace: node.metadata.namespace || '',

plugins/catalog-react/src/filters.ts

@@ -15,7 +15,7 @@
  */
 
 import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
-import { formatEntityRefTitle } from './components/EntityRefLink';
+import { humanizeEntityRef } from './components/EntityRefLink';
 import { EntityFilter, UserListFilterKind } from './types';
 import { getEntityRelations } from './utils';
 
@@ -107,7 +107,7 @@ export class EntityOwnerFilter implements EntityFilter {
   filterEntity(entity: Entity): boolean {
     return this.values.some(v =>
       getEntityRelations(entity, RELATION_OWNED_BY).some(
-        o => formatEntityRefTitle(o, { defaultKind: 'group' }) === v,
+        o => humanizeEntityRef(o, { defaultKind: 'group' }) === v,
       ),
     );
   }

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -22,7 +22,7 @@ import {
 import {
   favoriteEntityIcon,
   favoriteEntityTooltip,
-  formatEntityRefTitle,
+  humanizeEntityRef,
   getEntityRelations,
   useEntityList,
   useStarredEntities,
@@ -132,16 +132,16 @@ export const CatalogTable = (props: CatalogTableProps) => {
     return {
       entity,
       resolved: {
-        name: formatEntityRefTitle(entity, {
+        name: humanizeEntityRef(entity, {
           defaultKind: 'Component',
         }),
         ownedByRelationsTitle: ownedByRelations
-          .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+          .map(r => humanizeEntityRef(r, { defaultKind: 'group' }))
           .join(', '),
         ownedByRelations,
         partOfSystemRelationTitle: partOfSystemRelations
           .map(r =>
-            formatEntityRefTitle(r, {
+            humanizeEntityRef(r, {
               defaultKind: 'system',
             }),
           )

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import {
-  formatEntityRefTitle,
+  humanizeEntityRef,
   EntityRefLink,
   EntityRefLinks,
 } from '@backstage/plugin-catalog-react';
@@ -34,7 +34,7 @@ export const columnFactories = Object.freeze({
     function formatContent(entity: Entity): string {
       return (
         entity.metadata?.title ||
-        formatEntityRefTitle(entity, {
+        humanizeEntityRef(entity, {
           defaultKind: options?.defaultKind,
         })
       );

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -31,7 +31,7 @@ import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
   entityRouteRef,
-  formatEntityRefTitle,
+  humanizeEntityRef,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
@@ -193,7 +193,7 @@ export function GroupsDiagram() {
       kind: catalogItem.kind,
       name:
         (catalogItem as GroupEntity).spec?.profile?.displayName ||
-        formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }),
+        humanizeEntityRef(catalogItem, { defaultKind: 'Group' }),
     });
 
     // Edge to parent

plugins/fossa/src/components/FossaPage/FossaPage.tsx

@@ -23,7 +23,7 @@ import {
   catalogApiRef,
   EntityRefLink,
   EntityRefLinks,
-  formatEntityRefTitle,
+  humanizeEntityRef,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { Tooltip } from '@material-ui/core';
@@ -222,10 +222,10 @@ export const FossaPage = ({
         return {
           entity,
           resolved: {
-            name: formatEntityRefTitle(entity),
+            name: humanizeEntityRef(entity),
             ownedByRelations,
             ownedByRelationsTitle: ownedByRelations
-              .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+              .map(r => humanizeEntityRef(r, { defaultKind: 'group' }))
               .join(', '),
             loading: summariesLoading,
             details: summary,

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -25,7 +25,7 @@ import {
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
-  formatEntityRefTitle,
+  humanizeEntityRef,
   isOwnerOf,
   useEntity,
 } from '@backstage/plugin-catalog-react';
@@ -108,7 +108,7 @@ const getQueryParams = (
   owner: Entity,
   selectedEntity: EntityTypeProps,
 ): string => {
-  const ownerName = formatEntityRefTitle(owner, { defaultKind: 'group' });
+  const ownerName = humanizeEntityRef(owner, { defaultKind: 'group' });
   const { kind, type } = selectedEntity;
   const filters = {
     kind,

plugins/scaffolder/api-report.md

@@ -8,7 +8,6 @@
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
-import { ComponentProps } from 'react';
 import { ComponentType } from 'react';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
@@ -17,7 +16,6 @@ import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { FieldProps } from '@rjsf/core';
 import { FieldValidation } from '@rjsf/core';
-import { IconButton } from '@material-ui/core';
 import { JsonObject } from '@backstage/types';
 import { JSONSchema7 } from 'json-schema';
 import { JsonValue } from '@backstage/types';
@@ -87,12 +85,6 @@ export interface EntityTagsPickerUiOptions {
   kinds?: string[];
 }
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
-// Warning: (ae-missing-release-tag) "FavouriteTemplate" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public
-export const FavouriteTemplate: (props: Props) => JSX.Element;
-
 // @public
 export type FieldExtensionComponent<_TReturnValue, _TInputProps> = () => null;
 

plugins/scaffolder/src/components/FavouriteTemplate/FavouriteTemplate.tsx

@@ -1,74 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Entity } from '@backstage/catalog-model';
-import { useStarredEntity } from '@backstage/plugin-catalog-react';
-import { IconButton, makeStyles, Tooltip, withStyles } from '@material-ui/core';
-import Star from '@material-ui/icons/Star';
-import StarBorder from '@material-ui/icons/StarBorder';
-import React, { ComponentProps } from 'react';
-
-type Props = ComponentProps<typeof IconButton> & { entity: Entity };
-
-const YellowStar = withStyles({
-  root: {
-    color: '#f3ba37',
-  },
-})(Star);
-
-const WhiteBorderStar = withStyles({
-  root: {
-    color: '#ffffff',
-  },
-})(StarBorder);
-
-const useStyles = makeStyles(theme => ({
-  starButton: {
-    position: 'absolute',
-    top: theme.spacing(0.5),
-    right: theme.spacing(0.5),
-    padding: '0.25rem',
-  },
-}));
-
-export const favouriteTemplateTooltip = (isStarred: boolean) =>
-  isStarred ? 'Remove from favorites' : 'Add to favorites';
-
-export const favouriteTemplateIcon = (isStarred: boolean) =>
-  isStarred ? <YellowStar /> : <WhiteBorderStar />;
-
-/**
- * IconButton for showing if a current entity is starred and adding/removing it from the favourite entities
- * @param props - MaterialUI IconButton props extended by required `entity` prop
- */
-export const FavouriteTemplate = (props: Props) => {
-  const classes = useStyles();
-  const { toggleStarredEntity, isStarredEntity } = useStarredEntity(
-    props.entity,
-  );
-  return (
-    <IconButton
-      color="inherit"
-      className={classes.starButton}
-      {...props}
-      onClick={() => toggleStarredEntity()}
-    >
-      <Tooltip title={favouriteTemplateTooltip(isStarredEntity)}>
-        {favouriteTemplateIcon(isStarredEntity)}
-      </Tooltip>
-    </IconButton>
-  );
-};

plugins/scaffolder/src/components/FavouriteTemplate/index.ts

@@ -1,17 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from './FavouriteTemplate';

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -21,6 +21,7 @@ import {
 } from '@backstage/integration-react';
 import {
   EntityRefLinks,
+  FavoriteEntity,
   getEntityRelations,
   getEntitySourceLocation,
 } from '@backstage/plugin-catalog-react';
@@ -42,7 +43,6 @@ import {
 import WarningIcon from '@material-ui/icons/Warning';
 import React from 'react';
 import { selectedTemplateRouteRef } from '../../routes';
-import { FavouriteTemplate } from '../FavouriteTemplate/FavouriteTemplate';
 
 import { Button, ItemCardHeader } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
@@ -74,6 +74,12 @@ const useStyles = makeStyles(theme => ({
   leftButton: {
     marginRight: 'auto',
   },
+  starButton: {
+    position: 'absolute',
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    padding: '0.25rem',
+  },
 }));
 
 const useDeprecationStyles = makeStyles(theme => ({
@@ -159,7 +165,7 @@ export const TemplateCard = ({ template, deprecated }: TemplateCardProps) => {
   return (
     <Card>
       <CardMedia className={classes.cardHeader}>
-        <FavouriteTemplate entity={template} />
+        <FavoriteEntity className={classes.starButton} entity={template} />
         {deprecated && <DeprecationWarning />}
         <ItemCardHeader
           title={templateProps.title}

plugins/scaffolder/src/components/fields/EntityPicker/EntityPicker.tsx

@@ -16,7 +16,7 @@
 import { useApi } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
-  formatEntityRefTitle,
+  humanizeEntityRef,
 } from '@backstage/plugin-catalog-react';
 import { TextField } from '@material-ui/core';
 import FormControl from '@material-ui/core/FormControl';
@@ -58,7 +58,7 @@ export const EntityPicker = (
   );
 
   const entityRefs = entities?.items.map(e =>
-    formatEntityRefTitle(e, { defaultKind }),
+    humanizeEntityRef(e, { defaultKind }),
   );
 
   const onSelect = useCallback(

plugins/scaffolder/src/components/fields/OwnedEntityPicker/OwnedEntityPicker.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import {
-  formatEntityRefTitle,
+  humanizeEntityRef,
   useOwnedEntities,
 } from '@backstage/plugin-catalog-react';
 import { TextField } from '@material-ui/core';
@@ -50,7 +50,7 @@ export const OwnedEntityPicker = (
   const { ownedEntities, loading } = useOwnedEntities(allowedKinds);
 
   const entityRefs = ownedEntities?.items
-    .map(e => formatEntityRefTitle(e, { defaultKind }))
+    .map(e => humanizeEntityRef(e, { defaultKind }))
     .filter(n => n);
 
   const onSelect = (_: any, value: string | null) => {

plugins/scaffolder/src/components/index.ts

@@ -15,7 +15,6 @@
  */
 export * from './fields';
 export type { RepoUrlPickerUiOptions } from './fields';
-export { FavouriteTemplate } from './FavouriteTemplate';
 export { TemplateList } from './TemplateList';
 export type { TemplateListProps } from './TemplateList';
 export { TemplateTypePicker } from './TemplateTypePicker';

plugins/techdocs/src/home/components/Tables/DocsTable.tsx

@@ -20,7 +20,7 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard';
 import { useRouteRef, useApi, configApiRef } from '@backstage/core-plugin-api';
 import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
 import {
-  formatEntityRefTitle,
+  humanizeEntityRef,
   getEntityRelations,
 } from '@backstage/plugin-catalog-react';
 import { rootDocsRouteRef } from '../../../routes';
@@ -76,7 +76,7 @@ export const DocsTable = (props: DocsTableProps) => {
         }),
         ownedByRelations,
         ownedByRelationsTitle: ownedByRelations
-          .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+          .map(r => humanizeEntityRef(r, { defaultKind: 'group' }))
           .join(', '),
       },
     };