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

app/react/kubernetes/helm/HelmApplicationView/ChartActions/RollbackButton.tsx

@@ -9,7 +9,7 @@ import { buildConfirmButton } from '@@/modals/utils';
 import { confirm } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 
-import { useHelmRollbackMutation } from '../queries/useHelmRollbackMutation';
+import { useHelmRollbackMutation } from '../../helmReleaseQueries/useHelmRollbackMutation';
 
 type Props = {
   latestRevision: number;

app/react/kubernetes/helm/HelmApplicationView/ChartActions/UninstallButton.tsx

@@ -5,7 +5,7 @@ import { notifySuccess } from '@/portainer/services/notifications';
 
 import { DeleteButton } from '@@/buttons/DeleteButton';
 
-import { useUninstallHelmAppMutation } from '../queries/useUninstallHelmAppMutation';
+import { useUninstallHelmAppMutation } from '../../helmReleaseQueries/useUninstallHelmAppMutation';
 
 export function UninstallButton({
   environmentId,

app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeButton.test.tsx

@@ -9,7 +9,7 @@ import { withUserProvider } from '@/react/test-utils/withUserProvider';
 import {
   useHelmRepoVersions,
   ChartVersion,
-} from '../../queries/useHelmRepoVersions';
+} from '../../helmChartSourceQueries/useHelmRepoVersions';
 import { HelmRelease } from '../../types';
 
 import { openUpgradeHelmModal } from './UpgradeHelmModal';
@@ -25,32 +25,56 @@ vi.mock('@/portainer/services/notifications', () => ({
   notifySuccess: vi.fn(),
 }));
 
-vi.mock('../../queries/useHelmRepositories', () => ({
-  useUserHelmRepositories: vi.fn(() => ({
-    data: ['repo1', 'repo2'],
-    isInitialLoading: false,
-    isError: false,
-  })),
-}));
+vi.mock('../../helmChartSourceQueries/useHelmRepositories', async () => {
+  const actual = await vi.importActual(
+    '../../helmChartSourceQueries/useHelmRepositories'
+  );
+  return {
+    ...actual,
+    useUserHelmRepositories: vi.fn(() => ({
+      data: ['repo1', 'repo2'],
+      isInitialLoading: false,
+      isError: false,
+    })),
+  };
+});
 
-vi.mock('../../queries/useHelmRepoVersions', () => ({
-  useHelmRepoVersions: vi.fn(),
-}));
+vi.mock('../../helmChartSourceQueries/useHelmRepoVersions', async () => {
+  const actual = await vi.importActual(
+    '../../helmChartSourceQueries/useHelmRepoVersions'
+  );
+  return {
+    ...actual,
+    useHelmRepoVersions: vi.fn(),
+  };
+});
 
 // Mock the useHelmRelease hook
-vi.mock('../queries/useHelmRelease', () => ({
-  useHelmRelease: vi.fn(() => ({
-    data: '1.0.0',
-  })),
-}));
+vi.mock('../../helmReleaseQueries/useHelmRelease', async () => {
+  const actual = await vi.importActual(
+    '../../helmReleaseQueries/useHelmRelease'
+  );
+  return {
+    ...actual,
+    useHelmRelease: vi.fn(() => ({
+      data: '1.0.0',
+    })),
+  };
+});
 
 // Mock the useUpdateHelmReleaseMutation hook
-vi.mock('../../queries/useUpdateHelmReleaseMutation', () => ({
-  useUpdateHelmReleaseMutation: vi.fn(() => ({
-    mutate: vi.fn(),
-    isLoading: false,
-  })),
-}));
+vi.mock('../../helmReleaseQueries/useUpdateHelmReleaseMutation', async () => {
+  const actual = await vi.importActual(
+    '../../helmReleaseQueries/useUpdateHelmReleaseMutation'
+  );
+  return {
+    ...actual,
+    useUpdateHelmReleaseMutation: vi.fn(() => ({
+      mutate: vi.fn(),
+      isLoading: false,
+    })),
+  };
+});
 
 function renderButton(props = {}) {
   const defaultProps = {
@@ -157,12 +181,14 @@ describe('UpgradeButton', () => {
         metadata: {
           name: 'test-chart',
           version: '1.0.0',
+          appVersion: '1.0.0',
         },
       },
       values: {
         userSuppliedValues: '{}',
       },
       manifest: '',
+      namespace: 'default',
     } as HelmRelease;
 
     vi.mocked(useHelmRepoVersions).mockReturnValue({
@@ -193,7 +219,9 @@ describe('UpgradeButton', () => {
         expect.arrayContaining([
           { Version: '1.0.0', Repo: 'stable' },
           { Version: '1.1.0', Repo: 'stable' },
-        ])
+        ]),
+        '', // releaseManifest
+        1 // environmentId
       );
     });
   });

app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeButton.tsx

@@ -12,10 +12,13 @@ import { Tooltip } from '@@/Tip/Tooltip';
 import { Link } from '@@/Link';
 
 import { HelmRelease, UpdateHelmReleasePayload } from '../../types';
-import { useUpdateHelmReleaseMutation } from '../../queries/useUpdateHelmReleaseMutation';
-import { useHelmRepoVersions } from '../../queries/useHelmRepoVersions';
-import { useHelmRelease } from '../queries/useHelmRelease';
-import { useUserHelmRepositories } from '../../queries/useHelmRepositories';
+import { useUpdateHelmReleaseMutation } from '../../helmReleaseQueries/useUpdateHelmReleaseMutation';
+import { useHelmRepoVersions } from '../../helmChartSourceQueries/useHelmRepoVersions';
+import { useHelmRelease } from '../../helmReleaseQueries/useHelmRelease';
+import {
+  flattenHelmRegistries,
+  useUserHelmRepositories,
+} from '../../helmChartSourceQueries/useHelmRepositories';
 
 import { openUpgradeHelmModal } from './UpgradeHelmModal';
 
@@ -36,7 +39,9 @@ export function UpgradeButton({
   const [useCache, setUseCache] = useState(true);
   const updateHelmReleaseMutation = useUpdateHelmReleaseMutation(environmentId);
 
-  const userRepositoriesQuery = useUserHelmRepositories();
+  const userRepositoriesQuery = useUserHelmRepositories({
+    select: flattenHelmRegistries,
+  });
   const helmRepoVersionsQuery = useHelmRepoVersions(
     release?.chart.metadata?.name || '',
     60 * 60 * 1000, // 1 hour
@@ -164,7 +169,9 @@ export function UpgradeButton({
   async function handleUpgrade() {
     const submittedUpgradeValues = await openUpgradeHelmModal(
       editableHelmRelease,
-      filteredVersions
+      filteredVersions,
+      release?.manifest || '',
+      environmentId
     );
 
     if (submittedUpgradeValues) {

app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeHelmModal.tsx

@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ArrowUp } from 'lucide-react';
 
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
-import { ChartVersion } from '@/react/kubernetes/helm/queries/useHelmRepoVersions';
+import { ChartVersion } from '@/react/kubernetes/helm/helmChartSourceQueries/useHelmRepoVersions';
+import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { Modal, OnSubmit, openModal } from '@@/modals';
 import { Button } from '@@/buttons';
@@ -15,26 +16,32 @@ import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
 
 import { UpdateHelmReleasePayload } from '../../types';
 import { HelmValuesInput } from '../../components/HelmValuesInput';
-import { useHelmChartValues } from '../../queries/useHelmChartValues';
+import { useHelmChartValues } from '../../helmChartSourceQueries/useHelmChartValues';
+import { ManifestPreviewFormSection } from '../../components/ManifestPreviewFormSection';
 
 interface Props {
   onSubmit: OnSubmit<UpdateHelmReleasePayload>;
-  payload: UpdateHelmReleasePayload;
+  helmReleaseInitialValues: UpdateHelmReleasePayload;
+  releaseManifest: string;
   versions: ChartVersion[];
   chartName: string;
+  environmentId: EnvironmentId;
 }
 
 export function UpgradeHelmModal({
-  payload,
+  helmReleaseInitialValues,
+  releaseManifest,
   versions,
   onSubmit,
   chartName,
+  environmentId,
 }: Props) {
   const versionOptions: Option<ChartVersion>[] = versions.map((version) => {
-    const repo = payload.repo === version.Repo ? version.Repo : '';
+    const repo =
+      helmReleaseInitialValues.repo === version.Repo ? version.Repo : '';
     const isCurrentVersion =
-      version.AppVersion === payload.appVersion &&
-      version.Version === payload.version;
+      version.AppVersion === helmReleaseInitialValues.appVersion &&
+      version.Version === helmReleaseInitialValues.version;
 
     const label = `${repo}@${version.Version}${
       isCurrentVersion ? ' (current)' : ''
@@ -50,13 +57,16 @@ export function UpgradeHelmModal({
   const defaultVersion =
     versionOptions.find(
       (v) =>
-        v.value.AppVersion === payload.appVersion &&
-        v.value.Version === payload.version &&
-        v.value.Repo === payload.repo
+        v.value.AppVersion === helmReleaseInitialValues.appVersion &&
+        v.value.Version === helmReleaseInitialValues.version &&
+        v.value.Repo === helmReleaseInitialValues.repo
     )?.value || versionOptions[0]?.value;
   const [version, setVersion] = useState<ChartVersion>(defaultVersion);
-  const [userValues, setUserValues] = useState<string>(payload.values || '');
+  const [userValues, setUserValues] = useState<string>(
+    helmReleaseInitialValues.values || ''
+  );
   const [atomic, setAtomic] = useState<boolean>(true);
+  const [previewIsValid, setPreviewIsValid] = useState<boolean>(false);
 
   const chartValuesRefQuery = useHelmChartValues({
     chart: chartName,
@@ -64,6 +74,19 @@ export function UpgradeHelmModal({
     version: version.Version,
   });
 
+  const submitPayload = useMemo(
+    () => ({
+      name: helmReleaseInitialValues.name,
+      values: userValues,
+      namespace: helmReleaseInitialValues.namespace,
+      chart: helmReleaseInitialValues.chart,
+      repo: version.Repo,
+      version: version.Version,
+      atomic,
+    }),
+    [helmReleaseInitialValues, userValues, version, atomic]
+  );
+
   return (
     <Modal
       onDismiss={() => onSubmit()}
@@ -84,7 +107,7 @@ export function UpgradeHelmModal({
             >
               <Input
                 id="release-name-input"
-                value={payload.name}
+                value={helmReleaseInitialValues.name}
                 readOnly
                 disabled
                 data-cy="helm-release-name-input"
@@ -97,7 +120,7 @@ export function UpgradeHelmModal({
             >
               <Input
                 id="namespace-input"
-                value={payload.namespace}
+                value={helmReleaseInitialValues.namespace}
                 readOnly
                 disabled
                 data-cy="helm-namespace-input"
@@ -134,6 +157,15 @@ export function UpgradeHelmModal({
               valuesRef={chartValuesRefQuery.data?.values ?? ''}
               isValuesRefLoading={chartValuesRefQuery.isInitialLoading}
             />
+            <div className="mb-10">
+              <ManifestPreviewFormSection
+                payload={submitPayload}
+                onChangePreviewValidation={setPreviewIsValid}
+                title="Manifest changes"
+                currentManifest={releaseManifest}
+                environmentId={environmentId}
+              />
+            </div>
           </div>
         </Modal.Body>
       </div>
@@ -149,17 +181,8 @@ export function UpgradeHelmModal({
             Cancel
           </Button>
           <Button
-            onClick={() =>
-              onSubmit({
-                name: payload.name,
-                values: userValues,
-                namespace: payload.namespace,
-                chart: payload.chart,
-                repo: version.Repo,
-                version: version.Version,
-                atomic,
-              })
-            }
+            onClick={() => onSubmit(submitPayload)}
+            disabled={!previewIsValid}
             color="primary"
             key="update-button"
             size="medium"
@@ -174,12 +197,16 @@ export function UpgradeHelmModal({
 }
 
 export async function openUpgradeHelmModal(
-  payload: UpdateHelmReleasePayload,
-  versions: ChartVersion[]
+  helmReleaseInitialValues: UpdateHelmReleasePayload,
+  versions: ChartVersion[],
+  releaseManifest: string,
+  environmentId: EnvironmentId
 ) {
   return openModal(withReactQuery(withCurrentUser(UpgradeHelmModal)), {
-    payload,
+    helmReleaseInitialValues,
     versions,
-    chartName: payload.chart,
+    chartName: helmReleaseInitialValues.chart,
+    releaseManifest,
+    environmentId,
   });
 }