feat(helm): rollback helm chart [r8s-287] (#660)

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

@@ -1,22 +1,20 @@
 import { EnvironmentId } from '@/react/portainer/environments/types';
-import { useAuthorizations } from '@/react/hooks/useUser';
 
+import { RollbackButton } from './RollbackButton';
 import { UninstallButton } from './UninstallButton';
 
 export function ChartActions({
   environmentId,
   releaseName,
   namespace,
+  currentRevision,
 }: {
   environmentId: EnvironmentId;
   releaseName: string;
   namespace?: string;
+  currentRevision?: number;
 }) {
-  const { authorized } = useAuthorizations('K8sApplicationsW');
-
-  if (!authorized) {
-    return null;
-  }
+  const hasPreviousRevision = currentRevision && currentRevision >= 2;
 
   return (
     <div className="inline-flex gap-x-2">
@@ -25,6 +23,14 @@ export function ChartActions({
         releaseName={releaseName}
         namespace={namespace}
       />
+      {hasPreviousRevision && (
+        <RollbackButton
+          latestRevision={currentRevision}
+          environmentId={environmentId}
+          releaseName={releaseName}
+          namespace={namespace}
+        />
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,163 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse, http } from 'msw';
+import { vi, type Mock } from 'vitest';
+
+import { server } from '@/setup-tests/server';
+import { notifySuccess } from '@/portainer/services/notifications';
+import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
+
+import { confirm } from '@@/modals/confirm';
+
+import { RollbackButton } from './RollbackButton';
+
+// Mock the confirm modal function
+vi.mock('@@/modals/confirm', () => ({
+  confirm: vi.fn(() => Promise.resolve(false)),
+  buildConfirmButton: vi.fn((label) => ({ label })),
+}));
+
+// Mock the notifications service
+vi.mock('@/portainer/services/notifications', () => ({
+  notifySuccess: vi.fn(),
+}));
+
+function renderButton(props = {}) {
+  const defaultProps = {
+    latestRevision: 3, // So we're rolling back to revision 2
+    environmentId: 1,
+    releaseName: 'test-release',
+    namespace: 'default',
+    ...props,
+  };
+
+  const Wrapped = withTestQueryProvider(RollbackButton);
+  return render(<Wrapped {...defaultProps} />);
+}
+
+describe('RollbackButton', () => {
+  test('should display the revision to rollback to', () => {
+    renderButton();
+
+    const button = screen.getByRole('button', { name: /Rollback to #2/i });
+    expect(button).toBeInTheDocument();
+  });
+
+  test('should be disabled when the rollback mutation is loading', async () => {
+    const resolveRequest = vi.fn();
+    const requestPromise = new Promise<void>((resolve) => {
+      resolveRequest.mockImplementation(() => resolve());
+    });
+
+    server.use(
+      http.post(
+        '/api/endpoints/1/kubernetes/helm/test-release/rollback',
+        () =>
+          new Promise((resolve) => {
+            // Keep request pending to simulate loading state
+            requestPromise
+              .then(() => {
+                resolve(HttpResponse.json({}));
+                return null;
+              })
+              .catch(() => {});
+          })
+      )
+    );
+
+    renderButton();
+
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: /Rollback to #2/i });
+
+    (confirm as Mock).mockResolvedValueOnce(true);
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('Rolling back...')).toBeInTheDocument();
+    });
+
+    resolveRequest();
+  });
+
+  test('should show a confirmation modal before executing the rollback', async () => {
+    renderButton();
+
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: /Rollback to #2/i });
+
+    await user.click(button);
+
+    expect(confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Are you sure?',
+        message: expect.stringContaining(
+          'Rolling back will restore the application to revision #2'
+        ),
+      })
+    );
+  });
+
+  test('should execute the rollback mutation with correct query params when confirmed', async () => {
+    let requestParams: Record<string, string> = {};
+
+    server.use(
+      http.post(
+        '/api/endpoints/1/kubernetes/helm/test-release/rollback',
+        ({ request }) => {
+          const url = new URL(request.url);
+          requestParams = Object.fromEntries(url.searchParams.entries());
+          return HttpResponse.json({});
+        }
+      )
+    );
+
+    renderButton();
+
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: /Rollback to #2/i });
+
+    (confirm as Mock).mockResolvedValueOnce(true);
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(Object.keys(requestParams).length).toBeGreaterThan(0);
+    });
+
+    expect(requestParams.namespace).toBe('default');
+    expect(requestParams.revision).toBe('2');
+
+    expect(notifySuccess).toHaveBeenCalledWith(
+      'Success',
+      'Application rolled back to revision #2 successfully.'
+    );
+  });
+
+  test('should not execute the rollback if confirmation is cancelled', async () => {
+    let wasRequestMade = false;
+
+    server.use(
+      http.post(
+        '/api/endpoints/1/kubernetes/helm/test-release/rollback',
+        () => {
+          wasRequestMade = true;
+          return HttpResponse.json({});
+        }
+      )
+    );
+
+    renderButton();
+
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: /Rollback to #2/i });
+
+    (confirm as Mock).mockResolvedValueOnce(false);
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(confirm).toHaveBeenCalled();
+    });
+
+    expect(wasRequestMade).toBe(false);
+  });
+});

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

