add view, edit, import and reload to context menu

scalableminds · Nov 7, 2022 · 4b13135 · 4b13135
1 parent e41d239
commit 4b13135
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 20 deletions.
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx
@@ -8,6 +8,7 @@ import {
   SettingOutlined,
   WarningOutlined,
 } from "@ant-design/icons";
+import window from "libs/window";
 import { Link, LinkProps, RouteComponentProps, withRouter } from "react-router-dom";
 import * as React from "react";
 import type { APIMaybeUnimportedDataset, APIDatasetId, APIDataset } from "types/api_flow_types";
@@ -19,7 +20,7 @@ import {
 import Toast from "libs/toast";
 import messages from "messages";
 import CreateExplorativeModal from "dashboard/advanced_dataset/create_explorative_modal";
-import { Modal } from "antd";
+import { Menu, Modal } from "antd";
 const disabledStyle: React.CSSProperties = {
   pointerEvents: "none",
   color: "var(--ant-disabled)",
@@ -134,7 +135,7 @@ class DatasetActionView extends React.PureComponent<Props, State> {
     isCreateExplorativeModalVisible: false,
   };
 
-  clearCache = async (dataset: APIMaybeUnimportedDataset) => {
+  onClearCache = async (dataset: APIMaybeUnimportedDataset) => {
     this.setState({
       isReloading: true,
     });
@@ -157,7 +158,7 @@ class DatasetActionView extends React.PureComponent<Props, State> {
     const disabledWhenReloadingStyle = getDisabledWhenReloadingStyle(isReloading);
     const reloadLink = (
       <a
-        onClick={() => this.clearCache(dataset)}
+        onClick={() => this.onClearCache(dataset)}
         title="Reload Dataset"
         style={disabledWhenReloadingStyle}
         type="link"
@@ -236,5 +237,76 @@ class DatasetActionView extends React.PureComponent<Props, State> {
     );
   }
 }
+const onClearCache = async (
+  dataset: APIDataset,
+  reloadDataset: (arg0: APIDatasetId) => Promise<void>,
+) => {
+  await clearCache(dataset);
+  await reloadDataset(dataset);
+  Toast.success(
+    messages["dataset.clear_cache_success"]({
+      datasetName: dataset.name,
+    }),
+  );
+};
+
+export function getDatasetActionMenu({
+  reloadDataset,
+  dataset,
+  hideContextMenu,
+}: {
+  reloadDataset: (arg0: APIDatasetId) => Promise<void>;
+  dataset: APIMaybeUnimportedDataset;
+  hideContextMenu: () => void;
+}) {
+  return (
+    <Menu
+      onClick={hideContextMenu}
+      style={{
+        borderRadius: 6,
+      }}
+      mode="vertical"
+    >
+      {dataset.isActive && (
+        <Menu.Item
+          key="view"
+          onClick={() => {
+            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/view`;
+          }}
+        >
+          View
+        </Menu.Item>
+      )}
+      {dataset.isEditable && dataset.isActive ? (
+        <Menu.Item
+          key="edit"
+          onClick={() => {
+            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/edit`;
+          }}
+        >
+          Open Settings
+        </Menu.Item>
+      ) : null}
+
+      {dataset.isEditable && !dataset.isActive ? (
+        <Menu.Item
+          key="import"
+          onClick={() => {
+            window.location.href = `/datasets/${dataset.owningOrganization}/${dataset.name}/import`;
+          }}
+        >
+          Import
+        </Menu.Item>
+      ) : null}
+
+      <Menu.Item
+        key="reload"
+        onClick={() => (dataset.isActive ? onClearCache(dataset, reloadDataset) : null)}
+      >
+        Reload
+      </Menu.Item>
+    </Menu>
+  );
+}
 
 export default withRouter<RouteComponentProps & Props, any>(DatasetActionView);
diff --git a/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx b/frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx
@@ -22,7 +22,9 @@ 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 DatasetActionView from "dashboard/advanced_dataset/dataset_action_view";
+import DatasetActionView, {
+  getDatasetActionMenu,
+} from "dashboard/advanced_dataset/dataset_action_view";
 import EditableTextIcon from "oxalis/view/components/editable_text_icon";
 import FormattedDate from "components/formatted_date";
 import * as Utils from "libs/utils";
@@ -47,7 +49,7 @@ type Props = {
   isUserAdmin: boolean;
   isUserDatasetManager: boolean;
   datasetFilteringMode: DatasetFilteringMode;
-  reloadDataset: (arg0: APIDatasetId, arg1: Array<APIMaybeUnimportedDataset>) => Promise<void>;
+  reloadDataset: (arg0: APIDatasetId, arg1?: Array<APIMaybeUnimportedDataset>) => Promise<void>;
   updateDataset: (arg0: APIDataset) => Promise<void>;
   addTagToSearch: (tag: string) => void;
   onSelectDataset?: (dataset: APIDataset | null) => void;
@@ -58,33 +60,30 @@ type State = {
   prevSearchQuery: string;
   sortedInfo: SorterResult<string>;
   contextMenuPosition: [number, number] | null | undefined;
+  datasetForContextMenu: APIMaybeUnimportedDataset | null;
 };
 
 type ContextMenuProps = {
   contextMenuPosition: [number, number] | null | undefined;
   hideContextMenu: () => void;
+  dataset: APIMaybeUnimportedDataset | null;
+  reloadDataset: Props["reloadDataset"];
 };
 
 function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
   const inputRef = React.useContext(ContextMenuContext);
-  const { ...props } = propsWithInputRef;
+  const { dataset, reloadDataset, ...props } = propsWithInputRef;
   const { contextMenuPosition, hideContextMenu } = props;
   let overlay = <div />;
 
-  if (contextMenuPosition != null) {
-    overlay = (
-      <Menu
-        onClick={hideContextMenu}
-        style={{
-          borderRadius: 6,
-        }}
-        mode="vertical"
-      >
-        <Menu.Item key="set-node-active" onClick={() => {}}>
-          Click me
-        </Menu.Item>
-      </Menu>
-    );
+  if (contextMenuPosition != null && dataset != null) {
+    // getDatasetActionMenu should not be turned into <DatasetActionMenu />
+    // as this breaks antd's styling of the menu within the dropdown.
+    overlay = getDatasetActionMenu({
+      hideContextMenu,
+      dataset: dataset,
+      reloadDataset,
+    });
   }
 
   if (inputRef == null || inputRef.current == null) return null;
@@ -163,6 +162,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
     },
     prevSearchQuery: "",
     contextMenuPosition: null,
+    datasetForContextMenu: null,
   };
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State): Partial<State> {
@@ -329,6 +329,8 @@ class DatasetTable extends React.PureComponent<Props, State> {
           hideContextMenu={() => {
             this.setState({ contextMenuPosition: null });
           }}
+          dataset={this.state.datasetForContextMenu}
+          reloadDataset={this.props.reloadDataset}
           contextMenuPosition={this.state.contextMenuPosition}
         />
         <FixedExpandableTable
@@ -369,6 +371,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
                 const y = event.clientY - bounds.top;
 
                 this.showContextMenuAt(x, y);
+                this.setState({ datasetForContextMenu: record });
               },
               onDoubleClick: (event) => {
                 console.log("todo: open dataset");