WEB-4460 re-add in more menu

Author: henry-tp

app/pages/clinicworkspace/TideDashboardV2/Cells.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation, withTranslation } from 'react-i18next';
 import { Box, Flex, Text } from 'theme-ui';
 import { colors as vizColors  } from '@tidepool/viz';
@@ -13,8 +13,18 @@ import utils from '../../../core/utils';
 import { CATEGORY } from './tideDashboardSlice';
 import isUndefined from 'lodash/isUndefined';
 
+import PopoverMenu from '../../../components/elements/PopoverMenu';
+import EditIcon from '@material-ui/icons/EditRounded';
+import DataInIcon from '../../../core/icons/DataInIcon.svg';
 
-import { tideDashboardExclusionQueryParams } from './tideDashboardApi';
+import {
+  setEditPatientDialogIsOpen,
+  setEditPatientDialogPatientId,
+  setDataConnectionsModalIsOpen,
+  setDataConnectionsModalPatientId,
+} from './tideDashboardSlice';
+
+import { tideDashboardExclusionQuery } from './tideDashboardApi';
 
 export const COMPACT = '@container (max-width: 1200px)';
 
@@ -163,7 +173,7 @@ export const FlagCell = ({ patient, category = null }) => {
 
   const { VERY_LOW, ANY_LOW, DROP_IN_TIR, ANY_HIGH, VERY_HIGH, LOW_CGM_WEAR } = CATEGORY;
 
-  const getThreshold = (category) => tideDashboardExclusionQueryParams.getRule(category).threshold;
+  const getThreshold = (category) => tideDashboardExclusionQuery.getRule(category).threshold;
 
   if (!period) return null;
 
@@ -231,7 +241,50 @@ export const MoreMenuHeader = () => {
   return <Box aria-label={t('More Options')}></Box>;
 };
 
-export const MoreMenuCell = () => <></>; // TEMPORARY
+export const MoreMenuCell = ({ patient }) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const handleOpenEditPatientDialog = () => {
+    dispatch(setEditPatientDialogIsOpen(true));
+    dispatch(setEditPatientDialogPatientId(patient.id));
+  };
+
+  const handleOpenDataConnectionsModal = () => {
+    dispatch(setDataConnectionsModalIsOpen(true));
+    dispatch(setDataConnectionsModalPatientId(patient.id));
+  };
+
+  return (
+    <PopoverMenu
+      id={`action-menu-${patient?.id}`}
+      items={[{
+        icon: EditIcon,
+        iconLabel: t('Edit Patient Details'),
+        iconPosition: 'left',
+        id: `edit-${patient?.id}`,
+        variant: 'actionListItem',
+        onClick: (_popupState) => {
+          _popupState.close();
+          handleOpenEditPatientDialog();
+        },
+        text: t('Edit Patient Details'),
+      }, {
+        iconSrc: DataInIcon,
+        iconLabel: t('Bring Data into Tidepool'),
+        iconPosition: 'left',
+        id: `edit-data-connections-${patient?.id}`,
+        variant: 'actionListItem',
+        onClick: (_popupState) => {
+          _popupState.close();
+          handleOpenDataConnectionsModal();
+        },
+        text: t('Bring Data into Tidepool'),
+      }]}
+      sx={{ position: 'relative', left: '-2px' }}
+    />
+  );
+};
 
 export const PatientLastReviewedCell = ({ patient }) => {
   return <PatientLastReviewed patient={patient} />;