fix #7740 - markdown load button

Author: williamstein

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

@@ -67,6 +67,8 @@ export interface TimeTravelState extends CodeEditorState {
   // true if in a git repo
   git?: boolean;
   //frame_states: Map<string, any>; // todo: really map from frame_id to FrameState as immutable map.
+  // timetravel has own error state
+  error: string;
 }
 
 export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
@@ -107,6 +109,10 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     return { type: "time_travel" };
   }
 
+  set_error = (error) => {
+    this.setState({ error });
+  };
+
   private init_syncdoc = async (): Promise<void> => {
     const persistent = this.docext == "ipynb" || this.docext == "sagews"; // ugly for now (?)
     this.syncdoc = await webapp_client.sync_client.open_existing_sync_document({
@@ -179,14 +185,15 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     }
   };
 
-  load_full_history = async (): Promise<void> => {
+  loadFullHistory = async (): Promise<void> => {
     if (
       this.store.get("has_full_history") ||
       this.syncdoc == null ||
       this.store.get("git_mode")
-    )
+    ) {
       return;
-    await this.syncdoc.load_full_history(); // todo -- error reporting ...?
+    }
+    await this.syncdoc.load_full_history();
     this.setState({ has_full_history: true });
     this.syncdoc_changed(); // load new versions list.
   };
@@ -283,6 +290,17 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     }
   };
 
