Dpo3 dpkrt 754

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

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/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,12 +7,15 @@
 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,
+        //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)
@@ -53,18 +56,24 @@
     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}
-                </Typography>
-            </Tooltip>
+        <>
+            <Typography align={align} className={classes.label} variant='caption' {...labelProps}>
+                {label}
+                <Tooltip title={labelTooltip}>
+                    <HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign:'middle', padding:'20px 5px' }} />
+                </Tooltip>
+            </Typography>
+        </>
+
         );
         content = tooltipContent;
     }

client/src/components/shared/SidebarBottomNavigator.tsx

@@ -6,31 +6,33 @@
  * 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',
+        //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',
+        //marginLeft: 20,
+        //background: palette.background.paper
+        //background: 'rgb(236, 245, 253)' 
     },
     navButton: {
         minHeight: 35,
@@ -45,10 +47,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
     },
     link: {
         textDecoration: 'none'
-    }
+    },
 }));
 
 interface SidebarBottomNavigatorProps {
+    btnProps?: TypographyProps;
     leftLabel: string;
     leftLoading?: boolean;
     leftRoute?: string;
@@ -68,7 +71,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/pages/Ingestion/components/Metadata/Model/ObjectSelectModal.tsx

@@ -235,6 +235,7 @@ function ObjectSelectModal(props: ObjectSelectModalProps): React.ReactElement {
         setIsSaving(false);
     };
 
+    //  This opens up the dialog box when you click the 'Add' button on the Parents or Children block.
     return (
         <Dialog
             open={open}

client/src/pages/Ingestion/components/Metadata/Model/index.tsx

@@ -325,6 +325,7 @@ function Model(props: ModelProps): React.ReactElement {
                 )}
 
                 <Box mb={2} width='52vw'>
+                    {/*ASSET IDENTIFIERS FORM STARTS HERE*/}
                     <AssetIdentifiers
                         systemCreated={model.systemCreated}
                         identifiers={model.identifiers}
@@ -383,6 +384,8 @@ function Model(props: ModelProps): React.ReactElement {
                             </Box>
                         </>
                     )}
+
+                    {/* METADATA FORMS AREA*/}
                     <Box className={classes.modelDetailsContainer}>
                         <Box display='flex' flexDirection='column' className={classes.dataEntry}>
                             <TableContainer component={Paper} elevation={0} className={tableClasses.captureMethodTableContainer} style={{ backgroundColor: 'rgb(255, 252, 209', paddingTop: '10px' }}>
@@ -405,6 +408,8 @@ function Model(props: ModelProps): React.ReactElement {
                                                     className={clsx(tableClasses.select, tableClasses.datasetFieldSelect)}
                                                     SelectDisplayProps={{ style: { paddingLeft: '10px', borderRadius: '5px' } }}
                                                 >
+
+                                                    {/* Grabs the dropdown options for SELECT */}
                                                     {getEntries(eVocabularySetID.eModelCreationMethod).map(({ idVocabulary, Term }, index) => <MenuItem key={index} value={idVocabulary}>{Term}</MenuItem>)}
                                                 </Select>
                                             </TableCell>

client/src/pages/Ingestion/components/Metadata/Photogrammetry/Description.tsx

@@ -42,6 +42,7 @@ function Description(props: DescriptionProps): React.ReactElement {
         <FieldType
             required
             label='Description'
+            labelTooltip='Add your uploaded file(s) description here.'
             direction='row'
             containerProps={{ ...rowFieldProps, ...containerProps }}
             width={viewMode ? 'auto' : undefined}

client/src/pages/Ingestion/components/Metadata/index.tsx

@@ -105,6 +105,7 @@ function Metadata(): React.ReactElement {
                         }
                     }
                 });
+            //  detects the asset type for breadcrumb
                 if (metadata.idSOAttachment && metadata.idAsset) {
                     switch (objectType) {
                         case eSystemObjectType.eCaptureData: {
@@ -164,7 +165,7 @@ function Metadata(): React.ReactElement {
     const onNext = async (): Promise<void> => {
         const updateMode: boolean = !!(metadata.file.idAsset);
         setFieldErrors(getFieldErrors(metadata));
-
+// Add the validation to check if the value in fields exist and is a string
         if (assetType.photogrammetry) {
             const hasError: boolean = updateMode
                 ? validateFields(metadata.photogrammetry, photogrammetryFieldsSchemaUpdate)
@@ -192,7 +193,7 @@ function Metadata(): React.ReactElement {
                 : validateFields(metadata.other, otherFieldsSchema);
             if (hasError) return;
         }
-
+        //  This may be the code that initiates the completion of the Ingestion process. 
         if (isLast) {
             setDisableNavigation(true);
             setIngestionLoading(true);

client/src/pages/Ingestion/components/SubjectItem/SearchList.tsx

@@ -15,6 +15,8 @@ import { SubjectUnitIdentifier } from '../../../../types/graphql';
 import SubjectList from './SubjectList';
 import { toast } from 'react-toastify';
 import { actionOnKeyPress } from '../../../../utils/shared';
+// import { HelpOutline } from '@material-ui/icons';
+// import Tooltip from "@material-ui/core/Tooltip";
 
 const useStyles = makeStyles(({ palette, breakpoints }) => ({
     container: {
@@ -38,11 +40,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
 }));
 
 type SearchListProps = {
-    EdanOnly?: boolean
+    EdanOnly?: boolean;
 };
 
 function SearchList(props: SearchListProps): React.ReactElement {
-    const { EdanOnly } = props;
+    const { EdanOnly} = props;
     const classes = useStyles();
     const [query, setQuery] = useState('');
     const [searchSubject, { data, called, loading, error }] = useLazyQuery(SearchIngestionSubjectsDocument, { fetchPolicy: 'no-cache' });
@@ -80,7 +82,10 @@ function SearchList(props: SearchListProps): React.ReactElement {
         content = <SubjectList subjects={subjects} selected={false} emptyLabel='No subjects found' />;
 
     return (
-        <FieldType required={false} label='Search for Subject' marginTop={2} padding='10px'>
+        <FieldType required={false} label='Search for Subject' marginTop={2} padding='10px' labelTooltip='This is the entity that the digital asset(s) is based on and where it will be saved to.'>
+          {/* <Tooltip title="Lorem ipsum dolor sit amet" placement="bottom">
+            <HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer' }} />
+          </Tooltip> */}
             <Box className={classes.container}>
                 <label htmlFor='searchSubjectFilter' style={{ display: 'none' }}>Search Subject</label>
                 <TextField

client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx

@@ -46,7 +46,7 @@ function SubjectList(props: SubjectListProps): React.ReactElement {
     const [addSubject, removeSubject] = useSubjectStore(state => [state.addSubject, state.removeSubject]);
     const classes = useStyles();
 
-    const header: string[] = ['ARK / ID', 'UNIT', 'NAME'];
+    const header: string[] = ['ARK / ID', 'UNIT', 'NAME', 'COLLECTION'];
 
     const getSubjectList = ({ id, arkId, unit, name, collectionId }: StateSubject, index: number) => (
         <SubjectListItem