dashboard: UI for configuring including storage in cloud backups (#42885)

GitOrigin-RevId: 06ce0815918a1f50773dd95db3ab85d6a29b38a5

Author: reeceyang

npm-packages/dashboard/src/components/deploymentSettings/BackupListItem.test.tsx

@@ -6,9 +6,17 @@ import {
   TeamMemberResponse,
 } from "generatedApi";
 import userEvent from "@testing-library/user-event";
-import { BackupResponse, useRestoreFromCloudBackup } from "api/backups";
+import {
+  BackupResponse,
+  useRestoreFromCloudBackup,
+  useRequestCloudBackup,
+} from "api/backups";
 import { Doc, Id } from "system-udfs/convex/_generated/dataModel";
-import { BackupListItem, progressMessageForBackup } from "./BackupListItem";
+import {
+  BackupListItem,
+  progressMessageForBackup,
+  BackupNowButton,
+} from "./BackupListItem";
 
 const now = new Date();
 
@@ -31,6 +39,8 @@ const backup: BackupResponse = {
 
 const backupInProgress: BackupResponse = { ...backup, state: "inProgress" };
 
+const backupNoStorage: BackupResponse = { ...backup, includeStorage: false };
+
 const existingCloudBackupRequested: Doc<"_exports"> = {
   _id: "yo" as Id<"_exports">,
   _creationTime: 2,
@@ -272,4 +282,97 @@ describe("BackupListItem", () => {
       progressMessageForBackup(badIdBackup, existingCloudBackupInProgress),
     ).toEqual(null);
   });
+
+  it("indicates backup includes storage", async () => {
+    const { findByText } = render(
+      <BackupListItem
+        backup={backup}
+        restoring={false}
+        someBackupInProgress={false}
+        someRestoreInProgress={false}
+        latestBackupInTargetDeployment={null}
+        targetDeployment={{ ...targetDeployment, deploymentType: "dev" }}
+        team={team}
+        getZipExportUrl={getZipExportUrl}
+        canPerformActions
+        maxCloudBackups={2}
+        progressMessage={null}
+      />,
+    );
+
+    expect(await findByText("Includes file storage")).toBeInTheDocument();
+  });
+
+  it("indicates backup does not include storage", async () => {
+    const { findByText } = render(
+      <BackupListItem
+        backup={backupNoStorage}
+        restoring={false}
+        someBackupInProgress={false}
+        someRestoreInProgress={false}
+        latestBackupInTargetDeployment={null}
+        targetDeployment={{ ...targetDeployment, deploymentType: "dev" }}
+        team={team}
+        getZipExportUrl={getZipExportUrl}
+        canPerformActions
+        maxCloudBackups={2}
+        progressMessage={null}
+      />,
+    );
+
+    expect(await findByText("Tables only")).toBeInTheDocument();
+  });
+});
+
+describe("BackupNowButton", () => {
+  afterEach(cleanup);
+
+  it("shows modal when clicked", async () => {
+    const user = userEvent.setup({ delay: null });
+    const { getByText, findByText } = render(
+      <BackupNowButton
+        deployment={targetDeployment}
+        team={team}
+        maxCloudBackups={10}
+        canPerformActions
+      />,
+    );
+
+    await user.click(getByText("Backup Now"));
+
+    expect(await findByText("Request an immediate backup")).toBeInTheDocument();
+    expect(await findByText("Include file storage")).toBeInTheDocument();
+  });
+
+  it.each([[true], [false]])(
+    "calls useRequestCloudBackup with includeStorage=%s when checkbox is toggled",
+    async (includeStorage) => {
+      const user = userEvent.setup({ delay: null });
+
+      const { getByText, getByLabelText } = render(
+        <BackupNowButton
+          deployment={targetDeployment}
+          team={team}
+          maxCloudBackups={10}
+          canPerformActions
+        />,
+      );
+
+      // Open modal
+      await user.click(getByText("Backup Now"));
+
+      // Toggle checkbox to match desired state
+      const checkbox = getByLabelText(/Include file storage/i);
+      if (includeStorage) {
+        await user.click(checkbox);
+      }
+
+      // Submit
+      await user.click(getByText("Create Backup"));
+
+      expect(useRequestCloudBackup()).toHaveBeenCalledWith({
+        includeStorage,
+      });
+    },
+  );
 });

