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

Jump to bottom

Tech Debt - General UI Fixes #1176

Merged
merged 18 commits into from
Dec 5, 2023
Merged

Tech Debt - General UI Fixes #1176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
7a04964
Added loading placeholders for observations table headers
curtisupshall Nov 23, 2023
008252d
Fixing skeleton loaders
jeznorth Nov 23, 2023
5dbb6ec
UI Updates
jeznorth Nov 23, 2023
0e21943
Fixing Observation Table Menu Button Position
jeznorth Nov 23, 2023
2819222
Removing Dev Code
jeznorth Nov 23, 2023
f68f562
Standardize Loading Patterns, General UI Improvements
jeznorth Nov 24, 2023
e409dfe
Merge remote-tracking branch 'origin/dev' into UI-Fixes
jeznorth Nov 24, 2023
db377e6
Map Loading Overlay
jeznorth Nov 24, 2023
36fcc07
Fixing height of sampling site list skeleton
jeznorth Nov 27, 2023
69e44f3
Fix button clipping
jeznorth Nov 27, 2023
753a2a2
Added back isLoading prop to skeleton loader for observations
curtisupshall Nov 27, 2023
6e38255
Fix pinned header column issue
jeznorth Nov 27, 2023
c4b930d
Merge branch 'dev' into UI-Fixes
curtisupshall Nov 28, 2023
b723ef7
Added error classname to errored rows
curtisupshall Nov 28, 2023
db0b829
UI Fixes / Updates
jeznorth Nov 28, 2023
7a0c8f8
Adding Title for Sampling Method and Period
jeznorth Nov 28, 2023
77cd1c6
Fix Sample Site List Styling
jeznorth Nov 28, 2023
84647ae
Fixed linting errors
curtisupshall Dec 4, 2023
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
64 changes: 36 additions & 28 deletions app/src/components/data-grid/DataGridValidationAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { mdiChevronDown, mdiChevronUp, mdiClose } from '@mdi/js';
import { mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js';
import Icon from '@mdi/react';
import { Collapse } from '@mui/material';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { GridRowId } from '@mui/x-data-grid';
Expand All @@ -30,7 +29,7 @@

const sortedRowIds = useMemo(
() => props.muiDataGridApiRef?.getSortedRowIds?.() ?? [],
[props.muiDataGridApiRef.getSortedRowIds]

Check warning on line 32 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useMemo has a missing dependency: 'props.muiDataGridApiRef'. Either include it or remove the dependency array
);

const sortedErrors: ITableValidationError<RowType>[] = useMemo(() => {
Expand Down Expand Up @@ -63,7 +62,7 @@
}, []);

return newSortedErrors;
}, [JSON.stringify(props.validationModel)]);

Check warning on line 65 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useMemo has missing dependencies: 'props.muiDataGridApiRef', 'props.validationModel', and 'sortedRowIds'. Either include them or remove the dependency array

Check warning on line 65 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useMemo has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked

const numErrors = sortedErrors.length;

Expand All @@ -73,7 +72,7 @@
focusErrorAtIndex(next);
return next;
});
}, [numErrors]);

Check warning on line 75 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useCallback has a missing dependency: 'focusErrorAtIndex'. Either include it or remove the dependency array

const handleNext = useCallback(() => {
setIndex((prev) => {
Expand All @@ -81,7 +80,7 @@
focusErrorAtIndex(next);
return next;
});
}, [numErrors]);

Check warning on line 83 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useCallback has a missing dependency: 'focusErrorAtIndex'. Either include it or remove the dependency array

const indexIndicator = useMemo(() => {
return numErrors > 0 ? `${index + 1}/${numErrors}` : '0/0';
Expand All @@ -108,7 +107,7 @@
props.muiDataGridApiRef.setCellFocus(focusedError.rowId, field);
props.muiDataGridApiRef.scrollToIndexes({ rowIndex, colIndex });
},
[sortedErrors]

Check warning on line 110 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useCallback has a missing dependency: 'props.muiDataGridApiRef'. Either include it or remove the dependency array
);

useEffect(() => {
Expand All @@ -119,36 +118,45 @@
if (index >= numErrors) {
setIndex(numErrors > 0 ? numErrors - 1 : 0);
}
}, [props.validationModel]);

Check warning on line 121 in app/src/components/data-grid/DataGridValidationAlert.tsx

View workflow job for this annotation

GitHub Actions / Running Linter and Formatter 

React Hook useEffect has missing dependencies: 'index' and 'numErrors'. Either include them or remove the dependency array

