Improve upload UI

CHANGELOG.unreleased.md

@@ -17,6 +17,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - For webKnossos maintenance, superUsers can now join organizations without being listed as a user there. [#5151](https://github.com/scalableminds/webknossos/pull/5151)
 
 ### Changed
+- Before uploading a dataset webKnossos automatically checks whether a conversion and scale are needed. Additionally, the Upload UI was improved. [#5081](https://github.com/scalableminds/webknossos/issues/5081)
 - Make the isosurface feature in the meshes tab more robust. If a request fails, a retry is initiated. [#5102](https://github.com/scalableminds/webknossos/pull/5102)
 - Support for the old invite links was removed. These contained the organization name in the URL. The new links contain a token (can be generated in the users view). For instances with a single organization the old invite links should still work. [#5091](https://github.com/scalableminds/webknossos/pull/5091/files)
 - Users are no longer allowed to deactivate their own accounts.  [#5070](https://github.com/scalableminds/webknossos/pull/5070)

flow-typed/npm/antd_vx.x.x.js

@@ -85,6 +85,7 @@ declare module "antd" {
   declare export class Modal<P> extends React$Component<P> {
     static confirm: Function;
     static info: Function;
+    static error: Function;
   }
   declare export var notification: Object;
   declare export class Pagination<P> extends React$Component<P> {}

frontend/javascripts/admin/dataset/dataset_add_view.js

@@ -1,7 +1,7 @@
 // @flow
 import { type RouterHistory, withRouter } from "react-router-dom";
-import { Tabs, Icon } from "antd";
-import React from "react";
+import { Tabs, Icon, Modal, Button } from "antd";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import _ from "lodash";
 
@@ -14,10 +14,9 @@ import DatasetAddBossView from "admin/dataset/dataset_add_boss_view";
 import DatasetUploadView from "admin/dataset/dataset_upload_view";
 import SampleDatasetsModal from "dashboard/dataset/sample_datasets_modal";
 import features from "features";
-import { getDatastores, startJob } from "admin/admin_rest_api";
+import { getDatastores } from "admin/admin_rest_api";
 import renderIndependently from "libs/render_independently";
 import { useFetch } from "libs/react_helpers";
-import { type Vector3 } from "oxalis/constants";
 
 const { TabPane } = Tabs;
 
@@ -52,21 +51,60 @@ const fetchCategorizedDatastores = async (): Promise<{
 
 const DatasetAddView = ({ history, activeUser }: PropsWithRouter) => {
   const datastores = useFetch(fetchCategorizedDatastores, { own: [], wkConnect: [] }, []);
+  const [datasetName, setDatasetName] = useState("");
+  const [organization, setOrganization] = useState("");
+  const [datasetNeedsConversion, setDatasetNeedsConversion] = useState(false);
 
   const handleDatasetAdded = async (
-    organization: string,
-    datasetName: string,
+    datasetOrganization: string,
+    uploadedDatasetName: string,
     needsConversion: ?boolean,
-    scale: ?Vector3,
   ): Promise<void> => {
-    if (needsConversion && scale) {
-      await startJob(datasetName, organization, scale);
-      const url = "/jobs";
-      history.push(url);
-    } else {
-      const url = `/datasets/${organization}/${datasetName}/import`;
-      history.push(url);
+    setOrganization(datasetOrganization);
+    setDatasetName(uploadedDatasetName);
+    setDatasetNeedsConversion(needsConversion);
+  };
+
+  const showAfterUploadContent = datasetName !== "";
+
+  const getAfterUploadModalContent = () => {
+    if (!showAfterUploadContent) {
+      return null;
     }
+    return (
+      <div style={{ fontSize: 20, paddingTop: 13, textAlign: "center" }}>
+        The dataset was uploaded successfully
+        {datasetNeedsConversion ? " and a conversion job was started." : null}.
+        <br />
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <div className="centered-items" style={{ marginTop: 10 }}>
+            {datasetNeedsConversion ? (
+              <React.Fragment>
+                <Button type="primary" onClick={() => history.push("/jobs")}>
+                  View the Jobs Queue
+                </Button>
+                <Button onClick={() => history.push("/dashboard/datasets")}>Go to Dashboard</Button>
+              </React.Fragment>
+            ) : (
+              <React.Fragment>
+                <Button
+                  type="primary"
+                  onClick={() => history.push(`/datasets/${organization}/${datasetName}/view`)}
+                >
+                  View the Dataset
+                </Button>
+                <Button
+                  onClick={() => history.push(`/datasets/${organization}/${datasetName}/import`)}
+                >
+                  Got to Dataset Settings
+                </Button>
+                <Button onClick={() => history.push("/dashboard/datasets")}>Go to Dashboard</Button>
+              </React.Fragment>
+            )}
+          </div>
+        </div>
+      </div>
+    );
   };
 
   return (
@@ -134,6 +172,20 @@ const DatasetAddView = ({ history, activeUser }: PropsWithRouter) => {
           </a>
         </p>
       </div>
+      <Modal
+        visible={showAfterUploadContent}
+        closable={showAfterUploadContent}
+        keyboard={showAfterUploadContent}
+        maskClosable={false}
+        className="no-footer-modal"
+        cancelButtonProps={{ style: { display: "none" } }}
+        okButtonProps={{ style: { display: "none" } }}
+        onCancel={() => setDatasetName("")}
+        onOk={() => setDatasetName("")}
+        width={580}
+      >
+        {showAfterUploadContent && getAfterUploadModalContent()}
+      </Modal>
     </React.Fragment>
   );
 };

frontend/javascripts/admin/dataset/dataset_components.js

@@ -66,13 +66,15 @@ export function DatasetNameFormItem({ form, activeUser }: { form: Object, active
 export function DatastoreFormItem({
   form,
   datastores,
+  hidden,
 }: {
   form: Object,
   datastores: Array<APIDataStore>,
+  hidden?: boolean,
 }) {
   const { getFieldDecorator } = form;
   return (
-    <FormItem label="Datastore" hasFeedback>
+    <FormItem label="Datastore" hasFeedback hidden={hidden || false}>
       {getFieldDecorator("datastore", {
         rules: [{ required: true, message: messages["dataset.import.required.datastore"] }],
         initialValue: datastores.length ? datastores[0].url : null,