feat(oci): oci helm support [r8s-361] (#787)

app/react/kubernetes/helm/HelmTemplates/HelmTemplates.tsx

@@ -1,15 +1,20 @@
 import { useState } from 'react';
-import { compact } from 'lodash';
 
 import { useCurrentUser } from '@/react/hooks/useUser';
 
-import { Chart } from '../types';
-import { useHelmChartList } from '../queries/useHelmChartList';
-import { useHelmRegistries } from '../queries/useHelmRegistries';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { useHelmHTTPChartList } from '../queries/useHelmChartList';
+import { Chart } from '../types';
+import {
+  HelmRegistrySelect,
+  RepoValue,
+} from '../components/HelmRegistrySelect';
+import { useHelmRepoOptions } from '../queries/useHelmRepositories';
 
-import { HelmTemplatesList } from './HelmTemplatesList';
-import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
 import { HelmInstallForm } from './HelmInstallForm';
+import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
+import { HelmTemplatesList } from './HelmTemplatesList';
 
 interface Props {
   onSelectHelmChart: (chartName: string) => void;
@@ -19,11 +24,60 @@ interface Props {
 
 export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
   const [selectedChart, setSelectedChart] = useState<Chart | null>(null);
-  const [selectedRegistry, setSelectedRegistry] = useState<string | null>(null);
-
+  const [selectedRepo, setSelectedRepo] = useState<RepoValue | null>(null);
   const { user } = useCurrentUser();
-  const helmReposQuery = useHelmRegistries();
-  const chartListQuery = useHelmChartList(user.Id, compact([selectedRegistry]));
+  const chartListQuery = useHelmHTTPChartList(
+    user.Id,
+    selectedRepo?.repoUrl ?? '',
+    !!selectedRepo?.repoUrl
+  );
+  const repoOptionsQuery = useHelmRepoOptions();
+  const isRepoAvailable =
+    !!repoOptionsQuery.data && repoOptionsQuery.data.length > 0;
+
+  return (
+    <div className="row">
+      <div className="col-sm-12 p-0">
+        <FormSection title="Helm chart">
+          {selectedChart ? (
+            <>
+              <HelmTemplatesSelectedItem
+                selectedChart={selectedChart}
+                clearHelmChart={clearHelmChart}
+              />
+              <HelmInstallForm
+                selectedChart={selectedChart}
+                namespace={namespace}
+                name={name}
+                isRepoAvailable={isRepoAvailable}
+              />
+            </>
+          ) : (
+            <>
+              <HelmRegistrySelect
+                selectedRegistry={selectedRepo}
+                onRegistryChange={setSelectedRepo}
+                namespace={namespace}
+                isRepoAvailable={isRepoAvailable}
+                isLoading={repoOptionsQuery.isLoading}
+                isError={repoOptionsQuery.isError}
+                repoOptions={repoOptionsQuery.data ?? []}
+              />
+              {selectedRepo && (
+                <HelmTemplatesList
+                  charts={chartListQuery.data ?? []}
+                  selectAction={handleChartSelection}
+                  isLoadingCharts={chartListQuery.isInitialLoading}
+                  selectedRegistry={selectedRepo}
+                />
+              )}
+            </>
+          )}
+        </FormSection>
+      </div>
+    </div>
+  );
+
   function clearHelmChart() {
     setSelectedChart(null);
     onSelectHelmChart('');
@@ -33,33 +87,4 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
     setSelectedChart(chart);
     onSelectHelmChart(chart.name);
   }
-
-  return (
-    <div className="row">
-      <div className="col-sm-12 p-0">
-        {selectedChart ? (
-          <>
-            <HelmTemplatesSelectedItem
-              selectedChart={selectedChart}
-              clearHelmChart={clearHelmChart}
-            />
-            <HelmInstallForm
-              selectedChart={selectedChart}
-              namespace={namespace}
-              name={name}
-            />
-          </>
-        ) : (
-          <HelmTemplatesList
-            charts={chartListQuery.data}
-            selectAction={handleChartSelection}
-            isLoading={chartListQuery.isInitialLoading}
-            registries={helmReposQuery.data ?? []}
-            selectedRegistry={selectedRegistry}
-            setSelectedRegistry={setSelectedRegistry}
-          />
-        )}
-      </div>
-    </div>
-  );
 }