Move "User access list" to Settings (#6166)

* renamed several React view to match current UI * moved dataset access list to settings tab * prevent another fetch for dataset * restored admin access rights check * updated CHANGELOG * added info tooltip to user access list
scalableminds · Apr 26, 2022 · 91a72b1 · 91a72b1
1 parent d42694a
commit 91a72b1
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 48 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -19,6 +19,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
   - Add filter functionality to "Access Permissions" column to filter for public datasets.
   - Removed `isActive` and `isPublic` columns to save screen space.
   - Changed data layer entries to display layer names instead of categories, e.g. "color" --> "axons".
+- Moved the list of "user with access to the selected dataset" from the dashboard to the respective dataset's settings (Sharing Tab). [#6166](https://github.com/scalableminds/webknossos/pull/6166)
 - Sped up initial requests for remote zarr dataset by using asynchronous caching. [#6165](https://github.com/scalableminds/webknossos/pull/6165)
 
 ### Fixed

diff --git a/frontend/javascripts/admin/onboarding.tsx b/frontend/javascripts/admin/onboarding.tsx
@@ -21,7 +21,7 @@ import type { OxalisState } from "oxalis/store";
 import Store from "oxalis/store";
 import LinkButton from "components/link_button";
 import { getDatastores, sendInvitesForOrganization } from "admin/admin_rest_api";
-import DatasetImportView from "dashboard/dataset/dataset_import_view";
+import DatasetSettingsView from "dashboard/dataset/dataset_settings_view";
 import DatasetUploadView from "admin/dataset/dataset_upload_view";
 import RegistrationForm from "admin/auth/registration_form";
 import CreditsFooter from "components/credits_footer";
@@ -502,7 +502,7 @@ class OnboardingView extends React.PureComponent<Props, State> {
       )}
       {this.state.datasetNameToImport != null && (
         <Modal visible width="85%" footer={null} maskClosable={false} onCancel={this.advanceStep}>
-          <DatasetImportView
+          <DatasetSettingsView
             isEditingMode={false}
             datasetId={{
               name: this.state.datasetNameToImport || "",

diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_access_list_view.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_access_list_view.tsx
@@ -4,6 +4,7 @@ import type { APIDataset, APIUser } from "types/api_flow_types";
 import { getDatasetAccessList } from "admin/admin_rest_api";
 import { handleGenericError } from "libs/error_handling";
 import { stringToColor } from "libs/format_utils";
+
 type Props = {
   dataset: APIDataset;
 };
@@ -66,7 +67,6 @@ export default class DatasetAccessListView extends React.PureComponent<Props, St
   renderTable() {
     return (
       <div>
-        <h5>Users with Access Rights</h5>
         <ul>
           {this.state.datasetUsers.map((user: APIUser) => (
             <li key={user.id}>

diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx
@@ -22,12 +22,11 @@ import { getDatasetExtentAsString } from "oxalis/model/accessors/dataset_accesso
 import { stringToColor, formatScale } from "libs/format_utils";
 import { trackAction } from "oxalis/model/helpers/analytics";
 import CategorizationLabel from "oxalis/view/components/categorization_label";
-import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
 import DatasetActionView from "dashboard/advanced_dataset/dataset_action_view";
 import EditableTextIcon from "oxalis/view/components/editable_text_icon";
-import FixedExpandableTable from "components/fixed_expandable_table";
 import FormattedDate from "components/formatted_date";
 import * as Utils from "libs/utils";
+import FixedExpandableTable from "components/fixed_expandable_table";
 
 const { Column } = Table;
 const typeHint: APIMaybeUnimportedDataset[] = [];
@@ -38,7 +37,6 @@ type Props = {
   searchQuery: string;
   searchTags: Array<string>;
   isUserAdmin: boolean;
-  isUserTeamManager: boolean;
   isUserDatasetManager: boolean;
   datasetFilteringMode: DatasetFilteringMode;
   reloadDataset: (arg0: APIDatasetId, arg1: Array<APIMaybeUnimportedDataset>) => Promise<void>;
@@ -184,7 +182,6 @@ class DatasetTable extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { isUserAdmin, isUserTeamManager } = this.props;
     const filteredDataSource = this.getFilteredDatasets();
     const { sortedInfo } = this.state;
     const dataSourceSortedByRank = useLruRank
@@ -249,11 +246,6 @@ class DatasetTable extends React.PureComponent<Props, State> {
           defaultPageSize: 50,
         }}
         onChange={this.handleChange}
-        expandedRowRender={
-          isUserAdmin || isUserTeamManager
-            ? (dataset) => <DatasetAccessListView dataset={dataset} />
-            : undefined
-        }
         locale={{
           emptyText: this.renderEmptyText(),
         }}

diff --git a/...ard/dataset/simple_advanced_data_form.tsx → ...ard/dataset/dataset_settings_data_tab.tsx b/...ard/dataset/simple_advanced_data_form.tsx → ...ard/dataset/dataset_settings_data_tab.tsx
@@ -25,7 +25,7 @@ import {
 
 const FormItem = Form.Item;
 
-export default function SimpleAdvancedDataForm({
+export default function DatasetSettingsDataTab({
   isReadOnlyDataset,
   form,
   activeDataSourceEditMode,

diff --git a/...board/dataset/import_delete_component.tsx → ...d/dataset/dataset_settings_delete_tab.tsx b/...board/dataset/import_delete_component.tsx → ...d/dataset/dataset_settings_delete_tab.tsx
@@ -8,12 +8,13 @@ import type { RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import { DatasetCacheContext } from "dashboard/dataset/dataset_cache_provider";
 import { confirmAsync } from "./helper_components";
+
 type Props = {
   datasetId: APIDatasetId;
   history: RouteComponentProps["history"];
 };
 
-const ImportDeleteComponent = ({ datasetId, history }: Props) => {
+const DatasetSettingsDeleteTab = ({ datasetId, history }: Props) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const [dataset, setDataset] = useState<APIDataset | null | undefined>(null);
   const datasetContext = useContext(DatasetCacheContext);
@@ -66,4 +67,4 @@ const ImportDeleteComponent = ({ datasetId, history }: Props) => {
   );
 };
 
-export default withRouter<RouteComponentProps & Props, any>(ImportDeleteComponent);
+export default withRouter<RouteComponentProps & Props, any>(DatasetSettingsDeleteTab);
diff --git a/...oard/dataset/import_general_component.tsx → ...dataset/dataset_settings_metadata_tab.tsx b/...oard/dataset/import_general_component.tsx → ...dataset/dataset_settings_metadata_tab.tsx
@@ -1,7 +1,8 @@
 import { Input, Col, Row, DatePicker } from "antd";
 import React from "react";
 import { FormItemWithInfo } from "./helper_components";
-export default function ImportGeneralComponent() {
+
+export default function DatasetSettingsMetadataTab() {
   return (
     <div>
       <Row gutter={48}>

diff --git a/...oard/dataset/import_sharing_component.tsx → .../dataset/dataset_settings_sharing_tab.tsx b/...oard/dataset/import_sharing_component.tsx → .../dataset/dataset_settings_sharing_tab.tsx
@@ -1,26 +1,37 @@
-import { Button, Input, Checkbox, Tooltip, FormInstance } from "antd";
 import React, { useState, useEffect } from "react";
-import type { APIDataset, APIDatasetId } from "types/api_flow_types";
+import { RouteComponentProps, withRouter } from "react-router-dom";
+import { connect } from "react-redux";
+import { Button, Input, Checkbox, Tooltip, FormInstance, Collapse } from "antd";
+import { CopyOutlined, InfoCircleOutlined, RetweetOutlined } from "@ant-design/icons";
+import type { APIDataset, APIDatasetId, APIUser } from "types/api_flow_types";
 import { AsyncButton } from "components/async_clickables";
-import {
-  getDatasetSharingToken,
-  getDataset,
-  revokeDatasetSharingToken,
-} from "admin/admin_rest_api";
+import { getDatasetSharingToken, revokeDatasetSharingToken } from "admin/admin_rest_api";
 import Toast from "libs/toast";
 import features from "features";
 import window from "libs/window";
 import TeamSelectionComponent from "dashboard/dataset/team_selection_component";
-import { CopyOutlined, RetweetOutlined } from "@ant-design/icons";
+import DatasetAccessListView from "dashboard/advanced_dataset/dataset_access_list_view";
+import { OxalisState } from "oxalis/store";
+import { isUserAdminOrTeamManager } from "libs/utils";
 import { FormItemWithInfo } from "./helper_components";
+
 type Props = {
   form: FormInstance | null;
   datasetId: APIDatasetId;
+  dataset: APIDataset | null | undefined;
   hasNoAllowedTeams: boolean;
+  activeUser: APIUser | null | undefined;
 };
-export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTeams }: Props) {
+
+function DatasetSettingsSharingTab({
+  form,
+  datasetId,
+  dataset,
+  hasNoAllowedTeams,
+  activeUser,
+}: Props) {
   const [sharingToken, setSharingToken] = useState("");
-  const [dataSet, setDataSet] = useState<APIDataset | null | undefined>(null);
+
   const allowedTeamsComponent = (
     <FormItemWithInfo
       name={["dataset", "allowedTeams"]}
@@ -39,9 +50,7 @@ export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTe
 
   async function fetch() {
     const newSharingToken = await getDatasetSharingToken(datasetId);
-    const newDataSet = await getDataset(datasetId);
     setSharingToken(newSharingToken);
-    setDataSet(newDataSet);
   }
 
   useEffect(() => {
@@ -77,6 +86,7 @@ export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTe
 
   function getSharingLink() {
     if (!form) return undefined;
+
     const doesNeedToken = !form.getFieldValue("dataset.isPublic");
     const tokenSuffix = `?token=${sharingToken}`;
     return `${window.location.origin}/datasets/${datasetId.owningOrganization}/${
@@ -85,13 +95,35 @@ export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTe
   }
 
   function getAllowUsageCode() {
-    if (dataSet != null) {
-      const dataStoreName = dataSet.dataStore.name;
-      const dataStoreURL = dataSet.dataStore.url;
+    if (dataset != null) {
+      const dataStoreName = dataset.dataStore.name;
+      const dataStoreURL = dataset.dataStore.url;
       return `${dataStoreName}, ${dataStoreURL}, ${datasetId.name}`;
     } else return "";
   }
 
+  function getUserAccessList() {
+    if (!activeUser || !dataset) return undefined;
+    if (!isUserAdminOrTeamManager(activeUser)) return undefined;
+
+    const header = (
+      <span>
+        All users with access permission to work with this dataset{" "}
+        <Tooltip title="Based on the specified team permissions and individiual user roles. Any changes will only appear after pressing the Save button.">
+          <InfoCircleOutlined style={{ color: "gray" }} />
+        </Tooltip>
+      </span>
+    );
+
+    return (
+      <Collapse collapsible="header">
+        <Collapse.Panel header={header} key="1">
+          <DatasetAccessListView dataset={dataset} />
+        </Collapse.Panel>
+      </Collapse>
+    );
+  }
+
   return form ? (
     <div>
       <FormItemWithInfo
@@ -179,6 +211,15 @@ export default function ImportSharingComponent({ form, datasetId, hasNoAllowedTe
           </Input.Group>
         </FormItemWithInfo>
       )}
+
+      {getUserAccessList()}
     </div>
   ) : null;
 }
+
+const mapStateToProps = (state: OxalisState) => ({
+  activeUser: state.activeUser,
+});
+
+const connector = connect(mapStateToProps);
+export default connector(withRouter<RouteComponentProps & Props, any>(DatasetSettingsSharingTab));
diff --git a/...dashboard/dataset/dataset_import_view.tsx → ...shboard/dataset/dataset_settings_view.tsx b/...dashboard/dataset/dataset_import_view.tsx → ...shboard/dataset/dataset_settings_view.tsx
@@ -51,11 +51,11 @@ import features from "features";
 import { isDatasourceJSONValid } from "types/validation";
 import { enforceValidatedDatasetViewConfiguration } from "types/schemas/dataset_view_configuration_defaults";
 import { Hideable, hasFormError, jsonEditStyle } from "./helper_components";
-import DefaultConfigComponent from "./default_config_component";
-import ImportGeneralComponent from "./import_general_component";
-import ImportSharingComponent from "./import_sharing_component";
-import ImportDeleteComponent from "./import_delete_component";
-import SimpleAdvancedDataForm from "./simple_advanced_data_form";
+import DatasetSettingsViewConfigTab from "./dataset_settings_viewconfig_tab";
+import DatasetSettingsMetadataTab from "./dataset_settings_metadata_tab";
+import DatasetSettingsSharingTab from "./dataset_settings_sharing_tab";
+import DatasetSettingsDeleteTab from "./dataset_settings_delete_tab";
+import DatasetSettingsDataTab from "./dataset_settings_data_tab";
 
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
@@ -153,7 +153,7 @@ function ensureValidScaleOnInferredDataSource(
   return inferredDataSourceClone;
 }
 
-class DatasetImportView extends React.PureComponent<PropsWithFormAndRouter, State> {
+class DatasetSettingsView extends React.PureComponent<PropsWithFormAndRouter, State> {
   formRef = React.createRef<FormInstance>();
   unblock: UnregisterCallback | null | undefined;
   blockTimeoutId: number | null | undefined;
@@ -866,7 +866,7 @@ class DatasetImportView extends React.PureComponent<PropsWithFormAndRouter, Stat
                     // to hidden form elements.
                   }
                   <Hideable hidden={this.state.activeTabKey !== "data"}>
-                    <SimpleAdvancedDataForm
+                    <DatasetSettingsDataTab
                       key="SimpleAdvancedDataForm"
                       isReadOnlyDataset={
                         this.state.dataset != null &&
@@ -903,17 +903,18 @@ class DatasetImportView extends React.PureComponent<PropsWithFormAndRouter, Stat
                   forceRender
                 >
                   <Hideable hidden={this.state.activeTabKey !== "sharing"}>
-                    <ImportSharingComponent
+                    <DatasetSettingsSharingTab
                       form={form}
                       datasetId={this.props.datasetId}
+                      dataset={this.state.dataset}
                       hasNoAllowedTeams={hasNoAllowedTeams}
                     />
                   </Hideable>
                 </TabPane>
 
                 <TabPane tab={<span>Metadata</span>} key="general" forceRender>
                   <Hideable hidden={this.state.activeTabKey !== "general"}>
-                    <ImportGeneralComponent />
+                    <DatasetSettingsMetadataTab />
                   </Hideable>
                 </TabPane>
 
@@ -923,15 +924,15 @@ class DatasetImportView extends React.PureComponent<PropsWithFormAndRouter, Stat
                   forceRender
                 >
                   <Hideable hidden={this.state.activeTabKey !== "defaultConfig"}>
-                    <DefaultConfigComponent />
+                    <DatasetSettingsViewConfigTab />
                   </Hideable>
                 </TabPane>
 
                 {isUserAdmin && features().allowDeleteDatasets ? (
                   <TabPane tab={<span> Delete Dataset </span>} key="deleteDataset" forceRender>
                     <Hideable hidden={this.state.activeTabKey !== "deleteDataset"}>
                       <DatasetCacheProvider>
-                        <ImportDeleteComponent datasetId={this.props.datasetId} />
+                        <DatasetSettingsDeleteTab datasetId={this.props.datasetId} />
                       </DatasetCacheProvider>
                     </Hideable>
                   </TabPane>
@@ -961,4 +962,4 @@ const mapStateToProps = (state: OxalisState): StateProps => ({
 });
 
 const connector = connect(mapStateToProps);
-export default connector(withRouter<RouteComponentProps & OwnProps, any>(DatasetImportView));
+export default connector(withRouter<RouteComponentProps & OwnProps, any>(DatasetSettingsView));
diff --git a/...oard/dataset/default_config_component.tsx → ...taset/dataset_settings_viewconfig_tab.tsx b/...oard/dataset/default_config_component.tsx → ...taset/dataset_settings_viewconfig_tab.tsx
@@ -8,8 +8,10 @@ import { getDefaultLayerViewConfiguration } from "types/schemas/dataset_view_con
 import { layerViewConfigurations } from "messages";
 import type { DatasetLayerConfiguration } from "oxalis/store";
 import { FormItemWithInfo, jsonEditStyle } from "./helper_components";
+
 const FormItem = Form.Item;
-export default function DefaultConfigComponent() {
+
+export default function DatasetSettingsViewConfigTab() {
   const columns = [
     {
       title: "Name",

diff --git a/frontend/javascripts/dashboard/dataset_view.tsx b/frontend/javascripts/dashboard/dataset_view.tsx
@@ -222,7 +222,6 @@ function DatasetView(props: Props) {
         searchQuery={searchQuery}
         searchTags={searchTags}
         isUserAdmin={Utils.isUserAdmin(user)}
-        isUserTeamManager={Utils.isUserTeamManager(user)}
         isUserDatasetManager={Utils.isUserDatasetManager(user)}
         datasetFilteringMode={datasetFilteringMode}
         updateDataset={context.updateCachedDataset}

diff --git a/frontend/javascripts/router.tsx b/frontend/javascripts/router.tsx
@@ -23,7 +23,7 @@ import AuthTokenView from "admin/auth/auth_token_view";
 import ChangePasswordView from "admin/auth/change_password_view";
 import DashboardView, { urlTokenToTabKeyMap } from "dashboard/dashboard_view";
 import DatasetAddView from "admin/dataset/dataset_add_view";
-import DatasetImportView from "dashboard/dataset/dataset_import_view";
+import DatasetSettingsView from "dashboard/dataset/dataset_settings_view";
 import DisableGenericDnd from "components/disable_generic_dnd";
 import FinishResetPasswordView from "admin/auth/finish_reset_password_view";
 import JobListView from "admin/job/job_list_view";
@@ -333,7 +333,7 @@ class ReactRouter extends React.Component<Props> {
                 isAuthenticated={isAuthenticated}
                 path="/datasets/:organizationName/:datasetName/import"
                 render={({ match }: ContextRouter) => (
-                  <DatasetImportView
+                  <DatasetSettingsView
                     isEditingMode={false}
                     datasetId={{
                       name: match.params.datasetName || "",
@@ -351,7 +351,7 @@ class ReactRouter extends React.Component<Props> {
                 isAuthenticated={isAuthenticated}
                 path="/datasets/:organizationName/:datasetName/edit"
                 render={({ match }: ContextRouter) => (
-                  <DatasetImportView
+                  <DatasetSettingsView
                     isEditingMode
                     datasetId={{
                       name: match.params.datasetName || "",