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 = () => {
setOpened(!opened);
};
const downloadLogs = async (download: () => Promise<void>) => { const downloadAll = async () => {
setWaiting(true); setWaiting(true);
try { try {
await download(); await downloadAllLogs();
} finally { } finally {
setWaiting(false); setWaiting(false);
} }
}; }
return ( return (
<> <Dropdown
<button id="download-logs-dropdown"
data-testid="download-logs-dropdown" contentForToggle={(
id="download-logs-dropdown" <button
className={styles.dropdown} data-testid="download-logs-dropdown"
disabled={waiting} className={styles.dropdown}
> disabled={waiting}
Download
<Icon material="arrow_drop_down" smallest/>
</button>
<Menu
usePortal
htmlFor="download-logs-dropdown"
isOpen={opened}
close={toggle}
open={toggle}
>
<MenuItem
onClick={downloadVisibleLogs}
data-testid="download-visible-logs"
> >
Visible logs Download
</MenuItem> <Icon material="arrow_drop_down" smallest/>
<MenuItem </button>
onClick={() => downloadLogs(downloadAllLogs)} )}
data-testid="download-all-logs" >
> <MenuItem onClick={downloadVisibleLogs} data-testid="download-visible-logs">
All logs Visible logs
</MenuItem> </MenuItem>
</Menu> <MenuItem onClick={downloadAll} data-testid="download-all-logs">
</> All logs
</MenuItem>
</Dropdown>
); );
} }