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.`
+          );
+        },
+      }
+    );
+  }
+}