diff --git a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx index d279afac25..9a1597dce3 100644 --- a/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx +++ b/plugins/register-component/src/components/RegisterComponentForm/RegisterComponentForm.tsx @@ -20,12 +20,10 @@ import { FormControl, FormHelperText, TextField, - Typography, } from '@material-ui/core'; import { useForm } from 'react-hook-form'; import { makeStyles } from '@material-ui/core/styles'; import { BackstageTheme } from '@backstage/theme'; -import { Progress } from '@backstage/core'; import { ComponentIdValidators } from '../../util/validate'; const useStyles = makeStyles(theme => ({ @@ -40,30 +38,17 @@ const useStyles = makeStyles(theme => ({ })); type RegisterComponentProps = { - onSubmit: () => any; - submitting: boolean; + onSubmit: (formData: Record) => Promise; }; -const RegisterComponentForm: FC = ({ - onSubmit, - submitting, -}) => { +const RegisterComponentForm: FC = ({ onSubmit }) => { const { register, handleSubmit, errors, formState } = useForm({ mode: 'onChange', }); const classes = useStyles(); - const hasErrors = !!errors.componentIdInput; + const hasErrors = !!errors.componentLocation; const dirty = formState?.dirty; - if (submitting) { - return ( - <> - - Your component is being registered. Please wait. - - - - ); - } + return (
= ({ label="Component service file URL" error={hasErrors} placeholder="https://example.com/user/some-service/blob/master/service-info.yaml" - name="componentIdInput" + name="componentLocation" required margin="normal" helperText="Enter the full path to the service-info.yaml file in GHE to start tracking your component. It must be in a public repo, on the master branch." @@ -87,9 +72,9 @@ const RegisterComponentForm: FC = ({ })} /> - {errors.componentIdInput && ( + {errors.componentLocation && ( - {errors.componentIdInput.message} + {errors.componentLocation.message} )} diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx index de830f9a43..c67dc158c8 100644 --- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx +++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx @@ -15,7 +15,7 @@ */ import React, { FC, useState } from 'react'; -import { useHistory, Link as RouterLink } from 'react-router-dom'; +import { Link as RouterLink } from 'react-router-dom'; import { Grid, makeStyles, @@ -29,10 +29,9 @@ import { ListItemText, List, LinearProgress, + ListItemIcon, } from '@material-ui/core'; -import { GitHub as GitHubIcon } from '@material-ui/icons'; -import { Star as StarIcon } from '@material-ui/icons'; - +import LinkIcon from '@material-ui/icons/Link'; import { InfoCard, Page, @@ -61,12 +60,20 @@ const useStyles = makeStyles(theme => ({ }, })); -const RegisterComponentPage: FC<{}> = () => { - const history = useHistory(); - const classes = useStyles(); +const FormStates = { + Idle: 'idle', + Success: 'success', + Error: 'error', + Submitting: 'submitting', +} as const; +type ValuesOf = T extends Record ? V : never; +const RegisterComponentPage: FC<{}> = () => { + const classes = useStyles(); const catalogApi = useApi(catalogApiRef); - const [isSubmitting, setIsSubmitting] = useState(false); + const [formState, setFormState] = useState>( + FormStates.Idle, + ); const alertApi = useApi(alertApiRef); const errorApi = useApi(errorApiRef); @@ -81,10 +88,9 @@ const RegisterComponentPage: FC<{}> = () => { loading: false, }); - const onSubmit = async (formData: { componentIdInput: string }) => { - setIsSubmitting(true); - - const { componentIdInput: target } = formData; + const handleSubmit = async (formData: Record) => { + setFormState(FormStates.Submitting); + const { componentLocation: target } = formData; try { const data = await catalogApi.addLocation('github', target); @@ -93,45 +99,50 @@ const RegisterComponentPage: FC<{}> = () => { severity: 'success', }); setResult({ error: null, loading: false, data }); + setFormState(FormStates.Success); } catch (e) { + setFormState(FormStates.Error); errorApi.post(e); } - - setIsSubmitting(false); }; - const gheUrl = 'some-url'; - const showDialog = result.data && !result.error; + return ( - + Documentation - {result.loading ? ( + {formState === FormStates.Submitting ? ( ) : ( - + )} - + setFormState(FormStates.Idle)} + classes={{ paper: classes.dialogPaper }} + > Component registration result {result.data ? ( <> - Following components have been succefully created. + Following components have been succefully created: {result.data.entities.map((entity: any) => ( + + + @@ -141,8 +152,8 @@ const RegisterComponentPage: FC<{}> = () => { -