feat(helm): enhance helm chart install [r8s-341] (#766)

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

@@ -0,0 +1,174 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+import { withUserProvider } from '@/react/test-utils/withUserProvider';
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { UserViewModel } from '@/portainer/models/user';
+
+import { Chart } from '../types';
+
+import { HelmInstallForm } from './HelmInstallForm';
+
+const mockMutate = vi.fn();
+const mockNotifySuccess = vi.fn();
+const mockTrackEvent = vi.fn();
+const mockRouterGo = vi.fn();
+
+// Mock the router hook to provide endpointId
+vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
+  ...(await importOriginal()),
+  useCurrentStateAndParams: vi.fn(() => ({
+    params: { endpointId: '1' },
+  })),
+  useRouter: vi.fn(() => ({
+    stateService: {
+      go: vi.fn((...args) => mockRouterGo(...args)),
+    },
+  })),
+}));
+
+// Mock dependencies
+vi.mock('@/portainer/services/notifications', () => ({
+  notifySuccess: vi.fn((title: string, text: string) =>
+    mockNotifySuccess(title, text)
+  ),
+}));
+
+vi.mock('../queries/useUpdateHelmReleaseMutation', () => ({
+  useUpdateHelmReleaseMutation: vi.fn(() => ({
+    mutateAsync: vi.fn((...args) => mockMutate(...args)),
+    isLoading: false,
+  })),
+}));
+
+vi.mock('../queries/useHelmRepositories', () => ({
+  useHelmRepoVersions: vi.fn(() => ({
+    data: [
+      { Version: '1.0.0', AppVersion: '1.0.0' },
+      { Version: '0.9.0', AppVersion: '0.9.0' },
+    ],
+    isInitialLoading: false,
+  })),
+}));
+
+vi.mock('./queries/useHelmChartValues', () => ({
+  useHelmChartValues: vi.fn().mockReturnValue({
+    data: { values: 'test-values' },
+    isInitialLoading: false,
+  }),
+}));
+
+vi.mock('@/react/hooks/useAnalytics', () => ({
+  useAnalytics: vi.fn().mockReturnValue({
+    trackEvent: vi.fn((...args) => mockTrackEvent(...args)),
+  }),
+}));
+
+// Sample test data
+const mockChart: Chart = {
+  name: 'test-chart',
+  description: 'Test Chart Description',
+  repo: 'https://example.com',
+  icon: 'test-icon-url',
+  annotations: {
+    category: 'database',
+  },
+};
+
+const mockRouterStateService = {
+  go: vi.fn(),
+};
+
+function renderComponent({
+  selectedChart = mockChart,
+  namespace = 'test-namespace',
+  name = 'test-name',
+  isAdmin = true,
+} = {}) {
+  const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });
+
+  const Wrapped = withTestQueryProvider(
+    withUserProvider(
+      withTestRouter(() => (
+        <HelmInstallForm
+          selectedChart={selectedChart}
+          namespace={namespace}
+          name={name}
+        />
+      )),
+      user
+    )
+  );
+
+  return {
+    ...render(<Wrapped />),
+    user,
+    mockRouterStateService,
+  };
+}
+
+describe('HelmInstallForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render the form with version selector and values editor', async () => {
+    renderComponent();
+
+    expect(screen.getByText('Version')).toBeInTheDocument();
+    expect(screen.getByText('Install')).toBeInTheDocument();
+  });
+
+  it('should install helm chart when install button is clicked', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const installButton = screen.getByText('Install');
+    await user.click(installButton);
+
+    // Check mutate was called with correct values
+    expect(mockMutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test-name',
+        repo: 'https://example.com',
+        chart: 'test-chart',
+        values: '',
+        namespace: 'test-namespace',
+        version: '1.0.0',
+      }),
+      expect.objectContaining({ onSuccess: expect.any(Function) })
+    );
+  });
+
+  it('should disable install button when namespace or name is undefined', () => {
+    renderComponent({ namespace: '' });
+    expect(screen.getByText('Install')).toBeDisabled();
+  });
+
+  it('should call success handlers when installation succeeds', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const installButton = screen.getByText('Install');
+    await user.click(installButton);
+
+    // Get the onSuccess callback and call it
+    const onSuccessCallback = mockMutate.mock.calls[0][1].onSuccess;
+    onSuccessCallback();
+
+    // Check that success handlers were called
+    expect(mockTrackEvent).toHaveBeenCalledWith('kubernetes-helm-install', {
+      category: 'kubernetes',
+      metadata: {
+        'chart-name': 'test-chart',
+      },
+    });
+    expect(mockNotifySuccess).toHaveBeenCalledWith(
+      'Success',
+      'Helm chart successfully installed'
+    );
+    expect(mockRouterGo).toHaveBeenCalledWith('kubernetes.applications');
+  });
+});

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

