Merge pull request #314 from Smithsonian/develop

v0.9.6 RC2
Smithsonian · Feb 2, 2022 · 47f017c · 47f017c
2 parents 4484e52 + 6e88180
commit 47f017c
Show file tree

Hide file tree

Showing 182 changed files with 4,641 additions and 3,698 deletions.
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dpo-packrat/client",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "private": true,
   "license": "Apache-2.0",
   "description": "Client for Packrat",

diff --git a/client/src/components/controls/CheckboxField.tsx b/client/src/components/controls/CheckboxField.tsx
@@ -21,18 +21,24 @@ interface CheckboxFieldProps extends ViewableProps {
     onChange: ((event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
     required?: boolean;
     tooltip?: any;
+    valueLeftAligned?: boolean;
+    gridValue?: number;
+    gridLabel?: number;
+    padding?: string;
+    gridGap?: string;
+    containerStyle?: any;
 }
 
-const CheckboxNoPadding = withStyles({
+export const CheckboxNoPadding = withStyles({
     root: {
         border: '0px',
         padding: '0px'
     }
 })(Checkbox);
 
 function CheckboxField(props: CheckboxFieldProps): React.ReactElement {
-    const { label, name, value, onChange, required = false, viewMode = false, disabled = false, updated = false, tooltip } = props;
-    const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
+    const { label, name, value, onChange, required = false, viewMode = false, disabled = false, updated = false, tooltip, valueLeftAligned = false, gridValue, gridLabel, padding, gridGap, containerStyle } = props;
+    const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0, ...containerStyle } };
     const checkbox = (
         <CheckboxNoPadding
             name={name}
@@ -41,15 +47,22 @@ function CheckboxField(props: CheckboxFieldProps): React.ReactElement {
             onChange={onChange}
             {...getUpdatedCheckboxProps(updated)}
             inputProps={{ 'title': name }}
+            size='small'
         />
     );
+
     return (
         <FieldType
             required={required}
             label={label}
             direction='row'
             containerProps={rowFieldProps}
             width={viewMode ? 'auto' : undefined}
+            valueLeftAligned={valueLeftAligned}
+            gridValue={gridValue}
+            gridLabel={gridLabel}
+            padding={padding}
+            gridGap={gridGap}
         >
             {tooltip ? (
                 <Tooltip {...tooltip}>

diff --git a/client/src/components/controls/DateInputField.tsx b/client/src/components/controls/DateInputField.tsx
@@ -14,33 +14,47 @@ import { ViewableProps } from '../../types/repository';
 
 const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     date: {
-        width: '50%',
         background: palette.background.paper,
-        border: (updated: boolean) => `1px solid ${fade(updated ? palette.secondary.main : palette.primary.contrastText, 0.4)}`,
-        backgroundColor: (updated: boolean) => (updated ? palette.secondary.light : palette.background.paper),
-        padding: '1px 8px',
+        border: ({ updated }: DateInputFieldProps) => `1px solid ${fade(updated ? palette.secondary.main : palette.primary.contrastText, 0.4)}`,
+        backgroundColor: ({ updated }: DateInputFieldProps) => (updated ? palette.secondary.light : palette.background.paper),
+        paddingLeft: '10px',
+        paddingRight: '10px',
         color: Colors.defaults.white,
         marginTop: 0,
         fontFamily: typography.fontFamily,
+        '& > div > input': {
+            fontSize: '0.8rem',
+        },
         [breakpoints.down('lg')]: {
-            minWidth: 160,
-            maxWidth: 160,
-            '& > div > input': {
-                fontSize: '0.8em'
+            '& > div':  {
+                width: '97px'
+            }
+        },
+        [breakpoints.up('xl')]: {
+            '& > div': {
+                width: '114px'
             }
         },
-        marginBottom: 0
+        borderRadius: 5,
+        marginBottom: 0,
+        height: ({ dateHeight }: DateInputFieldProps) => dateHeight ? dateHeight : undefined,
+        alignItems: 'baseline',
+        '& .MuiSvgIcon-root': {
+            height: 20,
+            width: 20
+        }
     }
 }));
 
 interface DateInputFieldProps extends ViewableProps {
     value: Date | null | string;
     onChange: (date: MaterialUiPickersDate, value?: string | null | undefined) => void;
+    dateHeight?: string;
 }
 
 function DateInputField(props: DateInputFieldProps): React.ReactElement {
-    const { value, onChange, disabled = false, updated = false } = props;
-    const classes = useStyles(updated);
+    const { value, onChange, disabled = false } = props;
+    const classes = useStyles(props);
 
     return (
         <MuiPickersUtilsProvider utils={DateFnsUtils}>
@@ -49,11 +63,13 @@ function DateInputField(props: DateInputFieldProps): React.ReactElement {
                 disableToolbar
                 variant='inline'
                 format='MM/dd/yyyy'
-                margin='normal'
                 value={value}
                 className={classes.date}
-                InputProps={{ disableUnderline: true }}
+                InputProps={{ disableUnderline: true, style: { height: '100%' } }}
                 onChange={onChange}
+                autoOk
+                inputProps={{ style: { alignSelf: 'center' } }}
+                KeyboardButtonProps={{ style: { padding: 0 }, size: 'small' }}
             />
         </MuiPickersUtilsProvider>
     );

diff --git a/client/src/components/controls/DebounceNumberInput.tsx b/client/src/components/controls/DebounceNumberInput.tsx
@@ -15,14 +15,14 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
         backgroundColor: (updated: boolean) => updated ? palette.secondary.light : palette.background.paper,
         padding: 8,
         borderRadius: 5,
-        marginLeft: 5,
         fontWeight: typography.fontWeightRegular,
         fontFamily: typography.fontFamily,
+        fontSize: '0.8em',
         [breakpoints.down('lg')]: {
-            fontSize: '0.8em',
             minWidth: 50,
-            maxWidth: 50,
-        }
+            maxWidth: 50
+        },
+        height: 3
     }
 }));
 

diff --git a/client/src/components/controls/IndentedReadOnlyRow.tsx b/client/src/components/controls/IndentedReadOnlyRow.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
         display: 'grid',
         alignItems: 'center',
         gridTemplateColumns: ({ indentation }: IndentedReadOnlyRowProps) => indentation ? `${15*indentation}px 20% 15px 1fr` : '15px 20% 15px 1fr',
-        padding: 10,
+        padding: ({ padding }: IndentedReadOnlyRowProps) => padding ? padding : '0px 10px',
         borderRadius: 5,
         width: ({ width }: IndentedReadOnlyRowProps) => width || '100%',
         marginTop: ({ marginTop }: IndentedReadOnlyRowProps) => spacing(marginTop || 0),
@@ -53,6 +53,7 @@ interface IndentedReadOnlyRowProps {
     labelTooltip?: string;
     value: string | number | null;
     indentation?: number;
+    padding?: string;
 }
 
 function IndentedReadOnlyRow(props: IndentedReadOnlyRowProps): React.ReactElement {

diff --git a/client/src/components/controls/InputField.tsx b/client/src/components/controls/InputField.tsx
@@ -19,11 +19,12 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
         borderRadius: 5,
         fontWeight: typography.fontWeightRegular,
         fontFamily: typography.fontFamily,
+        fontSize: '0.8em',
         [breakpoints.down('lg')]: {
-            fontSize: '0.8em',
             minWidth: 160,
             maxWidth: 160,
-        }
+        },
+        height: ({ inputHeight }: InputFieldProps ) => inputHeight ? inputHeight : 3,
     }
 }));
 
