Feedback for the entity registration

Co-authored-by: Nikita Dudnik <nikdudnik@gmail.com>

plugins/catalog/src/api/CatalogClient.ts

@@ -44,7 +44,7 @@ export class CatalogClient implements CatalogApi {
   }
 
   // TODO: Types for the type param
-  async addLocation(type: string, target: string): Promise<{}> {
+  async addLocation(type: string, target: string) {
     const response = await fetch(
       `${this.apiOrigin}${this.basePath}/locations`,
       {
@@ -59,7 +59,46 @@ export class CatalogClient implements CatalogApi {
       throw new Error(`Location wasn't added: ${target}`);
     }
     const location = await response.json();
-    if (location) return location;
+
+    // TODO(shmidt-i): remove mocks
+    if (location)
+      return {
+        location,
+        entities: [
+          {
+            apiVersion: 'backstage.io/v1beta1',
+            kind: 'Component',
+            metadata: {
+              name: 'component-website',
+              annotations: {
+                'backstage.io/managed-by-location': location.id,
+              },
+              uid: 'uid1',
+              etag: 'YTQzMmNmNjctMGZmMC00YWM5LWFjYWQtZDg1NjBjNDFlYWM4',
+              generation: 1,
+            },
+            spec: {
+              type: 'website',
+            },
+          },
+          {
+            apiVersion: 'backstage.io/v1beta1',
+            kind: 'Component',
+            metadata: {
+              name: 'component-service',
+              annotations: {
+                'backstage.io/managed-by-location': location.id,
+              },
+              uid: 'uid2',
+              etag: 'YTQzMmNmNjctMGZmMC00YWM5LWFjYWQtZDg1NjBjNDFlYWM4',
+              generation: 1,
+            },
+            spec: {
+              type: 'service',
+            },
+          },
+        ],
+      };
     throw new Error(`'Location wasn't added: ${target}`);
   }
 }

plugins/catalog/src/api/types.ts

@@ -25,5 +25,8 @@ export const catalogApiRef = createApiRef<CatalogApi>({
 export interface CatalogApi {
   getEntities(): Promise<Entity[]>;
   getEntityByName(name: string): Promise<Entity>;
-  addLocation(type: string, target: string): Promise<{}>;
+  addLocation(
+    type: string,
+    target: string,
+  ): Promise<{ location: any; entities: Entity[] }>;
 }

plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx

@@ -15,7 +15,24 @@
  */
 
 import React, { FC, useState } from 'react';
-import { Grid } from '@material-ui/core';
+import { useHistory, Link as RouterLink } from 'react-router-dom';
+import {
+  Grid,
+  makeStyles,
+  DialogTitle,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Button,
+  ListItem,
+  ListItemText,
+  List,
+  LinearProgress,
+} from '@material-ui/core';
+import { GitHub as GitHubIcon } from '@material-ui/icons';
+import { Star as StarIcon } from '@material-ui/icons';
+
 import {
   InfoCard,
   Page,
@@ -30,30 +47,60 @@ import {
 import RegisterComponentForm from '../RegisterComponentForm';
 import { catalogApiRef } from '@backstage/plugin-catalog';
 
+const useStyles = makeStyles(theme => ({
+  dialogPaper: {
+    minHeight: 250,
+    minWidth: 600,
+  },
+  icon: {
+    width: 20,
+    marginRight: theme.spacing(1),
+  },
+  contentText: {
+    paddingBottom: theme.spacing(2),
+  },
+}));
+
 const RegisterComponentPage: FC<{}> = () => {
+  const history = useHistory();
+  const classes = useStyles();
+
   const catalogApi = useApi(catalogApiRef);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const alertApi = useApi(alertApiRef);
   const errorApi = useApi(errorApiRef);
 
+  const [result, setResult] = useState<{
+    data: any;
+    error: null | Error;
+    loading: boolean;
+  }>({
+    data: null,
+    error: null,
+    loading: false,
+  });
+
   const onSubmit = async (formData: { componentIdInput: string }) => {
     setIsSubmitting(true);
 
     const { componentIdInput: target } = formData;
     try {
-      await catalogApi.addLocation('github', target);
+      const data = await catalogApi.addLocation('github', target);
+
       alertApi.post({
         message: 'Successfully added the location',
         severity: 'success',
       });
+      setResult({ error: null, loading: false, data });
     } catch (e) {
       errorApi.post(e);
     }
 
     setIsSubmitting(false);
   };
-
+  const gheUrl = 'some-url';
+  const showDialog = result.data && !result.error;
   return (
     <Page theme={pageTheme.tool}>
       <Content>
@@ -63,14 +110,50 @@ const RegisterComponentPage: FC<{}> = () => {
         <Grid container spacing={3} direction="column">
           <Grid item>
             <InfoCard title="Start tracking your component in Backstage">
-              <RegisterComponentForm
-                onSubmit={onSubmit}
-                submitting={isSubmitting}
-              />
+              {result.loading ? (
+                <LinearProgress />
+              ) : (
+                <RegisterComponentForm
+                  onSubmit={onSubmit}
+                  submitting={isSubmitting}
+                />
+              )}
             </InfoCard>
           </Grid>
         </Grid>
       </Content>
+      <Dialog open={showDialog} classes={{ paper: classes.dialogPaper }}>
+        <DialogTitle>Component registration result</DialogTitle>
+        {result.data ? (
+          <>
+            <DialogContent>
+              <DialogContentText>
+                Following components have been succefully created.
+                <List>
+                  {result.data.entities.map((entity: any) => (
+                    <ListItem button>
+                      <RouterLink to={`/catalog/${entity.metadata.name}`}>
+                        <ListItemText primary={entity.metadata.name} />
+                      </RouterLink>
+                    </ListItem>
+                  ))}
+                </List>
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button href={gheUrl} color="default">
+                <GitHubIcon />
+              </Button>
+            </DialogActions>
+          </>
+        ) : (
+          <DialogContent>
+            <DialogContentText className={classes.contentText}>
+              Your component is being created. Please wait.
+            </DialogContentText>
+          </DialogContent>
+        )}
+      </Dialog>
     </Page>
   );
 };