Merge pull request #399 from Smithsonian/develop

v0.9.9 Release Candidate 5
Smithsonian · Apr 11, 2022 · 85df469 · 85df469
2 parents 78a6fcd + 5c596d9
commit 85df469
Show file tree

Hide file tree

Showing 259 changed files with 11,039 additions and 563 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -9,3 +9,4 @@ node_modules/
 client/src/types/graphql.tsx
 server/types/graphql.ts
 server/var
+docs
diff --git a/.gitignore b/.gitignore
@@ -110,8 +110,15 @@ dist
 ### Builds ###
 build
 
+### Docs ###
+docs/.hugo_build.lock
+docs/public
+docs/resources/_gen
+
 ### Custom ###
 server/var
 server/tests/mock/models/
 server/config/solr/data/packrat/data
 server/config/solr/data/packratMeta/data
+### Per-developer settings ###
+JTConfig
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dpo-packrat/client",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "private": true,
   "license": "Apache-2.0",
   "description": "Client for Packrat",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@apollo/client": "3.1.5",
     "@date-io/date-fns": "1.3.13",
-    "@dpo-packrat/common": "0.9.8",
+    "@dpo-packrat/common": "0.9.9",
     "@material-ui/core": "4.11.0",
     "@material-ui/data-grid": "4.0.0-alpha.33",
     "@material-ui/icons": "4.9.1",

diff --git a/client/src/components/controls/IndentedReadOnlyRow.tsx b/client/src/components/controls/IndentedReadOnlyRow.tsx
@@ -76,7 +76,7 @@ function IndentedReadOnlyRow(props: IndentedReadOnlyRowProps): React.ReactElemen
                 {content}
             </Box>
             <Box className={classes.value}>
-                <Typography variant='caption' style={{ fontFamily: 'Roboto, Helvetical, Arial, sans-serif', color: '#2C405A', overflowWrap: 'break-word' }}>
+                <Typography variant='caption' style={{ fontFamily: 'Roboto, Helvetical, Arial, sans-serif', overflowWrap: 'break-word', wordBreak: 'break-all' }}>
                     {value}
                 </Typography>
             </Box>

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

diff --git a/client/src/components/shared/Header.tsx b/client/src/components/shared/Header.tsx
@@ -7,7 +7,7 @@ import { Box, Typography, Button } from '@material-ui/core';
 import { fade, makeStyles } from '@material-ui/core/styles';
 import React, { useEffect } from 'react';
 import { DebounceInput } from 'react-debounce-input';
-import { IoIosLogOut, IoIosNotifications, IoIosSearch } from 'react-icons/io';
+import { IoIosLogOut, IoIosHelp, /* IoIosNotifications, */ IoIosSearch } from 'react-icons/io';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import Logo from '../../assets/images/logo-packrat.square.png';
@@ -129,14 +129,18 @@ function Header(): React.ReactElement {
         }
     };
 
