From a70797ecece772466b09778e55f6d72b831c4836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Wed, 9 Sep 2020 16:34:37 +0200
Subject: [PATCH] fix(scaffolder): properly post errors when calls fail

---
 plugins/scaffolder/src/api.ts                         | 11 +++++++----
 .../scaffolder/src/components/JobStage/JobStage.tsx   | 10 ++++++----
 .../src/components/JobStatusModal/JobStatusModal.tsx  |  2 +-
 .../src/components/TemplatePage/TemplatePage.tsx      | 10 +++++++---
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/plugins/scaffolder/src/api.ts b/plugins/scaffolder/src/api.ts
index 3c42ed2ca4..1c7fc6aa5a 100644
--- a/plugins/scaffolder/src/api.ts
+++ b/plugins/scaffolder/src/api.ts
@@ -30,6 +30,8 @@ export class ScaffolderApi {
   }
 
   /**
+   * Executes the scaffolding of a component, given a template and its
+   * parameter values.
    *
    * @param template Template entity for the scaffolder to use. New project is going to be created out of this template.
    * @param values Parameters for the template, e.g. name, description
@@ -49,7 +51,9 @@ export class ScaffolderApi {
     });
 
     if (response.status !== 201) {
-      throw new Error(await response.text());
+      const status = `${response.status} ${response.statusText}`;
+      const body = await response.text();
+      throw new Error(`Backend request failed, ${status} ${body}`);
     }
 
     const { id } = await response.json();
@@ -57,9 +61,8 @@ export class ScaffolderApi {
   }
 
   async getJob(jobId: string) {
-    const url = `${await this.discoveryApi.getBaseUrl(
-      'scaffolder',
-    )}/v1/job/${encodeURIComponent(jobId)}`;
+    const baseUrl = await this.discoveryApi.getBaseUrl('scaffolder');
+    const url = `${baseUrl}/v1/job/${encodeURIComponent(jobId)}`;
     return fetch(url).then(x => x.json());
   }
 }
diff --git a/plugins/scaffolder/src/components/JobStage/JobStage.tsx b/plugins/scaffolder/src/components/JobStage/JobStage.tsx
index 1db2bd528a..c7de6dff61 100644
--- a/plugins/scaffolder/src/components/JobStage/JobStage.tsx
+++ b/plugins/scaffolder/src/components/JobStage/JobStage.tsx
@@ -19,11 +19,13 @@ import {
   AccordionDetails,
   AccordionSummary,
   Box,
+  CircularProgress,
   LinearProgress,
   Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import cn from 'classnames';
 import moment from 'moment';
 import React, { Suspense, useEffect, useState } from 'react';
@@ -38,8 +40,7 @@ const useStyles = makeStyles(theme => ({
   },
   button: {
     order: -1,
-    marginRight: 0,
-    marginLeft: '-20px',
+    margin: '0 1em 0 -20px',
   },
   cardContent: {
     backgroundColor: theme.palette.background.default,
@@ -110,7 +111,7 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
       onChange={(_, newState) => setExpanded(newState)}
     >
       <AccordionSummary
-        expandIcon={<ExpandMoreIcon />}
+        expandIcon={expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
         aria-controls={`panel-${name}-content`}
         id={`panel-${name}-header`}
         IconButtonProps={{
@@ -118,7 +119,8 @@ export const JobStage = ({ endedAt, startedAt, name, log, status }: Props) => {
         }}
       >
         <Typography variant="button">
-          {name} {timeElapsed && `(${timeElapsed})`}
+          {name} {timeElapsed && `(${timeElapsed})`}{' '}
+          {startedAt && !endedAt && <CircularProgress size="1em" />}
         </Typography>
       </AccordionSummary>
       <AccordionDetails className={classes.expansionPanelDetails}>
diff --git a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
index c6ed55c92c..102e93f91d 100644
--- a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
+++ b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
@@ -51,7 +51,7 @@ export const JobStatusModal = ({
   return (
     <Dialog open onClose={onClose} fullWidth>
       <DialogTitle id="responsive-dialog-title">
-        Creating component...
+        Creating Component...
       </DialogTitle>
       <DialogContent>
         {!job ? (
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index 3c22e8d50c..1ed0504894 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -91,8 +91,12 @@ export const TemplatePage = () => {
   const handleClose = () => setJobId(null);
 
   const handleCreate = async () => {
-    const job = await scaffolderApi.scaffold(template!, formState);
-    setJobId(job);
+    try {
+      const job = await scaffolderApi.scaffold(template!, formState);
+      setJobId(job);
+    } catch (e) {
+      errorApi.post(e);
+    }
   };
 
   const [entity, setEntity] = React.useState<TemplateEntityV1alpha1 | null>(
@@ -157,7 +161,7 @@ export const TemplatePage = () => {
           />
         )}
         {template && (
-          <InfoCard title={template.metadata.title as string} noPadding>
+          <InfoCard title={template.metadata.title} noPadding>
             <MultistepJsonForm
               formData={formState}
               onChange={handleChange}