catalog-import: Add a View Component CTA after finishing import

Signed-off-by: Himanshu Mishra <himanshu@orkohunter.net>

plugins/catalog-import/src/components/Buttons/index.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { LinkButton } from '@backstage/core-components';
 import { Button, CircularProgress } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { ComponentProps } from 'react';
@@ -68,3 +69,20 @@ export const BackButton = (props: ComponentProps<typeof Button>) => {
     </Button>
   );
 };
+
+export const ViewComponentButton = (
+  props: ComponentProps<typeof LinkButton>,
+) => {
+  const classes = useStyles();
+
+  return (
+    <LinkButton
+      color="primary"
+      variant="contained"
+      className={classes.button}
+      {...props}
+    >
+      {props.children}
+    </LinkButton>
+  );
+};

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

@@ -17,23 +17,41 @@
 import { Grid, Typography } from '@material-ui/core';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import React from 'react';
-import { BackButton } from '../Buttons';
+import { BackButton, ViewComponentButton } from '../Buttons';
 import { EntityListComponent } from '../EntityListComponent';
-import { PrepareResult } from '../useImportState';
+import { PrepareResult, NewLocations } from '../useImportState';
 import { Link } from '@backstage/core-components';
 import partition from 'lodash/partition';
+import { CompoundEntityRef } from '@backstage/catalog-model';
+import { entityRouteRef } from '@backstage/plugin-catalog-react';
+import { useRouteRef } from '@backstage/core-plugin-api';
 
 type Props = {
   prepareResult: PrepareResult;
   onReset: () => void;
 };
 
+// Among the newly registered entities, return a software entity (e.g. Component, API, Resource)
+const filterComponentEntity = (
+  newLocations: NewLocations,
+): CompoundEntityRef | null => {
+  for (const location of newLocations) {
+    for (const entity of location.entities) {
+      if (
+        ['component', 'api', 'resource'].includes(
+          entity.kind.toLocaleLowerCase('en-US'),
+        )
+      ) {
+        return entity;
+      }
+    }
+  }
+
+  return null;
+};
+
 export const StepFinishImportLocation = ({ prepareResult, onReset }: Props) => {
-  const continueButton = (
-    <Grid container spacing={0}>
-      <BackButton onClick={onReset}>Register another</BackButton>
-    </Grid>
-  );
+  const entityRoute = useRouteRef(entityRouteRef);
 
   if (prepareResult.type === 'repository') {
     return (
@@ -48,12 +66,13 @@ export const StepFinishImportLocation = ({ prepareResult, onReset }: Props) => {
             {prepareResult.pullRequest.url}
           </Link>
         </Typography>
-
         <Typography paragraph>
           Your entities will be imported as soon as the Pull Request is merged.
         </Typography>
-
-        {continueButton}
+        <Grid container spacing={0}>
+          <BackButton onClick={onReset}>Register another</BackButton>
+        </Grid>
+        ;
       </>
     );
   }
@@ -62,7 +81,7 @@ export const StepFinishImportLocation = ({ prepareResult, onReset }: Props) => {
     prepareResult.locations,
     l => l.exists,
   );
-
+  const newComponentEntity = filterComponentEntity(newLocations);
   return (
     <>
       {newLocations.length > 0 && (
@@ -91,7 +110,14 @@ export const StepFinishImportLocation = ({ prepareResult, onReset }: Props) => {
           />
         </>
       )}
-      {continueButton}
+      <Grid container spacing={0}>
+        {newComponentEntity && (
+          <ViewComponentButton to={entityRoute(newComponentEntity)}>
+            View Component
+          </ViewComponentButton>
+        )}
+        <BackButton onClick={onReset}>Register another</BackButton>
+      </Grid>
     </>
   );
 };

plugins/catalog-import/src/components/useImportState.ts

@@ -32,6 +32,12 @@ export type ImportFlows =
 // the available states of the stepper
 type ImportStateTypes = 'analyze' | 'prepare' | 'review' | 'finish';
 
+export type NewLocations = Array<{
+  exists?: boolean;
+  target: string;
+  entities: CompoundEntityRef[];
+}>;
+
 /**
  * Result of the prepare state.
  *
@@ -40,11 +46,7 @@ type ImportStateTypes = 'analyze' | 'prepare' | 'review' | 'finish';
 export type PrepareResult =
   | {
       type: 'locations';
-      locations: Array<{
-        exists?: boolean;
-        target: string;
-        entities: CompoundEntityRef[];
-      }>;
+      locations: NewLocations;
     }
   | {
       type: 'repository';