@@ -0,0 +1,106 @@
+import { useRef } from 'react';
+import { Formik, FormikProps } from 'formik';
+import { useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+import { useAnalytics } from '@/react/hooks/useAnalytics';
+import { useCanExit } from '@/react/hooks/useCanExit';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { confirmGenericDiscard } from '@@/modals/confirm';
+import { Option } from '@@/form-components/PortainerSelect';
+
+import { Chart } from '../types';
+import {
+  ChartVersion,
+  useHelmRepoVersions,
+} from '../queries/useHelmRepositories';
+import { useUpdateHelmReleaseMutation } from '../queries/useUpdateHelmReleaseMutation';
+
+import { HelmInstallInnerForm } from './HelmInstallInnerForm';
+import { HelmInstallFormValues } from './types';
+
+type Props = {
+  selectedChart: Chart;
+  namespace?: string;
+  name?: string;
+};
+
+export function HelmInstallForm({ selectedChart, namespace, name }: Props) {
+  const environmentId = useEnvironmentId();
+  const router = useRouter();
+  const analytics = useAnalytics();
+  const helmRepoVersionsQuery = useHelmRepoVersions(
+    selectedChart.name,
+    60 * 60 * 1000, // 1 hour
+    [selectedChart.repo],
+    false
+  );
+  const versions = helmRepoVersionsQuery.data;
+  const versionOptions: Option<ChartVersion>[] = versions.map(
+    (version, index) => ({
+      label: index === 0 ? `${version.Version} (latest)` : version.Version,
+      value: version,
+    })
+  );
+  const defaultVersion = versionOptions[0]?.value;
+  const initialValues: HelmInstallFormValues = {
+    values: '',
+    version: defaultVersion?.Version ?? '',
+  };
+
+  const installHelmChartMutation = useUpdateHelmReleaseMutation(environmentId);
+
+  const formikRef = useRef<FormikProps<HelmInstallFormValues>>(null);
+  useCanExit(() => !formikRef.current?.dirty || confirmGenericDiscard());
+
+  return (
+    <Formik
+      innerRef={formikRef}
+      initialValues={initialValues}
+      enableReinitialize
+      onSubmit={handleSubmit}
+    >
+      <HelmInstallInnerForm
+        selectedChart={selectedChart}
+        namespace={namespace}
+        name={name}
+        versionOptions={versionOptions}
+        isLoadingVersions={helmRepoVersionsQuery.isInitialLoading}
+      />
+    </Formik>
+  );
+
+  async function handleSubmit(values: HelmInstallFormValues) {
+    if (!name || !namespace) {
+      // Theoretically this should never happen and is mainly to keep typescript happy
+      return;
+    }
+
+    await installHelmChartMutation.mutateAsync(
+      {
+        name,
+        repo: selectedChart.repo,
+        chart: selectedChart.name,
+        values: values.values,
+        namespace,
+        version: values.version,
+      },
+      {
+        onSuccess() {
+          analytics.trackEvent('kubernetes-helm-install', {
+            category: 'kubernetes',
+            metadata: {
+              'chart-name': selectedChart.name,
+            },
+          });
+          notifySuccess('Success', 'Helm chart successfully installed');
+
+          // Reset the form so page can be navigated away from without getting "Are you sure?"
+          formikRef.current?.resetForm();
+          router.stateService.go('kubernetes.applications');
+        },
+      }
+    );
+  }
+}

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

@@ -0,0 +1,86 @@
+import { Form, useFormikContext } from 'formik';
+import { useMemo } from 'react';
+
+import { FormActions } from '@@/form-components/FormActions';
+import { FormControl } from '@@/form-components/FormControl';
+import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { ChartVersion } from '../queries/useHelmRepositories';
+import { Chart } from '../types';
+import { useHelmChartValues } from '../queries/useHelmChartValues';
+import { HelmValuesInput } from '../components/HelmValuesInput';
+
+import { HelmInstallFormValues } from './types';
+
+type Props = {
+  selectedChart: Chart;
+  namespace?: string;
+  name?: string;
+  versionOptions: Option<ChartVersion>[];
+  isLoadingVersions: boolean;
+};
+
+export function HelmInstallInnerForm({
+  selectedChart,
+  namespace,
+  name,
+  versionOptions,
+  isLoadingVersions,
+}: Props) {
+  const { values, setFieldValue, isSubmitting } =
+    useFormikContext<HelmInstallFormValues>();
+
+  const chartValuesRefQuery = useHelmChartValues({
+    chart: selectedChart.name,
+    repo: selectedChart.repo,
+    version: values?.version,
+  });
+
+  const selectedVersion = useMemo(
+    () =>
+      versionOptions.find((v) => v.value.Version === values.version)?.value ??
+      versionOptions[0]?.value,
+    [versionOptions, values.version]
+  );
+
+  return (
+    <Form className="form-horizontal">
+      <div className="form-group !m-0">
+        <FormSection title="Configuration" className="mt-4">
+          <FormControl
+            label="Version"
+            inputId="version-input"
+            isLoading={isLoadingVersions}
+            loadingText="Loading versions..."
+          >
+            <PortainerSelect<ChartVersion>
+              value={selectedVersion}
+              options={versionOptions}
+              onChange={(version) => {
+                if (version) {
+                  setFieldValue('version', version.Version);
+                }
+              }}
+              data-cy="helm-version-input"
+            />
+          </FormControl>
+          <HelmValuesInput
+            values={values.values}
+            setValues={(values) => setFieldValue('values', values)}
+            valuesRef={chartValuesRefQuery.data?.values ?? ''}
+            isValuesRefLoading={chartValuesRefQuery.isInitialLoading}
+          />
+        </FormSection>
+      </div>
+
+      <FormActions
+        submitLabel="Install"
+        loadingText="Installing Helm chart"
+        isLoading={isSubmitting}
+        isValid={!!namespace && !!name}
+        data-cy="helm-install"
+      />
+    </Form>
+  );
+}

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

@@ -10,6 +10,7 @@ import {
 
 import { HelmTemplatesList } from './HelmTemplatesList';
 import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
+import { HelmInstallForm } from './HelmInstallForm';
 
 interface Props {
   onSelectHelmChart: (chartName: string) => void;
@@ -37,12 +38,17 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
     <div className="row">
       <div className="col-sm-12 p-0">
         {selectedChart ? (
-          <HelmTemplatesSelectedItem
-            selectedChart={selectedChart}
-            clearHelmChart={clearHelmChart}
-            namespace={namespace}
-            name={name}
-          />
+          <>
+            <HelmTemplatesSelectedItem
+              selectedChart={selectedChart}
+              clearHelmChart={clearHelmChart}
+            />
+            <HelmInstallForm
+              selectedChart={selectedChart}
+              namespace={namespace}
+              name={name}
+            />
+          </>
         ) : (
           <HelmTemplatesList
             charts={chartListQuery.data}

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

@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MutationOptions } from '@tanstack/react-query';
 import { vi } from 'vitest';
 
 import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
@@ -12,36 +10,6 @@ import { Chart } from '../types';
 
 import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
 
-const mockMutate = vi.fn();
-const mockNotifySuccess = vi.fn();
-
-// Mock dependencies
-vi.mock('@/portainer/services/notifications', () => ({
-  notifySuccess: (title: string, text: string) =>
-    mockNotifySuccess(title, text),
-}));
-
-vi.mock('./queries/useHelmChartValues', () => ({
-  useHelmChartValues: vi.fn().mockReturnValue({
-    data: { values: 'test-values' },
-    isLoading: false,
-  }),
-}));
-
-vi.mock('./queries/useHelmChartInstall', () => ({
-  useHelmChartInstall: vi.fn().mockReturnValue({
-    mutate: (params: Record<string, string>, options?: MutationOptions) =>
-      mockMutate(params, options),
-    isLoading: false,
-  }),
-}));
-
-vi.mock('@/react/hooks/useAnalytics', () => ({
-  useAnalytics: vi.fn().mockReturnValue({
-    trackEvent: vi.fn(),
-  }),
-}));
-
 // Sample test data
 const mockChart: Chart = {
   name: 'test-chart',
@@ -58,22 +26,15 @@ const mockRouterStateService = {
   go: vi.fn(),
 };
 
-function renderComponent({
-  selectedChart = mockChart,
-  clearHelmChart = clearHelmChartMock,
-  namespace = 'test-namespace',
-  name = 'test-name',
-} = {}) {
-  const user = new UserViewModel({ Username: 'user' });
+function renderComponent({ selectedChart = mockChart, isAdmin = true } = {}) {
+  const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });
 
   const Wrapped = withTestQueryProvider(
     withUserProvider(
       withTestRouter(() => (
         <HelmTemplatesSelectedItem
           selectedChart={selectedChart}
-          clearHelmChart={clearHelmChart}
-          namespace={namespace}
-          name={name}
+          clearHelmChart={clearHelmChartMock}
         />
       )),
       user
@@ -101,45 +62,4 @@ describe('HelmTemplatesSelectedItem', () => {
     expect(screen.getByText('Clear selection')).toBeInTheDocument();
     expect(screen.getByText('https://example.com')).toBeInTheDocument();
   });
-
-  it('should toggle custom values editor', async () => {
-    renderComponent();
-    const user = userEvent.setup();
-
-    // Verify editor is visible by default
-    expect(screen.getByTestId('helm-app-creation-editor')).toBeInTheDocument();
-
-    // Now hide the editor
-    await user.click(await screen.findByText('Custom values'));
-
-    // Editor should be hidden
-    expect(
-      screen.queryByTestId('helm-app-creation-editor')
-    ).not.toBeInTheDocument();
-  });
-
-  it('should install helm chart and navigate when install button is clicked', async () => {
-    const user = userEvent.setup();
-    renderComponent();
-
-    // Click install button
-    await user.click(screen.getByText('Install'));
-
-    // Check mutate was called with correct values
-    expect(mockMutate).toHaveBeenCalledWith(
-      expect.objectContaining({
-        Name: 'test-name',
-        Repo: 'https://example.com',
-        Chart: 'test-chart',
-        Values: 'test-values',
-        Namespace: 'test-namespace',
-      }),
-      expect.objectContaining({ onSuccess: expect.any(Function) })
-    );
-  });
-
-  it('should disable install button when namespace or name is undefined', () => {
-    renderComponent({ namespace: '' });
-    expect(screen.getByText('Install')).toBeDisabled();
-  });
 });

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

@@ -1,183 +1,58 @@
-import { useRef } from 'react';
 import { X } from 'lucide-react';
-import { Form, Formik, FormikProps } from 'formik';
-import { useRouter } from '@uirouter/react';
-
-import { notifySuccess } from '@/portainer/services/notifications';
-import { useAnalytics } from '@/react/hooks/useAnalytics';
-import { useCanExit } from '@/react/hooks/useCanExit';
 
 import { Widget } from '@@/Widget';
 import { Button } from '@@/buttons/Button';
 import { FallbackImage } from '@@/FallbackImage';
 import { Icon } from '@@/Icon';
-import { WebEditorForm } from '@@/WebEditorForm';
-import { confirmGenericDiscard } from '@@/modals/confirm';
-import { FormSection } from '@@/form-components/FormSection';
-import { InlineLoader } from '@@/InlineLoader';
-import { FormActions } from '@@/form-components/FormActions';
 
 import { Chart } from '../types';
 
-import { useHelmChartValues } from './queries/useHelmChartValues';
 import { HelmIcon } from './HelmIcon';
-import { useHelmChartInstall } from './queries/useHelmChartInstall';
 
 type Props = {
   selectedChart: Chart;
   clearHelmChart: () => void;
-  namespace?: string;
-  name?: string;
-};
-
-type FormValues = {
-  values: string;
-};
-
-const emptyValues: FormValues = {
-  values: '',
 };
 
 export function HelmTemplatesSelectedItem({
   selectedChart,
   clearHelmChart,
-  namespace,
-  name,
 }: Props) {
-  const router = useRouter();
-  const analytics = useAnalytics();
-
-  const { mutate: installHelmChart, isLoading: isInstalling } =
-    useHelmChartInstall();
-  const { data: initialValues, isLoading: loadingValues } =
-    useHelmChartValues(selectedChart);
-
-  const formikRef = useRef<FormikProps<FormValues>>(null);
-  useCanExit(() => !formikRef.current?.dirty || confirmGenericDiscard());
-
-  function handleSubmit(values: FormValues) {
-    if (!name || !namespace) {
-      // Theoretically this should never happen and is mainly to keep typescript happy
-      return;
-    }
-
-    installHelmChart(
-      {
-        Name: name,
-        Repo: selectedChart.repo,
-        Chart: selectedChart.name,
-        Values: values.values,
-        Namespace: namespace,
-      },
-      {
-        onSuccess() {
-          analytics.trackEvent('kubernetes-helm-install', {
-            category: 'kubernetes',
-            metadata: {
-              'chart-name': selectedChart.name,
-            },
-          });
-          notifySuccess('Success', 'Helm chart successfully installed');
-
-          // Reset the form so page can be navigated away from without getting "Are you sure?"
-          formikRef.current?.resetForm();
-          router.stateService.go('kubernetes.applications');
-        },
-      }
-    );
-  }
-
   return (
-    <>
-      <Widget>
-        <div className="flex">
-          <div className="basis-3/4 rounded-[8px] m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
-            <div className="vertical-center p-5">
-              <FallbackImage
-                src={selectedChart.icon}
-                fallbackIcon={HelmIcon}
-                className="h-16 w-16"
-              />
-              <div className="col-sm-12">
-                <div>
-                  <div className="text-2xl font-bold">{selectedChart.name}</div>
-                  <div className="small text-muted mt-1">
-                    {selectedChart.repo}
-                  </div>
+    <Widget>
+      <div className="flex">
+        <div className="basis-3/4 rounded-lg m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
+          <div className="vertical-center p-5">
+            <FallbackImage
+              src={selectedChart.icon}
+              fallbackIcon={HelmIcon}
+              className="h-16 w-16"
+            />
+            <div className="col-sm-12">
+              <div>
+                <div className="text-2xl font-bold">{selectedChart.name}</div>
+                <div className="small text-muted mt-1">
+                  {selectedChart.repo}
                 </div>
-                <div className="text-xs mt-2">{selectedChart.description}</div>
               </div>
-            </div>
-          </div>
-          <div className="basis-1/4">
-            <div className="h-full w-full vertical-center justify-end pr-5">
-              <Button
-                color="link"
-                className="!text-gray-8 hover:no-underline th-highcontrast:!text-white th-dark:!text-white"
-                onClick={clearHelmChart}
-                data-cy="clear-selection"
-              >
-                Clear selection
-                <Icon icon={X} className="ml-1" />
-              </Button>
+              <div className="text-xs mt-2">{selectedChart.description}</div>
             </div>
           </div>
         </div>
-      </Widget>
-      <Formik
-        innerRef={formikRef}
-        initialValues={initialValues ?? emptyValues}
-        enableReinitialize
-        onSubmit={(values) => handleSubmit(values)}
-      >
-        {({ values, setFieldValue }) => (
-          <Form className="form-horizontal">
-            <div className="form-group !m-0">
-              <FormSection
-                title="Custom values"
-                isFoldable
-                defaultFolded={false}
-                className="mt-4"
-              >
-                {loadingValues && (
-                  <div className="col-sm-12 p-0">
-                    <InlineLoader>Loading values.yaml...</InlineLoader>
-                  </div>
-                )}
-                {!!initialValues && (
-                  <WebEditorForm
-                    id="helm-app-creation-editor"
-                    value={values.values}
-                    onChange={(value) => setFieldValue('values', value)}
-                    type="yaml"
-                    data-cy="helm-app-creation-editor"
-                    textTip="Define or paste the content of your values yaml file here"
-                  >
-                    You can get more information about Helm values file format
-                    in the{' '}
-                    <a
-                      href="https://helm.sh/docs/chart_template_guide/values_files/"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      official documentation
-                    </a>
-                    .
-                  </WebEditorForm>
-                )}
-              </FormSection>
-            </div>
-
-            <FormActions
-              submitLabel="Install"
-              loadingText="Installing Helm chart"
-              isLoading={isInstalling}
-              isValid={!!namespace && !!name && !loadingValues}
-              data-cy="helm-install"
-            />
-          </Form>
-        )}
-      </Formik>
-    </>
+        <div className="basis-1/4">
+          <div className="h-full w-full vertical-center justify-end pr-5">
+            <Button
+              color="link"
+              className="!text-gray-8 hover:no-underline th-highcontrast:!text-white th-dark:!text-white"
+              onClick={clearHelmChart}
+              data-cy="clear-selection"
+            >
+              Clear selection
+              <Icon icon={X} className="ml-1" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Widget>
   );
 }

app/react/kubernetes/helm/HelmTemplates/queries/useHelmChartInstall.ts

@@ -1,40 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-
-import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import {
-  queryClient,
-  withGlobalError,
-  withInvalidate,
-} from '@/react-tools/react-query';
-import { queryKeys } from '@/react/kubernetes/applications/queries/query-keys';
-
-import { InstallChartPayload } from '../../types';
-
-async function installHelmChart(
-  payload: InstallChartPayload,
-  environmentId: EnvironmentId
-) {
-  try {
-    const response = await axios.post(
-      `endpoints/${environmentId}/kubernetes/helm`,
-      payload
-    );
-    return response.data;
-  } catch (err) {
-    throw parseAxiosError(err as Error, 'Installation error');
-  }
-}
-
-export function useHelmChartInstall() {
-  const environmentId = useEnvironmentId();
-
-  return useMutation(
-    (values: InstallChartPayload) => installHelmChart(values, environmentId),
-    {
-      ...withGlobalError('Unable to install Helm chart'),
-      ...withInvalidate(queryClient, [queryKeys.applications(environmentId)]),
-    }
-  );
-}

app/react/kubernetes/helm/HelmTemplates/queries/useHelmChartValues.ts

@@ -1,32 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-import { withGlobalError } from '@/react-tools/react-query';
-
-import { Chart } from '../../types';
-
-async function getHelmChartValues(chart: string, repo: string) {
-  try {
-    const response = await axios.get<string>(`/templates/helm/values`, {
-      params: {
-        repo,
-        chart,
-      },
-    });
-    return response.data;
-  } catch (err) {
-    throw parseAxiosError(err as Error, 'Unable to get Helm chart values');
-  }
-}
-
-export function useHelmChartValues(chart: Chart) {
-  return useQuery({
-    queryKey: ['helm-chart-values', chart.repo, chart.name],
-    queryFn: () => getHelmChartValues(chart.name, chart.repo),
-    enabled: !!chart.name,
-    select: (data) => ({
-      values: data,
-    }),
-    ...withGlobalError('Unable to get Helm chart values'),
-  });
-}

app/react/kubernetes/helm/HelmTemplates/types.ts

@@ -0,0 +1,4 @@
+export type HelmInstallFormValues = {
+  values: string;
+  version: string;
+};