Merge pull request #247 from Smithsonian/bugfix/389

Fix for 389: Add object's type to its own list of children object types for "Has" filter fix
Smithsonian · Nov 10, 2021 · 2185e19 · 2185e19
2 parents 7ac4a30 + 8a5628b
commit 2185e19
Show file tree

Hide file tree

Showing 178 changed files with 6,964 additions and 1,746 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -69,6 +69,9 @@ jobs:
         with:
           node-version: 14.17.1
 
+      - name: Install git
+        run: sudo apt-add-repository ppa:git-core/ppa && sudo apt-get update && sudo apt-get install git
+
       # Install dependencies in CI mode
       - name: Install dependencies
         run: yarn install --frozen-lockfile

diff --git a/client/src/components/controls/ReadOnlyRow.tsx b/client/src/components/controls/ReadOnlyRow.tsx
@@ -15,19 +15,23 @@ interface ReadOnlyRowProps extends ViewableProps {
     value?: number | string | null;
     padding?: number;
     gridTemplate?: string;
+    width?: string;
 }
 
 function ReadOnlyRow(props: ReadOnlyRowProps): React.ReactElement {
-    const { label, value, padding, gridTemplate } = props;
+    const { label, value, padding, gridTemplate, width } = props;
 
     const rowFieldProps = { alignItems: 'center', justifyContent: 'space-between', style: { borderRadius: 0 } };
+    if (width) {
+        rowFieldProps['style']['width'] = width;
+    }
     if (gridTemplate) {
         rowFieldProps['style']['display'] = 'grid';
         rowFieldProps['style']['gridTemplateColumns'] = gridTemplate;
     }
 
     return (
-        <FieldType required={false} label={label} direction='row' containerProps={rowFieldProps} width='100%'>
+        <FieldType required={false} label={label} direction='row' containerProps={rowFieldProps}>
             <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
@@ -4,47 +4,24 @@
  * This component renders the icons for the repository tree view item.
  */
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
 import { eSystemObjectType } from '../../types/server';
 import { getTermForSystemObjectType } from '../../utils/repository';
 
-const useStyles = makeStyles(({ typography, breakpoints }) => ({
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: 18,
-        width: 18,
-        borderRadius: 2.5,
-        backgroundColor: ({ backgroundColor }: RepositoryIconProps) => backgroundColor,
-        [breakpoints.down('lg')]: {
-            height: 15,
-            width: 15,
-        },
-    },
-    initial: {
-        fontSize: 10,
-        fontWeight: typography.fontWeightMedium,
-        color: ({ textColor }: RepositoryIconProps) => textColor,
-    }
-}));
-
 export interface RepositoryIconProps {
     objectType: eSystemObjectType;
     backgroundColor: string;
     textColor: string;
     overrideText?: string | undefined;
+    makeStyles?: { [key: string]: string };
 }
 
 export function RepositoryIcon(props: RepositoryIconProps): React.ReactElement {
-    const { objectType, overrideText } = props;
-    const classes = useStyles(props);
+    const { objectType, overrideText, makeStyles } = props;
     const initial = !overrideText ? getTermForSystemObjectType(objectType).toUpperCase().slice(0, 1) : overrideText;
 
     return (
-        <Box className={classes.container}>
-            <Typography className={classes.initial}>{initial}</Typography>
-        </Box>
+        <div className={makeStyles?.container} style={{ backgroundColor: makeStyles?.backgroundColor }}>
+            <p className={makeStyles?.initial} style={{ color: makeStyles?.color }}>{initial}</p>
+        </div>
     );
 }
diff --git a/client/src/components/shared/AssetIdentifiers.tsx b/client/src/components/shared/AssetIdentifiers.tsx
@@ -34,10 +34,12 @@ interface AssetIdentifiersProps {
     onAddIdentifer: (identifiers: StateIdentifier[]) => void;
     onUpdateIdentifer: (identifiers: StateIdentifier[]) => void;
     onRemoveIdentifer: (identifiers: StateIdentifier[]) => void;
+    subjectView?: boolean;
+    onUpdateIdIdentifierPreferred?: (id: number) => void;
 }
 
 function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
-    const { systemCreated, identifiers, onSystemCreatedChange, onAddIdentifer, onUpdateIdentifer, onRemoveIdentifer } = props;
+    const { systemCreated, identifiers, onSystemCreatedChange, onAddIdentifer, onUpdateIdentifer, onRemoveIdentifer, subjectView, onUpdateIdIdentifierPreferred } = props;
     const classes = useStyles();
     const [getEntries, getInitialEntry] = useVocabularyStore(state => [state.getEntries, state.getInitialEntry]);
 
@@ -46,8 +48,8 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
             id: identifiers.length + 1,
             identifier: '',
             identifierType: getInitialEntry(eVocabularySetID.eIdentifierIdentifierType) || initialEntry,
-            selected: false,
-            idIdentifier: 0
+            idIdentifier: 0,
+            preferred: undefined
         };
 
         const updatedIdentifiers = lodash.concat(identifiers, [newIdentifier]);
