frontend UI for creating snapshots

Author: williamstein

src/packages/file-server/btrfs/subvolume-snapshots.ts

@@ -4,8 +4,8 @@ import getLogger from "@cocalc/backend/logger";
 import { join } from "path";
 import { SnapshotCounts, updateRollingSnapshots } from "./snapshots";
 import { ConatError } from "@cocalc/conat/core/client";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
-export const SNAPSHOTS = ".snapshots";
 const logger = getLogger("file-server:btrfs:subvolume-snapshots");
 
 export class SubvolumeSnapshots {

src/packages/file-server/btrfs/test/rustic.test.ts

@@ -1,5 +1,6 @@
 import { before, after, fs } from "./setup";
 import { type Subvolume } from "../subvolume";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 beforeAll(before);
 
@@ -22,7 +23,7 @@ describe("test rustic backups", () => {
     expect(Math.abs(Date.now() - v[0].time.valueOf())).toBeLessThan(10000);
     const { id } = v[0];
     const w = await vol.rustic.ls({ id });
-    expect(w).toEqual([".snapshots", "a.txt"]);
+    expect(w).toEqual([SNAPSHOTS, "a.txt"]);
   });
 
   it("delete a.txt, then restore it from the backup", async () => {
@@ -42,7 +43,7 @@ describe("test rustic backups", () => {
     const { id } = v[1];
     const w = await vol.rustic.ls({ id });
     expect(w).toEqual([
-      ".snapshots",
+      SNAPSHOTS,
       "a.txt",
       "my-dir",
       "my-dir/file.txt",

src/packages/file-server/btrfs/test/subvolume.test.ts

@@ -2,6 +2,7 @@ import { before, after, fs, sudo } from "./setup";
 import { wait } from "@cocalc/backend/conat/test/util";
 import { randomBytes } from "crypto";
 import { type Subvolume } from "../subvolume";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 beforeAll(before);
 
@@ -95,7 +96,7 @@ describe("the filesystem operations", () => {
 
   it("unlink (delete) our file", async () => {
     await vol.fs.unlink("a.txt");
-    expect(await vol.fs.readdir("")).toEqual([".snapshots"]);
+    expect(await vol.fs.readdir("")).toEqual([SNAPSHOTS]);
   });
 
   it("snapshot still exists", async () => {

src/packages/frontend/frame-editors/time-travel-editor/actions.ts

@@ -33,6 +33,7 @@ import type { Document } from "@cocalc/sync/editor/generic/types";
 import LRUCache from "lru-cache";
 import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import { until } from "@cocalc/util/async-utils";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 const EXTENSION = ".time-travel";
 
@@ -362,7 +363,7 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
 
   open_snapshots = (): void => {
     // log("open_snapshots");
-    this.redux.getProjectActions(this.project_id).open_directory(".snapshots");
+    this.redux.getProjectActions(this.project_id).open_directory(SNAPSHOTS);
   };
 
   exportEditHistory = async (): Promise<string> => {

src/packages/frontend/project/explorer/action-bar.tsx

@@ -23,6 +23,7 @@ import * as misc from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { DirectoryListingEntry } from "@cocalc/util/types";
 import { VisibleMDLG } from "@cocalc/frontend/components";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 const ROW_INFO_STYLE = {
   color: COLORS.GRAY,
@@ -168,7 +169,7 @@ export function ActionBar({
     const disabled =
       isDisabledSnapshots(name) &&
       (current_path != null
-        ? current_path.startsWith(".snapshots")
+        ? current_path.startsWith(SNAPSHOTS)
         : undefined);
     const obj = file_actions[name];
     const handle_click = (_e: React.MouseEvent) => {

src/packages/frontend/project/explorer/action-box.tsx

@@ -35,6 +35,7 @@ import { in_snapshot_path } from "../utils";
 import CreateArchive from "./create-archive";
 import Download from "./download";
 import RenameFile from "./rename-file";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 export const PRE_STYLE = {
   marginBottom: "15px",
@@ -167,7 +168,7 @@ export function ActionBox({
                   href=""
                   onClick={(e) => {
                     e.preventDefault();
-                    actions.open_directory(".snapshots");
+                    actions.open_directory(SNAPSHOTS);
                   }}
                 >
                   ~/.snapshots

src/packages/frontend/project/explorer/explorer.tsx

@@ -122,6 +122,10 @@ export function Explorer() {
     "show_custom_software_reset",
   );
   const show_library = useTypedRedux({ project_id }, "show_library");
+  const disableExplorerKeyhandler = useTypedRedux(
+    { project_id },
+    "disableExplorerKeyhandler",
+  );
 
   const [shiftIsDown, setShiftIsDown] = useState<boolean>(false);
 
@@ -169,7 +173,7 @@ export function Explorer() {
 
   const { val: clicked, inc: clickedOnExplorer } = useCounter();
   useEffect(() => {
-    if (listing == null || file_action) {
+    if (listing == null || file_action || disableExplorerKeyhandler) {
       return;
     }
     const handleKeyDown = (e): void => {
@@ -232,7 +236,15 @@ export function Explorer() {
       $(window).off("keydown", handleKeyDown);
       $(window).off("keyup", handleKeyUp);
     };
-  }, [project_id, current_path, listing, file_action, flyout, clicked]);
+  }, [
+    project_id,
+    current_path,
+    listing,
+    file_action,
+    flyout,
+    clicked,
+    disableExplorerKeyhandler,
+  ]);
 
   if (actions == null || project_map == null) {
     return <Loading />;

src/packages/frontend/project/explorer/misc-side-buttons.tsx

@@ -6,7 +6,7 @@
 import { Space } from "antd";
 import { join } from "path";
 import { defineMessage, useIntl } from "react-intl";
-import { Button, ButtonToolbar } from "@cocalc/frontend/antd-bootstrap";
+import { Button } from "@cocalc/frontend/antd-bootstrap";
 import { Icon, Tip, VisibleLG } from "@cocalc/frontend/components";
 import LinkRetry from "@cocalc/frontend/components/link-retry";
 import { useStudentProjectFunctionality } from "@cocalc/frontend/course";
@@ -17,6 +17,8 @@ import { KUCALC_COCALC_COM } from "@cocalc/util/db-schema/site-defaults";
 import { useProjectContext } from "@cocalc/frontend/project/context";
 import { useTypedRedux } from "@cocalc/frontend/app-framework";
 import { type JSX, type MouseEvent } from "react";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
+import Snapshots from "@cocalc/frontend/project/snapshots";
 
 const SHOW_SERVER_LAUNCHERS = false;
 
@@ -51,7 +53,7 @@ export function MiscSideButtons() {
 
   const handle_backup = (e: MouseEvent): void => {
     e.preventDefault();
-    actions?.open_directory(".snapshots");
+    actions?.open_directory(SNAPSHOTS);
     track("snapshots", { action: "open", where: "explorer" });
   };
 
@@ -79,7 +81,7 @@ export function MiscSideButtons() {
     }
     return (
       <Button bsSize="small" onClick={handle_backup}>
-        <Icon name="life-saver" />{" "}
+        <Icon name="disk-round" />{" "}
         <VisibleLG>
           <span style={{ fontSize: 12 }}>Backups</span>
         </VisibleLG>
@@ -168,10 +170,9 @@ export function MiscSideButtons() {
   }
 
   return (
-    <ButtonToolbar
-      style={{ whiteSpace: "nowrap", padding: "0" }}
-      className="pull-right"
-    >
+    <Space className="pull-right">
+      {(current_path == SNAPSHOTS ||
+        current_path.startsWith(SNAPSHOTS + "/")) && <Snapshots />}
       {SHOW_SERVER_LAUNCHERS && (
         <Space.Compact>
           {render_jupyterlab_button()}
@@ -190,6 +191,6 @@ export function MiscSideButtons() {
           <TourButton project_id={project_id} />
         </Space.Compact>
       </div>
-    </ButtonToolbar>
+    </Space>
   );
 }

src/packages/frontend/project/page/flyouts/file-list-item.tsx

@@ -37,6 +37,7 @@ import {
 } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { FLYOUT_DEFAULT_WIDTH_PX, FLYOUT_PADDING } from "./consts";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 const FILE_ITEM_SELECTED_STYLE: CSS = {
   backgroundColor: COLORS.BLUE_LLL, // bit darker than .cc-project-flyout-file-item:hover
@@ -415,7 +416,7 @@ export const FileListItem = React.memo((props: Readonly<FileListItemProps>) => {
       if (key === "download" && !item.isDir) continue;
       const disabled =
         isDisabledSnapshots(key) &&
-        (current_path?.startsWith(".snapshots") ?? false);
+        (current_path?.startsWith(SNAPSHOTS) ?? false);
 
       const { name, icon, hideFlyout } = FILE_ACTIONS[key];
       if (hideFlyout) return;

src/packages/frontend/project/page/flyouts/files-controls.tsx

@@ -23,6 +23,7 @@ import { human_readable_size, path_split, plural } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { PANEL_STYLE_BOTTOM, PANEL_STYLE_TOP } from "./consts";
 import { useSingleFile } from "./utils";
+import { SNAPSHOTS } from "@cocalc/util/consts/snapshots";
 
 interface FilesSelectedControlsProps {
   checked_files: immutable.Set<string>;
@@ -205,7 +206,7 @@ export function FilesSelectedControls({
           {names.map((name) => {
             const disabled =
               isDisabledSnapshots(name) &&
-              (current_path?.startsWith(".snapshots") ?? false);
+              (current_path?.startsWith(SNAPSHOTS) ?? false);
 
             const { name: actionName, icon, hideFlyout } = FILE_ACTIONS[name];
             const title = intl.formatMessage(actionName);