Added templating and access requests buttons to the new model create screen

[ghost]

[CLAassistant]

All committers have signed the CLA.

[ARADDCC002]

boolean and string can be inferred from their defaults so we don't need to declare the types, so we can just do useState(false).

[ARADDCC002]

We don't need to use this <Box/> component here

[ARADDCC002]

The option to allow for templating should appear at the bottom of the expansion menu under or above the choice to allow for ungoverned access. Although I can see why you'd put it under "Access control", this section is accessing the model card page - easy mistake to make though!

[ARADDCC002]

I would put the "allow templating" option here, and I'd suggest adding a sub-heading of "Additional settings", a bit like how the user selector appears under the heading of "Manage access list".

To easily space out different components you can use the MUI <Stack /> component, which works like so:

<Stack spacing={2}>
  <Typography>This is some text!</Typography>
  <Typography>This is some more text!</Typography>
</Stack>

[ghost]

[ARADDCC002]

const templateLabel = useMemo(() => {

[ARADDCC002]

const ungovAccessLabel = useMemo(() => {

I'd also consider renaming this to ungovernedAccessLabel as well

[ghost]

no UI changes

[ARADDCC012]

This should just be (I suggest changing the name to be clear that it in itself isn't a template):

const allowTemplatingLabel = useMemo(() => {
      return (
        <Stack direction='row' justifyContent='center' alignItems='center' spacing={1}>
          <FolderCopy />
          <Stack sx={{ my: 1 }}>
            <Typography fontWeight='bold'>Templating</Typography>
            <Typography variant='caption'>
              {`Allow this to be used as a template for another ${EntryKindLabel[createEntryKind]}`}
            </Typography>
          </Stack>
        </Stack>
      )
    }, [createEntryKind])

It's important to note that hooks in react have to be called in the same order on every render cycle, so they should always be defined at the base of the component.

I suggest having a quick read on how memo hooks work in particular, but in short this is for performance reasons. https://react.dev/reference/react/useMemo

[ARADDCC012]

Same here, this should be:

    const ungovernedAccessLabel = useMemo(() => {
      return (
        <Stack direction='row' justifyContent='center' alignItems='center' spacing={1}>
          <Gavel />
          <Stack sx={{ my: 1 }}>
            <Typography fontWeight='bold'>Ungoverned Access Requests</Typography>
            <Typography variant='caption'>
              {`Allow users to request access without the need for authorisation from ${EntryKindLabel[createEntryKind]} owners`}
            </Typography>
          </Stack>
        </Stack>
      )
    }, [createEntryKind])

[ARADDCC012]

This should be label={ungovernedAccessLabel}

[ARADDCC012]

This should be label={allowTemplatingLabel}