0a54227d97
* Iteration, before functional component * Use react-hook-form, shared form for new and edit * Avoid negative margin on input prefix * Centered now default for modals
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMenuState } from "reakit/Menu";
|
|
import ApiKey from "~/models/ApiKey";
|
|
import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog";
|
|
import ContextMenu from "~/components/ContextMenu";
|
|
import MenuItem from "~/components/ContextMenu/MenuItem";
|
|
import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
|
|
import useStores from "~/hooks/useStores";
|
|
|
|
type Props = {
|
|
/** The apiKey to associate with the menu */
|
|
apiKey: ApiKey;
|
|
};
|
|
|
|
function ApiKeyMenu({ apiKey }: Props) {
|
|
const menu = useMenuState({
|
|
modal: true,
|
|
});
|
|
const { dialogs } = useStores();
|
|
const { t } = useTranslation();
|
|
|
|
const handleRevoke = React.useCallback(() => {
|
|
dialogs.openModal({
|
|
title: t("Revoke token"),
|
|
content: (
|
|
<ApiKeyRevokeDialog onSubmit={dialogs.closeAllModals} apiKey={apiKey} />
|
|
),
|
|
});
|
|
}, [t, dialogs, apiKey]);
|
|
|
|
return (
|
|
<>
|
|
<OverflowMenuButton aria-label={t("Show menu")} {...menu} />
|
|
<ContextMenu {...menu}>
|
|
<MenuItem {...menu} onClick={handleRevoke} dangerous>
|
|
{t("Revoke")}
|
|
</MenuItem>
|
|
</ContextMenu>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default observer(ApiKeyMenu);
|