Merge pull request #301 from Smithsonian/develop

v0.9.5 Release Candidate 1
Smithsonian · Jan 17, 2022 · ae20634 · ae20634
2 parents 8268a00 + 1eb4352
commit ae20634
Show file tree

Hide file tree

Showing 189 changed files with 4,979 additions and 3,319 deletions.
diff --git a/.gitignore b/.gitignore
@@ -112,6 +112,6 @@ build
 
 ### Custom ###
 server/var
-server/tests/mock/models/**/eremotherium_laurillardi*
+server/tests/mock/models/
 server/config/solr/data/packrat/data
-server/config/solr/data/packratMeta/data
+server/config/solr/data/packratMeta/data
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dpo-packrat/client",
-  "version": "0.9.0",
+  "version": "0.9.5",
   "private": true,
   "license": "Apache-2.0",
   "description": "Client for Packrat",

diff --git a/client/public/robots.txt b/client/public/robots.txt
@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+# remove Disallows to allow SortSite or crawler services to work
+Disallow: /
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
@@ -32,12 +32,7 @@ export default class API {
     }
 
     static async request(route: string, options: RequestInit = {}): Promise<any> {
-        const { REACT_APP_PACKRAT_SERVER_ENDPOINT } = process.env;
-
-        if (!REACT_APP_PACKRAT_SERVER_ENDPOINT) {
-            throw new Error('REACT_APP_PACKRAT_SERVER_ENDPOINT was not provided to rest api client');
-        }
-
+        const serverEndpoint = API.serverEndpoint();
         const defaultOptions: RequestInit = {
             headers: {
                 'Content-Type': 'application/json'
@@ -46,6 +41,18 @@ export default class API {
             ...options
         };
 
-        return fetch(`${REACT_APP_PACKRAT_SERVER_ENDPOINT}/${route}`, defaultOptions).then(response => response.json());
+        return fetch(`${serverEndpoint}/${route}`, defaultOptions).then(response => response.json());
+    }
+
+    static serverEndpoint(): string {
+        // If we're accessing Packrat via Telework, hard-code server path to the server directory of the host root
+        if (window.location.hostname === 'packrat-telework.si.edu')
+            return 'https://packrat-telework.si.edu/server';
+
+        const { REACT_APP_PACKRAT_SERVER_ENDPOINT } = process.env;
+        if (!REACT_APP_PACKRAT_SERVER_ENDPOINT)
+            throw new Error('REACT_APP_PACKRAT_SERVER_ENDPOINT is not defined!');
+
+        return REACT_APP_PACKRAT_SERVER_ENDPOINT;
     }
 }
diff --git a/client/src/components/controls/CheckboxField.tsx b/client/src/components/controls/CheckboxField.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /**
  * CheckboxField
  *
  * This component renders checkbox field used in ingestion and repository UI.
  */
-import { Checkbox } from '@material-ui/core';
+import { Checkbox, Tooltip } from '@material-ui/core';
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 
@@ -18,6 +20,7 @@ interface CheckboxFieldProps extends ViewableProps {
     value: boolean | null;
     onChange: ((event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
     required?: boolean;
+    tooltip?: any;
 }
 
 const CheckboxNoPadding = withStyles({
@@ -28,9 +31,18 @@ const CheckboxNoPadding = withStyles({
 })(Checkbox);
 
 function CheckboxField(props: CheckboxFieldProps): React.ReactElement {
-    const { label, name, value, onChange, required = false, viewMode = false, disabled = false, updated = false } = props;
+    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 checkbox = (
+        <CheckboxNoPadding
+            name={name}
+            disabled={disabled}
+            checked={withDefaultValueBoolean(value, false)}
+            onChange={onChange}
+            {...getUpdatedCheckboxProps(updated)}
+            inputProps={{ 'title': name }}
+        />
+    );
     return (
         <FieldType
             required={required}
@@ -39,13 +51,11 @@ function CheckboxField(props: CheckboxFieldProps): React.ReactElement {
             containerProps={rowFieldProps}
             width={viewMode ? 'auto' : undefined}
         >
-            <CheckboxNoPadding
-                name={name}
-                disabled={disabled}
-                checked={withDefaultValueBoolean(value, false)}
-                onChange={onChange}
-                {...getUpdatedCheckboxProps(updated)}
-            />
+            {tooltip ? (
+                <Tooltip {...tooltip}>
+                    {checkbox}
+                </Tooltip>
+            ) : checkbox}
         </FieldType>
     );
 }

diff --git a/client/src/components/controls/DebounceNumberInput.tsx b/client/src/components/controls/DebounceNumberInput.tsx
@@ -11,7 +11,6 @@ import { ViewableProps } from '../../types/repository';
 const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     input: {
         width: '16%',
-        outline: 'none',
         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: 8,
@@ -47,6 +46,7 @@ function DebounceNumberInput(props: DebounceNumberInputProps): React.ReactElemen
             disabled={disabled}
             onChange={onChange}
             debounceTimeout={400}
+            title={name}
         />
     );
 }

diff --git a/client/src/components/controls/IndentedReadOnlyRow.tsx b/client/src/components/controls/IndentedReadOnlyRow.tsx
@@ -0,0 +1,87 @@
+/**
+ * IndentedReadOnlyRow
+ *
+ * This component is a replacement for ReadOnlyRow to allow indentation of the labels
+ */
+import { Box, BoxProps, PropTypes, Typography, TypographyProps } from '@material-ui/core';
+import { fade, makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import Progress from '../shared/Progress';
+
+const useStyles = makeStyles(({ palette, spacing }) => ({
+    container: {
+        display: 'grid',
+        alignItems: 'center',
+        gridTemplateColumns: ({ indentation }: IndentedReadOnlyRowProps) => indentation ? `${15*indentation}px 20% 15px 1fr` : '15px 20% 15px 1fr',
+        padding: 10,
+        borderRadius: 5,
+        width: ({ width }: IndentedReadOnlyRowProps) => width || '100%',
+        marginTop: ({ marginTop }: IndentedReadOnlyRowProps) => spacing(marginTop || 0),
+        backgroundColor: ({ required, error }: IndentedReadOnlyRowProps) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
+    },
+    label: {
+        color: 'auto',
+        gridColumnStart: 2,
+        gridColumnEnd: 3
+    },
+    loading: {
+        position: 'absolute',
+        top: 16,
+        right: 10
+    },
+    value: {
+        height: 'fit-content',
+        justifySelf: 'end',
+        gridColumnStart: -2,
+        gridColumnEnd: -1,
+        wordBreak: 'break-word'
+    }
+}));
+
+interface IndentedReadOnlyRowProps {
+    required?: boolean;
+    renderLabel?: boolean;
+    label?: string;
+    width?: string;
+    direction?: string;
+    containerProps?: BoxProps;
+    labelProps?: TypographyProps;
+    align?: PropTypes.Alignment;
+    marginTop?: number;
+    error?: boolean;
+    loading?: boolean;
+    labelTooltip?: string;
+    value: string | number | null;
+    indentation?: number;
+}
+
+function IndentedReadOnlyRow(props: IndentedReadOnlyRowProps): React.ReactElement {
+    const { label, renderLabel, align = 'left', direction, containerProps, labelProps, loading, value } = props;
+    const classes = useStyles(props);
+
+    let content: React.ReactNode = (
+        <Typography align={align} variant='caption' {...labelProps}>
+            {label}
+        </Typography>
+    );
+
+    if (renderLabel === false) {
+        content = null;
+    }
+
+    return (
+        <Box position='relative' className={classes.container} flexDirection={direction || 'row'} {...containerProps}>
+            <Box className={classes.label}>
+                {content}
+            </Box>
+            <Box className={classes.value}>
+                <Typography variant='caption' style={{ fontFamily: 'Roboto, Helvetical, Arial, sans-serif', color: '#2C405A', overflowWrap: 'break-word' }}>
+                    {value}
+                </Typography>
+            </Box>
+            {loading && <Progress className={classes.loading} size={15} />}
+        </Box>
+    );
+}
+
+export default IndentedReadOnlyRow;
diff --git a/client/src/components/controls/InputField.tsx b/client/src/components/controls/InputField.tsx
@@ -13,7 +13,6 @@ import FieldType from '../shared/FieldType';
 const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     input: {
         width: '50%',
-        outline: 'none',
         border: ({ updated }: InputFieldProps) => `1px solid ${fade(updated ? palette.secondary.main : palette.primary.contrastText, 0.4)}`,
         backgroundColor: ({ updated, error }: InputFieldProps) => error ? fade(palette.error.light, 0.3) : updated ? palette.secondary.light : palette.background.paper,
         padding: 8,
@@ -53,6 +52,7 @@ function InputField(props: InputFieldProps): React.ReactElement {
         >
             <DebounceInput
                 element='input'
+                title={name}
                 disabled={disabled}
                 value={value || ''}
                 className={classes.input}

diff --git a/client/src/components/controls/LoadingButton.tsx b/client/src/components/controls/LoadingButton.tsx
@@ -16,13 +16,15 @@ type LoadingButtonProps = ButtonProps & {
 
 const useStyles = makeStyles(({ typography }) => ({
     button: {
-        fontSize: typography.caption.fontSize
+        fontSize: typography.caption.fontSize,
+        outline: '0.5px hidden rgba(141, 171, 196, 0.4)'
     }
 }));
 
 function LoadingButton(props: LoadingButtonProps): React.ReactElement {
     const { loading, loaderSize, className, ...rest } = props;
     const classes = useStyles();
+    // console.log(`LoadingButton className=${className}, loading=${loading}`);
 
     return (
         <Button className={clsx(classes.button, className)} variant='contained' color='primary' disabled={loading}

diff --git a/client/src/components/controls/ReadOnlyRow.tsx b/client/src/components/controls/ReadOnlyRow.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-max-props-per-line */
 
 /**
@@ -16,10 +16,11 @@ interface ReadOnlyRowProps extends ViewableProps {
     padding?: number;
     gridTemplate?: string;
     width?: string;
+    labelProps?: any;
 }
 
 function ReadOnlyRow(props: ReadOnlyRowProps): React.ReactElement {
-    const { label, value, padding, gridTemplate, width } = props;
+    const { label, value, padding, gridTemplate, width, labelProps } = props;
 
     const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
     if (width) {
@@ -31,7 +32,7 @@ function ReadOnlyRow(props: ReadOnlyRowProps): React.ReactElement {
     }
 
     return (
-        <FieldType required={false} label={label} direction='row' containerProps={rowFieldProps}>
+        <FieldType required={false} label={label} direction='row' containerProps={rowFieldProps} labelProps={labelProps}>
             <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
@@ -5,23 +5,32 @@
  */
 import React from 'react';
 import { eSystemObjectType } from '../../types/server';
-import { getTermForSystemObjectType } from '../../utils/repository';
+import { getTermForSystemObjectType, getDetailsUrlForObject } from '../../utils/repository';
 
 export interface RepositoryIconProps {
     objectType: eSystemObjectType;
     backgroundColor: string;
     textColor: string;
     overrideText?: string | undefined;
     makeStyles?: { [key: string]: string };
+    idSystemObject: number;
 }
 
 export function RepositoryIcon(props: RepositoryIconProps): React.ReactElement {
-    const { objectType, overrideText, makeStyles } = props;
+    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 }}>
-            <p className={makeStyles?.initial} style={{ color: makeStyles?.color }}>{initial}</p>
+            <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' }}
+            >
+                <p className={makeStyles?.initial} style={{ color: '#232023' }}>{initial}</p>
+            </a>
         </div>
     );
 }
diff --git a/client/src/components/controls/SelectField.tsx b/client/src/components/controls/SelectField.tsx
@@ -55,7 +55,7 @@ function SelectField(props: SelectFieldProps): React.ReactElement {
             containerProps={rowFieldProps}
             width={width || viewMode ? 'auto' : undefined}
         >
-            <Select value={value || ''} className={classes.select} name={name} onChange={onChange} disabled={disabled} disableUnderline>
+            <Select value={value || ''} className={classes.select} name={name} onChange={onChange} disabled={disabled} disableUnderline inputProps={{ 'title': `${name} select` }}>
                 {options.map(({ idVocabulary, Term }, index) => (
                     <MenuItem key={index} value={idVocabulary}>
                         {Term}

diff --git a/client/src/components/index.ts b/client/src/components/index.ts
@@ -25,6 +25,7 @@ import CheckboxField from './controls/CheckboxField';
 import ReadOnlyRow from './controls/ReadOnlyRow';
 import TextArea from './controls/TextArea';
 import { ToolTip } from './controls/ToolTip';
+import IndentedReadOnlyRow from './controls/IndentedReadOnlyRow';
 
 export {
     Header,
@@ -49,7 +50,8 @@ export {
     CheckboxField,
     ReadOnlyRow,
     TextArea,
-    ToolTip
+    ToolTip,
+    IndentedReadOnlyRow
 };
 
 export type { RepositoryIconProps };
diff --git a/client/src/components/shared/AssetIdentifiers.tsx b/client/src/components/shared/AssetIdentifiers.tsx
@@ -16,14 +16,19 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     systemCreatedText: {
         marginLeft: spacing(2),
         fontStyle: 'italic',
-        color: palette.primary.contrastText
+        color: palette.primary.dark,
+        backgroundColor: 'rgb(236, 245, 253)'
     },
     addIdentifierButton: {
         height: 30,
         width: 80,
         fontSize: '0.8em',
         color: '#FFFFFF',
-        backgroundColor: '#0079C4'
+        backgroundColor: '#0079C4',
+        outline: '2px hidden #8DABC4',
+        '& :focus': {
+            outline: '2px solid #8DABC4',
+        }
     }
 }));
 
@@ -79,7 +84,14 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
             <FieldType required label='Asset Identifier(s)'>
                 <Box display='flex' justifyContent='space-between'>
                     <Box className={classes.assetIdentifier}>
-                        <Checkbox name='systemCreated' checked={systemCreated} color='primary' onChange={onSystemCreatedChange} />
+                        <label htmlFor='systemCreated' style={{ display: 'none' }}>System Created Identifier</label>
+                        <Checkbox
+                            id='systemCreated'
+                            name='systemCreated'
+                            checked={systemCreated}
+                            color='primary'
+                            onChange={onSystemCreatedChange}
+                        />
                         <Typography className={classes.systemCreatedText} variant='body1'>
                             System will create an identifier
                         </Typography>

diff --git a/client/src/components/shared/BreadcrumbsView.tsx b/client/src/components/shared/BreadcrumbsView.tsx
@@ -28,7 +28,8 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     label: {
         [breakpoints.down('lg')]: {
             fontSize: '0.8em'
-        }
+        },
+        color: 'white'
     },
     selectIcon: {
         color: Colors.defaults.white,