Skip to content

Commit f93a861

Browse files
EMaslowskiQEMaslowskiQ
authored
(0.9.18) Internal EDAN Publishing + UX Improvements for Upload/Ingest (#596)
DPO3DPKRT-754/notification during upload (#590) DPO3DPKRT-813/UX fixes upload and ingestion (#591) DPO3DPKRT-772/internal publishing to EDAN (#592)
1 parent aa7535c commit f93a861

50 files changed

Lines changed: 1188 additions & 457 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@material-ui/icons": "4.9.1",
3535
"@material-ui/lab": "4.0.0-alpha.56",
3636
"@material-ui/pickers": "3.3.10",
37+
"@material/tooltip": "14.0.0",
3738
"@testing-library/jest-dom": "5.16.5",
3839
"@testing-library/react": "13.4.0",
3940
"@testing-library/user-event": "14.4.3",

‎client/src/components/controls/DateInputField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const useStyles = makeStyles(({ palette, typography, breakpoints }) => ({
4141
'& .MuiSvgIcon-root': {
4242
height: 20,
4343
width: 20
44-
}
44+
},
4545
}
4646
}));
4747

‎client/src/components/controls/LabelTooltipText.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { Typography, TypographyProps, Tooltip, PropTypes } from '@material-ui/core';
4+
import { HelpOutline } from '@material-ui/icons';
5+
6+
const useStyles = makeStyles(({ spacing }) => ({
7+
container: {
8+
display: 'flex',
9+
padding: ({ padding }: LabelTooltipTextProps ) => padding ? padding : '0px 10px',
10+
//borderRadius: 5,
11+
//border: `1px dashed #0086ff`,
12+
width: ({ width }: LabelTooltipTextProps ) => width || '100%',
13+
marginTop: ({ marginTop }: LabelTooltipTextProps ) => spacing(marginTop || 0),
14+
//backgroundColor: ({ required, error }: LabelTooltipTextProps ) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
15+
},
16+
label: {
17+
color: 'auto'
18+
},
19+
loading: {
20+
position: 'absolute',
21+
top: 16,
22+
right: 10
23+
}
24+
}));
25+
26+
interface LabelTooltipTextProps {
27+
error?: boolean;
28+
label?: string;
29+
labelProps?: TypographyProps;
30+
labelTooltipTxt: string;
31+
marginTop?: number;
32+
padding?: string;
33+
renderLabel?: boolean;
34+
width?: string;
35+
align?: PropTypes.Alignment;
36+
}
37+
38+
function LabelTooltipText(props: LabelTooltipTextProps): React.ReactElement {
39+
const { label, labelTooltipTxt, labelProps, renderLabel, align = 'left', } = props;
40+
const classes = useStyles(props);
41+
42+
let content: React.ReactNode = (
43+
<>
44+
<Typography align={align} className={classes.label} variant='caption'>
45+
{label}
46+
</Typography>
47+
</>
48+
);
49+
50+
if (labelTooltipTxt) {
51+
const tooltipContent = (
52+
<>
53+
<Typography align={align} className={classes.label} variant='caption' {...labelProps}>
54+
{label}
55+
<Tooltip title={labelTooltipTxt}>
56+
<HelpOutline fontSize='small' style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '20px 5px' }} />
57+
</Tooltip>
58+
</Typography>
59+
</>
60+
);
61+
content = tooltipContent;
62+
}
63+
64+
if (renderLabel === false) {
65+
content = null;
66+
}
67+
68+
return <div> {content} </div>;
69+
}
70+
71+
export default LabelTooltipText;

‎client/src/components/shared/AssetIdentifiers.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { eVocabularySetID } from '@dpo-packrat/common';
77
import FieldType from './FieldType';
88
import IdentifierList from './IdentifierList';
99

10+
//Styles
1011
const useStyles = makeStyles(({ palette, spacing }) => ({
1112
assetIdentifier: {
1213
display: 'flex',
@@ -31,6 +32,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
3132
}
3233
}));
3334

