Add collection entity add/remove forms to menu

Author: alexjennings

src/components/collection/CollectionEntityAddForm.jsx

@@ -1,6 +1,5 @@
 import FormControl from '@material-ui/core/FormControl';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Grid from '@material-ui/core/Grid';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Typography from '@material-ui/core/Typography';
@@ -12,19 +11,7 @@ import BoolCheckbox from '../ui/BoolCheckbox';
 import Field from '../ui/Field';
 import FieldTypeArray from '../ui/FieldTypeArray';
 import FormSection from '../ui/FormSection';
-
-function KeyValueType() {
-  return (
-    <Grid container spacing={8}>
-      <Grid item sm={6}>
-        <Field name="key" label="key" component={TextField} fullWidth />
-      </Grid>
-      <Grid item sm={6}>
-        <Field name="value" label="value" component={TextField} fullWidth />
-      </Grid>
-    </Grid>
-  );
-}
+import { KeyValuePairType } from '../ui/FormType';
 
 const queryParams = () => (
   <>
@@ -36,6 +23,15 @@ const queryParams = () => (
         <MenuItem value="library">Library</MenuItem>
       </Field>
     </FormControl>
+    <Field name="reference" label="Reference" component={TextField} fullWidth />
+    <FormControl fullWidth>
+      <InputLabel htmlFor="mode">Mode</InputLabel>
+      <Field name="mode" component={Select}>
+        <MenuItem value="REPLACE">Replace</MenuItem>
+        <MenuItem value="ADD">Add</MenuItem>
+      </Field>
+    </FormControl>
+    <Field name="before" label="Before" component={TextField} fullWidth />
     <FormControlLabel
       control={<Field name="addItems" component={BoolCheckbox} />}
       label="Add Items"
@@ -46,7 +42,7 @@ const queryParams = () => (
       arrayHeader
       withHeader={false}
       dense
-      component={KeyValueType}
+      component={KeyValuePairType}
     />
   </>
 );

src/components/collection/CollectionEntityRemove.jsx

@@ -42,7 +42,9 @@ function CollectionEntityRemove({
   };
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth={false}>
-      <DialogTitle>Remove Entity From Collection</DialogTitle>
+      <DialogTitle>
+        {`Remove Entity${entityId ? ` ${entityId}` : ''} From Collection${collectionId ? ` ${collectionId}` : ''}`}
+      </DialogTitle>
       <DialogContent>
         <CollectionEntityRemoveForm
           onSubmit={formActions.onRemoveEntity}

src/components/collection/CollectionEntityRemoveForm.jsx

@@ -17,15 +17,32 @@ const queryParams = () => (
       <MenuItem value="collection">Collection</MenuItem>
       <MenuItem value="library">Library</MenuItem>
     </Field>
+    <Field name="reference" label="Reference" component={TextField} fullWidth />
   </FormControl>
 );
 
-function CollectionEntityRemoveForm({ error, handleSubmit }) {
+function CollectionEntityRemoveForm({ error, collectionId, entityId, handleSubmit }) {
   return (
     <form onSubmit={handleSubmit}>
       {error && <Typography color="error">{error}</Typography>}
-      <Field name="collectionId" label="Collection ID" component={TextField} fullWidth />
-      <Field name="entityId" label="Entity ID" component={TextField} fullWidth />
+      {!collectionId && (
+        <Field
+          name="collectionId"
+          label="Collection ID"
+          component={TextField}
+          validate={[required]}
+          fullWidth
+        />
+      )}
+      {!entityId && (
+        <Field
+          name="entityId"
+          label="Entity ID"
+          component={TextField}
+          validate={[required]}
+          fullWidth
+        />
+      )}
       <FormSection name="queryParams" component={queryParams} />
     </form>
   );

src/containers/Collection.jsx

@@ -1,19 +1,18 @@
 import { PureComponent } from 'react';
 
 import List from '@material-ui/core/List';
-import Typography from '@material-ui/core/Typography';
 import { Route, Switch, generatePath } from 'react-router-dom';
 import { compose } from 'redux';
 
 import AccessControlDialog from '../components/access/AccessControlDialog';
 import CollectionEntityAdd from '../components/collection/CollectionEntityAdd';
+import CollectionEntityRemove from '../components/collection/CollectionEntityRemove';
 import CollectionExport from '../components/collection/CollectionExport';
 import CollectionFolderMap from '../components/collection/CollectionFolderMap';
 import CollectionRemove from '../components/collection/CollectionRemove';
 import CollectionRename from '../components/collection/CollectionRename';
 import DrawerContainer from '../components/ui/DrawerContainer';
 import ListItemLink from '../components/ui/ListItemLink';
-import Menu, { MenuItem } from '../components/ui/Menu';
 import TitleHeader from '../components/ui/TitleHeader';
 import withTabs from '../hoc/withTabs';
 import withUI from '../hoc/withUI';
@@ -48,6 +47,7 @@ const COLLECTION_EXPORT_DIALOG = 'COLLECTION_EXPORT_DIALOG';
 const COLLECTION_RENAME_DIALOG = 'COLLECTION_RENAME_DIALOG';
 const COLLECTION_ENTITY_ADD_DIALOG = 'COLLECTION_ENTITY_ADD_DIALOG';
 const COLLECTION_FOLDERMAP_DIALOG = 'COLLECTION_FOLDERMAP_DIALOG';
+const REMOVE_COLLECTION_ENTITY_GENERIC_DIALOG = 'REMOVE_COLLECTION_ENTITY_GENERIC_DIALOG';
 const ACCESSGRAPH_TAB = 'ACCESSGRAPH_TAB';
 const METADATAGRAPH_TAB = 'METADATAGRAPH_TAB';
 const SEQUENCE_TAB = 'SEQUENCE_TAB';
@@ -210,7 +210,7 @@ class Collection extends PureComponent {
   }
 
   render() {
-    const { onChangeTab, tabValue, collectionId, history, onOpen } = this.props;
+    const { onChangeTab, tabValue, collectionId, history } = this.props;
     const { collectionName } = this.state;
     const titleComponent = (props) => (
       <TitleHeader
@@ -222,25 +222,41 @@ class Collection extends PureComponent {
         entityId={collectionId}
         entityType="collection"
         addAccessControl={COLLECTION_ACCESSCONTROL_ADD_DIALOG}
-        exportModal={COLLECTION_EXPORT_DIALOG}
         titleChip={collectionName}
-        actionComponent={
-          <Menu>
-            <MenuItem onClick={() => onOpen({ modalName: COLLECTION_ENTITY_ADD_DIALOG })}>
-              <Typography>Add Entity</Typography>
-            </MenuItem>
-            <MenuItem onClick={() => onOpen({ modalName: COLLECTION_RENAME_DIALOG })}>
-              <Typography>Rename</Typography>
-            </MenuItem>
-            <MenuItem onClick={() => onOpen({ modalName: COLLECTION_FOLDERMAP_DIALOG })}>
-              <Typography>Map To Folder</Typography>
-            </MenuItem>
-            <MenuItem onClick={() => onOpen({ modalName: COLLECTION_REMOVE_DIALOG })}>
-              <Typography color="secondary">Delete Collection</Typography>
-            </MenuItem>
-          </Menu>
-        }
         {...props}
+        menuList={[
+          {
+            label: 'Add Entity',
+            modalName: COLLECTION_ENTITY_ADD_DIALOG,
+          },
+          {
+            label: 'Rename',
+            modalName: COLLECTION_RENAME_DIALOG,
+          },
+          {
+            label: 'Map To Folder',
+            modalName: COLLECTION_FOLDERMAP_DIALOG,
+          },
+          {
+            label: 'Add Access Control',
+            modalName: COLLECTION_ACCESSCONTROL_ADD_DIALOG,
+          },
+          {
+            label: 'Export',
+            modalName: COLLECTION_EXPORT_DIALOG,
+          },
+          ...(props?.menuList || []),
+          {
+            label: 'Remove Entity',
+            modalName: REMOVE_COLLECTION_ENTITY_GENERIC_DIALOG,
+            color: 'secondary',
+          },
+          {
+            label: 'Delete Collection',
+            modalName: COLLECTION_REMOVE_DIALOG,
+            color: 'secondary',
+          },
+        ]}
       />
     );
     return (
@@ -290,6 +306,11 @@ class Collection extends PureComponent {
           onSuccess={(response) => history.push(`/job/${response.data.jobId}/`)}
           collectionId={collectionId}
         />
+        <CollectionEntityRemove
+          dialogName={REMOVE_COLLECTION_ENTITY_GENERIC_DIALOG}
+          onSuccess={this.onRefresh}
+          collectionId={collectionId}
+        />
       </>
     );
   }