improvement: hide secret path/enviornment in conditional tooltip

backend/src/db/migrations/20250613153957_add-machine-identity-delete-protection.ts

@@ -1,21 +0,0 @@
-import { Knex } from "knex";
-
-import { TableName } from "../schemas";
-
-export async function up(knex: Knex): Promise<void> {
-  const hasCol = await knex.schema.hasColumn(TableName.Identity, "hasDeleteProtection");
-  if (!hasCol) {
-    await knex.schema.alterTable(TableName.Identity, (t) => {
-      t.boolean("hasDeleteProtection").notNullable().defaultTo(false);
-    });
-  }
-}
-
-export async function down(knex: Knex): Promise<void> {
-  const hasCol = await knex.schema.hasColumn(TableName.Identity, "hasDeleteProtection");
-  if (hasCol) {
-    await knex.schema.alterTable(TableName.Identity, (t) => {
-      t.dropColumn("hasDeleteProtection");
-    });
-  }
-}

backend/src/db/schemas/identities.ts

@@ -12,8 +12,7 @@ export const IdentitiesSchema = z.object({
   name: z.string(),
   authMethod: z.string().nullable().optional(),
   createdAt: z.date(),
-  updatedAt: z.date(),
-  hasDeleteProtection: z.boolean().default(false)
+  updatedAt: z.date()
 });
 
 export type TIdentities = z.infer<typeof IdentitiesSchema>;

backend/src/ee/routes/v1/group-router.ts

@@ -48,9 +48,7 @@ export const registerGroupRouter = async (server: FastifyZodProvider) => {
         id: z.string().trim().describe(GROUPS.GET_BY_ID.id)
       }),
       response: {
-        200: GroupsSchema.extend({
-          customRoleSlug: z.string().nullable()
-        })
+        200: GroupsSchema
       }
     },
     handler: async (req) => {

backend/src/ee/services/audit-log/audit-log-types.ts

@@ -780,7 +780,6 @@ interface CreateIdentityEvent {
   metadata: {
     identityId: string;
     name: string;
-    hasDeleteProtection: boolean;
   };
 }
 
@@ -789,7 +788,6 @@ interface UpdateIdentityEvent {
   metadata: {
     identityId: string;
     name?: string;
-    hasDeleteProtection?: boolean;
   };
 }
 

backend/src/ee/services/group/group-dal.ts

@@ -169,29 +169,11 @@ export const groupDALFactory = (db: TDbClient) => {
     }
   };
 
-  const findById = async (id: string, tx?: Knex) => {
-    try {
-      const doc = await (tx || db.replicaNode())(TableName.Groups)
-        .leftJoin(TableName.OrgRoles, `${TableName.Groups}.roleId`, `${TableName.OrgRoles}.id`)
-        .where(`${TableName.Groups}.id`, id)
-        .select(
-          selectAllTableCols(TableName.Groups),
-          db.ref("slug").as("customRoleSlug").withSchema(TableName.OrgRoles)
-        )
-        .first();
-
-      return doc;
-    } catch (error) {
-      throw new DatabaseError({ error, name: "Find by id" });
-    }
-  };
-
   return {
-    ...groupOrm,
     findGroups,
     findByOrgId,
     findAllGroupPossibleMembers,
     findGroupsByProjectId,
-    findById
+    ...groupOrm
   };
 };

backend/src/lib/api-docs/constants.ts

@@ -111,14 +111,12 @@ export const IDENTITIES = {
   CREATE: {
     name: "The name of the identity to create.",
     organizationId: "The organization ID to which the identity belongs.",
-    role: "The role of the identity. Possible values are 'no-access', 'member', and 'admin'.",
-    hasDeleteProtection: "Prevents deletion of the identity when enabled."
+    role: "The role of the identity. Possible values are 'no-access', 'member', and 'admin'."
   },
   UPDATE: {
     identityId: "The ID of the identity to update.",
     name: "The new name of the identity.",
-    role: "The new role of the identity.",
-    hasDeleteProtection: "Prevents deletion of the identity when enabled."
+    role: "The new role of the identity."
   },
   DELETE: {
     identityId: "The ID of the identity to delete."

backend/src/server/routes/v1/identity-router.ts

@@ -44,7 +44,6 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
         name: z.string().trim().describe(IDENTITIES.CREATE.name),
         organizationId: z.string().trim().describe(IDENTITIES.CREATE.organizationId),
         role: z.string().trim().min(1).default(OrgMembershipRole.NoAccess).describe(IDENTITIES.CREATE.role),
-        hasDeleteProtection: z.boolean().default(false).describe(IDENTITIES.CREATE.hasDeleteProtection),
         metadata: z
           .object({ key: z.string().trim().min(1), value: z.string().trim().min(1) })
           .array()
@@ -76,7 +75,6 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
           type: EventType.CREATE_IDENTITY,
           metadata: {
             name: identity.name,
-            hasDeleteProtection: identity.hasDeleteProtection,
             identityId: identity.id
           }
         }
@@ -88,7 +86,6 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
         properties: {
           orgId: req.body.organizationId,
           name: identity.name,
-          hasDeleteProtection: identity.hasDeleteProtection,
           identityId: identity.id,
           ...req.auditLogInfo
         }
@@ -120,7 +117,6 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
       body: z.object({
         name: z.string().trim().optional().describe(IDENTITIES.UPDATE.name),
         role: z.string().trim().min(1).optional().describe(IDENTITIES.UPDATE.role),
-        hasDeleteProtection: z.boolean().optional().describe(IDENTITIES.UPDATE.hasDeleteProtection),
         metadata: z
           .object({ key: z.string().trim().min(1), value: z.string().trim().min(1) })
           .array()
@@ -152,7 +148,6 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
           type: EventType.UPDATE_IDENTITY,
           metadata: {
             name: identity.name,
-            hasDeleteProtection: identity.hasDeleteProtection,
             identityId: identity.id
           }
         }
@@ -248,7 +243,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
               authMethods: z.array(z.string())
             })
           })
@@ -297,7 +292,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
               authMethods: z.array(z.string())
             })
           }).array(),
@@ -391,7 +386,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
               permissions: true,
               description: true
             }).optional(),
-            identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
+            identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
               authMethods: z.array(z.string())
             })
           }).array(),
