PIMS-680/1294: Admin Users View UI & Access Request Submission

react-app/src/components/dialog/BaseDialog.tsx

@@ -0,0 +1,21 @@
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import React, { PropsWithChildren } from 'react';
+
+export interface IBaseDialog extends PropsWithChildren {
+  open: boolean;
+  title: string;
+  actions: JSX.Element;
+}
+
+const BaseDialog = (props: IBaseDialog) => {
+  const { open, title, children, actions } = props;
+  return (
+    <Dialog PaperProps={{ sx: { padding: '2rem' } }} open={open}>
+      <DialogTitle variant="h2">{title}</DialogTitle>
+      <DialogContent>{children}</DialogContent>
+      <DialogActions sx={{ alignSelf: 'center' }}>{actions}</DialogActions>
+    </Dialog>
+  );
+};
+
+export default BaseDialog;

react-app/src/components/dialog/ConfirmDialog.tsx

@@ -0,0 +1,36 @@
+import { ButtonProps } from '@mui/material';
+import BaseDialog from './BaseDialog';
+import DualActionButtons from './DualActionButtons';
+import React, { PropsWithChildren } from 'react';
+
+interface IConfirmDialog extends PropsWithChildren {
+  title: string;
+  open: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmButtonText?: string;
+  confirmButtonProps?: ButtonProps;
+}
+
+const ConfirmDialog = (props: IConfirmDialog) => {
+  const { title, open, onConfirm, onCancel, confirmButtonProps, confirmButtonText, children } = props;
+  return (
+    <BaseDialog
+      open={open}
+      title={title}
+      actions={
+        <DualActionButtons
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+          cancelText={'Cancel'}
+          confirmButtonProps={confirmButtonProps}
+          confirmText={confirmButtonText ?? 'Confirm'}
+        />
+      }
+    >
+      {children}
+    </BaseDialog>
+  );
+};
+
+export default ConfirmDialog;

