Merge remote-tracking branch 'origin' into dependabot/npm_and_yarn/frontend/babel/traverse-and-babel/traverse-and-storybook/addon-essentials-and-storybook/csf-tools-and-storybook-7.23.2

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -21,7 +21,7 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
   allowedLabel,
   ...props
 }) => {
-  const permission = useOrgPermission();
+  const { permission } = useOrgPermission();
 
   return (
     <Can {...props} passThrough={passThrough} ability={props?.ability || permission}>

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -9,16 +9,24 @@ export type FormLabelProps = {
   isRequired?: boolean;
   label?: ReactNode;
   icon?: ReactNode;
+  className?: string;
 };
 
-export const FormLabel = ({ id, label, isRequired, icon }: FormLabelProps) => (
+export const FormLabel = ({ id, label, isRequired, icon, className }: FormLabelProps) => (
   <Label.Root
-    className="mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400"
+    className={twMerge(
+      "mb-0.5 ml-1 block flex items-center text-sm font-normal text-mineshaft-400",
+      className
+    )}
     htmlFor={id}
   >
     {label}
     {isRequired && <span className="ml-1 text-red">*</span>}
-    {icon && <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">{icon}</span>}
+    {icon && (
+      <span className="ml-2 text-mineshaft-300 hover:text-mineshaft-200 cursor-default">
+        {icon}
+      </span>
+    )}
   </Label.Root>
 );
 

frontend/src/components/v2/Stepper/Stepper.tsx

@@ -0,0 +1,78 @@
+import { Children, cloneElement, ReactElement, ReactNode } from "react";
+import { faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+export type StepperProps = {
+  activeStep: number;
+  children: ReactNode;
+  direction: "vertical" | "horizontal";
+  className?: string;
+};
+
+export const Stepper = ({ activeStep, children, direction, className }: StepperProps) => {
+  return (
+    <div
+      className={twMerge(
+        "flex items-center w-full space-x-3 p-2 border border-bunker-300/30 rounded-md",
+        className
+      )}
+    >
+      {Children.map(children as ReactNode, (child: ReactNode, index) => {
+        const isCompleted = activeStep > index;
+        const isActive = index === activeStep;
+        const isNotLast = index + 1 !== (children as Array<ReactNode>).length;
+        return (
+          <div
+            className={twMerge(
+              "flex items-center space-x-3 flex-shrink-0",
+              isNotLast && "flex-grow"
+            )}
+          >
+            <div className="flex items-center space-x-2 flex-shrink-0">
+              <div
+                className={twMerge(
+                  "w-7 h-7 flex items-center justify-center font-medium text-mineshaft-800 text-sm rounded-full transition-all",
+                  isCompleted ? "bg-primary" : "border text-bunker-300 border-primary/30",
+                  isActive && "bg-primary text-mineshaft-800"
+                )}
+              >
+                {isCompleted ? <FontAwesomeIcon icon={faCheck} /> : index + 1}
+              </div>
+              {cloneElement(child as ReactElement, {
+                direction,
+                activeStep,
+                isCompleted,
+                isActive
+              })}
+            </div>
+            {isNotLast && (
+              <div
+                style={{ height: "1px" }}
+                className={twMerge("flex-grow bg-bunker-300/30", isCompleted && "bg-primary")}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export type StepProps = {
+  title: string;
+  description?: ReactNode;
+  // isActive?: boolean;
+  // isCompleted?: boolean;
+  // activeStep?: number;
+  // direction?: "vertical" | "horizontal";
+};
+
+export const Step = ({ title, description }: StepProps) => {
+  return (
+    <div className="flex flex-col text-gray-300">
+      <div className="font-medium text-sm">{title}</div>
+      {description && <div className="text-xs">{description}</div>}
+    </div>
+  );
+};

frontend/src/components/v2/Stepper/index.tsx

@@ -0,0 +1,2 @@
+export type { StepperProps,StepProps } from "./Stepper";
+export { Step,Stepper } from "./Stepper";

frontend/src/components/v2/index.tsx

@@ -22,6 +22,7 @@ export * from "./SecretInput";
 export * from "./Select";
 export * from "./Skeleton";
 export * from "./Spinner";
+export * from "./Stepper";
 export * from "./Switch";
 export * from "./Table";
 export * from "./Tabs";

frontend/src/context/OrgPermissionContext/OrgPermissionContext.tsx

@@ -1,6 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
 
 import { useGetUserOrgPermissions } from "@app/hooks/api";
+import { OrgUser } from "@app/hooks/api/types";
 
 import { useOrganization } from "../OrganizationContext";
 import { TOrgPermission } from "./types";
@@ -9,7 +10,10 @@ type Props = {
   children: ReactNode;
 };
 
-const OrgPermissionContext = createContext<null | TOrgPermission>(null);
+const OrgPermissionContext = createContext<null | {
+  permission: TOrgPermission;
+  membership: OrgUser | null;
+}>(null);
 
 export const OrgPermissionProvider = ({ children }: Props): JSX.Element => {
   const { currentOrg } = useOrganization();

frontend/src/context/ProjectPermissionContext/types.ts

@@ -21,7 +21,8 @@ export enum ProjectPermissionSub {
   Workspace = "workspace",
   Secrets = "secrets",
   SecretRollback = "secret-rollback",
-  SecretApproval = "secret-approval"
+  SecretApproval = "secret-approval",
+  SecretRotation = "secret-rotation"
 }
 
 type SubjectFields = {
@@ -45,6 +46,7 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Settings]
   | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
+  | [ProjectPermissionActions, ProjectPermissionSub.SecretRotation]
   | [ProjectPermissionActions.Delete, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Edit, ProjectPermissionSub.Workspace]
   | [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]

frontend/src/hoc/withPermission/withPermission.tsx

@@ -21,7 +21,7 @@ export const withPermission = <T extends {}, J extends TOrgPermission>(
   { action, subject, className, containerClassName }: Props<Generics<J>["abilities"]>
 ) => {
   const HOC = (hocProps: T) => {
-    const permission = useOrgPermission();
+    const { permission } = useOrgPermission();
 
     // akhilmhdh: Set as any due to casl/react ts type bug
     // REASON: casl due to its type checking can't seem to union even if union intersection is applied

frontend/src/hooks/api/index.tsx

@@ -12,6 +12,7 @@ export * from "./secretApproval";
 export * from "./secretApprovalRequest";
 export * from "./secretFolders";
 export * from "./secretImports";
+export * from "./secretRotation";
 export * from "./secrets";
 export * from "./secretSnapshots";
 export * from "./serviceAccounts";

frontend/src/hooks/api/integrationAuth/index.tsx

@@ -4,6 +4,7 @@ export {
   useGetIntegrationAuthApps,
   useGetIntegrationAuthBitBucketWorkspaces,
   useGetIntegrationAuthById,
+  useGetIntegrationAuthChecklyGroups,
   useGetIntegrationAuthNorthflankSecretGroups,
   useGetIntegrationAuthRailwayEnvironments,
   useGetIntegrationAuthRailwayServices,
@@ -11,4 +12,4 @@ export {
   useGetIntegrationAuthTeams,
   useGetIntegrationAuthVercelBranches,
   useSaveIntegrationAccessToken
-} from "./queries";
+} from "./queries";

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

@@ -6,14 +6,16 @@ import { workspaceKeys } from "../workspace/queries";
 import { 
   App, 
   BitBucketWorkspace, 
+  ChecklyGroup, 
   Environment, 
   IntegrationAuth, 
   NorthflankSecretGroup,
   Org,
   Project,
   Service, 
-  Team, 
-  TeamCityBuildConfig} from "./types";
+  Team,
+  TeamCityBuildConfig
+} from "./types";
 
 const integrationAuthKeys = {
   getIntegrationAuthById: (integrationAuthId: string) =>
@@ -29,6 +31,14 @@ const integrationAuthKeys = {
     integrationAuthId: string;
     appId: string;
   }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+  getIntegrationAuthChecklyGroups: ({
+    integrationAuthId,
+    accountId
+  }: {
+    integrationAuthId: string;
+    accountId: string;
+  }) => 
+  [{ integrationAuthId, accountId }, "integrationAuthChecklyGroups"] as const,
   getIntegrationAuthQoveryOrgs: (integrationAuthId: string) => 
   [{ integrationAuthId }, "integrationAuthQoveryOrgs"] as const,
   getIntegrationAuthQoveryProjects: ({
@@ -125,6 +135,24 @@ const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
   return data.teams;
 };
 
+const fetchIntegrationAuthChecklyGroups = async ({
+  integrationAuthId,
+  accountId
+}: {
+  integrationAuthId: string;
+  accountId: string;
+}) => {
+  const { data } = await apiRequest.get<{ groups: ChecklyGroup[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/checkly/groups`,
+    {
+      params: {
+        accountId
+      }
+    }
+  );
+
+  return data.groups;
+};
 
 const fetchIntegrationAuthVercelBranches = async ({
   integrationAuthId,
@@ -413,6 +441,26 @@ export const useGetIntegrationAuthVercelBranches = ({
   });
 };
 
+export const useGetIntegrationAuthChecklyGroups = ({
+  integrationAuthId,
+  accountId
+}: {
+  integrationAuthId: string;
+  accountId: string;
+}) => {
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthChecklyGroups({
+      integrationAuthId,
+      accountId
+    }),
+    queryFn: () => fetchIntegrationAuthChecklyGroups({
+      integrationAuthId,
+      accountId
+    }),
+    enabled: true
+  });
+};
+
 export const useGetIntegrationAuthQoveryOrgs = (integrationAuthId: string) => {
   return useQuery({
     queryKey: integrationAuthKeys.getIntegrationAuthQoveryOrgs(integrationAuthId),

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

@@ -26,6 +26,11 @@ export type Environment = {
   environmentId: string;
 };
 
+export type ChecklyGroup = {
+  name: string;
+  groupId: number;
+};
+
 export type Container = {
   name: string;
   containerId: string;

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

@@ -8,6 +8,7 @@ import { apiRequest } from "@app/config/request";
 import { OrgPermissionSet } from "@app/context/OrgPermissionContext/types";
 import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext/types";
 
+import { OrgUser } from "../users/types";
 import {
   TGetRolesDTO,
   TGetUserOrgPermissionsDTO,
@@ -63,13 +64,16 @@ export const useGetRoles = ({ orgId, workspaceId }: TGetRolesDTO) =>
   });
 
 const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
-  if (orgId === "") return [];
+  if (orgId === "") return { permissions: [], membership: null };
 
   const { data } = await apiRequest.get<{
-    data: { permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[] };
-  }>(`/api/v1/roles/organization/${orgId}/permissions`, {});
-  
-  return data.data.permissions;
+    data: {
+      permissions: PackRule<RawRuleOf<MongoAbility<OrgPermissionSet>>>[];
+      membership: OrgUser;
+    };
+  }>(`/api/v1/roles/organization/${orgId}/permissions`);
+
+  return data.data;
 };
 
 export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =>
@@ -78,9 +82,9 @@ export const useGetUserOrgPermissions = ({ orgId }: TGetUserOrgPermissionsDTO) =
     queryFn: () => getUserOrgPermissions({ orgId }),
     // enabled: Boolean(orgId),
     select: (data) => {
-      const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data);
+      const rule = unpackRules<RawRuleOf<MongoAbility<OrgPermissionSet>>>(data.permissions);
       const ability = createMongoAbility<OrgPermissionSet>(rule, { conditionsMatcher });
-      return ability;
+      return { permission: ability, membership: data.membership };
     }
   });
 

frontend/src/hooks/api/secretRotation/index.ts

@@ -0,0 +1,6 @@
+export {
+  useCreateSecretRotation,
+  useDeleteSecretRotation,
+  useRestartSecretRotation
+} from "./mutation";
+export { useGetSecretRotationProviders, useGetSecretRotations } from "./queries";

frontend/src/hooks/api/secretRotation/mutation.tsx

@@ -0,0 +1,52 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { secretRotationKeys } from "./queries";
+import {
+  TCreateSecretRotationDTO,
+  TDeleteSecretRotationDTO,
+  TRestartSecretRotationDTO
+} from "./types";
+
+export const useCreateSecretRotation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TCreateSecretRotationDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post("/api/v1/secret-rotations", dto);
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(secretRotationKeys.list({ workspaceId }));
+    }
+  });
+};
+
+export const useDeleteSecretRotation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteSecretRotationDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.delete(`/api/v1/secret-rotations/${dto.id}`);
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(secretRotationKeys.list({ workspaceId }));
+    }
+  });
+};
+
+export const useRestartSecretRotation = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TRestartSecretRotationDTO>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post("/api/v1/secret-rotations/restart", { id: dto.id });
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(secretRotationKeys.list({ workspaceId }));
+    }
+  });
+};

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

@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { apiRequest } from "@app/config/request";
+
+import {
+  TGetSecretRotationList,
+  TGetSecretRotationProviders,
+  TSecretRotation,
+  TSecretRotationProviderList
+} from "./types";
+
+export const secretRotationKeys = {
+  listProviders: ({ workspaceId }: TGetSecretRotationProviders) => [
+    { workspaceId },
+    "secret-rotation-providers"
+  ],
+  list: ({ workspaceId }: Omit<TGetSecretRotationList, "decryptFileKey">) =>
+    [{ workspaceId }, "secret-rotations"] as const
+};
+
+const fetchSecretRotationProviders = async ({ workspaceId }: TGetSecretRotationProviders) => {
+  const { data } = await apiRequest.get<TSecretRotationProviderList>(
+    `/api/v1/secret-rotation-providers/${workspaceId}`
+  );
+  return data;
+};
+
+export const useGetSecretRotationProviders = ({
+  workspaceId,
+  options = {}
+}: TGetSecretRotationProviders & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretRotationProviderList,
+      unknown,
+      TSecretRotationProviderList,
+      ReturnType<typeof secretRotationKeys.listProviders>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    ...options,
+    queryKey: secretRotationKeys.listProviders({ workspaceId }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true),
+    queryFn: async () => fetchSecretRotationProviders({ workspaceId })
+  });
+
+const fetchSecretRotations = async ({
+  workspaceId
+}: Omit<TGetSecretRotationList, "decryptFileKey">) => {
+  const { data } = await apiRequest.get<{ secretRotations: TSecretRotation[] }>(
+    "/api/v1/secret-rotations",
+    { params: { workspaceId } }
+  );
+  return data.secretRotations;
+};
+
+export const useGetSecretRotations = ({
+  workspaceId,
+  decryptFileKey,
+  options = {}
+}: TGetSecretRotationList & {
+  options?: Omit<
+    UseQueryOptions<
+      TSecretRotation[],
+      unknown,
+      TSecretRotation<{ key: string }>[],
+      ReturnType<typeof secretRotationKeys.list>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) =>
+  useQuery({
+    ...options,
+    queryKey: secretRotationKeys.list({ workspaceId }),
+    enabled: Boolean(workspaceId) && (options?.enabled ?? true),
+    queryFn: async () => fetchSecretRotations({ workspaceId }),
+    select: useCallback(
+      (data: TSecretRotation[]) => {
+        const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+        const decryptKey = decryptAssymmetric({
+          ciphertext: decryptFileKey.encryptedKey,
+          nonce: decryptFileKey.nonce,
+          publicKey: decryptFileKey.sender.publicKey,
+          privateKey: PRIVATE_KEY
+        });
+        return data.map((el) => ({
+          ...el,
+          outputs: el.outputs.map(({ key, secret }) => ({
+            key,
+            secret: {
+              key: decryptSymmetric({
+                ciphertext: secret.secretValueCiphertext,
+                iv: secret.secretValueIV,
+                tag: secret.secretValueTag,
+                key: decryptKey
+              })
+            }
+          }))
+        }));
+      },
+      [decryptFileKey]
+    )
+  });

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

@@ -0,0 +1,133 @@
+import { UserWsKeyPair } from "../keys/types";
+import { EncryptedSecret } from "../secrets/types";
+
+export enum TProviderFunctionTypes {
+  HTTP = "http",
+  DB = "database"
+}
+
+export enum TDbProviderClients {
+  // postgres, cockroack db, amazon red shift
+  Pg = "pg",
+  // mysql and maria db
+  Sql = "sql"
+}
+
+export enum TAssignOp {
+  Direct = "direct",
+  JmesPath = "jmesopath"
+}
+
+export type TJmesPathAssignOp = {
+  assign: TAssignOp.JmesPath;
+  path: string;
+};
+
+export type TDirectAssignOp = {
+  assign: TAssignOp.Direct;
+  value: string;
+};
+
+export type TAssignFunction = TJmesPathAssignOp | TDirectAssignOp;
+
+export type THttpProviderFunction = {
+  type: TProviderFunctionTypes.HTTP;
+  url: string;
+  method: string;
+  header?: Record<string, string>;
+  query?: Record<string, string>;
+  body?: Record<string, unknown>;
+  setter?: Record<string, TAssignFunction>;
+  pre?: Record<string, TDirectAssignOp>;
+};
+
+export type TDbProviderFunction = {
+  type: TProviderFunctionTypes.DB;
+  client: TDbProviderClients;
+  username: string;
+  password: string;
+  host: string;
+  database: string;
+  port: string;
+  query: string;
+  setter?: Record<string, TAssignFunction>;
+  pre?: Record<string, TDirectAssignOp>;
+};
+
+export type TProviderFunction = THttpProviderFunction | TDbProviderFunction;
+
+export type TProviderTemplate = {
+  inputs: {
+    properties: Record<string, { type: string; helperText?: string; defaultValue?: string }>;
+    type: "object";
+    required: string[];
+  };
+  outputs: Record<string, unknown>;
+  functions: {
+    set: TProviderFunction;
+    remove?: TProviderFunction;
+    test: TProviderFunction;
+  };
+};
+
+export type TSecretRotation<T extends unknown = EncryptedSecret> = {
+  _id: string;
+  interval: number;
+  provider: string;
+  customProvider: string;
+  workspace: string;
+  environment: string;
+  secretPath: string;
+  outputs: Array<{
+    key: string;
+    secret: T;
+  }>;
+  status?: "success" | "failed";
+  lastRotatedAt?: string;
+  statusMessage?: string;
+  algorithm: string;
+  keyEncoding: string;
+};
+
+export type TSecretRotationProvider = {
+  name: string;
+  image: string;
+  title: string;
+  description: string;
+  template: TProviderTemplate;
+};
+
+export type TSecretRotationProviderList = {
+  custom: TSecretRotationProvider[];
+  providers: TSecretRotationProvider[];
+};
+
+export type TGetSecretRotationProviders = {
+  workspaceId: string;
+};
+
+export type TGetSecretRotationList = {
+  workspaceId: string;
+  decryptFileKey: UserWsKeyPair;
+};
+
+export type TCreateSecretRotationDTO = {
+  workspaceId: string;
+  secretPath: string;
+  environment: string;
+  interval: number;
+  provider: string;
+  customProvider?: string;
+  inputs: Record<string, unknown>;
+  outputs: Record<string, string>;
+};
+
+export type TDeleteSecretRotationDTO = {
+  id: string;
+  workspaceId: string;
+};
+
+export type TRestartSecretRotationDTO = {
+  id: string;
+  workspaceId: string;
+};

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

@@ -88,14 +88,18 @@ export const useUpdateServiceTokenV3 = () => {
       isActive,
       scopes,
       trustedIps,
-      expiresIn
+      expiresIn,
+      accessTokenTTL,
+      isRefreshTokenRotationEnabled
     }) => {
       const { data: { serviceTokenData } } = await apiRequest.patch(`/api/v3/service-token/${serviceTokenDataId}`, {
         name,
         isActive,
         scopes,
         trustedIps,
-        expiresIn
+        expiresIn,
+        accessTokenTTL,
+        isRefreshTokenRotationEnabled
       });
 
       return serviceTokenData;

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

@@ -56,11 +56,15 @@ export type ServiceTokenDataV3 = {
   name: string;
   workspace: string;
   isActive: boolean;
-  lastUsed?: string;
-  usageCount: number;
+  refreshTokenLastUsed?: string;
+  accessTokenLastUsed?: string;
+  refreshTokenUsageCount: number;
+  accessTokenUsageCount: number;
   scopes: ServiceTokenV3Scope[];
   trustedIps: ServiceTokenV3TrustedIp[];
   expiresAt?: string;
+  accessTokenTTL: number;
+  isRefreshTokenRotationEnabled: boolean;
   createdAt: string;
   updatedAt: string;
 };
@@ -74,12 +78,14 @@ export type CreateServiceTokenDataV3DTO = {
     ipAddress: string;
   }[];
   expiresIn?: number;
+  accessTokenTTL: number;
   encryptedKey: string;
   nonce: string;
+  isRefreshTokenRotationEnabled: boolean;
 }
 
 export type CreateServiceTokenDataV3Res = {
-  serviceToken: string;
+  refreshToken: string;
   serviceTokenData: ServiceTokenDataV3;
 }
 
@@ -92,6 +98,8 @@ export type UpdateServiceTokenDataV3DTO = {
     ipAddress: string;
   }[];
   expiresIn?: number;
+  accessTokenTTL?: number;
+  isRefreshTokenRotationEnabled?: boolean;
 }
 
 export type DeleteServiceTokenDataV3DTO = {

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

@@ -12,6 +12,7 @@ export type SubscriptionPlan = {
   secretVersioning: boolean;
   slug: string;
   secretApproval: string;
+  secretRotation: string;
   tier: number;
   workspaceLimit: number;
   workspacesUsed: number;

frontend/src/hooks/api/types.ts

@@ -13,6 +13,12 @@ export type {
 export { ApprovalStatus, CommitType } from "./secretApprovalRequest/types";
 export type { TSecretFolder } from "./secretFolders/types";
 export type { TImportedSecrets, TSecretImports } from "./secretImports/types";
+export type {
+  TGetSecretRotationProviders,
+  TProviderTemplate,
+  TSecretRotationProvider,
+  TSecretRotationProviderList
+} from "./secretRotation/types";
 export * from "./secrets/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
 export type { SubscriptionPlan } from "./subscriptions/types";

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

@@ -34,7 +34,8 @@ export const workspaceKeys = {
   getUserWsEnvironments: (workspaceId: string) => ["workspace-env", { workspaceId }] as const,
   getWorkspaceAuditLogs: (workspaceId: string) => [{ workspaceId }] as const,
   getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }] as const,
-  getWorkspaceServiceTokenDataV3: (workspaceId: string) => [{ workspaceId }, "workspace-service-token-data-v3"] as const
+  getWorkspaceServiceTokenDataV3: (workspaceId: string) =>
+    [{ workspaceId }, "workspace-service-token-data-v3"] as const
 };
 
 const fetchWorkspaceById = async (workspaceId: string) => {
@@ -53,7 +54,7 @@ const fetchWorkspaceIndexStatus = async (workspaceId: string) => {
   return data;
 };
 
-const fetchWorkspaceSecrets = async (workspaceId: string) => {
+export const fetchWorkspaceSecrets = async (workspaceId: string) => {
   const {
     data: { secrets }
   } = await apiRequest.get<{ secrets: EncryptedSecret[] }>(
@@ -253,9 +254,18 @@ export const useReorderWsEnvironment = () => {
   const queryClient = useQueryClient();
 
   return useMutation<{}, {}, ReorderEnvironmentsDTO>({
-    mutationFn: ({ workspaceID, environmentSlug, environmentName, otherEnvironmentSlug, otherEnvironmentName}) => {
+    mutationFn: ({
+      workspaceID,
+      environmentSlug,
+      environmentName,
+      otherEnvironmentSlug,
+      otherEnvironmentName
+    }) => {
       return apiRequest.patch(`/api/v2/workspace/${workspaceID}/environments`, {
-        environmentSlug, environmentName, otherEnvironmentSlug, otherEnvironmentName
+        environmentSlug,
+        environmentName,
+        otherEnvironmentSlug,
+        otherEnvironmentName
       });
     },
     onSuccess: () => {
@@ -378,4 +388,4 @@ export const useGetWorkspaceServiceTokenDataV3 = (workspaceId: string) => {
     },
     enabled: true
   });
-};
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -319,7 +319,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             </Button>
                           </DropdownMenuItem>
                         ))}
-                        <DropdownMenuItem key="add-org">
+                        {/* <DropdownMenuItem key="add-org">
                           <Button
                             onClick={() => handlePopUpOpen("createOrg")}
                             variant="plain"
@@ -334,7 +334,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                               Create New Organization
                             </div>
                           </Button>
-                        </DropdownMenuItem>
+                        </DropdownMenuItem> */}
                         <div className="mt-1 h-1 border-t border-mineshaft-600" />
                         <button type="button" onClick={logOutUser} className="w-full">
                           <DropdownMenuItem>Log Out</DropdownMenuItem>
@@ -497,6 +497,18 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
+                      <Link href={`/project/${currentWorkspace?._id}/secret-rotation`} passHref>
+                        <a className="relative">
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/project/${currentWorkspace?._id}/secret-rotation`
+                            }
+                            icon="rotation"
+                          >
+                            Secret Rotation
+                          </MenuItem>
+                        </a>
+                      </Link>
                       <Link href={`/project/${currentWorkspace?._id}/approval`} passHref>
                         <a className="relative">
                           <MenuItem
@@ -505,7 +517,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                             }
                             icon="system-outline-189-domain-verification"
                           >
-                            Secret approvals
+                            Secret Approvals
                             {Boolean(secretApprovalReqCount?.open) && (
                               <span className="ml-2 rounded border border-primary-400 bg-primary-600 py-0.5 px-1 text-xs font-semibold text-black">
                                 {secretApprovalReqCount?.open}

frontend/src/pages/integrations/checkly/create.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare, faBookOpen, faBugs, faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBookOpen, faBugs } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { motion } from "framer-motion";
 import queryString from "query-string";
@@ -27,7 +27,8 @@ import {
 
 import {
   useGetIntegrationAuthApps,
-  useGetIntegrationAuthById
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthChecklyGroups
 } from "../../../hooks/api/integrationAuth";
 import { useGetWorkspaceById } from "../../../hooks/api/workspace";
 
@@ -42,20 +43,24 @@ export default function ChecklyCreateIntegrationPage() {
 
   const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
 
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [secretSuffix, setSecretSuffix] = useState("");
+
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetGroupId, setTargetGroupId] = useState("");
+
+  const [isLoading, setIsLoading] = useState(false);
+
   const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
   const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
   const { data: integrationAuthApps, isLoading: isIntegrationAuthAppsLoading } = useGetIntegrationAuthApps({
     integrationAuthId: (integrationAuthId as string) ?? ""
   });
-
-  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
-  const [secretPath, setSecretPath] = useState("/");
-  const [secretSuffix, setSecretSuffix] = useState("");
-
-  const [targetApp, setTargetApp] = useState("");
-  const [targetAppId, setTargetAppId] = useState("");
-
-  const [isLoading, setIsLoading] = useState(false);
+  const { data: integrationAuthGroups, isLoading: isintegrationAuthGroupsLoading } = useGetIntegrationAuthChecklyGroups({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    accountId: targetAppId
+  });
 
   useEffect(() => {
     if (workspace) {
@@ -64,13 +69,11 @@ export default function ChecklyCreateIntegrationPage() {
   }, [workspace]);
 
   useEffect(() => {
-    // TODO: handle case where apps can be empty
     if (integrationAuthApps) {
       if (integrationAuthApps.length > 0) {
-        setTargetApp(integrationAuthApps[0].name);
-        setTargetAppId(String(integrationAuthApps[0].appId));
+        setTargetAppId(integrationAuthApps[0].appId as string);
       } else {
-        setTargetApp("none");
+        setTargetAppId("none");
       }
     }
   }, [integrationAuthApps]);
@@ -81,12 +84,23 @@ export default function ChecklyCreateIntegrationPage() {
 
       setIsLoading(true);
 
+      const targetApp = integrationAuthApps?.find(
+        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      );
+      const targetGroup = integrationAuthGroups?.find(
+        (group) => group.groupId === Number(targetGroupId)
+      );
+      
+      if (!targetApp) return;
+      
       await mutateAsync({
         integrationAuthId: integrationAuth?._id,
         isActive: true,
-        app: targetApp,
-        appId: targetAppId,
+        app: targetApp?.name,
+        appId: targetApp?.appId,
         sourceEnvironment: selectedSourceEnvironment,
+        targetService: targetGroup?.name,
+        targetServiceId: targetGroup?.groupId ? String(targetGroup?.groupId) : undefined,
         secretPath,
         metadata: {
           secretSuffix
@@ -104,9 +118,10 @@ export default function ChecklyCreateIntegrationPage() {
   return integrationAuth &&
     workspace &&
     selectedSourceEnvironment &&
-    integrationAuthApps &&
-    targetApp ? (
-    <div className="flex flex-col h-full w-full items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
+    integrationAuthApps && 
+    integrationAuthGroups &&
+    targetAppId ? (
+    <div className="flex h-full flex-col w-full py-6 items-center justify-center bg-gradient-to-tr from-mineshaft-900 to-bunker-900">
       <Head>
         <title>Set Up Checkly Integration</title>
         <link rel='icon' href='/infisical.ico' />
@@ -177,16 +192,16 @@ export default function ChecklyCreateIntegrationPage() {
               </FormControl>
               <FormControl label="Checkly Account">
                 <Select
-                  value={targetApp}
-                  onValueChange={(val) => setTargetApp(val)}
+                  value={targetAppId}
+                  onValueChange={(val) => setTargetAppId(val)}
                   className="w-full border border-mineshaft-500"
                   isDisabled={integrationAuthApps.length === 0}
                 >
                   {integrationAuthApps.length > 0 ? (
                     integrationAuthApps.map((integrationAuthApp) => (
                       <SelectItem
-                        value={integrationAuthApp.name}
-                        key={`target-app-${integrationAuthApp.name}`}
+                        value={integrationAuthApp.appId as string}
+                        key={`target-app-${integrationAuthApp.appId as string}`}
                       >
                         {integrationAuthApp.name}
                       </SelectItem>
@@ -198,6 +213,28 @@ export default function ChecklyCreateIntegrationPage() {
                   )}
                 </Select>
               </FormControl>
+              <FormControl label="Checkly Group (Optional)">
+                <Select
+                  value={targetGroupId}
+                  onValueChange={(val) => setTargetGroupId(val)}
+                  className="w-full border border-mineshaft-500"
+                >
+                  {integrationAuthGroups.length > 0 ? (
+                    integrationAuthGroups.map((integrationAuthGroup) => (
+                      <SelectItem
+                        value={String(integrationAuthGroup.groupId)}
+                        key={`target-group-${String(integrationAuthGroup.groupId)}`}
+                      >
+                        {integrationAuthGroup.name}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="none" key="target-group-none">
+                      No groups found
+                    </SelectItem>
+                  )}
+                </Select>
+              </FormControl>
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>
@@ -229,12 +266,6 @@ export default function ChecklyCreateIntegrationPage() {
           Create Integration
         </Button>
       </Card>
-      <div className="border-t border-mineshaft-800 w-full max-w-md mt-6"/>
-      <div className="flex flex-col bg-mineshaft-800 border border-mineshaft-600 w-full p-4 max-w-lg mt-6 rounded-md">
-        <div className="flex flex-row items-center"><FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-200 text-xl"/> <span className="ml-3 text-md text-mineshaft-100">Pro Tips</span></div>
-        <span className="text-mineshaft-300 text-sm mt-4">After creating an integration, your secrets will start syncing immediately. This might cause an unexpected override of current secrets in Checkly with secrets from Infisical.</span>
-        <span className="text-mineshaft-300 text-sm mt-4">If you have multiple Checkly integrations and are using suffixes for at least one of them, you will have to add suffixes for all the active Checkly integrations – otherwise you might run into rare unexpected behavior.</span>
-      </div>
     </div>
   ) : (
     <div className="flex justify-center items-center w-full h-full">
@@ -242,7 +273,7 @@ export default function ChecklyCreateIntegrationPage() {
         <title>Set Up Checkly Integration</title>
         <link rel='icon' href='/infisical.ico' />
       </Head>
-      {isIntegrationAuthAppsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
+      {isIntegrationAuthAppsLoading || isintegrationAuthGroupsLoading ? <img src="/images/loading/loading.gif" height={70} width={120} alt="infisical loading indicator" /> : <div className="max-w-md h-max p-6 border border-mineshaft-600 rounded-md bg-mineshaft-800 text-mineshaft-200 flex flex-col text-center">
         <FontAwesomeIcon icon={faBugs} className="text-6xl my-2 inlineli"/>
         <p>
           Something went wrong. Please contact <a

frontend/src/pages/project/[id]/secret-rotation/index.tsx

@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { SecretRotationPage } from "@app/views/SecretRotationPage";
+
+const SecretRotation = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full bg-bunker-800">
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <SecretRotationPage />
+    </div>
+  );
+};
+
+export default SecretRotation;
+
+SecretRotation.requireAuth = true;

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -54,7 +54,7 @@ export const IntegrationsSection = ({
         </div>
       )}
 
-      {!isBotActive && (
+      {!isBotActive && Boolean(integrations.length) && (
         <div className="px-6 py-4">
           <Alert hideTitle variant="warning">
             <AlertDescription>
@@ -119,7 +119,7 @@ export const IntegrationsSection = ({
                     {integrationSlugNameMapping[integration.integration]}
                   </div>
                 </div>
-                {(integration.integration === "qovery") && (
+                {integration.integration === "qovery" && (
                   <div className="flex flex-row">
                     <div className="ml-2 flex flex-col">
                       <FormLabel label="Org" />
@@ -163,12 +163,22 @@ export const IntegrationsSection = ({
                   </div>
                 )}
                 {((integration.integration === "checkly") || (integration.integration === "github")) && (
-                  <div className="ml-2 flex flex-col">
-                    <FormLabel label="Secret Suffix" />
-                    <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
-                      {integration?.metadata?.secretSuffix || "-"}
+                  <>
+                    {integration.targetService && (
+                      <div className="ml-2">
+                        <FormLabel label="Group" />
+                        <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                          {integration.targetService}
+                        </div>
+                      </div>
+                    )}
+                    <div className="ml-2">
+                      <FormLabel label="Secret Suffix" />
+                      <div className="rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200">
+                        {integration?.metadata?.secretSuffix || "-"}
+                      </div>
                     </div>
-                  </div>
+                  </>
                 )}
               </div>
               <div className="flex cursor-default items-center">

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -41,6 +41,7 @@ import {
 } from "@app/hooks/api";
 
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
+import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 
@@ -259,6 +260,7 @@ export const SecretOverviewPage = () => {
 
   return (
     <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+      <ProjectIndexSecretsSection decryptFileKey={latestFileKey!} />
       <div className="relative right-5 ml-4">
         <NavHeader pageName={t("dashboard.title")} isProjectRelated />
       </div>

frontend/src/views/SecretOverviewPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -0,0 +1,98 @@
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  decryptAssymmetric,
+  decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { Button, Spinner } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetWorkspaceIndexStatus, useNameWorkspaceSecrets } from "@app/hooks/api";
+import { UserWsKeyPair } from "@app/hooks/api/types";
+import { fetchWorkspaceSecrets } from "@app/hooks/api/workspace/queries";
+
+// TODO: add check so that this only shows up if user is
+// an admin in the workspace
+type Props = {
+  decryptFileKey: UserWsKeyPair;
+};
+
+export const ProjectIndexSecretsSection = ({ decryptFileKey }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(
+    currentWorkspace?._id ?? ""
+  );
+  const [isIndexing, setIsIndexing] = useToggle();
+  const nameWorkspaceSecrets = useNameWorkspaceSecrets();
+
+  const onEnableBlindIndices = async () => {
+    if (!currentWorkspace?._id) return;
+    setIsIndexing.on();
+    try {
+      const encryptedSecrets = await fetchWorkspaceSecrets(currentWorkspace._id);
+
+      const key = decryptAssymmetric({
+        ciphertext: decryptFileKey.encryptedKey,
+        nonce: decryptFileKey.nonce,
+        publicKey: decryptFileKey.sender.publicKey,
+        privateKey: localStorage.getItem("PRIVATE_KEY") as string
+      });
+
+      const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
+        const secretName = decryptSymmetric({
+          ciphertext: encryptedSecret.secretKeyCiphertext,
+          iv: encryptedSecret.secretKeyIV,
+          tag: encryptedSecret.secretKeyTag,
+          key
+        });
+
+        return {
+          secretName,
+          _id: encryptedSecret._id
+        };
+      });
+      await nameWorkspaceSecrets.mutateAsync({
+        workspaceId: currentWorkspace._id,
+        secretsToUpdate
+      });
+    } catch (err) {
+      console.log(err);
+    } finally {
+      setIsIndexing.off();
+    }
+  };
+
+  return !isBlindIndexedLoading && !isBlindIndexed ? (
+    <div className="p-4 mt-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+      {isIndexing && (
+        <div className="w-screen absolute top-0 left-0 h-screen z-50 bg-bunker-500 bg-opacity-80 flex items-center justify-center">
+          <Spinner size="lg" className="text-primary" />
+          <div className="flex flex-col space-y-1 ml-4">
+            <div className="text-3xl font-medium">Please wait</div>
+            <span className="inline-block">Re-indexing your secrets...</span>
+          </div>
+        </div>
+      )}
+      <p className="mb-2 text-lg font-semibold">Enable Blind Indices</p>
+      <p className="text-gray-400 mb-4 leading-7">
+        Your project was created before the introduction of blind indexing. 
+        To continue accessing secrets by name through the SDK, public API and web dashboard, please enable blind
+        indexing. <b>This is a one time process.</b>
+      </p>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+        {(isAllowed) => (
+          <Button
+            onClick={onEnableBlindIndices}
+            isDisabled={!isAllowed}
+            color="mineshaft"
+            type="submit"
+            isLoading={isIndexing}
+          >
+            Enable Blind Indexing
+          </Button>
+        )}
+      </ProjectPermissionCan>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/SecretRotationPage/SecretRotationPage.tsx

@@ -0,0 +1,407 @@
+import { useTranslation } from "react-i18next";
+import {
+  faArrowsSpin,
+  faExclamationTriangle,
+  faFolder,
+  faInfoCircle,
+  faRotate,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Modal,
+  ModalContent,
+  Skeleton,
+  Spinner,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import {
+  useDeleteSecretRotation,
+  useGetSecretRotationProviders,
+  useGetSecretRotations,
+  useGetUserWsKey,
+  useGetWorkspaceBot,
+  useRestartSecretRotation,
+  useUpdateBotActiveStatus
+} from "@app/hooks/api";
+import { TSecretRotationProvider } from "@app/hooks/api/types";
+
+import { CreateRotationForm } from "./components/CreateRotationForm";
+import { generateBotKey } from "./SecretRotationPage.utils";
+
+export const SecretRotationPage = withProjectPermission(
+  () => {
+    const { currentWorkspace } = useWorkspace();
+    const { t } = useTranslation();
+    const permission = useProjectPermission();
+    const { createNotification } = useNotificationContext();
+    const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+      "createRotation",
+      "activeBot",
+      "deleteRotation",
+      "upgradePlan"
+    ] as const);
+    const workspaceId = currentWorkspace?._id || "";
+    const canCreateRotation = permission.can(
+      ProjectPermissionActions.Create,
+      ProjectPermissionSub.SecretRotation
+    );
+    const { subscription } = useSubscription();
+
+    const { data: userWsKey } = useGetUserWsKey(workspaceId);
+
+    const { data: secretRotationProviders, isLoading: isRotationProviderLoading } =
+      useGetSecretRotationProviders({ workspaceId });
+    const { data: secretRotations, isLoading: isRotationLoading } = useGetSecretRotations({
+      workspaceId,
+      decryptFileKey: userWsKey!
+    });
+
+    const {
+      mutateAsync: deleteSecretRotation,
+      variables: deleteSecretRotationVars,
+      isLoading: isDeletingRotation
+    } = useDeleteSecretRotation();
+    const {
+      mutateAsync: restartSecretRotation,
+      variables: restartSecretRotationVar,
+      isLoading: isRestartingRotation
+    } = useRestartSecretRotation();
+
+    const { data: bot } = useGetWorkspaceBot(workspaceId);
+    const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
+
+    const isBotActive = Boolean(bot?.isActive);
+
+    const handleDeleteRotation = async () => {
+      const { id } = popUp.deleteRotation.data as { id: string };
+      try {
+        await deleteSecretRotation({
+          id,
+          workspaceId
+        });
+        handlePopUpClose("deleteRotation");
+        createNotification({
+          type: "success",
+          text: "Successfully removed rotation"
+        });
+      } catch (error) {
+        console.log(error);
+        createNotification({
+          type: "error",
+          text: "Failed to remove rotation"
+        });
+      }
+    };
+
+    const handleRestartRotation = async (id: string) => {
+      try {
+        await restartSecretRotation({
+          id,
+          workspaceId
+        });
+        createNotification({
+          type: "success",
+          text: "Secret rotation  initiated"
+        });
+      } catch (error) {
+        console.log(error);
+        createNotification({
+          type: "error",
+          text: "Failed to restart rotation"
+        });
+      }
+    };
+
+    const handleUserAcceptBotCondition = async () => {
+      const provider = popUp.activeBot?.data as TSecretRotationProvider;
+      try {
+        if (bot?._id) {
+          const botKey = generateBotKey(bot.publicKey, userWsKey!);
+          await updateBotActiveStatus({
+            isActive: true,
+            botId: bot._id,
+            workspaceId,
+            botKey
+          });
+        }
+        handlePopUpOpen("createRotation", provider);
+        handlePopUpClose("activeBot");
+      } catch (error) {
+        console.log(error);
+        createNotification({
+          type: "error",
+          text: "Failed to create bot"
+        });
+      }
+    };
+
+    const handleCreateRotation = async (provider: TSecretRotationProvider) => {
+      if (subscription && !subscription?.secretRotation) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+      if (!canCreateRotation) {
+        createNotification({ type: "error", text: "Access permission denied!!" });
+        return;
+      }
+      if (isBotActive) {
+        handlePopUpOpen("createRotation", provider);
+      } else {
+        handlePopUpOpen("activeBot", provider);
+      }
+    };
+
+    return (
+      <div className="container mx-auto bg-bunker-800 text-white w-full h-full max-w-7xl px-6">
+        <div className="my-6">
+          <h2 className="text-3xl font-semibold text-gray-200">Secret Rotation</h2>
+          <p className="text-bunker-300">Auto rotate secrets for better security</p>
+        </div>
+        <div className="mb-6">
+          <div className="text-xl font-semibold text-gray-200 mb-2">Rotated Secrets</div>
+          <div className="flex flex-col space-y-2">
+            <TableContainer>
+              <Table>
+                <THead>
+                  <Tr>
+                    <Th>Secret Name</Th>
+                    <Th>Environment</Th>
+                    <Th>Provider</Th>
+                    <Th>Status</Th>
+                    <Th>Last Rotation</Th>
+                    <Th className="text-right">Action</Th>
+                  </Tr>
+                </THead>
+                <TBody>
+                  {isRotationLoading && (
+                    <TableSkeleton
+                      innerKey="secret-rotation-loading"
+                      columns={6}
+                      className="bg-mineshaft-700"
+                    />
+                  )}
+                  {!isRotationLoading && secretRotations?.length === 0 && (
+                    <Tr>
+                      <Td colSpan={6}>
+                        <EmptyState title="No rotation strategy found" icon={faArrowsSpin} />
+                      </Td>
+                    </Tr>
+                  )}
+                  {secretRotations?.map(
+                    ({
+                      environment,
+                      secretPath,
+                      outputs,
+                      provider,
+                      _id,
+                      lastRotatedAt,
+                      status,
+                      statusMessage
+                    }) => {
+                      const isDeleting = deleteSecretRotationVars?.id === _id && isDeletingRotation;
+                      const isRestarting =
+                        restartSecretRotationVar?.id === _id && isRestartingRotation;
+                      return (
+                        <Tr key={_id}>
+                          <Td>
+                            {outputs
+                              .map(({ key }) => key)
+                              .join(",")
+                              .toUpperCase()}
+                          </Td>
+                          <Td>
+                            <div className="flex items-center border border-bunker-400 rounded p-1 px-2 w-min">
+                              <div>{environment}</div>
+                              <div className="flex items-center border-l border-bunker-400 pl-1 ml-1 text-xs">
+                                <FontAwesomeIcon icon={faFolder} className="mr-1" />
+                                {secretPath}
+                              </div>
+                            </div>
+                          </Td>
+                          <Td>{provider}</Td>
+                          <Td>
+                            <div className="flex items-center">
+                              {status}
+                              {status === "failed" && (
+                                <Tooltip content={statusMessage}>
+                                  <FontAwesomeIcon
+                                    icon={faExclamationTriangle}
+                                    size="sm"
+                                    className="ml-2 text-red"
+                                  />
+                                </Tooltip>
+                              )}
+                            </div>
+                          </Td>
+                          <Td>
+                            {lastRotatedAt
+                              ? formatDistance(new Date(lastRotatedAt), new Date())
+                              : "-"}
+                          </Td>
+                          <Td>
+                            <div className="flex space-x-2 justify-end">
+                              <ProjectPermissionCan
+                                I={ProjectPermissionActions.Edit}
+                                a={ProjectPermissionSub.SecretRotation}
+                                allowedLabel="Rotate now"
+                                renderTooltip
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    variant="plain"
+                                    colorSchema="danger"
+                                    ariaLabel="delete-rotation"
+                                    isDisabled={isDeleting || !isAllowed}
+                                    onClick={() => handleRestartRotation(_id)}
+                                  >
+                                    {isRestarting ? (
+                                      <Spinner size="xs" />
+                                    ) : (
+                                      <FontAwesomeIcon icon={faRotate} />
+                                    )}
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                              <ProjectPermissionCan
+                                I={ProjectPermissionActions.Delete}
+                                a={ProjectPermissionSub.SecretRotation}
+                                allowedLabel="Rotate now"
+                                renderTooltip
+                              >
+                                {(isAllowed) => (
+                                  <IconButton
+                                    variant="plain"
+                                    colorSchema="danger"
+                                    ariaLabel="delete-rotation"
+                                    isDisabled={isDeleting || !isAllowed}
+                                    onClick={() => handlePopUpOpen("deleteRotation", { id: _id })}
+                                  >
+                                    {isDeleting ? (
+                                      <Spinner size="xs" />
+                                    ) : (
+                                      <FontAwesomeIcon icon={faTrash} />
+                                    )}
+                                  </IconButton>
+                                )}
+                              </ProjectPermissionCan>
+                            </div>
+                          </Td>
+                        </Tr>
+                      );
+                    }
+                  )}
+                </TBody>
+              </Table>
+            </TableContainer>
+          </div>
+        </div>
+        <div className="text-xl font-semibold text-gray-200 mb-2">Infisical Rotation Providers</div>
+        <div className="grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
+          {isRotationProviderLoading &&
+            Array.from({ length: 12 }).map((_, index) => (
+              <Skeleton className="h-32" key={`rotation-provider-skeleton-${index + 1}`} />
+            ))}
+          {!isRotationProviderLoading &&
+            secretRotationProviders?.providers.map((provider) => (
+              <div
+                className="group relative cursor-pointer h-32 flex flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
+                key={`infisical-rotation-provider-${provider.name}`}
+                tabIndex={0}
+                role="button"
+                onKeyDown={(evt) => {
+                  if (evt.key === "Enter") handlePopUpOpen("createRotation", provider);
+                }}
+                onClick={() => handleCreateRotation(provider)}
+              >
+                <img
+                  src={`/images/secretRotation/${provider.image}`}
+                  height={70}
+                  width={70}
+                  alt="rotation provider logo"
+                />
+                <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
+                  {provider.title}
+                </div>
+                <div className="group-hover:opacity-100 transition-all opacity-0 absolute top-1 right-1">
+                  <Tooltip content={provider.description} sideOffset={10}>
+                    <FontAwesomeIcon icon={faInfoCircle} className="text-bunker-300" />
+                  </Tooltip>
+                </div>
+              </div>
+            ))}
+        </div>
+        <CreateRotationForm
+          isOpen={popUp.createRotation.isOpen}
+          workspaceId={workspaceId}
+          onToggle={(isOpen) => handlePopUpToggle("createRotation", isOpen)}
+          provider={(popUp.createRotation.data as TSecretRotationProvider) || {}}
+        />
+        <Modal
+          isOpen={popUp.activeBot?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("activeBot", isOpen)}
+        >
+          <ModalContent
+            title={t("integrations.grant-access-to-secrets") as string}
+            footerContent={
+              <div className="flex items-center space-x-2">
+                <Button onClick={() => handleUserAcceptBotCondition()}>
+                  {t("integrations.grant-access-button") as string}
+                </Button>
+                <Button
+                  onClick={() => handlePopUpClose("activeBot")}
+                  variant="outline_bg"
+                  colorSchema="secondary"
+                >
+                  Cancel
+                </Button>
+              </div>
+            }
+          >
+            {t("integrations.why-infisical-needs-access")}
+          </ModalContent>
+        </Modal>
+        <DeleteActionModal
+          isOpen={popUp.deleteRotation.isOpen}
+          title="Are you sure want to delete this rotation?"
+          subTitle="This will stop the rotation from dynamically changing. Secret won't be deleted"
+          onChange={(isOpen) => handlePopUpToggle("deleteRotation", isOpen)}
+          deleteKey="delete"
+          onDeleteApproved={handleDeleteRotation}
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can add secret rotation if you switch to Infisical's Team plan."
+        />
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.SecretRotation }
+);

frontend/src/views/SecretRotationPage/SecretRotationPage.utils.ts

@@ -0,0 +1,30 @@
+import { UserWsKeyPair } from "@app/hooks/api/types";
+
+import {
+  decryptAssymmetric,
+  encryptAssymmetric
+} from "../../components/utilities/cryptography/crypto";
+
+// refactor these to common function in frontend
+export const generateBotKey = (botPublicKey: string, latestKey: UserWsKeyPair) => {
+  const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
+
+  if (!PRIVATE_KEY) {
+    throw new Error("Private Key missing");
+  }
+
+  const WORKSPACE_KEY = decryptAssymmetric({
+    ciphertext: latestKey.encryptedKey,
+    nonce: latestKey.nonce,
+    publicKey: latestKey.sender.publicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  const { ciphertext, nonce } = encryptAssymmetric({
+    plaintext: WORKSPACE_KEY,
+    publicKey: botPublicKey,
+    privateKey: PRIVATE_KEY
+  });
+
+  return { encryptedKey: ciphertext, nonce };
+};

frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx

@@ -0,0 +1,145 @@
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Modal, ModalContent, Step, Stepper } from "@app/components/v2";
+import { useCreateSecretRotation } from "@app/hooks/api";
+import { TSecretRotationProvider } from "@app/hooks/api/types";
+
+import { RotationInputForm } from "./steps/RotationInputForm";
+import {
+  RotationOutputForm,
+  TFormSchema as TRotationOutputSchema
+} from "./steps/RotationOutputForm";
+
+const WIZARD_STEPS = [
+  {
+    title: "Inputs",
+    description: "Provider secrets"
+  },
+  {
+    title: "Outputs",
+    description: "Map rotated secrets to keys"
+  }
+];
+
+type Props = {
+  isOpen?: boolean;
+  onToggle: (isOpen: boolean) => void;
+  customProvider?: string;
+  workspaceId: string;
+  provider: TSecretRotationProvider;
+};
+
+export const CreateRotationForm = ({
+  isOpen,
+  onToggle,
+  provider,
+  workspaceId,
+  customProvider
+}: Props) => {
+  const [wizardStep, setWizardStep] = useState(0);
+  const wizardData = useRef<{
+    input?: Record<string, string>;
+    output?: TRotationOutputSchema;
+  }>({});
+  const { createNotification } = useNotificationContext();
+
+  const { mutateAsync: createSecretRotation } = useCreateSecretRotation();
+
+  const handleFormCancel = () => {
+    onToggle(false);
+    setWizardStep(0);
+    wizardData.current = {};
+  };
+
+  const handleFormSubmit = async () => {
+    if (!wizardData.current.input || !wizardData.current.output) return;
+    try {
+      await createSecretRotation({
+        workspaceId,
+        provider: provider.name,
+        customProvider,
+        secretPath: wizardData.current.output.secretPath,
+        environment: wizardData.current.output.environment,
+        interval: wizardData.current.output.interval,
+        inputs: wizardData.current.input,
+        outputs: wizardData.current.output.secrets
+      });
+      setWizardStep(0);
+      onToggle(false);
+      wizardData.current = {};
+    } catch (error) {
+      console.log(error);
+      createNotification({
+        type: "error",
+        text: "Failed to create secret rotation"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(state) => {
+        onToggle(state);
+        setWizardStep(0);
+        wizardData.current = {};
+      }}
+    >
+      <ModalContent
+        title={`Secret rotation for ${provider.name}`}
+        subTitle="Provide the required inputs needed for the rotation"
+        className="max-w-2xl"
+      >
+        <Stepper activeStep={wizardStep} direction="horizontal" className="mb-4">
+          {WIZARD_STEPS.map(({ title, description }, index) => (
+            <Step
+              title={title}
+              description={description}
+              key={`wizard-stepper-rotation-${index + 1}`}
+            />
+          ))}
+        </Stepper>
+        <AnimatePresence exitBeforeEnter>
+          {wizardStep === 0 && (
+            <motion.div
+              key="input-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <RotationInputForm
+                onCancel={handleFormCancel}
+                onSubmit={(data) => {
+                  wizardData.current.input = data;
+                  setWizardStep((state) => state + 1);
+                }}
+                inputSchema={provider.template?.inputs || {}}
+              />
+            </motion.div>
+          )}
+          {wizardStep === 1 && (
+            <motion.div
+              key="output-step"
+              transition={{ duration: 0.1 }}
+              initial={{ opacity: 0, translateX: 30 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: -30 }}
+            >
+              <RotationOutputForm
+                outputSchema={provider.template?.outputs || {}}
+                onCancel={handleFormCancel}
+                onSubmit={async (data) => {
+                  wizardData.current.output = data;
+                  await handleFormSubmit();
+                }}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/SecretRotationPage/components/CreateRotationForm/index.tsx

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

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationInputForm.tsx

@@ -0,0 +1,78 @@
+import { Controller, useForm } from "react-hook-form";
+import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, FormLabel, SecretInput, Tooltip } from "@app/components/v2";
+
+type Props = {
+  onSubmit: (data: Record<string, string>) => void;
+  onCancel: () => void;
+  inputSchema: {
+    properties: Record<string, { type: string; desc?: string; default?: string }>;
+    required: string[];
+  };
+};
+
+const formSchema = z.record(z.string().trim().optional());
+
+export const RotationInputForm = ({ onSubmit, onCancel, inputSchema }: Props) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<Record<string, string>>({
+    resolver: zodResolver(formSchema)
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {Object.keys(inputSchema.properties || {}).map((inputName) => (
+        <Controller
+          control={control}
+          name={inputName}
+          key={`provider-input-${inputName}`}
+          defaultValue={inputSchema.properties[inputName]?.default}
+          render={({ field }) => (
+            <FormControl
+              key={`provider-input-${inputName}`}
+              label={
+                <div className="flex items-center space-x-2">
+                  <FormLabel className="uppercase mb-0" label={inputName.replaceAll("_", " ")} />
+                  {Boolean(inputSchema.properties[inputName]?.desc) && (
+                    <Tooltip
+                      className="max-w-xs"
+                      content={inputSchema.properties[inputName]?.desc}
+                      position="right"
+                    >
+                      <FontAwesomeIcon
+                        icon={faQuestionCircle}
+                        size="xs"
+                        className="text-bunker-300"
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+              }
+            >
+              <SecretInput
+                {...field}
+                containerClassName="normal-case text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
+                required={inputSchema.required.includes(inputName)}
+              />
+            </FormControl>
+          )}
+        />
+      ))}
+      <div className="mt-8 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+          Next
+        </Button>
+        <Button onClick={onCancel} colorSchema="secondary" variant="plain">
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/SecretRotationPage/components/CreateRotationForm/steps/RotationOutputForm.tsx

@@ -0,0 +1,153 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, Input, Select, SelectItem, Spinner } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
+
+const formSchema = z.object({
+  environment: z.string().trim(),
+  secretPath: z.string().trim().default("/"),
+  interval: z.number().min(1),
+  secrets: z.record(z.string())
+});
+
+export type TFormSchema = z.infer<typeof formSchema>;
+type Props = {
+  outputSchema: Record<string, unknown>;
+  onSubmit: (data: TFormSchema) => void;
+  onCancel: () => void;
+};
+
+export const RotationOutputForm = ({ onSubmit, onCancel, outputSchema = {} }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const environments = currentWorkspace?.environments || [];
+  const workspaceId = currentWorkspace?._id || "";
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isSubmitting }
+  } = useForm<TFormSchema>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const environment = watch("environment", environments?.[0]?.slug);
+  const secretPath = watch("secretPath");
+  const selectedSecrets = watch("secrets");
+
+  const { data: userWsKey } = useGetUserWsKey(workspaceId);
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
+    workspaceId,
+    environment,
+    secretPath,
+    decryptFileKey: userWsKey!
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="environment"
+        defaultValue={environments?.[0]?.slug}
+        render={({ field: { value, onChange } }) => (
+          <FormControl label="Environment">
+            <Select
+              value={value}
+              onValueChange={(val) => onChange(val)}
+              className="w-full border border-mineshaft-500"
+              defaultValue={environments?.[0]?.slug}
+              position="popper"
+            >
+              {environments.map((sourceEnvironment) => (
+                <SelectItem
+                  value={sourceEnvironment.slug}
+                  key={`source-environment-${sourceEnvironment.slug}`}
+                >
+                  {sourceEnvironment.name}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="secretPath"
+        defaultValue="/"
+        render={({ field }) => (
+          <FormControl className="capitalize" label="Secret path">
+            <Input {...field} />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="interval"
+        defaultValue={15}
+        render={({ field }) => (
+          <FormControl className="capitalize" label="Rotation Interval (Days)">
+            <Input
+              {...field}
+              min={1}
+              type="number"
+              onChange={(evt) => field.onChange(parseInt(evt.target.value, 10))}
+            />
+          </FormControl>
+        )}
+      />
+      <div className="flex flex-col mt-4 pt-4 mb-2 border-t border-bunker-300/30">
+        <div>Mapping</div>
+        <div className="text-bunker-300 text-sm">Select keys for rotated value to get saved</div>
+      </div>
+      {Object.keys(outputSchema).map((outputName) => (
+        <Controller
+          key={`provider-output-${outputName}`}
+          control={control}
+          name={`secrets.${outputName}`}
+          render={({ field: { value, onChange } }) => (
+            <FormControl className="uppercase" label={outputName.replaceAll("_", " ")} isRequired>
+              <Select
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+              >
+                {!isSecretsLoading &&
+                  secrets
+                    ?.filter(
+                      ({ _id }) =>
+                        value === _id || !Object.values(selectedSecrets || {}).includes(_id)
+                    )
+                    ?.map(({ key, _id }) => (
+                      <SelectItem value={_id} key={_id}>
+                        {key}
+                      </SelectItem>
+                    ))}
+                {isSecretsLoading && (
+                  <SelectItem value="Loading" isDisabled>
+                    <Spinner size="xs" />
+                  </SelectItem>
+                )}
+                {!isSecretsLoading && secrets?.length === 0 && (
+                  <SelectItem value="Empty" isDisabled>
+                    No secrets found
+                  </SelectItem>
+                )}
+              </Select>
+            </FormControl>
+          )}
+        />
+      ))}
+      <div className="mt-8 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
+          Submit
+        </Button>
+        <Button onClick={onCancel} colorSchema="secondary" variant="plain">
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/SecretRotationPage/index.tsx

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

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

@@ -1,81 +1,70 @@
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
-import { useOrganization, useUser } from "@app/context";
-import {
-    useDeleteOrgById,
-    useGetOrgUsers
-} from "@app/hooks/api";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { useOrganization, useOrgPermission } from "@app/context";
+import { useDeleteOrgById } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 
 export const OrgDeleteSection = () => {
-    const router = useRouter();
-    const { currentOrg } = useOrganization();
-    const { user } = useUser();
-    const { createNotification } = useNotificationContext();
-    const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
-    
-    const membershipOrg = members?.find((member) => member.user._id === user._id);
+  const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { membership } = useOrgPermission();
 
-    const { popUp, handlePopUpOpen, handlePopUpClose,  handlePopUpToggle } = usePopUp([
-        "deleteOrg"
-    ] as const);
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteOrg"
+  ] as const);
 
-    const { mutateAsync, isLoading } = useDeleteOrgById();
-    
-    const handleDeleteOrgSubmit = async () => {
-        try {
-            if (!currentOrg?._id) return;
-            
-            await mutateAsync({
-                organizationId: currentOrg?._id
-            });
-        
-            createNotification({
-                text: "Successfully deleted organization",
-                type: "success"
-            });
+  const { mutateAsync, isLoading } = useDeleteOrgById();
 
-            await navigateUserToOrg(router);
-            
-            handlePopUpClose("deleteOrg");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete organization",
-                type: "error"
-            });
-        }
+  const handleDeleteOrgSubmit = async () => {
+    try {
+      if (!currentOrg?._id) return;
+
+      await mutateAsync({
+        organizationId: currentOrg?._id
+      });
+
+      createNotification({
+        text: "Successfully deleted organization",
+        type: "success"
+      });
+
+      await navigateUserToOrg(router);
+
+      handlePopUpClose("deleteOrg");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete organization",
+        type: "error"
+      });
     }
+  };
 
-    return (
-        <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
-            <p className="text-xl font-semibold text-mineshaft-100 mb-4">
-                Danger Zone
-            </p>
-            <Button
-                isLoading={isLoading}
-                colorSchema="danger"
-                variant="outline_bg"
-                type="submit"
-                onClick={() => handlePopUpOpen("deleteOrg")}
-                isDisabled={(membershipOrg && membershipOrg.role !== "admin")}
-            >
-                {`Delete ${currentOrg?.name}`}
-            </Button>
-            <DeleteActionModal
-                isOpen={popUp.deleteOrg.isOpen}
-                title="Are you sure want to delete this organization?"
-                subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
-                onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={handleDeleteOrgSubmit}
-            />
-        </div>
-    );
-}
+  return (
+    <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600 mb-6">
+      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Danger Zone</p>
+      <Button
+        isLoading={isLoading}
+        colorSchema="danger"
+        variant="outline_bg"
+        type="submit"
+        onClick={() => handlePopUpOpen("deleteOrg")}
+        isDisabled={Boolean(membership && membership.role !== "admin")}
+      >
+        {`Delete ${currentOrg?.name}`}
+      </Button>
+      <DeleteActionModal
+        isOpen={popUp.deleteOrg.isOpen}
+        title="Are you sure want to delete this organization?"
+        subTitle={`Permanently remove ${currentOrg?.name} and all of its data. This action is not reversible, so please be careful.`}
+        onChange={(isOpen) => handlePopUpToggle("deleteOrg", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleDeleteOrgSubmit}
+      />
+    </div>
+  );
+};

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

@@ -1,24 +1,17 @@
-import { useOrganization, useUser } from "@app/context";
-import { useGetOrgUsers } from "@app/hooks/api";
+import { useOrgPermission } from "@app/context";
 
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
 
 export const OrgGeneralTab = () => {
-  const { currentOrg } = useOrganization();
-  const { user } = useUser();
-  const { data: members } = useGetOrgUsers(currentOrg?._id ?? "");
-
-  const membershipOrg = members?.find((member) => member.user._id === user?._id);
+  const { membership } = useOrgPermission();
 
   return (
     <div>
       <OrgNameChangeSection />
       <OrgIncidentContactsSection />
-      {(membershipOrg && membershipOrg.role === "admin") && (
-        <OrgDeleteSection />
-      )}
+      {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
 };

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

@@ -15,7 +15,7 @@ export const OrgIncidentContactsSection = () => {
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "addContact"
   ] as const);
-  const permission = useOrgPermission();
+  const { permission } = useOrgPermission();
 
   return (
     <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">

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

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

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

@@ -2,20 +2,18 @@ import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { E2EESection } from "../E2EESection";
 import { EnvironmentSection } from "../EnvironmentSection";
-import { ProjectIndexSecretsSection } from "../ProjectIndexSecretsSection";
 import { ProjectNameChangeSection } from "../ProjectNameChangeSection";
 import { SecretTagsSection } from "../SecretTagsSection";
 
 export const ProjectGeneralTab = () => {
-    return (
-        <div>
-            <ProjectNameChangeSection />
-            <EnvironmentSection />
-            <SecretTagsSection />
-            <AutoCapitalizationSection />
-            <ProjectIndexSecretsSection />
-            <E2EESection />
-            <DeleteProjectSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <ProjectNameChangeSection />
+      <EnvironmentSection />
+      <SecretTagsSection />
+      <AutoCapitalizationSection />
+      <E2EESection />
+      <DeleteProjectSection />
+    </div>
+  );
+};

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

@@ -1,84 +0,0 @@
-import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  decryptAssymmetric,
-  decryptSymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import { Button } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import {
-  useGetUserWsKey,
-  useGetWorkspaceIndexStatus,
-  useGetWorkspaceSecrets,
-  useNameWorkspaceSecrets
-} from "@app/hooks/api";
-
-// TODO: add check so that this only shows up if user is
-// an admin in the workspace
-
-export const ProjectIndexSecretsSection = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { data: isBlindIndexed, isLoading: isBlindIndexedLoading } = useGetWorkspaceIndexStatus(
-    currentWorkspace?._id ?? ""
-  );
-  const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
-  const { data: encryptedSecrets } = useGetWorkspaceSecrets(currentWorkspace?._id ?? "");
-  const nameWorkspaceSecrets = useNameWorkspaceSecrets();
-
-  const onEnableBlindIndices = async () => {
-    if (!currentWorkspace?._id) return;
-    if (!encryptedSecrets) 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 secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
-      const secretName = decryptSymmetric({
-        ciphertext: encryptedSecret.secretKeyCiphertext,
-        iv: encryptedSecret.secretKeyIV,
-        tag: encryptedSecret.secretKeyTag,
-        key
-      });
-
-      return {
-        secretName,
-        _id: encryptedSecret._id
-      };
-    });
-
-    await nameWorkspaceSecrets.mutateAsync({
-      workspaceId: currentWorkspace._id,
-      secretsToUpdate
-    });
-  };
-
-  return !isBlindIndexedLoading && !isBlindIndexed ? (
-    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-      <p className="mb-3 text-xl font-semibold">Blind Indices</p>
-      <p className="text-gray-400 mb-8">
-        Your project, created before the introduction of blind indexing, contains unindexed secrets.
-        To access individual secrets by name through the SDK and public API, please enable blind
-        indexing.
-      </p>
-      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
-        {(isAllowed) => (
-          <Button
-            onClick={onEnableBlindIndices}
-            isDisabled={!isAllowed}
-            color="mineshaft"
-            size="sm"
-            type="submit"
-          >
-            Enable Blind Indexing
-          </Button>
-        )}
-      </ProjectPermissionCan>
-    </div>
-  ) : (
-    <div />
-  );
-};

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

@@ -1,8 +1,9 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form"; 
-import { faPlus,faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCopy,faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
+import { motion } from "framer-motion";
 import nacl from "tweetnacl";
 import { encodeBase64 } from "tweetnacl-util";
 import * as yup from "yup";
@@ -21,12 +22,17 @@ import {
     ModalContent,
     Select,
     SelectItem,
-    UpgradePlanModal
-} from "@app/components/v2";
+    Switch,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+    UpgradePlanModal} from "@app/components/v2";
 import {
     useSubscription,
     useWorkspace 
 } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { 
     useCreateServiceTokenV3,
     useGetUserWsKey,
@@ -41,8 +47,13 @@ import {
 } from "@app/hooks/api/serviceTokens/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+enum TabSections {
+    General = "general",
+    Advanced = "advanced"
+}
+
 const expirations = [
-    { label: "Never", value: undefined },
+    { label: "Never", value: "" },
     { label: "1 day", value: "86400" },
     { label: "7 days", value: "604800" },
     { label: "1 month", value: "2592000" },
@@ -60,6 +71,17 @@ const permissionsMap: {
 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({
@@ -79,14 +101,15 @@ const schema = yup.object({
         .required()
         .label("Scope"),
     trustedIps: yup
-    .array(
-      yup.object({
-        ipAddress: yup.string().max(50).required().label("IP Address")
-      })
-    )
-    .min(1)
-    .required()
-    .label("Trusted IP")
+        .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>;
@@ -102,6 +125,9 @@ export const AddServiceTokenV3Modal = ({
     handlePopUpOpen,
     handlePopUpToggle
 }: Props) => {
+    const [newServiceTokenJSON, setNewServiceTokenJSON] = useState("");
+    const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
+
     const { subscription } = useSubscription();
     const { currentWorkspace } = useWorkspace();
 
@@ -118,6 +144,7 @@ export const AddServiceTokenV3Modal = ({
         resolver: yupResolver(schema),
         defaultValues: {
             name: "",
+            accessTokenTTL: "7200",
             scopes: [{ 
                 permission: "read",
                 environment: currentWorkspace?.environments?.[0]?.slug,
@@ -128,6 +155,21 @@ export const AddServiceTokenV3Modal = ({
             }]
         }
     });
+
+    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 { 
@@ -135,6 +177,8 @@ export const AddServiceTokenV3Modal = ({
             name: string;
             scopes: ServiceTokenV3Scope[];
             trustedIps: ServiceTokenV3TrustedIp[];
+            accessTokenTTL: number;
+            isRefreshTokenRotationEnabled: boolean;
         };
         
         if (serviceTokenData) {
@@ -163,11 +207,14 @@ export const AddServiceTokenV3Modal = ({
                     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,
@@ -186,8 +233,10 @@ export const AddServiceTokenV3Modal = ({
     const onFormSubmit = async ({
         name,
         expiresIn,
+        accessTokenTTL,
         scopes,
-        trustedIps
+        trustedIps,
+        isRefreshTokenRotationEnabled
     }: FormData) => {
         try {
             const serviceTokenData = popUp?.serviceTokenV3?.data as { 
@@ -213,8 +262,12 @@ export const AddServiceTokenV3Modal = ({
                     name,
                     scopes: reformattedScopes,
                     trustedIps,
-                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn)
+                    expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
+                    accessTokenTTL: Number(accessTokenTTL),
+                    isRefreshTokenRotationEnabled
                 });
+                
+                handlePopUpToggle("serviceTokenV3", false);
             } else {
                 // create
                 if (!currentWorkspace?._id) return;
@@ -239,24 +292,29 @@ export const AddServiceTokenV3Modal = ({
                     privateKey: localStorage.getItem("PRIVATE_KEY") as string
                 });
 
-                const { serviceToken } = await createMutateAsync({
+                const { refreshToken } = await createMutateAsync({
                     name,
                     workspaceId: currentWorkspace._id,
                     publicKey,
                     scopes: reformattedScopes,
                     trustedIps,
                     expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
+                    accessTokenTTL: Number(accessTokenTTL),
                     encryptedKey: ciphertext,
-                    nonce
+                    nonce,
+                    isRefreshTokenRotationEnabled
                 });
                 
                 const downloadData = {
-                    publicKey,
-                    privateKey,
-                    serviceToken
+                    public_key: publicKey,
+                    private_key: privateKey,
+                    refresh_token: refreshToken
                 };
 
-                const blob = new Blob([JSON.stringify(downloadData, null, 2)], { type: "application/json" });
+                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;
@@ -272,7 +330,6 @@ export const AddServiceTokenV3Modal = ({
             });
 
             reset();
-            handlePopUpToggle("serviceTokenV3", false);
         } catch (err) {
             console.error(err);
             createNotification({
@@ -281,6 +338,8 @@ export const AddServiceTokenV3Modal = ({
             });
         }
     }
+
+    const hasServiceTokenJSON = Boolean(newServiceTokenJSON);
     
     return (
         <Modal
@@ -288,232 +347,305 @@ export const AddServiceTokenV3Modal = ({
                 onOpenChange={(isOpen) => {
                 handlePopUpToggle("serviceTokenV3", isOpen);
                 reset();
+                setNewServiceTokenJSON("");
             }}
         >
             <ModalContent title={`${popUp?.serviceTokenV3?.data ? "Update" : "Create"} Service Token V3`}>
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <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"
+                {!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 }}
                                 >
-                                <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>
-                    {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}
+                                    <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"
                                         >
-                                        <Input 
-                                            value={field.value}
-                                            onChange={(e) => {
+                                            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) {
-                                                    field.onChange(e);
+                                                    appendTrustedIp({
+                                                        ipAddress: "0.0.0.0/0"
+                                                    })
                                                     return;
                                                 }
-                                                
+
                                                 handlePopUpOpen("upgradePlan");
                                             }}
-                                            placeholder="123.456.789.0" 
+                                            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>
+                                            )}
                                         />
-                                        </FormControl>
-                                    );
-                                }}
-                            />
-                            <IconButton
-                                onClick={() => {
-                                    if (subscription?.ipAllowlisting) {
-                                        removeTrustedIp(index);
-                                        return;
-                                    }
-                                    
-                                    handlePopUpOpen("upgradePlan");
-                                }}
-                                size="lg"
-                                colorSchema="danger"
-                                variant="plain"
-                                ariaLabel="update"
-                                className="p-3"
+                                        <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}
                             >
-                                <FontAwesomeIcon icon={faXmark} />
-                            </IconButton>
+                                {popUp?.serviceTokenV3?.data ? "Update" : "Create"}
+                            </Button>
+                            <Button colorSchema="secondary" variant="plain">
+                                Cancel
+                            </Button>
                         </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"
+                    </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}
                         >
-                            Add IP Address
-                        </Button>
+                            <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>
-                    <Controller
-                        control={control}
-                        name="expiresIn"
-                        defaultValue="15552000"
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Expire 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>
-                        )}
-                    />
-                    <div className="mt-8 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>
+                )}
                 <UpgradePlanModal
                     isOpen={popUp?.upgradePlan?.isOpen}
                     onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

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

@@ -34,6 +34,8 @@ type Props = {
         name?: string;
         scopes?: ServiceTokenV3Scope[];
         trustedIps?: ServiceTokenV3TrustedIp[];
+        accessTokenTTL?: number;
+        isRefreshTokenRotationEnabled?: boolean;
       }
     ) => void;
   };
@@ -81,10 +83,9 @@ export const ServiceTokenV3Table = ({
                         <Th>Status</Th>
                         <Th>Scopes</Th>
                         <Th>Trusted IPs</Th>
-                        {/* <Th># Times Used</Th> */}
-                        <Th>Last Used</Th>
+                        <Th>Access Token TTL</Th>
                         <Th>Created At</Th>
-                        <Th>Expires At</Th>
+                        <Th>Valid Until</Th>
                         <Th className="w-5" />
                     </Tr>
                 </THead>
@@ -97,12 +98,12 @@ export const ServiceTokenV3Table = ({
                         _id,
                         name,
                         isActive,
-                        lastUsed,
-                        // usageCount,
                         scopes,
                         trustedIps,
                         createdAt,
-                        expiresAt
+                        expiresAt,
+                        accessTokenTTL,
+                        isRefreshTokenRotationEnabled
                     }) => {
                         return (
                             <Tr className="h-10" key={`st-v3-${_id}`}>
@@ -160,8 +161,7 @@ export const ServiceTokenV3Table = ({
                                         );
                                     })}
                                 </Td> 
-                                {/* <Td>{usageCount}</Td> */}
-                                <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</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">
@@ -176,7 +176,9 @@ export const ServiceTokenV3Table = ({
                                                         serviceTokenDataId: _id,
                                                         name,
                                                         scopes,
-                                                        trustedIps
+                                                        trustedIps,
+                                                        accessTokenTTL,
+                                                        isRefreshTokenRotationEnabled
                                                     });
                                                 }}
                                                 size="lg"

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

@@ -2,7 +2,6 @@ export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
 export { DeleteProjectSection } from "./DeleteProjectSection";
 export { E2EESection } from "./E2EESection";
 export { EnvironmentSection } from "./EnvironmentSection";
-export { ProjectIndexSecretsSection } from "./ProjectIndexSecretsSection";
 export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
 export { SecretTagsSection } from "./SecretTagsSection";
 export { ServiceTokenSection } from "./ServiceTokenSection";

frontend/tsconfig.json

@@ -2,15 +2,16 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/components/*": ["./src/components/*"],
-      "~/hooks/*": ["./src/hooks/*"],
-      "~/utilities/*": ["./src/components/utilities/*"],
-      "~/*": ["./src/const"],
-      "~/pages/*": ["./src/pages/*"],
-      "@app/*": ["./src/*"]
+      "@app/*": [
+        "./src/*"
+      ]
     },
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -25,6 +26,14 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-i18next.config.js", "next-env.d.ts", "./src/**/*.ts", "./src/**/*.tsx", "./.eslintrc.js"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-i18next.config.js",
+    "next-env.d.ts",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./.eslintrc.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }