Put dataset permissions in sharing tab (#4763)

* put dataset permissions in sharing tab * fix warning icon location * update changelog * Update CHANGELOG.unreleased.md Co-authored-by: Philipp Otto <[email protected]> Co-authored-by: Philipp Otto <[email protected]>
scalableminds · Aug 13, 2020 · c7a3685 · c7a3685
1 parent 2b45b79
commit c7a3685
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -22,6 +22,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Disabled the autofill feature of the brush when using this tool to erase data. [#4729](https://github.com/scalableminds/webknossos/pull/4729)
 - The rotation buttons of the 3D-viewport no longer change the zoom. [#4750](https://github.com/scalableminds/webknossos/pull/4750)
 - Improved the performance of applying agglomerate files. [#4706](https://github.com/scalableminds/webknossos/pull/4706)
+- In the Edit/Import Dataset form, the "Sharing" tab was renamed to "Sharing & Permissions". Also, existing permission-related settings were moved to that tab.  [#4683](https://github.com/scalableminds/webknossos/pull/4763)
 
 ### Fixed
 - Speed up NML import in existing tracings for NMLs with many trees (20,000+). [#4742](https://github.com/scalableminds/webknossos/pull/4742)

diff --git a/frontend/javascripts/dashboard/dataset/dataset_import_view.js b/frontend/javascripts/dashboard/dataset/dataset_import_view.js
@@ -499,23 +499,28 @@ class DatasetImportView extends React.PureComponent<Props, State> {
                   </Hideable>
                 </TabPane>
 
-                <TabPane tab={<span>Sharing</span>} key="sharing" forceRender>
-                  <Hideable hidden={this.state.activeTabKey !== "sharing"}>
-                    <ImportSharingComponent form={form} datasetId={this.props.datasetId} />
-                  </Hideable>
-                </TabPane>
-
                 <TabPane
                   tab={
                     <span>
-                      Metadata {formErrors.general ? errorIcon : hasNoAllowedTeamsWarning}
+                      Sharing & Permissions{" "}
+                      {formErrors.general ? errorIcon : hasNoAllowedTeamsWarning}
                     </span>
                   }
-                  key="general"
+                  key="sharing"
                   forceRender
                 >
+                  <Hideable hidden={this.state.activeTabKey !== "sharing"}>
+                    <ImportSharingComponent
+                      form={form}
+                      datasetId={this.props.datasetId}
+                      hasNoAllowedTeams={_hasNoAllowedTeams}
+                    />
+                  </Hideable>
+                </TabPane>
+
+                <TabPane tab={<span>Metadata</span>} key="general" forceRender>
                   <Hideable hidden={this.state.activeTabKey !== "general"}>
-                    <ImportGeneralComponent form={form} hasNoAllowedTeams={_hasNoAllowedTeams} />
+                    <ImportGeneralComponent form={form} />
                   </Hideable>
                 </TabPane>
 

diff --git a/frontend/javascripts/dashboard/dataset/import_general_component.js b/frontend/javascripts/dashboard/dataset/import_general_component.js
@@ -3,32 +3,15 @@
 import { Input, Col, Row, DatePicker } from "antd";
 import React from "react";
 
-import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
-
 import { FormItemWithInfo } from "./helper_components";
 
 type Props = {
   form: Object,
-  hasNoAllowedTeams: boolean,
 };
 
-export default function ImportGeneralComponent({ form, hasNoAllowedTeams }: Props) {
+export default function ImportGeneralComponent({ form }: Props) {
   const { getFieldDecorator } = form;
 
-  const allowedTeamsComponent = (
-    <FormItemWithInfo
-      label="Teams allowed to access this dataset"
-      info="Except for administrators and dataset managers, only members of the teams defined here will be able to view this dataset."
-      validateStatus={hasNoAllowedTeams ? "warning" : "success"}
-      help={
-        hasNoAllowedTeams
-          ? "If this field is empty, only administrators and dataset managers will be able to view this dataset."
-          : null
-      }
-    >
-      {getFieldDecorator("dataset.allowedTeams", {})(<TeamSelectionComponent mode="multiple" />)}
-    </FormItemWithInfo>
-  );
   return (
     <div>
       <Row gutter={48}>
@@ -51,7 +34,6 @@ export default function ImportGeneralComponent({ form, hasNoAllowedTeams }: Prop
           </FormItemWithInfo>
         </Col>
       </Row>
-      {allowedTeamsComponent}
       <FormItemWithInfo
         label="Sorting Date"
         info="Datasets are sorted by date. Specify the date (e.g. publication date) in order to influence the sorting order."

diff --git a/frontend/javascripts/dashboard/dataset/import_sharing_component.js b/frontend/javascripts/dashboard/dataset/import_sharing_component.js
@@ -15,17 +15,34 @@ import Toast from "libs/toast";
 import features from "features";
 import window from "libs/window";
 
+import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
+
 import { FormItemWithInfo } from "./helper_components";
 
 type Props = {
   form: Object,
   datasetId: APIDatasetId,
+  hasNoAllowedTeams: boolean,
 };
 
-export default function ImportSharingComponent({ form, datasetId }: Props) {
+export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTeams }: Props) {
   const { getFieldDecorator } = form;
   const [sharingToken, setSharingToken] = useState("");
   const [dataSet, setDataSet] = useState<?APIDataset>(null);
+  const allowedTeamsComponent = (
+    <FormItemWithInfo
+      label="Teams allowed to access this dataset"
+      info="Except for administrators and dataset managers, only members of the teams defined here will be able to view this dataset."
+      validateStatus={hasNoAllowedTeams ? "warning" : "success"}
+      help={
+        hasNoAllowedTeams
+          ? "If this field is empty, only administrators and dataset managers will be able to view this dataset."
+          : null
+      }
+    >
+      {getFieldDecorator("dataset.allowedTeams", {})(<TeamSelectionComponent mode="multiple" />)}
+    </FormItemWithInfo>
+  );
 
   async function fetch() {
     const newSharingToken = await getDatasetSharingToken(datasetId);
@@ -84,6 +101,7 @@ export default function ImportSharingComponent({ form, datasetId }: Props) {
           <Checkbox>Make dataset publicly accessible </Checkbox>,
         )}
       </FormItemWithInfo>
+      {allowedTeamsComponent}
       <FormItemWithInfo
         label="Sharing Link"
         info={