Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UIFixes: UI Fixes/Improvements #226

Merged
merged 5 commits into from
Jan 8, 2024
Merged

UIFixes: UI Fixes/Improvements #226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
41c7290
Pick changes
NickPhura Jan 5, 2024
157d1f8
Fixing missing tags
jeznorth Jan 5, 2024
9f1fd98
Fix spacing issues
jeznorth Jan 5, 2024
9a4a3b8
Minor UI Fixes
jeznorth Jan 5, 2024
4676025
Fix lint issues
jeznorth Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/components/layout/header/BaseHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ const BaseHeader = (props: IBaseHeader) => {
<Typography
variant="h1"
sx={{
mt: '-4px',
ml: '-2px',
pb: 0.75,
display: '-webkit-box',
WebkitLineClamp: '2',
WebkitBoxOrient: 'vertical',
Expand Down
8 changes: 4 additions & 4 deletions app/src/components/layout/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ const Header: React.FC<React.PropsWithChildren> = () => {
<source srcSet={headerImageSmall} media="(min-width: 600px)"></source>
<img src={headerImageSmall} alt={'Government of British Columbia'} />
</picture>
<span>
BioHub
<Typography component="span" sx={{ fontSize: '1.25rem', fontWeight: 700 }}>
BioHub BC
<Box
component="sup"
sx={{
Expand All @@ -84,7 +84,7 @@ const Header: React.FC<React.PropsWithChildren> = () => {
}}>
<BetaLabel />
</Box>
</span>
</Typography>
</RouterLink>
</Box>
);
Expand Down Expand Up @@ -223,7 +223,7 @@ const Header: React.FC<React.PropsWithChildren> = () => {
<AppBrand></AppBrand>
</Box>
<Box
ml={8}
ml={4}
display="flex"
alignItems="center"
sx={{
Expand Down
2 changes: 1 addition & 1 deletion app/src/features/admin/dashboard/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const DashboardPage = () => {
py: 4,
pb: 0
}}>
<Typography variant="h1" sx={{ mt: '-4px', ml: '-2px' }}>
<Typography variant="h1" sx={{ ml: '-2px' }}>
Submissions
</Typography>

Expand Down
27 changes: 15 additions & 12 deletions app/src/features/admin/dashboard/components/ReviewedSubmissionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,22 +90,25 @@ const ReviewedSubmissionsTable = () => {

return (
<>
<Box pb={4} display="flex" flexDirection="row" justifyContent="space-between">
<Stack mb={4} alignItems="center" flexDirection="row" justifyContent="space-between">
<Typography variant="h4" component="h2">{`${submissionRecords.length} ${p(
submissionRecords.length,
'record'
)} found`}</Typography>
<SubmissionsListSortMenu
sortMenuItems={{
name: 'Name',
security_review_timestamp: 'Review Complete',
publish_timestamp: 'Publish Date',
source_system: 'Submitting System'
}}
submissions={submissionRecords}
handleSubmissions={handleSortSubmissions}
/>
</Box>
<Box my={-1}>
<SubmissionsListSortMenu
sortMenuItems={{
publish_timestamp: 'Publish Date',
name: 'Name',
security_review_timestamp: 'Review Complete',
source_system: 'Submitting System'
}}
submissions={submissionRecords}
handleSubmissions={handleSortSubmissions}
apiSortSync={{ key: 'publish_timestamp', sort: 'asc' }}
/>
</Box>
</Stack>
<Stack gap={2}>
{submissionRecords.map((submissionRecord) => {
return (
Expand Down
17 changes: 10 additions & 7 deletions app/src/features/admin/dashboard/components/UnreviewedSubmissionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,17 +83,20 @@ const UnreviewedSubmissionsTable = () => {

return (
<>
<Box pb={4} display="flex" flexDirection="row" justifyContent="space-between">
<Stack mb={4} alignItems="center" flexDirection="row" justifyContent="space-between">
<Typography variant="h4" component="h2">{`${submissionRecords.length} ${p(
submissionRecords.length,
'record'
)} found`}</Typography>
<SubmissionsListSortMenu
sortMenuItems={{ publish_timestamp: 'Publish Timestamp' }}
submissions={submissionRecords}
handleSubmissions={handleSortSubmissions}
/>
</Box>
<Box my={-1}>
<SubmissionsListSortMenu
sortMenuItems={{ submitted_timestamp: 'Date Submitted' }}
submissions={submissionRecords}
handleSubmissions={handleSortSubmissions}
apiSortSync={{ key: 'submitted_timestamp', sort: 'desc' }}
/>
</Box>
</Stack>
<Stack gap={2}>
{submissionRecords.map((submissionRecord) => {
return (
Expand Down
93 changes: 59 additions & 34 deletions app/src/features/submissions/components/SubmissionHeaderSecurityStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,67 @@ const SubmissionHeaderSecurityStatus = (props: ISubmissionHeaderSecurityStatusPr
switch (submission.security) {
case SECURITY_APPLIED_STATUS.SECURED: {
securityStatus = (
<>
<Stack
flexDirection="row"
alignItems="center"
gap={0.75}
sx={{
'& *': {
color: 'error.main'
},
'& svg': {
mt: '-2px'
}
}}>
<Icon path={mdiLock} size={0.75} />
<Typography component="span" variant="body2">
<Typography component="strong" variant="body2" sx={{ fontWeight: 700 }}>
Secured
</Typography>
</>
</Stack>
);
break;
}
case SECURITY_APPLIED_STATUS.PARTIALLY_SECURED: {
securityStatus = (
<>
<Stack
flexDirection="row"
alignItems="center"
gap={0.75}
sx={{
'& *': {
color: 'error.main'
},
'& svg': {
mt: '-2px'
}
}}>
<Icon path={mdiLockAlertOutline} size={0.75} />
<Typography component="span" variant="body2">
<Typography component="strong" variant="body2" sx={{ fontWeight: 700 }}>
Partially Secured
</Typography>
</>
</Stack>
);
break;
}
default: {
securityStatus = (
<>
<Stack
flexDirection="row"
alignItems="center"
gap={0.75}
sx={{
'& *': {
color: 'error.main'
},
'& svg': {
mt: '-2px'
}
}}>
<Icon path={mdiLockOpenOutline} size={0.75} />
<Typography component="span" variant="body2">
<Typography component="strong" variant="body2" sx={{ fontWeight: 700 }}>
Unsecured
</Typography>
</>
</Stack>
);
break;
}
Expand All @@ -57,56 +90,48 @@ const SubmissionHeaderSecurityStatus = (props: ISubmissionHeaderSecurityStatusPr
<Stack
flexDirection="row"
alignItems="center"
gap={1.5}
gap={1.25}
divider={<Divider flexItem orientation="vertical" />}
sx={{
textTransform: 'uppercase'
}}
title="Open access to all records">
<Stack
flexDirection="row"
alignItems="center"
gap={1}
sx={{
'& svg': {
color: 'text.secondary'
}
}}>
<Stack flexDirection="row" alignItems="center" gap={1}>
{securityStatus}
</Stack>

{submission.publish_timestamp ? (
<Stack flexDirection="row" alignItems="center" gap={1}>
<Typography component="span" variant="body2" color="textSecondary">
Published:
<Stack flexDirection="row" alignItems="center" gap={0.75}>
<Typography component="span" variant="body2" sx={{ fontWeight: 700 }}>
Published
</Typography>
<Typography component="span" variant="body2">
{getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.publish_timestamp as string)}
({getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.publish_timestamp as string)})
</Typography>
</Stack>
) : submission.security_review_timestamp ? (
<Stack flexDirection="row" alignItems="center" gap={1}>
<Typography component="span" variant="body2" color="textSecondary">
Completed Review:
<Stack flexDirection="row" alignItems="center" gap={0.75}>
<Typography component="span" variant="body2" sx={{ fontWeight: 700 }}>
Review Complete
</Typography>
<Typography component="span" variant="body2">
{getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.security_review_timestamp as string)}
({getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.security_review_timestamp as string)})
</Typography>
</Stack>
) : (
<Stack flexDirection="row" alignItems="center" gap={1}>
<Typography component="span" variant="body2" color="textSecondary">
Pending Security Review
<Stack flexDirection="row" alignItems="center">
<Typography component="span" variant="body2" sx={{ fontWeight: 700 }}>
Pending Review
</Typography>
</Stack>
)}

<Stack flexDirection="row" alignItems="center" gap={1}>
<Typography component="span" variant="body2" color="textSecondary">
Submitted:
<Stack flexDirection="row" alignItems="center" gap={0.75}>
<Typography component="span" variant="body2" sx={{ fontWeight: 700 }}>
Date Submitted
</Typography>
<Typography component="span" variant="body2">
{getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.create_date as string)}
({getFormattedDate(DATE_FORMAT.ShortDateFormat, submission.create_date as string)})
</Typography>
</Stack>
</Stack>
Expand Down
56 changes: 0 additions & 56 deletions app/src/features/submissions/list/SortMenuItem.tsx
View file
Open in desktop

This file was deleted.

17 changes: 10 additions & 7 deletions app/src/features/submissions/list/SubmissionsListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,16 @@
fuzzyData.length,
'record'
)} found`}</Typography>
<SubmissionsListSortMenu
sortMenuItems={{ name: 'Name', publish_timestamp: 'Publish Date' }}
submissions={fuzzyData}
handleSubmissions={(data) => {
handleFuzzyData(data);
}}
/>
<Box my={-1}>
<SubmissionsListSortMenu
sortMenuItems={{ publish_timestamp: 'Publish Date', name: 'Name' }}
submissions={fuzzyData}
handleSubmissions={(data) => {
handleFuzzyData(data);

Check warning on line 94 in app/src/features/submissions/list/SubmissionsListPage.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/submissions/list/SubmissionsListPage.tsx#L94 

Added line #L94 was not covered by tests
}}
apiSortSync={{ key: 'publish_timestamp', sort: 'asc' }}
/>
</Box>
</Box>
<SubmissionsList
submissions={fuzzyData}
Expand Down
1 change: 1 addition & 0 deletions app/src/features/submissions/list/SubmissionsListSortMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const renderMenu = () =>
submissions={mockSubmissions}
handleSubmissions={mockHandleSubmissions}
sortMenuItems={menuItems}
apiSortSync={{ key: 'name', sort: 'asc' }}
/>
</ThemeProvider>
);
Expand Down
Loading
Loading