From 8f4ded6cdf1ff2969c2cd9a0fc2970e69e2e7044 Mon Sep 17 00:00:00 2001 From: GrahamS-Quartech <112989452+GrahamS-Quartech@users.noreply.github.com> Date: Fri, 16 Feb 2024 16:54:39 -0800 Subject: [PATCH 1/4] PIMS-1338: Frontend feedback access requests/user table (#2194) Co-authored-by: dbarkowsky --- react-app/src/App.tsx | 2 +- react-app/src/assets/images/BCGOV_logo.svg | 22 ++ .../components/form/AutocompleteFormField.tsx | 23 +- .../components/layout/Footer.test.tsx.snap | 4 +- react-app/src/components/layout/Footer.tsx | 4 +- react-app/src/components/layout/Header.tsx | 11 +- react-app/src/components/users/UsersTable.tsx | 264 +++++++++--------- react-app/src/pages/AccessRequest.tsx | 30 +- react-app/src/themes/appTheme.ts | 4 +- react-app/src/utils/formatters.tsx | 2 +- 10 files changed, 215 insertions(+), 151 deletions(-) create mode 100644 react-app/src/assets/images/BCGOV_logo.svg diff --git a/react-app/src/App.tsx b/react-app/src/App.tsx index 8fadbd200..0bf5076a0 100644 --- a/react-app/src/App.tsx +++ b/react-app/src/App.tsx @@ -28,7 +28,7 @@ const Router = () => { + diff --git a/react-app/src/assets/images/BCGOV_logo.svg b/react-app/src/assets/images/BCGOV_logo.svg new file mode 100644 index 000000000..20738f558 --- /dev/null +++ b/react-app/src/assets/images/BCGOV_logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/react-app/src/components/form/AutocompleteFormField.tsx b/react-app/src/components/form/AutocompleteFormField.tsx index a9b3e9923..8df67f964 100644 --- a/react-app/src/components/form/AutocompleteFormField.tsx +++ b/react-app/src/components/form/AutocompleteFormField.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Autocomplete, SxProps, TextField } from '@mui/material'; +import { Autocomplete, SxProps, TextField, Paper } from '@mui/material'; import { ISelectMenuItem } from './SelectFormField'; import { Controller, useFormContext } from 'react-hook-form'; @@ -8,23 +8,38 @@ interface IAutocompleteProps { label: string; options: ISelectMenuItem[]; sx?: SxProps; + required?: boolean; } +const CustomPaper = (props) => { + return ; +}; + const AutocompleteFormField = (props: IAutocompleteProps) => { - const { control, getValues } = useFormContext(); - const { name, options, label, sx } = props; + const { control, getValues, formState } = useFormContext(); + const { name, options, label, sx, required } = props; return ( ( } + renderInput={(params) => ( + + )} onChange={(_, data) => onChange(data.value)} value={options.find((option) => option.value === getValues()[name]) ?? null} {...props} diff --git a/react-app/src/components/layout/Footer.test.tsx.snap b/react-app/src/components/layout/Footer.test.tsx.snap index b3ff0c16f..9346c10b3 100644 --- a/react-app/src/components/layout/Footer.test.tsx.snap +++ b/react-app/src/components/layout/Footer.test.tsx.snap @@ -3,10 +3,10 @@ exports[`Footer.tsx should match the existing snapshot 1`] = `