91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import Button from "@calcom/ui/Button";
|
|
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
|
|
import { Icon } from "@calcom/ui/Icon";
|
|
import { List } from "@calcom/ui/List";
|
|
import { ShellSubHeading } from "@calcom/ui/Shell";
|
|
import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
|
|
|
|
import LicenseRequired from "../../common/components/LicenseRequired";
|
|
import ApiKeyDialogForm from "./ApiKeyDialogForm";
|
|
import ApiKeyListItem, { TApiKeys } from "./ApiKeyListItem";
|
|
|
|
function ApiKeyListContainer() {
|
|
const { t } = useLocale();
|
|
const query = trpc.useQuery(["viewer.apiKeys.list"]);
|
|
const data = query.data;
|
|
|
|
const [newApiKeyModal, setNewApiKeyModal] = useState(false);
|
|
const [editModalOpen, setEditModalOpen] = useState(false);
|
|
const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | null>(null);
|
|
return (
|
|
<div className="border-b border-gray-200 py-8 pl-2 pr-1">
|
|
<ShellSubHeading
|
|
className="mt-2"
|
|
title={t("api_keys")}
|
|
subtitle={t("api_keys_subtitle")}
|
|
actions={
|
|
<Button
|
|
color="minimal"
|
|
size="icon"
|
|
StartIcon={Icon.FiPlus}
|
|
onClick={() => setNewApiKeyModal(true)}
|
|
/>
|
|
}
|
|
/>
|
|
<LicenseRequired>
|
|
{(() => {
|
|
if (query.isLoading) return <SkeletonLoader />;
|
|
if (!data) return null;
|
|
return (
|
|
<>
|
|
{data.length > 0 && (
|
|
<List className="mt-6">
|
|
{data.map((item) => (
|
|
<ApiKeyListItem
|
|
key={item.id}
|
|
apiKey={item}
|
|
onEditApiKey={() => {
|
|
setApiKeyToEdit(item);
|
|
setEditModalOpen(true);
|
|
}}
|
|
/>
|
|
))}
|
|
</List>
|
|
)}
|
|
|
|
{/* New api key dialog */}
|
|
<Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
|
|
<DialogContent>
|
|
<ApiKeyDialogForm
|
|
title={t("create_api_key")}
|
|
handleClose={() => setNewApiKeyModal(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
{/* Edit api key dialog */}
|
|
<Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
|
|
<DialogContent>
|
|
{apiKeyToEdit && (
|
|
<ApiKeyDialogForm
|
|
title={t("edit_api_key")}
|
|
key={apiKeyToEdit.id}
|
|
handleClose={() => setEditModalOpen(false)}
|
|
defaultValues={apiKeyToEdit}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
})()}
|
|
</LicenseRequired>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ApiKeyListContainer;
|