feat(helm): show manifest previews/changes when installing and upgrading a helm chart [r8s-405] (#898)

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

@@ -36,14 +36,15 @@ vi.mock('@/portainer/services/notifications', () => ({
   ),
 }));
 
-vi.mock('../queries/useUpdateHelmReleaseMutation', () => ({
+vi.mock('../helmReleaseQueries/useUpdateHelmReleaseMutation', () => ({
   useUpdateHelmReleaseMutation: vi.fn(() => ({
     mutateAsync: vi.fn((...args) => mockMutate(...args)),
     isLoading: false,
   })),
+  updateHelmRelease: vi.fn(() => Promise.resolve({})),
 }));
 
-vi.mock('../queries/useHelmRepoVersions', () => ({
+vi.mock('../helmChartSourceQueries/useHelmRepoVersions', () => ({
   useHelmRepoVersions: vi.fn(() => ({
     data: [
       { Version: '1.0.0', AppVersion: '1.0.0' },

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

@@ -11,11 +11,11 @@ import { confirmGenericDiscard } from '@@/modals/confirm';
 import { Option } from '@@/form-components/PortainerSelect';
 
 import { Chart } from '../types';
-import { useUpdateHelmReleaseMutation } from '../queries/useUpdateHelmReleaseMutation';
+import { useUpdateHelmReleaseMutation } from '../helmReleaseQueries/useUpdateHelmReleaseMutation';
 import {
   ChartVersion,
   useHelmRepoVersions,
-} from '../queries/useHelmRepoVersions';
+} from '../helmChartSourceQueries/useHelmRepoVersions';
 
 import { HelmInstallInnerForm } from './HelmInstallInnerForm';
 import { HelmInstallFormValues } from './types';

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

@@ -1,5 +1,7 @@
 import { Form, useFormikContext } from 'formik';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { FormControl } from '@@/form-components/FormControl';
 import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
@@ -7,9 +9,10 @@ import { FormSection } from '@@/form-components/FormSection';
 import { LoadingButton } from '@@/buttons';
 
 import { Chart } from '../types';
-import { useHelmChartValues } from '../queries/useHelmChartValues';
+import { useHelmChartValues } from '../helmChartSourceQueries/useHelmChartValues';
 import { HelmValuesInput } from '../components/HelmValuesInput';
-import { ChartVersion } from '../queries/useHelmRepoVersions';
+import { ChartVersion } from '../helmChartSourceQueries/useHelmRepoVersions';
+import { ManifestPreviewFormSection } from '../components/ManifestPreviewFormSection';
 
 import { HelmInstallFormValues } from './types';
 
@@ -30,6 +33,8 @@ export function HelmInstallInnerForm({
   isVersionsLoading,
   isRepoAvailable,
 }: Props) {
+  const environmentId = useEnvironmentId();
+  const [previewIsValid, setPreviewIsValid] = useState(false);
   const { values, setFieldValue, isSubmitting } =
     useFormikContext<HelmInstallFormValues>();
 
@@ -62,6 +67,25 @@ export function HelmInstallInnerForm({
     isLatestVersionFetched
   );
 
+  const payload = useMemo(
+    () => ({
+      name: name || '',
+      namespace: namespace || '',
+      chart: selectedChart.name,
+      version: values?.version,
+      repo: selectedChart.repo,
+      values: values.values,
+    }),
+    [
+      name,
+      namespace,
+      selectedChart.name,
+      values?.version,
+      selectedChart.repo,
+      values.values,
+    ]
+  );
+
   return (
     <Form className="form-horizontal">
       <div className="form-group !m-0">
@@ -93,13 +117,19 @@ export function HelmInstallInnerForm({
             isValuesRefLoading={chartValuesRefQuery.isInitialLoading}
           />
         </FormSection>
+        <ManifestPreviewFormSection
+          payload={payload}
+          onChangePreviewValidation={setPreviewIsValid}
+          title="Manifest preview"
+          environmentId={environmentId}
+        />
       </div>
 
       <LoadingButton
-        className="!ml-0"
+        className="!ml-0 mt-5"
         loadingText="Installing Helm chart"
         isLoading={isSubmitting}
-        disabled={!namespace || !name || !isRepoAvailable}
+        disabled={!namespace || !name || !isRepoAvailable || !previewIsValid}
         data-cy="helm-install"
       >
         Install

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

@@ -4,13 +4,13 @@ import { useCurrentUser } from '@/react/hooks/useUser';
 
 import { FormSection } from '@@/form-components/FormSection';
 
-import { useHelmHTTPChartList } from '../queries/useHelmChartList';
+import { useHelmHTTPChartList } from '../helmChartSourceQueries/useHelmChartList';
 import { Chart } from '../types';
 import {
   HelmRegistrySelect,
   RepoValue,
 } from '../components/HelmRegistrySelect';
-import { useHelmRepoOptions } from '../queries/useHelmRepositories';
+import { useHelmRepoOptions } from '../helmChartSourceQueries/useHelmRepositories';
 
 import { HelmInstallForm } from './HelmInstallForm';
 import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';