@@ -0,0 +1,71 @@
+import { RotateCcw } from 'lucide-react';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { LoadingButton } from '@@/buttons';
+import { buildConfirmButton } from '@@/modals/utils';
+import { confirm } from '@@/modals/confirm';
+import { ModalType } from '@@/modals';
+
+import { useHelmRollbackMutation } from '../queries/useHelmRollbackMutation';
+
+type Props = {
+  latestRevision: number;
+  environmentId: EnvironmentId;
+  releaseName: string;
+  namespace?: string;
+};
+
+export function RollbackButton({
+  latestRevision,
+  environmentId,
+  releaseName,
+  namespace,
+}: Props) {
+  // the selectedRevision can be a prop when selecting a revision is implemented
+  const selectedRevision = latestRevision ? latestRevision - 1 : undefined;
+
+  const rollbackMutation = useHelmRollbackMutation(environmentId);
+
+  return (
+    <LoadingButton
+      onClick={handleClick}
+      isLoading={rollbackMutation.isLoading}
+      loadingText="Rolling back..."
+      data-cy="rollback-button"
+      icon={RotateCcw}
+      color="default"
+      size="medium"
+    >
+      Rollback to #{selectedRevision}
+    </LoadingButton>
+  );
+
+  async function handleClick() {
+    const confirmed = await confirm({
+      title: 'Are you sure?',
+      modalType: ModalType.Warn,
+      confirmButton: buildConfirmButton('Rollback'),
+      message: `Rolling back will restore the application to revision #${selectedRevision}, which will cause service interruption. Do you wish to continue?`,
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    rollbackMutation.mutate(
+      {
+        releaseName,
+        params: { namespace, revision: selectedRevision },
+      },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Success',
+            `Application rolled back to revision #${selectedRevision} successfully.`
+          );
+        },
+      }
+    );
+  }
+}

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

@@ -3,12 +3,14 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 import helm from '@/assets/ico/vendor/helm.svg?c';
 import { PageHeader } from '@/react/components/PageHeader';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
-import { EnvironmentId } from '@/react/portainer/environments/types';
+import { Authorized } from '@/react/hooks/useUser';
 
 import { WidgetTitle, WidgetBody, Widget, Loading } from '@@/Widget';
 import { Card } from '@@/Card';
 import { Alert } from '@@/Alert';
 
+import { HelmRelease } from '../types';
+
 import { HelmSummary } from './HelmSummary';
 import { ReleaseTabs } from './ReleaseDetails/ReleaseTabs';
 import { useHelmRelease } from './queries/useHelmRelease';
