From 9981814e801461c3d7af9d65ea552ff575d22678 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Fri, 2 Aug 2024 11:06:55 +0000
Subject: [PATCH 01/12] Moved the iterator inside the entryrolelist component

---
 .../entry/overview/EntryCardRolesDialog.tsx   | 37 +++++++++++++++++++
 frontend/src/entry/overview/EntryRoleList.tsx | 25 +++++++++++++
 frontend/src/entry/overview/FormEditPage.tsx  |  6 +++
 3 files changed, 68 insertions(+)
 create mode 100644 frontend/src/entry/overview/EntryCardRolesDialog.tsx
 create mode 100644 frontend/src/entry/overview/EntryRoleList.tsx

diff --git a/frontend/src/entry/overview/EntryCardRolesDialog.tsx b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
new file mode 100644
index 000000000..f654d8261
--- /dev/null
+++ b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
@@ -0,0 +1,37 @@
+import { DialogTitle } from '@mui/material'
+import Dialog from '@mui/material/Dialog'
+import { Transition } from 'src/common/Transition'
+import EntryRoleList from 'src/entry/overview/EntryRoleList'
+import { EntryInterface } from 'types/types'
+
+type EntryCardRoleDialogProps = {
+  entry: EntryInterface
+  open: boolean
+  setOpen: (isOpen: boolean) => void
+}
+
+export default function EntryCardRolesDialog({ entry, open, setOpen }: EntryCardRoleDialogProps) {
+  // const theme = useTheme()
+  // const { isModelError: isEntryError, mutateModel: mutateEntry } = useGetModel(entry.id, entry.kind)
+  // const {
+  //   modelRoles: entryRoles,
+  //   isModelRolesLoading: isEntryRolesLoading,
+  //   isModelRolesError: isEntryRolesError,
+  // } = useGetModelRoles(entry.id)
+
+  return (
+    <>
+      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm' TransitionComponent={Transition}>
+        <DialogTitle>Roles</DialogTitle>
+        <EntryRoleList entry={entry} />
+        {/* <Grid container spacing={2}>
+          {entry.collaborators.map((entryentry, index) => (
+            <div key={index}>
+              <EntryRoleList entryentry={entryentry}></EntryRoleList>
+            </div>
+          ))}
+        </Grid> */}
+      </Dialog>
+    </>
+  )
+}
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
new file mode 100644
index 000000000..74380fc00
--- /dev/null
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -0,0 +1,25 @@
+import { Chip, Grid } from '@mui/material'
+import { EntryInterface } from 'types/types'
+
+type EntryCardRoleDialogProps = {
+  entry: EntryInterface
+}
+
+export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
+  return (
+    <>
+      <Grid container spacing={2}>
+        {entry.collaborators.map((user, index) => (
+          <div key={index}>
+            <Grid key={index} item xs={6}>
+              <Chip label={user.entity} />
+            </Grid>
+            <Grid key={index} item xs={6}>
+              <Chip label={user.roles} />
+            </Grid>
+          </div>
+        ))}
+      </Grid>
+    </>
+  )
+}
diff --git a/frontend/src/entry/overview/FormEditPage.tsx b/frontend/src/entry/overview/FormEditPage.tsx
index 2f83b59ec..c98f414ab 100644
--- a/frontend/src/entry/overview/FormEditPage.tsx
+++ b/frontend/src/entry/overview/FormEditPage.tsx
@@ -8,6 +8,7 @@ import Loading from 'src/common/Loading'
 import TextInputDialog from 'src/common/TextInputDialog'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import EntryCardHistoryDialog from 'src/entry/overview/EntryCardHistoryDialog'
+import EntryCardRolesDialog from 'src/entry/overview/EntryCardRolesDialog'
 import ExportEntryCardDialog from 'src/entry/overview/ExportEntryCardDialog'
 import SaveAndCancelButtons from 'src/entry/overview/SaveAndCancelFormButtons'
 import JsonSchemaForm from 'src/Form/JsonSchemaForm'
@@ -31,6 +32,7 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
   const { schema, isSchemaLoading, isSchemaError } = useGetSchema(entry.card.schemaId)
   const { isModelError: isEntryError, mutateModel: mutateEntry } = useGetModel(entry.id, entry.kind)
   const { mutateModelCardRevisions: mutateEntryCardRevisions } = useGetModelCardRevisions(entry.id)
+  const [rolesDialogOpen, setRolesDialogOpen] = useState(false)
   const [historyDialogOpen, setHistoryDialogOpen] = useState(false)
   const [exportDialogOpen, setExportDialogOpen] = useState(false)
   const [jsonUploadDialogOpen, setJsonUploadDialogOpen] = useState(false)
@@ -138,6 +140,9 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
           </div>
           {!isEdit && (
             <Stack direction='row' spacing={1} justifyContent='flex-end' sx={{ mb: { xs: 2 } }}>
+              <Button variant='outlined' onClick={() => setRolesDialogOpen(true)}>
+                View Roles
+              </Button>
               <Button variant='outlined' onClick={() => setExportDialogOpen(true)}>
                 Export as PDF
               </Button>
@@ -183,6 +188,7 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
         )}
       </Box>
       <EntryCardHistoryDialog entry={entry} open={historyDialogOpen} setOpen={setHistoryDialogOpen} />
+      <EntryCardRolesDialog entry={entry} open={rolesDialogOpen} setOpen={setRolesDialogOpen} />
       <TextInputDialog
         open={jsonUploadDialogOpen}
         onClose={() => setJsonUploadDialogOpen(false)}

From 853a7fb77c8672256abdc9dda70519e7d1654bc4 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:40:41 +0000
Subject: [PATCH 02/12] Added grid with variable amount of rows. 1 column for
 collaborator's name (typography) and one for variable amount of chips
 representing the roles assigned to the collaborator

---
 .../entry/overview/EntryCardRolesDialog.tsx    |  7 -------
 frontend/src/entry/overview/EntryRoleList.tsx  | 18 ++++++++++++------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/entry/overview/EntryCardRolesDialog.tsx b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
