Taiga: Too easy to clobber contents of a dataset with old version (#15)

This adds warnings in all of the following scenarios:

- Creating a new version based on a version older than latest
- Creating a new version based on a deprecated or deleted version
- Attempting to upload a version that is no longer the latest
  - While the first two are checked as soon as you click "create new
    version," this one is checked at upload time. It warns only if a new
    version has been created at some point after the page was loaded.

Author: rcreasi

react_frontend/src/components/DatasetView.tsx

@@ -12,7 +12,7 @@ import * as Models from "../models/models";
 import { TaigaApi } from "../models/api";
 
 import * as Dialogs from "./Dialogs";
-import {  CreateVersionDialog } from "./modals/UploadDialogs";
+import { CreateVersionDialog } from "./modals/UploadDialogs";
 
 import { toLocalDateString } from "../utilities/formats";
 import { LoadingOverlay } from "../utilities/loading";
@@ -39,6 +39,8 @@ import {
 import ClipboardButton from "../utilities/r-clipboard";
 import { UploadTracker } from "./UploadTracker";
 import FigshareSection from "./dataset_view/FigshareSection";
+import confirmUserWantsToBranchVersion from "./dataset_view/confirmUserWantsToBranchVersion";
+import confirmNewVersionFromDeprecated from "./dataset_view/confirmNewVersionFromDeprecated";
 
 interface DatasetViewMatchParams {
   datasetId: string;
@@ -388,10 +390,30 @@ export class DatasetView extends React.Component<
   }
 
   // Upload
-  showUploadNewVersion() {
-    this.setState({
-      showUploadDataset: true,
-    });
+  async showUploadNewVersion() {
+    const { dataset, datasetVersion } = this.state;
+    const latestVersion = dataset.versions[dataset.versions.length - 1];
+    let confirmed = true;
+
+    if (datasetVersion.id !== latestVersion.id) {
+      confirmed = await confirmUserWantsToBranchVersion(
+        dataset,
+        datasetVersion,
+      );
+    } else if (["deprecated", "deleted"].includes(datasetVersion.state)) {
+      confirmed = await confirmNewVersionFromDeprecated(datasetVersion);
+    }
+
+    if (confirmed) {
+      this.setState({ showUploadDataset: true });
+    }
+  }
+
+  async checkConcurrentEdit() {
+    const datasetThen = this.state.dataset;
+    const datasetNow = await this.getTapi().get_dataset(datasetThen.id);
+
+    return datasetThen.versions.length < datasetNow.versions.length;
   }
 
   // filesUploadedAndConverted(sid: string, name: string, description: string, previousDatafileIds: Array<string>) {
@@ -1194,6 +1216,7 @@ export class DatasetView extends React.Component<
                 previousVersionNumber={this.state.datasetVersion.name}
                 previousVersionFiles={this.state.datasetVersion.datafiles}
                 datasetPermaname={this.state.dataset.permanames[0]}
+                checkConcurrentEdit={this.checkConcurrentEdit.bind(this)}
               />
             )}
 

react_frontend/src/components/Dialogs.tsx

@@ -91,7 +91,11 @@ export class EditName extends React.Component<EditStringProps, any> {
         onRequestClose={this.props.cancel}
         contentLabel="EditName"
       >
-        <form>
+        <form
+          onSubmit={e => {
+            formSubmitSave(this, e, this.textInput.value, null);
+          }}
+        >
           <div className="modal-content">
             <div className="modal-body">
               <div className="form-group">
@@ -115,13 +119,7 @@ export class EditName extends React.Component<EditStringProps, any> {
               >
                 Close
               </button>
-              <button
-                type="submit"
-                className="btn btn-primary"
-                onClick={(e) => {
-                  formSubmitSave(this, e, this.textInput.value, null);
-                }}
-              >
+              <button type="submit" className="btn btn-primary">
                 Save changes
               </button>
             </div>
@@ -145,7 +143,11 @@ export class EditDescription extends React.Component<EditStringProps, any> {
         onRequestClose={this.props.cancel}
         contentLabel="EditDescription"
       >
-        <form>
+        <form
+          onSubmit={e => {
+            formSubmitSave(this, e, this.textArea.value, null);
+          }}
+        >
           <div className="modal-content">
             <div className="modal-body">
               <div className="form-group">
@@ -181,13 +183,7 @@ export class EditDescription extends React.Component<EditStringProps, any> {
               >
                 Close
               </button>
-              <button
-                type="submit"
-                className="btn btn-primary"
-                onClick={(e) => {
-                  formSubmitSave(this, e, this.textArea.value, null);
-                }}
-              >
+              <button type="submit" className="btn btn-primary">
                 Save changes
               </button>
             </div>
@@ -211,7 +207,11 @@ export class CreateFolder extends React.Component<CreateFolderProps, any> {
         onRequestClose={this.props.cancel}
         contentLabel="CreateFolder"
       >
-        <form>
+        <form
+          onSubmit={e => {
+            formSubmitSave(this, e, this.textInput.value, this.textArea.value);
+          }}
+        >
           <div className="modal-content">
             <div className="modal-body">
               <div className="form-group">
@@ -246,18 +246,7 @@ export class CreateFolder extends React.Component<CreateFolderProps, any> {
               >
                 Close
               </button>
-              <button
-                type="submit"
-                className="btn btn-primary"
-                onClick={(e) => {
-                  formSubmitSave(
-                    this,
-                    e,
-                    this.textInput.value,
-                    this.textArea.value
-                  );
-                }}
-              >
+              <button type="submit" className="btn btn-primary">
                 Save changes
               </button>
             </div>
@@ -498,7 +487,12 @@ export class DeprecationReason extends React.Component<
           <div className="modal-header">
             <h2 ref="subtitle">Reason to deprecate this dataset version</h2>
           </div>
-          <form>
+          <form
+            onSubmit={e => {
+              e.preventDefault();
+              this.save();
+            }}
+          >
             <div className="modal-body">
               <input
                 type="text"
@@ -517,9 +511,9 @@ export class DeprecationReason extends React.Component<
                 Close
               </button>
               <button
-                type="button"
+                type="submit"
                 className="btn btn-primary"
-                onClick={(e) => this.save()}
+                disabled={!this.state.reason}
               >
                 Save changes
               </button>

react_frontend/src/components/dataset_view/confirm.scss

@@ -0,0 +1,34 @@
+@use "../../styles/mixins";
+
+.tableContainer {
+  min-height: 150px;
+  max-height: calc(100vh - 318px);
+  overflow: auto;
+  font-size: 16px;
+  @include mixins.scroll-shadow;
+
+  table {
+    width: 100%;
+
+    thead {
+      position: sticky;
+      top: 0;
+      background-color: #fff;
+      outline: 2px solid #ccc;
+      z-index: 1;
+    }
+
+    tr td {
+      padding: 5px;
+      border-bottom: 2px solid #eee;
+    }
+  }
+}
+
+.deprecated {
+  color: orange;
+}
+
+.deleted {
+  color: red;
+}

react_frontend/src/components/dataset_view/confirmNewVersionFromDeprecated.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { DatasetVersion } from "../../models/models";
+import getConfirmation from "../../utilities/getConfirmation";
+
+function confirmNewVersionFromDeprecated(datasetVersion: DatasetVersion) {
+  const { state } = datasetVersion;
+
+  return getConfirmation({
+    title: "Are you sure?",
+    message: (
+      <div>
+        <p>
+          This version is {state === "deprecated" ? "deprecated" : "deleted"}.
+          Are you sure you want to create a new version based on it?
+        </p>
+      </div>
+    ),
+    noText: "Cancel",
+    yesText: "Create new version",
+    yesButtonBsStyle: "warning",
+  });
+}
+
+export default confirmNewVersionFromDeprecated;

react_frontend/src/components/dataset_view/confirmUserWantsToBranchVersion.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Dataset, DatasetVersion } from "../../models/models";
+import { relativePath } from "../../utilities/route";
+import getConfirmation from "../../utilities/getConfirmation";
+import styles from "./confirm.scss";
+
+function confirmUserWantsToBranchVersion(
+  dataset: Dataset,
+  datasetVersion: DatasetVersion
+) {
+  const thisVersion = Number(datasetVersion.version);
+  const newerVersions = dataset.versions.slice(thisVersion);
+  const permaname = dataset.permanames.slice(-1)[0];
+
+  return getConfirmation({
+    title: "Are you sure?",
+    message: (
+      <div>
+        <p>
+          This is not the latest version. If you create a new version based on
+          this one,
+          <br />
+          it could be missing important files that were added later.
+        </p>
+        <p>
+          {newerVersions.length === 1
+            ? "This newer verision already exists:"
+            : "These newer versions already exist:"}
+        </p>
+        <VersionList permaname={permaname} newerVersions={newerVersions} />
+      </div>
+    ),
+    noText: "Cancel",
+    yesText: "Use this version anyway",
+    yesButtonBsStyle: "warning",
+  });
+}
+
+const Icon = ({ className }: { className: string }) => (
+  <>
+    <i className={`glyphicon ${className}`} />{" "}
+  </>
+);
+
+function VersionList({
+  newerVersions,
+  permaname,
+}: {
+  newerVersions: Dataset["versions"];
+  permaname: string;
+}) {
+  return (
+    <div className={styles.tableContainer}>
+      <table>
+        <thead>
+          <tr>
+            <th>Version</th>
+            <th />
+            <th>Link</th>
+          </tr>
+        </thead>
+        <tbody>
+          {newerVersions.map(version => (
+            <tr key={version.id}>
+              <td>{version.name}</td>
+              <td>
+                {version.state === "deprecated" && (
+                  <span className={styles.deprecated}>
+                    <Icon className="glyphicon-warning-sign" />
+                    Deprecated
+                  </span>
+                )}
+                {version.state === "deleted" && (
+                  <span className={styles.deleted}>
+                    <Icon className="glyphicon-exclamation-sign" />
+                    Deleted
+                  </span>
+                )}
+              </td>
+              <td>
+                <a
+                  target="_blank"
+                  href={relativePath(`/dataset/${permaname}/${version.name}`)}
+                >
+                  View <Icon className="glyphicon-new-window" />
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default confirmUserWantsToBranchVersion;