Skip to content

Commit b645e0f

Browse files
frano-mfrano-m
authored
fix: make user request project metadata by clicking the request link button (#530) (#531)
* fix: make user request project metadata by clicking the download button (#530) * feat: update ui for request metadata flow (#530) * fix: tooltip on a button that can be disabled (#530) * feat: added tooltip props for manifest download flow (#530) * feat: update return from get manifest spreadsheet file name and url (#530)
1 parent 808c72d commit b645e0f

5 files changed

Lines changed: 169 additions & 187 deletions

File tree

‎src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx‎

Lines changed: 43 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
import {
2-
ButtonBase,
3-
TableBody,
4-
TableCell,
5-
TableRow,
6-
Tooltip,
7-
} from "@mui/material";
1+
import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
82
import copy from "copy-to-clipboard";
9-
import React, { useRef } from "react";
3+
import React from "react";
104
import { Filters } from "../../../../../../../../common/entities";
115
import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
126
import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
137
import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
8+
import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
149
import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
15-
import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
1610
import {
1711
ContentCopyIconSmall,
1812
DownloadIconSmall,
@@ -26,6 +20,7 @@ import {
2620
LOADING_PANEL_STYLE,
2721
} from "../../../../../../../Loading/loading";
2822
import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
23+
import { TOOLTIP_PROPS } from "../../constants";
2924
import {
3025
SectionTitle,
3126
TableContainer,
@@ -38,87 +33,64 @@ export interface FileManifestDownloadProps {
3833
export const FileManifestDownload = ({
3934
filters,
4035
}: FileManifestDownloadProps): JSX.Element => {
41-
const downloadRef = useRef<HTMLAnchorElement>(null);
4236
const { disabled, message } = useDownloadStatus();
43-
const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(
44-
filters,
45-
disabled
46-
);
47-
const isInProgress = (isIdle || isLoading) && !disabled;
48-
const isReady = Boolean(manifestURL) || disabled;
37+
const { fileName, isIdle, isLoading, manifestURL, requestManifest } =
38+
useFileManifestDownload(filters);
4939

5040
// Prompt user for login before download and copy, if required.
5141
const { requireLogin } = useLoginGuard();
5242

53-
// Copies file manifest.
54-
const copyManifestURL = (url?: string): void => {
55-
if (!url) return;
56-
copy(url);
57-
};
58-
59-
// Downloads file manifest.
60-
const downloadManifestURL = (): void => {
61-
downloadRef.current?.click();
62-
};
63-
6443
return (
6544
<FluidPaper>
6645
<GridPaper>
6746
<SectionTitle>File Manifest</SectionTitle>
6847
<TableContainer>
6948
<Loading
70-
loading={isInProgress}
49+
loading={isLoading}
7150
panelStyle={LOADING_PANEL_STYLE.INHERIT}
7251
/>
73-
<GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
52+
<GridTable gridTemplateColumns="auto 1fr">
7453
<TableBody>
7554
<TableRow>
76-
{isInProgress ? (
77-
<TableCell />
78-
) : isReady ? (
55+
{isIdle || isLoading ? (
56+
<TableCell>
57+
<Tooltip {...TOOLTIP_PROPS} title={message}>
58+
<span>
59+
<Button
60+
{...BUTTON_PROPS.PRIMARY_CONTAINED}
61+
disabled={disabled || isLoading}
62+
onClick={() => requireLogin(requestManifest)}
63+
>
64+
Request link
65+
</Button>
66+
</span>
67+
</Tooltip>
68+
</TableCell>
69+
) : (
7970
<>
71+
{manifestURL && (
72+
<TableCell>
73+
<ButtonGroup
74+
Buttons={[
75+
<Button key="download" download href={manifestURL}>
76+
<DownloadIconSmall />
77+
</Button>,
78+
<Button
79+
key="copy"
80+
onClick={() => copy(manifestURL)}
81+
>
82+
<ContentCopyIconSmall />
83+
</Button>,
84+
]}
85+
/>
86+
</TableCell>
87+
)}
8088
<TableCell>
81-
<ButtonBase
82-
disabled={disabled}
83-
href={manifestURL ?? ""}
84-
ref={downloadRef}
85-
sx={{ display: "none" }}
86-
/>
87-
<Tooltip arrow title={message}>
88-
<span>
89-
<ButtonGroup
90-
Buttons={[
91-
<ButtonGroupButton
92-
key="download"
93-
action="Download file manifest"
94-
disabled={disabled}
95-
label={<DownloadIconSmall />}
96-
onClick={() =>
97-
requireLogin(downloadManifestURL)
98-
}
99-
/>,
100-
<ButtonGroupButton
101-
key="copy"
102-
action="Copy file manifest"
103-
disabled={disabled}
104-
label={<ContentCopyIconSmall />}
105-
onClick={() =>
106-
requireLogin((): void =>
107-
copyManifestURL(manifestURL)
108-
)
109-
}
110-
/>,
111-
]}
112-
/>
113-
</span>
114-
</Tooltip>
89+
{manifestURL
90+
? fileName
91+
: "The manifest is not available for this project."}
11592
</TableCell>
116-
<TableCell>{fileName}</TableCell>
11793
</>
118-
) : (
119-
<TableCell>
120-
The manifest is not available for this project.
121-
</TableCell>
12294
)}
12395
</TableRow>
12496
</TableBody>

‎src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestSpreadsheet/fileManifestSpreadsheet.tsx‎

Lines changed: 52 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
import {
2-
ButtonBase,
3-
TableBody,
4-
TableCell,
5-
TableRow,
6-
Tooltip,
7-
} from "@mui/material";
1+
import { Button, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
82
import copy from "copy-to-clipboard";
9-
import React, { useEffect, useRef } from "react";
3+
import React from "react";
104
import { Filters } from "../../../../../../../../common/entities";
115
import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
126
import { useFileManifestSpreadsheet } from "../../../../../../../../hooks/useFileManifest/useFileManifestSpreadsheet";
13-
import { useRequestFileLocation } from "../../../../../../../../hooks/useRequestFileLocation";
7+
import { BUTTON_PROPS } from "../../../../../../../common/Button/constants";
148
import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
15-
import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
169
import {
1710
ContentCopyIconSmall,
1811
DownloadIconSmall,
@@ -26,6 +19,7 @@ import {
2619
LOADING_PANEL_STYLE,
2720
} from "../../../../../../../Loading/loading";
2821
import { GridTable } from "../../../../../../../Table/common/gridTable.styles";
22+
import { TOOLTIP_PROPS } from "../../constants";
2923
import {
3024
SectionTitle,
3125
TableContainer,
@@ -38,86 +32,70 @@ export interface FileManifestSpreadsheetProps {
3832
export const FileManifestSpreadsheet = ({
3933
filters,
4034
}: FileManifestSpreadsheetProps): JSX.Element => {
41-
const downloadRef = useRef<HTMLAnchorElement>(null);
4235
const { disabled, message } = useDownloadStatus();
43-
const { exists, fileName, fileUrl } =
44-
useFileManifestSpreadsheet(filters, disabled) || {};
45-
const { data, isLoading, run } = useRequestFileLocation(fileUrl);
46-
const spreadsheetURL = data?.location;
47-
const isInProgress = (exists === undefined || isLoading) && !disabled;
48-
const isReady = Boolean(spreadsheetURL) || disabled;
49-
50-
// Copies metadata spreadsheet.
51-
const copyMetadataURL = (url?: string): void => {
52-
if (!url) return;
53-
copy(url);
54-
};
55-
56-
// Downloads metadata spreadsheet.
57-
const downloadMetadataURL = (): void => {
58-
downloadRef.current?.click();
59-
};
60-
61-
// Requests metadata spreadsheet.
62-
useEffect(() => {
63-
run();
64-
}, [fileUrl, run]);
36+
const {
37+
fileName,
38+
isIdle = false,
39+
isLoading = false,
40+
requestManifest,
41+
spreadsheetUrl,
42+
} = useFileManifestSpreadsheet(filters) || {};
6543

6644
return (
6745
<FluidPaper>
6846
<GridPaper>
6947
<SectionTitle>Metadata</SectionTitle>
7048
<TableContainer>
7149
<Loading
72-
loading={isInProgress}
50+
loading={isLoading}
7351
panelStyle={LOADING_PANEL_STYLE.INHERIT}
7452
/>
75-
<GridTable gridTemplateColumns={isReady ? "auto 1fr" : "1fr"}>
53+
<GridTable gridTemplateColumns="auto 1fr">
7654
<TableBody>
7755
<TableRow>
78-
{isInProgress ? (
79-
<TableCell />
80-
) : isReady ? (
56+
{isIdle || isLoading ? (
57+
<TableCell>
58+
<Tooltip {...TOOLTIP_PROPS} title={message}>
59+
<span>
60+
<Button
61+
{...BUTTON_PROPS.PRIMARY_CONTAINED}
62+
disabled={disabled || isLoading}
63+
onClick={() => requestManifest?.()}
64+
>
65+
Request link
66+
</Button>
67+
</span>
68+
</Tooltip>
69+
</TableCell>
70+
) : (
8171
<>
72+
{spreadsheetUrl && (
73+
<TableCell>
74+
<ButtonGroup
75+
Buttons={[
76+
<Button
77+
key="download"
78+
download
79+
href={spreadsheetUrl}
80+
>
81+
<DownloadIconSmall />
82+
</Button>,
83+
<Button
84+
key="copy"
85+
onClick={() => copy(spreadsheetUrl)}
86+
>
87+
<ContentCopyIconSmall />
88+
</Button>,
89+
]}
90+
/>
91+
</TableCell>
92+
)}
8293
<TableCell>
83-
<ButtonBase
84-
disabled={disabled}
85-
download
86-
href={spreadsheetURL ?? ""}
87-
ref={downloadRef}
88-
sx={{ display: "none" }}
89-
/>
90-
<Tooltip arrow title={message}>
91-
<span>
92-
<ButtonGroup
93-
Buttons={[
94-
<ButtonGroupButton
95-
key="download"
96-
action="Download metadata spreadsheet"
97-
disabled={disabled}
98-
label={<DownloadIconSmall />}
99-
onClick={downloadMetadataURL}
100-
/>,
101-
<ButtonGroupButton
102-
key="copy"
103-
action="Copy metadata spreadsheet"
104-
disabled={disabled}
105-
label={<ContentCopyIconSmall />}
106-
onClick={(): void =>
107-
copyMetadataURL(spreadsheetURL)
108-
}
109-
/>,
110-
]}
111-
/>
112-
</span>
113-
</Tooltip>
94+
{spreadsheetUrl
95+
? fileName
96+
: "The metadata is not available for this project."}
11497
</TableCell>
115-
<TableCell>{fileName}</TableCell>
11698
</>
117-
) : (
118-
<TableCell>
119-
The metadata is not available for this project.
120-
</TableCell>
12199
)}
122100
</TableRow>
123101
</TableBody>

‎src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/constants.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { TooltipProps } from "@mui/material";
2+
3+
export const TOOLTIP_PROPS: Partial<TooltipProps> = {
4+
arrow: true,
5+
slotProps: {
6+
popper: {
7+
modifiers: [
8+
{
9+
name: "offset",
10+
options: {
11+
offset: [0, -4],
12+
},
13+
},
14+
{
15+
name: "preventOverflow",
16+
options: { padding: 8 },
17+
},
18+
],
19+
},
20+
tooltip: {
21+
sx: { maxWidth: "none" },
22+
},
23+
},
24+
};

0 commit comments

Comments
 (0)