Split ST V3 modal into option tabs, re-modularized authn methods

backend/src/helpers/secrets.ts

@@ -49,7 +49,7 @@ import {
 import { TelemetryService } from "../services";
 import { client, getEncryptionKey, getRootEncryptionKey } from "../config";
 import { EEAuditLogService, EELogService, EESecretService } from "../ee/services";
-import { getAuthDataPayloadIdObj, getAuthDataPayloadUserObj } from "../utils/authn/authDataExtractors";
+import { getAuthDataPayloadIdObj, getAuthDataPayloadUserObj } from "../utils/authn/helpers";
 import { getFolderByPath, getFolderIdFromServiceToken } from "../services/FolderService";
 import picomatch from "picomatch";
 import path from "path";

backend/src/middleware/requireAuth.ts

@@ -2,7 +2,7 @@ import jwt from "jsonwebtoken";
 import { NextFunction, Request, Response } from "express";
 import { AuthMode } from "../variables";
 import { AuthData } from "../interfaces/middleware";
-import { extractAuthMode, getAuthData } from "../utils/authn/authMode";
+import { extractAuthMode, getAuthData } from "../utils/authn/helpers";
 import { UnauthorizedRequestError } from "../utils/errors";
 
 declare module "jsonwebtoken" {

backend/src/utils/authn/authDataExtractors/index.ts

@@ -1,53 +0,0 @@
-import { AuthData } from "../../../interfaces/middleware";
-import {
-  ServiceAccount,
-  ServiceTokenData,
-  ServiceTokenDataV3,
-  User
-} from "../../../models";
-
-/**
- * Returns an object containing the id of the authentication data payload
- * @param {AuthData} authData - authentication data object
- * @returns 
- */
-export const getAuthDataPayloadIdObj = (authData: AuthData) => {
-  if (authData.authPayload instanceof User) {
-    return { userId: authData.authPayload._id };
-  }
-
-  if (authData.authPayload instanceof ServiceAccount) {
-    return { serviceAccountId: authData.authPayload._id };
-  }
-
-  if (authData.authPayload instanceof ServiceTokenData) {
-    return { serviceTokenDataId: authData.authPayload._id };
-  }
-
-  if (authData.authPayload instanceof ServiceTokenDataV3) {
-    return { serviceTokenDataId: authData.authPayload._id };
-  }
-};
-
-/**
- * Returns an object containing the user associated with the authentication data payload
- * @param {AuthData} authData - authentication data object
- * @returns 
- */
-export const getAuthDataPayloadUserObj = (authData: AuthData) => {
-  if (authData.authPayload instanceof User) {
-    return { user: authData.authPayload._id };
-  }
-
-  if (authData.authPayload instanceof ServiceAccount) {
-    return { user: authData.authPayload.user };
-  }
-
-  if (authData.authPayload instanceof ServiceTokenData) {
-    return { user: authData.authPayload.user };
-  }
-  
-  if (authData.authPayload instanceof ServiceTokenDataV3) {
-    return { user: authData.authPayload.user };
-  }
-}

backend/src/utils/authn/authMode/index.ts

@@ -1,4 +0,0 @@
-export { 
-    extractAuthMode, 
-    getAuthData
-} from "./helpers";

backend/src/utils/authn/authModeValidators/index.ts

@@ -0,0 +1,5 @@
+export * from "./apiKey";
+export * from "./apiKeyV2";
+export * from "./jwt";
+export * from "./serviceTokenV2";
+export * from "./serviceTokenV3";

backend/src/utils/authn/helpers/authDataExtractors.ts

@@ -0,0 +1,53 @@
+import { AuthData } from "../../../interfaces/middleware";
+import {
+  ServiceAccount,
+  ServiceTokenData,
+  ServiceTokenDataV3,
+  User
+} from "../../../models";
+
+/**
+ * Returns an object containing the id of the authentication data payload
+ * @param {AuthData} authData - authentication data object
+ * @returns 
+ */
+ export const getAuthDataPayloadIdObj = (authData: AuthData) => {
+    if (authData.authPayload instanceof User) {
+        return { userId: authData.authPayload._id };
+    }
+  
+    if (authData.authPayload instanceof ServiceAccount) {
+        return { serviceAccountId: authData.authPayload._id };
+    }
+  
+    if (authData.authPayload instanceof ServiceTokenData) {
+        return { serviceTokenDataId: authData.authPayload._id };
+    }
+  
+    if (authData.authPayload instanceof ServiceTokenDataV3) {
+        return { serviceTokenDataId: authData.authPayload._id };
+    }
+};
+  
+/**
+ * Returns an object containing the user associated with the authentication data payload
+ * @param {AuthData} authData - authentication data object
+ * @returns 
+ */
+export const getAuthDataPayloadUserObj = (authData: AuthData) => {
+    if (authData.authPayload instanceof User) {
+        return { user: authData.authPayload._id };
+    }
+
+    if (authData.authPayload instanceof ServiceAccount) {
+        return { user: authData.authPayload.user };
+    }
+
+    if (authData.authPayload instanceof ServiceTokenData) {
+        return { user: authData.authPayload.user };
+    }
+
+    if (authData.authPayload instanceof ServiceTokenDataV3) {
+        return { user: authData.authPayload.user };
+    }
+}

backend/src/utils/authn/helpers/index.ts

@@ -1,15 +1,19 @@
+import { AuthData } from "../../../interfaces/middleware";
 import jwt from "jsonwebtoken";
 import { getAuthSecret } from "../../../config";
 import { ActorType } from "../../../ee/models";
 import { AuthMode, AuthTokenType } from "../../../variables";
 import { UnauthorizedRequestError } from "../../errors";
-import { validateAPIKey } from "./apiKey";
+import {
-import { validateAPIKeyV2 } from "./apiKeyV2";
+  validateAPIKey,
-import { validateServiceTokenV2 } from "./serviceTokenV2";
+  validateAPIKeyV2,
-import { validateServiceTokenV3 } from "./serviceTokenV3";
+  validateJWT,
-import { validateJWT } from "./jwt";
+  validateServiceTokenV2,
+  validateServiceTokenV3
+} from "../authModeValidators";
 import { getUserAgentType } from "../../posthog";
-import { AuthData } from "../../../interfaces/middleware";
+
+export * from "./authDataExtractors";
 
 interface ExtractAuthModeParams {
     headers: { [key: string]: string | string[] | undefined }

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx

@@ -1,10 +1,10 @@
 import { APIKeySection } from "../APIKeySection";
-import { APIKeyV2Section } from "../APIKeyV2Section";
+// import { APIKeyV2Section } from "../APIKeyV2Section";
 
 export const PersonalAPIKeyTab = () => {
     return (
         <>
-            <APIKeyV2Section />
+            {/* <APIKeyV2Section /> */}
             <APIKeySection />
         </>
     );

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectServiceTokensTab/ProjectServiceTokensTab.tsx

@@ -1,10 +1,10 @@
 import { ServiceTokenSection } from "../ServiceTokenSection";
-import { ServiceTokenV3Section } from "../ServiceTokenV3Section";
+// import { ServiceTokenV3Section } from "../ServiceTokenV3Section";
 
 export const ProjectServiceTokensTab = () => {
     return (
         <>
-            <ServiceTokenV3Section />
+            {/* <ServiceTokenV3Section /> */}
             <ServiceTokenSection />
         </>
     );

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenV3Section/AddServiceTokenV3Modal.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form"; 
-import { faPlus, faXmark, faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy,faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { motion } from "framer-motion";
 import nacl from "tweetnacl";
 import { encodeBase64 } from "tweetnacl-util";
 import * as yup from "yup";
+
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
     decryptAssymmetric,
@@ -21,8 +23,11 @@ import {
     Select,
     SelectItem,
     Switch,
-    UpgradePlanModal
+    Tab,
-} from "@app/components/v2";
+    TabList,
+    TabPanel,
+    Tabs,
+    UpgradePlanModal} from "@app/components/v2";
 import {
     useSubscription,
     useWorkspace 
@@ -42,6 +47,11 @@ import {
 } from "@app/hooks/api/serviceTokens/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+enum TabSections {
+    General = "general",
+    Advanced = "advanced"
+}
+
 const expirations = [
     { label: "Never", value: "" },
     { label: "1 day", value: "86400" },
@@ -343,6 +353,21 @@ export const AddServiceTokenV3Modal = ({
             <ModalContent title={`${popUp?.serviceTokenV3?.data ? "Update" : "Create"} Service Token V3`}>
                 {!hasServiceTokenJSON ? (
                     <form onSubmit={handleSubmit(onFormSubmit)}>
+                        <Tabs defaultValue={TabSections.General}>
+                            <TabList>
+                                <div className="flex flex-row border-b border-mineshaft-600 w-full">
+                                    <Tab value={TabSections.General}>General</Tab>
+                                    <Tab value={TabSections.Advanced}>Advanced</Tab>
+                                </div>
+                            </TabList>
+                            <TabPanel value={TabSections.General}>
+                                <motion.div
+                                    key="panel-1"
+                                    transition={{ duration: 0.15 }}
+                                    initial={{ opacity: 0, translateX: 30 }}
+                                    animate={{ opacity: 1, translateX: 0 }}
+                                    exit={{ opacity: 0, translateX: 30 }}
+                                >
                                     <Controller
                                         control={control}
                                         defaultValue=""
@@ -456,6 +481,36 @@ export const AddServiceTokenV3Modal = ({
                                             Add Scope
                                         </Button>
                                     </div>
+                                    <Controller
+                                        control={control}
+                                        name="expiresIn"
+                                        defaultValue=""
+                                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                                            <FormControl
+                                                label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Refresh Token Expires In`}
+                                                errorText={error?.message}
+                                                isError={Boolean(error)}
+                                                className="mt-4"
+                                            >
+                                                <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>
+                                        )}
+                                    />
+                                </motion.div>
+                            </TabPanel>
+                            <TabPanel value={TabSections.Advanced}>
+                                <div>
                                     {tokenTrustedIps.map(({ id }, index) => (
                                         <div className="flex items-end space-x-2 mb-3" key={id}>
                                             <Controller
@@ -524,32 +579,6 @@ export const AddServiceTokenV3Modal = ({
                                             Add IP Address
                                         </Button>
                                     </div>
-                        <Controller
-                            control={control}
-                            name="expiresIn"
-                            defaultValue=""
-                            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                <FormControl
-                                    label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Refresh Token Expires In`}
-                                    errorText={error?.message}
-                                    isError={Boolean(error)}
-                                    className="mt-4"
-                                >
-                                    <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>
-                            )}
-                        />
                                     <Controller
                                         control={control}
                                         defaultValue="7200"
@@ -567,7 +596,7 @@ export const AddServiceTokenV3Modal = ({
                                             </FormControl>
                                         )}
                                     />
-                        <div className="mt-8 mb-[2.36rem]">
+                                    <div className="mt-8">
                                         <Controller
                                             control={control}
                                             name="isRefreshTokenRotationEnabled"
@@ -581,8 +610,12 @@ export const AddServiceTokenV3Modal = ({
                                                 </Switch>
                                             )}
                                         />
+                                        <p className="mt-4 text-sm font-normal text-mineshaft-400">When enabled, as a result of exchanging a refresh token, a new refresh token will be issued and the existing token will be invalidated.</p>
                                     </div>
-                        <div className="mt-8 flex items-center">
+                                </div>
+                            </TabPanel>
+                        </Tabs>
+                        <div className="flex items-center">
                             <Button
                                 className="mr-4"
                                 size="sm"