@@ -34,10 +35,16 @@ interface InputFieldProps extends ViewableProps {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     type?: string;
     error?: boolean;
+    valueLeftAligned?: boolean;
+    gridValue?: number;
+    gridLabel?: number;
+    padding?: string;
+    inputHeight?: string;
+    gridGap?: string;
 }
 
 function InputField(props: InputFieldProps): React.ReactElement {
-    const { label, name, value, onChange, type, required = false, viewMode = false, disabled = false } = props;
+    const { label, name, value, onChange, type, required = false, viewMode = false, disabled = false, valueLeftAligned = false, gridLabel, gridValue, padding, gridGap } = props;
     const classes = useStyles(props);
 
     const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
@@ -49,6 +56,11 @@ function InputField(props: InputFieldProps): React.ReactElement {
             direction='row'
             containerProps={rowFieldProps}
             width={viewMode ? 'auto' : undefined}
+            valueLeftAligned={valueLeftAligned}
+            gridLabel={gridLabel}
+            gridValue={gridValue}
+            padding={padding}
+            gridGap={gridGap}
         >
             <DebounceInput
                 element='input'

diff --git a/client/src/components/controls/ReadOnlyRow.tsx b/client/src/components/controls/ReadOnlyRow.tsx
@@ -17,12 +17,18 @@ interface ReadOnlyRowProps extends ViewableProps {
     gridTemplate?: string;
     width?: string;
     labelProps?: any;
+    valueLeftAligned?: boolean;
+    gridValue?: number;
+    gridLabel?: number;
+    paddingString?: string;
+    containerStyle?: any;
+    required?: boolean;
 }
 
 function ReadOnlyRow(props: ReadOnlyRowProps): React.ReactElement {
-    const { label, value, padding, gridTemplate, width, labelProps } = props;
+    const { label, value, padding, gridTemplate, width, labelProps, valueLeftAligned, gridValue, gridLabel, paddingString, containerStyle, required = false } = props;
 
-    const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
+    const rowFieldProps = { alignItems: 'baseline', justifyContent: 'space-between', style: { borderRadius: 0, ...containerStyle } };
     if (width) {
         rowFieldProps['style']['width'] = width;
     }
@@ -32,7 +38,7 @@ function ReadOnlyRow(props: ReadOnlyRowProps): React.ReactElement {
     }
 
     return (
-        <FieldType required={false} label={label} direction='row' containerProps={rowFieldProps} labelProps={labelProps}>
+        <FieldType label={label} direction='row' containerProps={rowFieldProps} labelProps={{ ...labelProps, style: { wordBreak: 'keep-all' } }} valueLeftAligned={valueLeftAligned} gridValue={gridValue} gridLabel={gridLabel} padding={paddingString} required={required}>
             <Box width='fit-content' textAlign='right'>
                 <Typography variant='caption' style={{ fontFamily: 'Roboto, Helvetical, Arial, sans-serif', color: '#2C405A', overflowWrap: 'break-word', padding }}>
                     {value}

diff --git a/client/src/components/controls/RepositoryIcon.tsx b/client/src/components/controls/RepositoryIcon.tsx
@@ -20,17 +20,17 @@ export function RepositoryIcon(props: RepositoryIconProps): React.ReactElement {
     const { objectType, overrideText, makeStyles, idSystemObject } = props;
     const initial = !overrideText ? getTermForSystemObjectType(objectType).toUpperCase().slice(0, 1) : overrideText;
     return (
-        <div className={makeStyles?.container} style={{ backgroundColor: makeStyles?.backgroundColor }}>
-            <a
-                href={getDetailsUrlForObject(idSystemObject)}
-                onClick={event => event.stopPropagation()}
-                target='_blank'
-                rel='noopener noreferrer'
-                aria-label={`link to view system object of id ${idSystemObject}`}
-                style={{ textDecoration: 'none' }}
-            >
+        <a
+            href={getDetailsUrlForObject(idSystemObject)}
+            onClick={event => event.stopPropagation()}
+            target='_blank'
+            rel='noopener noreferrer'
+            aria-label={`link to view system object of id ${idSystemObject}`}
+            style={{ textDecoration: 'none' }}
+        >
+            <div className={makeStyles?.container} style={{ backgroundColor: makeStyles?.backgroundColor }}>
                 <p className={makeStyles?.initial} style={{ color: '#232023' }}>{initial}</p>
-            </a>
-        </div>
+            </div>
+        </a>
     );
 }
diff --git a/client/src/components/controls/SelectField.tsx b/client/src/components/controls/SelectField.tsx
@@ -12,39 +12,49 @@ import { VocabularyOption } from '../../store';
 import { ViewableProps } from '../../types/repository';
 import FieldType from '../shared/FieldType';
 
-const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
+export const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     select: {
-        width: '54%',
+        width: ({ selectFitContent }: SelectFieldProps) => selectFitContent ? 'fit-content' : '54%',
         padding: '0px 10px',
         background: palette.background.paper,
-        border: (updated: boolean) => `1px solid ${fade(updated ? palette.secondary.main : palette.primary.contrastText, 0.4)}`,
-        backgroundColor: (updated: boolean) => (updated ? palette.secondary.light : palette.background.paper),
+        border: ({ updated }: SelectFieldProps) => `1px solid ${fade(updated ? palette.secondary.main : palette.primary.contrastText, 0.4)}`,
+        backgroundColor: ({ updated }: SelectFieldProps) => (updated ? palette.secondary.light : palette.background.paper),
         borderRadius: 5,
         fontFamily: typography.fontFamily,
+        fontSize: '0.8em',
         [breakpoints.down('lg')]: {
-            fontSize: '0.8em',
-            minWidth: 180,
-            maxWidth: 180
+            minWidth: 180
+        },
+        height: ({ selectHeight }: SelectFieldProps ) => selectHeight ? selectHeight : undefined,
+        '& .MuiSelect-selectMenu': {
+            textOverflow: 'clip'
         }
     }
 }));
 
-interface SelectFieldProps extends ViewableProps {
+export interface SelectFieldProps extends ViewableProps {
     label: string;
     value: number | null;
     name: string;
     options: VocabularyOption[];
     error?: boolean;
     width?: string;
     onChange: (event: React.ChangeEvent<unknown>) => void;
+    valueLeftAligned?: boolean;
+    gridLabel?: number;
+    gridValue?: number;
+    padding?: string;
+    selectFitContent?: boolean;
+    selectHeight?: string;
+    gridGap?: string;
 }
 
 function SelectField(props: SelectFieldProps): React.ReactElement {
-    const { label, value, name, width, required, error, options, onChange, viewMode = false, disabled = false, updated = false } = props;
+    const { label, value, name, width, required, error, options, onChange, viewMode = false, disabled = false, valueLeftAligned = false, gridLabel, gridValue, padding, gridGap } = props;
 
-    const classes = useStyles(updated);
+    const classes = useStyles(props);
 
-    const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
+    const rowFieldProps = { alignItems: 'center', style: { borderRadius: 0 } };
 
     return (
         <FieldType
@@ -54,8 +64,13 @@ function SelectField(props: SelectFieldProps): React.ReactElement {
             direction='row'
             containerProps={rowFieldProps}
             width={width || viewMode ? 'auto' : undefined}
+            valueLeftAligned={valueLeftAligned}
+            gridLabel={gridLabel}
+            gridValue={gridValue}
+            padding={padding}
+            gridGap={gridGap}
         >
-            <Select value={value || ''} className={classes.select} name={name} onChange={onChange} disabled={disabled} disableUnderline inputProps={{ 'title': `${name} select` }}>
+            <Select value={value || ''} className={classes.select} name={name} onChange={onChange} disabled={disabled} disableUnderline inputProps={{ 'title': `${name} select`, style: { width: '100%' } }}>
                 {options.map(({ idVocabulary, Term }, index) => (
                     <MenuItem key={index} value={idVocabulary}>
                         {Term}

diff --git a/client/src/components/controls/TextArea.tsx b/client/src/components/controls/TextArea.tsx
@@ -16,7 +16,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
         width: '80%',
         padding: 10,
         resize: 'none',
-        overflow: 'scroll',
         border: `${palette.primary.contrastText}, 0.4`,
         backgroundColor: palette.background.paper,
         borderRadius: 5,
@@ -50,6 +49,7 @@ function TextArea(props: TextAreaProps): React.ReactElement {
                 direction='row'
                 containerProps={rowFieldProps}
                 width={viewMode ? 'auto' : undefined}
+                padding='10px'
             >
                 <DebounceInput
                     forceNotifyByEnter={false}

diff --git a/client/src/components/shared/AssetIdentifiers.tsx b/client/src/components/shared/AssetIdentifiers.tsx
@@ -81,7 +81,7 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
 
     return (
         <Box marginBottom='10px'>
-            <FieldType required label='Asset Identifier(s)'>
+            <FieldType required label='Asset Identifier(s)' padding='10px'>
                 <Box display='flex' justifyContent='space-between'>
                     <Box className={classes.assetIdentifier}>
                         <label htmlFor='systemCreated' style={{ display: 'none' }}>System Created Identifier</label>