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

Fixes for app catalog

Author: joaquimrocha

app-catalog/package-lock.json

@@ -38,6 +38,7 @@
     "js-yaml": "^4.1.0",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "semver": "^7.6.3"
   }
 }

app-catalog/package.json

@@ -76,10 +76,9 @@ export function EditorDialog(props: {
     setChartInstallDescription(`${chart.name} deployment`);
     fetchChartDetailFromArtifact(chart.name, chart.repository.name).then(response => {
       if (response.available_versions) {
-        setVersions(
-          response.available_versions.map(({ version }) => ({ title: version, value: version }))
-        );
-        setSelectedVersion(response.available_versions[0].version);
+        const availableVersions = response.available_versions.map(({ version }) => ({ title: version, value: version }));
+        setVersions(availableVersions);
+        setSelectedVersion(availableVersions[0]);
       }
     });
     handleChartValueFetch(chart);
@@ -259,7 +258,7 @@ export function EditorDialog(props: {
                 }}
                 options={versions}
                 getOptionLabel={(option: any) => option.title ?? option}
-                value={selectedVersion}
+                value={selectedVersion ?? versions[0]}
                 // @ts-ignore
                 onChange={(event, newValue: FieldType) => {
                   setSelectedVersion(newValue);
@@ -306,7 +305,6 @@ export function EditorDialog(props: {
               onMount={editor => {
                 setInstallLoading(false);
                 editor.focus();
-                setReleaseName('');
               }}
               language="yaml"
               height="500px"

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

@@ -118,12 +118,17 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
           width: '20vw',
         }}
         options={helmChartCategoryList}
-        getOptionLabel={option => option.title}
+        getOptionLabel={option => option?.title ?? helmChartCategoryList[0].title}
         defaultValue={helmChartCategoryList[0]}
         value={chartCategory}
         onChange={(event, newValue) => {
           // @ts-ignore
-          setChartCategory(newValue);
+          setChartCategory((oldValue) => {
+            if ((newValue?.value ?? helmChartCategoryList[0].value) === oldValue.value) {
+              return oldValue;
+            }
+            return newValue ?? helmChartCategoryList[0];
+          });
         }}
         renderInput={params => {
           if (process.env.NODE_ENV === 'test') {