(0.9.18) Internal EDAN Publishing + UX Improvements for Upload/Ingest

client/package.json

@@ -34,6 +34,7 @@
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@material-ui/pickers": "3.3.10",
+    "@material/tooltip": "14.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",

client/src/components/controls/DateInputField.tsx

@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
         '& .MuiSvgIcon-root': {
             height: 20,
             width: 20
-        }
+        },
     }
 }));
 

client/src/components/controls/LabelTooltipText.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, TypographyProps, Tooltip, PropTypes } from '@material-ui/core';
+import { HelpOutline } from '@material-ui/icons';
+
+const useStyles = makeStyles(({ spacing }) => ({
+    container: {
+        display: 'flex',
+        padding: ({ padding }: LabelTooltipTextProps ) => padding ? padding : '0px 10px',
+        //borderRadius: 5,
+        //border: `1px dashed #0086ff`,
+        width: ({ width }: LabelTooltipTextProps ) => width || '100%',
+        marginTop: ({ marginTop }: LabelTooltipTextProps ) => spacing(marginTop || 0),
+        //backgroundColor: ({ required, error }: LabelTooltipTextProps ) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
+    },
+    label: {
+        color: 'auto'
+    },
+    loading: {
+        position: 'absolute',
+        top: 16,
+        right: 10
+    }
+}));
+
+interface LabelTooltipTextProps {
+    error?: boolean;
+    label?: string;
+    labelProps?: TypographyProps;
+    labelTooltipTxt: string;
+    marginTop?: number;
+    padding?: string;
+    renderLabel?: boolean;
+    width?: string;
+    align?: PropTypes.Alignment;
+}
+
+function LabelTooltipText(props: LabelTooltipTextProps): React.ReactElement {
+    const { label, labelTooltipTxt, labelProps, renderLabel, align = 'left', } = props;
+    const classes = useStyles(props);
+
+    let content: React.ReactNode = (
+        <>
+            <Typography align={align} className={classes.label} variant='caption'>
+                {label}
+            </Typography>
+        </>
+    );
+
+    if (labelTooltipTxt) {
+        const tooltipContent = (
+            <>
+                <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
+                    {label}
+                    <Tooltip title={labelTooltipTxt}>
+                        <HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '20px 5px' }} />
+                    </Tooltip>
+                </Typography>
+            </>
+        );
+        content = tooltipContent;
+    }
+
+    if (renderLabel === false) {
+        content = null;
+    }
+
+    return <div> {content} </div>;
+}
+
+export default LabelTooltipText;

client/src/components/shared/AssetIdentifiers.tsx

@@ -7,6 +7,7 @@ import { eVocabularySetID } from '@dpo-packrat/common';
 import FieldType from './FieldType';
 import IdentifierList from './IdentifierList';
 
+//Styles
 const useStyles = makeStyles(({ palette, spacing }) => ({
     assetIdentifier: {
         display: 'flex',
@@ -31,6 +32,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     }
 }));
 