react-app/src/components/dialog/DeleteDialog.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Box, TextField, Typography } from '@mui/material';
+import ConfirmDialog from './ConfirmDialog';
+
+interface IDeleteDialog {
+  open: boolean;
+  title: string;
+  message: string;
+  deleteText?: string;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+const DeleteDialog = (props: IDeleteDialog) => {
+  const { open, title, message, deleteText, onDelete, onClose } = props;
+  const [textFieldValue, setTextFieldValue] = useState('');
+  return (
+    <ConfirmDialog
+      open={open}
+      title={title}
+      onConfirm={onDelete}
+      onCancel={onClose}
+      confirmButtonText={deleteText}
+      confirmButtonProps={{ color: 'warning', disabled: textFieldValue.toLowerCase() != 'delete' }}
+    >
+      <Box display={'flex'} flexDirection={'column'} gap={'1rem'}>
+        <Typography>{message}</Typography>
+        <Typography>To confirm deletion, please type Delete below.</Typography>
+        <TextField
+          value={textFieldValue}
+          onChange={(event) => {
+            setTextFieldValue(event.target.value);
+          }}
+        />
+      </Box>
+    </ConfirmDialog>
+  );
+};
+
+export default DeleteDialog;

react-app/src/components/dialog/DualActionButtons.tsx

@@ -0,0 +1,35 @@
+import { Box, Button, ButtonProps } from '@mui/material';
+import React from 'react';
+
+interface IDualActionButtons {
+  onCancel: () => void;
+  onConfirm: () => void;
+  confirmText: string;
+  cancelText: string;
+  confirmButtonProps?: ButtonProps;
+}
+
+const DualActionButtons = (props: IDualActionButtons) => {
+  const { onConfirm, onCancel, confirmText, cancelText, confirmButtonProps } = props;
+  return (
+    <Box display={'flex'} gap={'1rem'}>
+      <Button
+        variant="outlined"
+        style={{ fontWeight: 'bold', color: 'black', border: '1px solid lightgrey' }}
+        onClick={() => onCancel()}
+      >
+        {cancelText}
+      </Button>
+      <Button
+        sx={{ fontWeight: 'bold' }}
+        variant="contained"
+        onClick={() => onConfirm()}
+        {...confirmButtonProps}
+      >
+        {confirmText}
+      </Button>
+    </Box>
+  );
+};
+
+export default DualActionButtons;

react-app/src/components/display/DataCard.tsx

@@ -0,0 +1,68 @@
+import { columnNameFormatter, dateFormatter } from '@/utils/formatters';
+import { Box, Button, CardContent, CardHeader, Divider, Typography } from '@mui/material';
+import Card from '@mui/material/Card';
+import React from 'react';
+
+interface IDataCard<T> {
+  values: T;
+  title: string;
+  onEdit: () => void;
+  customFormatter?: (key: keyof T, value: any) => string | JSX.Element | undefined;
+}
+
+const DataCard = <T,>(props: IDataCard<T>) => {
+  const { values, title, customFormatter, onEdit } = props;
+
+  const defaultFormatter = (key: keyof T, val: any) => {
+    const customFormat = customFormatter?.(key, val);
+    if (customFormat) {
+      return customFormat;
+    }
+
+    if (val instanceof Date) {
+      return <Typography>{dateFormatter(val)}</Typography>;
+    }
+
+    return <Typography>{val}</Typography>;
+  };
+
+  return (
+    <Card variant="outlined" sx={{ padding: '2rem', minWidth: '34rem', backgroundColor: 'white' }}>
+      <CardHeader
+        titleTypographyProps={{ variant: 'h1' }}
+        sx={{
+          '.MuiCardHeader-action': {
+            alignSelf: 'center',
+            marginRight: '0px',
+          },
+          mb: '1rem',
+        }}
+        title={title}
+        action={
+          <Button
+            sx={{ minWidth: '50px', fontWeight: 'bold' }}
+            onClick={() => onEdit()}
+            color={'primary'}
+          >
+            Edit
+          </Button>
+        }
+      />
+      <CardContent>
+        {Object.keys(values).map((key, idx) => (
+          <React.Fragment key={`card-data-fragment-${idx}-${key}`}>
+            <Box display={'flex'} flexDirection={'row'}>
+              <Typography width={'150px'} fontWeight={'bold'}>
+                {columnNameFormatter(key)}
+              </Typography>
+              {defaultFormatter(key as keyof T, values[key])}
+            </Box>
+            {idx < Object.keys(values).length - 1 && <Divider sx={{ mt: '1rem', mb: '1rem' }} />}
+          </React.Fragment>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DataCard;

react-app/src/components/form/AutocompleteField.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom';
+import AutocompleteFormField from './AutocompleteFormField';
+
+jest.mock('react-hook-form', () => ({
+  ...jest.requireActual('react-hook-form'),
+  Controller: () => <></>,
+  useForm: () => ({
+    control: () => ({}),
+    handleSubmit: () => jest.fn(),
+  }),
+  useFormContext: () => ({
+    control: () => ({}),
+  }),
+}));
+
+describe('', () => {
+  it('should render', () => {
+    render(
+      <AutocompleteFormField
+        name={'test'}
+        label={'test'}
+        options={[
+          {
+            label: 'a',
+            value: 'a',
+          },
+        ]}
+      />,
+    );
+  });
+});

react-app/src/components/form/AutocompleteFormField.tsx

@@ -11,7 +11,7 @@ interface IAutocompleteProps {
 }
 
 const AutocompleteFormField = (props: IAutocompleteProps) => {
-  const { control } = useFormContext();
+  const { control, getValues } = useFormContext();
   const { name, options, label, sx } = props;
   return (
     <Controller
@@ -20,12 +20,13 @@ const AutocompleteFormField = (props: IAutocompleteProps) => {
       render={({ field: { onChange } }) => (
         <Autocomplete
           freeSolo={false}
-          disablePortal
+          disablePortal={false}
           id={`autocompleteinput-${label}`}
           options={options}
           sx={sx}
           renderInput={(params) => <TextField {...params} label={label} />}
           onChange={(_, data) => onChange(data.value)}
+          defaultValue={options.find((option) => option.value === getValues()[name])}
           {...props}
         />
       )}