Skip to content

Commit f881b40

Browse files
tom0827tom0827
authored
Merge pull request bcgov#131 from tom0827/ENGAGE-91
[ENGAGE-53,ENGAGE-91] Image URL generator updates
2 parents feff507 + 804e9a4 commit f881b40

File tree

3 files changed

+24
-55
lines changed

3 files changed

+24
-55
lines changed

‎met-web/src/components/admin/imageManagement/ImageListing/ImageListing.tsx‎

Lines changed: 17 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useContext } from 'react';
22
import Grid from '@mui/material/Grid';
33
import { ImageContext } from './ImageContext';
4-
import { HeaderTitle, MetPageGridContainer, MetParagraph, PrimaryButton } from 'components/shared/common';
4+
import { MetHeader1, MetHeader3, MetPageGridContainer, MetParagraph, PrimaryButton } from 'components/shared/common';
55
import ImageUpload from '../ImageUpload';
66
import { IconButton, Stack, TextField } from '@mui/material';
7-
import { Search as SearchIcon, OpenInNew as OpenInNewIcon } from '@mui/icons-material';
7+
import { Search as SearchIcon } from '@mui/icons-material';
88
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
9+
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
910
import MetTable from 'components/shared/common/Table';
1011
import { HeadCell, PaginationOptions } from 'components/shared/common/Table/types';
1112
import { ImageInfo } from 'models/image';
@@ -36,7 +37,6 @@ const ImageListing = () => {
3637
const { roles } = useAppSelector((state) => state.user);
3738

3839
const authorized = roles.includes(USER_ROLES.CREATE_IMAGES);
39-
4040
const headCells: HeadCell<ImageInfo>[] = [
4141
{
4242
key: 'url',
@@ -78,42 +78,24 @@ const ImageListing = () => {
7878
</Grid>
7979
);
8080
},
81+
customStyle: { whiteSpace: 'nowrap' },
8182
},
8283
{
8384
key: 'url',
84-
label: 'Image URL',
85+
label: 'Copy URL',
8586
disablePadding: true,
8687
allowSort: true,
8788
numeric: false,
8889
renderCell: (row: ImageInfo) => (
8990
<Grid container direction={'row'} gap={1} alignItems={'center'}>
90-
<Grid item>{row.url}</Grid>
9191
<Grid item>
9292
<IconButton
9393
onClick={() => {
94-
const url = imageToDisplay?.url ?? '';
95-
const newWindow = window.open();
96-
if (newWindow) {
97-
newWindow.document.write(`
98-
<!DOCTYPE html>
99-
<html>
100-
<head>
101-
<title>Image</title>
102-
<style>
103-
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
104-
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
105-
</style>
106-
</head>
107-
<body>
108-
<img src="${url}" alt="Image" />
109-
</body>
110-
</html>
111-
`);
112-
newWindow.document.close();
113-
}
94+
const url = row?.url ?? '';
95+
navigator.clipboard.writeText(url);
11496
}}
11597
>
116-
<OpenInNewIcon />
98+
<ContentCopyIcon />
11799
</IconButton>
118100
</Grid>
119101
</Grid>
@@ -149,7 +131,7 @@ const ImageListing = () => {
149131
rowSpacing={1}
150132
>
151133
<Grid item xs={12}>
152-
<HeaderTitle sx={{ fontSize: '1.5rem' }}>Image URL Generator</HeaderTitle>
134+
<MetHeader1>Image URL Generator</MetHeader1>
153135
</Grid>
154136
<Grid item xs={12}>
155137
<ImageUpload
@@ -180,7 +162,6 @@ const ImageListing = () => {
180162
<Then>
181163
<Grid item xs={6}>
182164
<Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
183-
<CheckCircleOutlineIcon color="success" />
184165
<img
185166
src={imageToDisplay?.url}
186167
style={{
@@ -190,6 +171,7 @@ const ImageListing = () => {
190171
height: 'auto',
191172
}}
192173
/>
174+
<CheckCircleOutlineIcon color="success" />
193175
<MetParagraph>{imageToDisplay?.display_name} has been successfully uploaded</MetParagraph>
194176
</Stack>
195177
</Grid>
@@ -201,32 +183,16 @@ const ImageListing = () => {
201183
justifyContent="right"
202184
sx={{ height: 100 }}
203185
>
204-
<IconButton
186+
<PrimaryButton
205187
onClick={() => {
206188
const url = imageToDisplay?.url ?? '';
207-
const newWindow = window.open();
208-
if (newWindow) {
209-
newWindow.document.write(`
210-
<!DOCTYPE html>
211-
<html>
212-
<head>
213-
<title>Image</title>
214-
<style>
215-
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; }
216-
img { max-width: 100%; max-height: 100vh; object-fit: contain; }
217-
</style>
218-
</head>
219-
<body>
220-
<img src="${url}" alt="Image" />
221-
</body>
222-
</html>
223-
`);
224-
newWindow.document.close();
225-
}
189+
navigator.clipboard.writeText(url);
226190
}}
191+
startIcon={<ContentCopyIcon />}
192+
size="small"
227193
>
228-
<OpenInNewIcon />
229-
</IconButton>
194+
Copy URL
195+
</PrimaryButton>
230196
</Stack>
231197
</Grid>
232198
</Then>
@@ -235,7 +201,7 @@ const ImageListing = () => {
235201
</Else>
236202
</If>
237203
<Grid item xs={12}>
238-
<HeaderTitle sx={{ fontSize: '1.17em' }}>Uploaded Files</HeaderTitle>
204+
<MetHeader3>Uploaded Files</MetHeader3>
239205
</Grid>
240206
<Grid item xs={12}>
241207
<Stack direction="row" spacing={1} alignItems="center">

‎met-web/src/components/shared/layout/SideNav/SideNav.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,13 @@ const DrawerBox = () => {
4141
<ListItem key={route.name}>
4242
<ListItemButton
4343
data-testid={`SideNav/${route.name}-button`}
44-
onClick={() => navigate(route.path)}
44+
onClick={() => {
45+
if (route.name === 'Images') {
46+
window.open(`${route.path}`, '_blank', 'noopener');
47+
} else {
48+
navigate(route.path);
49+
}
50+
}}
4551
sx={{
4652
'&:hover': {
4753
backgroundColor: Palette.hover.light,

‎met-web/tests/unit/components/image/ImageListing.test.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,9 @@ describe('Image listing page tests', () => {
9696
await waitFor(() => {
9797
expect(screen.getByText(mockImageOne.display_name)).toBeInTheDocument();
9898
expect(screen.getByText(formatDate(mockImageOne.date_uploaded))).toBeInTheDocument();
99-
expect(screen.getByText(mockImageOne.url)).toBeInTheDocument();
10099

101100
expect(screen.getByText(mockImageTwo.display_name)).toBeInTheDocument();
102101
expect(screen.getByText(formatDate(mockImageTwo.date_uploaded))).toBeInTheDocument();
103-
expect(screen.getByText(mockImageTwo.url)).toBeInTheDocument();
104102
});
105103
});
106104

@@ -121,7 +119,6 @@ describe('Image listing page tests', () => {
121119
await waitFor(() => {
122120
expect(screen.getByText(mockImageOne.display_name)).toBeInTheDocument();
123121
expect(screen.getByText(formatDate(mockImageOne.date_uploaded))).toBeInTheDocument();
124-
expect(screen.getByText(mockImageOne.url)).toBeInTheDocument();
125122
});
126123

127124
const searchField = container.querySelector('input[name="searchText"]');

0 commit comments

Comments
 (0)