Merge remote-tracking branch 'upstream/master' into mcalus3/add-catalog-import-plugin

plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx

@@ -30,18 +30,12 @@ import { JobStage } from '../JobStage/JobStage';
 import { useJobPolling } from './useJobPolling';
 
 type Props = {
-  onClose: () => void;
   onComplete: (job: Job) => void;
   jobId: string;
   entity: TemplateEntityV1alpha1 | null;
 };
 
-export const JobStatusModal = ({
-  onClose,
-  jobId,
-  onComplete,
-  entity,
-}: Props) => {
+export const JobStatusModal = ({ jobId, onComplete, entity }: Props) => {
   const job = useJobPolling(jobId);
   const [dialogTitle, setDialogTitle] = useState('Creating component...');
 
@@ -54,7 +48,7 @@ export const JobStatusModal = ({
   }, [job, onComplete, setDialogTitle]);
 
   return (
-    <Dialog open onClose={onClose} fullWidth>
+    <Dialog open fullWidth>
       <DialogTitle id="responsive-dialog-title">{dialogTitle}</DialogTitle>
       <DialogContent>
         {!job ? (

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -69,8 +69,9 @@ export const MultistepJsonForm = ({
         {steps.map(({ label, schema, ...formProps }) => (
           <Step key={label}>
             <StepLabel>{label}</StepLabel>
-            <StepContent>
+            <StepContent key={label}>
               <Form
+                key={label}
                 noHtml5Validate
                 formData={formData}
                 onChange={onChange}

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -26,7 +26,7 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -86,11 +86,12 @@ export const TemplatePage = () => {
   const [formState, setFormState] = useState({});
 
   const handleFormReset = () => setFormState({});
-  const handleChange = (e: IChangeEvent) =>
-    setFormState({ ...formState, ...e.formData });
+  const handleChange = useCallback(
+    (e: IChangeEvent) => setFormState({ ...formState, ...e.formData }),
+    [setFormState, formState],
+  );
 
   const [jobId, setJobId] = useState<string | null>(null);
-  const handleClose = () => setJobId(null);
 
   const handleCreate = async () => {
     try {
@@ -106,18 +107,10 @@ export const TemplatePage = () => {
   );
 
   const handleCreateComplete = async (job: Job) => {
-    const target = job.metadata.remoteUrl?.replace(
-      /\.git$/,
-      // TODO(Rugvip): This is not the location we want. As part of scaffolder v2 we
-      //               want this to be more flexible, but before that we might want
-      //               to update all templates to use catalog-info.yaml instead.
-      '/blob/master/component-info.yaml',
-    );
-
-    if (!target) {
+    if (!job.metadata.catalogInfoUrl) {
       errorApi.post(
         new Error(
-          `Failed to find component-info.yaml file in ${job.metadata.remoteUrl}.`,
+          `Failed to find catalog-info.yaml file in ${job.metadata.remoteUrl}.`,
         ),
       );
       return;
@@ -125,7 +118,7 @@ export const TemplatePage = () => {
 
     const {
       entities: [createdEntity],
-    } = await catalogApi.addLocation({ target });
+    } = await catalogApi.addLocation({ target: job.metadata.catalogInfoUrl });
 
     setEntity((createdEntity as any) as TemplateEntityV1alpha1);
   };
@@ -161,7 +154,6 @@ export const TemplatePage = () => {
           <JobStatusModal
             onComplete={handleCreateComplete}
             jobId={jobId}
-            onClose={handleClose}
             entity={entity}
           />
         )}

plugins/scaffolder/src/types.ts

@@ -19,6 +19,7 @@ export type Job = {
     entity: any;
     values: any;
     remoteUrl?: string;
+    catalogInfoUrl?: string;
   };
   status: 'PENDING' | 'STARTED' | 'COMPLETED' | 'FAILED';
   stages: Stage[];