feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeySection.tsx

@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Tooltip } from "@app/components/v2";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { AddAPIKeyModal } from "./AddAPIKeyModal";
+import { APIKeyTable } from "./APIKeyTable";
+
+export const APIKeySection = () => {
+  const { t } = useTranslation();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">
+          {t("settings.personal.api-keys.title")}
+        </p>
+        <Tooltip content="API Keys are deprecated and will be removed in the future.">
+          <Button
+            isDisabled
+            colorSchema="secondary"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => handlePopUpOpen("addAPIKey")}
+          >
+            Add API Key
+          </Button>
+        </Tooltip>
+      </div>
+      <APIKeyTable />
+      <AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};

frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/APIKeyTable.tsx

@@ -0,0 +1,91 @@
+import { faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useDeleteAPIKey, useGetMyAPIKeys } from "@app/hooks/api";
+
+export const APIKeyTable = () => {
+  const { data, isPending } = useGetMyAPIKeys();
+  const { mutateAsync } = useDeleteAPIKey();
+
+  const handleDeleteAPIKeyDataClick = async (apiKeyDataId: string) => {
+    try {
+      await mutateAsync(apiKeyDataId);
+      createNotification({
+        text: "Successfully deleted API key",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete API key",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th className="flex-1">Name</Th>
+            <Th className="flex-1">Last active</Th>
+            <Th className="flex-1">Created</Th>
+            <Th className="flex-1">Expiration</Th>
+            <Th className="w-5" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="api-keys" />}
+          {!isPending &&
+            data &&
+            data.length > 0 &&
+            data.map(({ id, name, createdAt, expiresAt, lastUsed }) => {
+              return (
+                <Tr className="h-10" key={`api-key-${id}`}>
+                  <Td>{name}</Td>
+                  <Td>{format(new Date(lastUsed), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(expiresAt), "yyyy-MM-dd")}</Td>
+                  <Td>
+                    <IconButton
+                      onClick={async () => {
+                        await handleDeleteAPIKeyDataClick(id);
+                      }}
+                      size="lg"
+                      colorSchema="danger"
+                      variant="plain"
+                      ariaLabel="update"
+                    >
+                      <FontAwesomeIcon icon={faXmark} />
+                    </IconButton>
+                  </Td>
+                </Tr>
+              );
+            })}
+          {!isPending && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={5}>
+                <EmptyState title="No API Keys on file" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/AddAPIKeyModal.tsx

@@ -0,0 +1,185 @@
+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 { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateAPIKey } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const expirations = [
+  { label: "1 day", value: "1d" },
+  { label: "7 days", value: "7d" },
+  { label: "1 month", value: "1mo" },
+  { label: "6 months", value: "6mo" },
+  { label: "12 months", value: "12mo" }
+];
+
+const expirationMapping: { [key: string]: number } = {
+  "1d": 86400,
+  "7d": 604800,
+  "1mo": 2592000,
+  "6mo": 15552000,
+  "12mo": 31104000
+};
+
+const schema = z
+  .object({
+    name: z.string(),
+    expiresIn: z.string()
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["addAPIKey"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addAPIKey"]>, state?: boolean) => void;
+};
+
+export const AddAPIKeyModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const [newAPIKey, setNewAPIKey] = useState("");
+  const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
+
+  const { mutateAsync, isPending } = useCreateAPIKey();
+
+  const { control, handleSubmit, reset } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isAPIKeyCopied) {
+      timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [setIsAPIKeyCopied]);
+
+  const copyTokenToClipboard = () => {
+    navigator.clipboard.writeText(newAPIKey);
+    setIsAPIKeyCopied.on();
+  };
+
+  const onFormSubmit = async ({ name, expiresIn }: FormData) => {
+    try {
+      const { apiKey } = await mutateAsync({
+        name,
+        expiresIn: expirationMapping[expiresIn]
+      });
+
+      setNewAPIKey(apiKey);
+
+      createNotification({
+        text: "Successfully created API key",
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create API key",
+        type: "error"
+      });
+    }
+  };
+
+  const hasAPIKey = Boolean(newAPIKey);
+
+  return (
+    <Modal
+      isOpen={popUp?.addAPIKey?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addAPIKey", isOpen);
+        reset();
+        setNewAPIKey("");
+      }}
+    >
+      <ModalContent title="Create API Key">
+        {!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>
+              )}
+            />
+            <Controller
+              control={control}
+              name="expiresIn"
+              defaultValue="6mo"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {expirations.map(({ label, value }) => (
+                      <SelectItem value={String(value || "")} key={`api-key-expiration-${label}`}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isPending}
+                isDisabled={isPending}
+              >
+                Add
+              </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("addAPIKey", false)}
+              >
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="mb-3 mr-2 mt-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>
+  );
+};

frontend/src/pages/user/PersonalSettingsPage/components/APIKeySection/index.tsx

@@ -0,0 +1 @@
+export { APIKeySection } from "./APIKeySection";