Convert all SecurityClient API calls to hooks except auth

2026-10-15 22:46:24 +00:00 · 2023-08-10 17:19:23 +07:00
parent 78802409bd
commit 2dba7847b6
45 changed files with 179 additions and 1377 deletions
@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import axios from "axios"

+import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { fetchUserDetails } from "@app/hooks/api/users/queries";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
 import { getAuthToken, isLoggedIn } from "@app/reactQuery";

 import { 
@@ -24,7 +24,7 @@ export const Login = () => {
    // TODO(akhilmhdh): workspace will be controlled by a workspace context
    const redirectToDashboard = async () => {
      try {
-        const userOrgs = await getOrganizations();
+        const userOrgs = await fetchOrganizations();
        // userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
        const userOrg = userOrgs[0] && userOrgs[0]._id;

@@ -12,8 +12,8 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import { Button, Input } from "@app/components/v2";
+import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import getOrganizations from "@app/pages/api/organization/getOrgs";

 type Props = {
    setStep: (step: number) => void;
@@ -90,7 +90,7 @@ export const InitialStep = ({
                        setIsLoading(false);
                        return;
                    }
-                    const userOrgs = await getOrganizations();
+                    const userOrgs = await fetchOrganizations();
                    const userOrg = userOrgs[0] && userOrgs[0]._id;

                    // case: login does not require MFA step
@@ -10,7 +10,7 @@ import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa"
 import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
 import { Button } from "@app/components/v2";    
 import { useSendMfaToken } from "@app/hooks/api/auth";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
+import { fetchOrganizations } from "@app/hooks/api/organization/queries";

 // The style for the verification code input
 const props = {
@@ -110,7 +110,7 @@ export const MFAStep = ({
  
        if (isLoginSuccessful) {
          setIsLoading(false);
-          const userOrgs = await getOrganizations();
+          const userOrgs = await fetchOrganizations();
          const userOrg = userOrgs[0] && userOrgs[0]._id;

          // case: login does not require MFA step
@@ -8,7 +8,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import { Button, Input } from "@app/components/v2";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
+import { fetchOrganizations } from "@app/hooks/api/organization/queries";

 type Props = { 
    providerAuthToken: string;
@@ -83,14 +83,14 @@ export const PasswordStep = ({
                    }

                    // case: login does not require MFA step
-                    const userOrgs = await getOrganizations();
+                    const userOrgs = await fetchOrganizations();
                    const userOrg = userOrgs[0]._id;
                    setIsLoading(false);
                    createNotification({
                        text: "Successfully logged in",
                        type: "success"
                    });
-                    router.push(`/org/${userOrg?._id}/overview`);
+                    router.push(`/org/${userOrg}/overview`);
                }
            }
        } catch (err) {
@@ -1,46 +0,0 @@
-import { useRouter } from "next/router";
-
-import NavHeader from "@app/components/navigation/NavHeader";
-
-import { SAProjectLevelPermissionsTable } from "./components/SAProjectLevelPermissionsTable";
-import {
-    CopyServiceAccountPublicKeySection,
-    ServiceAccountNameChangeSection
-} from "./components";
-
-export const CreateServiceAccountPage = () => {
-    const router = useRouter();
-    const {serviceAccountId} = router.query;
-
-    return (
-        <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-            <NavHeader 
-                pageName="Service Account" 
-                isOrganizationRelated
-            />
-            <div className="my-8 ml-6 max-w-5xl">
-                <p className="text-3xl font-semibold text-gray-200">Service Account</p>
-                <p className="text-base font-normal text-gray-400">
-                    A service account represents a machine identity such as a VM or application client.
-                </p>
-            </div>
-            {typeof serviceAccountId === "string" && (
-                <div className="max-w-8xl mx-6">
-                    <ServiceAccountNameChangeSection 
-                        serviceAccountId={serviceAccountId}
-                    />
-                    <div className="mt-8">
-                        <CopyServiceAccountPublicKeySection 
-                            serviceAccountId={serviceAccountId}
-                        />
-                    </div>
-                    <div className="mt-8">
-                        <SAProjectLevelPermissionsTable 
-                            serviceAccountId={serviceAccountId}
-                        />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
@@ -1,49 +0,0 @@
-import { useEffect } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton } from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-
-type Props = {
-    serviceAccountId: string;
-}
-
-export const CopyServiceAccountIDSection = ({ serviceAccountId }: Props): JSX.Element => {
-    const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false);
-
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-
-        if (isServiceAccountIdCopied) {
-            timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000);
-        }
-
-        return () => clearTimeout(timer);
-    }, [isServiceAccountIdCopied]);
-
-    const copyServiceAccountIdToClipboard = () => {
-        navigator.clipboard.writeText(serviceAccountId);
-        setIsServiceAccountIdCopied.on();
-    };
-        
-    return (
-       <div className="flex w-full flex-col items-start rounded-md bg-white/5 px-6 p-6">
-            <p className="text-xl font-semibold">Service Account ID</p>
-            <div className="mt-4 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400 p-2">
-                <p className="mr-4 break-all">{serviceAccountId}</p>
-                <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={() => copyServiceAccountIdToClipboard()}
-                >
-                <FontAwesomeIcon icon={isServiceAccountIdCopied ? 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">
-                        Copy
-                    </span>
-                </IconButton>
-            </div>
-        </div>
-    );
-}
@@ -1 +0,0 @@
-export { CopyServiceAccountIDSection } from "./CopyServiceAccountIDSection";
@@ -1,53 +0,0 @@
-import { useEffect } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { IconButton } from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-import { useGetServiceAccountById } from "@app/hooks/api";
-
-type Props = {
-    serviceAccountId: string;
-}
-
-export const CopyServiceAccountPublicKeySection = ({ serviceAccountId }: Props): JSX.Element => {
-    const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId);
-    const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false);
-
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-
-        if (isServiceAccountIdCopied) {
-            timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000);
-        }
-
-        return () => clearTimeout(timer);
-    }, [isServiceAccountIdCopied]);
-
-    const copyServiceAccountIdToClipboard = () => {
-        if (!serviceAccount) return;
-
-        navigator.clipboard.writeText(serviceAccount.publicKey);
-        setIsServiceAccountIdCopied.on();
-    };
-
-    return serviceAccount ? (
-       <div className="flex w-full flex-col items-start rounded-md bg-white/5 px-6 p-6">
-            <p className="text-xl font-semibold">Public Key</p>
-            <div className="mt-4 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400 p-2">
-                <p className="mr-4 break-all">{serviceAccount.publicKey}</p>
-                <IconButton
-                    ariaLabel="copy icon"
-                    colorSchema="secondary"
-                    className="group relative"
-                    onClick={() => copyServiceAccountIdToClipboard()}
-                >
-                <FontAwesomeIcon icon={isServiceAccountIdCopied ? 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">
-                        Copy
-                    </span>
-                </IconButton>
-            </div>
-        </div>
-    ) : <div />
-}
@@ -1 +0,0 @@
-export { CopyServiceAccountPublicKeySection } from "./CopyServiceAccountPublicKeySection";
@@ -1,412 +0,0 @@
-import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faKey, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import {
-  decryptAssymmetric,
-  encryptAssymmetric,
-  verifyPrivateKey
-} from "@app/components/utilities/cryptography/crypto";
-import {
-  Button,
-  Checkbox,
-  DeleteActionModal,
-  EmptyState,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent,
-  Select,
-  SelectItem,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { usePopUp } from "@app/hooks";
-import {
-  useCreateServiceAccountProjectLevelPermission,
-  useDeleteServiceAccountProjectLevelPermission,
-  useGetServiceAccountById,
-  useGetServiceAccountProjectLevelPermissions,
-  useGetUserWorkspaces
-} from "@app/hooks/api";
-import getLatestFileKey from "@app/pages/api/workspace/getLatestFileKey";
-
-const createProjectLevelPermissionSchema = yup.object({
-  privateKey: yup.string().required().label("Private Key"),
-  workspace: yup.string().required().label("Workspace"),
-  environment: yup.string().required().label("Environment"),
-  permissions: yup
-    .object()
-    .shape({
-      read: yup.boolean().required(),
-      write: yup.boolean().required()
-    })
-    .defined()
-    .required()
-});
-
-type CreateProjectLevelPermissionForm = yup.InferType<typeof createProjectLevelPermissionSchema>;
-
-type Props = {
-  serviceAccountId: string;
-};
-
-export const SAProjectLevelPermissionsTable = ({ serviceAccountId }: Props): JSX.Element => {
-  const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId);
-  const { data: userWorkspaces, isLoading: isUserWorkspacesLoading } = useGetUserWorkspaces();
-  const [searchPermissions, setSearchPermissions] = useState("");
-
-  const { data: serviceAccountWorkspacePermissions, isLoading: isPermissionsLoading } =
-    useGetServiceAccountProjectLevelPermissions(serviceAccountId);
-
-  const createServiceAccountProjectLevelPermission =
-    useCreateServiceAccountProjectLevelPermission();
-  const deleteServiceAccountProjectLevelPermission =
-    useDeleteServiceAccountProjectLevelPermission();
-
-  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-    "addProjectLevelPermission",
-    "removeProjectLevelPermission"
-  ] as const);
-
-  const [, setSelectedWorkspace] = useState<undefined | string>(undefined);
-
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { isSubmitting }
-  } = useForm<CreateProjectLevelPermissionForm>({
-    resolver: yupResolver(createProjectLevelPermissionSchema)
-  });
-
-  const onAddProjectLevelPermission = async ({
-    privateKey,
-    workspace,
-    environment,
-    permissions: { read, write }
-  }: CreateProjectLevelPermissionForm) => {
-    // TODO: clean up / modularize this function
-
-    if (!serviceAccount) return;
-
-    const { latestKey } = await getLatestFileKey({
-      workspaceId: workspace
-    });
-
-    verifyPrivateKey({
-      privateKey,
-      publicKey: serviceAccount.publicKey
-    });
-
-    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
-
-    const key = decryptAssymmetric({
-      ciphertext: latestKey.encryptedKey,
-      nonce: latestKey.nonce,
-      publicKey: latestKey.sender.publicKey,
-      privateKey: PRIVATE_KEY
-    });
-
-    const { ciphertext, nonce } = encryptAssymmetric({
-      plaintext: key,
-      publicKey: serviceAccount.publicKey,
-      privateKey
-    });
-
-    await createServiceAccountProjectLevelPermission.mutateAsync({
-      serviceAccountId,
-      workspaceId: workspace,
-      environment,
-      read,
-      write,
-      encryptedKey: ciphertext,
-      nonce
-    });
-    handlePopUpClose("addProjectLevelPermission");
-  };
-
-  const onRemoveProjectLevelPermission = async () => {
-    const serviceAccountWorkspacePermissionId = (
-      popUp?.removeProjectLevelPermission?.data as { _id: string }
-    )?._id;
-    await deleteServiceAccountProjectLevelPermission.mutateAsync({
-      serviceAccountId,
-      serviceAccountWorkspacePermissionId
-    });
-    handlePopUpClose("removeProjectLevelPermission");
-  };
-
-  return (
-    <div className="w-full bg-white/5 p-6">
-      <p className="mb-4 text-xl font-semibold">Project-Level Permissions</p>
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchPermissions}
-            onChange={(e) => setSearchPermissions(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search service account project-level permissions..."
-          />
-        </div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          onClick={() => {
-            handlePopUpOpen("addProjectLevelPermission");
-            reset();
-          }}
-        >
-          Add Permission
-        </Button>
-      </div>
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Project</Th>
-              <Th>Environment</Th>
-              <Th>Read</Th>
-              <Th>Write</Th>
-              <Th aria-label="actions" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isPermissionsLoading && (
-              <TableSkeleton columns={6} innerKey="service-account-project-level-permissions" />
-            )}
-            {!isPermissionsLoading &&
-              serviceAccountWorkspacePermissions &&
-              serviceAccountWorkspacePermissions.map(
-                ({ _id, workspace, environment, read, write }) => {
-                  const environmentName = workspace.environments.find(
-                    (env) => env.slug === environment
-                  )?.name;
-                  return (
-                    <Tr key={`service-account-project-level-permission-${_id}`} className="w-full">
-                      <Td>{workspace.name}</Td>
-                      <Td>{environmentName}</Td>
-                      <Td>
-                        <Checkbox id="isReadPermissionEnabled" isChecked={read} isDisabled>
-                          {/**/}
-                        </Checkbox>
-                      </Td>
-                      <Td>
-                        <Checkbox id="isWritePermissionEnabled" isChecked={write} isDisabled>
-                          {/**/}
-                        </Checkbox>
-                      </Td>
-                      <Td>
-                        <IconButton
-                          ariaLabel="delete"
-                          colorSchema="danger"
-                          onClick={() => handlePopUpOpen("removeProjectLevelPermission", { _id })}
-                        >
-                          <FontAwesomeIcon icon={faTrash} />
-                        </IconButton>
-                      </Td>
-                    </Tr>
-                  );
-                }
-              )}
-            {!isPermissionsLoading && serviceAccountWorkspacePermissions?.length === 0 && (
-              <Tr>
-                <Td colSpan={7} className="py-6 text-center text-bunker-400">
-                  <EmptyState title="No permissions found" icon={faKey} />
-                </Td>
-              </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-      <Modal
-        isOpen={popUp?.addProjectLevelPermission?.isOpen}
-        onOpenChange={(isOpen) => {
-          handlePopUpToggle("addProjectLevelPermission", isOpen);
-        }}
-      >
-        <ModalContent
-          title="Add a Project-Level Permission"
-          subTitle="The service account will be granted scoped access to the specified project and environment"
-        >
-          <form onSubmit={handleSubmit(onAddProjectLevelPermission)}>
-            {!isUserWorkspacesLoading && userWorkspaces && (
-              <>
-                <Controller
-                  control={control}
-                  defaultValue=""
-                  name="privateKey"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="Service Account Private Key"
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="workspace"
-                  defaultValue={String(userWorkspaces?.[0]?._id)}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl label="Project" errorText={error?.message}>
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          onChange(e);
-                          setSelectedWorkspace(e);
-                        }}
-                        className="border-mine-shaft-500 w-full border"
-                      >
-                        {userWorkspaces && userWorkspaces.length > 0 ? (
-                          userWorkspaces.map((userWorkspace) => {
-                            return (
-                              <SelectItem
-                                value={userWorkspace._id}
-                                key={`project-${userWorkspace._id}`}
-                              >
-                                {userWorkspace.name}
-                              </SelectItem>
-                            );
-                          })
-                        ) : (
-                          <SelectItem value="none" key="target-app-none">
-                            No projects found
-                          </SelectItem>
-                        )}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="environment"
-                  defaultValue={String(userWorkspaces?.[0]?.environments?.[0]?.slug)}
-                  render={({ field: { onChange, ...field } }) => {
-                    const environments =
-                      userWorkspaces?.find(
-                        /* eslint-disable-next-line no-underscore-dangle */
-                        (userWorkspace) => userWorkspace._id === control?._formValues?.workspace
-                      )?.environments ?? [];
-                    return (
-                      <FormControl label="Environment" className="mt-4">
-                        <Select
-                          defaultValue={field.value}
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="border-mine-shaft-500 w-full border"
-                        >
-                          {environments.length > 0 ? (
-                            environments.map((environment) => {
-                              return (
-                                <SelectItem
-                                  value={environment.slug}
-                                  key={`environment-${environment.slug}`}
-                                >
-                                  {environment.name}
-                                </SelectItem>
-                              );
-                            })
-                          ) : (
-                            <SelectItem value="none" key="target-app-none">
-                              No environments found
-                            </SelectItem>
-                          )}
-                        </Select>
-                      </FormControl>
-                    );
-                  }}
-                />
-              </>
-            )}
-            <Controller
-              control={control}
-              name="permissions"
-              defaultValue={{
-                read: true,
-                write: false
-              }}
-              render={({ field: { onChange, value }, fieldState: { error } }) => {
-                const options = [
-                  {
-                    label: "Read (default)",
-                    value: "read"
-                  },
-                  {
-                    label: "Write",
-                    value: "write"
-                  }
-                ];
-
-                return (
-                  <FormControl
-                    label="Permissions"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <>
-                      {options.map(({ label, value: optionValue }) => {
-                        return (
-                          <Checkbox
-                            id={value[optionValue]}
-                            key={optionValue}
-                            className="data-[state=checked]:bg-primary"
-                            isChecked={value[optionValue]}
-                            isDisabled={optionValue === "read"}
-                            onCheckedChange={(state) => {
-                              onChange({
-                                ...value,
-                                [optionValue]: state
-                              });
-                            }}
-                          >
-                            {label}
-                          </Checkbox>
-                        );
-                      })}
-                    </>
-                  </FormControl>
-                );
-              }}
-            />
-            <div className="mt-8 flex items-center">
-              <Button
-                className="mr-4"
-                type="submit"
-                isDisabled={isSubmitting}
-                isLoading={isSubmitting}
-              >
-                Create
-              </Button>
-              <ModalClose asChild>
-                <Button variant="plain" colorSchema="secondary">
-                  Cancel
-                </Button>
-              </ModalClose>
-            </div>
-          </form>
-        </ModalContent>
-      </Modal>
-      <DeleteActionModal
-        isOpen={popUp.removeProjectLevelPermission.isOpen}
-        deleteKey="remove"
-        title="Do you want to remove this permission from the service account?"
-        onChange={(isOpen) => handlePopUpToggle("removeProjectLevelPermission", isOpen)}
-        onDeleteApproved={onRemoveProjectLevelPermission}
-      />
-    </div>
-  );
-};
@@ -1 +0,0 @@
-export { SAProjectLevelPermissionsTable } from "./SAProjectLevelPermissionsTable";
@@ -1,88 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import {
-    Button,
-    FormControl,
-    Input} from "@app/components/v2";
-import {
-    useGetServiceAccountById,
-    useRenameServiceAccount
-} from "@app/hooks/api";
-
-const formSchema = yup.object({
-    name: yup.string().required().label("Service Account Name")
-});
-
-type FormData = yup.InferType<typeof formSchema>;
-
-type Props = {
-    serviceAccountId: string;
-}
-
-export const ServiceAccountNameChangeSection = ({
-    serviceAccountId
-}: Props) => {
-    const { data: serviceAccount, isLoading: isServiceAccountLoading } = useGetServiceAccountById(serviceAccountId);
-
-    const renameServiceAccount = useRenameServiceAccount();
-
-    const {
-        handleSubmit,
-        control,
-        reset,
-        formState: { isDirty, isSubmitting }
-    } = useForm<FormData>({ resolver: yupResolver(formSchema) });
-
-    useEffect(() => {
-        reset({ name: serviceAccount?.name });
-    }, [serviceAccount?.name]);
-    
-    const onFormSubmit = async ({ name }: FormData) => {
-        try {
-            await renameServiceAccount.mutateAsync({
-                serviceAccountId,
-                name
-            });
-        } catch (err) {
-            console.error(err);
-        }
-    }
-
-    return (
-        <form 
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="rounded-md bg-white/5 p-6"
-        >
-            <p className="mb-4 text-xl font-semibold">Name</p>
-            <div className="mb-2 w-full max-w-lg">
-                {!isServiceAccountLoading && (
-                    <Controller 
-                        defaultValue=""
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl isError={Boolean(error)} errorText={error?.message}>
-                                <Input placeholder="Type your service account name..." {...field} />
-                            </FormControl>
-                        )}
-                        control={control}
-                        name="name"
-                    />
-                )}
-            </div>
-            <Button
-                isLoading={isSubmitting}
-                color="mineshaft"
-                size="sm"
-                type="submit"
-                isDisabled={!isDirty || isSubmitting}
-                leftIcon={<FontAwesomeIcon icon={faCheck} />}
-            >
-                Save Changes
-            </Button>
-        </form>
-    );
-}
@@ -1 +0,0 @@
-export { ServiceAccountNameChangeSection } from "./ServiceAccountNameChangeSection";
@@ -1,4 +0,0 @@
-export { CopyServiceAccountIDSection } from "./CopyServiceAccountIDSection";
-export { CopyServiceAccountPublicKeySection } from "./CopyServiceAccountPublicKeySection";
-export { SAProjectLevelPermissionsTable } from "./SAProjectLevelPermissionsTable";
-export { ServiceAccountNameChangeSection } from "./ServiceAccountNameChangeSection";
@@ -1 +0,0 @@
-export { CreateServiceAccountPage } from "./CreateServiceAccountPage";
@@ -4,14 +4,13 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { Checkbox } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
-
-import getLatestFileKey from "../../../../../pages/api/workspace/getLatestFileKey";
+import { useGetUserWsKey,useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";

 export const E2EESection = () => {
    const { currentWorkspace } = useWorkspace();
    const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? "");
    const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
+    const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id ?? "");

    /**
   * Activate bot for project by performing the following steps:
@@ -25,14 +24,12 @@ export const E2EESection = () => {
        try {
            if (!currentWorkspace?._id) return;

-            if (bot) {
+            if (bot && wsKey) {
                // case: there is a bot
                
                if (!bot.isActive) {
                    // bot is not active -> activate bot
-                    const key = await getLatestFileKey({ 
-                        workspaceId: currentWorkspace._id
-                    });
+                    
                    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");

                    if (!PRIVATE_KEY) {
@@ -40,9 +37,9 @@ export const E2EESection = () => {
                    }

                    const WORKSPACE_KEY = decryptAssymmetric({
-                        ciphertext: key.latestKey.encryptedKey,
-                        nonce: key.latestKey.nonce,
-                        publicKey: key.latestKey.sender.publicKey,
+                        ciphertext: wsKey.encryptedKey,
+                        nonce: wsKey.nonce,
+                        publicKey: wsKey.sender.publicKey,
                        privateKey: PRIVATE_KEY
                    });

@@ -17,8 +17,8 @@ import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLo
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button, Input } from "@app/components/v2";
 import { useGetCommonPasswords } from "@app/hooks/api";
+import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import completeAccountInformationSignup from "@app/pages/api/auth/CompleteAccountInformationSignup";
-import getOrganizations from "@app/pages/api/organization/getOrgs";
 import ProjectService from "@app/services/ProjectService";

 // eslint-disable-next-line new-cap
@@ -188,7 +188,7 @@ export const UserInfoSSOStep = ({
                privateKey
              });

-              const userOrgs = await getOrganizations();
+              const userOrgs = await fetchOrganizations();
              const orgId = userOrgs[0]?._id;
              const project = await ProjectService.initProject({
                organizationId: orgId,
				`@@ -1 +0,0 @@`
				`export { CopyServiceAccountIDSection } from "./CopyServiceAccountIDSection";`
				`@@ -1 +0,0 @@`
				`export { CopyServiceAccountPublicKeySection } from "./CopyServiceAccountPublicKeySection";`
				`@@ -1 +0,0 @@`
				`export { SAProjectLevelPermissionsTable } from "./SAProjectLevelPermissionsTable";`
				`@@ -1 +0,0 @@`
				`export { ServiceAccountNameChangeSection } from "./ServiceAccountNameChangeSection";`
				`@@ -1 +0,0 @@`
				`export { CreateServiceAccountPage } from "./CreateServiceAccountPage";`