Replace scopes with role for ST V3

backend/src/controllers/v3/secretsController.ts

@@ -3,11 +3,10 @@ import { Types } from "mongoose";
 import { EventService, SecretService } from "../../services";
 import { eventPushSecrets } from "../../events";
 import { BotService } from "../../services";
-import { containsGlobPatterns, isValidScopeV3, repackageSecretToRaw } from "../../helpers/secrets";
+import { containsGlobPatterns, repackageSecretToRaw } from "../../helpers/secrets";
 import { encryptSymmetric128BitHexKeyUTF8 } from "../../utils/crypto";
 import { getAllImportedSecrets } from "../../services/SecretImportService";
 import { Folder, IMembership, IServiceTokenData, IServiceTokenDataV3 } from "../../models";
-import { Permission } from "../../models/serviceTokenDataV3";
 import { getFolderByPath } from "../../services/FolderService";
 import { BadRequestError } from "../../utils/errors";
 import { validateRequest } from "../../helpers/validation";
@@ -50,24 +49,19 @@ const checkSecretsPermission = async ({
   membership?: Omit<IMembership, "customRole"> & { customRole: IRole };
 }> => {
   let STV2RequiredPermissions = [];
-  let STV3RequiredPermissions: Permission[] = [];
 
   switch (secretAction) {
     case ProjectPermissionActions.Create:
       STV2RequiredPermissions = [PERMISSION_WRITE_SECRETS];
-      STV3RequiredPermissions = [Permission.WRITE];
       break;
     case ProjectPermissionActions.Read:
       STV2RequiredPermissions = [PERMISSION_READ_SECRETS];
-      STV3RequiredPermissions = [Permission.READ];
       break;
     case ProjectPermissionActions.Edit:
       STV2RequiredPermissions = [PERMISSION_WRITE_SECRETS];
-      STV3RequiredPermissions = [Permission.WRITE];
       break;
     case ProjectPermissionActions.Delete:
       STV2RequiredPermissions = [PERMISSION_WRITE_SECRETS];
-      STV3RequiredPermissions = [Permission.WRITE];
       break;
   }
 
@@ -104,23 +98,27 @@ const checkSecretsPermission = async ({
       return { authVerifier: () => true };
     }
     case ActorType.SERVICE_V3: {
+      
+      // TODO: redo this part
       await validateServiceTokenDataV3ClientForWorkspace({
         authData,
         serviceTokenData: authData.authPayload as IServiceTokenDataV3,
         workspaceId: new Types.ObjectId(workspaceId),
         environment,
-        secretPath,
-        requiredPermissions: STV3RequiredPermissions
       });
-      return {
+      
-        authVerifier: (env: string, secPath: string) =>
+      // TODO: return an authVerifier
-          isValidScopeV3({
+      
-            authPayload: authData.authPayload as IServiceTokenDataV3,
+      // return {
-            environment: env,
+      //   authVerifier: (env: string, secPath: string) =>
-            secretPath: secPath,
+      //     isValidScopeV3({
-            requiredPermissions: STV3RequiredPermissions
+      //       authPayload: authData.authPayload as IServiceTokenDataV3,
-          })
+      //       environment: env,
-      };
+      //       secretPath: secPath,
+      //       requiredPermissions: STV3RequiredPermissions
+      //     })
+      // };
+      return { authVerifier: () => true }
     }
     default: {
       throw UnauthorizedRequestError();

backend/src/ee/controllers/v3/serviceTokenDataController.ts

@@ -8,13 +8,11 @@ import {
     ServiceTokenDataV3Key,
     Workspace
 } from "../../../models";
-import {
+import { IServiceTokenV3TrustedIp } from "../../../models/serviceTokenDataV3";
-    IServiceTokenV3Scope, 
-    IServiceTokenV3TrustedIp 
-} from "../../../models/serviceTokenDataV3";
 import {
     ActorType,
-    EventType
+    EventType,
+    Role
 } from "../../models";
 import { validateRequest } from "../../../helpers/validation";
 import * as reqValidator from "../../../validation/serviceTokenDataV3";
@@ -29,7 +27,7 @@ import { BadRequestError, ResourceNotFoundError, UnauthorizedRequestError } from
 import { extractIPDetails, isValidIpOrCidr } from "../../../utils/ip";
 import { EEAuditLogService, EELicenseService } from "../../services";
 import { getAuthSecret } from "../../../config";
-import { AuthTokenType } from "../../../variables";
+import { ADMIN, AuthTokenType, CUSTOM, MEMBER, VIEWER } from "../../../variables";
 
 /**
  * Return project key for service token V3
@@ -163,7 +161,7 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
             name, 
             workspaceId, 
             publicKey, 
-            scopes,
+            role,
             trustedIps,
             expiresIn, 
             accessTokenTTL,
@@ -181,6 +179,19 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
     const workspace = await Workspace.findById(workspaceId);
     if (!workspace) throw BadRequestError({ message: "Workspace not found" });
 
+    const isCustomRole = ![ADMIN, MEMBER, VIEWER].includes(role);
+    
+    let customRole;
+    if (isCustomRole) {
+        customRole = await Role.findOne({
+            slug: role,
+            isOrgRole: false,
+            workspace: workspace._id
+        });
+        
+        if (!customRole) throw BadRequestError({ message: "Role not found" });
+    }
+
     const plan = await EELicenseService.getPlan(workspace.organization);
     
     // validate trusted ips
@@ -219,7 +230,8 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
         accessTokenUsageCount: 0,
         tokenVersion: 1,
         trustedIps: reformattedTrustedIps,
-        scopes,
+        role: isCustomRole ? CUSTOM : role,
+        customRole,
         isActive,
         expiresAt,
         accessTokenTTL,
@@ -250,7 +262,7 @@ export const createServiceTokenData = async (req: Request, res: Response) => {
             metadata: {
                 name,
                 isActive,
-                scopes: scopes as Array<IServiceTokenV3Scope>,
+                role,
                 trustedIps: reformattedTrustedIps as Array<IServiceTokenV3TrustedIp>,
                 expiresAt
             }
@@ -278,7 +290,7 @@ export const updateServiceTokenData = async (req: Request, res: Response) => {
         body: { 
             name, 
             isActive,
-            scopes,
+            role,
             trustedIps,
             expiresIn,
             accessTokenTTL,
@@ -304,6 +316,20 @@ export const updateServiceTokenData = async (req: Request, res: Response) => {
     const workspace = await Workspace.findById(serviceTokenData.workspace);
     if (!workspace) throw BadRequestError({ message: "Workspace not found" });
 
+    let customRole;
+    if (role) {
+        const isCustomRole = ![ADMIN, MEMBER, VIEWER].includes(role);
+        if (isCustomRole) {
+            customRole = await Role.findOne({
+                slug: role,
+                isOrgRole: false,
+                workspace: workspace._id
+            });
+            
+            if (!customRole) throw BadRequestError({ message: "Role not found" });
+        }
+    }
+
     const plan = await EELicenseService.getPlan(workspace.organization);
 
     // validate trusted ips
@@ -335,7 +361,15 @@ export const updateServiceTokenData = async (req: Request, res: Response) => {
         {
             name,
             isActive,
-            scopes,
+            role: customRole ? CUSTOM : role,
+            ...(customRole ? {
+                customRole 
+            } : {}),
+            ...(role && !customRole ? { // non-custom role
+                $unset: {
+                    customRole: 1
+                }
+            } : {}),
             trustedIps: reformattedTrustedIps,
             expiresAt,
             accessTokenTTL,
@@ -357,7 +391,7 @@ export const updateServiceTokenData = async (req: Request, res: Response) => {
             metadata: {
                 name: serviceTokenData.name,
                 isActive,
-                scopes: scopes as Array<IServiceTokenV3Scope>,
+                role,
                 trustedIps: reformattedTrustedIps as Array<IServiceTokenV3TrustedIp>,
                 expiresAt
             }
@@ -415,7 +449,7 @@ export const deleteServiceTokenData = async (req: Request, res: Response) => {
             metadata: {
                 name: serviceTokenData.name,
                 isActive: serviceTokenData.isActive,
-                scopes: serviceTokenData.scopes as Array<IServiceTokenV3Scope>,
+                role: serviceTokenData.role,
                 trustedIps: serviceTokenData.trustedIps as Array<IServiceTokenV3TrustedIp>,
                 expiresAt: serviceTokenData.expiresAt
             }

backend/src/ee/models/auditLog/types.ts

@@ -1,5 +1,5 @@
 import { ActorType, EventType } from "./enums";
-import { IServiceTokenV3Scope, IServiceTokenV3TrustedIp } from "../../../models/serviceTokenDataV3";
+import { IServiceTokenV3TrustedIp } from "../../../models/serviceTokenDataV3";
 
 interface UserActorMetadata {
   userId: string;
@@ -225,7 +225,7 @@ interface CreateServiceTokenV3Event {
   metadata: {
     name: string;
     isActive: boolean;
-    scopes: Array<IServiceTokenV3Scope>;
+    role: string;
     trustedIps: Array<IServiceTokenV3TrustedIp>;
     expiresAt?: Date;
   };
@@ -236,7 +236,7 @@ interface UpdateServiceTokenV3Event {
   metadata: {
     name?: string;
     isActive?: boolean;
-    scopes?: Array<IServiceTokenV3Scope>;
+    role?: string;
     trustedIps?: Array<IServiceTokenV3TrustedIp>;
     expiresAt?: Date;
   };
@@ -247,7 +247,7 @@ interface DeleteServiceTokenV3Event {
   metadata: {
     name: string;
     isActive: boolean;
-    scopes: Array<IServiceTokenV3Scope>;
+    role: string;
     expiresAt?: Date;
     trustedIps: Array<IServiceTokenV3TrustedIp>;
   };

backend/src/helpers/secrets.ts

@@ -13,13 +13,11 @@ import {
   Folder,
   ISecret,
   IServiceTokenData,
-  IServiceTokenDataV3,
   Secret,
   SecretBlindIndexData,
   ServiceTokenData,
   TFolderRootSchema
 } from "../models";
-import { Permission } from "../models/serviceTokenDataV3";
 import { EventType, SecretVersion } from "../ee/models";
 import {
   BadRequestError,
@@ -51,42 +49,6 @@ import picomatch from "picomatch";
 import path from "path";
 import { getAnImportedSecret } from "../services/SecretImportService";
 
-/**
- * Validate scope for service token v3
- * @param authPayload
- * @param environment
- * @param secretPath
- * @returns
- */
-export const isValidScopeV3 = ({
-  authPayload,
-  environment,
-  secretPath,
-  requiredPermissions
-}: {
-  authPayload: IServiceTokenDataV3;
-  environment: string;
-  secretPath: string;
-  requiredPermissions: Permission[];
-}) => {
-  const { scopes } = authPayload;
-
-  const validScope = scopes.find(
-    (scope) =>
-      picomatch.isMatch(secretPath, scope.secretPath, { strictSlashes: false }) &&
-      scope.environment === environment
-  );
-
-  if (
-    validScope &&
-    !requiredPermissions.every((permission) => validScope.permissions.includes(permission))
-  ) {
-    return false;
-  }
-
-  return Boolean(validScope);
-};
-
 /**
  * Validate scope for service token v2
  * @param authPayload

backend/src/models/serviceTokenDataV3.ts

@@ -1,16 +1,6 @@
 import { Document, Schema, Types, model } from "mongoose";
 import { IPType } from "../ee/models";
-
+import { ADMIN, CUSTOM, MEMBER, VIEWER } from "../variables";
-export enum Permission {
-    READ = "read",
-    WRITE = "write"
-}
-
-export interface IServiceTokenV3Scope {
-    environment: string;
-    secretPath: string;
-    permissions: Permission[];
-}
 
 export interface IServiceTokenV3TrustedIp {
     ipAddress: string;
@@ -33,7 +23,8 @@ export interface IServiceTokenDataV3 extends Document {
     isRefreshTokenRotationEnabled: boolean;
     expiresAt?: Date;
     accessTokenTTL: number;
-    scopes: Array<IServiceTokenV3Scope>;
+    role: "admin" | "member" | "viewer" | "custom";
+    customRole: Types.ObjectId;
     trustedIps: Array<IServiceTokenV3TrustedIp>;
 }
 
@@ -100,28 +91,15 @@ const serviceTokenDataV3Schema = new Schema(
             default: 7200,
             required: true
         },
-        scopes: { // TODO: consider switching this out for roles instead
+        role: {
-            type: [
+            type: String,
-                {
+            enum: [ADMIN, MEMBER, VIEWER, CUSTOM],
-                    environment: {
-                        type: String,
-                        required: true
-                    },
-                    secretPath: {
-                        type: String,
-                        default: "/",
-                        required: true
-                    },
-                    permissions: {
-                        type: [String],
-                        enum: [Permission.READ, Permission.WRITE],
-                        default: [Permission.READ],
-                        required: true
-                    }
-                }
-            ],
             required: true
         },
+        customRole: {
+            type: Schema.Types.ObjectId,
+            ref: "Role"
+        },
         trustedIps: {
             type: [
                 {

backend/src/validation/serviceTokenDataV3.ts

@@ -1,11 +1,10 @@
 import { Types } from "mongoose";
 import { IServiceTokenDataV3 } from "../models";
-import { Permission } from "../models/serviceTokenDataV3";
 import { z } from "zod";
 import { UnauthorizedRequestError } from "../utils/errors";
-import { isValidScopeV3 } from "../helpers";
 import { AuthData } from "../interfaces/middleware";
 import { checkIPAgainstBlocklist } from "../utils/ip";
+import { MEMBER } from "../variables";
 
 /**
  * Validate that service token (client) can access workspace
@@ -22,15 +21,13 @@ import { checkIPAgainstBlocklist } from "../utils/ip";
   serviceTokenData,
   workspaceId,
   environment,
-  secretPath = "/",
+  // secretPath = "/",
-  requiredPermissions
 }: {
   authData: AuthData;
   serviceTokenData: IServiceTokenDataV3;
   workspaceId: Types.ObjectId;
   environment?: string;
-  secretPath?: string;
+  // secretPath?: string;
-  requiredPermissions: Permission[];
 }) => {
   
   // validate ST V3 IP address
@@ -47,16 +44,19 @@ import { checkIPAgainstBlocklist } from "../utils/ip";
   }
   
   if (environment) {
-    const isValid = isValidScopeV3({
-      authPayload: serviceTokenData,
-      environment,
-      secretPath,
-      requiredPermissions
-    });
     
-    if (!isValid) throw UnauthorizedRequestError({
+    // TODO: validation fun for ST V3
-      message: "Failed service token authorization for the given workspace"
+    
-    });
+    // const isValid = isValidScopeV3({
+    //   authPayload: serviceTokenData,
+    //   environment,
+    //   secretPath,
+    //   requiredPermissions
+    // });
+    
+    // if (!isValid) throw UnauthorizedRequestError({
+    //   message: "Failed service token authorization for the given workspace"
+    // });
   }
 };
 
@@ -71,20 +71,14 @@ export const CreateServiceTokenV3 = z.object({
     name: z.string().trim(),
     workspaceId: z.string().trim(),
     publicKey: z.string().trim(),
-    scopes: z
+    role: z.string().trim().min(1).default(MEMBER),
-      .object({
+    trustedIps: z // TODO: provide default
-        permissions: z.enum(["read", "write"]).array(),
-        environment: z.string().trim(),
-        secretPath: z.string().trim()
-      })
-      .array()
-      .min(1),
-    trustedIps: z
       .object({
         ipAddress: z.string().trim(),
       })
       .array()
-      .min(1),
+      .min(1)
+      .default([{ ipAddress: "0.0.0.0/0" }]),
     expiresIn: z.number().optional(),
     accessTokenTTL: z.number().int().min(1),
     encryptedKey: z.string().trim(),
@@ -100,15 +94,7 @@ export const UpdateServiceTokenV3 = z.object({
   body: z.object({
     name: z.string().trim().optional(),
     isActive: z.boolean().optional(),
-    scopes: z
+    role: z.string().trim().min(1).optional(),
-      .object({
-        permissions: z.enum(["read", "write"]).array(),
-        environment: z.string().trim(),
-        secretPath: z.string().trim()
-      })
-      .array()
-      .min(1)
-      .optional(),
     trustedIps: z
       .object({
         ipAddress: z.string().trim()

frontend/src/hooks/api/auditLogs/types.tsx

@@ -4,17 +4,6 @@ import {
     UserAgentType
 } from "./enums";
 
-enum Permission {
-    READ = "read",
-    READ_WRITE = "readWrite"
-}
-
-interface Scope {
-    environment: string;
-    secretPath: string;
-    permission: Permission;
-}
-
 interface UserActorMetadata {
   userId: string;
   email: string;
@@ -211,7 +200,7 @@ interface CreateServiceTokenV3Event {
     metadata: {
         name: string;
         isActive: boolean;
-        scopes: Array<Scope>;
+        role: string;
         expiresAt?: Date;
     }
 }
@@ -221,7 +210,7 @@ interface UpdateServiceTokenV3Event {
     metadata: {
         name?: string;
         isActive?: boolean;
-        scopes?: Array<Scope>;
+        role?: string;
         expiresAt?: Date;
     }
 }
@@ -231,7 +220,7 @@ interface DeleteServiceTokenV3Event {
     metadata: {
         name: string;
         isActive: boolean;
-        scopes: Array<Scope>;
+        role?: string;
         expiresAt?: Date;
     }
 }

frontend/src/hooks/api/serviceTokens/queries.tsx

@@ -85,8 +85,8 @@ export const useUpdateServiceTokenV3 = () => {
     mutationFn: async ({
       serviceTokenDataId,
       name,
+      role,
       isActive,
-      scopes,
       trustedIps,
       expiresIn,
       accessTokenTTL,
@@ -94,8 +94,8 @@ export const useUpdateServiceTokenV3 = () => {
     }) => {
       const { data: { serviceTokenData } } = await apiRequest.patch(`/api/v3/service-token/${serviceTokenDataId}`, {
         name,
+        role,
         isActive,
-        scopes,
         trustedIps,
         expiresIn,
         accessTokenTTL,

frontend/src/hooks/api/serviceTokens/types.ts

@@ -1,5 +1,3 @@
-import { Permission } from "./enums";
-
 export type ServiceTokenScope = {
   environment: string;
   secretPath: string;
@@ -38,12 +36,6 @@ export type DeleteServiceTokenRes = { serviceTokenData: ServiceToken };
 
 // --- v3
 
-export type ServiceTokenV3Scope = {
-  permissions: Permission[];
-  environment: string;
-  secretPath: string;
-};
-
 export type ServiceTokenV3TrustedIp = {
   _id: string;
   ipAddress: string;
@@ -54,13 +46,13 @@ export type ServiceTokenV3TrustedIp = {
 export type ServiceTokenDataV3 = {
   _id: string;
   name: string;
+  role: string;
   workspace: string;
   isActive: boolean;
   refreshTokenLastUsed?: string;
   accessTokenLastUsed?: string;
   refreshTokenUsageCount: number;
   accessTokenUsageCount: number;
-  scopes: ServiceTokenV3Scope[];
   trustedIps: ServiceTokenV3TrustedIp[];
   expiresAt?: string;
   accessTokenTTL: number;
@@ -71,9 +63,9 @@ export type ServiceTokenDataV3 = {
 
 export type CreateServiceTokenDataV3DTO = {
   name: string;
+  role?: string;
   workspaceId: string;
   publicKey: string;
-  scopes: ServiceTokenV3Scope[];
   trustedIps: {
     ipAddress: string;
   }[];
@@ -93,7 +85,7 @@ export type UpdateServiceTokenDataV3DTO = {
   serviceTokenDataId: string;
   isActive?: boolean;
   name?: string;
-  scopes?: ServiceTokenV3Scope[];
+  role?: string;
   trustedIps?: {
     ipAddress: string;
   }[];

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/ServiceTokenTab.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 
 import { 
     ServiceTokenSection, 
-    // ServiceTokenV3Section 
+    ServiceTokenV3Section 
 } from "./components";
 
 export const ServiceTokenTab = () => {
@@ -14,7 +14,7 @@ export const ServiceTokenTab = () => {
             animate={{ opacity: 1, translateX: 0 }}
             exit={{ opacity: 0, translateX: 30 }}
         >
-            {/* <ServiceTokenV3Section /> */}
+            <ServiceTokenV3Section />
             <ServiceTokenSection />
         </motion.div>
     );

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/AddServiceTokenV3Modal.tsx

@@ -29,22 +29,17 @@ import {
     Tabs,
     UpgradePlanModal} from "@app/components/v2";
 import {
+    useOrganization,
     useSubscription,
-    useWorkspace 
+    useWorkspace
 } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { 
     useCreateServiceTokenV3,
+    useGetRoles,
     useGetUserWsKey,
-    useUpdateServiceTokenV3
+    useUpdateServiceTokenV3} from "@app/hooks/api";
-} from "@app/hooks/api";
+import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types";
-import {
-    Permission
-} from "@app/hooks/api/serviceTokens/enums";
-import { 
-    ServiceTokenV3Scope, 
-    ServiceTokenV3TrustedIp 
-} from "@app/hooks/api/serviceTokens/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 enum TabSections {
@@ -61,13 +56,6 @@ const expirations = [
     { label: "12 months", value: "31104000" }
 ];
 
-const permissionsMap: {
-    [key: string]: Permission[]
-} = {
-    "read": [Permission.READ],
-    "readWrite": [Permission.READ, Permission.WRITE],
-}
-
 const schema = yup.object({
     name: yup.string().required("ST V3 name is required"),
     expiresIn: yup.string(),
@@ -82,24 +70,7 @@ const schema = yup.object({
             return !Number.isNaN(num) && num > 0 && String(num) === value;
         })
         .required("Access Token TTL is required"),
-    scopes: yup
+    role: yup.string().required("ST V3 role is required"),
-        .array(
-        yup.object({
-            permission: yup.string().oneOf(Object.keys(permissionsMap), "Invalid permission").required().label("Permission"),
-            environment: yup.string().max(50).required().label("Environment"),
-            secretPath: yup
-            .string()
-            .required()
-            .default("/")
-            .label("Secret Path")
-            .transform((val) =>
-                typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
-            )
-        })
-        )
-        .min(1)
-        .required()
-        .label("Scope"),
     trustedIps: yup
         .array(
         yup.object({
@@ -129,9 +100,18 @@ export const AddServiceTokenV3Modal = ({
     const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
 
     const { subscription } = useSubscription();
+    const { currentOrg } = useOrganization();
     const { currentWorkspace } = useWorkspace();
 
-    const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
+    const orgId = currentOrg?._id || "";
+    const workspaceId = currentWorkspace?._id || "";
+
+    const { data: roles } = useGetRoles({
+        orgId,
+        workspaceId
+    });
+    
+    const { data: latestFileKey } = useGetUserWsKey(workspaceId);
     const { mutateAsync: createMutateAsync } = useCreateServiceTokenV3();
     const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
     const { createNotification } = useNotificationContext();
@@ -145,11 +125,6 @@ export const AddServiceTokenV3Modal = ({
         defaultValues: {
             name: "",
             accessTokenTTL: "7200",
-            scopes: [{ 
-                permission: "read",
-                environment: currentWorkspace?.environments?.[0]?.slug,
-                secretPath: "/", 
-            }],
             trustedIps: [{
                 ipAddress: "0.0.0.0/0"
             }]
@@ -175,31 +150,18 @@ export const AddServiceTokenV3Modal = ({
         const serviceTokenData = popUp?.serviceTokenV3?.data as { 
             serviceTokenDataId: string;
             name: string;
-            scopes: ServiceTokenV3Scope[];
+            role: string;
             trustedIps: ServiceTokenV3TrustedIp[];
             accessTokenTTL: number;
             isRefreshTokenRotationEnabled: boolean;
         };
         
+        if (!roles?.length) return;
+    
         if (serviceTokenData) {
             reset({
                 name: serviceTokenData.name,
-                scopes: serviceTokenData.scopes.map(({
+                role: serviceTokenData.role,
-                    environment,
-                    secretPath,
-                    permissions
-                }: ServiceTokenV3Scope) => {
-                    let permission = "read";
-                    if (permissions.includes(Permission.WRITE)) {
-                        permission = "readWrite";
-                    }
-
-                    return ({
-                        environment,
-                        secretPath,
-                        permission
-                    })
-                }),
                 trustedIps: serviceTokenData.trustedIps.map(({ 
                     ipAddress, 
                     prefix 
@@ -215,26 +177,21 @@ export const AddServiceTokenV3Modal = ({
             reset({
                 name: "",
                 accessTokenTTL: "7200",
-                scopes: [{ 
+                role: roles[0].slug,
-                    permission: "read",
-                    environment: currentWorkspace?.environments?.[0]?.slug,
-                    secretPath: "/", 
-                }],
                 trustedIps: [{
                     ipAddress: "0.0.0.0/0"
                 }]
             });
         }
-    }, [popUp?.serviceTokenV3?.data]);
+    }, [popUp?.serviceTokenV3?.data, roles]);
     
-    const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
     const { fields: tokenTrustedIps, append: appendTrustedIp, remove: removeTrustedIp } = useFieldArray({ control, name: "trustedIps" });
     
     const onFormSubmit = async ({
         name,
         expiresIn,
         accessTokenTTL,
-        scopes,
+        role,
         trustedIps,
         isRefreshTokenRotationEnabled
     }: FormData) => {
@@ -242,25 +199,16 @@ export const AddServiceTokenV3Modal = ({
             const serviceTokenData = popUp?.serviceTokenV3?.data as { 
                 serviceTokenDataId: string;
                 name: string;
-                scopes: any;
+                role: string;
             };
             
-            // convert read/readWrite permission => ["read", "write"] format
-            const reformattedScopes = scopes.map((scope) => {
-                return ({
-                    environment: scope.environment,
-                    secretPath: scope.secretPath,
-                    permissions: permissionsMap[scope.permission]
-                });
-            });
-            
             if (serviceTokenData) {
                 // update
                 
                 await updateMutateAsync({
                     serviceTokenDataId: serviceTokenData.serviceTokenDataId,
                     name,
-                    scopes: reformattedScopes,
+                    role,
                     trustedIps,
                     expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
                     accessTokenTTL: Number(accessTokenTTL),
@@ -270,7 +218,7 @@ export const AddServiceTokenV3Modal = ({
                 handlePopUpToggle("serviceTokenV3", false);
             } else {
                 // create
-                if (!currentWorkspace?._id) return;
+                if (!workspaceId) return;
                 if (!latestFileKey) return;
                 
                 const pair = nacl.box.keyPair();
@@ -294,9 +242,9 @@ export const AddServiceTokenV3Modal = ({
 
                 const { refreshToken } = await createMutateAsync({
                     name,
-                    workspaceId: currentWorkspace._id,
+                    role,
+                    workspaceId,
                     publicKey,
-                    scopes: reformattedScopes,
                     trustedIps,
                     expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
                     accessTokenTTL: Number(accessTokenTTL),
@@ -385,102 +333,32 @@ export const AddServiceTokenV3Modal = ({
                                             </FormControl>
                                         )}
                                     />
-                                    {tokenScopes.map(({ id }, index) => (
+                                    <Controller
-                                        <div className="flex items-end space-x-2 mb-3" key={id}>
+                                        control={control}
-                                            <Controller
+                                        name="role"
-                                                control={control}
+                                        defaultValue=""
-                                                name={`scopes.${index}.permission`}
+                                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                                            <FormControl
-                                                    <FormControl
+                                                label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Role`}
-                                                        className="mb-0"
+                                                errorText={error?.message}
-                                                        label={index === 0 ? "Permission" : undefined}
+                                                isError={Boolean(error)}
-                                                        errorText={error?.message}
+                                                className="mt-4"
-                                                        isError={Boolean(error)}
+                                            >
-                                                    >
+                                                <Select
-                                                    <Select
+                                                    defaultValue={field.value}
-                                                        defaultValue={field.value}
+                                                    {...field}
-                                                        {...field}
+                                                    onValueChange={(e) => onChange(e)}
-                                                        onValueChange={(e) => onChange(e)}
+                                                    className="w-full"
-                                                        className="w-36"
+                                                >
-                                                    >
+                                                    {(roles || []).map(({ name, slug }) => (
-                                                        <SelectItem value="read" key="st-v3-read">
+                                                        <SelectItem value={slug} key={`st-role-${slug}`}>
-                                                            Read
-                                                        </SelectItem>
-                                                        <SelectItem value="readWrite" key="st-v3-write">
-                                                            Read &amp; Write
-                                                        </SelectItem>
-                                                    </Select>
-                                                    </FormControl>
-                                                )}
-                                            />
-                                            <Controller
-                                                control={control}
-                                                name={`scopes.${index}.environment`}
-                                                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                                    <FormControl
-                                                        className="mb-0"
-                                                        label={index === 0 ? "Environment" : undefined}
-                                                        errorText={error?.message}
-                                                        isError={Boolean(error)}
-                                                    >
-                                                    <Select
-                                                        defaultValue={field.value}
-                                                        {...field}
-                                                        onValueChange={(e) => onChange(e)}
-                                                        className="w-36"
-                                                    >
-                                                        {currentWorkspace?.environments.map(({ name, slug }) => (
-                                                        <SelectItem value={slug} key={slug}>
                                                             {name}
                                                         </SelectItem>
-                                                        ))}
+                                                    ))}
-                                                    </Select>
+                                                </Select>
-                                                    </FormControl>
+                                            </FormControl>
-                                                )}
+                                        )}
-                                            />
+                                    />
-                                            <Controller
-                                                control={control}
-                                                name={`scopes.${index}.secretPath`}
-                                                defaultValue="/"
-                                                render={({ field, fieldState: { error } }) => (
-                                                    <FormControl
-                                                        className="mb-0 flex-grow"
-                                                        label={index === 0 ? "Secrets Path" : undefined}
-                                                        isError={Boolean(error)}
-                                                        errorText={error?.message}
-                                                    >
-                                                    <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
-                                                    </FormControl>
-                                                )}
-                                            />
-                                            <IconButton
-                                                onClick={() => remove(index)}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="p-3"
-                                                >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        </div>
-                                    ))}
-                                    <div className="my-4 ml-1">
-                                        <Button
-                                            variant="outline_bg"
-                                            onClick={() =>
-                                                append({
-                                                    permission: "read",
-                                                    environment: currentWorkspace?.environments?.[0]?.slug || "",
-                                                    secretPath: "/"
-                                                })
-                                            }
-                                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                                            size="xs"
-                                        >
-                                            Add Scope
-                                        </Button>
-                                    </div>
                                     <Controller
                                         control={control}
                                         name="expiresIn"

frontend/src/views/Project/MembersPage/components/ServiceTokenTab/components/ServiceTokenV3Section/ServiceTokenV3Table.tsx

@@ -22,8 +22,7 @@ import {
     useGetWorkspaceServiceTokenDataV3,
     useUpdateServiceTokenV3
 } from "@app/hooks/api";
-import { Permission } from "@app/hooks/api/serviceTokens/enums"
+import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
-import { ServiceTokenV3Scope, ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -32,7 +31,7 @@ type Props = {
       data?: {
         serviceTokenDataId?: string;
         name?: string;
-        scopes?: ServiceTokenV3Scope[];
+        role?: string;
         trustedIps?: ServiceTokenV3TrustedIp[];
         accessTokenTTL?: number;
         isRefreshTokenRotationEnabled?: boolean;
@@ -81,7 +80,7 @@ export const ServiceTokenV3Table = ({
                     <Tr>
                         <Th>Name</Th>
                         <Th>Status</Th>
-                        <Th>Scopes</Th>
+                        <Th>Role</Th>
                         <Th>Trusted IPs</Th>
                         <Th>Access Token TTL</Th>
                         <Th>Created At</Th>
@@ -98,7 +97,7 @@ export const ServiceTokenV3Table = ({
                         _id,
                         name,
                         isActive,
-                        scopes,
+                        role,
                         trustedIps,
                         createdAt,
                         expiresAt,
@@ -128,26 +127,7 @@ export const ServiceTokenV3Table = ({
                                         )}
                                     </ProjectPermissionCan>
                                 </Td>
-                                <Td>
+                                <Td>{role}</Td> 
-                                    {scopes.map((scope) => {
-                                        let permissionText = "read"
-                                        if (
-                                            scope.permissions.includes(Permission.WRITE) &&
-                                            scope.permissions.includes(Permission.READ)
-                                        ) {
-                                            permissionText = "readWrite";
-                                        }
-                                        
-                                        return (
-                                            <p key={`service-token-${_id}-scope-${scope.environment}-${scope.secretPath}`}>
-                                                <span className="font-bold">
-                                                    {permissionText}
-                                                </span>
-                                                {` @${scope.environment} - ${scope.secretPath}`}
-                                            </p>
-                                        );
-                                    })}
-                                </Td> 
                                 <Td>
                                     {trustedIps.map(({
                                         _id: trustedIpId,
@@ -175,7 +155,7 @@ export const ServiceTokenV3Table = ({
                                                     handlePopUpOpen("serviceTokenV3", {
                                                         serviceTokenDataId: _id,
                                                         name,
-                                                        scopes,
+                                                        role,
                                                         trustedIps,
                                                         accessTokenTTL,
                                                         isRefreshTokenRotationEnabled

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -1,375 +0,0 @@
-import crypto from "crypto";
-
-import { useEffect, useState } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { faCheck, faCopy, faPlus, faTrashCan } 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 {
-  decryptAssymmetric,
-  encryptSymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import {
-  Button,
-  Checkbox,
-  FormControl,
-  IconButton,
-  Input,
-  Modal,
-  ModalClose,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
-import { useCreateServiceToken, useGetUserWsKey } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-const apiTokenExpiry = [
-  { 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: null }
-];
-
-const schema = yup.object({
-  name: yup.string().max(100).required().label("Service Token Name"),
-  scopes: yup
-    .array(
-      yup.object({
-        environment: yup.string().max(50).required().label("Environment"),
-        secretPath: yup
-          .string()
-          .required()
-          .default("/")
-          .label("Secret Path")
-          .transform((val) =>
-            typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
-          )
-      })
-    )
-    .min(1)
-    .required()
-    .label("Scope"),
-  expiresIn: yup.string().optional().label("Service Token Expiration"),
-  permissions: yup
-    .object()
-    .shape({
-      read: yup.boolean().required(),
-      write: yup.boolean().required()
-    })
-    .defined()
-    .required()
-});
-
-export type FormData = yup.InferType<typeof schema>;
-
-type Props = {
-  popUp: UsePopUpState<["createAPIToken"]>;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
-};
-
-export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const { t } = useTranslation();
-  const { createNotification } = useNotificationContext();
-  const { currentWorkspace } = useWorkspace();
-  const {
-    control,
-    reset,
-    handleSubmit,
-    formState: { isSubmitting }
-  } = useForm<FormData>({
-    resolver: yupResolver(schema),
-    defaultValues: {
-      scopes: [{ 
-        secretPath: "/", 
-        environment: currentWorkspace?.environments?.[0]?.slug 
-      }]
-    }
-  });
-
-  const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
-
-  const [newToken, setToken] = useState("");
-  const [isTokenCopied, setIsTokenCopied] = useToggle(false);
-
-  const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
-  const createServiceToken = useCreateServiceToken();
-  const hasServiceToken = Boolean(newToken);
-
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-    if (isTokenCopied) {
-      timer = setTimeout(() => setIsTokenCopied.off(), 2000);
-    }
-
-    return () => clearTimeout(timer);
-  }, [isTokenCopied]);
-
-  const copyTokenToClipboard = () => {
-    navigator.clipboard.writeText(newToken);
-    setIsTokenCopied.on();
-  };
-
-  const onFormSubmit = async ({ name, scopes, expiresIn, permissions }: FormData) => {
-    try {
-      if (!currentWorkspace?._id) return;
-      if (!latestFileKey) return;
-
-      const key = decryptAssymmetric({
-        ciphertext: latestFileKey.encryptedKey,
-        nonce: latestFileKey.nonce,
-        publicKey: latestFileKey.sender.publicKey,
-        privateKey: localStorage.getItem("PRIVATE_KEY") as string
-      });
-
-      const randomBytes = crypto.randomBytes(16).toString("hex");
-
-      const { ciphertext, iv, tag } = encryptSymmetric({
-        plaintext: key,
-        key: randomBytes
-      });
-      
-      const { serviceToken } = await createServiceToken.mutateAsync({
-        encryptedKey: ciphertext,
-        iv,
-        tag,
-        scopes,
-        expiresIn: Number(expiresIn),
-        name,
-        workspaceId: currentWorkspace._id,
-        randomBytes,
-        permissions: Object.entries(permissions)
-          .filter(([, permissionsValue]) => permissionsValue)
-          .map(([permissionsKey]) => permissionsKey)
-      });
-
-      setToken(serviceToken);
-      createNotification({
-        text: "Successfully created a service token",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to create a service token",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <Modal
-      isOpen={popUp?.createAPIToken?.isOpen}
-      onOpenChange={(open) => {
-        handlePopUpToggle("createAPIToken", open);
-        reset();
-        setToken("");
-      }}
-    >
-      <ModalContent
-        title={
-          t("section.token.add-dialog.title", {
-            target: currentWorkspace?.name
-          }) as string
-        }
-        subTitle={t("section.token.add-dialog.description") as string}
-      >
-        {!hasServiceToken ? (
-          <form onSubmit={handleSubmit(onFormSubmit)}>
-            <Controller
-              control={control}
-              name="name"
-              defaultValue=""
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label={t("section.token.add-dialog.name")}
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input {...field} placeholder="Type your token name" />
-                </FormControl>
-              )}
-            />
-            {tokenScopes.map(({ id }, index) => (
-              <div className="mb-3 flex items-end space-x-2" key={id}>
-                <Controller
-                  control={control}
-                  name={`scopes.${index}.environment`}
-                  defaultValue={currentWorkspace?.environments?.[0]?.slug}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      className="mb-0"
-                      label={index === 0 ? "Environment" : undefined}
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full"
-                      >
-                        {currentWorkspace?.environments.map(({ name, slug }) => (
-                          <SelectItem value={slug} key={slug}>
-                            {name}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name={`scopes.${index}.secretPath`}
-                  defaultValue="/"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      className="mb-0 flex-grow"
-                      label={index === 0 ? "Secrets Path" : undefined}
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
-                    </FormControl>
-                  )}
-                />
-                <IconButton
-                  className="p-3"
-                  ariaLabel="remove"
-                  colorSchema="danger"
-                  onClick={() => remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrashCan} size="sm" />
-                </IconButton>
-              </div>
-            ))}
-            <div className="my-4 ml-1">
-              <Button
-                variant="outline_bg"
-                onClick={() =>
-                  append({
-                    environment: currentWorkspace?.environments?.[0]?.slug || "",
-                    secretPath: ""
-                  })
-                }
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                size="xs"
-              >
-                Add Scope
-              </Button>
-            </div>
-            <Controller
-              control={control}
-              name="expiresIn"
-              defaultValue={String(apiTokenExpiry?.[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"
-                  >
-                    {apiTokenExpiry.map(({ label, value }) => (
-                      <SelectItem value={String(value || "")} key={label}>
-                        {label}
-                      </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 (optional)",
-                    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>
-        ) : (
-          <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">{newToken}</p>
-            <IconButton
-              ariaLabel="copy icon"
-              colorSchema="secondary"
-              className="group relative"
-              onClick={copyTokenToClipboard}
-            >
-              <FontAwesomeIcon icon={isTokenCopied ? 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">
-                {t("common.click-to-copy")}
-              </span>
-            </IconButton>
-          </div>
-        )}
-      </ModalContent>
-    </Modal>
-  );
-};

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

@@ -1,90 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
-import { usePopUp } from "@app/hooks";
-import { useDeleteServiceToken } from "@app/hooks/api";
-
-import { AddServiceTokenModal } from "./AddServiceTokenModal";
-import { ServiceTokenTable } from "./ServiceTokenTable";
-
-type DeleteModalData = { name: string; id: string };
-
-export const ServiceTokenSection = withProjectPermission(
-  () => {
-    const { t } = useTranslation();
-    const { createNotification } = useNotificationContext();
-    const deleteServiceToken = useDeleteServiceToken();
-
-    const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-      "createAPIToken",
-      "deleteAPITokenConfirmation"
-    ] as const);
-
-    const onDeleteApproved = async () => {
-      try {
-        deleteServiceToken.mutateAsync(
-          (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.id
-        );
-        createNotification({
-          text: "Successfully deleted service token",
-          type: "success"
-        });
-
-        handlePopUpClose("deleteAPITokenConfirmation");
-      } catch (err) {
-        console.error(err);
-        createNotification({
-          text: "Failed to delete service token",
-          type: "error"
-        });
-      }
-    };
-
-    return (
-      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-2 flex justify-between">
-          <p className="text-xl font-semibold text-mineshaft-100">
-            Service Tokens
-          </p>
-          <ProjectPermissionCan
-            I={ProjectPermissionActions.Create}
-            a={ProjectPermissionSub.ServiceTokens}
-          >
-            {(isAllowed) => (
-              <Button
-                colorSchema="secondary"
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => {
-                  handlePopUpOpen("createAPIToken");
-                }}
-                isDisabled={!isAllowed}
-              >
-                Create token
-              </Button>
-            )}
-          </ProjectPermissionCan>
-        </div>
-        <p className="mb-8 text-gray-400">{t("section.token.service-tokens-description")}</p>
-        <ServiceTokenTable handlePopUpOpen={handlePopUpOpen} />
-        <AddServiceTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
-        <DeleteActionModal
-          isOpen={popUp.deleteAPITokenConfirmation.isOpen}
-          title={`Delete ${
-            (popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name || " "
-          } service token?`}
-          onChange={(isOpen) => handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
-          deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
-          onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
-          onDeleteApproved={onDeleteApproved}
-        />
-      </div>
-    );
-  },
-  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.ServiceTokens }
-);

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -1,108 +0,0 @@
-import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  EmptyState,
-  IconButton,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useGetUserWsServiceTokens } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteAPITokenConfirmation"]>,
-    {
-      name,
-      id
-    }: {
-      name: string;
-      id: string;
-    }
-  ) => void;
-};
-
-export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
-  const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useGetUserWsServiceTokens({
-    workspaceID: currentWorkspace?._id || ""
-  });
-
-  return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th>Token Name</Th>
-            <Th>Environment - Secret Path</Th>
-            <Th>Valid Until</Th>
-            <Th aria-label="button" />
-          </Tr>
-        </THead>
-        <TBody>
-          {isLoading && <TableSkeleton columns={4} innerKey="project-service-tokens" />}
-          {!isLoading &&
-            data &&
-            data.map((row) => (
-              <Tr key={row._id}>
-                <Td>{row.name}</Td>
-                <Td>
-                  <div className="mb-2 flex flex-col flex-wrap space-y-1">
-                    {row?.scopes.map(({ secretPath, environment }) => (
-                      <div
-                        key={`${row._id}-${environment}-${secretPath}`}
-                        className="inline-flex items-center space-x-1 rounded-md border border-mineshaft-600 p-1 px-2"
-                      >
-                        <div className="mr-2 border-r border-mineshaft-600 pr-2">{environment}</div>
-                        <FontAwesomeIcon icon={faFolder} size="sm" />
-                        <span className="pl-2">{secretPath}</span>
-                      </div>
-                    ))}
-                  </div>
-                </Td>
-                <Td>{row.expiresAt && new Date(row.expiresAt).toUTCString()}</Td>
-                <Td>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Delete}
-                    a={ProjectPermissionSub.ServiceTokens}
-                  >
-                    {(isAllowed) => (
-                      <IconButton
-                        onClick={() =>
-                          handlePopUpOpen("deleteAPITokenConfirmation", {
-                            name: row.name,
-                            id: row._id
-                          })
-                        }
-                        colorSchema="danger"
-                        ariaLabel="delete"
-                        isDisabled={!isAllowed}
-                      >
-                        <FontAwesomeIcon icon={faTrashCan} />
-                      </IconButton>
-                    )}
-                  </ProjectPermissionCan>
-                </Td>
-              </Tr>
-            ))}
-          {!isLoading && data && data?.length === 0 && (
-            <Tr>
-              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
-                <EmptyState title="No service tokens found" icon={faKey} />
-              </Td>
-            </Tr>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
-  );
-};

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/index.tsx

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

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

@@ -1,657 +0,0 @@
-import { useEffect, useState } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form"; 
-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,
-    encryptAssymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import {
-    Button,
-    FormControl,
-    IconButton,
-    Input,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem,
-    Switch,
-    Tab,
-    TabList,
-    TabPanel,
-    Tabs,
-    UpgradePlanModal} from "@app/components/v2";
-import {
-    useSubscription,
-    useWorkspace 
-} from "@app/context";
-import { useToggle } from "@app/hooks";
-import { 
-    useCreateServiceTokenV3,
-    useGetUserWsKey,
-    useUpdateServiceTokenV3
-} from "@app/hooks/api";
-import {
-    Permission
-} from "@app/hooks/api/serviceTokens/enums";
-import { 
-    ServiceTokenV3Scope, 
-    ServiceTokenV3TrustedIp 
-} 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" },
-    { label: "7 days", value: "604800" },
-    { label: "1 month", value: "2592000" },
-    { label: "6 months", value: "15552000" },
-    { label: "12 months", value: "31104000" }
-];
-
-const permissionsMap: {
-    [key: string]: Permission[]
-} = {
-    "read": [Permission.READ],
-    "readWrite": [Permission.READ, Permission.WRITE],
-}
-
-const schema = yup.object({
-    name: yup.string().required("ST V3 name is required"),
-    expiresIn: yup.string(),
-    accessTokenTTL: yup
-        .string()
-        .test("is-positive-integer", "Access Token TTL must be a positive integer", (value) => {
-            if (typeof value === "undefined") {
-                return false;
-            }
-            
-            const num = parseInt(value, 10);
-            return !Number.isNaN(num) && num > 0 && String(num) === value;
-        })
-        .required("Access Token TTL is required"),
-    scopes: yup
-        .array(
-        yup.object({
-            permission: yup.string().oneOf(Object.keys(permissionsMap), "Invalid permission").required().label("Permission"),
-            environment: yup.string().max(50).required().label("Environment"),
-            secretPath: yup
-            .string()
-            .required()
-            .default("/")
-            .label("Secret Path")
-            .transform((val) =>
-                typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
-            )
-        })
-        )
-        .min(1)
-        .required()
-        .label("Scope"),
-    trustedIps: yup
-        .array(
-        yup.object({
-            ipAddress: yup.string().max(50).required().label("IP Address")
-        })
-        )
-        .min(1)
-        .required()
-        .label("Trusted IP"),
-    isRefreshTokenRotationEnabled: yup.boolean().default(false)
-}).required();
-
-export type FormData = yup.InferType<typeof schema>;
-
-type Props = {
-  popUp: UsePopUpState<["serviceTokenV3", "upgradePlan"]>;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
-  handlePopUpToggle: (popUpName: keyof UsePopUpState<["serviceTokenV3", "upgradePlan"]>, state?: boolean) => void;
-};
-
-export const AddServiceTokenV3Modal = ({
-    popUp,
-    handlePopUpOpen,
-    handlePopUpToggle
-}: Props) => {
-    const [newServiceTokenJSON, setNewServiceTokenJSON] = useState("");
-    const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
-
-    const { subscription } = useSubscription();
-    const { currentWorkspace } = useWorkspace();
-
-    const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
-    const { mutateAsync: createMutateAsync } = useCreateServiceTokenV3();
-    const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
-    const { createNotification } = useNotificationContext();
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            name: "",
-            accessTokenTTL: "7200",
-            scopes: [{ 
-                permission: "read",
-                environment: currentWorkspace?.environments?.[0]?.slug,
-                secretPath: "/", 
-            }],
-            trustedIps: [{
-                ipAddress: "0.0.0.0/0"
-            }]
-        }
-    });
-
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-
-        if (isServiceTokenJSONCopied) {
-            timer = setTimeout(() => setIsServiceTokenJSONCopied.off(), 2000);
-        }
-
-        return () => clearTimeout(timer);
-    }, [setIsServiceTokenJSONCopied]);
-
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newServiceTokenJSON);
-        setIsServiceTokenJSONCopied.on();
-    };
-    
-    useEffect(() => {
-        const serviceTokenData = popUp?.serviceTokenV3?.data as { 
-            serviceTokenDataId: string;
-            name: string;
-            scopes: ServiceTokenV3Scope[];
-            trustedIps: ServiceTokenV3TrustedIp[];
-            accessTokenTTL: number;
-            isRefreshTokenRotationEnabled: boolean;
-        };
-        
-        if (serviceTokenData) {
-            reset({
-                name: serviceTokenData.name,
-                scopes: serviceTokenData.scopes.map(({
-                    environment,
-                    secretPath,
-                    permissions
-                }: ServiceTokenV3Scope) => {
-                    let permission = "read";
-                    if (permissions.includes(Permission.WRITE)) {
-                        permission = "readWrite";
-                    }
-
-                    return ({
-                        environment,
-                        secretPath,
-                        permission
-                    })
-                }),
-                trustedIps: serviceTokenData.trustedIps.map(({ 
-                    ipAddress, 
-                    prefix 
-                }: ServiceTokenV3TrustedIp) => {
-                    return ({
-                        ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
-                    });
-                }),
-                accessTokenTTL: String(serviceTokenData.accessTokenTTL),
-                isRefreshTokenRotationEnabled: serviceTokenData.isRefreshTokenRotationEnabled
-            });
-        } else {
-            reset({
-                name: "",
-                accessTokenTTL: "7200",
-                scopes: [{ 
-                    permission: "read",
-                    environment: currentWorkspace?.environments?.[0]?.slug,
-                    secretPath: "/", 
-                }],
-                trustedIps: [{
-                    ipAddress: "0.0.0.0/0"
-                }]
-            });
-        }
-    }, [popUp?.serviceTokenV3?.data]);
-    
-    const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
-    const { fields: tokenTrustedIps, append: appendTrustedIp, remove: removeTrustedIp } = useFieldArray({ control, name: "trustedIps" });
-    
-    const onFormSubmit = async ({
-        name,
-        expiresIn,
-        accessTokenTTL,
-        scopes,
-        trustedIps,
-        isRefreshTokenRotationEnabled
-    }: FormData) => {
-        try {
-            const serviceTokenData = popUp?.serviceTokenV3?.data as { 
-                serviceTokenDataId: string;
-                name: string;
-                scopes: any;
-            };
-            
-            // convert read/readWrite permission => ["read", "write"] format
-            const reformattedScopes = scopes.map((scope) => {
-                return ({
-                    environment: scope.environment,
-                    secretPath: scope.secretPath,
-                    permissions: permissionsMap[scope.permission]
-                });
-            });
-            
-            if (serviceTokenData) {
-                // update
-                
-                await updateMutateAsync({
-                    serviceTokenDataId: serviceTokenData.serviceTokenDataId,
-                    name,
-                    scopes: reformattedScopes,
-                    trustedIps,
-                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
-                    accessTokenTTL: Number(accessTokenTTL),
-                    isRefreshTokenRotationEnabled
-                });
-                
-                handlePopUpToggle("serviceTokenV3", false);
-            } else {
-                // create
-                if (!currentWorkspace?._id) return;
-                if (!latestFileKey) return;
-                
-                const pair = nacl.box.keyPair();
-                const secretKeyUint8Array = pair.secretKey;
-                const publicKeyUint8Array = pair.publicKey;
-                const privateKey = encodeBase64(secretKeyUint8Array);
-                const publicKey = encodeBase64(publicKeyUint8Array);
-                
-                const key = decryptAssymmetric({
-                    ciphertext: latestFileKey.encryptedKey,
-                    nonce: latestFileKey.nonce,
-                    publicKey: latestFileKey.sender.publicKey,
-                    privateKey: localStorage.getItem("PRIVATE_KEY") as string
-                });
-                
-                const { ciphertext, nonce } = encryptAssymmetric({
-                    plaintext: key,
-                    publicKey,
-                    privateKey: localStorage.getItem("PRIVATE_KEY") as string
-                });
-
-                const { refreshToken } = await createMutateAsync({
-                    name,
-                    workspaceId: currentWorkspace._id,
-                    publicKey,
-                    scopes: reformattedScopes,
-                    trustedIps,
-                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
-                    accessTokenTTL: Number(accessTokenTTL),
-                    encryptedKey: ciphertext,
-                    nonce,
-                    isRefreshTokenRotationEnabled
-                });
-                
-                const downloadData = {
-                    public_key: publicKey,
-                    private_key: privateKey,
-                    refresh_token: refreshToken
-                };
-
-                const serviceTokenJSON = JSON.stringify(downloadData, null, 2);
-                setNewServiceTokenJSON(serviceTokenJSON);
-
-                const blob = new Blob([serviceTokenJSON], { type: "application/json" });
-                const href = URL.createObjectURL(blob);
-                const link = document.createElement("a");
-                link.href = href;
-                link.download = `infisical_${name}.json`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-            }
-            
-            createNotification({
-                text: `Successfully ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
-                type: "success"
-            });
-
-            reset();
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
-                type: "error"
-            });
-        }
-    }
-
-    const hasServiceTokenJSON = Boolean(newServiceTokenJSON);
-    
-    return (
-        <Modal
-            isOpen={popUp?.serviceTokenV3?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("serviceTokenV3", isOpen);
-                reset();
-                setNewServiceTokenJSON("");
-            }}
-        >
-            <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=""
-                                        name="name"
-                                        render={({ field, fieldState: { error } }) => (
-                                            <FormControl
-                                                label="Name"
-                                                isError={Boolean(error)}
-                                                errorText={error?.message}
-                                            >
-                                            <Input 
-                                                {...field} 
-                                                placeholder="My ST V3"
-                                            />
-                                            </FormControl>
-                                        )}
-                                    />
-                                    {tokenScopes.map(({ id }, index) => (
-                                        <div className="flex items-end space-x-2 mb-3" key={id}>
-                                            <Controller
-                                                control={control}
-                                                name={`scopes.${index}.permission`}
-                                                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                                    <FormControl
-                                                        className="mb-0"
-                                                        label={index === 0 ? "Permission" : undefined}
-                                                        errorText={error?.message}
-                                                        isError={Boolean(error)}
-                                                    >
-                                                    <Select
-                                                        defaultValue={field.value}
-                                                        {...field}
-                                                        onValueChange={(e) => onChange(e)}
-                                                        className="w-36"
-                                                    >
-                                                        <SelectItem value="read" key="st-v3-read">
-                                                            Read
-                                                        </SelectItem>
-                                                        <SelectItem value="readWrite" key="st-v3-write">
-                                                            Read &amp; Write
-                                                        </SelectItem>
-                                                    </Select>
-                                                    </FormControl>
-                                                )}
-                                            />
-                                            <Controller
-                                                control={control}
-                                                name={`scopes.${index}.environment`}
-                                                render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                                                    <FormControl
-                                                        className="mb-0"
-                                                        label={index === 0 ? "Environment" : undefined}
-                                                        errorText={error?.message}
-                                                        isError={Boolean(error)}
-                                                    >
-                                                    <Select
-                                                        defaultValue={field.value}
-                                                        {...field}
-                                                        onValueChange={(e) => onChange(e)}
-                                                        className="w-36"
-                                                    >
-                                                        {currentWorkspace?.environments.map(({ name, slug }) => (
-                                                        <SelectItem value={slug} key={slug}>
-                                                            {name}
-                                                        </SelectItem>
-                                                        ))}
-                                                    </Select>
-                                                    </FormControl>
-                                                )}
-                                            />
-                                            <Controller
-                                                control={control}
-                                                name={`scopes.${index}.secretPath`}
-                                                defaultValue="/"
-                                                render={({ field, fieldState: { error } }) => (
-                                                    <FormControl
-                                                        className="mb-0 flex-grow"
-                                                        label={index === 0 ? "Secrets Path" : undefined}
-                                                        isError={Boolean(error)}
-                                                        errorText={error?.message}
-                                                    >
-                                                    <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
-                                                    </FormControl>
-                                                )}
-                                            />
-                                            <IconButton
-                                                onClick={() => remove(index)}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="p-3"
-                                                >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        </div>
-                                    ))}
-                                    <div className="my-4 ml-1">
-                                        <Button
-                                            variant="outline_bg"
-                                            onClick={() =>
-                                                append({
-                                                    permission: "read",
-                                                    environment: currentWorkspace?.environments?.[0]?.slug || "",
-                                                    secretPath: "/"
-                                                })
-                                            }
-                                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                                            size="xs"
-                                        >
-                                            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
-                                                control={control}
-                                                name={`trustedIps.${index}.ipAddress`}
-                                                defaultValue="0.0.0.0/0"
-                                                render={({ field, fieldState: { error } }) => {
-                                                    return (
-                                                        <FormControl
-                                                            className="mb-0 flex-grow"
-                                                            label={index === 0 ? "Trusted IP" : undefined}
-                                                            isError={Boolean(error)}
-                                                            errorText={error?.message}
-                                                        >
-                                                        <Input 
-                                                            value={field.value}
-                                                            onChange={(e) => {
-                                                                if (subscription?.ipAllowlisting) {
-                                                                    field.onChange(e);
-                                                                    return;
-                                                                }
-                                                                
-                                                                handlePopUpOpen("upgradePlan");
-                                                            }}
-                                                            placeholder="123.456.789.0" 
-                                                        />
-                                                        </FormControl>
-                                                    );
-                                                }}
-                                            />
-                                            <IconButton
-                                                onClick={() => {
-                                                    if (subscription?.ipAllowlisting) {
-                                                        removeTrustedIp(index);
-                                                        return;
-                                                    }
-                                                    
-                                                    handlePopUpOpen("upgradePlan");
-                                                }}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="p-3"
-                                            >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        </div>
-                                    ))}
-                                    <div className="my-4 ml-1">
-                                        <Button
-                                            variant="outline_bg"
-                                            onClick={() => {
-                                                if (subscription?.ipAllowlisting) {
-                                                    appendTrustedIp({
-                                                        ipAddress: "0.0.0.0/0"
-                                                    })
-                                                    return;
-                                                }
-
-                                                handlePopUpOpen("upgradePlan");
-                                            }}
-                                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                                            size="xs"
-                                        >
-                                            Add IP Address
-                                        </Button>
-                                    </div>
-                                    <Controller
-                                        control={control}
-                                        defaultValue="7200"
-                                        name="accessTokenTTL"
-                                        render={({ field, fieldState: { error } }) => (
-                                            <FormControl
-                                                label="Access Token TTL (seconds)"
-                                                isError={Boolean(error)}
-                                                errorText={error?.message}
-                                            >
-                                            <Input 
-                                                {...field} 
-                                                placeholder="7200"
-                                            />
-                                            </FormControl>
-                                        )}
-                                    />
-                                    <div className="mt-8">
-                                        <Controller
-                                            control={control}
-                                            name="isRefreshTokenRotationEnabled"
-                                            render={({ field: { onChange, value } }) => (
-                                                <Switch
-                                                    id="label-refresh-token-rotation"
-                                                    onCheckedChange={(isChecked) => onChange(isChecked)}
-                                                    isChecked={value}
-                                                >
-                                                    Refresh Token Rotation
-                                                </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>
-                            </TabPanel>
-                        </Tabs>
-                        <div className="flex items-center">
-                            <Button
-                                className="mr-4"
-                                size="sm"
-                                type="submit"
-                                isLoading={isSubmitting}
-                                isDisabled={isSubmitting}
-                            >
-                                {popUp?.serviceTokenV3?.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">{newServiceTokenJSON}</p>
-                        <IconButton
-                            ariaLabel="copy icon"
-                            colorSchema="secondary"
-                            className="group relative"
-                            onClick={copyTokenToClipboard}
-                        >
-                            <FontAwesomeIcon icon={isServiceTokenJSONCopied ? 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>
-                )}
-                <UpgradePlanModal
-                    isOpen={popUp?.upgradePlan?.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-                    text="You can use IP allowlisting if you switch to Infisical's Pro plan."
-                />
-            </ModalContent>
-        </Modal>
-    );
-}

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

@@ -1,98 +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 { ProjectPermissionCan } from "@app/components/permissions";
-import { 
-  Button,
-  DeleteActionModal
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
-import {
-  useDeleteServiceTokenV3
-} from "@app/hooks/api";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-import { AddServiceTokenV3Modal } from "./AddServiceTokenV3Modal";
-import { ServiceTokenV3Table } from "./ServiceTokenV3Table";
-
-export const ServiceTokenV3Section = withProjectPermission(
-  () => {
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: deleteMutateAsync } = useDeleteServiceTokenV3();
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-      "serviceTokenV3",
-      "deleteServiceTokenV3",
-      "upgradePlan"
-    ] as const);
-    
-    const onDeleteServiceTokenDataSubmit = async (serviceTokenDataId: string) => {
-      try {
-        await deleteMutateAsync({
-            serviceTokenDataId 
-        });
-        createNotification({
-            text: "Successfully deleted service token v3",
-            type: "success"
-        });
-        
-        handlePopUpClose("deleteServiceTokenV3");
-      } catch (err) {
-          console.error(err);
-          createNotification({
-              text: "Failed to delete service token v3",
-              type: "error"
-          });
-      }
-    }
-
-    return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-          <div className="flex justify-between mb-8">
-            <p className="text-xl font-semibold text-mineshaft-100">
-              Service Tokens V3 (Beta)
-            </p>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Create}
-              a={ProjectPermissionSub.ServiceTokens}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                  onClick={() => handlePopUpOpen("serviceTokenV3")}
-                  isDisabled={!isAllowed}
-                >
-                  Create token
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-          <ServiceTokenV3Table 
-            handlePopUpOpen={handlePopUpOpen}
-          />
-          <AddServiceTokenV3Modal 
-            popUp={popUp}
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-          />
-          <DeleteActionModal
-            isOpen={popUp.deleteServiceTokenV3.isOpen}
-            title={`Are you sure want to delete ${
-              (popUp?.deleteServiceTokenV3?.data as { name: string })?.name || ""
-            }?`}
-            onChange={(isOpen) => handlePopUpToggle("deleteServiceTokenV3", isOpen)}
-            deleteKey="confirm"
-            onDeleteApproved={() => 
-              onDeleteServiceTokenDataSubmit(
-                (popUp?.deleteServiceTokenV3?.data as { serviceTokenDataId: string })?.serviceTokenDataId
-              )
-            }
-          />
-        </div>
-    );
-  },
-  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.ServiceTokens }
-);

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

@@ -1,232 +0,0 @@
-import { faKey, faPencil,faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-    EmptyState,
-    IconButton,
-    Switch,
-    Table,
-    TableContainer,
-    TableSkeleton,
-    TBody,
-    Td,
-    Th,
-    THead,
-    Tr
-} from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub , useWorkspace } from "@app/context";
-import {
-    useGetWorkspaceServiceTokenDataV3,
-    useUpdateServiceTokenV3
-} from "@app/hooks/api";
-import { Permission } from "@app/hooks/api/serviceTokens/enums"
-import { ServiceTokenV3Scope, ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteServiceTokenV3", "serviceTokenV3"]>,
-      data?: {
-        serviceTokenDataId?: string;
-        name?: string;
-        scopes?: ServiceTokenV3Scope[];
-        trustedIps?: ServiceTokenV3TrustedIp[];
-        accessTokenTTL?: number;
-        isRefreshTokenRotationEnabled?: boolean;
-      }
-    ) => void;
-  };
-
-export const ServiceTokenV3Table = ({
-    handlePopUpOpen
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const { currentWorkspace } = useWorkspace();
-    const { data, isLoading } = useGetWorkspaceServiceTokenDataV3(currentWorkspace?._id || "");
-    const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
-    
-    const handleToggleServiceTokenDataStatus = async ({
-        serviceTokenDataId,
-        isActive
-    }: {
-        serviceTokenDataId: string;
-        isActive: boolean;
-    }) => {
-        try {
-            await updateMutateAsync({
-                serviceTokenDataId,
-                isActive
-            });
-
-            createNotification({
-                text: `Successfully ${isActive ? "enabled" : "disabled"} service token v3`,
-                type: "success"
-              });
-        } catch (err) {
-            console.log(err);
-            createNotification({
-                text: `Failed to ${isActive ? "enable" : "disable"} service token v3`,
-                type: "error"
-            });
-        }
-    }
-      
-    return (
-        <TableContainer>
-            <Table>
-                <THead>
-                    <Tr>
-                        <Th>Name</Th>
-                        <Th>Status</Th>
-                        <Th>Scopes</Th>
-                        <Th>Trusted IPs</Th>
-                        <Th>Access Token TTL</Th>
-                        <Th>Created At</Th>
-                        <Th>Valid Until</Th>
-                        <Th className="w-5" />
-                    </Tr>
-                </THead>
-                <TBody>
-                    {isLoading && <TableSkeleton columns={7} innerKey="service-tokens" />}
-                    {!isLoading &&
-                    data &&
-                    data.length > 0 &&
-                    data.map(({
-                        _id,
-                        name,
-                        isActive,
-                        scopes,
-                        trustedIps,
-                        createdAt,
-                        expiresAt,
-                        accessTokenTTL,
-                        isRefreshTokenRotationEnabled
-                    }) => {
-                        return (
-                            <Tr className="h-10" key={`st-v3-${_id}`}>
-                                <Td>{name}</Td>
-                                <Td>
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Edit}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <Switch
-                                                id={`enable-service-token-${_id}`}
-                                                onCheckedChange={(value) => handleToggleServiceTokenDataStatus({
-                                                    serviceTokenDataId: _id,
-                                                    isActive: value
-                                                })}
-                                                isChecked={isActive}
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <p className="w-12 mr-4">{isActive ? "Active" : "Inactive"}</p>
-                                            </Switch>
-                                        )}
-                                    </ProjectPermissionCan>
-                                </Td>
-                                <Td>
-                                    {scopes.map((scope) => {
-                                        let permissionText = "read"
-                                        if (
-                                            scope.permissions.includes(Permission.WRITE) &&
-                                            scope.permissions.includes(Permission.READ)
-                                        ) {
-                                            permissionText = "readWrite";
-                                        }
-                                        
-                                        return (
-                                            <p key={`service-token-${_id}-scope-${scope.environment}-${scope.secretPath}`}>
-                                                <span className="font-bold">
-                                                    {permissionText}
-                                                </span>
-                                                {` @${scope.environment} - ${scope.secretPath}`}
-                                            </p>
-                                        );
-                                    })}
-                                </Td> 
-                                <Td>
-                                    {trustedIps.map(({
-                                        _id: trustedIpId,
-                                        ipAddress,
-                                        prefix
-                                    }) => {
-                                        return (
-                                            <p key={`service-token-${_id}-}-trusted-ip-${trustedIpId}`}>
-                                                {`${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`}
-                                            </p>
-                                        );
-                                    })}
-                                </Td> 
-                                <Td>{accessTokenTTL}</Td>
-                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                                <Td>{expiresAt ? format(new Date(expiresAt), "yyyy-MM-dd") : "-"}</Td>
-                                <Td className="flex justify-end">
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Edit}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <IconButton
-                                                onClick={async () => {
-                                                    handlePopUpOpen("serviceTokenV3", {
-                                                        serviceTokenDataId: _id,
-                                                        name,
-                                                        scopes,
-                                                        trustedIps,
-                                                        accessTokenTTL,
-                                                        isRefreshTokenRotationEnabled
-                                                    });
-                                                }}
-                                                size="lg"
-                                                colorSchema="primary"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <FontAwesomeIcon icon={faPencil} />
-                                            </IconButton>
-                                        )}
-                                    </ProjectPermissionCan>
-                                    <ProjectPermissionCan
-                                        I={ProjectPermissionActions.Delete}
-                                        a={ProjectPermissionSub.ServiceTokens}
-                                    >
-                                        {(isAllowed) => (
-                                            <IconButton
-                                                onClick={() => {
-                                                    handlePopUpOpen("deleteServiceTokenV3", {
-                                                        serviceTokenDataId: _id,
-                                                        name
-                                                    });
-                                                }}
-                                                size="lg"
-                                                colorSchema="danger"
-                                                variant="plain"
-                                                ariaLabel="update"
-                                                className="ml-4"
-                                                isDisabled={!isAllowed}
-                                            >
-                                                <FontAwesomeIcon icon={faXmark} />
-                                            </IconButton>
-                                        )}
-                                    </ProjectPermissionCan>
-                                </Td>
-                            </Tr>
-                        );
-                    })}
-                    {!isLoading && data && data?.length === 0 && (
-                        <Tr>
-                            <Td colSpan={7}>
-                                <EmptyState title="No service token v3 on file" icon={faKey} />
-                            </Td>
-                        </Tr>
-                    )}
-                </TBody>
-            </Table>
-        </TableContainer>
-    );
-}

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

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