Env table update (#341)

* use material ui click away listener to clean up props and function of table * index environments by id, delete environement by id
konstructio · Oct 18, 2023 · 33f0d02 · 33f0d02
1 parent dbf32e0
commit 33f0d02
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 92 deletions.
diff --git a/components/environmentsTable/environmentsTable.stories.tsx b/components/environmentsTable/environmentsTable.stories.tsx
@@ -1,10 +1,6 @@
-import React, { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { mockEnvironmentsResponse } from '../../tests/mocks/mockEnvironmentsResponse';
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import { setEnvironments } from '../../redux/slices/environments.slice';
-import { ClusterEnvironment } from '../../types/provision';
 import { noop } from '../../utils/noop';
 import { createEnvMap } from '../../utils/createEnvMap';
 
@@ -18,31 +14,9 @@ const meta: Meta<typeof EnvironmentsTable> = {
 
 export default meta;
 
-const EnvironmentsTableWithHooks = () => {
-  const [selectedEnv, setSelectedEnv] = useState<ClusterEnvironment>();
-  const { environments } = useAppSelector(({ environments }) => environments);
-
-  const dispatch = useAppDispatch();
-
-  const handleMenuButtonClick = (env: ClusterEnvironment) => {
-    setSelectedEnv((curEnv) => (curEnv?.name === env.name ? undefined : env));
-  };
-
-  useEffect(() => {
-    dispatch(setEnvironments(mockEnvironments));
-  }, [dispatch]);
-
-  return (
-    <EnvironmentsTable
-      environments={environments}
-      onDeleteEnvironment={noop}
-      onMenuButtonClick={handleMenuButtonClick}
-      selectedEnvironment={selectedEnv}
-      // onEditEnvironment={noop}
-    />
-  );
-};
-
 export const Default: StoryObj<typeof EnvironmentsTable> = {
-  render: () => <EnvironmentsTableWithHooks />,
+  args: {
+    onDeleteEnvironment: noop,
+    environments: mockEnvironments,
+  },
 };
diff --git a/components/environmentsTable/index.tsx b/components/environmentsTable/index.tsx
@@ -8,6 +8,7 @@ import List from '@mui/material/List';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { ClickAwayListener } from '@mui/material';
 import moment from 'moment';
 
 import { ECHO_BLUE, FIRE_BRICK, MAGNOLIA, PRIMARY, SALTBOX_BLUE } from '../../constants/colors';
@@ -29,6 +30,8 @@ import {
   StyledTable,
 } from './environmentsTable.styled';
 
+import useToggle from '@/hooks/useToggle';
+
 const MyButton = styled.button<{ selected?: boolean }>`
   display: flex;
   justify-content: center;
@@ -50,20 +53,18 @@ const MyButton = styled.button<{ selected?: boolean }>`
 
 interface EnvironmentRowProps {
   environment: ClusterEnvironment;
-  onDeleteEnvironment: () => void;
-  onMenuButtonClick: (env: ClusterEnvironment) => void;
-  selected?: boolean;
+  onDeleteEnvironment: (envId: string) => void;
   // onEditEnvironment: () => void;
 }
 
 const EnvironmentRow: FunctionComponent<EnvironmentRowProps> = ({
   environment,
   onDeleteEnvironment,
   // onEditEnvironment,
-  onMenuButtonClick,
-  selected,
 }) => {
-  const { name, description, color, creationDate } = environment;
+  const { id, name, description, color, creationDate } = environment;
+  const { isOpen, close, toggle } = useToggle();
+
   return (
     <StyledTableRow>
       <StyledTableCell scope="row">
@@ -81,30 +82,28 @@ const EnvironmentRow: FunctionComponent<EnvironmentRowProps> = ({
       </StyledTableCell>
       <StyledTableCell>
         <div style={{ position: 'relative' }}>
-          <MyButton
-            aria-label="more info"
-            onClick={() => onMenuButtonClick(environment)}
-            selected={selected}
-          >
+          <MyButton aria-label="more info" onClick={toggle} selected={isOpen}>
             <MoreHorizIcon />
           </MyButton>
-          {selected && (
-            <Menu>
-              <List>
-                {/* <ListItem disablePadding>
+          {isOpen && (
+            <ClickAwayListener onClickAway={close}>
+              <Menu>
+                <List>
+                  {/* <ListItem disablePadding>
                   <ListItemButton onClick={onEditEnvironment}>
                     <Typography variant="body2">Edit</Typography>
                   </ListItemButton>
                 </ListItem> */}
-                <ListItem disablePadding>
-                  <ListItemButton onClick={onDeleteEnvironment}>
-                    <Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
-                      Delete environment
-                    </Typography>
-                  </ListItemButton>
-                </ListItem>
-              </List>
-            </Menu>
+                  <ListItem disablePadding>
+                    <ListItemButton onClick={() => onDeleteEnvironment(id)}>
+                      <Typography variant="body2" style={{ color: `${FIRE_BRICK}` }}>
+                        Delete environment
+                      </Typography>
+                    </ListItemButton>
+                  </ListItem>
+                </List>
+              </Menu>
+            </ClickAwayListener>
           )}
         </div>
       </StyledTableCell>
@@ -180,19 +179,15 @@ const EnvironmentTableHead: FunctionComponent<EnvironmentTableHeadProps> = ({
 
 interface EnvironmentsTableProps extends Omit<ComponentPropsWithRef<'tbody'>, 'key'> {
   environments: EnvMap;
-  selectedEnvironment?: ClusterEnvironment;
-  onDeleteEnvironment: () => void;
-  onMenuButtonClick: (env: ClusterEnvironment) => void;
+  onDeleteEnvironment: (envId: string) => void;
   customRef?: React.Ref<HTMLTableSectionElement>;
   // onEditEnvironment: () => void;
 }
 
 export const EnvironmentsTable: FunctionComponent<EnvironmentsTableProps> = ({
   environments,
-  selectedEnvironment,
   onDeleteEnvironment,
   // onEditEnvironment,
-  onMenuButtonClick,
   customRef,
 }) => {
   const [orderBy, setOrderBy] = useState<EnvKey>('creationDate');
@@ -221,8 +216,6 @@ export const EnvironmentsTable: FunctionComponent<EnvironmentsTableProps> = ({
               environment={environment}
               onDeleteEnvironment={onDeleteEnvironment}
               // onEditEnvironment={onEditEnvironment}
-              onMenuButtonClick={onMenuButtonClick}
-              selected={environment.name === selectedEnvironment?.name}
             />
           ))}
         </StyledTableBody>

diff --git a/containers/environments/index.tsx b/containers/environments/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { FunctionComponent, useEffect, useState, useCallback, useRef } from 'react';
+import React, { FunctionComponent, useEffect, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import Image from 'next/image';
 
@@ -23,12 +23,10 @@ import { ClusterEnvironment } from '../../types/provision';
 import DeleteEnvironment from '../../components/deleteEnvironment';
 import { clearEnvironmentError } from '../../redux/slices/environments.slice';
 
-import { useOnClickOutside } from '@/hooks/useOnClickOutside';
 import { noop } from '@/utils/noop';
 
 const Environments: FunctionComponent = () => {
   const { isOpen, close, open } = useToggle();
-  const { isOpen: deleteEnv, close: closeDeleteEnv, open: openDeleteEnv } = useToggle();
 
   const [selectedEnv, setSelectedEnv] = useState<ClusterEnvironment>();
 
@@ -37,10 +35,6 @@ const Environments: FunctionComponent = () => {
   );
   const dispatch = useAppDispatch();
 
-  const handleMenuButtonClick = useCallback((env: ClusterEnvironment) => {
-    setSelectedEnv((curEnv) => (curEnv?.name === env.name ? undefined : env));
-  }, []);
-
   const handleAddEnvironment = useCallback(
     (env: ClusterEnvironment) => {
       dispatch(createEnvironment(env))
@@ -59,16 +53,14 @@ const Environments: FunctionComponent = () => {
         .unwrap()
         .then(() => {
           setSelectedEnv(undefined);
-          closeDeleteEnv();
         })
         .catch(noop);
     }
-  }, [selectedEnv, dispatch, closeDeleteEnv]);
+  }, [selectedEnv, dispatch]);
 
   const handleDeleteModal = useCallback(() => {
     setSelectedEnv(undefined);
-    closeDeleteEnv();
-  }, [closeDeleteEnv]);
+  }, []);
 
   const handleErrorClose = useCallback(() => {
     dispatch(clearEnvironmentError());
@@ -79,19 +71,19 @@ const Environments: FunctionComponent = () => {
     close();
   }, [dispatch, close]);
 
+  const handleDeleteEnv = useCallback(
+    (id: string) => {
+      if (environments[id]) {
+        setSelectedEnv(environments[id]);
+      }
+    },
+    [environments],
+  );
+
   useEffect(() => {
     dispatch(getAllEnvironments());
   }, [dispatch]);
 
-  const ref = useRef<HTMLTableSectionElement>(null);
-
-  useOnClickOutside(ref, () => {
-    if (!isOpen && !deleteEnv) {
-      handleDeleteModal();
-      handleModalClose();
-    }
-  });
-
   return (
     <Column style={{ width: '100%' }}>
       <Header>
@@ -111,11 +103,8 @@ const Environments: FunctionComponent = () => {
 
       {Object.keys(environments).length ? (
         <EnvironmentsTable
-          ref={ref}
           environments={environments}
-          onDeleteEnvironment={openDeleteEnv}
-          onMenuButtonClick={handleMenuButtonClick}
-          selectedEnvironment={selectedEnv}
+          onDeleteEnvironment={handleDeleteEnv}
           // onEditEnvironment={noop}
         />
       ) : (
@@ -145,7 +134,7 @@ const Environments: FunctionComponent = () => {
       </Modal>
       {selectedEnv && (
         <DeleteEnvironment
-          isOpen={deleteEnv}
+          isOpen={!!selectedEnv}
           environment={selectedEnv}
           boundToCluster={boundEnvironments[selectedEnv.name]}
           onClose={handleDeleteModal}

diff --git a/redux/slices/environments.slice.ts b/redux/slices/environments.slice.ts
@@ -74,9 +74,9 @@ const environmentsSlice = createSlice({
         state.loading = false;
         state.error = action.error.message;
       })
-      .addCase(deleteEnvironment.fulfilled, (state, { payload: envName }) => {
+      .addCase(deleteEnvironment.fulfilled, (state, { payload: envId }) => {
         state.loading = false;
-        delete state.environments[envName];
+        delete state.environments[envId];
       });
   },
 });

diff --git a/redux/thunks/environments.thunk.ts b/redux/thunks/environments.thunk.ts
@@ -46,12 +46,12 @@ export const createEnvironment = createAsyncThunk<ClusterEnvironment, ClusterEnv
   },
 );
 
-export const deleteEnvironment = createAsyncThunk<ClusterEnvironment['name'], ClusterEnvironment>(
+export const deleteEnvironment = createAsyncThunk<ClusterEnvironment['id'], ClusterEnvironment>(
   'environments/deleteEnvironment',
   async (environment, { dispatch }) => {
     try {
       await axios.delete(
-        `/api/proxy?${createQueryString('url', `/environment/${environment.name}`)}`,
+        `/api/proxy?${createQueryString('url', `/environment/${environment.id}`)}`,
       );
 
       dispatch(
@@ -65,7 +65,7 @@ export const deleteEnvironment = createAsyncThunk<ClusterEnvironment['name'], Cl
         }),
       );
 
-      return environment.name;
+      return environment.id;
     } catch (error) {
       if (axios.isAxiosError(error)) {
         throw error.response?.data.error;

diff --git a/utils/createEnvMap.ts b/utils/createEnvMap.ts
@@ -5,7 +5,7 @@ import { mapEnvironmentFromRaw } from './mapEnvironmentFromRaw';
 
 export function createEnvMap(environments: EnvironmentResponse[]): EnvMap {
   return environments.reduce<EnvMap>((acc, curVal) => {
-    acc[curVal.name] = mapEnvironmentFromRaw(curVal);
+    acc[curVal._id] = mapEnvironmentFromRaw(curVal);
     return acc;
   }, {});
 }