diff --git a/plugins/catalog/src/api/CatalogClient.ts b/plugins/catalog/src/api/CatalogClient.ts index 1b3b26a11e..ed38c008ac 100644 --- a/plugins/catalog/src/api/CatalogClient.ts +++ b/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}`); } } diff --git a/plugins/catalog/src/api/types.ts b/plugins/catalog/src/api/types.ts index a016842e41..b92f07247f 100644 --- a/plugins/catalog/src/api/types.ts +++ b/plugins/catalog/src/api/types.ts @@ -25,5 +25,8 @@ export const catalogApiRef = createApiRef({ export interface CatalogApi { getEntities(): Promise; getEntityByName(name: string): Promise; - addLocation(type: string, target: string): Promise<{}>; + addLocation( + type: string, + target: string, + ): Promise<{ location: any; entities: Entity[] }>; } diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index b44e3aa238..de830f9a43 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/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 ( @@ -63,14 +110,50 @@ const RegisterComponentPage: FC<{}> = () => { - + {result.loading ? ( + + ) : ( + + )} + + Component registration result + {result.data ? ( + <> + + + Following components have been succefully created. + + {result.data.entities.map((entity: any) => ( + + + + + + ))} + + + + + + + + ) : ( + + + Your component is being created. Please wait. + + + )} + ); };