return (
<Collapse in={numErrors > 0 && !hideAlert}>
<Box mt={2} mb={1} mx={1}>
<Alert
variant="outlined"
severity="error"
action={
<Box display="flex" flexDirection="row" alignItems="center">
<Typography>{indexIndicator}</Typography>
<Divider orientation="vertical" flexItem variant="middle" sx={{ ml: 2, mr: 1, borderColor: 'inherit' }} />
<Button color="inherit" startIcon={<Icon path={mdiChevronUp} size={1} />} onClick={() => handlePrev()}>
Prev
</Button>
<Button color="inherit" startIcon={<Icon path={mdiChevronDown} size={1} />} onClick={() => handleNext()}>
Next
</Button>
<IconButton color="inherit" onClick={() => setHideAlert(true)}>
<Icon path={mdiClose} size={1} />
</IconButton>
</Box>
}>
<AlertTitle>Could not save observations: Validation failed</AlertTitle>
<Typography variant="body2">
<strong>Error {indexIndicator}</strong>
{currentError && `: ${currentError.message}`}
</Typography>
</Alert>
</Box>
<Alert
square
severity="error"
sx={{
mx: 1,
mb: 1,
py: 1.5
}}
action={
<Box
display="flex"
flexDirection="row"
alignItems="center"
sx={{
'& button': {
fontWeight: 700
}
}}>
<Button color="inherit" startIcon={<Icon path={mdiChevronLeft} size={1} />} onClick={() => handlePrev()}>

Check warning on line 143 in app/src/components/data-grid/DataGridValidationAlert.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/components/data-grid/DataGridValidationAlert.tsx#L143 

Added line #L143 was not covered by tests
Prev
</Button>
<Button color="inherit" endIcon={<Icon path={mdiChevronRight} size={1} />} onClick={() => handleNext()}>

Check warning on line 146 in app/src/components/data-grid/DataGridValidationAlert.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/components/data-grid/DataGridValidationAlert.tsx#L146 

Added line #L146 was not covered by tests
Next
</Button>
<IconButton onClick={() => setHideAlert(true)} sx={{ ml: 2 }}>

Check warning on line 149 in app/src/components/data-grid/DataGridValidationAlert.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/components/data-grid/DataGridValidationAlert.tsx#L149 

Added line #L149 was not covered by tests
<Icon path={mdiClose} size={1} />
</IconButton>
</Box>
}>
<AlertTitle>Missing required fields</AlertTitle>
<Typography variant="body2">
<strong>Error {indexIndicator}</strong>
{currentError && `: ${currentError.message}`}
</Typography>
</Alert>
</Collapse>
);
};
Expand Down
8 changes: 4 additions & 4 deletions app/src/features/surveys/observations/ObservationsMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ const ObservationsMap = () => {
]);

return (
<Box position="relative">
<>
<LeafletMapContainer
data-testid="leaflet-survey_observations_map"
id="survey_observations_map"
center={MAP_DEFAULT_CENTER}
scrollWheelZoom={false}
fullscreenControl={true}
style={{ height: 600 }}>
style={{ height: '100%' }}>
<MapBaseCss />
<FullScreenScrollingEventHandler bounds={bounds} scrollWheelZoom={false} />
<SetMapBounds bounds={bounds} />
Expand Down Expand Up @@ -150,7 +150,7 @@ const ObservationsMap = () => {
</LayersControl>
</LeafletMapContainer>
{(surveyObservations.length > 0 || studyAreaFeatures.length > 0 || sampleSiteFeatures.length > 0) && (
<Box position="absolute" top="126px" left="10px" zIndex="999">
<Box position="absolute" top="126px" left="10px" zIndex="1000" display="none">
<IconButton
sx={{
padding: '3px',
Expand All @@ -170,7 +170,7 @@ const ObservationsMap = () => {
</IconButton>
</Box>
)}
</Box>
</>
);
};

Expand Down
191 changes: 91 additions & 100 deletions app/src/features/surveys/observations/observations-table/ObservationComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Collapse from '@mui/material/Collapse';
import { grey } from '@mui/material/colors';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import DataGridValidationAlert from 'components/data-grid/DataGridValidationAlert';
Expand Down Expand Up @@ -104,110 +103,102 @@
flex="1 1 auto"
height="100%"
sx={{
overflow: 'hidden',
background: grey[100]
overflow: 'hidden'
}}>
<Paper square elevation={0}>
<Toolbar>
<Typography
sx={{
flexGrow: '1',
fontSize: '1.125rem',
fontWeight: 700
}}>
Observations &zwnj;
<Typography sx={{ fontWeight: '400' }} component="span" variant="inherit" color="textSecondary">
({observationsTableContext.observationCount})
</Typography>
<Toolbar>
<Typography
sx={{
flexGrow: '1',
fontSize: '1.125rem',
fontWeight: 700
}}>
Observations &zwnj;
<Typography sx={{ fontWeight: '400' }} component="span" variant="inherit" color="textSecondary">
({observationsTableContext.observationCount})
</Typography>
</Typography>

<Box display="flex" overflow="hidden" gap={1} whiteSpace="nowrap">
<Button
variant="contained"
color="primary"
startIcon={<Icon path={mdiImport} size={1} />}
onClick={() => setShowImportDiaolog(true)}>
Import
</Button>
<Button
variant="contained"
color="primary"
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => observationsTableContext.addObservationRecord()}
disabled={observationsTableContext.isSaving}>
Add Record
</Button>
<Collapse in={hasUnsavedChanges} orientation="horizontal" sx={{ mr: -1 }}>
<Box whiteSpace="nowrap" display="flex" sx={{ gap: 1, pr: 1 }}>
<LoadingButton
loading={observationsTableContext.isSaving}
variant="contained"
color="primary"
onClick={() => observationsTableContext.saveObservationRecords()}
disabled={observationsTableContext.isSaving}>
Save
</LoadingButton>
<Button
variant="outlined"
color="primary"
onClick={() => setShowConfirmRemoveAllDialog(true)}
disabled={observationsTableContext.isSaving}>
Discard Changes
</Button>
</Box>
</Collapse>
<Box>
<IconButton
onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setMenuAnchorEl(event.currentTarget);
}}
size="small"
disabled={numSelectedRows === 0}
aria-label="observation options">
<Icon size={1} path={mdiDotsVertical} />
</IconButton>
<Menu
anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
id="survey-observations-table-actions-menu"
anchorEl={menuAnchorEl}
open={Boolean(menuAnchorEl)}
onClose={handleCloseMenu}
MenuListProps={{
'aria-labelledby': 'basic-button'
}}>
<MenuItem
onClick={() => {
observationsTableContext.deleteSelectedObservationRecords();
handleCloseMenu();
}}
disabled={observationsTableContext.isSaving}>
<ListItemIcon>
<Icon path={mdiTrashCanOutline} size={1} />
</ListItemIcon>
<Typography variant="inherit">Delete {p(numSelectedRows, 'Observation')}</Typography>
</MenuItem>
</Menu>
<Stack flexDirection="row" alignItems="center" gap={1} whiteSpace="nowrap">
<Button
variant="contained"
color="primary"
startIcon={<Icon path={mdiImport} size={1} />}
onClick={() => setShowImportDiaolog(true)}>