@@ -101,6 +103,8 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
                         onAdd={addIdentifer}
                         onRemove={removeIdentifier}
                         onUpdate={updateIdentifierFields}
+                        subjectView={subjectView}
+                        onUpdateIdIdentifierPreferred={onUpdateIdIdentifierPreferred}
                     />
                 )}
             </FieldType>

diff --git a/client/src/components/shared/Header.tsx b/client/src/components/shared/Header.tsx
@@ -92,12 +92,11 @@ function Header(): React.ReactElement {
     const history = useHistory();
     const { pathname } = useLocation();
     const { user, logout } = useUserStore();
-    const [search, keyword, updateSearch, getFilterState, initializeTree, resetRepositoryFilter, updateRepositoryFilter, resetKeywordSearch] = useRepositoryStore(state => [
+    const [search, keyword, updateSearch, getFilterState, resetRepositoryFilter, updateRepositoryFilter, resetKeywordSearch] = useRepositoryStore(state => [
         state.search,
         state.keyword,
         state.updateSearch,
         state.getFilterState,
-        state.initializeTree,
         state.resetRepositoryFilter,
         state.updateRepositoryFilter,
         state.resetKeywordSearch
@@ -128,13 +127,12 @@ function Header(): React.ReactElement {
     const updateRepositorySearch = (): void => {
         const filterState = getFilterState();
         filterState.search = filterState.keyword;
+        resetRepositoryFilter();
         updateRepositoryFilter(filterState);
-        const updatedFilterState = getFilterState();
-        const repositoryURL = generateRepositoryUrl(updatedFilterState);
+        const repositoryURL = generateRepositoryUrl(filterState);
         const route: string = resolveRoute(HOME_ROUTES.REPOSITORY);
-        console.log(`*** src/components/shared/Header.tsx Header updateRepositorySearch history.push(${route + repositoryURL}`);
+        // console.log(`*** src/components/shared/Header.tsx Header updateRepositorySearch history.push(${route + repositoryURL}`);
         history.push(route + repositoryURL);
-        initializeTree();
     };
 
     // General search function when in different views
@@ -144,7 +142,7 @@ function Header(): React.ReactElement {
         const filterState = getFilterState();
         filterState.search = filterState.keyword;
         updateRepositoryFilter(filterState);
-        console.log(`*** src/components/shared/Header.tsx Header onSearch history.push(${route}`);
+        // console.log(`*** src/components/shared/Header.tsx Header onSearch history.push(${route}`);
         history.push(route);
     };
 

diff --git a/client/src/components/shared/IdentifierList.tsx b/client/src/components/shared/IdentifierList.tsx
@@ -5,15 +5,17 @@
  *
  * This component renders identifier list used in photogrammetry metadata component.
  */
-import { Box, Button, Checkbox, MenuItem, Select, Typography } from '@material-ui/core';
+import { Box, Button, MenuItem, Select, Typography, Radio } from '@material-ui/core';
 import { fade, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { DebounceInput } from 'react-debounce-input';
 import { MdRemoveCircleOutline } from 'react-icons/md';
 import { StateIdentifier, VocabularyOption } from '../../store';
 import { ViewableProps } from '../../types/repository';
-import { sharedButtonProps, sharedLabelProps } from '../../utils/shared';
+import { sharedLabelProps } from '../../utils/shared';
 import FieldType from './FieldType';
+import { Progress } from '..';
+import { Colors } from '../../theme';
 
 const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
     identifierInput: {
@@ -59,7 +61,15 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
         fontStyle: 'italic'
     },
     header: sharedLabelProps,
-    addIdentifierButton: sharedButtonProps
+    addIdentifierButton: {
+        height: 35,
+        width: 80,
+        fontSize: typography.caption.fontSize,
+        color: Colors.defaults.white,
+        [breakpoints.down('lg')]: {
+            height: 30
+        }
+    }
 }));
 
 interface IdentifierListProps extends ViewableProps {
@@ -68,13 +78,26 @@ interface IdentifierListProps extends ViewableProps {
     onUpdate: (id: number, fieldName: string, fieldValue: number | string | boolean) => void;
     onRemove: (idIdentifier: number, id: number) => void;
     identifierTypes: VocabularyOption[];
+    subjectView?: boolean;
+    onUpdateIdIdentifierPreferred?: (id: number) => void;
+    loading?: boolean;
 }
 
 function IdentifierList(props: IdentifierListProps): React.ReactElement {
-    const { identifiers, onAdd, onUpdate, identifierTypes, onRemove, viewMode = false, disabled = false } = props;
+    const { identifiers, onAdd, onUpdate, identifierTypes, onRemove, viewMode = false, disabled = false, subjectView, onUpdateIdIdentifierPreferred, loading } = props;
     const classes = useStyles();
-
     const hasIdentifiers: boolean = !!identifiers.length;
+
+    if (loading && subjectView) {
+        return (
+            <Box overflow='hidden'>
+                <FieldType required={false} renderLabel={false} width='auto'>
+                    <Progress />
+                </FieldType>
+            </Box>
+        );
+    }
+
     return (
         <Box overflow='hidden'>
             <FieldType required={false} renderLabel={false} width='auto'>
@@ -84,14 +107,15 @@ function IdentifierList(props: IdentifierListProps): React.ReactElement {
                         <Typography className={classes.empty}>No Identifiers</Typography>
                     </Box>
                 )}
-                {identifiers.map(({ id, selected, identifier, identifierType, idIdentifier }, index) => {
+                {identifiers.map(({ id, identifier, identifierType, idIdentifier, preferred }, index) => {
                     const remove = () => onRemove(idIdentifier, id);
-                    const updateCheckbox = ({ target }) => onUpdate(id, target.name, target.checked);
                     const update = ({ target }) => onUpdate(id, target.name, target.value);
-
+                    const check = () => {
+                        if (onUpdateIdIdentifierPreferred) onUpdateIdIdentifierPreferred(id);
+                    };
                     return (
                         <Box key={index} display='flex' flexDirection='row' alignItems='center' paddingBottom='10px'>
-                            <Checkbox checked={selected} name='selected' color='primary' onChange={updateCheckbox} disabled={disabled} />
+                            {subjectView && <Radio checked={preferred === true} name='selected' color='primary' disabled={disabled} onClick={check} size='small' />}
                             <DebounceInput
                                 value={identifier}
                                 name='identifier'
@@ -118,9 +142,10 @@ function IdentifierList(props: IdentifierListProps): React.ReactElement {
                     color='primary'
                     variant='contained'
                     onClick={() => onAdd(identifierTypes[0].idVocabulary)}
+                    style={{ width: 'fit-content' }}
                     disabled={disabled}
                 >
-                    Add
+                    New Identifier
                 </Button>
             </FieldType>
         </Box>

diff --git a/client/src/constants/routes.ts b/client/src/constants/routes.ts
@@ -42,7 +42,8 @@ export const INGESTION_ROUTE = {
 
 export enum REPOSITORY_ROUTES_TYPE {
     VIEW = '',
-    DETAILS = 'details/:idSystemObject'
+    DETAILS = 'details/:idSystemObject',
+    VOYAGER = 'voyager/:idSystemObject'
 }
 
 export const REPOSITORY_ROUTE = {