+//Defines the prop type
 interface AssetIdentifiersProps {
     systemCreated: boolean;
     identifiers: StateIdentifier[];
@@ -44,11 +46,18 @@ interface AssetIdentifiersProps {
 }
 
 function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
+
+    //Props - types defined in interface
     const { systemCreated, identifiers, onSystemCreatedChange, onAddIdentifer, onUpdateIdentifer, onRemoveIdentifer,
         subjectView, onUpdateIdIdentifierPreferred, identifierName } = props;
+
+    //Component styling
     const classes = useStyles();
+
+    //Handles state change for the Identifier entries
     const [getEntries, getInitialEntry] = useVocabularyStore(state => [state.getEntries, state.getInitialEntry]);
 
+    //Function creates object to define new identifier
     const addIdentifer = (initialEntry: number | null) => {
         const newIdentifier: StateIdentifier = {
             id: identifiers.length + 1,
@@ -62,11 +71,13 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
         onAddIdentifer(updatedIdentifiers);
     };
 
+    //Function removes Identifier
     const removeIdentifier = (_idIdentifier: number, id: number) => {
         const updatedIdentifiers = lodash.filter(identifiers, identifier => identifier.id !== id);
         onRemoveIdentifer(updatedIdentifiers);
     };
 
+    //Function updates any changes to the Identifier
     const updateIdentifierFields = (id: number, name: string, value: string | number | boolean) => {
         const updatedIdentifiers = identifiers.map(identifier => {
             if (identifier.id === id) {
@@ -80,10 +91,12 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
         onUpdateIdentifer(updatedIdentifiers);
     };
 
+    //The label of the Asset Identifier UI (currently says 'Model Identifier(s))
     const label: string = (identifierName ? identifierName : 'Asset') + ' Identifier(s)';
     return (
+        //The Identifier Component
         <Box marginBottom='10px'>
-            <FieldType required label={label} padding='10px'>
+            <FieldType required label={label} padding='10px' labelTooltip='Assign an identifier to your digital asset here.  The identifier will make it easier to search for the digital asset later.'>
                 <Box display='flex' justifyContent='space-between'>
                     <Box className={classes.assetIdentifier}>
                         <label htmlFor='systemCreated' style={{ display: 'none' }}>System Created Identifier</label>
@@ -98,6 +111,8 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
                             System will create an identifier
                         </Typography>
                     </Box>
+
+                    {/*May need to write the logic here to check if there are no identifiers in existence.*/}
                     {!identifiers.length && (
                         <Button
                             className={classes.addIdentifierButton}

client/src/components/shared/FieldType.tsx

@@ -7,15 +7,18 @@ import { Box, BoxProps, PropTypes, Typography, TypographyProps, Tooltip, Grid, G
 import { fade, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import Progress from './Progress';
+import { HelpOutline } from '@material-ui/icons';
+// import { HelpOutline } from '@material-ui/icons';
 
 const useStyles = makeStyles(({ palette, spacing }) => ({
     container: {
         display: 'flex',
-        padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
-        borderRadius: 5,
-        width: ({ width }: FieldTypeProps) => width || '100%',
+        // padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
+        //borderRadius: 5,
+        //border: `1px dashed #0086ff`,
+        // width: ({ width }: FieldTypeProps) => width || '100%',
         marginTop: ({ marginTop }: FieldTypeProps) => spacing(marginTop || 0),
-        backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
+        backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? '0' : palette.primary.light)
     },
     label: {
         color: 'auto'
@@ -24,7 +27,11 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
         position: 'absolute',
         top: 16,
         right: 10
-    }
+    },
+    tooltip: {
+        fontSize: '0.75rem',
+        fontWeight: 'lighter'
+    },
 }));
 
 interface FieldTypeProps {
@@ -53,18 +60,28 @@ function FieldType(props: FieldTypeProps): React.ReactElement {
     const classes = useStyles(props);
 
     let content: React.ReactNode = (
-        <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
-            {label}
-        </Typography>
+        <>
+            <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
+                {label}
+            </Typography>
+        </>
     );
 
     if (labelTooltip) {
         const tooltipContent = (
-            <Tooltip title={labelTooltip}>
+            <>
                 <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
                     {label}
+                    <Tooltip
+                        title={labelTooltip}
+                        classes={{
+                            tooltip: classes.tooltip,
+                        }}
+                    >
+                        <HelpOutline style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '0px 5px', paddingBottom: '3px', fontSize: '1rem' }} />
+                    </Tooltip>
                 </Typography>
-            </Tooltip>
+            </>
         );
         content = tooltipContent;
     }

client/src/components/shared/SidebarBottomNavigator.tsx

@@ -6,31 +6,34 @@
  * This component renders bottom navigation view, used in data upload
  * and ingestion flow
  */
-import { Box } from '@material-ui/core';
+import { Box, TypographyProps } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Colors } from '../../theme';
 import LoadingButton from '../controls/LoadingButton';
 
-const useStyles = makeStyles(({ palette, breakpoints }) => ({
+const useStyles = makeStyles(({ breakpoints }) => ({
     uploadContainer: {
         display: 'flex',
         bottom: 0,
         alignItems: 'center',
         justifyContent: 'space-between',
-        padding: '10px 0px',
-        background: palette.background.paper
+        padding: '10px',
+        //background: palette.background.paper
+        // background: 'rgb(236, 245, 253)',
     },
     container: {
-        display: 'flex',
+        //display: 'flex',
         bottom: 0,
         alignItems: 'center',
         justifyContent: 'space-between',
-        width: '53vw',
-        padding: '20px 0px',
-        marginLeft: 20,
-        background: palette.background.paper
+        // width: '100%',
+        // padding: '20px',
+        margin: '10px',
+        marginLeft: '20px',
+        //background: palette.background.paper
+        //background: 'rgb(236, 245, 253)'
     },
     navButton: {
         minHeight: 35,
@@ -45,10 +48,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
     link: {
         textDecoration: 'none'
-    }
+    },
 }));
 
 interface SidebarBottomNavigatorProps {
+    btnProps?: TypographyProps;
     leftLabel: string;
     leftLoading?: boolean;
     leftRoute?: string;
@@ -68,7 +72,7 @@ function SidebarBottomNavigator(props: SidebarBottomNavigatorProps): React.React
     // console.log(`SidebarBottomNavigator ${JSON.stringify(props)}, onClickRight ${onClickRight ? 'defined' : 'NOT defined'}`);
 
     let leftButton = (
-        <LoadingButton className={classes.navButton} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
+        <LoadingButton className={classes.navButton} style={{ marginRight: '30px' }} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
             {leftLabel}
         </LoadingButton>
     );

client/src/graphql/index.ts

@@ -41,7 +41,7 @@ class PRApolloClient extends ApolloClient<NormalizedCacheObject> {
 
     private handleException(error: any): void {
         const message: string = (error instanceof Error) ? `: ${error.message}` : '';
-        console.log(`Apollo Client Error${message}`);
+        console.log(`[PACKRAT:ERROR] Apollo Client Error ${message}`);
         // console.log(`Apollo Client Error${message}: ${JSON.stringify(error)}`);
         throw error;
     }
@@ -53,6 +53,8 @@ const SAMLRedirectPath: string = '/saml/idp/profile/redirectorpost/sso';
 const errorLink = onError(({ graphQLErrors, networkError }) => {
     let sentToLogin: boolean = false;
 
+    console.log(`[PACKRAT:ERROR] Network: ${JSON.stringify(networkError)}`);
+
     if (graphQLErrors) {
         graphQLErrors.forEach(({ message, locations, path }) => {
             console.log(`[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`);
@@ -67,9 +69,6 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
     }
 
     if (networkError) {
-        console.log(`[Network error]: ${networkError}`);
-        // console.log(`[Network error]: ${JSON.stringify(networkError)}`);
-
         if (!sentToLogin) {
             let redirectToLogin: boolean = false;
 
@@ -173,6 +172,7 @@ interface IApolloUploader {
     refetchQueries?: string[];
     onProgress: (event: ProgressEvent) => void;
     onCancel: (cancelHandler: () => void) => void;
+    onFailed: (error: ErrorEvent) => void;
 }
 
 async function apolloUploader(options: IApolloUploader): Promise<any> {