@@ -19,6 +21,10 @@ export function HelmApplicationView() {
   const { params } = useCurrentStateAndParams();
   const { name, namespace } = params;
 
+  const helmReleaseQuery = useHelmRelease(environmentId, name, namespace, {
+    showResources: true,
+  });
+
   return (
     <>
       <PageHeader
@@ -35,18 +41,21 @@ export function HelmApplicationView() {
           <Widget>
             {name && (
               <WidgetTitle icon={helm} title={name}>
-                <ChartActions
-                  environmentId={environmentId}
-                  releaseName={name}
-                  namespace={namespace}
-                />
+                <Authorized authorizations="K8sApplicationsW">
+                  <ChartActions
+                    environmentId={environmentId}
+                    releaseName={name}
+                    namespace={namespace}
+                    currentRevision={helmReleaseQuery.data?.version}
+                  />
+                </Authorized>
               </WidgetTitle>
             )}
             <WidgetBody>
               <HelmDetails
-                name={name}
-                namespace={namespace}
-                environmentId={environmentId}
+                isLoading={helmReleaseQuery.isInitialLoading}
+                isError={helmReleaseQuery.isError}
+                release={helmReleaseQuery.data}
               />
             </WidgetBody>
           </Widget>
@@ -57,21 +66,13 @@ export function HelmApplicationView() {
 }
 
 type HelmDetailsProps = {
-  name: string;
-  namespace: string;
-  environmentId: EnvironmentId;
+  isLoading: boolean;
+  isError: boolean;
+  release: HelmRelease | undefined;
 };
 
-function HelmDetails({ name, namespace, environmentId }: HelmDetailsProps) {
-  const {
-    data: release,
-    isInitialLoading,
-    isError,
-  } = useHelmRelease(environmentId, name, namespace, {
-    showResources: true,
-  });
-
-  if (isInitialLoading) {
+function HelmDetails({ isLoading, isError, release: data }: HelmDetailsProps) {
+  if (isLoading) {
     return <Loading />;
   }
 
@@ -81,16 +82,16 @@ function HelmDetails({ name, namespace, environmentId }: HelmDetailsProps) {
     );
   }
 
-  if (!release) {
+  if (!data) {
     return <Alert color="error" title="No Helm application details found" />;
   }
 
   return (
     <>
-      <HelmSummary release={release} />
+      <HelmSummary release={data} />
       <div className="my-6 h-[1px] w-full bg-gray-5 th-dark:bg-gray-7 th-highcontrast:bg-white" />
       <Card className="bg-inherit">
-        <ReleaseTabs release={release} />
+        <ReleaseTabs release={data} />
       </Card>
     </>
   );

app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRollbackMutation.ts

@@ -0,0 +1,61 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import {
+  queryClient,
+  withInvalidate,
+  withGlobalError,
+} from '@/react-tools/react-query';
+import axios from '@/portainer/services/axios';
+import { queryKeys } from '@/react/kubernetes/applications/queries/query-keys';
+
+/**
+ * Parameters for helm rollback operation
+ *
+ * @see https://helm.sh/docs/helm/helm_rollback/
+ */
+interface RollbackQueryParams {
+  /** Optional namespace for the release (defaults to "default" if not specified) */
+  namespace?: string;
+  /** Revision to rollback to (if omitted or set to 0, rolls back to the previous release) */
+  revision?: number;
+  /** If set, waits until resources are in a ready state before marking the release as successful (default: false) */
+  wait?: boolean;
+  /** If set and --wait enabled, waits until all Jobs have been completed before marking the release as successful (default: false) */
+  waitForJobs?: boolean;
+  /** Performs pods restart for the resources if applicable (default: true) */
+  recreate?: boolean;
+  /** Force resource update through delete/recreate if needed (default: false) */
+  force?: boolean;
+  /** Time to wait for any individual Kubernetes operation in seconds (default: 300) */
+  timeout?: number;
+}
+
+interface RollbackPayload {
+  releaseName: string;
+  params: RollbackQueryParams;
+}
+
+async function rollbackRelease({
+  releaseName,
+  params,
+  environmentId,
+}: RollbackPayload & { environmentId: EnvironmentId }) {
+  return axios.post<Record<string, unknown>>(
+    `/endpoints/${environmentId}/kubernetes/helm/${releaseName}/rollback`,
+    null,
+    { params }
+  );
+}
+
+export function useHelmRollbackMutation(environmentId: EnvironmentId) {
+  return useMutation({
+    mutationFn: ({ releaseName, params }: RollbackPayload) =>
+      rollbackRelease({ releaseName, params, environmentId }),
+    ...withGlobalError('Unable to rollback Helm release'),
+    ...withInvalidate(queryClient, [
+      [environmentId, 'helm', 'releases'],
+      queryKeys.applications(environmentId),
+    ]),
+  });
+}