From f471a60a64ac69f87eaf1e29827ab45e1d6c14b1 Mon Sep 17 00:00:00 2001 From: KW86022 <184099420+KW86022@users.noreply.github.com> Date: Thu, 10 Oct 2024 14:29:11 +0000 Subject: [PATCH 1/5] Added templating and access requests buttons to the new model create page --- frontend/src/entry/CreateEntry.tsx | 80 +++++++++++++++++++++++------- frontend/types/types.ts | 2 + 2 files changed, 63 insertions(+), 19 deletions(-) diff --git a/frontend/src/entry/CreateEntry.tsx b/frontend/src/entry/CreateEntry.tsx index a32c52133..f9f05ae36 100644 --- a/frontend/src/entry/CreateEntry.tsx +++ b/frontend/src/entry/CreateEntry.tsx @@ -1,4 +1,4 @@ -import { ArrowBack, FileUpload, Lock, LockOpen } from '@mui/icons-material' +import { ArrowBack, FileUpload, FolderCopy, Lock, LockOpen } from '@mui/icons-material' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import LoadingButton from '@mui/lab/LoadingButton' import { @@ -7,12 +7,14 @@ import { AccordionSummary, Box, Button, + Checkbox, Divider, FormControlLabel, Paper, Radio, RadioGroup, Stack, + Switch, Tooltip, Typography, } from '@mui/material' @@ -60,6 +62,8 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr const [collaborators, setCollaborators] = useState( currentUser ? [{ entity: `${EntityKind.USER}:${currentUser?.dn}`, roles: ['owner'] }] : [], ) + const [ungovernedAccess, setungovernedAccess] = useState(false) + const [allowTemplating, setAllowTemplating] = useState(true) const [errorMessage, setErrorMessage] = useState('') const [loading, setLoading] = useState(false) @@ -86,6 +90,8 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr visibility, collaborators, settings: { + ungovernedAccess, + allowTemplating, mirror: { sourceModelId, }, @@ -130,6 +136,20 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) } + const templateLabel = () => { + return ( + + + + Templating + + {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`} + + + + ) + } + if (isCurrentUserError) { return } @@ -174,24 +194,36 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr Access control - setVisibility(e.target.value as EntryForm['visibility'])} - > - } - label={publicLabel()} - data-test='publicButtonSelector' - /> - } - label={privateLabel()} - data-test='privateButtonSelector' - /> - + + setVisibility(e.target.value as EntryForm['visibility'])} + > + } + label={publicLabel()} + data-test='publicButtonSelector' + /> + } + label={privateLabel()} + data-test='privateButtonSelector' + /> + setAllowTemplating(event.target.checked)} + checked={allowTemplating} + /> + } + label={templateLabel()} + /> + + + setungovernedAccess(e.target.checked)} + checked={ungovernedAccess} + size='small' + /> + } + /> diff --git a/frontend/types/types.ts b/frontend/types/types.ts index 6da963d20..bf116d90d 100644 --- a/frontend/types/types.ts +++ b/frontend/types/types.ts @@ -428,6 +428,8 @@ export interface EntryForm { visibility: EntryVisibilityKeys collaborators?: CollaboratorEntry[] settings?: { + ungovernedAccess: boolean + allowTemplating: boolean mirror?: { sourceModelId?: string destinationModelId?: string From 167b3c05a2218d8dd1735d6004fc12e98ad9a805 Mon Sep 17 00:00:00 2001 From: KW86022 <184099420+KW86022@users.noreply.github.com> Date: Mon, 14 Oct 2024 15:51:07 +0000 Subject: [PATCH 2/5] Change both buttons to be in advanced options with a toggle switch --- frontend/src/entry/CreateEntry.tsx | 104 +++++++++++++++++------------ 1 file changed, 61 insertions(+), 43 deletions(-) diff --git a/frontend/src/entry/CreateEntry.tsx b/frontend/src/entry/CreateEntry.tsx index f9f05ae36..7f6759bc8 100644 --- a/frontend/src/entry/CreateEntry.tsx +++ b/frontend/src/entry/CreateEntry.tsx @@ -1,4 +1,4 @@ -import { ArrowBack, FileUpload, FolderCopy, Lock, LockOpen } from '@mui/icons-material' +import { ArrowBack, FileUpload, FolderCopy, Gavel, Lock, LockOpen } from '@mui/icons-material' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import LoadingButton from '@mui/lab/LoadingButton' import { @@ -62,8 +62,8 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr const [collaborators, setCollaborators] = useState( currentUser ? [{ entity: `${EntityKind.USER}:${currentUser?.dn}`, roles: ['owner'] }] : [], ) - const [ungovernedAccess, setungovernedAccess] = useState(false) - const [allowTemplating, setAllowTemplating] = useState(true) + const [ungovernedAccess, setungovernedAccess] = useState(false) + const [allowTemplating, setAllowTemplating] = useState(false) const [errorMessage, setErrorMessage] = useState('') const [loading, setLoading] = useState(false) @@ -150,6 +150,20 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) } + const ungovAccessLabel = () => { + return ( + + + + Ungoverned Access Requests + + {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`} + + + + ) + } + if (isCurrentUserError) { return } @@ -194,36 +208,24 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr Access control - - setVisibility(e.target.value as EntryForm['visibility'])} - > - } - label={publicLabel()} - data-test='publicButtonSelector' - /> - } - label={privateLabel()} - data-test='privateButtonSelector' - /> - setAllowTemplating(event.target.checked)} - checked={allowTemplating} - /> - } - label={templateLabel()} - /> - - + setVisibility(e.target.value as EntryForm['visibility'])} + > + } + label={publicLabel()} + data-test='publicButtonSelector' + /> + } + label={privateLabel()} + data-test='privateButtonSelector' + /> + - setungovernedAccess(e.target.checked)} - checked={ungovernedAccess} - size='small' - /> - } - /> + + + Additional settings + + setungovernedAccess(e.target.checked)} + checked={ungovernedAccess} + size='small' + /> + } + /> + setAllowTemplating(event.target.checked)} + checked={allowTemplating} + size='small' + /> + } + label={templateLabel()} + /> + From d8d46d3b84eebdf24b9f8d64fbaf16c94be253bd Mon Sep 17 00:00:00 2001 From: KW86022 <184099420+KW86022@users.noreply.github.com> Date: Tue, 15 Oct 2024 12:11:17 +0000 Subject: [PATCH 3/5] Optimise the rendering of the settings buttons by utilising shallow routing and memoization --- frontend/src/entry/CreateEntry.tsx | 64 ++++++++++++++++++------------ 1 file changed, 38 insertions(+), 26 deletions(-) diff --git a/frontend/src/entry/CreateEntry.tsx b/frontend/src/entry/CreateEntry.tsx index 7f6759bc8..7f4f8e881 100644 --- a/frontend/src/entry/CreateEntry.tsx +++ b/frontend/src/entry/CreateEntry.tsx @@ -7,7 +7,6 @@ import { AccordionSummary, Box, Button, - Checkbox, Divider, FormControlLabel, Paper, @@ -136,32 +135,46 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) } - const templateLabel = () => { - return ( - - - - Templating - - {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`} - + const handleShallowRouting = () => { + if (router.pathname !== '/entry/new') { + router.push('/entry/new', undefined, { shallow: true }) + } + } + + const TemplateLabel = ({ createEntryKind }) => { + const CreateTemplateLabel = useMemo(() => { + return ( + + + + Templating + + {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`} + + - - ) + ) + }, [createEntryKind]) + + return CreateTemplateLabel } - const ungovAccessLabel = () => { - return ( - - - - Ungoverned Access Requests - - {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`} - + const UngovernedAccessLabel = ({ createEntryKind }) => { + const createUngovernedAccessLabel = useMemo(() => { + return ( + + + + Ungoverned Access Requests + + {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`} + + - - ) + ) + }, [createEntryKind]) + + return createUngovernedAccessLabel } if (isCurrentUserError) { @@ -263,7 +276,6 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr Additional settings setungovernedAccess(e.target.checked)} @@ -271,9 +283,9 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr size='small' /> } + label={UngovernedAccessLabel({ createEntryKind })} /> setAllowTemplating(event.target.checked)} @@ -281,7 +293,7 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr size='small' /> } - label={templateLabel()} + label={TemplateLabel({ createEntryKind })} /> From 236c0ea4e0a3c8d3aca90396dbc93254a8da51f8 Mon Sep 17 00:00:00 2001 From: KW86022 <184099420+KW86022@users.noreply.github.com> Date: Tue, 15 Oct 2024 12:18:08 +0000 Subject: [PATCH 4/5] remove shallow routing code --- frontend/src/entry/CreateEntry.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/frontend/src/entry/CreateEntry.tsx b/frontend/src/entry/CreateEntry.tsx index 7f4f8e881..01b371d72 100644 --- a/frontend/src/entry/CreateEntry.tsx +++ b/frontend/src/entry/CreateEntry.tsx @@ -135,16 +135,10 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) } - const handleShallowRouting = () => { - if (router.pathname !== '/entry/new') { - router.push('/entry/new', undefined, { shallow: true }) - } - } - const TemplateLabel = ({ createEntryKind }) => { const CreateTemplateLabel = useMemo(() => { return ( - + Templating @@ -162,7 +156,7 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr const UngovernedAccessLabel = ({ createEntryKind }) => { const createUngovernedAccessLabel = useMemo(() => { return ( - + Ungoverned Access Requests From 808d4650e353f26437f4f7c3913c8c9f28fc70d5 Mon Sep 17 00:00:00 2001 From: KW86022 <184099420+KW86022@users.noreply.github.com> Date: Tue, 15 Oct 2024 15:37:51 +0000 Subject: [PATCH 5/5] added useMemo to labels defined as constants --- frontend/src/entry/CreateEntry.tsx | 72 +++++++++++++----------------- 1 file changed, 32 insertions(+), 40 deletions(-) diff --git a/frontend/src/entry/CreateEntry.tsx b/frontend/src/entry/CreateEntry.tsx index 01b371d72..965995ba2 100644 --- a/frontend/src/entry/CreateEntry.tsx +++ b/frontend/src/entry/CreateEntry.tsx @@ -107,7 +107,7 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr } } - const privateLabel = () => { + const privateLabel = useMemo(() => { return ( @@ -119,9 +119,9 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) - } + }, [createEntryKind]) - const publicLabel = () => { + const publicLabel = useMemo(() => { return ( @@ -133,43 +133,35 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr ) - } + }, [createEntryKind]) - const TemplateLabel = ({ createEntryKind }) => { - const CreateTemplateLabel = useMemo(() => { - return ( - - - - Templating - - {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`} - - + const allowTemplatingLabel = useMemo(() => { + return ( + + + + Templating + + {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`} + - ) - }, [createEntryKind]) - - return CreateTemplateLabel - } + + ) + }, [createEntryKind]) - const UngovernedAccessLabel = ({ createEntryKind }) => { - const createUngovernedAccessLabel = useMemo(() => { - return ( - - - - Ungoverned Access Requests - - {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`} - - + const ungovernedAccessLabel = useMemo(() => { + return ( + + + + Ungoverned Access Requests + + {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`} + - ) - }, [createEntryKind]) - - return createUngovernedAccessLabel - } + + ) + }, [createEntryKind]) if (isCurrentUserError) { return @@ -223,13 +215,13 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr } - label={publicLabel()} + label={publicLabel} data-test='publicButtonSelector' /> } - label={privateLabel()} + label={privateLabel} data-test='privateButtonSelector' /> @@ -277,7 +269,7 @@ export default function CreateEntry({ createEntryKind, onBackClick }: CreateEntr size='small' /> } - label={UngovernedAccessLabel({ createEntryKind })} + label={ungovernedAccessLabel} /> } - label={TemplateLabel({ createEntryKind })} + label={allowTemplatingLabel} />