35+
//Defines the prop type
3436
interface AssetIdentifiersProps {
3537
systemCreated: boolean;
3638
identifiers: StateIdentifier[];
@@ -44,11 +46,18 @@ interface AssetIdentifiersProps {
4446
}
4547

4648
function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
49+
50+
//Props - types defined in interface
4751
const { systemCreated, identifiers, onSystemCreatedChange, onAddIdentifer, onUpdateIdentifer, onRemoveIdentifer,
4852
subjectView, onUpdateIdIdentifierPreferred, identifierName } = props;
53+
54+
//Component styling
4955
const classes = useStyles();
56+
57+
//Handles state change for the Identifier entries
5058
const [getEntries, getInitialEntry] = useVocabularyStore(state => [state.getEntries, state.getInitialEntry]);
5159

60+
//Function creates object to define new identifier
5261
const addIdentifer = (initialEntry: number | null) => {
5362
const newIdentifier: StateIdentifier = {
5463
id: identifiers.length + 1,
@@ -62,11 +71,13 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
6271
onAddIdentifer(updatedIdentifiers);
6372
};
6473

74+
//Function removes Identifier
6575
const removeIdentifier = (_idIdentifier: number, id: number) => {
6676
const updatedIdentifiers = lodash.filter(identifiers, identifier => identifier.id !== id);
6777
onRemoveIdentifer(updatedIdentifiers);
6878
};
6979

80+
//Function updates any changes to the Identifier
7081
const updateIdentifierFields = (id: number, name: string, value: string | number | boolean) => {
7182
const updatedIdentifiers = identifiers.map(identifier => {
7283
if (identifier.id === id) {
@@ -80,10 +91,12 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
8091
onUpdateIdentifer(updatedIdentifiers);
8192
};
8293

94+
//The label of the Asset Identifier UI (currently says 'Model Identifier(s))
8395
const label: string = (identifierName ? identifierName : 'Asset') + ' Identifier(s)';
8496
return (
97+
//The Identifier Component
8598
<Box marginBottom='10px'>
86-
<FieldType required label={label} padding='10px'>
99+
<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.'>
87100
<Box display='flex' justifyContent='space-between'>
88101
<Box className={classes.assetIdentifier}>
89102
<label htmlFor='systemCreated' style={{ display: 'none' }}>System Created Identifier</label>
@@ -98,6 +111,8 @@ function AssetIdentifiers(props: AssetIdentifiersProps): React.ReactElement {
98111
System will create an identifier
99112
</Typography>
100113
</Box>
114+
115+
{/*May need to write the logic here to check if there are no identifiers in existence.*/}
101116
{!identifiers.length && (
102117
<Button
103118
className={classes.addIdentifierButton}

‎client/src/components/shared/FieldType.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,18 @@ import { Box, BoxProps, PropTypes, Typography, TypographyProps, Tooltip, Grid, G
77
import { fade, makeStyles } from '@material-ui/core/styles';
88
import React from 'react';
99
import Progress from './Progress';
10+
import { HelpOutline } from '@material-ui/icons';
11+
// import { HelpOutline } from '@material-ui/icons';
1012

1113
const useStyles = makeStyles(({ palette, spacing }) => ({
1214
container: {
1315
display: 'flex',
14-
padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
15-
borderRadius: 5,
16-
width: ({ width }: FieldTypeProps) => width || '100%',
16+
// padding: ({ padding }: FieldTypeProps) => padding ? padding : '0px 10px',
17+
//borderRadius: 5,
18+
//border: `1px dashed #0086ff`,
19+
// width: ({ width }: FieldTypeProps) => width || '100%',
1720
marginTop: ({ marginTop }: FieldTypeProps) => spacing(marginTop || 0),
18-
backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? palette.primary.light : palette.secondary.light)
21+
backgroundColor: ({ required, error }: FieldTypeProps) => (error ? fade(palette.error.light, 0.3) : required ? '0' : palette.primary.light)
1922
},
2023
label: {
2124
color: 'auto'
@@ -24,7 +27,11 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
2427
position: 'absolute',
2528
top: 16,
2629
right: 10
27-
}
30+
},
31+
tooltip: {
32+
fontSize: '0.75rem',
33+
fontWeight: 'lighter'
34+
},
2835
}));
2936

3037
interface FieldTypeProps {
@@ -53,18 +60,28 @@ function FieldType(props: FieldTypeProps): React.ReactElement {
5360
const classes = useStyles(props);
5461

5562
let content: React.ReactNode = (
56-
<Typography align={align} className={classes.label} variant='caption' {...labelProps}>
57-
{label}
58-
</Typography>
63+
<>
64+
<Typography align={align} className={classes.label} variant='caption' {...labelProps}>
65+
{label}
66+
</Typography>
67+
</>
5968
);
6069

6170
if (labelTooltip) {
6271
const tooltipContent = (
63-
<Tooltip title={labelTooltip}>
72+
<>
6473
<Typography align={align} className={classes.label} variant='caption' {...labelProps}>
6574
{label}
75+
<Tooltip
76+
title={labelTooltip}
77+
classes={{
78+
tooltip: classes.tooltip,
79+
}}
80+
>
81+
<HelpOutline style={{ alignSelf: 'center', cursor: 'pointer', verticalAlign: 'middle', padding: '0px 5px', paddingBottom: '3px', fontSize: '1rem' }} />
82+
</Tooltip>
6683
</Typography>
67-
</Tooltip>
84+
</>
6885
);
6986
content = tooltipContent;
7087
}

‎client/src/components/shared/SidebarBottomNavigator.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,34 @@
66
* This component renders bottom navigation view, used in data upload
77
* and ingestion flow
88
*/
9-
import { Box } from '@material-ui/core';
9+
import { Box, TypographyProps } from '@material-ui/core';
1010
import { makeStyles } from '@material-ui/core/styles';
1111
import React from 'react';
1212
import { Link } from 'react-router-dom';
1313
import { Colors } from '../../theme';
1414
import LoadingButton from '../controls/LoadingButton';
1515

16-
const useStyles = makeStyles(({ palette, breakpoints }) => ({
16+
const useStyles = makeStyles(({ breakpoints }) => ({
1717
uploadContainer: {
1818
display: 'flex',
1919
bottom: 0,
2020
alignItems: 'center',
2121
justifyContent: 'space-between',
22-
padding: '10px 0px',
23-
background: palette.background.paper
22+
padding: '10px',
23+
//background: palette.background.paper
24+
// background: 'rgb(236, 245, 253)',
2425
},
2526
container: {
26-
display: 'flex',
27+
//display: 'flex',
2728
bottom: 0,
2829
alignItems: 'center',
2930
justifyContent: 'space-between',
30-
width: '53vw',
31-
padding: '20px 0px',
32-
marginLeft: 20,
33-
background: palette.background.paper
31+
// width: '100%',
32+
// padding: '20px',
33+
margin: '10px',
34+
marginLeft: '20px',
35+
//background: palette.background.paper
36+
//background: 'rgb(236, 245, 253)'
3437
},
3538
navButton: {
3639
minHeight: 35,
@@ -45,10 +48,11 @@ const useStyles = makeStyles(({ palette, breakpoints }) => ({
4548
},
4649
link: {
4750
textDecoration: 'none'
48-
}
51+
},
4952
}));
5053

5154
interface SidebarBottomNavigatorProps {
55+
btnProps?: TypographyProps;
5256
leftLabel: string;
5357
leftLoading?: boolean;
5458
leftRoute?: string;
@@ -68,7 +72,7 @@ function SidebarBottomNavigator(props: SidebarBottomNavigatorProps): React.React
6872
// console.log(`SidebarBottomNavigator ${JSON.stringify(props)}, onClickRight ${onClickRight ? 'defined' : 'NOT defined'}`);
6973

7074
let leftButton = (
71-
<LoadingButton className={classes.navButton} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
75+
<LoadingButton className={classes.navButton} style={{ marginRight: '30px' }} disableElevation loaderSize={15} loading={leftLoading || false} disabled={disableNavigation} onClick={onClickLeft}>
7276
{leftLabel}
7377
</LoadingButton>
7478
);

‎client/src/graphql/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class PRApolloClient extends ApolloClient<NormalizedCacheObject> {
4141

4242
private handleException(error: any): void {
4343
const message: string = (error instanceof Error) ? `: ${error.message}` : '';
44-
console.log(`Apollo Client Error${message}`);
44+
console.log(`[PACKRAT:ERROR] Apollo Client Error ${message}`);
4545
// console.log(`Apollo Client Error${message}: ${JSON.stringify(error)}`);
4646
throw error;
4747
}
@@ -53,6 +53,8 @@ const SAMLRedirectPath: string = '/saml/idp/profile/redirectorpost/sso';
5353
const errorLink = onError(({ graphQLErrors, networkError }) => {
5454
let sentToLogin: boolean = false;
5555

56+
console.log(`[PACKRAT:ERROR] Network: ${JSON.stringify(networkError)}`);
57+
5658
if (graphQLErrors) {
5759
graphQLErrors.forEach(({ message, locations, path }) => {
5860
console.log(`[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`);
@@ -67,9 +69,6 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
6769
}
6870

6971
if (networkError) {
70-
console.log(`[Network error]: ${networkError}`);
71-
// console.log(`[Network error]: ${JSON.stringify(networkError)}`);
72-
7372
if (!sentToLogin) {
7473
let redirectToLogin: boolean = false;
7574

@@ -173,6 +172,7 @@ interface IApolloUploader {
173172
refetchQueries?: string[];
174173
onProgress: (event: ProgressEvent) => void;
175174
onCancel: (cancelHandler: () => void) => void;
175+
onFailed: (error: ErrorEvent) => void;
176176
}
177177

178178
async function apolloUploader(options: IApolloUploader): Promise<any> {

0 commit comments

Comments
 (0)