Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 7x 7x 7x 7x 7x 7x 7x 7x | import { Col, Row, Spinner } from "@canonical/react-components";
import { useMemo, useState } from "react";
import { useAccountKeys } from "../../hooks";
import AccountKeysError from "./AccountKeyError";
import AccountKeysSearch from "./AccountKeySearch";
import AccountKeysTable from "./AccountKeysTable";
function AccountKeys(): React.JSX.Element {
const { data, isLoading, isError } = useAccountKeys();
const hasKeys = !isLoading && !isError && !!data?.length;
const [searchName, setSearchName] = useState<string>("");
const hasConstraints = useMemo(() => {
return (data ?? []).some((k) => !!k.constraints?.length);
}, [data]);
const filteredData = useMemo(() => {
Eif (!searchName) return data ?? [];
return (data ?? []).filter((k) => k.name.includes(searchName));
}, [data, searchName]);
return (
<>
<Row>
<Col size={12}>
<h2 className="p-heading--4">Account keys</h2>
</Col>
</Row>
{hasKeys && (
<div className="u-fixed-width">
<Row>
<Col size={6}>
<AccountKeysSearch value={searchName} onChange={setSearchName} />
</Col>
</Row>
<Row style={{ overflow: "auto" }}>
<AccountKeysTable
keys={filteredData}
hasConstraints={hasConstraints}
/>
</Row>
</div>
)}
{isLoading && <Spinner text="Loading..." />}
{isError && <AccountKeysError />}
{!isLoading && !isError && !hasKeys && (
<div className="u-fixed-width">
There are no keys associated to your account
</div>
)}
</>
);
}
export default AccountKeys;
|