[DCJ-71] Create page to edit DAC

src/Routes.jsx

@@ -3,6 +3,7 @@ import {Redirect, Route, Switch} from 'react-router-dom';
 import AuthenticatedRoute from './components/AuthenticatedRoute';
 import {USER_ROLES} from './libs/utils';
 import ManageDac from './pages/manage_dac/ManageDac';
+import ManageEditDac from './pages/manage_dac/ManageEditDac';
 import AdminManageUsers from './pages/AdminManageUsers';
 import DataAccessRequestApplication from './pages/dar_application/DataAccessRequestApplication';
 import DatasetCatalog from './pages/DatasetCatalog';
@@ -71,6 +72,7 @@ const Routes = (props) => (
     <AuthenticatedRoute path="/admin_manage_users" component={AdminManageUsers} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/admin_edit_user/:userId" component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/manage_dac" component={ManageDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
+    <AuthenticatedRoute path="/manage_edit_dac/:dacId" component={ManageEditDac} props={props} rolesAllowed={[USER_ROLES.admin, USER_ROLES.chairperson]} />
     <AuthenticatedRoute path="/admin_manage_institutions" component={AdminManageInstitutions} props={props} rolesAllowed={[USER_ROLES.admin]} />
     <AuthenticatedRoute path="/researcher_console" component={ResearcherConsole} props={props} rolesAllowed={[USER_ROLES.researcher]}/>
     <AuthenticatedRoute path="/dar_collection/:collectionId" component={DarCollectionReview} props={props} rolesAllowed={[USER_ROLES.researcher, USER_ROLES.chairperson, USER_ROLES.member, USER_ROLES.signingOfficial]}/>

src/components/manage_dac_table/ManageDacTable.jsx

@@ -145,7 +145,7 @@ export const ManageDacTable = function ManageDacTable(props) {
     isLoading,
     dacs,
     userRole,
-    setShowDacModal,
+    setShowEditPage,
     setShowDatasetsModal,
     setShowMembersModal,
     setShowConfirmationModal,
@@ -155,10 +155,10 @@ export const ManageDacTable = function ManageDacTable(props) {
   } = props;
 
   const editDac = useCallback((selectedDac) => {
-    setShowDacModal(true);
+    setShowEditPage(true);
     setSelectedDac(selectedDac);
     setIsEditMode(true);
-  }, [setShowDacModal, setSelectedDac, setIsEditMode]);
+  }, [setShowEditPage, setSelectedDac, setIsEditMode]);
 
   const deleteDac = useCallback((selectedDac) => {
     setShowConfirmationModal(true);

src/components/manage_dac_table/ManageDacTableCellData.jsx

@@ -3,7 +3,9 @@ import {isNil, isEmpty} from 'lodash/fp';
 import {styles} from './ManageDacTable';
 import TableIconButton from '../TableIconButton';
 import {Styles} from '../../libs/theme';
-import {Delete, Edit} from '@mui/icons-material';
+import {Delete} from '@mui/icons-material';
+import {Link} from 'react-router-dom';
+import editPencilIcon from '../../images/edit_pencil.svg';
 
 export function nameCellData({name = '- -', dac, viewMembers, dacId, label= 'dac-name'}) {
   return {
@@ -54,20 +56,23 @@ export function datasetsCellData({dac, viewDatasets, label='dac-datasets'}) {
 }
 
 
-export function actionsCellData({dac, editDac, deleteDac, userRole}) {
+export function actionsCellData({dac, deleteDac, userRole}) {
   const isAdmin = (userRole === 'Admin');
   const deleteDisabled = (!isNil(dac.datasets) && !isEmpty(dac.datasets));
 
   const actions = (
     <>
-      <TableIconButton
-        key='edit-dac-icon'
-        dataTip='Edit DAC'
-        onClick={() => editDac(dac)}
-        icon={Edit}
-        style={Object.assign({}, Styles.TABLE.TABLE_ICON_BUTTON)}
-        hoverStyle={Object.assign({}, Styles.TABLE.TABLE_BUTTON_ICON_HOVER)}
-      />
+      <div style={{ paddingTop: '5px' }}>
+        <Link
+          to={{
+            pathname: `/manage_edit_dac/${dac.dacId}`,
+            state: { userRole: userRole }
+          }}
+          data-tip={`Edit ${dac.name}`}
+        >
+          <img id="edit-pencil-icon" src={editPencilIcon}/>
+        </Link>
+      </div>
       {isAdmin && <TableIconButton
         key='delete-dac-icon'
         dataTip={(deleteDisabled?'All datasets assigned to this DAC must be reassigned before this can be deleted' :'Delete DAC')}

src/pages/manage_dac/ManageDac.jsx

@@ -11,6 +11,7 @@ import {AddDacModal} from './AddDacModal';
 import DacDatasetsModal from '../../components/modals/DacDatasetsModal';
 import {DacMembersModal} from './DacMembersModal';
 import ConfirmationModal from '../../components/modals/ConfirmationModal';
+import ManageEditDac from './ManageEditDac';
 
 const CHAIR = 'Chairperson';
 const ADMIN = 'Admin';
@@ -24,6 +25,7 @@ export const ManageDac = function ManageDac() {
 
   // modal state
   const [showDacModal, setShowDacModal] = useState(false);
+  const [showEditPage, setShowEditPage] = useState(false);
   const [showDatasetsModal, setShowDatasetsModal] = useState(false);
   const [showMembersModal, setShowMembersModal] = useState(false);
   const [showConfirmationModal, setShowConfirmationModal] = useState(false);
@@ -154,6 +156,7 @@ export const ManageDac = function ManageDac() {
         setIsEditMode={setIsEditMode}
         setSelectedDac={setSelectedDac}
         setSelectedDatasets={setSelectedDatasets}
+        setShowEditPage={setShowEditPage}
       />
       <ConfirmationModal
         showConfirmation={showConfirmationModal}
@@ -190,6 +193,9 @@ export const ManageDac = function ManageDac() {
           userRole={userRole}
         />
       )}
+      {showEditPage && (
+        <ManageEditDac/>
+      )}
     </div>
   );
 };