Checkpoint service account functionality, added UI and general backend structure

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -20,10 +20,15 @@ import {
   useGetUserWsKey,
   useRenameOrg,
   useUpdateOrgUserRole,
-  useUploadWsKey
+  useUploadWsKey,
 } from '@app/hooks/api';
 
-import { OrgIncidentContactsTable, OrgMembersTable, OrgNameChangeSection } from './components';
+import { 
+  OrgIncidentContactsTable, 
+  OrgMembersTable, 
+  OrgNameChangeSection,
+  OrgServiceAccountsTable
+} from './components';
 
 export const OrgSettingsPage = () => {
   const host = window.location.origin;
@@ -36,12 +41,11 @@ export const OrgSettingsPage = () => {
   const { createNotification } = useNotificationContext();
 
   const orgId = currentOrg?._id || '';
+
   const { data: orgUsers, isLoading: isOrgUserLoading } = useGetOrgUsers(orgId);
-  const { data: workspaceMemberships, isLoading: IsWsMembershipLoading } =
-    useGetUserWorkspaceMemberships(orgId);
+  const { data: workspaceMemberships, isLoading: IsWsMembershipLoading } = useGetUserWorkspaceMemberships(orgId);
   const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id || '');
-  const { data: incidentContact, isLoading: IsIncidentContactLoading } =
-    useGetOrgIncidentContact(orgId);
+  const { data: incidentContact, isLoading: IsIncidentContactLoading } = useGetOrgIncidentContact(orgId);
 
   const renameOrg = useRenameOrg();
   const removeUserOrgMembership = useDeleteOrgMembership();
@@ -222,17 +226,15 @@ export const OrgSettingsPage = () => {
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <NavHeader pageName={t('settings-org:title')} />
-      <div className="my-8 ml-6 flex max-w-5xl flex-row items-center justify-between text-xl">
-        <div className="flex flex-col items-start justify-start text-3xl">
-          <p className="mr-4 font-semibold text-gray-200">{t('settings-org:title')}</p>
-          <p className="mr-4 text-base font-normal text-gray-400">
-            {t('settings-org:description')}
-          </p>
-        </div>
+      <div className="my-8 max-w-5xl ml-8">
+        <p className="text-3xl font-semibold text-gray-200">{t('settings-org:title')}</p>
+        <p className="text-base font-normal text-gray-400">
+          {t('settings-org:description')}
+        </p>
       </div>
       <div className="max-w-8xl ml-6 mr-6 flex flex-col text-mineshaft-50">
         <OrgNameChangeSection orgName={currentOrg?.name} onOrgNameChange={onRenameOrg} />
-        <div className="mb-6 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-6 pb-6">
+        <div className="w-full rounded-md bg-white/5 p-6 mb-6">
           <p className="mr-4 mb-4 text-xl font-semibold text-white">
             {t('section-members:org-members')}
           </p>
@@ -249,6 +251,12 @@ export const OrgSettingsPage = () => {
             onGrantAccess={onGrantUserAccess}
           />
         </div>
+        <div className="mb-6 mt-2 w-full rounded-md bg-white/5 p-6">
+          <p className="mr-4 mb-4 text-xl font-semibold text-white">
+            Service Accounts
+          </p>
+          <OrgServiceAccountsTable />
+        </div>
         <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pt-6 pb-6">
           <div className="flex w-full max-w-5xl flex-row items-center justify-between">
             <div className="flex w-full max-w-3xl flex-col justify-between">

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsTable/OrgIncidentContactsTable.tsx

@@ -26,7 +26,8 @@ import {
   Td,
   Th,
   THead,
-  Tr} from '@app/components/v2';
+  Tr
+} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
 import { IncidentContact } from '@app/hooks/api/types';
 

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -93,7 +93,7 @@ export const OrgMembersTable = ({
     () => members.find(({ user }) => userId === user?._id)?.role === 'owner',
     [userId, members]
   );
-
+  
   const filterdUser = useMemo(
     () =>
       members.filter(
@@ -117,20 +117,18 @@ export const OrgMembersTable = ({
             placeholder="Search members..."
           />
         </div>
-        <div>
-          <Button
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => {
-              if (isMoreUserNotAllowed) {
-                handlePopUpOpen('upgradePlan');
-              } else {
-                handlePopUpOpen('addMember');
-              }
-            }}
-          >
-            Add Member
-          </Button>
-        </div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            if (isMoreUserNotAllowed) {
+              handlePopUpOpen('upgradePlan');
+            } else {
+              handlePopUpOpen('addMember');
+            }
+          }}
+        >
+          Add Member
+        </Button>
       </div>
       <div>
         <TableContainer>

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx

@@ -0,0 +1,353 @@
+import { useEffect, useMemo,useState } from 'react';
+import { Controller,useForm } from 'react-hook-form';
+import { useRouter } from 'next/router';
+import { 
+    faCheck, 
+    faCopy, 
+    faMagnifyingGlass, 
+    faPencil,
+    faPlus, 
+    faServer, 
+    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 { generateKeyPair } from '@app/components/utilities/cryptography/crypto';
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from '@app/components/v2';
+import { useOrganization, useWorkspace } from '@app/context';
+import { usePopUp, useToggle } from '@app/hooks';
+import {
+    useCreateServiceAccount,
+    useDeleteServiceAccount,
+    useGetServiceAccounts} from '@app/hooks/api';
+
+const serviceAccountExpiration = [
+  { label: '1 Day', value: 86400 },
+  { label: '7 Days', value: 604800 },
+  { label: '1 Month', value: 2592000 },
+  { label: '6 months', value: 15552000 },
+  { label: '12 months', value: 31104000 },
+  { label: 'Never', value: -1 }
+];
+
+const addServiceAccountFormSchema = yup.object({
+    name: yup.string().required().label('Name').trim(),
+    expiresIn: yup.string().required().label('Service Account Expiration')
+});
+
+type TAddServiceAccountForm = yup.InferType<typeof addServiceAccountFormSchema>;
+
+export const OrgServiceAccountsTable = () => {
+    const router = useRouter();
+    const { currentOrg } = useOrganization();
+    const { currentWorkspace } = useWorkspace();
+    
+    console.log('currentWorkspace: ', currentWorkspace);
+    
+    const orgId = currentOrg?._id || '';
+    const [step, setStep] = useState(0);
+    const [isAccessKeyCopied, setIsAccessKeyCopied] = useToggle(false);
+    const [isPrivateKeyCopied, setIsPrivateKeyCopied] = useToggle(false);
+    const [accessKey, setAccessKey] = useState('');
+    const [privateKey, setPrivateKey] = useState('');
+    const [searchServiceAccountFilter, setSearchServiceAccountFilter] = useState('');
+    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+        'addServiceAccount',
+        'removeServiceAccount',
+    ] as const);
+
+    const { data: serviceAccounts = [], isLoading: isServiceAccountsLoading } = useGetServiceAccounts(orgId);
+    
+    const createServiceAccount = useCreateServiceAccount();
+    const removeServiceAccount = useDeleteServiceAccount();
+    
+    useEffect(() => {
+        let timer: NodeJS.Timeout;
+        if (isAccessKeyCopied) {
+            timer = setTimeout(() => setIsAccessKeyCopied.off(), 2000);
+        }
+
+        if (isPrivateKeyCopied) {
+            timer = setTimeout(() => setIsPrivateKeyCopied.off(), 2000);
+        }
+
+        return () => clearTimeout(timer);
+    }, [isAccessKeyCopied, isPrivateKeyCopied]);
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<TAddServiceAccountForm>({ resolver: yupResolver(addServiceAccountFormSchema) });
+    
+    const onAddServiceAccount = async ({ name, expiresIn }: TAddServiceAccountForm) => {
+        if (!currentOrg?._id) return;
+
+        const keyPair = generateKeyPair();
+        setPrivateKey(keyPair.privateKey);
+
+        const serviceAccountDetails = await createServiceAccount.mutateAsync({
+            name,
+            organizationId: currentOrg?._id,
+            publicKey: keyPair.publicKey,
+            expiresIn
+        });
+        
+        console.log('serviceAccountDetails: ', serviceAccountDetails);
+        
+        setAccessKey(serviceAccountDetails.serviceAccountAccessKey);
+
+        setStep(1);
+        reset();
+    }
+    
+    const onRemoveServiceAccount = async () => {
+        console.log('onRemoveServiceAccount');
+
+        const serviceAccountId = (popUp?.removeServiceAccount?.data as { _id: string })?._id;
+        console.log('serviceAccountId: ', serviceAccountId);
+        
+        await removeServiceAccount.mutateAsync(serviceAccountId);
+        handlePopUpClose('removeServiceAccount');
+    }
+    
+    const filteredServiceAccounts = useMemo(
+        () =>
+            serviceAccounts.filter(
+                ({ name }) =>
+                    name.toLowerCase().includes(searchServiceAccountFilter)
+            ),
+        [serviceAccounts, searchServiceAccountFilter]
+    );
+    
+    const renderStep = (stepToRender: number) => {
+        switch (stepToRender) {
+            case 0:
+                return (
+                   <form onSubmit={handleSubmit(onAddServiceAccount)}>
+                        <Controller
+                            control={control}
+                            defaultValue=""
+                            name="name"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                                <Input {...field} />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="expiresIn"
+                            defaultValue={String(serviceAccountExpiration?.[0]?.value)}
+                            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"
+                                    >
+                                    {serviceAccountExpiration.map(({ label, value }) => (
+                                        <SelectItem value={String(value)} key={label}>
+                                            {label}
+                                        </SelectItem>
+                                    ))}
+                                    </Select>
+                                </FormControl>
+                            )}
+                        />
+                        <div className="mt-8 flex items-center">
+                            <Button
+                                className="mr-4"
+                                size="sm"
+                                type="submit"
+                                isLoading={isSubmitting}
+                                isDisabled={isSubmitting}
+                            >
+                                Create Service Account
+                            </Button>
+                            <Button
+                                colorSchema="secondary"
+                                variant="plain"
+                                onClick={() => handlePopUpClose('addServiceAccount')}
+                            >
+                                Cancel
+                            </Button>
+                        </div>
+                    </form> 
+                );
+            case 1:
+                return (
+                    <>
+                        <p>Access Key</p>
+                        <div className="flex items-center justify-end rounded-md p-2 text-base text-gray-400 bg-white/[0.07]">
+                            <p className="mr-4 break-all">{accessKey}</p>
+                            <IconButton
+                                ariaLabel="copy icon"
+                                colorSchema="secondary"
+                                className="group relative"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(accessKey);
+                                    setIsAccessKeyCopied.on();
+                                }}
+                            >
+                                <FontAwesomeIcon icon={isAccessKeyCopied ? 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>
+                        <p className="mt-4">Private Key</p>
+                        <div className="flex items-center justify-end rounded-md p-2 text-base text-gray-400 bg-white/[0.07]">
+                            <p className="mr-4 break-all">{privateKey}</p>
+                            <IconButton
+                                ariaLabel="copy icon"
+                                colorSchema="secondary"
+                                className="group relative"
+                                onClick={() => {
+                                    navigator.clipboard.writeText(privateKey);
+                                    setIsPrivateKeyCopied.on();
+                                }}
+                            >
+                                <FontAwesomeIcon icon={isPrivateKeyCopied ? 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>
+                    </>
+                );
+            default:
+                return <div />
+        }
+    }
+    
+    console.log('serviceAccounts: ', serviceAccounts);
+
+    return (
+        <div className="w-full">
+            <div className="mb-4 flex">
+                <div className="mr-4 flex-1">
+                    <Input 
+                        value={searchServiceAccountFilter}
+                        onChange={(e) => setSearchServiceAccountFilter(e.target.value)}
+                        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                        placeholder="Search service accounts..."
+                    />
+                </div>
+                <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    onClick={() => {
+                        setStep(0);
+                        reset();
+                        handlePopUpOpen('addServiceAccount');
+                    }}
+                >
+                    Add Service Account
+                </Button>
+            </div>
+            <TableContainer>
+                <Table>
+                    <THead>
+                        <Th>Name</Th>
+                        <Th className="w-full">Valid Until</Th>
+                        <Th aria-label="actions" />
+                    </THead>
+                    <TBody>
+                        {isServiceAccountsLoading && <TableSkeleton columns={5} key="org-service-accounts" />}
+                        {!isServiceAccountsLoading && (
+                            filteredServiceAccounts.map(({
+                                name, 
+                                expiresAt, 
+                                _id: serviceAccountId 
+                            }) => {
+                                return (
+                                    <Tr key={`org-service-account-${serviceAccountId}`}>
+                                        <Td>{name}</Td>
+                                        <Td>{new Date(expiresAt).toUTCString()}</Td>
+                                        <Td>
+                                            <div className="flex">
+                                                <IconButton
+                                                    ariaLabel="edit"
+                                                    colorSchema="secondary"
+                                                    onClick={() => {
+                                                        if (currentWorkspace?._id) {
+                                                            router.push(`/settings/org/${currentWorkspace._id}/service-accounts/${serviceAccountId}`);
+                                                        }
+                                                    }}
+                                                    className="mr-2"
+                                                >
+                                                    <FontAwesomeIcon icon={faPencil} />
+                                                </IconButton>
+                                                <IconButton
+                                                    ariaLabel="delete"
+                                                    colorSchema="danger"
+                                                    onClick={() => handlePopUpOpen('removeServiceAccount', { _id: serviceAccountId })}
+                                                >
+                                                    <FontAwesomeIcon icon={faTrash} />
+                                                </IconButton>
+                                            </div>
+                                        </Td>
+                                    </Tr>
+                                );
+                            })
+                        )}
+                        {!isServiceAccountsLoading && filteredServiceAccounts?.length === 0 && (
+                            <Tr>
+                                <Td colSpan={4} className="text-center">
+                                    <EmptyState title="No service accounts found" icon={faServer} />
+                                </Td>
+                            </Tr>
+                        )}
+                    </TBody>
+                </Table>
+            </TableContainer>
+            <Modal
+                isOpen={popUp?.addServiceAccount?.isOpen}
+                onOpenChange={(isOpen) => {
+                    handlePopUpToggle('addServiceAccount', isOpen);
+                    reset();
+                }}
+            >
+                <ModalContent
+                    title="Add Service Account"
+                    subTitle="A service account represents a machine identity such as a VM or application client."
+                >
+                    {renderStep(step)}
+                </ModalContent>
+            </Modal>
+            <DeleteActionModal
+                isOpen={popUp.removeServiceAccount.isOpen}
+                deleteKey="remove"
+                title="Do you want to remove this service account from the org?"
+                onChange={(isOpen) => handlePopUpToggle('removeServiceAccount', isOpen)}
+                onDeleteApproved={onRemoveServiceAccount}
+            />
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/index.tsx

@@ -0,0 +1 @@
+export { OrgServiceAccountsTable } from './OrgServiceAccountsTable';

frontend/src/views/Settings/OrgSettingsPage/components/index.tsx

@@ -1,3 +1,5 @@
 export { OrgIncidentContactsTable } from './OrgIncidentContactsTable';
 export { OrgMembersTable } from './OrgMembersTable';
 export { OrgNameChangeSection } from './OrgNameChangeSection';
+export { OrgServiceAccountsTable } from './OrgServiceAccountsTable';
+