fix: show list of components in removal dialog

plugins/catalog/src/components/CatalogPage/CatalogPage.tsx

@@ -99,7 +99,6 @@ const CatalogPage: FC<{}> = () => {
         rowData && rowData.location ? rowData.location.type !== 'github' : true,
     }),
   ];
-
   return (
     <Page theme={pageTheme.home}>
       <Header title="Service Catalog" subtitle="Keep track of your software">

plugins/catalog/src/components/ComponentPage/ComponentPage.tsx

@@ -30,7 +30,8 @@ import ComponentRemovalDialog from '../ComponentRemovalDialog/ComponentRemovalDi
 import { SentryIssuesWidget } from '@backstage/plugin-sentry';
 import { Grid } from '@material-ui/core';
 import { catalogApiRef } from '../..';
-import { envelopeToComponent } from '../../data/utils';
+import { envelopeToComponent as entityToComponent } from '../../data/utils';
+import { Component } from '../../data/component';
 
 const REDIRECT_DELAY = 1000;
 
@@ -54,19 +55,20 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
   const errorApi = useApi<ErrorApi>(errorApiRef);
 
   const catalogApi = useApi(catalogApiRef);
-  const catalogRequest = useAsync(async () => {
+  const { value: component, error, loading } = useAsync<Component>(async () => {
     const entity = await catalogApi.getEntityByName(match.params.name);
-    return entity;
+    const location = await catalogApi.getLocationByEntity(entity);
+    return { ...entityToComponent(entity), location };
   });
 
   useEffect(() => {
-    if (catalogRequest.error) {
+    if (error) {
       errorApi.post(new Error('Component not found!'));
       setTimeout(() => {
         history.push('/catalog');
       }, REDIRECT_DELAY);
     }
-  }, [catalogRequest.error, errorApi, history]);
+  }, [error, errorApi, history]);
 
   if (componentName === '') {
     history.push('/catalog');
@@ -81,14 +83,12 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
     history.push('/catalog');
   };
 
-  const component = envelopeToComponent(catalogRequest.value! ?? {});
-
   return (
     <Page theme={pageTheme.home}>
-      <Header title={component.name || 'Catalog'}>
+      <Header title={component?.name || 'Catalog'}>
         <ComponentContextMenu onUnregisterComponent={showRemovalDialog} />
       </Header>
-      {confirmationDialogOpen && catalogRequest.value && (
+      {confirmationDialogOpen && component && (
         <ComponentRemovalDialog
           component={component}
           onClose={hideRemovalDialog}
@@ -100,7 +100,7 @@ const ComponentPage: FC<ComponentPageProps> = ({ match, history }) => {
         <Grid container spacing={3} direction="column">
           <Grid item>
             <ComponentMetadataCard
-              loading={catalogRequest.loading || removingPending}
+              loading={loading || removingPending}
               component={component}
             />
           </Grid>