+    const onHelp = async (): Promise<void> => {
+        window.open('https://smithsonian.github.io/dpo-packrat/');
+    };
+
     const isRepository = pathname.includes(HOME_ROUTES.REPOSITORY);
 
     // Specific to search while in repository view
     const updateRepositorySearch = (): void => {
         const filterState = getFilterState();
         filterState.search = filterState.keyword;
         resetRepositoryFilter();
-        updateRepositoryFilter(filterState);
+        updateRepositoryFilter(filterState, false);
         const repositoryURL = generateRepositoryUrl(filterState);
         const route: string = resolveRoute(HOME_ROUTES.REPOSITORY);
         history.push(route + repositoryURL);
@@ -148,7 +152,7 @@ function Header(): React.ReactElement {
         resetRepositoryFilter();
         const filterState = getFilterState();
         filterState.search = filterState.keyword;
-        updateRepositoryFilter(filterState);
+        updateRepositoryFilter(filterState, false);
         history.push(route);
     };
 
@@ -207,8 +211,8 @@ function Header(): React.ReactElement {
                 </NavOption>
             </React.Fragment>
             <Box className={classes.navOptionsContainer}>
-                <NavOption>
-                    <IoIosNotifications size={25} color={Colors.defaults.white} />
+                <NavOption onClick={onHelp}>
+                    <IoIosHelp size={45} color={Colors.defaults.white} />
                 </NavOption>
                 <NavOption onClick={onLogout}>
                     <IoIosLogOut id={Selectors.AUTH.LOGOUT_BUTTON} size={25} color={Colors.defaults.white} />

diff --git a/client/src/config/index.ts b/client/src/config/index.ts
@@ -6,6 +6,20 @@
 const Config = {
     contact: {
         email: '[email protected]'
+    },
+    /*
+        Notes about Voyager:
+            -https://3d-api.si.edu/resources/js/voyager-story.min.js will always hit the latest and greatest version
+            -Once a voyager/dev endpoint is deployed, these links should point to that and be tested upon each release
+            -To specify a version, use https://3d-api.si.edu/resources/js/v[release]/voyager-explorer.min.js
+                -e.g. https://3d-api.si.edu/resources/js/v0.14.2/voyager-explorer.min.js
+
+            -See releases @ https://github.com/Smithsonian/dpo-voyager/releases
+    */
+    voyager: {
+        story: process.env.NODE_ENV === 'development' ? 'https://3d-api.si.edu/resources/js/voyager-story.min.js': 'https://3d-api.si.edu/resources/js/voyager-story.min.js',
+        explorer: process.env.NODE_ENV === 'development' ? 'https://3d-api.si.edu/resources/js/voyager-explorer.min.js' : 'https://3d-api.si.edu/resources/js/voyager-explorer.min.js',
+        quill: process.env.NODE_ENV === 'development' ? 'https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js' : 'https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js'
     }
 };
 

diff --git a/client/src/constants/helperfunctions.ts b/client/src/constants/helperfunctions.ts
@@ -141,4 +141,10 @@ export const truncateMiddleWithEllipses = (text: string, firstHalf: number, seco
 
 export function getDownloadSiteMapXMLLink(serverEndPoint: string | undefined): string {
     return `${serverEndPoint}/download/sitemap.xml`;
+}
+
+export function toFixed(num, fixed) {
+    // Get the number string and then match the string up to the specified decimal place
+    const re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?'); /* eslint-disable-line  */
+    return num.toString().match(re)[0];
 }
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
@@ -6,7 +6,7 @@
  */
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Redirect } from 'react-router';
 import { Header, PrivateRoute } from '../../components';
 import { HOME_ROUTE, HOME_ROUTES, resolveRoute } from '../../constants';
@@ -33,10 +33,13 @@ const useStyles = makeStyles(() => ({
 
 function Home(): React.ReactElement {
     const classes = useStyles();
-    const [sideBarExpanded, toggleSidebar] = useControlStore(state => [state.sideBarExpanded, state.toggleSidebar]);
-
+    const [sideBarExpanded, toggleSidebar, initializeSidebarPosition] = useControlStore(state => [state.sideBarExpanded, state.toggleSidebar, state.initializeSidebarPosition]);
     const onToggle = (): void => toggleSidebar(!sideBarExpanded);
 
+    useEffect(() => {
+        initializeSidebarPosition();
+    }, [initializeSidebarPosition]);
+
     return (
         <Box className={classes.container}>
             <PrivateRoute exact path='/'>

diff --git a/client/src/pages/Ingestion/components/Metadata/Control/SubtitleControl.tsx b/client/src/pages/Ingestion/components/Metadata/Control/SubtitleControl.tsx
@@ -21,7 +21,8 @@ const useStyles = makeStyles(({ palette, typography }) => ({
         flexDirection: 'column',
         backgroundColor: (hasPrimaryTheme) => hasPrimaryTheme ? palette.primary.light : palette.secondary.light,
         width: 'fit-content',
-        minWidth: 300
+        minWidth: 300,
+        borderRadius: 5
     },
     selected: {
         cursor: 'pointer',

diff --git a/client/src/pages/Ingestion/components/Metadata/Model/AssetFilesTable.tsx b/client/src/pages/Ingestion/components/Metadata/Model/AssetFilesTable.tsx
@@ -4,61 +4,64 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Table, TableBody, TableCell, TableHead, TableRow, Typography, Box } from '@material-ui/core';
+import clsx from 'clsx';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(() => ({
     assetFilesTableContainer: {
         width: 'fit-content',
-        minWidth: 400,
         borderRadius: 5,
         padding: 1,
-        backgroundColor: theme.palette.secondary.light
     },
     headerRow: {
         borderBottom: '2px solid #D8E5EE',
-        color: theme.palette.primary.dark
+        backgroundColor: 'rgb(255, 255, 224)'
     },
     tableRow: {
-        '&:not(:last-child)': {
-            borderBottom: '2px solid #D8E5EE'
-        },
-        '& > *': {
-            color: '#2C405A'
-        }
     },
     assetNameCol: {
-        width: '65%',
         color: '#2C405A'
     },
     assetTypeCol: {
-        width: '35%',
         color: '#2C405A'
+    },
+    evenTableRow: {
+        backgroundColor: 'rgb(255, 255, 224)'
+    },
+    oddTableRow: {
+        backgroundColor: 'white'
+    },
+    table: {
+        borderCollapse: 'collapse'
+    },
+    tableCell: {
+        padding: '1px 10px'
     }
 }));
 
 function AssetFilesTable({ files }): React.ReactElement {
     const classes = useStyles();
     return (
         <Box className={classes.assetFilesTableContainer} mt={2} mb={2}>
-            <Table>
+            <Table className={classes.table}>
                 <TableHead>
                     <TableRow className={classes.headerRow}>
-                        <TableCell className={classes.assetNameCol}>
+                        <TableCell className={clsx(classes.assetNameCol, classes.tableCell)}>
                             <Typography variant='caption'>Asset Name</Typography>
                         </TableCell>
-                        <TableCell className={classes.assetTypeCol}>
+                        <TableCell className={clsx(classes.assetTypeCol, classes.tableCell)}>
                             <Typography variant='caption'>Asset Type</Typography>
                         </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
                     {files.map((row, ind) => (
-                        <TableRow className={classes.tableRow} key={ind}>
-                            <TableCell>
+                        <TableRow className={ind % 2 !== 0 ? clsx(classes.tableRow, classes.oddTableRow) : clsx(classes.tableRow, classes.evenTableRow)} key={ind}>
+                            <TableCell className={classes.tableCell}>
                                 <Box component='div' overflow='visible' minWidth='10px'>
                                     <Typography variant='caption'>{row.assetName}</Typography>
                                 </Box>
                             </TableCell>
-                            <TableCell>
+                            <TableCell className={classes.tableCell}>
                                 <Box component='div' overflow='visible'>
                                     <Typography variant='caption'>{row.assetType}</Typography>
                                 </Box>