Check warning on line 126 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L126 

Added line #L126 was not covered by tests
Import
</Button>
<Button
variant="contained"
color="primary"
startIcon={<Icon path={mdiPlus} size={1} />}
onClick={() => observationsTableContext.addObservationRecord()}

Check warning on line 133 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L133 

Added line #L133 was not covered by tests
disabled={observationsTableContext.isSaving}>
Add Record
</Button>
<Collapse in={hasUnsavedChanges} orientation="horizontal" sx={{ mr: -1 }}>
<Box whiteSpace="nowrap" display="flex" sx={{ gap: 1, pr: 1 }}>
<LoadingButton
loading={observationsTableContext.isSaving}
variant="contained"
color="primary"
onClick={() => observationsTableContext.saveObservationRecords()}

Check warning on line 143 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L143 

Added line #L143 was not covered by tests
disabled={observationsTableContext.isSaving}>
Save
</LoadingButton>
<Button
variant="outlined"
color="primary"
onClick={() => setShowConfirmRemoveAllDialog(true)}

Check warning on line 150 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L150 

Added line #L150 was not covered by tests
disabled={observationsTableContext.isSaving}>
Discard Changes
</Button>
</Box>
</Collapse>
<Box>
<IconButton
onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setMenuAnchorEl(event.currentTarget);

Check warning on line 159 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L159 

Added line #L159 was not covered by tests
}}
edge="end"
disabled={numSelectedRows === 0}
aria-label="observation options">
<Icon size={1} path={mdiDotsVertical} />
</IconButton>
<Menu
anchorOrigin={{
vertical: 'top',
horizontal: 'right'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right'
}}
id="survey-observations-table-actions-menu"
anchorEl={menuAnchorEl}
open={Boolean(menuAnchorEl)}
onClose={handleCloseMenu}
MenuListProps={{
'aria-labelledby': 'basic-button'
}}>
<MenuItem
onClick={() => {
observationsTableContext.deleteSelectedObservationRecords();
handleCloseMenu();

Check warning on line 185 in app/src/features/surveys/observations/observations-table/ObservationComponent.tsx

View check run for this annotation

Codecov / codecov/patch

app/src/features/surveys/observations/observations-table/ObservationComponent.tsx#L184-L185 

Added lines #L184 - L185 were not covered by tests
}}
disabled={observationsTableContext.isSaving}>
<ListItemIcon>
<Icon path={mdiTrashCanOutline} size={1} />
</ListItemIcon>
<Typography variant="inherit">Delete {p(numSelectedRows, 'Observation')}</Typography>
</MenuItem>
</Menu>
</Box>
</Toolbar>
</Paper>
</Stack>
</Toolbar>

<DataGridValidationAlert validationModel={validationModel} muiDataGridApiRef={_muiDataGridApiRef.current} />
<Box
display="flex"
flexDirection="column"
flex="1 1 auto"
position="relative"
sx={{
background: grey[100]
}}>
<Box position="absolute" width="100%" height="100%" p={1}>

<Box display="flex" flexDirection="column" flex="1 1 auto" position="relative">
<Box position="absolute" width="100%" height="100%" px={1}>
<ObservationsTable isLoading={processingRecords} />
</Box>
</Box>
Expand Down
Loading
Loading