Merge pull request #12 from headlamp-k8s/app-catalog-fixes

App catalog fixes

Author: joaquimrocha

app-catalog/src/components/charts/EditorDialog.tsx

@@ -35,18 +35,23 @@ export function EditorDialog(props: {
   const { enqueueSnackbar } = useSnackbar();
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const [versions, setVersions] = useState<string[]>([]);
+  const [chartInstallDescription, setChartInstallDescription] = useState('');
   const [selectedVersion, setSelectedVersion] = useState<{ value: string; title: string }>();
   const [selectedNamespace, setSelectedNamespace] = useState<{
     value: string;
     title: string;
-  }>({ value: 'default', title: 'default' });
+  }>();
   const [releaseName, setReleaseName] = useState('');
   const namespaceNames = namespaces?.map(namespace => ({
     value: namespace.metadata.name,
     title: namespace.metadata.name,
   }));
   const themeName = localStorage.getItem('headlampThemePreference');
 
+  useEffect(() => {
+    setIsFormSubmitting(false);
+  }, [openEditor]);
+
   function handleChartValueFetch(chart: any) {
     const packageID = chart.package_id;
     const packageVersion = chart.version;
@@ -99,25 +104,35 @@ export function EditorDialog(props: {
     }, 2000);
   }
 
-  function installAndCreateReleaseHandler(
-    chart: any,
-    releaseName: string,
-    releaseNamespace: string,
-    chartValues: string
-  ) {
+  function installAndCreateReleaseHandler() {
     setIsFormSubmitting(true);
-    if (!validateReleaseNameFormField()) {
+    if (!validateFormField(releaseName)) {
       enqueueSnackbar('Release name is required', {
         variant: 'error',
       });
       return;
     }
-    if (!validateVersionFormField()) {
+
+    if (!validateFormField(selectedNamespace)) {
+      enqueueSnackbar('Namespace is required', {
+        variant: 'error',
+      });
+      return;
+    }
+
+    if (!validateFormField(selectedVersion)) {
       enqueueSnackbar('Version is required', {
         variant: 'error',
       });
       return;
     }
+
+    if (!validateFormField(chartInstallDescription)) {
+      enqueueSnackbar('Description is required', {
+        variant: 'error',
+      });
+      return;
+    }
     const repoName = chart.repository.name;
     const repoURL = chart.repository.url;
     const jsonChartValues = yamlToJSON(chartValues);
@@ -126,39 +141,50 @@ export function EditorDialog(props: {
     );
     setInstallLoading(true);
 
-    addRepository(repoName, repoURL).then(() => {
-      createRelease(
-        releaseName,
-        releaseNamespace,
-        btoa(unescape(encodeURIComponent(jsonToYAML(chartValuesDIFF)))),
-        `${repoName}/${chart.name}`,
-        selectedVersion.value,
-        `Install ${chart.name} (${selectedVersion.value}) in ${releaseNamespace} namespace`
-      )
-        .then(() => {
-          checkInstallStatus(releaseName);
-        })
-        .catch(error => {
-          handleEditor(false);
-          enqueueSnackbar(`Error creating release request ${error}`, {
-            variant: 'error',
+    addRepository(repoName, repoURL)
+      .then(() => {
+        createRelease(
+          releaseName,
+          selectedNamespace.value,
+          btoa(unescape(encodeURIComponent(jsonToYAML(chartValuesDIFF)))),
+          `${repoName}/${chart.name}`,
+          selectedVersion.value,
+          chartInstallDescription
+        )
+          .then(() => {
+            enqueueSnackbar(`Installation request for ${releaseName} accepted`, {
+              variant: 'info',
+            });
+            handleEditor(false);
+            checkInstallStatus(releaseName);
+          })
+          .catch(error => {
+            handleEditor(false);
+            enqueueSnackbar(`Error creating release request ${error}`, {
+              variant: 'error',
+            });
           });
+      })
+      .catch(error => {
+        handleEditor(false);
+        enqueueSnackbar(`Error adding repository ${error}`, {
+          variant: 'error',
         });
-    });
-  }
-
-  function validateReleaseNameFormField() {
-    if (releaseName === '') {
-      return false;
-    }
-    return true;
+      });
   }
 
-  function validateVersionFormField() {
-    if (!selectedVersion || selectedVersion.value === '') {
-      return false;
+  function validateFormField(fieldValue: { value: string; title: string } | null | string) {
+    if (typeof fieldValue === 'string') {
+      if (fieldValue === '') {
+        return false;
+      }
+      return true;
+    } else {
+      if (!fieldValue || fieldValue.value === '') {
+        return false;
+      }
+      return true;
     }
-    return true;
   }
 
   useEffect(() => {
@@ -180,66 +206,83 @@ export function EditorDialog(props: {
       }}
     >
       <DialogTitle>
-        <Box display="flex">
-          <Box mr={2}>
-            <TextField
-              id="release-name"
-              error={isFormSubmitting && releaseName === ''}
-              helperText={releaseName === '' ? 'Release name is required' : ''}
-              style={{
-                width: '20vw',
-              }}
-              label="Release Name"
-              value={releaseName}
-              placeholder="Enter a name for the release"
-              onChange={event => {
-                setReleaseName(event.target.value);
-              }}
-            />
-          </Box>
-          <Box>
-            {!error && namespaceNames && (
+        {chartValuesLoading ? null : (
+          <Box display="flex" justifyContent="space-evenly">
+            <Box mr={2}>
+              <TextField
+                id="release-name"
+                error={isFormSubmitting && !validateFormField(releaseName)}
+                style={{
+                  width: '15vw',
+                }}
+                label="Release Name *"
+                value={releaseName}
+                placeholder="Enter a name for the release"
+                onChange={event => {
+                  setReleaseName(event.target.value);
+                }}
+              />
+            </Box>
+            <Box>
+              {!error && namespaceNames && (
+                <Autocomplete
+                  style={{
+                    width: '15vw',
+                  }}
+                  options={namespaceNames}
+                  getOptionLabel={option => option.title}
+                  value={selectedNamespace}
+                  // @ts-ignore
+                  onChange={(event, newValue: { value: string; title: string }) => {
+                    setSelectedNamespace(newValue);
+                  }}
+                  renderInput={params => (
+                    <TextField
+                      {...params}
+                      label="Namespaces *"
+                      placeholder="Select Namespace"
+                      error={isFormSubmitting && !validateFormField(selectedNamespace)}
+                    />
+                  )}
+                />
+              )}
+            </Box>
+            <Box ml={2}>
               <Autocomplete
                 style={{
-                  width: '20vw',
+                  width: '15vw',
                 }}
-                options={namespaceNames}
+                options={versions}
                 getOptionLabel={option => option.title}
-                defaultValue={namespaceNames[0]}
-                value={selectedNamespace}
+                value={selectedVersion}
                 // @ts-ignore
                 onChange={(event, newValue: { value: string; title: string }) => {
-                  setSelectedNamespace(newValue);
+                  setSelectedVersion(newValue);
                 }}
                 renderInput={params => (
-                  <TextField {...params} label="Namespaces" placeholder="Select Namespace" />
+                  <TextField
+                    {...params}
+                    label="Versions *"
+                    placeholder="Select Version"
+                    error={isFormSubmitting && !validateFormField(selectedVersion)}
+                  />
                 )}
               />
-            )}
-          </Box>
-          <Box ml={2}>
-            <Autocomplete
-              style={{
-                width: '20vw',
-              }}
-              options={versions}
-              getOptionLabel={option => option.title}
-              value={selectedVersion}
-              // @ts-ignore
-              onChange={(event, newValue: { value: string; title: string }) => {
-                setSelectedVersion(newValue);
-              }}
-              renderInput={params => (
-                <TextField
-                  {...params}
-                  label="Versions"
-                  placeholder="Select Version"
-                  error={isFormSubmitting && !selectedVersion}
-                />
-              )}
-            />
+            </Box>
+            <Box ml={2}>
+              <TextField
+                id="release-description"
+                style={{
+                  width: '15vw',
+                }}
+                error={isFormSubmitting && !validateFormField(chartInstallDescription)}
+                label="Release Description *"
+                value={chartInstallDescription}
+                onChange={event => setChartInstallDescription(event.target.value)}
+              />
+            </Box>
           </Box>
-        </Box>
+        )}
       </DialogTitle>
       <DialogContent>
         <Box height="100%">
@@ -259,6 +302,9 @@ export function EditorDialog(props: {
                 setInstallLoading(false);
                 editor.focus();
                 setReleaseName('');
+                setSelectedVersion(null);
+                setSelectedNamespace(null);
+                setChartInstallDescription('');
               }}
               language="yaml"
               height="500px"
@@ -295,14 +341,7 @@ export function EditorDialog(props: {
               </>
             ) : (
               <Button
-                onClick={() => {
-                  installAndCreateReleaseHandler(
-                    chart,
-                    releaseName,
-                    selectedNamespace.value,
-                    chartValues
-                  );
-                }}
+                onClick={installAndCreateReleaseHandler}
                 variant="contained"
                 style={{
                   backgroundColor: '#000',

app-catalog/src/components/releases/Detail.tsx

@@ -106,6 +106,10 @@ export default function ReleaseDetail() {
             onClick={() => {
               deleteRelease(namespace, releaseName).then(() => {
                 setIsDeleting(true);
+                enqueueSnackbar(`Delete request for release ${releaseName} accepted`, {
+                  variant: 'info',
+                });
+                setOpenDeleteAlert(false);
                 checkDeleteReleaseStatus(releaseName);
               });
             }}

app-catalog/src/components/releases/EditorDialog.tsx

@@ -171,6 +171,10 @@ export function EditorDialog(props: {
       selectedVersion.version
     )
       .then(() => {
+        enqueueSnackbar(`Upgrade request for release ${releaseName} sent successfully`, {
+          variant: 'info',
+        });
+        handleEditor(false);
         checkUpgradeStatus();
       })
       .catch(() => {
@@ -257,26 +261,28 @@ export function EditorDialog(props: {
       </Box>
       <DialogContent>
         <Box pt={2} height="100%" my={1} p={1}>
-          <MonacoEditor
-            value={jsonToYAML(valuesToShow)}
-            language="yaml"
-            height="400px"
-            options={{
-              selectOnLineNumbers: true,
-            }}
-            onChange={value => {
-              handleEditorChange(value);
-            }}
-            theme={themeName === 'dark' ? 'vs-dark' : 'light'}
-            onMount={editor => {
-              setReleaseUpdateDescription('');
-              setIsUserValues(false);
-              setValuesToShow(Object.assign({}, release.chart.values, release.config));
-              if (!isUpdateRelease) {
-                editor.updateOptions({ readOnly: true });
-              }
-            }}
-          />
+          {openEditor && (
+            <MonacoEditor
+              value={jsonToYAML(valuesToShow)}
+              language="yaml"
+              height="400px"
+              options={{
+                selectOnLineNumbers: true,
+              }}
+              onChange={value => {
+                handleEditorChange(value);
+              }}
+              theme={themeName === 'dark' ? 'vs-dark' : 'light'}
+              onMount={editor => {
+                setReleaseUpdateDescription('');
+                setIsUserValues(false);
+                setValuesToShow(Object.assign({}, release.chart.values, release.config));
+                if (!isUpdateRelease) {
+                  editor.updateOptions({ readOnly: true });
+                }
+              }}
+            />
+          )}
         </Box>
       </DialogContent>
       <DialogActions