From 4fc3a1b7df4e2a0a404662a0a7753a72888b7dc5 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Fri, 8 Dec 2023 08:37:55 -0800
Subject: [PATCH 1/2] added button icons

---
 .../components/security/ManageSecurity.tsx    | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/src/components/security/ManageSecurity.tsx b/app/src/components/security/ManageSecurity.tsx
index 313d97bf1..b2ad4f285 100644
--- a/app/src/components/security/ManageSecurity.tsx
+++ b/app/src/components/security/ManageSecurity.tsx
@@ -1,6 +1,8 @@
-import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import { mdiChevronDown, mdiChevronUp, mdiLock, mdiLockOpenVariantOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import { Button, Menu, MenuItem } from '@mui/material';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
 
 const ManageSecurity: React.FC = () => {
@@ -12,6 +14,7 @@ const ManageSecurity: React.FC = () => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+
   return (
     <>
       <Button
@@ -19,12 +22,22 @@ const ManageSecurity: React.FC = () => {
         data-testid="manage-security"
         variant="outlined"
         onClick={handleClick}
-        endIcon={open ? <Icon path={mdiChevronUp} size={1}/> : <Icon path={mdiChevronDown} size={1}/>}>
+        endIcon={open ? <Icon path={mdiChevronUp} size={1} /> : <Icon path={mdiChevronDown} size={1} />}>
         Manage Security
       </Button>
       <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
-        <MenuItem>Secure Records</MenuItem>
-        <MenuItem>Unsecure Records</MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Icon path={mdiLock} size={1} />
+          </ListItemIcon>
+          <ListItemText>Secure Records</ListItemText>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <Icon path={mdiLockOpenVariantOutline} size={1} />
+          </ListItemIcon>
+          <ListItemText>Unsecure Records</ListItemText>
+        </MenuItem>
       </Menu>
     </>
   );

From 25f805c4bad6b3d4d64613eb9ab5b437649e1f63 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Fri, 8 Dec 2023 11:29:18 -0800
Subject: [PATCH 2/2] added unsecure dialog

---
 .../components/security/ManageSecurity.tsx    |  9 +++--
 .../components/security/UnsecureDialog.tsx    | 36 +++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 app/src/components/security/UnsecureDialog.tsx

diff --git a/app/src/components/security/ManageSecurity.tsx b/app/src/components/security/ManageSecurity.tsx
index b2ad4f285..c29ea5a9c 100644
--- a/app/src/components/security/ManageSecurity.tsx
+++ b/app/src/components/security/ManageSecurity.tsx
@@ -3,10 +3,12 @@ import Icon from '@mdi/react';
 import { Button, Menu, MenuItem } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import React from 'react';
+import React, { useState } from 'react';
+import UnsecureDialog from './UnsecureDialog';
 
-const ManageSecurity: React.FC = () => {
+const ManageSecurity = () => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [isUnsecureDialogOpen, setIsUnsecuredDialogOpen] = useState(false);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -17,6 +19,7 @@ const ManageSecurity: React.FC = () => {
 
   return (
     <>
+      <UnsecureDialog isOpen={isUnsecureDialogOpen} onClose={() => setIsUnsecuredDialogOpen(false)} />
       <Button
         color="primary"
         data-testid="manage-security"
@@ -32,7 +35,7 @@ const ManageSecurity: React.FC = () => {
           </ListItemIcon>
           <ListItemText>Secure Records</ListItemText>
         </MenuItem>
-        <MenuItem>
+        <MenuItem onClick={() => setIsUnsecuredDialogOpen(true)}>
           <ListItemIcon>
             <Icon path={mdiLockOpenVariantOutline} size={1} />
           </ListItemIcon>
diff --git a/app/src/components/security/UnsecureDialog.tsx b/app/src/components/security/UnsecureDialog.tsx
new file mode 100644
index 000000000..4cf50d6bd
--- /dev/null
+++ b/app/src/components/security/UnsecureDialog.tsx
@@ -0,0 +1,36 @@
+import { Alert, AlertTitle, Typography } from '@mui/material';
+import YesNoDialog from 'components/dialog/YesNoDialog';
+
+interface IUnsecureDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+const UnsecureDialog = (props: IUnsecureDialogProps) => {
+  return (
+    <YesNoDialog
+      open={props.isOpen}
+      onYes={() => {
+        console.log('Unsecure these fools');
+      }}
+      onNo={props.onClose}
+      onClose={() => {}}
+      dialogTitle="Unsecure Records?"
+      dialogContent={
+        <Alert severity="error" sx={{ marginTop: 4 }}>
+          <AlertTitle color="black">
+            <strong>Open access to all records</strong>
+          </AlertTitle>
+          <Typography color={'black'}>
+            Users will be able to access and download all records included in this dataset
+          </Typography>
+        </Alert>
+      }
+      dialogText="Are you sure you want to unsecure this dataset?"
+      yesButtonProps={{ color: 'error' }}
+      yesButtonLabel="UNSECURE"
+      noButtonLabel="CANCEL"
+    />
+  );
+};
+
+export default UnsecureDialog;