Fix bugs in Helm Chart browser

- Fix bug where sometimes the charts don't load sometimes on Linux
- Fix bug where view is stuck loading when there are no repos or charts
- Clean up some of the code

Fixes #4083

Signed-off-by: David Thompson <[email protected]>

Author: datho7561

src/webview/helm-chart/app/helmSearch.tsx

@@ -4,7 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 
 import React from 'react';
-import { Checkbox, Divider, FormControlLabel, FormGroup, IconButton, InputAdornment, Modal, Pagination, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { Alert, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, InputAdornment, Modal, Pagination, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import { Close, Search } from '@mui/icons-material';
 import { HelmListItem } from './helmListItem';
 import { ChartResponse, HelmRepo } from '../../../helm/helmChartType';
@@ -163,6 +163,7 @@ function SearchBar(props: {
 
 export function HelmSearch() {
     const ITEMS_PER_PAGE = 18;
+    const [isSomeHelmChartsRetrieved, setSomeHelmChartsRetrieved] = React.useState(false);
     const [helmRepos, setHelmRepos] = React.useState<HelmRepo[]>([]);
     const [helmCharts, sethelmCharts] = React.useState<ChartResponse[]>([]);
     const [helmChartEnabled, setHelmChartEnabled] = React.useState<
@@ -196,6 +197,7 @@ export function HelmSearch() {
             case 'getHelmCharts': {
                 sethelmCharts((_helmCharts) => message.data.helmCharts as ChartResponse[]);
                 VSCodeMessage.postMessage({ action: 'getProviderTypes' });
+                setSomeHelmChartsRetrieved(_unused => true);
                 break;
             }
             default:
@@ -277,7 +279,7 @@ export function HelmSearch() {
         <>
             <Stack direction='column' height='100%' spacing={0.5}>
                 {
-                    helmCharts.length === 0 ?
+                    !isSomeHelmChartsRetrieved ?
                         <LoadScreen title='Retrieving Helm Charts' /> :
                         <Stack direction="row" spacing={1} width={'100%'}>
                             {
@@ -328,8 +330,11 @@ export function HelmSearch() {
                                         (getFilteredCharts().length % ITEMS_PER_PAGE > 0.0001 ? 1 : 0)}
                                     perPageCount={ITEMS_PER_PAGE}
                                     chartsLength={getFilteredCharts().length} />
-                                {/* 320px is the approximate combined height of the top bar and bottom bar in the devfile search view */}
-                                {/* 5em is the padding at the top of the page */}
+                                {helmRepos.length === 0 ?
+                                    <Stack direction='row' justifyContent='center' alignItems='center' paddingTop='2rem'>
+                                        <Alert severity='info'>No Helm repos are configured. Please configure a Helm repo to view its charts.</Alert>
+                                    </Stack>
+                                    :
                                 <Stack
                                     id='devfileList'
                                     direction='column'
@@ -353,7 +358,7 @@ export function HelmSearch() {
                                                     }} />
                                             );
                                         })}
-                                </Stack>
+                                </Stack>}
                             </Stack>
                         </Stack>
                 }

src/webview/helm-chart/helmChartLoader.ts

@@ -77,7 +77,8 @@ function helmChartMessageListener(event: any): void {
             void panel.webview.postMessage({
                 action: 'setTheme',
                 themeValue: vscode.window.activeColorTheme.kind,
-            })
+            });
+            void HelmChartLoader.getHelmCharts();
             break;
         case 'install': {
             void vscode.commands.executeCommand('openshift.helm.install', event);
@@ -159,7 +160,6 @@ export default class HelmChartLoader {
                 panel = undefined;
             });
         }
-        await HelmChartLoader.getHelmCharts();
         return panel;
     }
 
@@ -181,33 +181,37 @@ export default class HelmChartLoader {
                     }
                 }
             );
-            helmRepos.forEach((helmRepo: HelmRepo) => {
+            await Promise.all(helmRepos.map((helmRepo: HelmRepo) => {
                 let url = helmRepo.url;
                 url = url.endsWith('/') ? url : url.concat('/');
                 url = url.concat('index.yaml');
-                void HelmChartLoader.fetchURL(helmRepo, url);
-            });
+                return HelmChartLoader.fetchURL(helmRepo, url);
+            }));
+            void panel?.webview.postMessage(
+                {
+                    action: 'getHelmCharts',
+                    data: {
+                        helmCharts
+                    }
+                }
+            );
         }
     }
 
     private static async fetchURL(repo: HelmRepo, url: string) {
-        const signupResponse = await fetch(url, {
-            method: 'GET'
-        });
-        const yamlResponse = JSYAML.load(await signupResponse.text()) as any;
+        const helmRepoContent = await fetch(url);
+        const yamlResponse = JSYAML.load(await helmRepoContent.text()) as {
+            entries: { [key: string]: Chart[] };
+        };
         const entries = yamlResponse.entries;
         Object.keys(entries).forEach((key) => {
             const res: ChartResponse = {
-                repoName: '',
-                repoURL: '',
-                chartName: '',
-                chartVersions: [],
+                repoName: repo.name,
+                repoURL: repo.url,
+                chartName: key,
+                chartVersions: entries[key].sort(HelmChartLoader.descOrder),
                 displayName: ''
             };
-            res.repoName = repo.name;
-            res.repoURL = repo.url;
-            res.chartName = key;
-            res.chartVersions = entries[key].sort(HelmChartLoader.descOrder);
             res.displayName = res.chartVersions[0].annotations ? res.chartVersions[0].annotations['charts.openshift.io/name'] : res.chartVersions[0].name;
             helmCharts.push(res);
         });
@@ -222,8 +226,8 @@ export default class HelmChartLoader {
     }
 
     private static descOrder(oldChart: Chart, newChart: Chart): number {
-    const oldVersion = parseInt(oldChart.version, 10);
-    const newVersion = parseInt(newChart.version, 10);
-    return newVersion - oldVersion;
-}
+        const oldVersion = parseInt(oldChart.version, 10);
+        const newVersion = parseInt(newChart.version, 10);
+        return newVersion - oldVersion;
+    }
 }