+  setNewestVersion = (id: string) => {
+    const node = this.getFrameNodeGlobal(id);
+    const versions = node?.get("git_mode")
+      ? this.store.get("git_versions")
+      : this.store.get("versions");
+    const v = (versions?.size ?? 0) - 1;
+    if (v >= 0) {
+      this.set_version(id, v);
+    }
+  };
+
   step = (id: string, delta: number): void => {
     const node = this.getFrameNodeGlobal(id);
     if (node.get("changes_mode")) {

src/packages/frontend/frame-editors/time-travel-editor/export.tsx

@@ -8,7 +8,7 @@
 - This is really just some minimal data *about* the history for now.
 */
 
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
@@ -18,11 +18,10 @@ interface Props {
 
 export function Export({ actions }: Props) {
   return (
-    <Button
-      onClick={() => actions.exportEditHistory()}
-      title="Export information about edit history to a JSON file"
-    >
-      <Icon name={"file-export"} /> Export
-    </Button>
+    <Tooltip title={"Export information about edit history to a JSON file"}>
+      <Button onClick={() => actions.exportEditHistory()}>
+        <Icon name={"file-export"} /> Export
+      </Button>
+    </Tooltip>
   );
 }

src/packages/frontend/frame-editors/time-travel-editor/load-full-history.tsx

@@ -2,22 +2,41 @@
  *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
-
-import { Button } from "antd";
+import { useState } from "react";
+import { Button, Spin, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
 interface Props {
+  id: string;
   actions: TimeTravelActions;
 }
 
-export function LoadFullHistory({ actions }: Props) {
+export function LoadFullHistory({ id, actions }: Props) {
+  const [loading, setLoading] = useState<boolean>(false);
   return (
-    <Button
-      onClick={() => actions.load_full_history()}
-      title={"Load the complete edit history for this file."}
+    <Tooltip
+      title={
+        "Load the full edit history for this file.  This may take a long time."
+      }
     >
-      <Icon name="file-archive" /> Load All
-    </Button>
+      <Button
+        disabled={loading}
+        onClick={async () => {
+          try {
+            setLoading(true);
+            await actions.loadFullHistory();
+          } catch (err) {
+            console.log("ERROR!", err);
+            actions.set_error(`${err}`);
+          } finally {
+            setLoading(false);
+            actions.setNewestVersion(id);
+          }
+        }}
+      >
+        <Icon name="file-archive" /> Load All {loading && <Spin />}
+      </Button>
+    </Tooltip>
   );
 }

src/packages/frontend/frame-editors/time-travel-editor/revert-file.tsx

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
@@ -12,20 +12,27 @@ interface Props {
   actions: TimeTravelActions;
   version: Date | undefined;
   doc;
+  changesMode?: boolean;
 }
 
-export function RevertFile({ id, actions, version, doc }: Props) {
+export function RevertFile({ id, actions, version, doc, changesMode }: Props) {
   return (
-    <Button
-      title={`Revert file to the displayed version (this makes a new version, so nothing is lost)`}
-      onClick={() => {
-        if (version != null) {
-          actions.revert(id, version, doc);
-        }
-      }}
-      disabled={version == null || actions.syncdoc?.is_read_only()}
+    <Tooltip
+      title={`Revert file to the displayed version (this makes a new version, so nothing is lost). ${
+        changesMode ? "In changes mode, this uses newer version." : ""
+      }`}
     >
-      <Icon name="undo" /> Revert
-    </Button>
+      {" "}
+      <Button
+        onClick={() => {
+          if (version != null) {
+            actions.revert(id, version, doc);
+          }
+        }}
+        disabled={version == null || actions.syncdoc?.is_read_only()}
+      >
+        <Icon name="undo" /> Revert
+      </Button>
+    </Tooltip>
   );
 }

src/packages/frontend/frame-editors/time-travel-editor/time-travel.tsx

@@ -8,7 +8,12 @@
 import { useState } from "react";
 import { Button, Checkbox, Tooltip } from "antd";
 import { Map } from "immutable";
-import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+import {
+  redux,
+  useTypedRedux,
+  useAsyncEffect,
+  useEditorRedux,
+} from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import { TimeTravelActions, TimeTravelState } from "./actions";
 import { Diff } from "./diff";
@@ -26,11 +31,11 @@ import { Export } from "./export";
 import json_stable from "json-stable-stringify";
 import { to_ipynb } from "../../jupyter/history-viewer";
 import { SagewsDiff } from "./sagews-diff";
-import { useAsyncEffect, useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Viewer } from "./viewer";
 import type { Document } from "@cocalc/sync/editor/generic/types";
 import useLicenses from "@cocalc/frontend/site-licenses/use-licenses";
 import RequireLicense from "@cocalc/frontend/site-licenses/require-license";
+import ShowError from "@cocalc/frontend/components/error";
 
 const HAS_SPECIAL_VIEWER = new Set([
   "tasks",
@@ -62,6 +67,7 @@ export function TimeTravel(props: Props) {
     "unlicensed_project_timetravel_limit",
   );
   const licenses = useLicenses({ project_id });
+  const error = useEditor("error");
   const versions = useEditor("versions");
   const gitVersions = useEditor("git_versions");
   const hasFullHistory = useEditor("has_full_history");
@@ -263,8 +269,10 @@ export function TimeTravel(props: Props) {
   };
 
   const renderLoadFullHistory = () => {
-    if (hasFullHistory) return;
-    return <LoadFullHistory actions={props.actions} />;
+    if (hasFullHistory || gitMode) {
+      return;
+    }
+    return <LoadFullHistory id={props.id} actions={props.actions} />;
   };
 
   const renderOpenFile = () => {
@@ -278,11 +286,12 @@ export function TimeTravel(props: Props) {
   };
 
   const renderRevertFile = () => {
-    if (changesMode || doc == null) {
+    if (doc == null) {
       return;
     }
     return (
       <RevertFile
+        changesMode={changesMode}
         actions={props.actions}
         version={getVersion()}
         id={props.id}
@@ -304,7 +313,7 @@ export function TimeTravel(props: Props) {
   };
 
   const renderExport = () => {
-    if (redux.getStore("page").get("fullscreen") == "kiosk") {
+    if (gitMode || redux.getStore("page").get("fullscreen") == "kiosk") {
       // doesn't make sense in kiosk mode.
       return;
     }
@@ -447,6 +456,11 @@ export function TimeTravel(props: Props) {
       {renderControls()}
       {renderTimeSelect()}
       {gitMode && !changesMode && renderGitSubject()}
+      <ShowError
+        style={{ margin: "5px 15px" }}
+        error={error}
+        setError={props.actions.set_error}
+      />
       {body}
     </div>
   );