npm-packages/dashboard/src/components/deploymentSettings/BackupListItem.tsx

@@ -117,13 +117,18 @@ export function BackupListItem({
               </div>
             )}
           </div>
-          {backup.expirationTime !== null && (
-            <TimestampDistance
-              prefix="Expires "
-              date={new Date(backup.expirationTime)}
-              className="text-left text-content-errorSecondary"
-            />
-          )}
+          <div className="flex flex-col items-end gap-1">
+            <span className="text-xs text-content-secondary">
+              {backup.includeStorage ? "Includes file storage" : "Tables only"}
+            </span>
+            {backup.expirationTime !== null && (
+              <TimestampDistance
+                prefix="Expires "
+                date={new Date(backup.expirationTime)}
+                className="text-left text-content-errorSecondary"
+              />
+            )}
+          </div>
           {backup.state === "failed" && (
             <Tooltip
               tip="This backup couldn’t be completed. Contact [email protected] for help."
@@ -374,13 +379,15 @@ function RestoreConfirmation({
       />
 
       <p className="my-2 text-sm">
-        The data (tables and files) in <code>{targetDeployment.name}</code> will
-        be replaced by the contents of the backup.
+        The tables in <code>{targetDeployment.name}</code> will be replaced by
+        the contents of the backup.{" "}
+        {backup.includeStorage ??
+          "Any files in the backup that do not already exist will be uploaded."}
       </p>
 
       <p className="text-sm text-content-secondary">
         The rest of your deployment configuration (code, environment variables,
-        scheduled functions, etc.) will not be changed.
+        scheduled functions, existing files, etc.) will not be changed.
       </p>
 
       {needsCheckboxConfirmation && (
@@ -522,6 +529,9 @@ function BackupSummary({
             <p className="text-xs text-content-secondary">
               (<TimestampDistance date={new Date(backup.requestedTime)} />)
             </p>
+            <p className="text-xs text-content-secondary">
+              {backup.includeStorage ? "Includes file storage" : "Tables only"}
+            </p>
           </>
         ) : (
           <em>Unknown backup</em>
@@ -704,46 +714,79 @@ export function BackupNowButton({
 
   const requestBackup = useRequestCloudBackup(deployment.id, team.id);
   const [isOngoing, setIsOngoing] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [includeStorage, setIncludeStorage] = useState(false);
+  const includeStorageCheckboxId = useId();
 
   const doBackup = async () => {
     setIsOngoing(true);
     try {
-      await requestBackup();
+      await requestBackup({ includeStorage });
     } finally {
       setIsOngoing(false);
     }
+    setShowModal(false);
+    if (onBackupRequested) {
+      onBackupRequested();
+    }
   };
 
   return (
-    <Button
-      variant="neutral"
-      className="w-fit"
-      loading={isOngoing}
-      icon={<ArchiveIcon />}
-      onClick={async () => {
-        await doBackup();
-        if (onBackupRequested) {
-          onBackupRequested();
+    <>
+      <Button
+        variant="neutral"
+        className="w-fit"
+        loading={isOngoing}
+        icon={<ArchiveIcon />}
+        onClick={() => setShowModal(true)}
+        disabled={
+          nonFailedBackupsForDeployment === undefined ||
+          nonFailedBackupsForDeployment.length >= maxCloudBackups ||
+          !canPerformActions
         }
-      }}
-      disabled={
-        nonFailedBackupsForDeployment === undefined ||
-        nonFailedBackupsForDeployment.length >= maxCloudBackups ||
-        !canPerformActions
-      }
-      tip={
-        isOngoing
-          ? "A backup is currently in progress."
-          : nonFailedBackupsForDeployment &&
-              nonFailedBackupsForDeployment.length >= maxCloudBackups
-            ? `You can only have up to ${maxCloudBackups} backups on your current plan. Delete some of your existing backups in this deployment to create a new one.`
-            : !canPerformActions
-              ? "You do not have permission to create backups in production."
-              : undefined
-      }
-    >
-      Backup Now
-    </Button>
+        tip={
+          isOngoing
+            ? "A backup is currently in progress."
+            : nonFailedBackupsForDeployment &&
+                nonFailedBackupsForDeployment.length >= maxCloudBackups
+              ? `You can only have up to ${maxCloudBackups} backups on your current plan. Delete some of your existing backups in this deployment to create a new one.`
+              : !canPerformActions
+                ? "You do not have permission to create backups in production."
+                : undefined
+        }
+      >
+        Backup Now
+      </Button>
+
+      {showModal && (
+        <Modal
+          onClose={() => setShowModal(false)}
+          title="Request an immediate backup"
+          size="sm"
+        >
+          <label
+            className="ml-px flex items-center gap-2 text-sm"
+            htmlFor={includeStorageCheckboxId}
+          >
+            <Checkbox
+              id={includeStorageCheckboxId}
+              checked={includeStorage}
+              onChange={() => setIncludeStorage(!includeStorage)}
+            />
+            Include file storage
+          </label>
+
+          <Button
+            className="mt-4 ml-auto flex gap-2"
+            variant="primary"
+            onClick={doBackup}
+            loading={isOngoing}
+          >
+            Create Backup
+          </Button>
+        </Modal>
+      )}
+    </>
   );
 }
 

npm-packages/dashboard/src/components/deploymentSettings/BackupScheduleSelector.test.tsx

@@ -2,7 +2,12 @@ import { render } from "@testing-library/react";
 import { DeploymentResponse } from "generatedApi";
 import userEvent from "@testing-library/user-event";
 import { useConfigurePeriodicBackup } from "api/backups";
-import { BackupScheduleSelector, BackupScheduleSelectorInner } from "./Backups";
+import {
+  BackupScheduleSelector,
+  BackupScheduleSelectorInner,
+  BackupIncludeStorageSelector,
+  AutomaticBackupSelector,
+} from "./Backups";
 
 const deployment: DeploymentResponse = {
   kind: "cloud",
@@ -18,6 +23,8 @@ const deployment: DeploymentResponse = {
 jest.mock("api/profile", () => {});
 jest.mock("api/backups", () => ({
   useConfigurePeriodicBackup: jest.fn().mockReturnValue(jest.fn()),
+  useGetPeriodicBackupConfig: jest.fn().mockReturnValue(null),
+  useDisablePeriodicBackup: jest.fn().mockReturnValue(jest.fn()),
 }));
 jest.mock("api/vanityDomains", () => ({}));
 jest.mock("api/usage", () => ({}));
@@ -212,3 +219,60 @@ describe("BackupScheduleSelectorInner", () => {
     });
   });
 });
+
+describe("BackupIncludeStorageSelector", () => {
+  it.each([
+    [true, false],
+    [false, true],
+  ])(
+    "toggles includeStorage from %s to %s when checkbox is clicked",
+    async (initialValue, expectedValue) => {
+      const user = userEvent.setup({ delay: null });
+
+      const periodicBackup = {
+        sourceDeploymentId: 1,
+        cronspec: "0 0 * * *",
+        expirationDeltaSecs: 604800,
+        nextRun: Date.now() + 86400000,
+        includeStorage: initialValue,
+      };
+
+      const { getByLabelText } = render(
+        <BackupIncludeStorageSelector
+          periodicBackup={periodicBackup}
+          deployment={deployment}
+          disabled={false}
+        />,
+      );
+
+      const checkbox = getByLabelText(/Include file storage/i);
+      expect(checkbox).toBeInTheDocument();
+      await user.click(checkbox);
+
+      expect(useConfigurePeriodicBackup()).toHaveBeenCalledWith(
+        expect.objectContaining({
+          includeStorage: expectedValue,
+        }),
+      );
+    },
+  );
+});
+
+describe("AutomaticBackupSelector", () => {
+  it("defaults includeStorage to false when enabling automatic backups", async () => {
+    const user = userEvent.setup({ delay: null });
+
+    const { getByLabelText } = render(
+      <AutomaticBackupSelector deployment={deployment} canPerformActions />,
+    );
+
+    const checkbox = getByLabelText(/Backup automatically/i);
+    await user.click(checkbox);
+
+    expect(useConfigurePeriodicBackup()).toHaveBeenCalledWith(
+      expect.objectContaining({
+        includeStorage: false,
+      }),
+    );
+  });
+});