@@ -456,7 +451,7 @@ export const registerIdentityRouter = async (server: FastifyZodProvider) => {
                   temporaryAccessEndTime: z.date().nullable().optional()
                 })
               ),
-              identity: IdentitiesSchema.pick({ name: true, id: true, hasDeleteProtection: true }).extend({
+              identity: IdentitiesSchema.pick({ name: true, id: true }).extend({
                 authMethods: z.array(z.string())
               }),
               project: SanitizedProjectSchema.pick({ name: true, id: true, type: true })

backend/src/services/identity-project/identity-project-dal.ts

@@ -101,7 +101,6 @@ export const identityProjectDALFactory = (db: TDbClient) => {
 
           db.ref("id").as("identityId").withSchema(TableName.Identity),
           db.ref("name").as("identityName").withSchema(TableName.Identity),
-          db.ref("hasDeleteProtection").withSchema(TableName.Identity),
           db.ref("id").withSchema(TableName.IdentityProjectMembership),
           db.ref("role").withSchema(TableName.IdentityProjectMembershipRole),
           db.ref("id").withSchema(TableName.IdentityProjectMembershipRole).as("membershipRoleId"),
@@ -131,7 +130,6 @@ export const identityProjectDALFactory = (db: TDbClient) => {
         data: docs,
         parentMapper: ({
           identityName,
-          hasDeleteProtection,
           uaId,
           awsId,
           gcpId,
@@ -153,7 +151,6 @@ export const identityProjectDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
-            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               awsId,

backend/src/services/identity/identity-org-dal.ts

@@ -114,18 +114,16 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("id").as("tokenId").withSchema(TableName.IdentityTokenAuth),
           db.ref("id").as("jwtId").withSchema(TableName.IdentityJwtAuth),
           db.ref("id").as("ldapId").withSchema(TableName.IdentityLdapAuth),
-          db.ref("name").withSchema(TableName.Identity),
-          db.ref("hasDeleteProtection").withSchema(TableName.Identity)
+          db.ref("name").withSchema(TableName.Identity)
         );
 
       if (data) {
-        const { name, hasDeleteProtection } = data;
+        const { name } = data;
         return {
           ...data,
           identity: {
             id: data.identityId,
             name,
-            hasDeleteProtection,
             authMethods: buildAuthMethods(data)
           }
         };
@@ -157,8 +155,7 @@ export const identityOrgDALFactory = (db: TDbClient) => {
         .orderBy(`${TableName.Identity}.${orderBy}`, orderDirection)
         .select(
           selectAllTableCols(TableName.IdentityOrgMembership),
-          db.ref("name").withSchema(TableName.Identity).as("identityName"),
-          db.ref("hasDeleteProtection").withSchema(TableName.Identity)
+          db.ref("name").withSchema(TableName.Identity).as("identityName")
         )
         .where(filter)
         .as("paginatedIdentity");
@@ -248,7 +245,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("updatedAt").withSchema("paginatedIdentity"),
           db.ref("identityId").withSchema("paginatedIdentity").as("identityId"),
           db.ref("identityName").withSchema("paginatedIdentity"),
-          db.ref("hasDeleteProtection").withSchema("paginatedIdentity"),
 
           db.ref("id").as("uaId").withSchema(TableName.IdentityUniversalAuth),
           db.ref("id").as("gcpId").withSchema(TableName.IdentityGcpAuth),
@@ -290,7 +286,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           crName,
           identityId,
           identityName,
-          hasDeleteProtection,
           role,
           roleId,
           id,
@@ -329,7 +324,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
-            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               alicloudId,
@@ -482,7 +476,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           db.ref("updatedAt").withSchema(TableName.IdentityOrgMembership),
           db.ref("identityId").withSchema(TableName.IdentityOrgMembership).as("identityId"),
           db.ref("name").withSchema(TableName.Identity).as("identityName"),
-          db.ref("hasDeleteProtection").withSchema(TableName.Identity),
 
           db.ref("id").as("uaId").withSchema(TableName.IdentityUniversalAuth),
           db.ref("id").as("gcpId").withSchema(TableName.IdentityGcpAuth),
@@ -525,7 +518,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           crName,
           identityId,
           identityName,
-          hasDeleteProtection,
           role,
           roleId,
           total_count,
@@ -564,7 +556,6 @@ export const identityOrgDALFactory = (db: TDbClient) => {
           identity: {
             id: identityId,
             name: identityName,
-            hasDeleteProtection,
             authMethods: buildAuthMethods({
               uaId,
               alicloudId,

backend/src/services/identity/identity-service.ts

@@ -47,7 +47,6 @@ export const identityServiceFactory = ({
   const createIdentity = async ({
     name,
     role,
-    hasDeleteProtection,
     actor,
     orgId,
     actorId,
@@ -97,7 +96,7 @@ export const identityServiceFactory = ({
     }
 
     const identity = await identityDAL.transaction(async (tx) => {
-      const newIdentity = await identityDAL.create({ name, hasDeleteProtection }, tx);
+      const newIdentity = await identityDAL.create({ name }, tx);
       await identityOrgMembershipDAL.create(
         {
           identityId: newIdentity.id,
@@ -139,7 +138,6 @@ export const identityServiceFactory = ({
   const updateIdentity = async ({
     id,
     role,
-    hasDeleteProtection,
     name,
     actor,
     actorId,
@@ -191,11 +189,7 @@ export const identityServiceFactory = ({
     }
 
     const identity = await identityDAL.transaction(async (tx) => {
-      const newIdentity =
-        name || hasDeleteProtection
-          ? await identityDAL.updateById(id, { name, hasDeleteProtection }, tx)
-          : await identityDAL.findById(id, tx);
-
+      const newIdentity = name ? await identityDAL.updateById(id, { name }, tx) : await identityDAL.findById(id, tx);
       if (role) {
         await identityOrgMembershipDAL.updateById(
           identityOrgMembership.id,
@@ -278,9 +272,6 @@ export const identityServiceFactory = ({
 
     ForbiddenError.from(permission).throwUnlessCan(OrgPermissionIdentityActions.Delete, OrgPermissionSubjects.Identity);
 
-    if (identityOrgMembership.identity.hasDeleteProtection)
-      throw new BadRequestError({ message: "Identity has delete protection" });
-
     const deletedIdentity = await identityDAL.deleteById(id);
 
     await licenseService.updateSubscriptionOrgMemberCount(identityOrgMembership.orgId);

backend/src/services/identity/identity-types.ts

@@ -5,14 +5,12 @@ import { OrderByDirection, TOrgPermission } from "@app/lib/types";
 export type TCreateIdentityDTO = {
   role: string;
   name: string;
-  hasDeleteProtection: boolean;
   metadata?: { key: string; value: string }[];
 } & TOrgPermission;
 
 export type TUpdateIdentityDTO = {
   id: string;
   role?: string;
-  hasDeleteProtection?: boolean;
   name?: string;
   metadata?: { key: string; value: string }[];
   isActorSuperAdmin?: boolean;

backend/src/services/telemetry/telemetry-types.ts

@@ -81,7 +81,6 @@ export type TMachineIdentityCreatedEvent = {
   event: PostHogEventTypes.MachineIdentityCreated;
   properties: {
     name: string;
-    hasDeleteProtection: boolean;
     orgId: string;
     identityId: string;
   };

frontend/src/components/permissions/AccessTree/components/AccessTreeContext.tsx

@@ -7,6 +7,7 @@ import React, {
   useMemo,
   useState
 } from "react";
+import { FormProvider, useForm } from "react-hook-form";
 
 import { ViewMode } from "../types";
 
@@ -23,8 +24,11 @@ interface AccessTreeProviderProps {
   children: ReactNode;
 }
 
+export type AccessTreeForm = { metadata: { key: string; value: string }[] };
+
 export const AccessTreeProvider: React.FC<AccessTreeProviderProps> = ({ children }) => {
   const [secretName, setSecretName] = useState("");
+  const formMethods = useForm<AccessTreeForm>({ defaultValues: { metadata: [] } });
   const [viewMode, setViewMode] = useState(ViewMode.Docked);
 
   const value = useMemo(
@@ -37,7 +41,11 @@ export const AccessTreeProvider: React.FC<AccessTreeProviderProps> = ({ children
     [secretName, setSecretName, viewMode, setViewMode]
   );
 
-  return <AccessTreeContext.Provider value={value}>{children}</AccessTreeContext.Provider>;
+  return (
+    <FormProvider {...formMethods}>
+      <AccessTreeContext.Provider value={value}>{children}</AccessTreeContext.Provider>
+    </FormProvider>
+  );
 };
 
 export const useAccessTreeContext = (): AccessTreeContextProps => {

frontend/src/components/permissions/AccessTree/components/PermissionSimulation.tsx

@@ -1,10 +1,12 @@
 import { Dispatch, SetStateAction, useState } from "react";
+import { useFormContext } from "react-hook-form";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Panel } from "@xyflow/react";
 
 import { Button, FormLabel, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
+import { MetadataForm } from "@app/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/MetadataForm";
 
 import { ViewMode } from "../types";
 
@@ -32,6 +34,7 @@ export const PermissionSimulation = ({
   setSecretName
 }: TProps) => {
   const [expand, setExpand] = useState(false);
+  const { control } = useFormContext();
 
   const handlePermissionSimulation = () => {
     setExpand(true);
@@ -139,6 +142,11 @@ export const PermissionSimulation = ({
                 />
               </div>
             )}
+            {subject === ProjectPermissionSub.DynamicSecrets && (
+              <div>
+                <MetadataForm control={control} />
+              </div>
+            )}
           </>
         )}
       </div>

frontend/src/components/permissions/AccessTree/hooks/index.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
 import { MongoAbility, MongoQuery } from "@casl/ability";
 import { Edge, Node, useEdgesState, useNodesState } from "@xyflow/react";
 
@@ -7,7 +8,7 @@ import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
 import { useListProjectEnvironmentsFolders } from "@app/hooks/api/secretFolders/queries";
 import { TSecretFolderWithPath } from "@app/hooks/api/secretFolders/types";
 
-import { useAccessTreeContext } from "../components";
+import { AccessTreeForm, useAccessTreeContext } from "../components";
 import { PermissionAccess } from "../types";
 import {
   createBaseEdge,
@@ -36,6 +37,8 @@ export const useAccessTree = (
 ) => {
   const { currentWorkspace } = useWorkspace();
   const { secretName, setSecretName, setViewMode, viewMode } = useAccessTreeContext();
+  const { control } = useFormContext<AccessTreeForm>();
+  const metadata = useWatch({ control, name: "metadata" });
   const [nodes, setNodes] = useNodesState<Node>([]);
   const [edges, setEdges] = useEdgesState<Edge>([]);
   const [subject, setSubject] = useState(ProjectPermissionSub.Secrets);
@@ -168,7 +171,8 @@ export const useAccessTree = (
         environment,
         subject,
         secretName,
-        actionRuleMap
+        actionRuleMap,
+        metadata
       })
     );
 
@@ -266,7 +270,8 @@ export const useAccessTree = (
     subject,
     secretName,
     setNodes,
-    setEdges
+    setEdges,
+    metadata
   ]);
 
   return {

frontend/src/components/permissions/AccessTree/nodes/FolderNode/components/FolderNodeTooltipContent.tsx

@@ -17,6 +17,27 @@ type Props = {
   access: PermissionAccess;
 } & Pick<ReturnType<typeof createFolderNode>["data"], "actionRuleMap" | "subject">;
 
+type ConditionDisplayProps = {
+  _key: string;
+  operator: string;
+  value: string | string[];
+};
+
+const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
+  return (
+    <li>
+      <span className="font-medium capitalize text-mineshaft-100">{camelCaseToSpaces(key)}</span>{" "}
+      <span className="text-mineshaft-200">
+        {formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
+      </span>{" "}
+      <span className="rounded bg-mineshaft-600 p-0.5 font-mono">
+        {typeof value === "string" ? value : value.join(", ")}
+      </span>
+      .
+    </li>
+  );
+};
+
 export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subject }: Props) => {
   let component: ReactElement;
 
@@ -56,43 +77,58 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
             {actionRuleMap.map((ruleMap, index) => {
               const rule = ruleMap[action];
 
-              if (
-                !rule ||
-                !rule.conditions ||
-                (!rule.conditions.secretName && !rule.conditions.secretTags)
-              )
-                return null;
+              if (!rule || !rule.conditions) return null;
 
-              return (
-                <li key={`${action}_${index + 1}`}>
-                  <span className={`italic ${rule.inverted ? "text-red" : "text-green"} `}>
-                    {rule.inverted ? "Forbids" : "Allows"}
-                  </span>
-                  <span> when:</span>
-                  {Object.entries(rule.conditions).map(([key, condition]) => (
-                    <ul key={`${action}_${index + 1}_${key}`} className="list-[square] pl-4">
-                      {Object.entries(condition as object).map(([operator, value]) => (
-                        <li key={`${action}_${index + 1}_${key}_${operator}`}>
-                          <span className="font-medium capitalize text-mineshaft-100">
-                            {camelCaseToSpaces(key)}
-                          </span>{" "}
-                          <span className="text-mineshaft-200">
-                            {
-                              formatedConditionsOperatorNames[
-                                operator as PermissionConditionOperators
-                              ]
+              if (
+                rule.conditions.secretName ||
+                rule.conditions.secretTags ||
+                rule.conditions.metadata
+              ) {
+                return (
+                  <li key={`${action}_${index + 1}`}>
+                    <span className="italic">{rule.inverted ? "Forbids" : "Allows"}</span>
+                    <span> when:</span>
+                    {Object.entries(rule.conditions).map(([key, condition]) => {
+                      if (key.match(/secretPath|environment/)) {
+                        return null;
+                      }
+
+                      return (
+                        <ul key={`${action}_${index + 1}_${key}`} className="list-[square] pl-4">
+                          {Object.entries(condition as object).map(([operator, value]) => {
+                            if (operator === "$elemMatch") {
+                              return Object.entries(value as object).map(
+                                ([nestedKey, nestedCondition]) =>
+                                  Object.entries(nestedCondition as object).map(
+                                    ([nestedOperator, nestedValue]) => (
+                                      <ConditionDisplay
+                                        _key={`${key} ${nestedKey}`}
+                                        operator={nestedOperator}
+                                        value={nestedValue}
+                                        key={`${action}_${index + 1}_${key}_${operator}_${nestedKey}_${nestedOperator}`}
+                                      />
+                                    )
+                                  )
+                              );
                             }
-                          </span>{" "}
-                          <span className={rule.inverted ? "text-red" : "text-green"}>
-                            {typeof value === "string" ? value : value.join(", ")}
-                          </span>
-                          .
-                        </li>
-                      ))}
-                    </ul>
-                  ))}
-                </li>
-              );
+
+                            return (
+                              <ConditionDisplay
+                                _key={key}
+                                operator={operator}
+                                value={value}
+                                key={`${action}_${index + 1}_${key}_${operator}`}
+                              />
+                            );
+                          })}
+                        </ul>
+                      );
+                    })}
+                  </li>
+                );
+              }
+
+              return null;
             })}
           </ul>
         </>

frontend/src/components/permissions/AccessTree/nodes/RoleNode.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import { faFileImport, faFolder, faKey, faLock } from "@fortawesome/free-solid-svg-icons";
+import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 
@@ -12,15 +12,15 @@ import { createRoleNode } from "../utils";
 const getSubjectIcon = (subject: ProjectPermissionSub) => {
   switch (subject) {
     case ProjectPermissionSub.Secrets:
-      return <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-yellow-700" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
     case ProjectPermissionSub.SecretFolders:
       return <FontAwesomeIcon icon={faFolder} className="h-4 w-4 text-yellow-700" />;
     case ProjectPermissionSub.DynamicSecrets:
-      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-yellow-700" />;
+      return <FontAwesomeIcon icon={faFingerprint} className="h-4 w-4 text-yellow-700" />;
     case ProjectPermissionSub.SecretImports:
-      return <FontAwesomeIcon icon={faFileImport} className="h-4 w-4 text-yellow-700" />;
+      return <FontAwesomeIcon icon={faFileImport} className="h-4 w-4 text-green-700" />;
     default:
-      return <FontAwesomeIcon icon={faLock} className="h-4 w-4 text-yellow-700" />;
+      return <FontAwesomeIcon icon={faKey} className="h-4 w-4 text-bunker-300" />;
   }
 };
 

frontend/src/components/permissions/AccessTree/utils/createFolderNode.ts

@@ -33,6 +33,12 @@ const ACTION_MAP: Record<string, string[] | undefined> = {
   ]
 };
 
+const SUBJECT_HEIGHT_MAP: Record<string, number> = {
+  [ProjectPermissionSub.DynamicSecrets]: 130,
+  [ProjectPermissionSub.Secrets]: 85,
+  default: 64
+};
+
 const evaluateCondition = (
   value: string,
   operator: PermissionConditionOperators,
@@ -52,13 +58,113 @@ const evaluateCondition = (
   }
 };
 
+const doesConditionMatch = (
+  conditions: Record<string, any> | undefined,
+  value: string
+): boolean => {
+  if (!conditions) return true;
+
+  return Object.entries(conditions).every(([operator, comparisonValue]) =>
+    evaluateCondition(value, operator as PermissionConditionOperators, comparisonValue)
+  );
+};
+
+const doBaseConditionsApply = (
+  ruleConditions: any,
+  environment: string,
+  folderPath: string
+): boolean => {
+  return (
+    doesConditionMatch(ruleConditions?.environment, environment) &&
+    doesConditionMatch(ruleConditions?.secretPath, folderPath)
+  );
+};
+
+const shouldShowConditionalAccess = (
+  actionRuleMap: TActionRuleMap,
+  action: string,
+  environment: string,
+  folderPath: string,
+  conditionalFields: string[]
+): boolean => {
+  return actionRuleMap.some((rule) => {
+    const ruleConditions = rule[action]?.conditions;
+    if (!ruleConditions) return false;
+
+    // Check if any of the conditional fields are present
+    const hasConditionalField = conditionalFields.some((field) => ruleConditions[field]);
+    if (!hasConditionalField) return false;
+
+    // Check if base conditions (environment and secretPath) apply
+    return doBaseConditionsApply(ruleConditions, environment, folderPath);
+  });
+};
+
+const determineAccessLevel = (
+  hasPermission: boolean,
+  subject: ProjectPermissionSub,
+  action: string,
+  actionRuleMap: TActionRuleMap,
+  environment: string,
+  folderPath: string,
+  secretName: string,
+  metadata: Array<{ key: string; value: string }>
+): PermissionAccess => {
+  if (!hasPermission) {
+    return PermissionAccess.None;
+  }
+
+  if (subject === ProjectPermissionSub.Secrets) {
+    if (
+      !secretName &&
+      shouldShowConditionalAccess(actionRuleMap, action, environment, folderPath, [
+        "secretName",
+        "secretTags"
+      ])
+    ) {
+      return PermissionAccess.Partial;
+    }
+  } else if (subject === ProjectPermissionSub.DynamicSecrets) {
+    if (
+      !metadata.length &&
+      shouldShowConditionalAccess(actionRuleMap, action, environment, folderPath, ["metadata"])
+    ) {
+      return PermissionAccess.Partial;
+    }
+  }
+
+  return PermissionAccess.Full;
+};
+
+const checkPermission = (
+  permissions: MongoAbility<ProjectPermissionSet, MongoQuery>,
+  subject: ProjectPermissionSub,
+  action: string,
+  subjectFields: any
+): boolean => {
+  if (
+    subject === ProjectPermissionSub.Secrets &&
+    (action === ProjectPermissionSecretActions.ReadValue ||
+      action === ProjectPermissionSecretActions.DescribeSecret)
+  ) {
+    return hasSecretReadValueOrDescribePermission(permissions, action, subjectFields);
+  }
+
+  return permissions.can(
+    // @ts-expect-error we are not specifying which so can't resolve if valid
+    action,
+    abilitySubject(subject, subjectFields)
+  );
+};
+
 export const createFolderNode = ({
   folder,
   permissions,
   environment,
   subject,
   secretName,
-  actionRuleMap
+  actionRuleMap,
+  metadata
 }: {
   folder: TSecretFolderWithPath;
   permissions: MongoAbility<ProjectPermissionSet, MongoQuery>;
@@ -66,6 +172,7 @@ export const createFolderNode = ({
   subject: ProjectPermissionSub;
   secretName: string;
   actionRuleMap: TActionRuleMap;
+  metadata: Array<{ key: string; value: string }>;
 }) => {
   const actions = Object.fromEntries(
     Object.values(ACTION_MAP[subject] ?? Object.values(ProjectPermissionActions)).map((action) => {
@@ -73,74 +180,26 @@ export const createFolderNode = ({
 
       // wrapped in try because while editing certain conditions, if their values are empty it throws an error
       try {
-        let hasPermission: boolean;
-
         const subjectFields = {
           secretPath: folder.path,
           environment,
           secretName: secretName || "*",
-          secretTags: ["*"]
+          secretTags: ["*"],
+          metadata: metadata.length ? metadata : ["*"]
         };
 
-        if (
-          subject === ProjectPermissionSub.Secrets &&
-          (action === ProjectPermissionSecretActions.ReadValue ||
-            action === ProjectPermissionSecretActions.DescribeSecret)
-        ) {
-          hasPermission = hasSecretReadValueOrDescribePermission(
-            permissions,
-            action,
-            subjectFields
-          );
-        } else {
-          hasPermission = permissions.can(
-            // @ts-expect-error we are not specifying which so can't resolve if valid
-            action,
-            abilitySubject(subject, subjectFields)
-          );
-        }
+        const hasPermission = checkPermission(permissions, subject, action, subjectFields);
 
-        if (hasPermission) {
-          // we want to show yellow/conditional access if user hasn't specified secret name to fully resolve access
-          if (
-            !secretName &&
-            actionRuleMap.some((el) => {
-              // we only show conditional if secretName/secretTags are present - environment and path can be directly determined
-              if (!el[action]?.conditions?.secretName && !el[action]?.conditions?.secretTags)
-                return false;
-
-              // make sure condition applies to env
-              if (el[action]?.conditions?.environment) {
-                if (
-                  !Object.entries(el[action]?.conditions?.environment).every(([operator, value]) =>
-                    evaluateCondition(environment, operator as PermissionConditionOperators, value)
-                  )
-                ) {
-                  return false;
-                }
-              }
-
-              // and applies to path
-              if (el[action]?.conditions?.secretPath) {
-                if (
-                  !Object.entries(el[action]?.conditions?.secretPath).every(([operator, value]) =>
-                    evaluateCondition(folder.path, operator as PermissionConditionOperators, value)
-                  )
-                ) {
-                  return false;
-                }
-              }
-
-              return true;
-            })
-          ) {
-            access = PermissionAccess.Partial;
-          } else {
-            access = PermissionAccess.Full;
-          }
-        } else {
-          access = PermissionAccess.None;
-        }
+        access = determineAccessLevel(
+          hasPermission,
+          subject,
+          action,
+          actionRuleMap,
+          environment,
+          folder.path,
+          secretName,
+          metadata
+        );
       } catch (e) {
         console.error(e);
         access = PermissionAccess.None;
@@ -150,18 +209,7 @@ export const createFolderNode = ({
     })
   );
 
-  let height: number;
-
-  switch (subject) {
-    case ProjectPermissionSub.DynamicSecrets:
-      height = 130;
-      break;
-    case ProjectPermissionSub.Secrets:
-      height = 85;
-      break;
-    default:
-      height = 64;
-  }
+  const height = SUBJECT_HEIGHT_MAP[subject] ?? SUBJECT_HEIGHT_MAP.default;
 
   return {
     type: PermissionNode.Folder,

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -70,15 +70,7 @@ export const Pagination = ({
                 key={`pagination-per-page-options-${perPageOption}`}
                 icon={perPage === perPageOption && <FontAwesomeIcon size="sm" icon={faCheck} />}
                 iconPos="right"
-                onClick={() => {
-                  const totalPages = Math.ceil(count / perPageOption);
-
-                  if (page > totalPages) {
-                    onChangePage(totalPages);
-                  }
-
-                  onChangePerPage(perPageOption);
-                }}
+                onClick={() => onChangePerPage(perPageOption)}
               >
                 {perPageOption} rows per page
               </DropdownMenuItem>

frontend/src/components/v2/SecretPathInput/SecretPathInput.tsx

@@ -137,7 +137,7 @@ export const SecretPathInput = ({
           maxHeight: "var(--radix-select-content-available-height)"
         }}
       >
-        <div className="max-h-[25vh] w-full flex-col items-center justify-center overflow-y-scroll rounded-md text-white">
+        <div className="thin-scrollbar max-h-[25vh] w-full flex-col items-center justify-center overflow-y-scroll rounded-md text-white">
           {suggestions.map((suggestion, i) => (
             <div
               tabIndex={0}

frontend/src/context/ProjectPermissionContext/types.ts

@@ -163,7 +163,7 @@ export type IdentityManagementSubjectFields = {
 
 export const formatedConditionsOperatorNames: { [K in PermissionConditionOperators]: string } = {
   [PermissionConditionOperators.$EQ]: "equal to",
-  [PermissionConditionOperators.$IN]: "contains",
+  [PermissionConditionOperators.$IN]: "in",
   [PermissionConditionOperators.$ALL]: "contains all",
   [PermissionConditionOperators.$NEQ]: "not equal to",
   [PermissionConditionOperators.$GLOB]: "matches glob pattern",

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

@@ -242,7 +242,6 @@ interface CreateIdentityEvent {
   metadata: {
     identityId: string;
     name: string;
-    hasDeleteProtection: boolean;
   };
 }
 
@@ -251,7 +250,6 @@ interface UpdateIdentityEvent {
   metadata: {
     identityId: string;
     name?: string;
-    hasDeleteProtection?: boolean;
   };
 }
 

frontend/src/hooks/api/identities/mutations.tsx

@@ -85,13 +85,12 @@ export const useCreateIdentity = () => {
 export const useUpdateIdentity = () => {
   const queryClient = useQueryClient();
   return useMutation<Identity, object, UpdateIdentityDTO>({
-    mutationFn: async ({ identityId, name, role, hasDeleteProtection, metadata }) => {
+    mutationFn: async ({ identityId, name, role, metadata }) => {
       const {
         data: { identity }
       } = await apiRequest.patch(`/api/v1/identities/${identityId}`, {
         name,
         role,
-        hasDeleteProtection,
         metadata
       });
 

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

@@ -14,7 +14,6 @@ export type IdentityTrustedIp = {
 export type Identity = {
   id: string;
   name: string;
-  hasDeleteProtection: boolean;
   authMethods: IdentityAuthMethod[];
   createdAt: string;
   updatedAt: string;
@@ -84,7 +83,6 @@ export type CreateIdentityDTO = {
   name: string;
   organizationId: string;
   role?: string;
-  hasDeleteProtection: boolean;
   metadata?: { key: string; value: string }[];
 };
 
@@ -92,7 +90,6 @@ export type UpdateIdentityDTO = {
   identityId: string;
   name?: string;
   role?: string;
-  hasDeleteProtection?: boolean;
   organizationId: string;
   metadata?: { key: string; value: string }[];
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx

@@ -15,8 +15,7 @@ import {
   IconButton,
   Input,
   Modal,
-  ModalContent,
-  Switch
+  ModalContent
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { findOrgMembershipRole } from "@app/helpers/roles";
@@ -28,7 +27,6 @@ const schema = z
   .object({
     name: z.string().min(1, "Required"),
     role: z.object({ slug: z.string(), name: z.string() }),
-    hasDeleteProtection: z.boolean(),
     metadata: z
       .object({
         key: z.string().trim().min(1),
@@ -66,8 +64,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
-      name: "",
-      hasDeleteProtection: false
+      name: ""
     }
   });
 
@@ -81,7 +78,6 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       identityId: string;
       name: string;
       role: string;
-      hasDeleteProtection: boolean;
       metadata?: { key: string; value: string }[];
       customRole: {
         name: string;
@@ -95,25 +91,22 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
       reset({
         name: identity.name,
         role: identity.customRole ?? findOrgMembershipRole(roles, identity.role),
-        hasDeleteProtection: identity.hasDeleteProtection,
         metadata: identity.metadata
       });
     } else {
       reset({
         name: "",
-        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole),
-        hasDeleteProtection: false
+        role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole)
       });
     }
   }, [popUp?.identity?.data, roles]);
 
-  const onFormSubmit = async ({ name, role, metadata, hasDeleteProtection }: FormData) => {
+  const onFormSubmit = async ({ name, role, metadata }: FormData) => {
     try {
       const identity = popUp?.identity?.data as {
         identityId: string;
         name: string;
         role: string;
-        hasDeleteProtection: boolean;
       };
 
       if (identity) {
@@ -123,7 +116,6 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
           identityId: identity.identityId,
           name,
           role: role.slug || undefined,
-          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -135,7 +127,6 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         const { id: createdId } = await createMutateAsync({
           name,
           role: role.slug || undefined,
-          hasDeleteProtection,
           organizationId: orgId,
           metadata
         });
@@ -224,24 +215,6 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
               </FormControl>
             )}
           />
-          <Controller
-            control={control}
-            name="hasDeleteProtection"
-            render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <FormControl errorText={error?.message} isError={Boolean(error)}>
-                <Switch
-                  className="ml-0 mr-2 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
-                  containerClassName="flex-row-reverse w-fit"
-                  id="delete-protection-enabled"
-                  thumbClassName="bg-mineshaft-800"
-                  onCheckedChange={onChange}
-                  isChecked={value}
-                >
-                  <p>Delete Protection {value ? "Enabled" : "Disabled"}</p>
-                </Switch>
-              </FormControl>
-            )}
-          />
           <div>
             <FormLabel label="Metadata" />
           </div>

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -329,7 +329,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             <FontAwesomeIcon size="sm" icon={faEllipsis} />
                           </div>
                         </DropdownMenuTrigger>
-                        <DropdownMenuContent align="start" className="mt-3 p-1">
+                        <DropdownMenuContent align="start" className="p-1">
                           <OrgPermissionCan
                             I={OrgPermissionIdentityActions.Edit}
                             a={OrgPermissionSubjects.Identity}

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -47,19 +47,13 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <DropdownMenuTrigger asChild>
             <Button
               size="xs"
-              rightIcon={
-                <FontAwesomeIcon
-                  className="ml-1 transition-transform duration-200 group-data-[state=open]:rotate-180"
-                  icon={faChevronDown}
-                />
-              }
+              rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
               colorSchema="secondary"
-              className="group select-none"
             >
               Options
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
+          <DropdownMenuContent className="min-w-[120px]" align="end">
             <OrgPermissionCan
               I={OrgPermissionIdentityActions.Edit}
               a={OrgPermissionSubjects.Identity}
@@ -74,7 +68,6 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
                     handlePopUpOpen("identity", {
                       identityId,
                       name: data.identity.name,
-                      hasDeleteProtection: data.identity.hasDeleteProtection,
                       role: data.role,
                       customRole: data.customRole
                     });
@@ -138,12 +131,6 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
           <p className="text-sm font-semibold text-mineshaft-300">Name</p>
           <p className="text-sm text-mineshaft-300">{data.identity.name}</p>
         </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Delete Protection</p>
-          <p className="text-sm text-mineshaft-300">
-            {data.identity.hasDeleteProtection ? "On" : "Off"}
-          </p>
-        </div>
         <div className="mb-4">
           <p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
           <p className="text-sm text-mineshaft-300">{data.role}</p>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx

@@ -35,7 +35,7 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
                   Options
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent className="mt-3 min-w-[120px]" align="end">
+              <DropdownMenuContent className="min-w-[120px]" align="end">
                 <OrgPermissionCan
                   I={OrgPermissionIdentityActions.Edit}
                   a={OrgPermissionSubjects.Identity}

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -67,12 +67,13 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
 };
 
-const ServiceTokenForm = () => {
+export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
   const { t } = useTranslation();
 
   const { currentWorkspace } = useWorkspace();
   const {
     control,
+    reset,
     handleSubmit,
     formState: { isSubmitting }
   } = useForm<FormData>({
@@ -151,197 +152,13 @@ const ServiceTokenForm = () => {
     }
   };
 
-  return !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,
-          readValue: false,
-          write: false
-        }}
-        render={({ field: { onChange, value }, fieldState: { error } }) => {
-          const options = [
-            {
-              label: "Read (default)",
-              value: "read"
-            },
-            {
-              label: "Write (optional)",
-              value: "write"
-            }
-          ] as const;
-
-          return (
-            <FormControl label="Permissions" errorText={error?.message} isError={Boolean(error)}>
-              <>
-                {options.map(({ label, value: optionValue }) => {
-                  return (
-                    <Checkbox
-                      id={String(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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-      <p className="mr-4 break-all">{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>
-  );
-};
-
-export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
-  const { t } = useTranslation();
-
-  const { currentWorkspace } = useWorkspace();
-
   return (
     <Modal
       isOpen={popUp?.createAPIToken?.isOpen}
       onOpenChange={(open) => {
         handlePopUpToggle("createAPIToken", open);
+        reset();
+        setToken("");
       }}
     >
       <ModalContent
@@ -352,7 +169,194 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
         }
         subTitle={t("section.token.add-dialog.description") as string}
       >
-        <ServiceTokenForm />
+        {!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,
+                readValue: false,
+                write: false
+              }}
+              render={({ field: { onChange, value }, fieldState: { error } }) => {
+                const options = [
+                  {
+                    label: "Read (default)",
+                    value: "read"
+                  },
+                  {
+                    label: "Write (optional)",
+                    value: "write"
+                  }
+                ] as const;
+
+                return (
+                  <FormControl
+                    label="Permissions"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <>
+                      {options.map(({ label, value: optionValue }) => {
+                        return (
+                          <Checkbox
+                            id={String(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="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{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/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { faArrowUpRightFromSquare, faBookOpen, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
@@ -48,29 +48,8 @@ export const ServiceTokenSection = withProjectPermission(
 
     return (
       <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-        <div className="mb-2 flex items-center justify-between">
-          <div>
-            <div className="flex items-center gap-1">
-              <p className="text-xl font-semibold text-mineshaft-100">Service Tokens</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/token"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="ml-1 mt-[0.16rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
-            </div>
-            <p className="text-sm text-bunker-300">
-              {t("section.token.service-tokens-description")}
-            </p>
-          </div>
+        <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}
@@ -84,11 +63,12 @@ export const ServiceTokenSection = withProjectPermission(
                 }}
                 isDisabled={!isAllowed}
               >
-                Create Token
+                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

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -1,28 +1,10 @@
-import { useMemo } from "react";
-import {
-  faArrowDown,
-  faArrowUp,
-  faEllipsisV,
-  faFolder,
-  faKey,
-  faMagnifyingGlass,
-  faSearch,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-import { twMerge } from "tailwind-merge";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
   EmptyState,
   IconButton,
-  Input,
-  Pagination,
   Table,
   TableContainer,
   TableSkeleton,
@@ -30,18 +12,10 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import {
-  getUserTablePreference,
-  PreferenceKey,
-  setUserTablePreference
-} from "@app/helpers/userTablePreferences";
-import { usePagination, useResetPageHelper } from "@app/hooks";
 import { useGetUserWsServiceTokens } from "@app/hooks/api";
-import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -57,230 +31,78 @@ type Props = {
   ) => void;
 };
 
-enum TokensOrderBy {
-  Name = "name",
-  Expiration = "expiration"
-}
-
 export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const { data, isPending } = useGetUserWsServiceTokens({
     workspaceID: currentWorkspace?.id || ""
   });
 
-  const {
-    search,
-    setSearch,
-    setPage,
-    page,
-    perPage,
-    setPerPage,
-    offset,
-    orderDirection,
-    toggleOrderDirection,
-    orderBy,
-    setOrderDirection,
-    setOrderBy
-  } = usePagination<TokensOrderBy>(TokensOrderBy.Name, {
-    initPerPage: getUserTablePreference("projectServiceTokens", PreferenceKey.PerPage, 20)
-  });
-
-  const handlePerPageChange = (newPerPage: number) => {
-    setPerPage(newPerPage);
-    setUserTablePreference("projectServiceTokens", PreferenceKey.PerPage, newPerPage);
-  };
-
-  const filteredTokens = useMemo(
-    () =>
-      data
-        ?.filter((token) => {
-          const { name, scopes } = token;
-
-          const searchValue = search.trim().toLowerCase();
-
-          if (name.toLowerCase().includes(searchValue)) {
-            return true;
-          }
-
-          return scopes.some(
-            ({ environment, secretPath }) =>
-              environment.toLowerCase().includes(searchValue) ||
-              secretPath.toLowerCase().includes(searchValue)
-          );
-        })
-        .sort((a, b) => {
-          const [tokenOne, tokenTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
-
-          switch (orderBy) {
-            case TokensOrderBy.Expiration:
-              if (!tokenOne.expiresAt && !tokenTwo.expiresAt) return 0;
-              if (!tokenOne.expiresAt) return 1;
-              if (!tokenTwo.expiresAt) return -1;
-
-              return (
-                new Date(tokenOne.expiresAt).getTime() - new Date(tokenTwo.expiresAt).getTime()
-              );
-
-            case TokensOrderBy.Name:
-            default:
-              return tokenOne.name.toLowerCase().localeCompare(tokenTwo.name.toLowerCase());
-          }
-        }) ?? [],
-    [data, orderDirection, search, orderBy]
-  );
-
-  useResetPageHelper({
-    totalCount: filteredTokens.length,
-    offset,
-    setPage
-  });
-
-  const handleSort = (column: TokensOrderBy) => {
-    if (column === orderBy) {
-      toggleOrderDirection();
-      return;
-    }
-
-    setOrderBy(column);
-    setOrderDirection(OrderByDirection.ASC);
-  };
-
-  const getClassName = (col: TokensOrderBy) => twMerge("ml-2", orderBy === col ? "" : "opacity-30");
-
-  const getColSortIcon = (col: TokensOrderBy) =>
-    orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
-
   return (
-    <div>
-      <Input
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search service tokens by name, environment or secret path..."
-        className="flex-1"
-        containerClassName="mb-4 mt-2"
-      />
-      <TableContainer>
-        <Table>
-          <THead>
-            <Tr>
-              <Th>
-                <div className="flex items-center">
-                  Name
-                  <IconButton
-                    variant="plain"
-                    className={getClassName(TokensOrderBy.Name)}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(TokensOrderBy.Name)}
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Token Name</Th>
+            <Th>Environment - Secret Path</Th>
+            <Th>Valid Until</Th>
+            <Th aria-label="button" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isPending && <TableSkeleton columns={4} innerKey="project-service-tokens" />}
+          {!isPending &&
+            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}
                   >
-                    <FontAwesomeIcon icon={getColSortIcon(TokensOrderBy.Name)} />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th>Environment / Secret Path</Th>
-              <Th>
-                <div className="flex items-center">
-                  Valid Until
-                  <IconButton
-                    variant="plain"
-                    className={getClassName(TokensOrderBy.Expiration)}
-                    ariaLabel="sort"
-                    onClick={() => handleSort(TokensOrderBy.Expiration)}
-                  >
-                    <FontAwesomeIcon icon={getColSortIcon(TokensOrderBy.Expiration)} />
-                  </IconButton>
-                </div>
-              </Th>
-              <Th className="w-5" aria-label="button" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isPending && <TableSkeleton columns={4} innerKey="project-service-tokens" />}
-            {!isPending &&
-              filteredTokens.slice(offset, perPage * page).map((row) => (
-                <Tr key={row.id}>
-                  <Td>{row.name}</Td>
-                  <Td>
-                    <div className="flex flex-row flex-wrap gap-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-500 p-1 px-2"
-                        >
-                          <div className="mr-1 border-r border-mineshaft-500 pr-2">
-                            {environment}
-                          </div>
-                          <FontAwesomeIcon icon={faFolder} size="sm" className="text-yellow" />
-                          <span className="pl-1">{secretPath}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </Td>
-                  <Td>
-                    {row.expiresAt ? (
-                      format(row.expiresAt, "MM/dd/yyyy h:mm:ss aa")
-                    ) : (
-                      <span className="text-mineshaft-400">N/A</span>
+                    {(isAllowed) => (
+                      <IconButton
+                        onClick={() =>
+                          handlePopUpOpen("deleteAPITokenConfirmation", {
+                            name: row.name,
+                            id: row.id
+                          })
+                        }
+                        colorSchema="danger"
+                        ariaLabel="delete"
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faTrashCan} />
+                      </IconButton>
                     )}
-                  </Td>
-                  <Td>
-                    <Tooltip className="max-w-sm text-center" content="Options">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <IconButton
-                            ariaLabel="Options"
-                            colorSchema="secondary"
-                            className="w-6"
-                            variant="plain"
-                          >
-                            <FontAwesomeIcon icon={faEllipsisV} />
-                          </IconButton>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="min-w-[12rem]" sideOffset={2} align="end">
-                          <ProjectPermissionCan
-                            I={ProjectPermissionActions.Delete}
-                            a={ProjectPermissionSub.ServiceTokens}
-                          >
-                            {(isAllowed) => (
-                              <DropdownMenuItem
-                                icon={<FontAwesomeIcon icon={faTrash} />}
-                                isDisabled={!isAllowed}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handlePopUpOpen("deleteAPITokenConfirmation", {
-                                    name: row.name,
-                                    id: row.id
-                                  });
-                                }}
-                              >
-                                Delete Token
-                              </DropdownMenuItem>
-                            )}
-                          </ProjectPermissionCan>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </Tooltip>
-                  </Td>
-                </Tr>
-              ))}
-          </TBody>
-        </Table>
-        {Boolean(filteredTokens.length) && (
-          <Pagination
-            count={filteredTokens.length}
-            page={page}
-            perPage={perPage}
-            onChangePage={setPage}
-            onChangePerPage={handlePerPageChange}
-          />
-        )}
-        {!isPending && !filteredTokens?.length && (
-          <EmptyState
-            title={data?.length ? "No service tokens match search..." : "No service tokens found"}
-            icon={data?.length ? faSearch : faKey}
-          />
-        )}
-      </TableContainer>
-    </div>
+                  </ProjectPermissionCan>
+                </Td>
+              </Tr>
+            ))}
+          {!isPending && 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>
   );
 };