mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-09-22 13:39:35 +00:00
Chore: Remove unused frontend V2 API key code
This commit is contained in:
Daniel Hougaard
@@ -1,199 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Controller, useForm } from "react-hook-form";
|
|
||||||
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { yupResolver } from "@hookform/resolvers/yup";
|
|
||||||
import * as yup from "yup";
|
|
||||||
|
|
||||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
FormControl,
|
|
||||||
IconButton,
|
|
||||||
Input,
|
|
||||||
Modal,
|
|
||||||
ModalContent} from "@app/components/v2";
|
|
||||||
import { useToggle } from "@app/hooks";
|
|
||||||
import {
|
|
||||||
useCreateAPIKeyV2,
|
|
||||||
useUpdateAPIKeyV2
|
|
||||||
} from "@app/hooks/api";
|
|
||||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
const schema = yup.object({
|
|
||||||
name: yup.string().required("API Key V2 name is required")
|
|
||||||
}).required();
|
|
||||||
|
|
||||||
export type FormData = yup.InferType<typeof schema>;
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
popUp: UsePopUpState<["apiKeyV2"]>;
|
|
||||||
handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const APIKeyV2Modal = ({
|
|
||||||
popUp,
|
|
||||||
handlePopUpToggle
|
|
||||||
}: Props) => {
|
|
||||||
const [newAPIKey, setNewAPIKey] = useState("");
|
|
||||||
const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
|
|
||||||
|
|
||||||
const { createNotification } = useNotificationContext();
|
|
||||||
|
|
||||||
const { mutateAsync: createMutateAsync } = useCreateAPIKeyV2();
|
|
||||||
const { mutateAsync: updateMutateAsync } = useUpdateAPIKeyV2();
|
|
||||||
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { isSubmitting }
|
|
||||||
} = useForm<FormData>({
|
|
||||||
resolver: yupResolver(schema),
|
|
||||||
defaultValues: {
|
|
||||||
name: ""
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let timer: NodeJS.Timeout;
|
|
||||||
|
|
||||||
if (isAPIKeyCopied) {
|
|
||||||
timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [setIsAPIKeyCopied]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const apiKeyData = popUp?.apiKeyV2?.data as {
|
|
||||||
apiKeyDataId: string;
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (apiKeyData) {
|
|
||||||
reset({
|
|
||||||
name: apiKeyData.name
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
reset({
|
|
||||||
name: ""
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [popUp?.apiKeyV2?.data]);
|
|
||||||
|
|
||||||
const copyTokenToClipboard = () => {
|
|
||||||
navigator.clipboard.writeText(newAPIKey);
|
|
||||||
setIsAPIKeyCopied.on();
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFormSubmit = async ({
|
|
||||||
name
|
|
||||||
}: FormData) => {
|
|
||||||
try {
|
|
||||||
const apiKeyData = popUp?.apiKeyV2?.data as {
|
|
||||||
apiKeyDataId: string;
|
|
||||||
name: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
if (apiKeyData) {
|
|
||||||
// update
|
|
||||||
|
|
||||||
await updateMutateAsync({
|
|
||||||
apiKeyDataId: apiKeyData.apiKeyDataId,
|
|
||||||
name
|
|
||||||
});
|
|
||||||
|
|
||||||
handlePopUpToggle("apiKeyV2", false);
|
|
||||||
} else {
|
|
||||||
// create
|
|
||||||
|
|
||||||
const { apiKey } = await createMutateAsync({
|
|
||||||
name
|
|
||||||
});
|
|
||||||
|
|
||||||
setNewAPIKey(apiKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
createNotification({
|
|
||||||
text: `Successfully ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
|
|
||||||
reset();
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
createNotification({
|
|
||||||
text: `Failed to ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
|
|
||||||
type: "error"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const hasAPIKey = Boolean(newAPIKey);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={popUp?.apiKeyV2?.isOpen}
|
|
||||||
onOpenChange={(isOpen) => {
|
|
||||||
handlePopUpToggle("apiKeyV2", isOpen);
|
|
||||||
reset();
|
|
||||||
setNewAPIKey("");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ModalContent title={`${popUp?.apiKeyV2?.data ? "Update" : "Create"} API Key V2`}>
|
|
||||||
{!hasAPIKey ? (
|
|
||||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
name="name"
|
|
||||||
render={({ field, fieldState: { error } }) => (
|
|
||||||
<FormControl
|
|
||||||
label="Name"
|
|
||||||
isError={Boolean(error)}
|
|
||||||
errorText={error?.message}
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
{...field}
|
|
||||||
placeholder="My API Key"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="mt-8 flex items-center">
|
|
||||||
<Button
|
|
||||||
className="mr-4"
|
|
||||||
size="sm"
|
|
||||||
type="submit"
|
|
||||||
isLoading={isSubmitting}
|
|
||||||
isDisabled={isSubmitting}
|
|
||||||
>
|
|
||||||
{popUp?.apiKeyV2?.data ? "Update" : "Create"}
|
|
||||||
</Button>
|
|
||||||
<Button colorSchema="secondary" variant="plain">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
<div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
|
|
||||||
<p className="mr-4 break-all">{newAPIKey}</p>
|
|
||||||
<IconButton
|
|
||||||
ariaLabel="copy icon"
|
|
||||||
colorSchema="secondary"
|
|
||||||
className="group relative"
|
|
||||||
onClick={copyTokenToClipboard}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
|
|
||||||
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
|
|
||||||
Click to copy
|
|
||||||
</span>
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</ModalContent>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
import { faPlus } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
|
|
||||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
DeleteActionModal
|
|
||||||
} from "@app/components/v2";
|
|
||||||
import { useDeleteAPIKeyV2 } from "@app/hooks/api";
|
|
||||||
import { usePopUp } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
import { APIKeyV2Modal } from "./APIKeyV2Modal";
|
|
||||||
import { APIKeyV2Table } from "./APIKeyV2Table";
|
|
||||||
|
|
||||||
export const APIKeyV2Section = () => {
|
|
||||||
const { createNotification } = useNotificationContext();
|
|
||||||
const { mutateAsync: deleteMutateAsync } = useDeleteAPIKeyV2();
|
|
||||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
|
||||||
"apiKeyV2",
|
|
||||||
"deleteAPIKeyV2"
|
|
||||||
] as const);
|
|
||||||
|
|
||||||
const onDeleteAPIKeyDataSubmit = async (apiKeyDataId: string) => {
|
|
||||||
try {
|
|
||||||
await deleteMutateAsync({
|
|
||||||
apiKeyDataId
|
|
||||||
});
|
|
||||||
|
|
||||||
createNotification({
|
|
||||||
text: "Successfully deleted API Key V2",
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
|
|
||||||
handlePopUpClose("deleteAPIKeyV2");
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
createNotification({
|
|
||||||
text: "Failed to delete API Key V2",
|
|
||||||
type: "error"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
|
|
||||||
<div className="flex justify-between mb-8">
|
|
||||||
<p className="text-xl font-semibold text-mineshaft-100">
|
|
||||||
API Keys V2 (Beta)
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
colorSchema="secondary"
|
|
||||||
type="submit"
|
|
||||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
|
||||||
onClick={() => handlePopUpOpen("apiKeyV2")}
|
|
||||||
>
|
|
||||||
Add API Key
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<APIKeyV2Table
|
|
||||||
handlePopUpOpen={handlePopUpOpen}
|
|
||||||
/>
|
|
||||||
<APIKeyV2Modal
|
|
||||||
popUp={popUp}
|
|
||||||
handlePopUpToggle={handlePopUpToggle}
|
|
||||||
/>
|
|
||||||
<DeleteActionModal
|
|
||||||
isOpen={popUp.deleteAPIKeyV2.isOpen}
|
|
||||||
title={`Are you sure want to delete ${
|
|
||||||
(popUp?.deleteAPIKeyV2?.data as { name: string })?.name || ""
|
|
||||||
}?`}
|
|
||||||
onChange={(isOpen) => handlePopUpToggle("deleteAPIKeyV2", isOpen)}
|
|
||||||
deleteKey="confirm"
|
|
||||||
onDeleteApproved={() =>
|
|
||||||
onDeleteAPIKeyDataSubmit(
|
|
||||||
(popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import { faKey, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
|
|
||||||
import {
|
|
||||||
EmptyState,
|
|
||||||
IconButton,
|
|
||||||
Table,
|
|
||||||
TableContainer,
|
|
||||||
TableSkeleton,
|
|
||||||
TBody,
|
|
||||||
Td,
|
|
||||||
Th,
|
|
||||||
THead,
|
|
||||||
Tr
|
|
||||||
} from "@app/components/v2";
|
|
||||||
import { useGetMyAPIKeysV2 } from "@app/hooks/api";
|
|
||||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
handlePopUpOpen: (
|
|
||||||
popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
|
|
||||||
data?: {
|
|
||||||
apiKeyDataId?: string;
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const APIKeyV2Table = ({ handlePopUpOpen }: Props) => {
|
|
||||||
const { data, isLoading } = useGetMyAPIKeysV2();
|
|
||||||
return (
|
|
||||||
<TableContainer>
|
|
||||||
<Table>
|
|
||||||
<THead>
|
|
||||||
<Tr>
|
|
||||||
<Th className="">Name</Th>
|
|
||||||
<Th className="">Last Used</Th>
|
|
||||||
<Th className="">Created At</Th>
|
|
||||||
<Th className="w-5" />
|
|
||||||
</Tr>
|
|
||||||
</THead>
|
|
||||||
<TBody>
|
|
||||||
{isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
|
|
||||||
{!isLoading &&
|
|
||||||
data &&
|
|
||||||
data.length > 0 &&
|
|
||||||
data.map(({ id, name, lastUsed, createdAt }) => {
|
|
||||||
return (
|
|
||||||
<Tr className="h-10" key={`api-key-v2-${id}`}>
|
|
||||||
<Td>{name}</Td>
|
|
||||||
<Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
|
|
||||||
<Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
|
|
||||||
<Td className="flex justify-end">
|
|
||||||
<IconButton
|
|
||||||
onClick={async () => {
|
|
||||||
handlePopUpOpen("apiKeyV2", {
|
|
||||||
apiKeyDataId: id,
|
|
||||||
name
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
size="lg"
|
|
||||||
colorSchema="primary"
|
|
||||||
variant="plain"
|
|
||||||
ariaLabel="update"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faPencil} />
|
|
||||||
</IconButton>
|
|
||||||
<IconButton
|
|
||||||
onClick={() => {
|
|
||||||
handlePopUpOpen("deleteAPIKeyV2", {
|
|
||||||
apiKeyDataId: id
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
size="lg"
|
|
||||||
colorSchema="danger"
|
|
||||||
variant="plain"
|
|
||||||
ariaLabel="update"
|
|
||||||
className="ml-4"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faXmark} />
|
|
||||||
</IconButton>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{!isLoading && data && data?.length === 0 && (
|
|
||||||
<Tr>
|
|
||||||
<Td colSpan={4}>
|
|
||||||
<EmptyState title="No API key v2 on file" icon={faKey} />
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
)}
|
|
||||||
</TBody>
|
|
||||||
</Table>
|
|
||||||
</TableContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { APIKeyV2Section } from "./APIKeyV2Section";
|
|
||||||
Reference in New Issue
Block a user