index f654d8261..1fd8ecae5 100644
--- a/frontend/src/entry/overview/EntryCardRolesDialog.tsx
+++ b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
@@ -24,13 +24,6 @@ export default function EntryCardRolesDialog({ entry, open, setOpen }: EntryCard
       <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm' TransitionComponent={Transition}>
         <DialogTitle>Roles</DialogTitle>
         <EntryRoleList entry={entry} />
-        {/* <Grid container spacing={2}>
-          {entry.collaborators.map((entryentry, index) => (
-            <div key={index}>
-              <EntryRoleList entryentry={entryentry}></EntryRoleList>
-            </div>
-          ))}
-        </Grid> */}
       </Dialog>
     </>
   )
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index 74380fc00..dd876b4bd 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,4 +1,4 @@
-import { Chip, Grid } from '@mui/material'
+import { Chip, Grid, Typography } from '@mui/material'
 import { EntryInterface } from 'types/types'
 
 type EntryCardRoleDialogProps = {
@@ -8,16 +8,22 @@ type EntryCardRoleDialogProps = {
 export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
   return (
     <>
-      <Grid container spacing={2}>
+      <Grid container spacing={2} paddingX={5} paddingBottom={2}>
         {entry.collaborators.map((user, index) => (
-          <div key={index}>
+          <>
             <Grid key={index} item xs={6}>
-              <Chip label={user.entity} />
+              <Typography variant='h5' fontStyle={'bold'} borderRadius={2}>
+                {user.entity}
+              </Typography>
             </Grid>
             <Grid key={index} item xs={6}>
-              <Chip label={user.roles} />
+              {user.roles.map((role) => (
+                <>
+                  <Chip style={{ margin: 1 }} label={role} />
+                </>
+              ))}
             </Grid>
-          </div>
+          </>
         ))}
       </Grid>
     </>

From dba9f7271366bc285b5a3516b8a012cbfe799444 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:16:45 +0000
Subject: [PATCH 03/12] Cleaned up role list and displayed when a collaborator
 has no roles applied.

---
 .../entry/overview/EntryCardRolesDialog.tsx   |  8 ---
 frontend/src/entry/overview/EntryRoleList.tsx | 55 ++++++++++++++-----
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/frontend/src/entry/overview/EntryCardRolesDialog.tsx b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
index 1fd8ecae5..e7fbc15b2 100644
--- a/frontend/src/entry/overview/EntryCardRolesDialog.tsx
+++ b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
@@ -11,14 +11,6 @@ type EntryCardRoleDialogProps = {
 }
 
 export default function EntryCardRolesDialog({ entry, open, setOpen }: EntryCardRoleDialogProps) {
-  // const theme = useTheme()
-  // const { isModelError: isEntryError, mutateModel: mutateEntry } = useGetModel(entry.id, entry.kind)
-  // const {
-  //   modelRoles: entryRoles,
-  //   isModelRolesLoading: isEntryRolesLoading,
-  //   isModelRolesError: isEntryRolesError,
-  // } = useGetModelRoles(entry.id)
-
   return (
     <>
       <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm' TransitionComponent={Transition}>
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index dd876b4bd..126d9b689 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,5 +1,9 @@
-import { Chip, Grid, Typography } from '@mui/material'
-import { EntryInterface } from 'types/types'
+import GroupIcon from '@mui/icons-material/Groups'
+import UserIcon from '@mui/icons-material/Person'
+import { Chip, Grid, Stack, Typography } from '@mui/material'
+import { Fragment, useMemo } from 'react'
+import UserDisplay from 'src/common/UserDisplay'
+import { CollaboratorEntry, EntryInterface } from 'types/types'
 
 type EntryCardRoleDialogProps = {
   entry: EntryInterface
@@ -9,23 +13,44 @@ export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
   return (
     <>
       <Grid container spacing={2} paddingX={5} paddingBottom={2}>
-        {entry.collaborators.map((user, index) => (
-          <>
-            <Grid key={index} item xs={6}>
-              <Typography variant='h5' fontStyle={'bold'} borderRadius={2}>
-                {user.entity}
-              </Typography>
+        {entry.collaborators.map((user) => (
+          <Fragment key={user.entity}>
+            <Grid item xs={6}>
+              <Stack direction='row' alignItems='center' spacing={1}>
+                <EntryCollaboratorIcon entity={user} />
+                <EntryCollaboratorName entity={user} />
+              </Stack>
             </Grid>
-            <Grid key={index} item xs={6}>
-              {user.roles.map((role) => (
-                <>
-                  <Chip style={{ margin: 1 }} label={role} />
-                </>
-              ))}
+            <Grid item xs={6}>
+              {user.roles.length === 0 ? (
+                <Typography>NO ROLES</Typography>
+              ) : (
+                user.roles.map((role) => {
+                  return <Chip key={role} style={{ margin: 1 }} label={role} />
+                })
+              )}
             </Grid>
-          </>
+          </Fragment>
         ))}
       </Grid>
     </>
   )
 }
+
+type EntryCollaboratorProps = {
+  entity: CollaboratorEntry
+}
+
+function EntryCollaboratorIcon({ entity }: EntryCollaboratorProps) {
+  const isUser = useMemo(() => entity.entity.startsWith('user:'), [entity])
+  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
+}
+
+function EntryCollaboratorName({ entity }: EntryCollaboratorProps) {
+  const entityName = useMemo(() => entity.entity.split('/').pop()!, [entity])
+  return (
+    <>
+      <UserDisplay dn={entityName} />
+    </>
+  )
+}

From 43ad24a4125c454b152f0d35bb0c6cde77c4a3a9 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Tue, 6 Aug 2024 10:41:04 +0000
Subject: [PATCH 04/12] Compartmentalised component functionality into new,
 relevant files

---
 .../entry/overview/EntryCardEntityRoleRow.tsx | 45 ++++++++++++++++
 .../entry/overview/EntryCardRolesChipSet.tsx  | 16 ++++++
 frontend/src/entry/overview/EntryRoleList.tsx | 53 ++++---------------
 3 files changed, 71 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
 create mode 100644 frontend/src/entry/overview/EntryCardRolesChipSet.tsx

diff --git a/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx b/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
new file mode 100644
index 000000000..68e52d9c3
--- /dev/null
+++ b/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
@@ -0,0 +1,45 @@
+import GroupIcon from '@mui/icons-material/Groups'
+import UserIcon from '@mui/icons-material/Person'
+import { Grid, Stack } from '@mui/material'
+import { Fragment, useMemo } from 'react'
+import UserDisplay from 'src/common/UserDisplay'
+import EntryCardRolesChipSet from 'src/entry/overview/EntryCardRolesChipSet'
+import { CollaboratorEntry } from 'types/types'
+
+type EntryCardEntityRoleRowProps = {
+  entryCollaborators: CollaboratorEntry[]
+}
+
+export default function EntryCardEntityRoleRow({ entryCollaborators }: EntryCardEntityRoleRowProps) {
+  return entryCollaborators.map((user) => (
+    <Fragment key={user.entity}>
+      <Grid item xs={6}>
+        <Stack direction='row' alignItems='center' spacing={1}>
+          <EntryCollaboratorIcon entity={user} />
+          <EntryCollaboratorName entity={user} />
+        </Stack>
+      </Grid>
+      <Grid item xs={6}>
+        <EntryCardRolesChipSet entryCollaborator={user} />
+      </Grid>
+    </Fragment>
+  ))
+}
+
+type EntryCollaboratorProps = {
+  entity: CollaboratorEntry
+}
+
+function EntryCollaboratorIcon({ entity }: EntryCollaboratorProps) {
+  const isUser = useMemo(() => entity.entity.startsWith('user:'), [entity])
+  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
+}
+
+function EntryCollaboratorName({ entity }: EntryCollaboratorProps) {
+  const entityName = useMemo(() => entity.entity.split('/').pop()!, [entity])
+  return (
+    <>
+      <UserDisplay dn={entityName} />
+    </>
+  )
+}
diff --git a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
new file mode 100644
index 000000000..39ecb7ecb
--- /dev/null
+++ b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
@@ -0,0 +1,16 @@
+import { Chip } from '@mui/material'
+import { CollaboratorEntry } from 'types/types'
+
+type EntryCardChipSetProps = {
+  entryCollaborator: CollaboratorEntry
+}
+
+export default function EntryCardRolesChipSet({ entryCollaborator }: EntryCardChipSetProps) {
+  return entryCollaborator.roles.length === 0 ? (
+    <Chip style={{ marginRight: 2, marginBottom: 2, color: 'red', fontWeight: 'bold' }} label='no roles' />
+  ) : (
+    entryCollaborator.roles.map((role) => {
+      return <Chip key={role} style={{ marginRight: 2, marginBottom: 2 }} label={role} />
+    })
+  )
+}
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index 126d9b689..dc3c15402 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,9 +1,6 @@
-import GroupIcon from '@mui/icons-material/Groups'
-import UserIcon from '@mui/icons-material/Person'
-import { Chip, Grid, Stack, Typography } from '@mui/material'
-import { Fragment, useMemo } from 'react'
-import UserDisplay from 'src/common/UserDisplay'
-import { CollaboratorEntry, EntryInterface } from 'types/types'
+import { Grid } from '@mui/material'
+import EntryCardEntityRoleRowProps from 'src/entry/overview/EntryCardEntityRoleRow'
+import { EntryInterface } from 'types/types'
 
 type EntryCardRoleDialogProps = {
   entry: EntryInterface
@@ -13,44 +10,14 @@ export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
   return (
     <>
       <Grid container spacing={2} paddingX={5} paddingBottom={2}>
-        {entry.collaborators.map((user) => (
-          <Fragment key={user.entity}>
-            <Grid item xs={6}>
-              <Stack direction='row' alignItems='center' spacing={1}>
-                <EntryCollaboratorIcon entity={user} />
-                <EntryCollaboratorName entity={user} />
-              </Stack>
-            </Grid>
-            <Grid item xs={6}>
-              {user.roles.length === 0 ? (
-                <Typography>NO ROLES</Typography>
-              ) : (
-                user.roles.map((role) => {
-                  return <Chip key={role} style={{ margin: 1 }} label={role} />
-                })
-              )}
-            </Grid>
-          </Fragment>
-        ))}
+        <Grid item xs={6}>
+          Entity
+        </Grid>
+        <Grid item xs={6}>
+          Roles
+        </Grid>
+        <EntryCardEntityRoleRowProps entryCollaborators={entry.collaborators} />
       </Grid>
     </>
   )
 }
-
-type EntryCollaboratorProps = {
-  entity: CollaboratorEntry
-}
-
-function EntryCollaboratorIcon({ entity }: EntryCollaboratorProps) {
-  const isUser = useMemo(() => entity.entity.startsWith('user:'), [entity])
-  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
-}
-
-function EntryCollaboratorName({ entity }: EntryCollaboratorProps) {
-  const entityName = useMemo(() => entity.entity.split('/').pop()!, [entity])
-  return (
-    <>
-      <UserDisplay dn={entityName} />
-    </>
-  )
-}

From 631969e9169a25355802d9cd993bc8440e346b7b Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Tue, 6 Aug 2024 10:44:11 +0000
Subject: [PATCH 05/12] Changed incorrect component name

---
 frontend/src/entry/overview/EntryRoleList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index dc3c15402..c09fb5254 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,5 +1,5 @@
 import { Grid } from '@mui/material'
-import EntryCardEntityRoleRowProps from 'src/entry/overview/EntryCardEntityRoleRow'
+import EntryCardEntityRoleRow from 'src/entry/overview/EntryCardEntityRoleRow'
 import { EntryInterface } from 'types/types'
 
 type EntryCardRoleDialogProps = {
@@ -16,7 +16,7 @@ export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
         <Grid item xs={6}>
           Roles
         </Grid>
-        <EntryCardEntityRoleRowProps entryCollaborators={entry.collaborators} />
+        <EntryCardEntityRoleRow entryCollaborators={entry.collaborators} />
       </Grid>
     </>
   )

From cdaca9b4621ab264ba077011ea49791ca643a18e Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Tue, 6 Aug 2024 13:38:49 +0000
Subject: [PATCH 06/12] Added custom chip for when an entity has no roles on a
 model

---
 frontend/src/entry/overview/EntryCardRolesChipSet.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
index 39ecb7ecb..36ae4c9b3 100644
--- a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
+++ b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
@@ -1,3 +1,4 @@
+import Dangerous from '@mui/icons-material/DangerousOutlined'
 import { Chip } from '@mui/material'
 import { CollaboratorEntry } from 'types/types'
 
@@ -7,10 +8,15 @@ type EntryCardChipSetProps = {
 
 export default function EntryCardRolesChipSet({ entryCollaborator }: EntryCardChipSetProps) {
   return entryCollaborator.roles.length === 0 ? (
-    <Chip style={{ marginRight: 2, marginBottom: 2, color: 'red', fontWeight: 'bold' }} label='no roles' />
+    <Chip
+      variant='outlined'
+      style={{ marginRight: 2, marginBottom: 2, backgroundColor: '#B00020', color: 'white', alignContent: 'center' }}
+      icon={<Dangerous style={{ color: 'white' }} />}
+      label='No Roles'
+    />
   ) : (
     entryCollaborator.roles.map((role) => {
-      return <Chip key={role} style={{ marginRight: 2, marginBottom: 2 }} label={role} />
+      return <Chip key={role} variant='outlined' style={{ marginRight: 2, marginBottom: 2 }} label={role} />
     })
   )
 }

From f54b8143035e9f2e99fc0742410a1e1384979cfb Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:18:59 +0000
Subject: [PATCH 07/12] Simplified permission logic for accessing settings tab
 when you're not owner

---
 frontend/pages/data-card/[dataCardId].tsx     | 15 +++-
 frontend/pages/model/[modelId].tsx            | 15 +++-
 frontend/src/entry/EntryDescriptionInput.tsx  | 41 +++-------
 frontend/src/entry/EntryNameInput.tsx         | 47 +++--------
 .../mirroredModels/ExportModelAgreement.tsx   | 28 +++----
 .../model/mirroredModels/ExportSettings.tsx   | 57 +++++--------
 .../model/settings/AccessRequestSettings.tsx  | 50 +++++-------
 .../entry/model/settings/TemplateSettings.tsx | 50 +++++-------
 frontend/src/entry/settings/DangerZone.tsx    | 24 ++----
 frontend/src/entry/settings/EntityItem.tsx    | 78 ++++++------------
 .../src/entry/settings/EntryAccessInput.tsx   | 80 +++++++------------
 .../src/entry/settings/EntryAccessTab.tsx     | 24 ++----
 frontend/src/entry/settings/EntryDetails.tsx  | 71 ++++++----------
 frontend/src/entry/settings/Settings.tsx      | 39 ++++-----
 14 files changed, 219 insertions(+), 400 deletions(-)

diff --git a/frontend/pages/data-card/[dataCardId].tsx b/frontend/pages/data-card/[dataCardId].tsx
index dec8d4a67..ba0d79d38 100644
--- a/frontend/pages/data-card/[dataCardId].tsx
+++ b/frontend/pages/data-card/[dataCardId].tsx
@@ -3,13 +3,13 @@ import { useGetCurrentUser } from 'actions/user'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import Loading from 'src/common/Loading'
-import PageWithTabs from 'src/common/PageWithTabs'
+import PageWithTabs, { PageTab } from 'src/common/PageWithTabs'
 import Title from 'src/common/Title'
 import Overview from 'src/entry/overview/Overview'
 import Settings from 'src/entry/settings/Settings'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import { EntryKind } from 'types/types'
-import { getCurrentUserRoles } from 'utils/roles'
+import { getCurrentUserRoles, getRequiredRolesText, hasRole } from 'utils/roles'
 
 export default function DataCard() {
   const router = useRouter()
@@ -23,7 +23,12 @@ export default function DataCard() {
 
   const currentUserRoles = useMemo(() => getCurrentUserRoles(dataCard, currentUser), [dataCard, currentUser])
 
-  const tabs = useMemo(
+  const [isReadOnly, requiredRolesText] = useMemo(() => {
+    const validRoles = ['owner']
+    return [!hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
+  }, [currentUserRoles])
+
+  const tabs: PageTab[] = useMemo(
     () =>
       dataCard
         ? [
@@ -35,11 +40,13 @@ export default function DataCard() {
             {
               title: 'Settings',
               path: 'settings',
+              disabled: isReadOnly,
+              disabledText: requiredRolesText,
               view: <Settings entry={dataCard} currentUserRoles={currentUserRoles} />,
             },
           ]
         : [],
-    [currentUserRoles, dataCard],
+    [currentUserRoles, dataCard, isReadOnly, requiredRolesText],
   )
 
   const error = MultipleErrorWrapper(`Unable to load data card page`, {
diff --git a/frontend/pages/model/[modelId].tsx b/frontend/pages/model/[modelId].tsx
index 7e5411de7..61e7414cd 100644
--- a/frontend/pages/model/[modelId].tsx
+++ b/frontend/pages/model/[modelId].tsx
@@ -4,7 +4,7 @@ import { useGetCurrentUser } from 'actions/user'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import Loading from 'src/common/Loading'
-import PageWithTabs from 'src/common/PageWithTabs'
+import PageWithTabs, { PageTab } from 'src/common/PageWithTabs'
 import Title from 'src/common/Title'
 import AccessRequests from 'src/entry/model/AccessRequests'
 import InferenceServices from 'src/entry/model/InferenceServices'
@@ -14,7 +14,7 @@ import Overview from 'src/entry/overview/Overview'
 import Settings from 'src/entry/settings/Settings'
 import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import { EntryKind } from 'types/types'
-import { getCurrentUserRoles } from 'utils/roles'
+import { getCurrentUserRoles, getRequiredRolesText, hasRole } from 'utils/roles'
 
 export default function Model() {
   const router = useRouter()
@@ -25,7 +25,12 @@ export default function Model() {
 
   const currentUserRoles = useMemo(() => getCurrentUserRoles(model, currentUser), [model, currentUser])
 
-  const tabs = useMemo(
+  const [isReadOnly, requiredRolesText] = useMemo(() => {
+    const validRoles = ['owner']
+    return [!hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
+  }, [currentUserRoles])
+
+  const tabs: PageTab[] = useMemo(
     () =>
       model && uiConfig
         ? [
@@ -81,11 +86,13 @@ export default function Model() {
             {
               title: 'Settings',
               path: 'settings',
+              disabled: isReadOnly,
+              disabledText: requiredRolesText,
               view: <Settings entry={model} currentUserRoles={currentUserRoles} />,
             },
           ]
         : [],
-    [model, uiConfig, currentUserRoles],
+    [model, uiConfig, currentUserRoles, isReadOnly, requiredRolesText],
   )
 
   function requestAccess() {
diff --git a/frontend/src/entry/EntryDescriptionInput.tsx b/frontend/src/entry/EntryDescriptionInput.tsx
index 027578c9c..a6edab017 100644
--- a/frontend/src/entry/EntryDescriptionInput.tsx
+++ b/frontend/src/entry/EntryDescriptionInput.tsx
@@ -1,4 +1,4 @@
-import { TextField, Tooltip } from '@mui/material'
+import { TextField } from '@mui/material'
 import { ChangeEvent } from 'react'
 import LabelledInput from 'src/common/LabelledInput'
 
@@ -7,42 +7,23 @@ const htmlId = 'entry-description-input'
 type EntryDescriptionInputProps = {
   value: string
   onChange: (value: string) => void
-} & (
-  | {
-      isReadOnly: boolean
-      requiredRolesText: string
-    }
-  | {
-      isReadOnly?: never
-      requiredRolesText?: never
-    }
-)
+}
 
-export default function EntryDescriptionInput({
-  value,
-  onChange,
-  isReadOnly = false,
-  requiredRolesText = '',
-}: EntryDescriptionInputProps) {
+export default function EntryDescriptionInput({ value, onChange }: EntryDescriptionInputProps) {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value)
   }
 
   return (
     <LabelledInput fullWidth required label='Description' htmlFor={htmlId}>
-      <Tooltip title={requiredRolesText}>
-        <span>
-          <TextField
-            fullWidth
-            id={htmlId}
-            value={value}
-            size='small'
-            disabled={isReadOnly}
-            onChange={handleChange}
-            data-test='entryDescriptionInput'
-          />
-        </span>
-      </Tooltip>
+      <TextField
+        fullWidth
+        id={htmlId}
+        value={value}
+        size='small'
+        onChange={handleChange}
+        data-test='entryDescriptionInput'
+      />
     </LabelledInput>
   )
 }
diff --git a/frontend/src/entry/EntryNameInput.tsx b/frontend/src/entry/EntryNameInput.tsx
index 7ab873b60..79b4f2cb2 100644
--- a/frontend/src/entry/EntryNameInput.tsx
+++ b/frontend/src/entry/EntryNameInput.tsx
@@ -1,4 +1,4 @@
-import { TextField, Tooltip } from '@mui/material'
+import { TextField } from '@mui/material'
 import { ChangeEvent } from 'react'
 import LabelledInput from 'src/common/LabelledInput'
 import { EntryKindKeys } from 'types/types'
@@ -11,46 +11,25 @@ type EntryNameInputProps = {
   kind: EntryKindKeys
   onChange: (value: string) => void
   autoFocus?: boolean
-} & (
-  | {
-      isReadOnly: boolean
-      requiredRolesText: string
-    }
-  | {
-      isReadOnly?: never
-      requiredRolesText?: never
-    }
-)
+}
 
-export default function EntryNameInput({
-  value,
-  kind,
-  onChange,
-  autoFocus = false,
-  isReadOnly = false,
-  requiredRolesText = '',
-}: EntryNameInputProps) {
+export default function EntryNameInput({ value, kind, onChange, autoFocus = false }: EntryNameInputProps) {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange(event.target.value)
   }
 
   return (
     <LabelledInput fullWidth required label={`${toTitleCase(kind)} Name`} htmlFor={htmlId}>
-      <Tooltip title={requiredRolesText}>
-        <span>
-          <TextField
-            required
-            fullWidth
-            disabled={isReadOnly}
-            autoFocus={autoFocus}
-            value={value}
-            size='small'
-            id={htmlId}
-            onChange={handleChange}
-            data-test='entryNameInput'
-          />
-        </span>
-      </Tooltip>
+      <TextField
+        required
+        fullWidth
+        autoFocus={autoFocus}
+        value={value}
+        size='small'
+        id={htmlId}
+        onChange={handleChange}
+        data-test='entryNameInput'
+      />
     </LabelledInput>
   )
 }
diff --git a/frontend/src/entry/model/mirroredModels/ExportModelAgreement.tsx b/frontend/src/entry/model/mirroredModels/ExportModelAgreement.tsx
index 112bd73e9..d5277012a 100644
--- a/frontend/src/entry/model/mirroredModels/ExportModelAgreement.tsx
+++ b/frontend/src/entry/model/mirroredModels/ExportModelAgreement.tsx
@@ -1,5 +1,5 @@
 import { LoadingButton } from '@mui/lab'
-import { Box, Card, Checkbox, Container, FormControlLabel, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, Card, Checkbox, Container, FormControlLabel, Stack, Typography } from '@mui/material'
 import { postModelExportToS3 } from 'actions/model'
 import { ChangeEvent, FormEvent, useState } from 'react'
 import ModelExportAgreementText from 'src/entry/model/mirroredModels/ModelExportAgreementText'
@@ -7,13 +7,11 @@ import useNotification from 'src/hooks/useNotification'
 import MessageAlert from 'src/MessageAlert'
 import { getErrorMessage } from 'utils/fetcher'
 
-type ExportModelProps = {
+type ExportModelAgreementProps = {
   modelId: string
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function ExportModel({ modelId, isReadOnly, requiredRolesText }: ExportModelProps) {
+export default function ExportModelAgreement({ modelId }: ExportModelAgreementProps) {
   const [checked, setChecked] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
   const [loading, setLoading] = useState(false)
@@ -55,19 +53,13 @@ export default function ExportModel({ modelId, isReadOnly, requiredRolesText }:
         <Box component='form' onSubmit={handleSubmit}>
           <Stack spacing={2} alignItems='start' justifyContent='start'>
             <ModelExportAgreementText />
-            <Tooltip title={requiredRolesText}>
-              <FormControlLabel
-                control={<Checkbox checked={checked} disabled={isReadOnly} onChange={handleChecked} />}
-                label='I agree to the terms and conditions of this model export agreement'
-              />
-            </Tooltip>
-            <Tooltip title={requiredRolesText}>
-              <span>
-                <LoadingButton variant='contained' loading={loading} disabled={!checked} type='submit'>
-                  Submit
-                </LoadingButton>
-              </span>
-            </Tooltip>
+            <FormControlLabel
+              control={<Checkbox checked={checked} onChange={handleChecked} />}
+              label='I agree to the terms and conditions of this model export agreement'
+            />
+            <LoadingButton variant='contained' loading={loading} disabled={!checked} type='submit'>
+              Submit
+            </LoadingButton>
             <MessageAlert message={errorMessage} severity='error' />
           </Stack>
         </Box>
diff --git a/frontend/src/entry/model/mirroredModels/ExportSettings.tsx b/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
index 8e27098d0..62f2839fc 100644
--- a/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
+++ b/frontend/src/entry/model/mirroredModels/ExportSettings.tsx
@@ -1,15 +1,6 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { LoadingButton } from '@mui/lab'
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography,
-} from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, Box, Stack, TextField, Typography } from '@mui/material'
 import { patchModel } from 'actions/model'
 import { ChangeEvent, FormEvent, useState } from 'react'
 import LabelledInput from 'src/common/LabelledInput'
@@ -21,11 +12,9 @@ import { getErrorMessage } from 'utils/fetcher'
 
 type ExportSettingsProps = {
   model: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function ExportSettings({ model, isReadOnly, requiredRolesText }: ExportSettingsProps) {
+export default function ExportSettings({ model }: ExportSettingsProps) {
   const sendNotification = useNotification()
   const [destinationModelId, setDestinationModelId] = useState(model.settings.mirror?.destinationModelId || '')
   const [loading, setLoading] = useState(false)
@@ -66,7 +55,7 @@ export default function ExportSettings({ model, isReadOnly, requiredRolesText }:
 
   return (
     <>
-      <ExportModelAgreement modelId={model.id} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
+      <ExportModelAgreement modelId={model.id} />
       <Accordion sx={{ borderTop: 'none' }}>
         <AccordionSummary sx={{ pl: 0 }} expandIcon={<ExpandMoreIcon />}>
           <Typography component='h3' variant='h6'>
@@ -77,17 +66,12 @@ export default function ExportSettings({ model, isReadOnly, requiredRolesText }:
           <Box component='form' onSubmit={handleSave}>
             <Stack spacing={2} alignItems='flex-start'>
               <LabelledInput label={'Destination Model ID'} htmlFor={'destination-model-id'} required>
-                <Tooltip title={requiredRolesText}>
-                  <span>
-                    <TextField
-                      id='destination-model-id'
-                      value={destinationModelId}
-                      disabled={isReadOnly}
-                      onChange={handleDestinationModelId}
-                      size='small'
-                    />
-                  </span>
-                </Tooltip>
+                <TextField
+                  id='destination-model-id'
+                  value={destinationModelId}
+                  onChange={handleDestinationModelId}
+                  size='small'
+                />
               </LabelledInput>
               {/*TODO - Add the ability to filter releases needed for export (This functionality is not available on the backend)
               <ReleaseSelector
@@ -98,20 +82,15 @@ export default function ExportSettings({ model, isReadOnly, requiredRolesText }:
                 requiredRolesText={requiredRolesText}
               />
                */}
-              <Tooltip title={requiredRolesText}>
-                <span>
-                  <LoadingButton
-                    sx={{ width: 'fit-content' }}
-                    variant='contained'
-                    data-test='createAccessRequestButton'
-                    loading={loading}
-                    disabled={isReadOnly}
-                    type='submit'
-                  >
-                    Save
-                  </LoadingButton>
-                </span>
-              </Tooltip>
+              <LoadingButton
+                sx={{ width: 'fit-content' }}
+                variant='contained'
+                data-test='createAccessRequestButton'
+                loading={loading}
+                type='submit'
+              >
+                Save
+              </LoadingButton>
               <MessageAlert message={errorMessage} severity='error' />
             </Stack>
           </Box>
diff --git a/frontend/src/entry/model/settings/AccessRequestSettings.tsx b/frontend/src/entry/model/settings/AccessRequestSettings.tsx
index 2d4550f7f..32aff58c4 100644
--- a/frontend/src/entry/model/settings/AccessRequestSettings.tsx
+++ b/frontend/src/entry/model/settings/AccessRequestSettings.tsx
@@ -1,5 +1,5 @@
 import { LoadingButton } from '@mui/lab'
-import { Checkbox, Divider, FormControlLabel, Stack, Tooltip, Typography } from '@mui/material'
+import { Checkbox, Divider, FormControlLabel, Stack, Typography } from '@mui/material'
 import { patchModel } from 'actions/model'
 import { useState } from 'react'
 import useNotification from 'src/hooks/useNotification'
@@ -9,11 +9,9 @@ import { getErrorMessage } from 'utils/fetcher'
 
 type AccessRequestSettingsProps = {
   model: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function AccessRequestSettings({ model, isReadOnly, requiredRolesText }: AccessRequestSettingsProps) {
+export default function AccessRequestSettings({ model }: AccessRequestSettingsProps) {
   const [allowUngoverned, setAllowUngoverned] = useState(model.settings.ungovernedAccess)
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
@@ -49,35 +47,27 @@ export default function AccessRequestSettings({ model, isReadOnly, requiredRoles
         Manage access requests
       </Typography>
       <div>
-        <Tooltip title={requiredRolesText}>
-          <FormControlLabel
-            label='Allow users to make ungoverned access requests'
-            control={
-              <Checkbox
-                onChange={(event) => setAllowUngoverned(event.target.checked)}
-                checked={allowUngoverned}
-                disabled={isReadOnly}
-                size='small'
-              />
-            }
-          />
-        </Tooltip>
+        <FormControlLabel
+          label='Allow users to make ungoverned access requests'
+          control={
+            <Checkbox
+              onChange={(event) => setAllowUngoverned(event.target.checked)}
+              checked={allowUngoverned}
+              size='small'
+            />
+          }
+        />
       </div>
       <Divider />
       <div>
-        <Tooltip title={requiredRolesText}>
-          <span>
-            <LoadingButton
-              variant='contained'
-              aria-label='Save ungoverned access requests'
-              disabled={isReadOnly}
-              onClick={handleSave}
-              loading={loading}
-            >
-              Save
-            </LoadingButton>
-          </span>
-        </Tooltip>
+        <LoadingButton
+          variant='contained'
+          aria-label='Save ungoverned access requests'
+          onClick={handleSave}
+          loading={loading}
+        >
+          Save
+        </LoadingButton>
         <MessageAlert message={errorMessage} severity='error' />
       </div>
     </Stack>
diff --git a/frontend/src/entry/model/settings/TemplateSettings.tsx b/frontend/src/entry/model/settings/TemplateSettings.tsx
index 851ec634e..6a35b5f3c 100644
--- a/frontend/src/entry/model/settings/TemplateSettings.tsx
+++ b/frontend/src/entry/model/settings/TemplateSettings.tsx
@@ -1,5 +1,5 @@
 import { LoadingButton } from '@mui/lab'
-import { Checkbox, Divider, FormControlLabel, Stack, Tooltip, Typography } from '@mui/material'
+import { Checkbox, Divider, FormControlLabel, Stack, Typography } from '@mui/material'
 import { patchModel } from 'actions/model'
 import { useState } from 'react'
 import useNotification from 'src/hooks/useNotification'
@@ -9,11 +9,9 @@ import { getErrorMessage } from 'utils/fetcher'
 
 type TemplateSettingsProps = {
   model: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function TemplateSettings({ model, isReadOnly, requiredRolesText }: TemplateSettingsProps) {
+export default function TemplateSettings({ model }: TemplateSettingsProps) {
   const [allowTemplating, setAllowTemplating] = useState(model.settings.allowTemplating)
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
@@ -48,35 +46,27 @@ export default function TemplateSettings({ model, isReadOnly, requiredRolesText
         Manage Templating
       </Typography>
       <div>
-        <Tooltip title={requiredRolesText}>
-          <FormControlLabel
-            label='Allow users to make a template'
-            control={
-              <Checkbox
-                onChange={(event) => setAllowTemplating(event.target.checked)}
-                checked={allowTemplating}
-                disabled={isReadOnly}
-                size='small'
-              />
-            }
-          />
-        </Tooltip>
+        <FormControlLabel
+          label='Allow users to make a template'
+          control={
+            <Checkbox
+              onChange={(event) => setAllowTemplating(event.target.checked)}
+              checked={allowTemplating}
+              size='small'
+            />
+          }
+        />
       </div>
       <Divider />
       <div>
-        <Tooltip title={requiredRolesText}>
-          <span>
-            <LoadingButton
-              variant='contained'
-              aria-label='Save model template settings'
-              disabled={isReadOnly}
-              onClick={handleSave}
-              loading={loading}
-            >
-              Save
-            </LoadingButton>
-          </span>
-        </Tooltip>
+        <LoadingButton
+          variant='contained'
+          aria-label='Save model template settings'
+          onClick={handleSave}
+          loading={loading}
+        >
+          Save
+        </LoadingButton>
         <MessageAlert message={errorMessage} severity='error' />
       </div>
     </Stack>
diff --git a/frontend/src/entry/settings/DangerZone.tsx b/frontend/src/entry/settings/DangerZone.tsx
index d68595c0f..908538c48 100644
--- a/frontend/src/entry/settings/DangerZone.tsx
+++ b/frontend/src/entry/settings/DangerZone.tsx
@@ -1,16 +1,14 @@
 import { LoadingButton } from '@mui/lab'
-import { Stack, Tooltip, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import { useState } from 'react'
 import { EntryInterface } from 'types/types'
 import { toTitleCase } from 'utils/stringUtils'
 
 type DangerZoneProps = {
   entry: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function DangerZone({ entry, isReadOnly, requiredRolesText }: DangerZoneProps) {
+export default function DangerZone({ entry }: DangerZoneProps) {
   const [loading, setLoading] = useState(false)
 
   const handleDeleteEntry = () => {
@@ -24,20 +22,10 @@ export default function DangerZone({ entry, isReadOnly, requiredRolesText }: Dan
       <Typography variant='h6' component='h2'>
         Danger Zone!
       </Typography>
-      <Tooltip title={requiredRolesText}>
-        <span>
-          {/* TODO - Set disabled to disabled={isReadOnly} when re-enabling delete functionality */}
-          <LoadingButton
-            fullWidth
-            variant='contained'
-            disabled={true || isReadOnly}
-            onClick={handleDeleteEntry}
-            loading={loading}
-          >
-            {`Delete ${toTitleCase(entry.kind)}`}
-          </LoadingButton>
-        </span>
-      </Tooltip>
+      {/* TODO - Remove disabled prop when reenabling delete functionality */}
+      <LoadingButton fullWidth variant='contained' disabled onClick={handleDeleteEntry} loading={loading}>
+        {`Delete ${toTitleCase(entry.kind)}`}
+      </LoadingButton>
     </Stack>
   )
 }
diff --git a/frontend/src/entry/settings/EntityItem.tsx b/frontend/src/entry/settings/EntityItem.tsx
index c698e6620..c82d5055c 100644
--- a/frontend/src/entry/settings/EntityItem.tsx
+++ b/frontend/src/entry/settings/EntityItem.tsx
@@ -1,17 +1,7 @@
 import ClearIcon from '@mui/icons-material/Clear'
 import GroupsIcon from '@mui/icons-material/Groups'
 import PersonIcon from '@mui/icons-material/Person'
-import {
-  Autocomplete,
-  Chip,
-  IconButton,
-  Stack,
-  TableCell,
-  TableRow,
-  TextField,
-  Tooltip,
-  Typography,
-} from '@mui/material'
+import { Autocomplete, Chip, IconButton, Stack, TableCell, TableRow, TextField, Typography } from '@mui/material'
 import _ from 'lodash-es'
 import { SyntheticEvent, useMemo } from 'react'
 import UserDisplay from 'src/common/UserDisplay'
@@ -24,19 +14,9 @@ type EntityItemProps = {
   onAccessListChange: (value: CollaboratorEntry[]) => void
   entryKind: string
   entryRoles: Role[]
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function EntityItem({
-  entity,
-  accessList,
-  onAccessListChange,
-  entryKind,
-  entryRoles,
-  isReadOnly,
-  requiredRolesText,
-}: EntityItemProps) {
+export default function EntityItem({ entity, accessList, onAccessListChange, entryKind, entryRoles }: EntityItemProps) {
   const entryRoleOptions = useMemo(() => entryRoles.map((role) => role.id), [entryRoles])
 
   function onRoleChange(_event: SyntheticEvent<Element, Event>, newValues: string[]) {
@@ -67,40 +47,32 @@ export default function EntityItem({
       </TableCell>
       <TableCell>
         {entryRoles.length > 0 && (
-          <Tooltip title={requiredRolesText}>
-            <Autocomplete
-              multiple
-              disabled={isReadOnly}
-              size='small'
-              aria-label={`role selector input for entity ${entity.entity}`}
-              value={entity.roles}
-              data-test='accessListAutocomplete'
-              options={entryRoleOptions}
-              getOptionLabel={(role) => getRole(role).name}
-              onChange={onRoleChange}
-              renderInput={(params) => <TextField {...params} label='Select roles' />}
-              renderTags={(value, getTagProps) =>
-                value.map((option, index) => (
-                  <Chip label={getRole(option).name} {...getTagProps({ index })} key={option} />
-                ))
-              }
-            />
-          </Tooltip>
+          <Autocomplete
+            multiple
+            size='small'
+            aria-label={`role selector input for entity ${entity.entity}`}
+            value={entity.roles}
+            data-test='accessListAutocomplete'
+            options={entryRoleOptions}
+            getOptionLabel={(role) => getRole(role).name}
+            onChange={onRoleChange}
+            renderInput={(params) => <TextField {...params} label='Select roles' />}
+            renderTags={(value, getTagProps) =>
+              value.map((option, index) => (
+                <Chip label={getRole(option).name} {...getTagProps({ index })} key={option} />
+              ))
+            }
+          />
         )}
       </TableCell>
       <TableCell align='right'>
-        <Tooltip title={isReadOnly ? requiredRolesText : 'Remove user'}>
-          <span>
-            <IconButton
-              aria-label={`Remove user ${entity.entity} from ${toSentenceCase(entryKind)} access list`}
-              disabled={isReadOnly}
-              onClick={removeEntity}
-              data-test='accessListRemoveUser'
-            >
-              <ClearIcon color={isReadOnly ? 'disabled' : 'secondary'} fontSize='inherit' />
-            </IconButton>
-          </span>
-        </Tooltip>
+        <IconButton
+          aria-label={`Remove user ${entity.entity} from ${toSentenceCase(entryKind)} access list`}
+          onClick={removeEntity}
+          data-test='accessListRemoveUser'
+        >
+          <ClearIcon color='secondary' fontSize='inherit' />
+        </IconButton>
       </TableCell>
     </TableRow>
   )
diff --git a/frontend/src/entry/settings/EntryAccessInput.tsx b/frontend/src/entry/settings/EntryAccessInput.tsx
index 292c8c964..1e3c5f412 100644
--- a/frontend/src/entry/settings/EntryAccessInput.tsx
+++ b/frontend/src/entry/settings/EntryAccessInput.tsx
@@ -1,14 +1,4 @@
-import {
-  Autocomplete,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
-  Tooltip,
-} from '@mui/material'
+import { Autocomplete, Stack, Table, TableBody, TableCell, TableHead, TableRow, TextField } from '@mui/material'
 import { useListUsers } from 'actions/user'
 import { debounce } from 'lodash-es'
 import { SyntheticEvent, useCallback, useEffect, useMemo, useState } from 'react'
@@ -33,14 +23,7 @@ type EntryAccessInputProps = {
     }
 )
 
-export default function EntryAccessInput({
-  value,
-  onUpdate,
-  entryKind,
-  entryRoles,
-  isReadOnly = false,
-  requiredRolesText = '',
-}: EntryAccessInputProps) {
+export default function EntryAccessInput({ value, onUpdate, entryKind, entryRoles }: EntryAccessInputProps) {
   const [open, setOpen] = useState(false)
   const [accessList, setAccessList] = useState<CollaboratorEntry[]>(value)
   const [userListQuery, setUserListQuery] = useState('')
@@ -57,11 +40,9 @@ export default function EntryAccessInput({
           onAccessListChange={setAccessList}
           entryRoles={entryRoles}
           entryKind={entryKind}
-          isReadOnly={isReadOnly}
-          requiredRolesText={requiredRolesText}
         />
       )),
-    [accessList, entryKind, entryRoles, isReadOnly, requiredRolesText],
+    [accessList, entryKind, entryRoles],
   )
 
   useEffect(() => {
@@ -106,35 +87,32 @@ export default function EntryAccessInput({
 
   return (
     <Stack spacing={2}>
-      <Tooltip title={requiredRolesText}>
-        <Autocomplete
-          open={open}
-          disabled={isReadOnly}
-          onOpen={() => setOpen(true)}
-          onClose={() => setOpen(false)}
-          size='small'
-          noOptionsText={noOptionsText}
-          onInputChange={debounceOnInputChange}
-          groupBy={(option) => option.kind.toUpperCase()}
-          getOptionLabel={(option) => option.id}
-          isOptionEqualToValue={(option, value) => option.id === value.id}
-          onChange={onUserChange}
-          options={users}
-          filterOptions={(options) =>
-            options.filter(
-              (option) => !accessList.find((collaborator) => collaborator.entity === `${option.kind}:${option.id}`),
-            )
-          }
-          loading={isUsersLoading && userListQuery.length >= 3}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              autoFocus
-              label={`Add a user or group to the ${toSentenceCase(entryKind)} access list`}
-            />
-          )}
-        />
-      </Tooltip>
+      <Autocomplete
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+        size='small'
+        noOptionsText={noOptionsText}
+        onInputChange={debounceOnInputChange}
+        groupBy={(option) => option.kind.toUpperCase()}
+        getOptionLabel={(option) => option.id}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        onChange={onUserChange}
+        options={users}
+        filterOptions={(options) =>
+          options.filter(
+            (option) => !accessList.find((collaborator) => collaborator.entity === `${option.kind}:${option.id}`),
+          )
+        }
+        loading={isUsersLoading && userListQuery.length >= 3}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            autoFocus
+            label={`Add a user or group to the ${toSentenceCase(entryKind)} access list`}
+          />
+        )}
+      />
       <Table>
         <TableHead>
           <TableRow>
diff --git a/frontend/src/entry/settings/EntryAccessTab.tsx b/frontend/src/entry/settings/EntryAccessTab.tsx
index ef782eb04..5b8915c16 100644
--- a/frontend/src/entry/settings/EntryAccessTab.tsx
+++ b/frontend/src/entry/settings/EntryAccessTab.tsx
@@ -1,5 +1,5 @@
 import { LoadingButton } from '@mui/lab'
-import { Stack, Tooltip, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import { patchModel, useGetModel, useGetModelRoles } from 'actions/model'
 import { useState } from 'react'
 import HelpDialog from 'src/common/HelpDialog'
@@ -14,11 +14,9 @@ import { toSentenceCase, toTitleCase } from 'utils/stringUtils'
 
 type EntryAccessTabProps = {
   entry: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function EntryAccessTab({ entry, isReadOnly, requiredRolesText }: EntryAccessTabProps) {
+export default function EntryAccessTab({ entry }: EntryAccessTabProps) {
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
   const [accessList, setAccessList] = useState<CollaboratorEntry[]>(entry.collaborators)
@@ -70,23 +68,11 @@ export default function EntryAccessTab({ entry, isReadOnly, requiredRolesText }:
         onUpdate={(val) => setAccessList(val)}
         entryKind={entry.kind}
         entryRoles={entryRoles}
-        isReadOnly={isReadOnly}
-        requiredRolesText={requiredRolesText}
       />
       <div>
-        <Tooltip title={requiredRolesText}>
-          <span>
-            <LoadingButton
-              variant='contained'
-              aria-label='Save access list'
-              disabled={isReadOnly}
-              onClick={updateAccessList}
-              loading={loading}
-            >
-              Save
-            </LoadingButton>
-          </span>
-        </Tooltip>
+        <LoadingButton variant='contained' aria-label='Save access list' onClick={updateAccessList} loading={loading}>
+          Save
+        </LoadingButton>
       </div>
       <MessageAlert message={errorMessage} severity='error' />
     </Stack>
diff --git a/frontend/src/entry/settings/EntryDetails.tsx b/frontend/src/entry/settings/EntryDetails.tsx
index c458b80b3..9774418a1 100644
--- a/frontend/src/entry/settings/EntryDetails.tsx
+++ b/frontend/src/entry/settings/EntryDetails.tsx
@@ -15,11 +15,9 @@ import { toSentenceCase, toTitleCase } from 'utils/stringUtils'
 
 type EntryDetailsProps = {
   entry: EntryInterface
-  isReadOnly: boolean
-  requiredRolesText: string
 }
 
-export default function EntryDetails({ entry, isReadOnly, requiredRolesText }: EntryDetailsProps) {
+export default function EntryDetails({ entry }: EntryDetailsProps) {
   const [team, setTeam] = useState<TeamInterface | undefined>()
   const [name, setName] = useState(entry.name)
   const [description, setDescription] = useState(entry.description)
@@ -37,13 +35,11 @@ export default function EntryDetails({ entry, isReadOnly, requiredRolesText }: E
   const isFormValid = useMemo(() => team && name && description, [team, name, description])
 
   const saveButtonTooltip = useMemo(() => {
-    if (isReadOnly) {
-      return requiredRolesText
-    } else if (!isFormValid) {
+    if (!isFormValid) {
       return 'Please make sure all required fields are filled out'
     }
     return ''
-  }, [isFormValid, isReadOnly, requiredRolesText])
+  }, [isFormValid])
 
   async function onSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
@@ -111,58 +107,39 @@ export default function EntryDetails({ entry, isReadOnly, requiredRolesText }: E
           </Typography>
           <Stack spacing={2} direction={{ xs: 'column', sm: 'row' }}>
             <TeamSelect value={team} loading={isTeamLoading} onChange={(value) => setTeam(value)} />
-            <EntryNameInput
-              autoFocus
-              value={name}
-              kind={entry.kind}
-              isReadOnly={isReadOnly}
-              requiredRolesText={requiredRolesText}
-              onChange={(value) => setName(value)}
-            />
+            <EntryNameInput autoFocus value={name} kind={entry.kind} onChange={(value) => setName(value)} />
           </Stack>
-          <EntryDescriptionInput
-            value={description}
-            isReadOnly={isReadOnly}
-            requiredRolesText={requiredRolesText}
-            onChange={(value) => setDescription(value)}
-          />
+          <EntryDescriptionInput value={description} onChange={(value) => setDescription(value)} />
         </>
         <Divider />
         <>
           <Typography variant='h6' component='h2'>
             Access control
           </Typography>
-          <Tooltip title={requiredRolesText} placement='bottom-start'>
-            <RadioGroup
-              defaultValue='public'
-              value={visibility}
-              onChange={(e) => setVisibility(e.target.value as UpdateEntryForm['visibility'])}
-            >
-              <FormControlLabel
-                value='public'
-                control={<Radio disabled={isReadOnly} />}
-                label={publicLabel()}
-                data-test='publicButtonSelector'
-              />
-              <FormControlLabel
-                value='private'
-                control={<Radio disabled={isReadOnly} />}
-                label={privateLabel()}
-                data-test='privateButtonSelector'
-              />
-            </RadioGroup>
-          </Tooltip>
+          <RadioGroup
+            defaultValue='public'
+            value={visibility}
+            onChange={(e) => setVisibility(e.target.value as UpdateEntryForm['visibility'])}
+          >
+            <FormControlLabel
+              value='public'
+              control={<Radio />}
+              label={publicLabel()}
+              data-test='publicButtonSelector'
+            />
+            <FormControlLabel
+              value='private'
+              control={<Radio />}
+              label={privateLabel()}
+              data-test='privateButtonSelector'
+            />
+          </RadioGroup>
         </>
         <Divider />
         <div>
           <Tooltip title={saveButtonTooltip}>
             <span>
-              <LoadingButton
-                variant='contained'
-                loading={isLoading}
-                disabled={isReadOnly || !isFormValid}
-                type='submit'
-              >
+              <LoadingButton variant='contained' loading={isLoading} disabled={!isFormValid} type='submit'>
                 Save
               </LoadingButton>
             </span>
diff --git a/frontend/src/entry/settings/Settings.tsx b/frontend/src/entry/settings/Settings.tsx
index 1504acb53..087a4a8cc 100644
--- a/frontend/src/entry/settings/Settings.tsx
+++ b/frontend/src/entry/settings/Settings.tsx
@@ -1,7 +1,7 @@
 import { Container, Divider, List, Stack } from '@mui/material'
 import { useGetUiConfig } from 'actions/uiConfig'
 import { useRouter } from 'next/router'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import Loading from 'src/common/Loading'
 import SimpleListItemButton from 'src/common/SimpleListItemButton'
 import ExportSettings from 'src/entry/model/mirroredModels/ExportSettings'
@@ -12,7 +12,7 @@ import EntryAccessTab from 'src/entry/settings/EntryAccessTab'
 import EntryDetails from 'src/entry/settings/EntryDetails'
 import MessageAlert from 'src/MessageAlert'
 import { EntryInterface, EntryKind, UiConfig } from 'types/types'
-import { getRequiredRolesText, hasRole } from 'utils/roles'
+import { hasRole } from 'utils/roles'
 import { toTitleCase } from 'utils/stringUtils'
 
 export const SettingsCategory = {
@@ -64,10 +64,15 @@ export default function Settings({ entry, currentUserRoles }: SettingsProps) {
 
   const [selectedCategory, setSelectedCategory] = useState<SettingsCategoryKeys>(SettingsCategory.DETAILS)
 
-  const [isReadOnly, requiredRolesText] = useMemo(() => {
+  useEffect(() => {
     const validRoles = ['owner']
-    return [!hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
-  }, [currentUserRoles])
+    if (!hasRole(currentUserRoles, validRoles)) {
+      const { category: _category, ...filteredQuery } = router.query
+      router.replace({
+        query: { ...filteredQuery, tab: 'overview' },
+      })
+    }
+  }, [currentUserRoles, router])
 
   useEffect(() => {
     if (isSettingsCategory(category, entry, uiConfig)) {
@@ -146,24 +151,12 @@ export default function Settings({ entry, currentUserRoles }: SettingsProps) {
         )}
       </List>
       <Container sx={{ my: 2 }}>
-        {selectedCategory === SettingsCategory.DETAILS && (
-          <EntryDetails entry={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
-        {selectedCategory === SettingsCategory.PERMISSIONS && (
-          <EntryAccessTab entry={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
-        {selectedCategory === SettingsCategory.ACCESS_REQUESTS && (
-          <AccessRequestSettings model={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
-        {selectedCategory === SettingsCategory.TEMPLATING && (
-          <TemplateSettings model={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
-        {selectedCategory === SettingsCategory.MIRRORED_MODELS && (
-          <ExportSettings model={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
-        {selectedCategory === SettingsCategory.DANGER && (
-          <DangerZone entry={entry} isReadOnly={isReadOnly} requiredRolesText={requiredRolesText} />
-        )}
+        {selectedCategory === SettingsCategory.DETAILS && <EntryDetails entry={entry} />}
+        {selectedCategory === SettingsCategory.PERMISSIONS && <EntryAccessTab entry={entry} />}
+        {selectedCategory === SettingsCategory.ACCESS_REQUESTS && <AccessRequestSettings model={entry} />}
+        {selectedCategory === SettingsCategory.TEMPLATING && <TemplateSettings model={entry} />}
+        {selectedCategory === SettingsCategory.MIRRORED_MODELS && <ExportSettings model={entry} />}
+        {selectedCategory === SettingsCategory.DANGER && <DangerZone entry={entry} />}
       </Container>
     </Stack>
   )

From dec7df9fce1fc5ab5ebb688688e78aa7fb494f3c Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:12:13 +0000
Subject: [PATCH 08/12] Changes per PR review

---
 frontend/src/entry/EntityIcon.tsx             | 13 ++++
 frontend/src/entry/EntityNameDisplay.tsx      | 20 ++++++
 .../model/settings/AccessRequestSettings.tsx  | 22 +++----
 .../entry/overview/EntryCardEntityRoleRow.tsx | 35 +++--------
 .../entry/overview/EntryCardRolesChipSet.tsx  | 18 ++----
 .../entry/overview/EntryCardRolesDialog.tsx   | 22 -------
 frontend/src/entry/overview/EntryRoleList.tsx | 62 +++++++++++++++----
 .../src/entry/overview/EntryRolesDialog.tsx   | 22 +++++++
 .../entry/overview/ExportEntryCardDialog.tsx  |  3 +-
 frontend/src/entry/overview/FormEditPage.tsx  | 10 +--
 frontend/src/entry/settings/EntityItem.tsx    | 51 +++++----------
 .../src/entry/settings/EntryAccessTab.tsx     |  8 +--
 12 files changed, 154 insertions(+), 132 deletions(-)
 create mode 100644 frontend/src/entry/EntityIcon.tsx
 create mode 100644 frontend/src/entry/EntityNameDisplay.tsx
 delete mode 100644 frontend/src/entry/overview/EntryCardRolesDialog.tsx
 create mode 100644 frontend/src/entry/overview/EntryRolesDialog.tsx

diff --git a/frontend/src/entry/EntityIcon.tsx b/frontend/src/entry/EntityIcon.tsx
new file mode 100644
index 000000000..cc5f6d118
--- /dev/null
+++ b/frontend/src/entry/EntityIcon.tsx
@@ -0,0 +1,13 @@
+import GroupsIcon from '@mui/icons-material/Groups'
+import PersonIcon from '@mui/icons-material/Person'
+import { useMemo } from 'react'
+import { CollaboratorEntry } from 'types/types'
+
+type EntityIconProps = {
+  entryCollaborator: CollaboratorEntry
+}
+
+export default function EntityIcon({ entryCollaborator }: EntityIconProps) {
+  const isUser = useMemo(() => entryCollaborator.entity.startsWith('user:'), [entryCollaborator])
+  return isUser ? <PersonIcon color='primary' /> : <GroupsIcon color='secondary' />
+}
diff --git a/frontend/src/entry/EntityNameDisplay.tsx b/frontend/src/entry/EntityNameDisplay.tsx
new file mode 100644
index 000000000..59c1a462e
--- /dev/null
+++ b/frontend/src/entry/EntityNameDisplay.tsx
@@ -0,0 +1,20 @@
+import { Typography } from '@mui/material'
+import { useMemo } from 'react'
+import UserDisplay from 'src/common/UserDisplay'
+import { CollaboratorEntry, EntityKind } from 'types/types'
+
+type EntityNameDisplayProps = {
+  entryCollaborator: CollaboratorEntry
+}
+
+export default function EntityNameDisplay({ entryCollaborator }: EntityNameDisplayProps) {
+  const [entryCollaboratorKind, entryCollaboratorName] = useMemo(
+    () => entryCollaborator.entity.split(':'),
+    [entryCollaborator],
+  )
+  return entryCollaboratorKind === EntityKind.USER || entryCollaboratorKind === EntityKind.GROUP ? (
+    <UserDisplay dn={entryCollaboratorName} />
+  ) : (
+    <Typography fontWeight='bold'>{entryCollaboratorName}</Typography>
+  )
+}
diff --git a/frontend/src/entry/model/settings/AccessRequestSettings.tsx b/frontend/src/entry/model/settings/AccessRequestSettings.tsx
index 32aff58c4..a68372048 100644
--- a/frontend/src/entry/model/settings/AccessRequestSettings.tsx
+++ b/frontend/src/entry/model/settings/AccessRequestSettings.tsx
@@ -46,18 +46,16 @@ export default function AccessRequestSettings({ model }: AccessRequestSettingsPr
       <Typography variant='h6' component='h2'>
         Manage access requests
       </Typography>
-      <div>
-        <FormControlLabel
-          label='Allow users to make ungoverned access requests'
-          control={
-            <Checkbox
-              onChange={(event) => setAllowUngoverned(event.target.checked)}
-              checked={allowUngoverned}
-              size='small'
-            />
-          }
-        />
-      </div>
+      <FormControlLabel
+        label='Allow users to make ungoverned access requests'
+        control={
+          <Checkbox
+            onChange={(event) => setAllowUngoverned(event.target.checked)}
+            checked={allowUngoverned}
+            size='small'
+          />
+        }
+      />
       <Divider />
       <div>
         <LoadingButton
diff --git a/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx b/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
index 68e52d9c3..12ebbb48f 100644
--- a/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
+++ b/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
@@ -1,8 +1,7 @@
-import GroupIcon from '@mui/icons-material/Groups'
-import UserIcon from '@mui/icons-material/Person'
 import { Grid, Stack } from '@mui/material'
-import { Fragment, useMemo } from 'react'
-import UserDisplay from 'src/common/UserDisplay'
+import { Fragment } from 'react'
+import EntityIcon from 'src/entry/EntityIcon'
+import EntityNameDisplay from 'src/entry/EntityNameDisplay'
 import EntryCardRolesChipSet from 'src/entry/overview/EntryCardRolesChipSet'
 import { CollaboratorEntry } from 'types/types'
 
@@ -11,35 +10,17 @@ type EntryCardEntityRoleRowProps = {
 }
 
 export default function EntryCardEntityRoleRow({ entryCollaborators }: EntryCardEntityRoleRowProps) {
-  return entryCollaborators.map((user) => (
-    <Fragment key={user.entity}>
+  return entryCollaborators.map((collaborator) => (
+    <Fragment key={collaborator.entity}>
       <Grid item xs={6}>
         <Stack direction='row' alignItems='center' spacing={1}>
-          <EntryCollaboratorIcon entity={user} />
-          <EntryCollaboratorName entity={user} />
+          <EntityIcon entryCollaborator={collaborator} />
+          <EntityNameDisplay entryCollaborator={collaborator} />
         </Stack>
       </Grid>
       <Grid item xs={6}>
-        <EntryCardRolesChipSet entryCollaborator={user} />
+        <EntryCardRolesChipSet entryCollaborator={collaborator} />
       </Grid>
     </Fragment>
   ))
 }
-
-type EntryCollaboratorProps = {
-  entity: CollaboratorEntry
-}
-
-function EntryCollaboratorIcon({ entity }: EntryCollaboratorProps) {
-  const isUser = useMemo(() => entity.entity.startsWith('user:'), [entity])
-  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
-}
-
-function EntryCollaboratorName({ entity }: EntryCollaboratorProps) {
-  const entityName = useMemo(() => entity.entity.split('/').pop()!, [entity])
-  return (
-    <>
-      <UserDisplay dn={entityName} />
-    </>
-  )
-}
diff --git a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
index 36ae4c9b3..5167532a8 100644
--- a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
+++ b/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
@@ -1,5 +1,5 @@
-import Dangerous from '@mui/icons-material/DangerousOutlined'
 import { Chip } from '@mui/material'
+import { useMemo } from 'react'
 import { CollaboratorEntry } from 'types/types'
 
 type EntryCardChipSetProps = {
@@ -7,16 +7,10 @@ type EntryCardChipSetProps = {
 }
 
 export default function EntryCardRolesChipSet({ entryCollaborator }: EntryCardChipSetProps) {
-  return entryCollaborator.roles.length === 0 ? (
-    <Chip
-      variant='outlined'
-      style={{ marginRight: 2, marginBottom: 2, backgroundColor: '#B00020', color: 'white', alignContent: 'center' }}
-      icon={<Dangerous style={{ color: 'white' }} />}
-      label='No Roles'
-    />
-  ) : (
-    entryCollaborator.roles.map((role) => {
-      return <Chip key={role} variant='outlined' style={{ marginRight: 2, marginBottom: 2 }} label={role} />
-    })
+  const roleChips = useMemo(
+    () => entryCollaborator.roles.map((role) => <Chip key={role} label={role} color='primary' sx={{ mr: 1 }} />),
+    [entryCollaborator.roles],
   )
+
+  return roleChips.length ? roleChips : <Chip label='No roles' color='warning' />
 }
diff --git a/frontend/src/entry/overview/EntryCardRolesDialog.tsx b/frontend/src/entry/overview/EntryCardRolesDialog.tsx
deleted file mode 100644
index e7fbc15b2..000000000
--- a/frontend/src/entry/overview/EntryCardRolesDialog.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DialogTitle } from '@mui/material'
-import Dialog from '@mui/material/Dialog'
-import { Transition } from 'src/common/Transition'
-import EntryRoleList from 'src/entry/overview/EntryRoleList'
-import { EntryInterface } from 'types/types'
-
-type EntryCardRoleDialogProps = {
-  entry: EntryInterface
-  open: boolean
-  setOpen: (isOpen: boolean) => void
-}
-
-export default function EntryCardRolesDialog({ entry, open, setOpen }: EntryCardRoleDialogProps) {
-  return (
-    <>
-      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm' TransitionComponent={Transition}>
-        <DialogTitle>Roles</DialogTitle>
-        <EntryRoleList entry={entry} />
-      </Dialog>
-    </>
-  )
-}
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index c09fb5254..74ac4d122 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,23 +1,61 @@
-import { Grid } from '@mui/material'
-import EntryCardEntityRoleRow from 'src/entry/overview/EntryCardEntityRoleRow'
-import { EntryInterface } from 'types/types'
+import GroupIcon from '@mui/icons-material/Groups'
+import UserIcon from '@mui/icons-material/Person'
+import { Grid, Stack } from '@mui/material'
+import { Fragment, useMemo } from 'react'
+import UserDisplay from 'src/common/UserDisplay'
+import EntryCardRolesChipSet from 'src/entry/overview/EntryCardRolesChipSet'
+import { CollaboratorEntry, EntryInterface } from 'types/types'
 
 type EntryCardRoleDialogProps = {
   entry: EntryInterface
 }
 
 export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
+  const rows = useMemo(
+    () =>
+      entry.collaborators.map((collaborator) => (
+        <Fragment key={collaborator.entity}>
+          <Grid item xs={6}>
+            <Stack direction='row' alignItems='center' spacing={1}>
+              <EntryCollaboratorIcon entryCollaborator={collaborator} />
+              <EntryCollaboratorName entryCollaborator={collaborator} />
+            </Stack>
+          </Grid>
+          <Grid item xs={6}>
+            <EntryCardRolesChipSet entryCollaborator={collaborator} />
+          </Grid>
+        </Fragment>
+      )),
+    [entry.collaborators],
+  )
+
   return (
-    <>
-      <Grid container spacing={2} paddingX={5} paddingBottom={2}>
-        <Grid item xs={6}>
-          Entity
-        </Grid>
-        <Grid item xs={6}>
-          Roles
-        </Grid>
-        <EntryCardEntityRoleRow entryCollaborators={entry.collaborators} />
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        Entity
+      </Grid>
+      <Grid item xs={6}>
+        Roles
       </Grid>
+      {rows}
+    </Grid>
+  )
+}
+
+type EntryCollaboratorProps = {
+  entryCollaborator: CollaboratorEntry
+}
+
+function EntryCollaboratorIcon({ entryCollaborator }: EntryCollaboratorProps) {
+  const isUser = useMemo(() => entryCollaborator.entity.startsWith('user:'), [entryCollaborator])
+  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
+}
+
+function EntryCollaboratorName({ entryCollaborator }: EntryCollaboratorProps) {
+  const entityName = useMemo(() => entryCollaborator.entity.split('/').pop()!, [entryCollaborator])
+  return (
+    <>
+      <UserDisplay dn={entityName} />
     </>
   )
 }
diff --git a/frontend/src/entry/overview/EntryRolesDialog.tsx b/frontend/src/entry/overview/EntryRolesDialog.tsx
new file mode 100644
index 000000000..8a0d2f32d
--- /dev/null
+++ b/frontend/src/entry/overview/EntryRolesDialog.tsx
@@ -0,0 +1,22 @@
+import { DialogContent, DialogTitle } from '@mui/material'
+import Dialog from '@mui/material/Dialog'
+import { Transition } from 'src/common/Transition'
+import EntryRoleList from 'src/entry/overview/EntryRoleList'
+import { EntryInterface } from 'types/types'
+
+type EntryRoleDialogProps = {
+  entry: EntryInterface
+  open: boolean
+  onClose: () => void
+}
+
+export default function EntryRolesDialog({ entry, open, onClose }: EntryRoleDialogProps) {
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth='md' TransitionComponent={Transition}>
+      <DialogTitle>Roles</DialogTitle>
+      <DialogContent>
+        <EntryRoleList entry={entry} />
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/entry/overview/ExportEntryCardDialog.tsx b/frontend/src/entry/overview/ExportEntryCardDialog.tsx
index 8292acbae..c8179d497 100644
--- a/frontend/src/entry/overview/ExportEntryCardDialog.tsx
+++ b/frontend/src/entry/overview/ExportEntryCardDialog.tsx
@@ -7,6 +7,7 @@ import Image from 'next/image'
 import logo from 'public/horizontal-dark.png'
 import { useMemo, useRef } from 'react'
 import { useReactToPrint } from 'react-to-print'
+import { Transition } from 'src/common/Transition'
 import { ArrayFieldTemplate, DescriptionFieldTemplate, ObjectFieldTemplate } from 'src/Form/FormTemplates'
 import { EntryInterface, SplitSchemaNoRender } from 'types/types'
 import { widgets } from 'utils/formUtils'
@@ -60,7 +61,7 @@ export default function ExportEntryCardDialog({ entry, splitSchema, open, setOpe
   }, [splitSchema.steps])
 
   return (
-    <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='md'>
+    <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='md' TransitionComponent={Transition}>
       <DialogContent ref={modelCardContentRef}>
         <Stack spacing={2} divider={<Divider />}>
           <Stack direction='row' alignItems='center'>
diff --git a/frontend/src/entry/overview/FormEditPage.tsx b/frontend/src/entry/overview/FormEditPage.tsx
index c98f414ab..6676f6644 100644
--- a/frontend/src/entry/overview/FormEditPage.tsx
+++ b/frontend/src/entry/overview/FormEditPage.tsx
@@ -8,7 +8,7 @@ import Loading from 'src/common/Loading'
 import TextInputDialog from 'src/common/TextInputDialog'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import EntryCardHistoryDialog from 'src/entry/overview/EntryCardHistoryDialog'
-import EntryCardRolesDialog from 'src/entry/overview/EntryCardRolesDialog'
+import EntryCardRolesDialog from 'src/entry/overview/EntryRolesDialog'
 import ExportEntryCardDialog from 'src/entry/overview/ExportEntryCardDialog'
 import SaveAndCancelButtons from 'src/entry/overview/SaveAndCancelFormButtons'
 import JsonSchemaForm from 'src/Form/JsonSchemaForm'
@@ -140,12 +140,12 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
           </div>
           {!isEdit && (
             <Stack direction='row' spacing={1} justifyContent='flex-end' sx={{ mb: { xs: 2 } }}>
-              <Button variant='outlined' onClick={() => setRolesDialogOpen(true)}>
-                View Roles
-              </Button>
               <Button variant='outlined' onClick={() => setExportDialogOpen(true)}>
                 Export as PDF
               </Button>
+              <Button variant='outlined' onClick={() => setRolesDialogOpen(true)}>
+                View Roles
+              </Button>
               <Button variant='outlined' onClick={() => setHistoryDialogOpen(true)}>
                 View History
               </Button>
@@ -188,7 +188,7 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
         )}
       </Box>
       <EntryCardHistoryDialog entry={entry} open={historyDialogOpen} setOpen={setHistoryDialogOpen} />
-      <EntryCardRolesDialog entry={entry} open={rolesDialogOpen} setOpen={setRolesDialogOpen} />
+      <EntryCardRolesDialog entry={entry} open={rolesDialogOpen} onClose={() => setRolesDialogOpen(false)} />
       <TextInputDialog
         open={jsonUploadDialogOpen}
         onClose={() => setJsonUploadDialogOpen(false)}
diff --git a/frontend/src/entry/settings/EntityItem.tsx b/frontend/src/entry/settings/EntityItem.tsx
index c82d5055c..388b41f12 100644
--- a/frontend/src/entry/settings/EntityItem.tsx
+++ b/frontend/src/entry/settings/EntityItem.tsx
@@ -1,11 +1,10 @@
 import ClearIcon from '@mui/icons-material/Clear'
-import GroupsIcon from '@mui/icons-material/Groups'
-import PersonIcon from '@mui/icons-material/Person'
-import { Autocomplete, Chip, IconButton, Stack, TableCell, TableRow, TextField, Typography } from '@mui/material'
+import { Autocomplete, Chip, IconButton, Stack, TableCell, TableRow, TextField, Tooltip } from '@mui/material'
 import _ from 'lodash-es'
 import { SyntheticEvent, useMemo } from 'react'
-import UserDisplay from 'src/common/UserDisplay'
-import { CollaboratorEntry, EntityKind, Role } from 'types/types'
+import EntityIcon from 'src/entry/EntityIcon'
+import EntityNameDisplay from 'src/entry/EntityNameDisplay'
+import { CollaboratorEntry, Role } from 'types/types'
 import { toSentenceCase } from 'utils/stringUtils'
 
 type EntityItemProps = {
@@ -41,8 +40,8 @@ export default function EntityItem({ entity, accessList, onAccessListChange, ent
     <TableRow>
       <TableCell>
         <Stack direction='row' alignItems='center' spacing={1}>
-          <EntityIcon entity={entity} />
-          <EntityNameDisplay entity={entity} />
+          <EntityIcon entryCollaborator={entity} />
+          <EntityNameDisplay entryCollaborator={entity} />
         </Stack>
       </TableCell>
       <TableCell>
@@ -66,36 +65,16 @@ export default function EntityItem({ entity, accessList, onAccessListChange, ent
         )}
       </TableCell>
       <TableCell align='right'>
-        <IconButton
-          aria-label={`Remove user ${entity.entity} from ${toSentenceCase(entryKind)} access list`}
-          onClick={removeEntity}
-          data-test='accessListRemoveUser'
-        >
-          <ClearIcon color='secondary' fontSize='inherit' />
-        </IconButton>
+        <Tooltip title='Remove user'>
+          <IconButton
+            aria-label={`Remove user ${entity.entity} from ${toSentenceCase(entryKind)} access list`}
+            onClick={removeEntity}
+            data-test='accessListRemoveUser'
+          >
+            <ClearIcon color='secondary' fontSize='inherit' />
+          </IconButton>
+        </Tooltip>
       </TableCell>
     </TableRow>
   )
 }
-
-type EntityIconProps = {
-  entity: CollaboratorEntry
-}
-
-function EntityIcon({ entity }: EntityIconProps) {
-  const isUser = useMemo(() => entity.entity.startsWith('user:'), [entity])
-  return isUser ? <PersonIcon color='primary' /> : <GroupsIcon color='secondary' />
-}
-
-type EntityNameDisplayProps = {
-  entity: CollaboratorEntry
-}
-
-function EntityNameDisplay({ entity }: EntityNameDisplayProps) {
-  const [entityKind, entityName] = useMemo(() => entity.entity.split(':'), [entity])
-  return entityKind === EntityKind.USER || entityKind === EntityKind.GROUP ? (
-    <UserDisplay dn={entityName} />
-  ) : (
-    <Typography fontWeight='bold'>{entityName}</Typography>
-  )
-}
diff --git a/frontend/src/entry/settings/EntryAccessTab.tsx b/frontend/src/entry/settings/EntryAccessTab.tsx
index 5b8915c16..c5c978e19 100644
--- a/frontend/src/entry/settings/EntryAccessTab.tsx
+++ b/frontend/src/entry/settings/EntryAccessTab.tsx
@@ -69,11 +69,9 @@ export default function EntryAccessTab({ entry }: EntryAccessTabProps) {
         entryKind={entry.kind}
         entryRoles={entryRoles}
       />
-      <div>
-        <LoadingButton variant='contained' aria-label='Save access list' onClick={updateAccessList} loading={loading}>
-          Save
-        </LoadingButton>
-      </div>
+      <LoadingButton variant='contained' aria-label='Save access list' onClick={updateAccessList} loading={loading}>
+        Save
+      </LoadingButton>
       <MessageAlert message={errorMessage} severity='error' />
     </Stack>
   )

From 5873cf6b9cd1c1308144ee2c5b2dd12415d34a43 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Fri, 9 Aug 2024 09:18:47 +0000
Subject: [PATCH 09/12] Changes per PR

---
 .../entry/overview/EntryCardEntityRoleRow.tsx | 26 -------------
 frontend/src/entry/overview/EntryRoleList.tsx | 37 +++++--------------
 ...RolesChipSet.tsx => EntryRolesChipSet.tsx} |  4 +-
 .../src/entry/overview/EntryRolesDialog.tsx   |  4 +-
 4 files changed, 13 insertions(+), 58 deletions(-)
 delete mode 100644 frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
 rename frontend/src/entry/overview/{EntryCardRolesChipSet.tsx => EntryRolesChipSet.tsx} (77%)

diff --git a/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx b/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
deleted file mode 100644
index 12ebbb48f..000000000
--- a/frontend/src/entry/overview/EntryCardEntityRoleRow.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Grid, Stack } from '@mui/material'
-import { Fragment } from 'react'
-import EntityIcon from 'src/entry/EntityIcon'
-import EntityNameDisplay from 'src/entry/EntityNameDisplay'
-import EntryCardRolesChipSet from 'src/entry/overview/EntryCardRolesChipSet'
-import { CollaboratorEntry } from 'types/types'
-
-type EntryCardEntityRoleRowProps = {
-  entryCollaborators: CollaboratorEntry[]
-}
-
-export default function EntryCardEntityRoleRow({ entryCollaborators }: EntryCardEntityRoleRowProps) {
-  return entryCollaborators.map((collaborator) => (
-    <Fragment key={collaborator.entity}>
-      <Grid item xs={6}>
-        <Stack direction='row' alignItems='center' spacing={1}>
-          <EntityIcon entryCollaborator={collaborator} />
-          <EntityNameDisplay entryCollaborator={collaborator} />
-        </Stack>
-      </Grid>
-      <Grid item xs={6}>
-        <EntryCardRolesChipSet entryCollaborator={collaborator} />
-      </Grid>
-    </Fragment>
-  ))
-}
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index 74ac4d122..9489b2c5c 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,28 +1,27 @@
-import GroupIcon from '@mui/icons-material/Groups'
-import UserIcon from '@mui/icons-material/Person'
 import { Grid, Stack } from '@mui/material'
 import { Fragment, useMemo } from 'react'
-import UserDisplay from 'src/common/UserDisplay'
-import EntryCardRolesChipSet from 'src/entry/overview/EntryCardRolesChipSet'
-import { CollaboratorEntry, EntryInterface } from 'types/types'
+import EntityIcon from 'src/entry/EntityIcon'
+import EntityNameDisplay from 'src/entry/EntityNameDisplay'
+import EntryRolesChipSet from 'src/entry/overview/EntryRolesChipSet'
+import { EntryInterface } from 'types/types'
 
-type EntryCardRoleDialogProps = {
+type EntryRoleListProps = {
   entry: EntryInterface
 }
 
-export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
+export default function EntryRoleList({ entry }: EntryRoleListProps) {
   const rows = useMemo(
     () =>
       entry.collaborators.map((collaborator) => (
         <Fragment key={collaborator.entity}>
           <Grid item xs={6}>
             <Stack direction='row' alignItems='center' spacing={1}>
-              <EntryCollaboratorIcon entryCollaborator={collaborator} />
-              <EntryCollaboratorName entryCollaborator={collaborator} />
+              <EntityIcon entryCollaborator={collaborator} />
+              <EntityNameDisplay entryCollaborator={collaborator} />
             </Stack>
           </Grid>
           <Grid item xs={6}>
-            <EntryCardRolesChipSet entryCollaborator={collaborator} />
+            <EntryRolesChipSet entryCollaborator={collaborator} />
           </Grid>
         </Fragment>
       )),
@@ -41,21 +40,3 @@ export default function EntryRoleList({ entry }: EntryCardRoleDialogProps) {
     </Grid>
   )
 }
-
-type EntryCollaboratorProps = {
-  entryCollaborator: CollaboratorEntry
-}
-
-function EntryCollaboratorIcon({ entryCollaborator }: EntryCollaboratorProps) {
-  const isUser = useMemo(() => entryCollaborator.entity.startsWith('user:'), [entryCollaborator])
-  return isUser ? <UserIcon color='primary' /> : <GroupIcon color='secondary' />
-}
-
-function EntryCollaboratorName({ entryCollaborator }: EntryCollaboratorProps) {
-  const entityName = useMemo(() => entryCollaborator.entity.split('/').pop()!, [entryCollaborator])
-  return (
-    <>
-      <UserDisplay dn={entityName} />
-    </>
-  )
-}
diff --git a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx b/frontend/src/entry/overview/EntryRolesChipSet.tsx
similarity index 77%
rename from frontend/src/entry/overview/EntryCardRolesChipSet.tsx
rename to frontend/src/entry/overview/EntryRolesChipSet.tsx
index 5167532a8..0bac129ce 100644
--- a/frontend/src/entry/overview/EntryCardRolesChipSet.tsx
+++ b/frontend/src/entry/overview/EntryRolesChipSet.tsx
@@ -2,11 +2,11 @@ import { Chip } from '@mui/material'
 import { useMemo } from 'react'
 import { CollaboratorEntry } from 'types/types'
 
-type EntryCardChipSetProps = {
+type EntryRolesChipSetProps = {
   entryCollaborator: CollaboratorEntry
 }
 
-export default function EntryCardRolesChipSet({ entryCollaborator }: EntryCardChipSetProps) {
+export default function EntryRolesChipSet({ entryCollaborator }: EntryRolesChipSetProps) {
   const roleChips = useMemo(
     () => entryCollaborator.roles.map((role) => <Chip key={role} label={role} color='primary' sx={{ mr: 1 }} />),
     [entryCollaborator.roles],
diff --git a/frontend/src/entry/overview/EntryRolesDialog.tsx b/frontend/src/entry/overview/EntryRolesDialog.tsx
index 8a0d2f32d..e94e63390 100644
--- a/frontend/src/entry/overview/EntryRolesDialog.tsx
+++ b/frontend/src/entry/overview/EntryRolesDialog.tsx
@@ -4,13 +4,13 @@ import { Transition } from 'src/common/Transition'
 import EntryRoleList from 'src/entry/overview/EntryRoleList'
 import { EntryInterface } from 'types/types'
 
-type EntryRoleDialogProps = {
+type EntryRolesDialogProps = {
   entry: EntryInterface
   open: boolean
   onClose: () => void
 }
 
-export default function EntryRolesDialog({ entry, open, onClose }: EntryRoleDialogProps) {
+export default function EntryRolesDialog({ entry, open, onClose }: EntryRolesDialogProps) {
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth='md' TransitionComponent={Transition}>
       <DialogTitle>Roles</DialogTitle>

From a9bd477c9a2760977eb2e8e3073a2f011f3fd4ba Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Mon, 12 Aug 2024 08:40:00 +0000
Subject: [PATCH 10/12] Corrected import

---
 frontend/src/entry/overview/FormEditPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/entry/overview/FormEditPage.tsx b/frontend/src/entry/overview/FormEditPage.tsx
index 6676f6644..ffa7776b2 100644
--- a/frontend/src/entry/overview/FormEditPage.tsx
+++ b/frontend/src/entry/overview/FormEditPage.tsx
@@ -8,7 +8,7 @@ import Loading from 'src/common/Loading'
 import TextInputDialog from 'src/common/TextInputDialog'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import EntryCardHistoryDialog from 'src/entry/overview/EntryCardHistoryDialog'
-import EntryCardRolesDialog from 'src/entry/overview/EntryRolesDialog'
+import EntryRolesDialog from 'src/entry/overview/EntryRolesDialog'
 import ExportEntryCardDialog from 'src/entry/overview/ExportEntryCardDialog'
 import SaveAndCancelButtons from 'src/entry/overview/SaveAndCancelFormButtons'
 import JsonSchemaForm from 'src/Form/JsonSchemaForm'
@@ -188,7 +188,7 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
         )}
       </Box>
       <EntryCardHistoryDialog entry={entry} open={historyDialogOpen} setOpen={setHistoryDialogOpen} />
-      <EntryCardRolesDialog entry={entry} open={rolesDialogOpen} onClose={() => setRolesDialogOpen(false)} />
+      <EntryRolesDialog entry={entry} open={rolesDialogOpen} onClose={() => setRolesDialogOpen(false)} />
       <TextInputDialog
         open={jsonUploadDialogOpen}
         onClose={() => setJsonUploadDialogOpen(false)}

From fbffeebb1bd0bedc915cd0b28039d92806e2e130 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Mon, 12 Aug 2024 12:35:47 +0000
Subject: [PATCH 11/12] Change per PR, forgot to commit earlier

---
 frontend/src/entry/overview/FormEditPage.tsx | 93 ++++++++++++++------
 1 file changed, 65 insertions(+), 28 deletions(-)

diff --git a/frontend/src/entry/overview/FormEditPage.tsx b/frontend/src/entry/overview/FormEditPage.tsx
index ffa7776b2..2d9c351b1 100644
--- a/frontend/src/entry/overview/FormEditPage.tsx
+++ b/frontend/src/entry/overview/FormEditPage.tsx
@@ -1,14 +1,17 @@
-import { Box, Button, Stack, Tooltip, Typography } from '@mui/material'
+import EditIcon from '@mui/icons-material/Edit'
+import HistoryIcon from '@mui/icons-material/History'
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'
+import { Box, Button, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Tooltip, Typography } from '@mui/material'
 import { useGetModel } from 'actions/model'
 import { putModelCard, useGetModelCardRevisions } from 'actions/modelCard'
 import { useGetSchema } from 'actions/schema'
+import React from 'react'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import CopyToClipboardButton from 'src/common/CopyToClipboardButton'
 import Loading from 'src/common/Loading'
 import TextInputDialog from 'src/common/TextInputDialog'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import EntryCardHistoryDialog from 'src/entry/overview/EntryCardHistoryDialog'
-import EntryRolesDialog from 'src/entry/overview/EntryRolesDialog'
 import ExportEntryCardDialog from 'src/entry/overview/ExportEntryCardDialog'
 import SaveAndCancelButtons from 'src/entry/overview/SaveAndCancelFormButtons'
 import JsonSchemaForm from 'src/Form/JsonSchemaForm'
@@ -32,11 +35,20 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
   const { schema, isSchemaLoading, isSchemaError } = useGetSchema(entry.card.schemaId)
   const { isModelError: isEntryError, mutateModel: mutateEntry } = useGetModel(entry.id, entry.kind)
   const { mutateModelCardRevisions: mutateEntryCardRevisions } = useGetModelCardRevisions(entry.id)
-  const [rolesDialogOpen, setRolesDialogOpen] = useState(false)
   const [historyDialogOpen, setHistoryDialogOpen] = useState(false)
   const [exportDialogOpen, setExportDialogOpen] = useState(false)
   const [jsonUploadDialogOpen, setJsonUploadDialogOpen] = useState(false)
   const [loading, setLoading] = useState(false)
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  function handleActionButtonClick(event: React.MouseEvent<HTMLButtonElement>) {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleActionButtonClose = () => {
+    setAnchorEl(null)
+  }
 
   const sendNotification = useNotification()
   const { setUnsavedChanges } = useContext(UnsavedChangesContext)
@@ -139,31 +151,57 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
             </Stack>
           </div>
           {!isEdit && (
-            <Stack direction='row' spacing={1} justifyContent='flex-end' sx={{ mb: { xs: 2 } }}>
-              <Button variant='outlined' onClick={() => setExportDialogOpen(true)}>
-                Export as PDF
+            <>
+              <Button data-test='openEntryOverviewActions' variant='contained' onClick={handleActionButtonClick}>
+                Actions
               </Button>
-              <Button variant='outlined' onClick={() => setRolesDialogOpen(true)}>
-                View Roles
-              </Button>
-              <Button variant='outlined' onClick={() => setHistoryDialogOpen(true)}>
-                View History
-              </Button>
-              {!readOnly && (
-                <Tooltip title={requiredRolesText}>
-                  <span>
-                    <Button
-                      variant='outlined'
-                      disabled={!canEdit}
-                      onClick={() => setIsEdit(!isEdit)}
-                      data-test='editEntryCardButton'
-                    >
-                      {`Edit ${EntryCardKindLabel[entry.kind]}`}
-                    </Button>
-                  </span>
-                </Tooltip>
-              )}
-            </Stack>
+              <Menu MenuListProps={{ dense: true }} anchorEl={anchorEl} open={open} onClose={handleActionButtonClose}>
+                <MenuItem>
+                  <ListItemIcon>
+                    <PictureAsPdfIcon fontSize='small' />
+                  </ListItemIcon>
+                  <ListItemText
+                    onClick={() => {
+                      handleActionButtonClose()
+                      setExportDialogOpen(true)
+                    }}
+                  >
+                    Export as PDF
+                  </ListItemText>
+                </MenuItem>
+                <MenuItem>
+                  <ListItemIcon>
+                    <HistoryIcon fontSize='small' />
+                  </ListItemIcon>
+                  <ListItemText
+                    onClick={() => {
+                      handleActionButtonClose()
+                      setHistoryDialogOpen(true)
+                    }}
+                  >
+                    View History
+                  </ListItemText>
+                </MenuItem>
+                {!readOnly && (
+                  <Tooltip title={requiredRolesText}>
+                    <MenuItem disabled={!canEdit}>
+                      <ListItemIcon>
+                        <EditIcon fontSize='small' />
+                      </ListItemIcon>
+                      <ListItemText
+                        onClick={() => {
+                          handleActionButtonClose()
+                          setIsEdit(!isEdit)
+                        }}
+                        data-test='editEntryCardButton'
+                      >
+                        {`Edit ${EntryCardKindLabel[entry.kind]}`}
+                      </ListItemText>
+                    </MenuItem>
+                  </Tooltip>
+                )}
+              </Menu>
+            </>
           )}
           {isEdit && (
             <SaveAndCancelButtons
@@ -188,7 +226,6 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
         )}
       </Box>
       <EntryCardHistoryDialog entry={entry} open={historyDialogOpen} setOpen={setHistoryDialogOpen} />
-      <EntryRolesDialog entry={entry} open={rolesDialogOpen} onClose={() => setRolesDialogOpen(false)} />
       <TextInputDialog
         open={jsonUploadDialogOpen}
         onClose={() => setJsonUploadDialogOpen(false)}

From 7d60eb8fc2677fdbf54f0d718a0c7d14585cb5a4 Mon Sep 17 00:00:00 2001
From: IR96334 <175131971+IR96334@users.noreply.github.com>
Date: Mon, 12 Aug 2024 13:51:45 +0000
Subject: [PATCH 12/12] Revert to previous commit as 2 branches were
 accidentally combined

---
 frontend/src/entry/overview/FormEditPage.tsx | 108 +++++--------------
 1 file changed, 28 insertions(+), 80 deletions(-)

diff --git a/frontend/src/entry/overview/FormEditPage.tsx b/frontend/src/entry/overview/FormEditPage.tsx
index 2d9c351b1..14cb04ad9 100644
--- a/frontend/src/entry/overview/FormEditPage.tsx
+++ b/frontend/src/entry/overview/FormEditPage.tsx
@@ -1,17 +1,14 @@
-import EditIcon from '@mui/icons-material/Edit'
-import HistoryIcon from '@mui/icons-material/History'
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf'
-import { Box, Button, ListItemIcon, ListItemText, Menu, MenuItem, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Stack, Tooltip, Typography } from '@mui/material'
 import { useGetModel } from 'actions/model'
 import { putModelCard, useGetModelCardRevisions } from 'actions/modelCard'
 import { useGetSchema } from 'actions/schema'
-import React from 'react'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import CopyToClipboardButton from 'src/common/CopyToClipboardButton'
 import Loading from 'src/common/Loading'
 import TextInputDialog from 'src/common/TextInputDialog'
 import UnsavedChangesContext from 'src/contexts/unsavedChangesContext'
 import EntryCardHistoryDialog from 'src/entry/overview/EntryCardHistoryDialog'
+import EntryRolesDialog from 'src/entry/overview/EntryRolesDialog'
 import ExportEntryCardDialog from 'src/entry/overview/ExportEntryCardDialog'
 import SaveAndCancelButtons from 'src/entry/overview/SaveAndCancelFormButtons'
 import JsonSchemaForm from 'src/Form/JsonSchemaForm'
@@ -20,44 +17,29 @@ import MessageAlert from 'src/MessageAlert'
 import { EntryCardKindLabel, EntryInterface, SplitSchemaNoRender } from 'types/types'
 import { getStepsData, getStepsFromSchema } from 'utils/formUtils'
 import { getRequiredRolesText, hasRole } from 'utils/roles'
-
 type FormEditPageProps = {
   entry: EntryInterface
   readOnly?: boolean
   currentUserRoles: string[]
 }
-
 export default function FormEditPage({ entry, currentUserRoles, readOnly = false }: FormEditPageProps) {
   const [isEdit, setIsEdit] = useState(false)
   const [splitSchema, setSplitSchema] = useState<SplitSchemaNoRender>({ reference: '', steps: [] })
   const [errorMessage, setErrorMessage] = useState('')
-
   const { schema, isSchemaLoading, isSchemaError } = useGetSchema(entry.card.schemaId)
   const { isModelError: isEntryError, mutateModel: mutateEntry } = useGetModel(entry.id, entry.kind)
   const { mutateModelCardRevisions: mutateEntryCardRevisions } = useGetModelCardRevisions(entry.id)
+  const [rolesDialogOpen, setRolesDialogOpen] = useState(false)
   const [historyDialogOpen, setHistoryDialogOpen] = useState(false)
   const [exportDialogOpen, setExportDialogOpen] = useState(false)
   const [jsonUploadDialogOpen, setJsonUploadDialogOpen] = useState(false)
   const [loading, setLoading] = useState(false)
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-
-  function handleActionButtonClick(event: React.MouseEvent<HTMLButtonElement>) {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleActionButtonClose = () => {
-    setAnchorEl(null)
-  }
-
   const sendNotification = useNotification()
   const { setUnsavedChanges } = useContext(UnsavedChangesContext)
-
   const [canEdit, requiredRolesText] = useMemo(() => {
     const validRoles = ['owner', 'contributor']
     return [hasRole(currentUserRoles, validRoles), getRequiredRolesText(currentUserRoles, validRoles)]
   }, [currentUserRoles])
-
   async function onSubmit() {
     if (schema) {
       setErrorMessage('')
@@ -73,7 +55,6 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
       setLoading(false)
     }
   }
-
   function onCancel() {
     if (schema) {
       mutateEntry()
@@ -85,23 +66,18 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
       setIsEdit(false)
     }
   }
-
   useEffect(() => {
     if (!entry || !schema) return
     const metadata = entry.card.metadata
     const steps = getStepsFromSchema(schema, {}, ['properties.contacts'], metadata)
-
     for (const step of steps) {
       step.steps = steps
     }
-
     setSplitSchema({ reference: schema.id, steps })
   }, [schema, entry])
-
   useEffect(() => {
     setUnsavedChanges(isEdit)
   }, [isEdit, setUnsavedChanges])
-
   function handleJsonFormOnSubmit(formData: string) {
     setJsonUploadDialogOpen(false)
     try {
@@ -120,15 +96,12 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
       })
     }
   }
-
   if (isSchemaError) {
     return <MessageAlert message={isSchemaError.info.message} severity='error' />
   }
-
   if (isEntryError) {
     return <MessageAlert message={isEntryError.info.message} severity='error' />
   }
-
   return (
     <>
       {isSchemaLoading && <Loading />}
@@ -151,57 +124,31 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
             </Stack>
           </div>
           {!isEdit && (
-            <>
-              <Button data-test='openEntryOverviewActions' variant='contained' onClick={handleActionButtonClick}>
-                Actions
+            <Stack direction='row' spacing={1} justifyContent='flex-end' sx={{ mb: { xs: 2 } }}>
+              <Button variant='outlined' onClick={() => setExportDialogOpen(true)}>
+                Export as PDF
+              </Button>
+              <Button variant='outlined' onClick={() => setRolesDialogOpen(true)}>
+                View Roles
               </Button>
-              <Menu MenuListProps={{ dense: true }} anchorEl={anchorEl} open={open} onClose={handleActionButtonClose}>
-                <MenuItem>
-                  <ListItemIcon>
-                    <PictureAsPdfIcon fontSize='small' />
-                  </ListItemIcon>
-                  <ListItemText
-                    onClick={() => {
-                      handleActionButtonClose()
-                      setExportDialogOpen(true)
-                    }}
-                  >
-                    Export as PDF
-                  </ListItemText>
-                </MenuItem>
-                <MenuItem>
-                  <ListItemIcon>
-                    <HistoryIcon fontSize='small' />
-                  </ListItemIcon>
-                  <ListItemText
-                    onClick={() => {
-                      handleActionButtonClose()
-                      setHistoryDialogOpen(true)
-                    }}
-                  >
-                    View History
-                  </ListItemText>
-                </MenuItem>
-                {!readOnly && (
-                  <Tooltip title={requiredRolesText}>
-                    <MenuItem disabled={!canEdit}>
-                      <ListItemIcon>
-                        <EditIcon fontSize='small' />
-                      </ListItemIcon>
-                      <ListItemText
-                        onClick={() => {
-                          handleActionButtonClose()
-                          setIsEdit(!isEdit)
-                        }}
-                        data-test='editEntryCardButton'
-                      >
-                        {`Edit ${EntryCardKindLabel[entry.kind]}`}
-                      </ListItemText>
-                    </MenuItem>
-                  </Tooltip>
-                )}
-              </Menu>
-            </>
+              <Button variant='outlined' onClick={() => setHistoryDialogOpen(true)}>
+                View History
+              </Button>
+              {!readOnly && (
+                <Tooltip title={requiredRolesText}>
+                  <span>
+                    <Button
+                      variant='outlined'
+                      disabled={!canEdit}
+                      onClick={() => setIsEdit(!isEdit)}
+                      data-test='editEntryCardButton'
+                    >
+                      {`Edit ${EntryCardKindLabel[entry.kind]}`}
+                    </Button>
+                  </span>
+                </Tooltip>
+              )}
+            </Stack>
           )}
           {isEdit && (
             <SaveAndCancelButtons
@@ -226,6 +173,7 @@ export default function FormEditPage({ entry, currentUserRoles, readOnly = false
         )}
       </Box>
       <EntryCardHistoryDialog entry={entry} open={historyDialogOpen} setOpen={setHistoryDialogOpen} />
+      <EntryRolesDialog entry={entry} open={rolesDialogOpen} onClose={() => setRolesDialogOpen(false)} />
       <TextInputDialog
         open={jsonUploadDialogOpen}
         onClose={() => setJsonUploadDialogOpen(false)}