1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Use <Dropdown/> in Download All Logs dropdown

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-15 14:43:08 +03:00
parent c4c2eaf6d3
commit 13c2e015d8

View File

@ -7,7 +7,8 @@ import styles from "./download-logs-dropdown.module.scss";
import React, { useState } from "react"; import React, { useState } from "react";
import { Icon } from "../../icon"; import { Icon } from "../../icon";
import { Menu, MenuItem } from "../../menu"; import { MenuItem } from "../../menu";
import { Dropdown } from "../../dropdown/dropdown";
interface DownloadLogsDropdownProps { interface DownloadLogsDropdownProps {
downloadVisibleLogs: () => void; downloadVisibleLogs: () => void;
@ -16,53 +17,37 @@ interface DownloadLogsDropdownProps {
export function DownloadLogsDropdown({ downloadAllLogs, downloadVisibleLogs }: DownloadLogsDropdownProps) { export function DownloadLogsDropdown({ downloadAllLogs, downloadVisibleLogs }: DownloadLogsDropdownProps) {
const [waiting, setWaiting] = useState(false); const [waiting, setWaiting] = useState(false);
const [opened, setOpened] = useState(false);
const toggle = () => { const downloadAll = async () => {
setOpened(!opened);
};
const downloadLogs = async (download: () => Promise<void>) => {
setWaiting(true); setWaiting(true);
try { try {
await download(); await downloadAllLogs();
} finally { } finally {
setWaiting(false); setWaiting(false);
} }
}; }
return ( return (
<> <Dropdown
id="download-logs-dropdown"
contentForToggle={(
<button <button
data-testid="download-logs-dropdown" data-testid="download-logs-dropdown"
id="download-logs-dropdown"
className={styles.dropdown} className={styles.dropdown}
disabled={waiting} disabled={waiting}
> >
Download Download
<Icon material="arrow_drop_down" smallest/> <Icon material="arrow_drop_down" smallest/>
</button> </button>
<Menu )}
usePortal
htmlFor="download-logs-dropdown"
isOpen={opened}
close={toggle}
open={toggle}
>
<MenuItem
onClick={downloadVisibleLogs}
data-testid="download-visible-logs"
> >
<MenuItem onClick={downloadVisibleLogs} data-testid="download-visible-logs">
Visible logs Visible logs
</MenuItem> </MenuItem>
<MenuItem <MenuItem onClick={downloadAll} data-testid="download-all-logs">
onClick={() => downloadLogs(downloadAllLogs)}
data-testid="download-all-logs"
>
All logs All logs
</MenuItem> </MenuItem>
</Menu> </Dropdown>
</>
); );
} }