Fix merge conflicts

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAzureClientSecretRotationGeneratedCredentials.tsx

@@ -0,0 +1,38 @@
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+import { TAzureClientSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/azure-client-secret-rotation";
+
+import { ViewRotationGeneratedCredentialsDisplay } from "./shared";
+
+type Props = {
+  generatedCredentialsResponse: TAzureClientSecretRotationGeneratedCredentialsResponse;
+};
+
+export const ViewAzureClientSecretRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {activeCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {inactiveCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ViewAuth0ClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials";
+import { ViewAzureClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAzureClientSecretRotationGeneratedCredentials";
 import { ViewLdapPasswordRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewLdapPasswordRotationGeneratedCredentials";
 import { Modal, ModalContent, Spinner } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
@@ -75,6 +76,13 @@ const Content = ({ secretRotation }: ContentProps) => {
         />
       );
       break;
+    case SecretRotation.AzureClientSecret:
+      Component = (
+        <ViewAzureClientSecretRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
     case SecretRotation.LdapPassword:
       Component = (
         <ViewLdapPasswordRotationGeneratedCredentials

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/AzureClientSecretRotationParametersFields.tsx

@@ -0,0 +1,75 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { useAzureConnectionListClients } from "@app/hooks/api/appConnections/azure";
+import { TAzureClient } from "@app/hooks/api/appConnections/azure/types";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const AzureClientSecretRotationParametersFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const connectionId = watch("connection.id");
+
+  const { data: clients, isPending: isClientsPending } = useAzureConnectionListClients(
+    connectionId,
+    { enabled: Boolean(connectionId) }
+  );
+
+  return (
+    <Controller
+      name="parameters.objectId"
+      control={control}
+      render={({ field: { value, onChange }, fieldState: { error } }) => (
+        <FormControl
+          isError={Boolean(error)}
+          errorText={error?.message}
+          label="Application"
+          helperText={
+            <Tooltip
+              className="max-w-md"
+              content={
+                <>
+                  Ensure that your connection has the{" "}
+                  <span className="font-semibold">
+                    Application.ReadWrite.All, Directory.ReadWrite.All,
+                    Application.ReadWrite.OwnedBy, user_impersonation and User.Read
+                  </span>{" "}
+                  permissions and the application exists in Azure.
+                </>
+              }
+            >
+              <div>
+                <span>Don&#39;t see the application you&#39;re looking for?</span>{" "}
+                <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+              </div>
+            </Tooltip>
+          }
+        >
+          <FilterableSelect
+            menuPlacement="top"
+            isLoading={isClientsPending && Boolean(connectionId)}
+            isDisabled={!connectionId}
+            value={clients?.find((client) => client.id === value) ?? null}
+            onChange={(option) => {
+              onChange((option as SingleValue<TAzureClient>)?.id ?? null);
+              setValue("parameters.appName", (option as SingleValue<TAzureClient>)?.name ?? "");
+              setValue("parameters.clientId", (option as SingleValue<TAzureClient>)?.appId ?? "");
+            }}
+            options={clients}
+            placeholder="Select an application..."
+            getOptionLabel={(option) => option.name}
+            getOptionValue={(option) => option.id}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -5,6 +5,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationParametersFields } from "./Auth0ClientSecretRotationParametersFields";
 import { AwsIamUserSecretRotationParametersFields } from "./AwsIamUserSecretRotationParametersFields";
+import { AzureClientSecretRotationParametersFields } from "./AzureClientSecretRotationParametersFields";
 import { LdapPasswordRotationParametersFields } from "./LdapPasswordRotationParametersFields";
 import { SqlCredentialsRotationParametersFields } from "./shared";
 
@@ -12,6 +13,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationParametersFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationParametersFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationParametersFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationParametersFields
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/AzureClientSecretRotationReviewFields.tsx

@@ -0,0 +1,30 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./shared";
+
+export const AzureClientSecretRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const [parameters, { clientId, clientSecret }] = watch(["parameters", "secretsMapping"]);
+
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="App Name">{parameters.appName}</GenericFieldLabel>
+        <GenericFieldLabel label="App ID">{parameters.objectId}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Client ID">{clientId}</GenericFieldLabel>
+        <GenericFieldLabel label="Client Secret">{clientSecret}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -8,6 +8,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 import { Auth0ClientSecretRotationReviewFields } from "./Auth0ClientSecretRotationReviewFields";
 import { AwsIamUserSecretRotationReviewFields } from "./AwsIamUserSecretRotationReviewFields";
+import { AzureClientSecretRotationReviewFields } from "./AzureClientSecretRotationReviewFields";
 import { LdapPasswordRotationReviewFields } from "./LdapPasswordRotationReviewFields";
 import { SqlCredentialsRotationReviewFields } from "./shared";
 
@@ -15,6 +16,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationReviewFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationReviewFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationReviewFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationReviewFields
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/AzureClientSecretRotationSecretsMappingFields.tsx

@@ -0,0 +1,58 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./shared";
+
+export const AzureClientSecretRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const { rotationOption } = useSecretRotationV2Option(SecretRotation.AzureClientSecret);
+
+  const items = [
+    {
+      name: "Client ID",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientId}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientId"
+        />
+      )
+    },
+    {
+      name: "Client Secret",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientSecret}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientSecret"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -5,6 +5,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationSecretsMappingFields } from "./Auth0ClientSecretRotationSecretsMappingFields";
 import { AwsIamUserSecretRotationSecretsMappingFields } from "./AwsIamUserSecretRotationSecretsMappingFields";
+import { AzureClientSecretRotationSecretsMappingFields } from "./AzureClientSecretRotationSecretsMappingFields";
 import { LdapPasswordRotationSecretsMappingFields } from "./LdapPasswordRotationSecretsMappingFields";
 import { SqlCredentialsRotationSecretsMappingFields } from "./shared";
 
@@ -12,6 +13,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationSecretsMappingFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationSecretsMappingFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationSecretsMappingFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationSecretsMappingFields
 };

frontend/src/components/secret-rotations-v2/forms/schemas/azure-client-secret-rotation-schema.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const AzureClientSecretRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.AzureClientSecret),
+    parameters: z.object({
+      objectId: z.string().trim().min(1, "Object ID required"),
+      appName: z.string().trim().min(1, "App Name required"),
+      clientId: z.string().trim().min(1, "Client ID required")
+    }),
+    secretsMapping: z.object({
+      clientId: z.string().trim().min(1, "Client ID required"),
+      clientSecret: z.string().trim().min(1, "Client Secret required")
+    })
+  })
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/index.ts

@@ -2,14 +2,16 @@ import { z } from "zod";
 
 import { Auth0ClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/auth0-client-secret-rotation-schema";
 import { AwsIamUserSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/aws-iam-user-secret-rotation-schema";
+import { AzureClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/azure-client-secret-rotation-schema";
 import { LdapPasswordRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/ldap-password-rotation-schema";
 import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
 import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
 
 const SecretRotationUnionSchema = z.discriminatedUnion("type", [
+  Auth0ClientSecretRotationSchema,
+  AzureClientSecretRotationSchema,
   PostgresCredentialsRotationSchema,
   MsSqlCredentialsRotationSchema,
-  Auth0ClientSecretRotationSchema,
   LdapPasswordRotationSchema,
   AwsIamUserSecretRotationSchema
 ]);

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -19,6 +19,7 @@ type Props = {
   formContent?: ReactNode;
   children?: ReactNode;
   deletionMessage?: ReactNode;
+  buttonColorSchema?: "danger" | "primary" | "secondary" | "gray" | null;
 };
 
 export const DeleteActionModal = ({
@@ -32,6 +33,7 @@ export const DeleteActionModal = ({
   buttonText = "Delete",
   formContent,
   deletionMessage,
+  buttonColorSchema = "danger",
   children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -67,7 +69,7 @@ export const DeleteActionModal = ({
           <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
-              colorSchema="danger"
+              colorSchema={buttonColorSchema}
               isDisabled={!(deleteKey === inputData) || isLoading}
               onClick={onDelete}
               isLoading={isLoading}

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -93,6 +93,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
             onFocus={(evt) => {
               onFocus?.(evt);
               setIsSecretFocused.on();
+              evt.currentTarget.select();
             }}
             disabled={isDisabled}
             spellCheck={false}

frontend/src/helpers/appConnections.ts

@@ -13,6 +13,7 @@ import {
   Auth0ConnectionMethod,
   AwsConnectionMethod,
   AzureAppConfigurationConnectionMethod,
+  AzureClientSecretsConnectionMethod,
   AzureKeyVaultConnectionMethod,
   CamundaConnectionMethod,
   DatabricksConnectionMethod,
@@ -44,6 +45,10 @@ export const APP_CONNECTION_MAP: Record<
     name: "Azure App Configuration",
     image: "Microsoft Azure.png"
   },
+  [AppConnection.AzureClientSecrets]: {
+    name: "Azure Client Secrets",
+    image: "Microsoft Azure.png"
+  },
   [AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" },
   [AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" },
   [AppConnection.TerraformCloud]: { name: "Terraform Cloud", image: "Terraform Cloud.png" },
@@ -63,6 +68,7 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
       return { name: "GitHub App", icon: faGithub };
     case AzureKeyVaultConnectionMethod.OAuth:
     case AzureAppConfigurationConnectionMethod.OAuth:
+    case AzureClientSecretsConnectionMethod.OAuth:
     case GitHubConnectionMethod.OAuth:
       return { name: "OAuth", icon: faPassport };
     case AwsConnectionMethod.AccessKey:

frontend/src/helpers/secretRotationsV2.ts

@@ -20,6 +20,11 @@ export const SECRET_ROTATION_MAP: Record<
     image: "Auth0.png",
     size: 35
   },
+  [SecretRotation.AzureClientSecret]: {
+    name: "Azure Client Secret",
+    image: "Microsoft Azure.png",
+    size: 65
+  },
   [SecretRotation.LdapPassword]: {
     name: "LDAP Password",
     image: "LDAP.png",
@@ -36,6 +41,7 @@ export const SECRET_ROTATION_CONNECTION_MAP: Record<SecretRotation, AppConnectio
   [SecretRotation.PostgresCredentials]: AppConnection.Postgres,
   [SecretRotation.MsSqlCredentials]: AppConnection.MsSql,
   [SecretRotation.Auth0ClientSecret]: AppConnection.Auth0,
+  [SecretRotation.AzureClientSecret]: AppConnection.AzureClientSecrets,
   [SecretRotation.LdapPassword]: AppConnection.LDAP,
   [SecretRotation.AwsIamUserSecret]: AppConnection.AWS
 };
@@ -45,6 +51,7 @@ export const IS_ROTATION_DUAL_CREDENTIALS: Record<SecretRotation, boolean> = {
   [SecretRotation.PostgresCredentials]: true,
   [SecretRotation.MsSqlCredentials]: true,
   [SecretRotation.Auth0ClientSecret]: false,
+  [SecretRotation.AzureClientSecret]: true,
   [SecretRotation.LdapPassword]: false,
   [SecretRotation.AwsIamUserSecret]: true
 };

frontend/src/hooks/api/appConnections/azure/index.ts

@@ -0,0 +1 @@
+export * from "./queries";

frontend/src/hooks/api/appConnections/azure/queries.tsx

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { appConnectionKeys } from "../queries";
+import { TAzureClient } from "./types";
+
+const azureConnectionKeys = {
+  all: [...appConnectionKeys.all, "azure"] as const,
+  listClients: (connectionId: string) =>
+    [...azureConnectionKeys.all, "clients", connectionId] as const
+};
+
+export const useAzureConnectionListClients = (
+  connectionId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TAzureClient[],
+      unknown,
+      TAzureClient[],
+      ReturnType<typeof azureConnectionKeys.listClients>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: azureConnectionKeys.listClients(connectionId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ clients: TAzureClient[] }>(
+        `/api/v1/app-connections/azure-client-secrets/${connectionId}/clients`
+      );
+
+      return data.clients;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/appConnections/azure/types.ts

@@ -0,0 +1,5 @@
+export type TAzureClient = {
+  name: string;
+  appId: string;
+  id: string;
+};

frontend/src/hooks/api/appConnections/enums.ts

@@ -4,6 +4,7 @@ export enum AppConnection {
   GCP = "gcp",
   AzureKeyVault = "azure-key-vault",
   AzureAppConfiguration = "azure-app-configuration",
+  AzureClientSecrets = "azure-client-secrets",
   Databricks = "databricks",
   Humanitec = "humanitec",
   TerraformCloud = "terraform-cloud",

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -31,6 +31,11 @@ export type TAzureAppConfigurationConnectionOption = TAppConnectionOptionBase &
   oauthClientId?: string;
 };
 
+export type TAzureClientSecretsConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.AzureClientSecrets;
+  oauthClientId?: string;
+};
+
 export type TDatabricksConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Databricks;
 };
@@ -81,6 +86,7 @@ export type TAppConnectionOption =
   | TGcpConnectionOption
   | TAzureAppConfigurationConnectionOption
   | TAzureKeyVaultConnectionOption
+  | TAzureClientSecretsConnectionOption
   | TDatabricksConnectionOption
   | THumanitecConnectionOption
   | TTerraformCloudConnectionOption
@@ -98,6 +104,7 @@ export type TAppConnectionOptionMap = {
   [AppConnection.GCP]: TGcpConnectionOption;
   [AppConnection.AzureKeyVault]: TAzureKeyVaultConnectionOption;
   [AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnectionOption;
+  [AppConnection.AzureClientSecrets]: TAzureClientSecretsConnectionOption;
   [AppConnection.Databricks]: TDatabricksConnectionOption;
   [AppConnection.Humanitec]: THumanitecConnectionOption;
   [AppConnection.TerraformCloud]: TTerraformCloudConnectionOption;

frontend/src/hooks/api/appConnections/types/azure-client-secrets-connection.ts

@@ -0,0 +1,16 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum AzureClientSecretsConnectionMethod {
+  OAuth = "oauth"
+}
+
+export type TAzureClientSecretsConnection = TRootAppConnection & {
+  app: AppConnection.AzureClientSecrets;
+} & {
+  method: AzureClientSecretsConnectionMethod.OAuth;
+  credentials: {
+    code: string;
+    tenantId: string;
+  };
+};

frontend/src/hooks/api/appConnections/types/index.ts

@@ -3,6 +3,7 @@ import { TAppConnectionOption } from "./app-options";
 import { TAuth0Connection } from "./auth0-connection";
 import { TAwsConnection } from "./aws-connection";
 import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
+import { TAzureClientSecretsConnection } from "./azure-client-secrets-connection";
 import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
 import { TCamundaConnection } from "./camunda-connection";
 import { TDatabricksConnection } from "./databricks-connection";
@@ -20,6 +21,7 @@ import { TWindmillConnection } from "./windmill-connection";
 export * from "./auth0-connection";
 export * from "./aws-connection";
 export * from "./azure-app-configuration-connection";
+export * from "./azure-client-secrets-connection";
 export * from "./azure-key-vault-connection";
 export * from "./camunda-connection";
 export * from "./databricks-connection";
@@ -40,6 +42,7 @@ export type TAppConnection =
   | TGcpConnection
   | TAzureKeyVaultConnection
   | TAzureAppConfigurationConnection
+  | TAzureClientSecretsConnection
   | TDatabricksConnection
   | THumanitecConnection
   | TTerraformCloudConnection
@@ -83,6 +86,7 @@ export type TAppConnectionMap = {
   [AppConnection.GCP]: TGcpConnection;
   [AppConnection.AzureKeyVault]: TAzureKeyVaultConnection;
   [AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnection;
+  [AppConnection.AzureClientSecrets]: TAzureClientSecretsConnection;
   [AppConnection.Databricks]: TDatabricksConnection;
   [AppConnection.Humanitec]: THumanitecConnection;
   [AppConnection.TerraformCloud]: TTerraformCloudConnection;

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

@@ -25,9 +25,18 @@ export type DashboardProjectSecretsOverviewResponse = {
   totalUniqueFoldersInPage: number;
   totalUniqueSecretImportsInPage: number;
   importedByEnvs?: { environment: string; importedBy: ProjectSecretsImportedBy[] }[];
+  usedBySecretSyncs?: UsedBySecretSyncs[];
   totalUniqueSecretRotationsInPage: number;
 };
 
+export type UsedBySecretSyncs = {
+  name: string;
+  destination: string;
+  environment: string;
+  id: string;
+  path: string;
+};
+
 export type DashboardProjectSecretsDetailsResponse = {
   imports?: TSecretImport[];
   folders?: TSecretFolder[];
@@ -43,13 +52,14 @@ export type DashboardProjectSecretsDetailsResponse = {
   totalSecretRotationCount?: number;
   totalCount: number;
   importedBy?: ProjectSecretsImportedBy[];
+  usedBySecretSyncs?: UsedBySecretSyncs[];
 };
 
 export type ProjectSecretsImportedBy = {
   environment: { name: string; slug: string };
   folders: {
     name: string;
-    secrets?: { secretId: string; referencedSecretKey: string }[];
+    secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
     isImported: boolean;
   }[];
 };

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

@@ -19,5 +19,6 @@ export type OIDCConfigData = {
 export enum OIDCJWTSignatureAlgorithm {
   RS256 = "RS256",
   HS256 = "HS256",
-  RS512 = "RS512"
+  RS512 = "RS512",
+  EDDSA = "EdDSA"
 }

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

@@ -111,7 +111,8 @@ export const useUpdateOrg = () => {
       enforceMfa,
       selectedMfaMethod,
       allowSecretSharingOutsideOrganization,
-      bypassOrgAuthEnabled
+      bypassOrgAuthEnabled,
+      userTokenExpiration
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -122,7 +123,8 @@ export const useUpdateOrg = () => {
         enforceMfa,
         selectedMfaMethod,
         allowSecretSharingOutsideOrganization,
-        bypassOrgAuthEnabled
+        bypassOrgAuthEnabled,
+        userTokenExpiration
       });
     },
     onSuccess: () => {

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

@@ -18,6 +18,7 @@ export type Organization = {
   selectedMfaMethod?: MfaMethod;
   shouldUseNewPrivilegeSystem: boolean;
   allowSecretSharingOutsideOrganization?: boolean;
+  userTokenExpiration?: string;
   userRole: string;
 };
 
@@ -32,6 +33,7 @@ export type UpdateOrgDTO = {
   selectedMfaMethod?: MfaMethod;
   allowSecretSharingOutsideOrganization?: boolean;
   bypassOrgAuthEnabled?: boolean;
+  userTokenExpiration?: string;
 };
 
 export type BillingDetails = {

frontend/src/hooks/api/secretRotationsV2/enums.ts

@@ -2,6 +2,7 @@ export enum SecretRotation {
   PostgresCredentials = "postgres-credentials",
   MsSqlCredentials = "mssql-credentials",
   Auth0ClientSecret = "auth0-client-secret",
+  AzureClientSecret = "azure-client-secret",
   LdapPassword = "ldap-password",
   AwsIamUserSecret = "aws-iam-user-secret"
 }

frontend/src/hooks/api/secretRotationsV2/types/azure-client-secret-rotation.ts

@@ -0,0 +1,38 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TSecretRotationV2Base,
+  TSecretRotationV2GeneratedCredentialsResponseBase
+} from "@app/hooks/api/secretRotationsV2/types/shared";
+
+export type TAzureClientSecretRotation = TSecretRotationV2Base & {
+  type: SecretRotation.AzureClientSecret;
+  parameters: {
+    objectId: string;
+    appName: string;
+  };
+  secretsMapping: {
+    clientId: string;
+    clientSecret: string;
+  };
+};
+
+export type TAzureClientSecretRotationGeneratedCredentials = {
+  clientId: string;
+  clientSecret: string;
+};
+
+export type TAzureClientSecretRotationGeneratedCredentialsResponse =
+  TSecretRotationV2GeneratedCredentialsResponseBase<
+    SecretRotation.AzureClientSecret,
+    TAzureClientSecretRotationGeneratedCredentials
+  >;
+
+export type TAzureClientSecretRotationOption = {
+  name: string;
+  type: SecretRotation.AzureClientSecret;
+  connection: AppConnection.AzureClientSecrets;
+  template: {
+    secretsMapping: TAzureClientSecretRotation["secretsMapping"];
+  };
+};

frontend/src/hooks/api/secretRotationsV2/types/index.ts

@@ -9,6 +9,11 @@ import {
   TAwsIamUserSecretRotationGeneratedCredentialsResponse,
   TAwsIamUserSecretRotationOption
 } from "@app/hooks/api/secretRotationsV2/types/aws-iam-user-secret-rotation";
+import {
+  TAzureClientSecretRotation,
+  TAzureClientSecretRotationGeneratedCredentialsResponse,
+  TAzureClientSecretRotationOption
+} from "@app/hooks/api/secretRotationsV2/types/azure-client-secret-rotation";
 import {
   TLdapPasswordRotation,
   TLdapPasswordRotationGeneratedCredentialsResponse,
@@ -30,6 +35,7 @@ export type TSecretRotationV2 = (
   | TPostgresCredentialsRotation
   | TMsSqlCredentialsRotation
   | TAuth0ClientSecretRotation
+  | TAzureClientSecretRotation
   | TLdapPasswordRotation
   | TAwsIamUserSecretRotation
 ) & {
@@ -39,6 +45,7 @@ export type TSecretRotationV2 = (
 export type TSecretRotationV2Option =
   | TSqlCredentialsRotationOption
   | TAuth0ClientSecretRotationOption
+  | TAzureClientSecretRotationOption
   | TLdapPasswordRotationOption
   | TAwsIamUserSecretRotationOption;
 
@@ -50,6 +57,7 @@ export type TViewSecretRotationGeneratedCredentialsResponse =
   | TPostgresCredentialsRotationGeneratedCredentialsResponse
   | TMsSqlCredentialsRotationGeneratedCredentialsResponse
   | TAuth0ClientSecretRotationGeneratedCredentialsResponse
+  | TAzureClientSecretRotationGeneratedCredentialsResponse
   | TLdapPasswordRotationGeneratedCredentialsResponse
   | TAwsIamUserSecretRotationGeneratedCredentialsResponse;
 
@@ -98,6 +106,7 @@ export type TSecretRotationOptionMap = {
   [SecretRotation.PostgresCredentials]: TSqlCredentialsRotationOption;
   [SecretRotation.MsSqlCredentials]: TSqlCredentialsRotationOption;
   [SecretRotation.Auth0ClientSecret]: TAuth0ClientSecretRotationOption;
+  [SecretRotation.AzureClientSecret]: TAzureClientSecretRotationOption;
   [SecretRotation.LdapPassword]: TLdapPasswordRotationOption;
   [SecretRotation.AwsIamUserSecret]: TAwsIamUserSecretRotationOption;
 };
@@ -106,6 +115,7 @@ export type TSecretRotationGeneratedCredentialsResponseMap = {
   [SecretRotation.PostgresCredentials]: TPostgresCredentialsRotationGeneratedCredentialsResponse;
   [SecretRotation.MsSqlCredentials]: TMsSqlCredentialsRotationGeneratedCredentialsResponse;
   [SecretRotation.Auth0ClientSecret]: TAuth0ClientSecretRotationGeneratedCredentialsResponse;
+  [SecretRotation.AzureClientSecret]: TAzureClientSecretRotationGeneratedCredentialsResponse;
   [SecretRotation.LdapPassword]: TLdapPasswordRotationGeneratedCredentialsResponse;
   [SecretRotation.AwsIamUserSecret]: TAwsIamUserSecretRotationGeneratedCredentialsResponse;
 };

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionForm.tsx

@@ -12,6 +12,7 @@ import { AppConnectionHeader } from "../AppConnectionHeader";
 import { Auth0ConnectionForm } from "./Auth0ConnectionForm";
 import { AwsConnectionForm } from "./AwsConnectionForm";
 import { AzureAppConfigurationConnectionForm } from "./AzureAppConfigurationConnectionForm";
+import { AzureClientSecretsConnectionForm } from "./AzureClientSecretsConnectionForm";
 import { AzureKeyVaultConnectionForm } from "./AzureKeyVaultConnectionForm";
 import { CamundaConnectionForm } from "./CamundaConnectionForm";
 import { DatabricksConnectionForm } from "./DatabricksConnectionForm";
@@ -87,6 +88,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <MsSqlConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.AzureClientSecrets:
+      return <AzureClientSecretsConnectionForm />;
     case AppConnection.Windmill:
       return <WindmillConnectionForm onSubmit={onSubmit} />;
     case AppConnection.Auth0:
@@ -155,6 +158,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <MsSqlConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Camunda:
       return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.AzureClientSecrets:
+      return <AzureClientSecretsConnectionForm appConnection={appConnection} />;
     case AppConnection.Windmill:
       return <WindmillConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     case AppConnection.Auth0:

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AzureClientSecretsConnectionForm.tsx

@@ -0,0 +1,169 @@
+import crypto from "crypto";
+
+import { useState } from "react";
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { isInfisicalCloud } from "@app/helpers/platform";
+import {
+  AzureClientSecretsConnectionMethod,
+  TAzureClientSecretsConnection,
+  useGetAppConnectionOption
+} from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TAzureClientSecretsConnection;
+};
+
+const formSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.AzureClientSecrets),
+  method: z.nativeEnum(AzureClientSecretsConnectionMethod),
+  tenantId: z.string().trim().min(1, "Tenant ID is required")
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+export const AzureClientSecretsConnectionForm = ({ appConnection }: Props) => {
+  const isUpdate = Boolean(appConnection);
+  const [isRedirecting, setIsRedirecting] = useState(false);
+
+  const {
+    option: { oauthClientId },
+    isLoading
+  } = useGetAppConnectionOption(AppConnection.AzureClientSecrets);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection
+      ? {
+          ...appConnection,
+          tenantId: appConnection.credentials.tenantId
+        }
+      : {
+          app: AppConnection.AzureClientSecrets,
+          method: AzureClientSecretsConnectionMethod.OAuth
+        }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  const selectedMethod = watch("method");
+
+  const onSubmit = (formData: FormData) => {
+    setIsRedirecting(true);
+    const state = crypto.randomBytes(16).toString("hex");
+    localStorage.setItem("latestCSRFToken", state);
+    localStorage.setItem(
+      "azureClientSecretsConnectionFormData",
+      JSON.stringify({ ...formData, connectionId: appConnection?.id })
+    );
+
+    switch (formData.method) {
+      case AzureClientSecretsConnectionMethod.OAuth:
+        window.location.assign(
+          `https://login.microsoftonline.com/${formData.tenantId || "common"}/oauth2/v2.0/authorize?client_id=${oauthClientId}&response_type=code&redirect_uri=${window.location.origin}/organization/app-connections/azure/oauth/callback&response_mode=query&scope=https://azconfig.io/.default%20openid%20offline_access&state=${state}<:>azure-client-secrets`
+        );
+        break;
+      default:
+        throw new Error(`Unhandled Azure Connection method: ${(formData as FormData).method}`);
+    }
+  };
+
+  const isMissingConfig = !oauthClientId;
+
+  const methodDetails = getAppConnectionMethodDetails(selectedMethod);
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+
+        <Controller
+          name="tenantId"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              tooltipText="The Directory (tenant) ID."
+              isError={Boolean(error?.message)}
+              label="Tenant ID"
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="e4f34ea5-ad23-4291-8585-66d20d603cc8" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          name="method"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              tooltipText={`The method you would like to use to connect with ${
+                APP_CONNECTION_MAP[AppConnection.AzureClientSecrets].name
+              }. This field cannot be changed after creation.`}
+              errorText={
+                !isLoading && isMissingConfig
+                  ? `Environment variables have not been configured. ${
+                      isInfisicalCloud()
+                        ? "Please contact Infisical."
+                        : `See documentation to configure Azure ${methodDetails.name} Connections.`
+                    }`
+                  : error?.message
+              }
+              isError={Boolean(error?.message) || isMissingConfig}
+              label="Method"
+            >
+              <Select
+                isDisabled={isUpdate}
+                value={value}
+                onValueChange={(val) => onChange(val)}
+                className="w-full border border-mineshaft-500"
+                position="popper"
+                dropdownContainerClassName="max-w-none"
+              >
+                {Object.values(AzureClientSecretsConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting || isRedirecting}
+            isDisabled={isSubmitting || (!isUpdate && !isDirty) || isMissingConfig || isRedirecting}
+          >
+            {isUpdate ? "Reconnect to Azure" : "Connect to Azure"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

frontend/src/pages/organization/AppConnections/OauthCallbackPage/OauthCallbackPage.tsx

@@ -7,9 +7,11 @@ import { ROUTE_PATHS } from "@app/const/routes";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import {
   AzureAppConfigurationConnectionMethod,
+  AzureClientSecretsConnectionMethod,
   AzureKeyVaultConnectionMethod,
   GitHubConnectionMethod,
   TAzureAppConfigurationConnection,
+  TAzureClientSecretsConnection,
   TAzureKeyVaultConnection,
   TGitHubConnection,
   useCreateAppConnection,
@@ -32,18 +34,26 @@ type AzureAppConfigurationFormData = BaseFormData &
   Pick<TAzureAppConfigurationConnection, "name" | "method" | "description"> &
   Pick<TAzureAppConfigurationConnection["credentials"], "tenantId">;
 
+type AzureClientSecretsFormData = BaseFormData &
+  Pick<TAzureClientSecretsConnection, "name" | "method" | "description"> &
+  Pick<TAzureClientSecretsConnection["credentials"], "tenantId">;
+
 type FormDataMap = {
   [AppConnection.GitHub]: GithubFormData & { app: AppConnection.GitHub };
   [AppConnection.AzureKeyVault]: AzureKeyVaultFormData & { app: AppConnection.AzureKeyVault };
   [AppConnection.AzureAppConfiguration]: AzureAppConfigurationFormData & {
     app: AppConnection.AzureAppConfiguration;
   };
+  [AppConnection.AzureClientSecrets]: AzureClientSecretsFormData & {
+    app: AppConnection.AzureClientSecrets;
+  };
 };
 
 const formDataStorageFieldMap: Partial<Record<AppConnection, string>> = {
   [AppConnection.GitHub]: "githubConnectionFormData",
   [AppConnection.AzureKeyVault]: "azureKeyVaultConnectionFormData",
-  [AppConnection.AzureAppConfiguration]: "azureAppConfigurationConnectionFormData"
+  [AppConnection.AzureAppConfiguration]: "azureAppConfigurationConnectionFormData",
+  [AppConnection.AzureClientSecrets]: "azureClientSecretsConnectionFormData"
 };
 
 export const OAuthCallbackPage = () => {
@@ -194,6 +204,54 @@ export const OAuthCallbackPage = () => {
     };
   }, []);
 
+  const handleAzureClientSecrets = useCallback(async () => {
+    const formData = getFormData(AppConnection.AzureClientSecrets);
+    if (formData === null) return null;
+
+    clearState(AppConnection.AzureClientSecrets);
+
+    const { connectionId, name, description, returnUrl } = formData;
+
+    try {
+      if (connectionId) {
+        await updateAppConnection.mutateAsync({
+          app: AppConnection.AzureClientSecrets,
+          connectionId,
+          credentials: {
+            code: code as string,
+            tenantId: formData.tenantId
+          }
+        });
+      } else {
+        await createAppConnection.mutateAsync({
+          app: AppConnection.AzureClientSecrets,
+          name,
+          description,
+          method: AzureClientSecretsConnectionMethod.OAuth,
+          credentials: {
+            code: code as string,
+            tenantId: formData.tenantId
+          }
+        });
+      }
+    } catch (err: any) {
+      createNotification({
+        title: `Failed to ${connectionId ? "update" : "add"} Azure Client Secrets Connection`,
+        text: err?.message,
+        type: "error"
+      });
+      navigate({
+        to: returnUrl ?? "/organization/app-connections"
+      });
+    }
+
+    return {
+      connectionId,
+      returnUrl,
+      appConnectionName: formData.app
+    };
+  }, []);
+
   const handleGithub = useCallback(async () => {
     const formData = getFormData(AppConnection.GitHub);
     if (formData === null) return null;
@@ -280,6 +338,8 @@ export const OAuthCallbackPage = () => {
         data = await handleAzureKeyVault();
       } else if (appConnection === AppConnection.AzureAppConfiguration) {
         data = await handleAzureAppConfiguration();
+      } else if (appConnection === AppConnection.AzureClientSecrets) {
+        data = await handleAzureClientSecrets();
       }
 
       if (data) {

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OIDCModal.tsx

@@ -387,6 +387,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
                     <SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
                     <SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
                     <SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.EDDSA}>EdDSA</SelectItem>
                   </Select>
                 </FormControl>
               )}

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -23,6 +23,7 @@ import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgOIDCSection } from "./OrgOIDCSection";
 import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";
+import { OrgUserAccessTokenLimitSection } from "./OrgUserAccessTokenLimitSection";
 import { SSOModal } from "./SSOModal";
 
 export const OrgAuthTab = withPermission(
@@ -167,6 +168,7 @@ export const OrgAuthTab = withPermission(
     return (
       <>
         <OrgGenericAuthSection />
+        <OrgUserAccessTokenLimitSection />
         {shouldShowCreateIdentityProviderView ? (
           createIdentityProviderView
         ) : (

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgUserAccessTokenLimitSection.tsx

@@ -0,0 +1,171 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+const formSchema = z.object({
+  expirationValue: z.number().min(1, "Value must be at least 1"),
+  expirationUnit: z.enum(["m", "h", "d", "w"], {
+    invalid_type_error: "Please select a valid time unit"
+  })
+});
+
+type TForm = z.infer<typeof formSchema>;
+
+// Function to parse duration string like "30d" into value and unit
+const parseDuration = (duration: string): { value: number; unit: string } => {
+  const match = duration.match(/^(\d+)([mhdw])$/);
+  if (match) {
+    return {
+      value: parseInt(match[1], 10),
+      unit: match[2]
+    };
+  }
+  // Default to 30 days if invalid format
+  return { value: 30, unit: "d" };
+};
+
+// Function to format value and unit back to duration string
+const formatDuration = (value: number, unit: string): string => {
+  return `${value}${unit}`;
+};
+
+export const OrgUserAccessTokenLimitSection = () => {
+  const { mutateAsync: updateUserTokenExpiration } = useUpdateOrg();
+  const { currentOrg } = useOrganization();
+
+  // Parse the current duration or use default
+  const currentDuration = parseDuration(currentOrg?.userTokenExpiration || "30d");
+
+  const {
+    control,
+    formState: { isSubmitting, isDirty },
+    handleSubmit
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      expirationValue: currentDuration.value,
+      expirationUnit: currentDuration.unit as "m" | "h" | "d" | "w"
+    }
+  });
+
+  if (!currentOrg) return null;
+
+  const handleUserTokenExpirationSubmit = async (formData: TForm) => {
+    try {
+      const userTokenExpiration = formatDuration(formData.expirationValue, formData.expirationUnit);
+
+      await updateUserTokenExpiration({
+        userTokenExpiration,
+        orgId: currentOrg.id
+      });
+
+      createNotification({
+        text: "Successfully updated user token expiration",
+        type: "success"
+      });
+    } catch {
+      createNotification({
+        text: "Failed updating user token expiration",
+        type: "error"
+      });
+    }
+  };
+
+  // Units for the dropdown with readable labels
+  const timeUnits = [
+    { value: "m", label: "Minutes" },
+    { value: "h", label: "Hours" },
+    { value: "d", label: "Days" },
+    { value: "w", label: "Weeks" }
+  ];
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex w-full items-center justify-between">
+        <p className="text-xl font-semibold">User Token Expiration</p>
+      </div>
+      <p className="mb-4 mt-2 text-sm text-gray-400">
+        This defines the maximum time a user token will be valid. After this time, the user will
+        need to re-authenticate.
+      </p>
+      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+        {(isAllowed) => (
+          <form onSubmit={handleSubmit(handleUserTokenExpirationSubmit)} autoComplete="off">
+            <div className="flex max-w-md gap-4">
+              <div className="flex-1">
+                <Controller
+                  control={control}
+                  name="expirationValue"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      label="Expiration value"
+                    >
+                      <Input
+                        {...field}
+                        type="number"
+                        min={1}
+                        step={1}
+                        value={field.value}
+                        onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                        disabled={!isAllowed}
+                      />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex-1">
+                <Controller
+                  control={control}
+                  name="expirationUnit"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      label="Time unit"
+                    >
+                      <Select
+                        value={field.value}
+                        className="pr-2"
+                        onValueChange={field.onChange}
+                        placeholder="Select time unit"
+                        isDisabled={!isAllowed}
+                      >
+                        {timeUnits.map(({ value, label }) => (
+                          <SelectItem
+                            key={value}
+                            value={value}
+                            className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
+                          >
+                            <div className="ml-3 font-medium">{label}</div>
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={!isDirty}
+              className="mt-4"
+              isDisabled={!isAllowed}
+            >
+              Save
+            </Button>
+          </form>
+        )}
+      </OrgPermissionCan>
+    </div>
+  );
+};

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -74,7 +74,7 @@ import {
   useUpdateSecretV3
 } from "@app/hooks/api";
 import { useGetProjectSecretsOverview } from "@app/hooks/api/dashboard/queries";
-import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { DashboardSecretsOrderBy, ProjectSecretsImportedBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
 import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
@@ -274,7 +274,8 @@ export const OverviewPage = () => {
     totalUniqueSecretImportsInPage,
     totalUniqueDynamicSecretsInPage,
     totalUniqueSecretRotationsInPage,
-    importedByEnvs
+    importedByEnvs,
+    usedBySecretSyncs
   } = overview ?? {};
 
   const secretImportsShaped = secretImports
@@ -726,6 +727,98 @@ export const OverviewPage = () => {
     }
   }, [routerSearch.search]);
 
+  const selectedKeysCount = Object.keys(selectedEntries.secret).length;
+
+  const secretsToDeleteKeys = useMemo(() => {
+    return Object.values(selectedEntries.secret).flatMap((entries) =>
+      Object.values(entries).map((secret) => secret.key)
+    );
+  }, [selectedEntries]);
+
+  const filterAndMergeEnvironments = (
+    envNames: string[],
+    envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
+  ): ProjectSecretsImportedBy[] => {
+    const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
+
+    if (filteredEnvs.length === 0) return [];
+
+    const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
+    const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};
+
+    allImportedBy.forEach((item) => {
+      const { slug } = item.environment;
+      if (!groupedBySlug[slug]) groupedBySlug[slug] = [];
+      groupedBySlug[slug].push(item);
+    });
+
+    const mergedImportedBy = Object.values(groupedBySlug).map((group) => {
+      const { environment } = group[0];
+      const allFolders = group.flatMap((item) => item.folders);
+
+      const foldersByName: Record<string, (typeof allFolders)[number][]> = {};
+      allFolders.forEach((folder) => {
+        if (!foldersByName[folder.name]) foldersByName[folder.name] = [];
+        foldersByName[folder.name].push(folder);
+      });
+
+      const mergedFolders = Object.entries(foldersByName).map(([name, foldersData]) => {
+        const isImported = foldersData.some((folder) => folder.isImported);
+        const allSecrets = foldersData.flatMap((folder) => folder.secrets || []);
+
+        const uniqueSecrets: {
+          secretId: string;
+          referencedSecretKey: string;
+          referencedSecretEnv: string;
+        }[] = [];
+        const secretIds = new Set<string>();
+
+        allSecrets
+          .filter(
+            (secret) =>
+              !secretsToDeleteKeys ||
+              secretsToDeleteKeys.length === 0 ||
+              secretsToDeleteKeys.includes(secret.referencedSecretKey)
+          )
+          .forEach((secret) => {
+            if (!secretIds.has(secret.secretId)) {
+              secretIds.add(secret.secretId);
+              uniqueSecrets.push(secret);
+            }
+          });
+
+        return {
+          name,
+          isImported,
+          ...(uniqueSecrets.length > 0 ? { secrets: uniqueSecrets } : {})
+        };
+      });
+
+      return {
+        environment,
+        folders: mergedFolders.filter(
+          (folder) => folder.isImported || (folder.secrets && folder.secrets.length > 0)
+        )
+      };
+    });
+
+    return mergedImportedBy;
+  };
+
+  const importedBy = useMemo(() => {
+    if (!importedByEnvs) return [];
+    if (selectedKeysCount === 0) {
+      return filterAndMergeEnvironments(
+        visibleEnvs.map(({ slug }) => slug),
+        importedByEnvs
+      );
+    }
+    return filterAndMergeEnvironments(
+      Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries)),
+      importedByEnvs
+    );
+  }, [importedByEnvs, selectedEntries, selectedKeysCount]);
+
   if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
     return (
       <div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
@@ -1044,7 +1137,9 @@ export const OverviewPage = () => {
           secretPath={secretPath}
           selectedEntries={selectedEntries}
           resetSelectedEntries={resetSelectedEntries}
-          importedByEnvs={importedByEnvs}
+          importedBy={importedBy}
+          secretsToDeleteKeys={secretsToDeleteKeys}
+          usedBySecretSyncs={usedBySecretSyncs}
         />
         <div className="thin-scrollbar mt-4">
           <TableContainer
@@ -1261,6 +1356,7 @@ export const OverviewPage = () => {
                         secretKey={key}
                         getSecretByKey={getSecretByKey}
                         scrollOffset={debouncedScrollOffset}
+                        importedBy={importedBy}
                       />
                     ))}
                     <SecretNoAccessOverviewTableRow

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -4,6 +4,7 @@ import { subject } from "@casl/ability";
 import {
   faCheck,
   faCopy,
+  faEyeSlash,
   faProjectDiagram,
   faTrash,
   faXmark
@@ -25,13 +26,13 @@ import {
   ModalTrigger,
   Tooltip
 } from "@app/components/v2";
-import { Blur } from "@app/components/v2/Blur";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
-import { useToggle } from "@app/hooks";
+import { usePopUp, useToggle } from "@app/hooks";
 import { SecretType } from "@app/hooks/api/types";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
+import { CollapsibleSecretImports } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports";
 
 type Props = {
   defaultValue?: string | null;
@@ -54,6 +55,14 @@ type Props = {
   ) => Promise<void>;
   onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
   isRotatedSecret?: boolean;
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
+      isImported: boolean;
+    }[];
+  }[];
 };
 
 export const SecretEditRow = ({
@@ -70,8 +79,13 @@ export const SecretEditRow = ({
   secretPath,
   isVisible,
   secretId,
-  isRotatedSecret
+  isRotatedSecret,
+  importedBy
 }: Props) => {
+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "editSecret"
+  ] as const);
+
   const {
     handleSubmit,
     control,
@@ -115,6 +129,20 @@ export const SecretEditRow = ({
       if (isCreatable) {
         await onSecretCreate(environment, secretName, value);
       } else {
+        if (
+          importedBy &&
+          importedBy.some(({ folders }) =>
+            folders?.some(({ secrets }) =>
+              secrets?.some(
+                ({ referencedSecretKey, referencedSecretEnv }) =>
+                  referencedSecretKey === secretName && referencedSecretEnv === environment
+              )
+            )
+          )
+        ) {
+          handlePopUpOpen("editSecret", { secretValue: value });
+          return;
+        }
         await onSecretUpdate(
           environment,
           secretName,
@@ -124,7 +152,25 @@ export const SecretEditRow = ({
         );
       }
     }
-    reset({ value });
+    if (secretValueHidden && !isOverride) {
+      setTimeout(() => {
+        reset({ value: defaultValue || null });
+      }, 50);
+    } else {
+      reset({ value });
+    }
+  };
+
+  const handleEditSecret = async ({ secretValue }: { secretValue: string }) => {
+    await onSecretUpdate(
+      environment,
+      secretName,
+      secretValue,
+      isOverride ? SecretType.Personal : SecretType.Shared,
+      secretId
+    );
+    reset({ value: secretValue });
+    handlePopUpClose("editSecret");
   };
 
   const canReadSecretValue = hasSecretReadValueOrDescribePermission(
@@ -132,6 +178,16 @@ export const SecretEditRow = ({
     ProjectPermissionSecretActions.ReadValue
   );
 
+  const canEditSecretValue = permission.can(
+    ProjectPermissionSecretActions.Edit,
+    subject(ProjectPermissionSub.Secrets, {
+      environment,
+      secretPath,
+      secretName,
+      secretTags: ["*"]
+    })
+  );
+
   const handleDeleteSecret = useCallback(async () => {
     setIsDeleting.on();
     setIsModalOpen(false);
@@ -153,29 +209,32 @@ export const SecretEditRow = ({
         deleteKey={secretName}
         onDeleteApproved={handleDeleteSecret}
       />
-
+      {secretValueHidden && !isOverride && (
+        <Tooltip
+          content={`You do not have access to view the current value${canEditSecretValue && !isRotatedSecret ? ", but you can set a new one" : "."}`}
+        >
+          <FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
+        </Tooltip>
+      )}
       <div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
-        {secretValueHidden ? (
-          <Blur tooltipText="You do not have permission to read the value of this secret." />
-        ) : (
-          <Controller
-            disabled={isImportedSecret && !defaultValue}
-            control={control}
-            name="value"
-            render={({ field }) => (
-              <InfisicalSecretInput
-                {...field}
-                isReadOnly={isImportedSecret || isRotatedSecret}
-                value={field.value as string}
-                key="secret-input"
-                isVisible={isVisible}
-                secretPath={secretPath}
-                environment={environment}
-                isImport={isImportedSecret}
-              />
-            )}
-          />
-        )}
+        <Controller
+          disabled={isImportedSecret && !defaultValue}
+          control={control}
+          name="value"
+          render={({ field }) => (
+            <InfisicalSecretInput
+              {...field}
+              isReadOnly={isImportedSecret || (isRotatedSecret && !isOverride)}
+              value={field.value as string}
+              key="secret-input"
+              isVisible={isVisible && !secretValueHidden}
+              secretPath={secretPath}
+              environment={environment}
+              isImport={isImportedSecret}
+              defaultValue={secretValueHidden ? "" : undefined}
+            />
+          )}
+        />
       </div>
 
       <div
@@ -306,6 +365,26 @@ export const SecretEditRow = ({
           </>
         )}
       </div>
+      <DeleteActionModal
+        isOpen={popUp.editSecret.isOpen}
+        deleteKey="confirm"
+        buttonColorSchema="secondary"
+        buttonText="Save"
+        subTitle=""
+        title="Do you want to edit this secret?"
+        onChange={(isOpen) => handlePopUpToggle("editSecret", isOpen)}
+        onDeleteApproved={() => handleEditSecret(popUp?.editSecret?.data)}
+        formContent={
+          importedBy &&
+          importedBy.length > 0 && (
+            <CollapsibleSecretImports
+              importedBy={importedBy}
+              secretsToDelete={[secretName]}
+              onlyReferences
+            />
+          )
+        }
+      />
     </div>
   );
 };

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -1,3 +1,4 @@
+import { subject } from "@casl/ability";
 import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
@@ -14,6 +15,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
+import { useProjectPermission } from "@app/context";
+import {
+  ProjectPermissionSecretActions,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
 import { useToggle } from "@app/hooks";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WorkspaceEnv } from "@app/hooks/api/types";
@@ -44,6 +50,14 @@ type Props = {
     secretName: string
   ) => { secret?: SecretV3RawSanitized; environmentInfo?: WorkspaceEnv } | undefined;
   scrollOffset: number;
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
+      isImported: boolean;
+    }[];
+  }[];
 };
 
 export const SecretOverviewTableRow = ({
@@ -58,12 +72,35 @@ export const SecretOverviewTableRow = ({
   getImportedSecretByKey,
   scrollOffset,
   onToggleSecretSelect,
-  isSelected
+  isSelected,
+  importedBy
 }: Props) => {
   const [isFormExpanded, setIsFormExpanded] = useToggle();
   const totalCols = environments.length + 1; // secret key row
   const [isSecretVisible, setIsSecretVisible] = useToggle();
 
+  const { permission } = useProjectPermission();
+
+  const getDefaultValue = (
+    secret: SecretV3RawSanitized | undefined,
+    importedSecret: { secret?: SecretV3RawSanitized } | undefined
+  ) => {
+    const canEditSecretValue = permission.can(
+      ProjectPermissionSecretActions.Edit,
+      subject(ProjectPermissionSub.Secrets, {
+        environment: secret?.env || "",
+        secretPath: secret?.path || "",
+        secretName: secret?.key || "",
+        secretTags: ["*"]
+      })
+    );
+
+    if (secret?.secretValueHidden && !secret?.valueOverride) {
+      return canEditSecretValue ? "******" : "";
+    }
+    return secret?.valueOverride || secret?.value || importedSecret?.secret?.value || "";
+  };
+
   return (
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
@@ -228,13 +265,7 @@ export const SecretOverviewTableRow = ({
                               isVisible={isSecretVisible}
                               secretName={secretKey}
                               secretValueHidden={secret?.secretValueHidden || false}
-                              defaultValue={
-                                secret?.secretValueHidden
-                                  ? ""
-                                  : secret?.valueOverride ||
-                                    secret?.value ||
-                                    importedSecret?.secret?.value
-                              }
+                              defaultValue={getDefaultValue(secret, importedSecret)}
                               secretId={secret?.id}
                               isOverride={Boolean(secret?.valueOverride)}
                               isImportedSecret={isImportedSecret}
@@ -244,6 +275,7 @@ export const SecretOverviewTableRow = ({
                               onSecretUpdate={onSecretUpdate}
                               environment={slug}
                               isRotatedSecret={secret?.isRotatedSecret}
+                              importedBy={importedBy}
                             />
                           </td>
                         </tr>

frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx

@@ -15,7 +15,7 @@ import {
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
-import { ProjectSecretsImportedBy } from "@app/hooks/api/dashboard/types";
+import { ProjectSecretsImportedBy, UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import {
   SecretType,
   SecretV3RawSanitized,
@@ -37,14 +37,18 @@ type Props = {
     [EntryType.FOLDER]: Record<string, Record<string, TSecretFolder>>;
     [EntryType.SECRET]: Record<string, Record<string, SecretV3RawSanitized>>;
   };
-  importedByEnvs?: { environment: string; importedBy: ProjectSecretsImportedBy[] }[];
+  importedBy?: ProjectSecretsImportedBy[] | null;
+  usedBySecretSyncs?: UsedBySecretSyncs[];
+  secretsToDeleteKeys: string[];
 };
 
 export const SelectionPanel = ({
   secretPath,
   resetSelectedEntries,
   selectedEntries,
-  importedByEnvs
+  importedBy,
+  secretsToDeleteKeys,
+  usedBySecretSyncs = []
 }: Props) => {
   const { permission } = useProjectPermission();
 
@@ -81,80 +85,11 @@ export const SelectionPanel = ({
     )
   );
 
-  const secretsToDeleteKeys = useMemo(() => {
-    return Object.values(selectedEntries.secret).flatMap((entries) =>
-      Object.values(entries).map((secret) => secret.key)
-    );
-  }, [selectedEntries]);
-
-  const filterAndMergeEnvironments = (
-    envNames: string[],
-    envs: { environment: string; importedBy: ProjectSecretsImportedBy[] }[]
-  ): ProjectSecretsImportedBy[] => {
-    const filteredEnvs = envs.filter((env) => envNames.includes(env.environment));
-
-    if (filteredEnvs.length === 0) return [];
-
-    const allImportedBy = filteredEnvs.flatMap((env) => env.importedBy);
-    const groupedBySlug: Record<string, ProjectSecretsImportedBy[]> = {};
-
-    allImportedBy.forEach((item) => {
-      const { slug } = item.environment;
-      if (!groupedBySlug[slug]) groupedBySlug[slug] = [];
-      groupedBySlug[slug].push(item);
-    });
-
-    const mergedImportedBy = Object.values(groupedBySlug).map((group) => {
-      const { environment } = group[0];
-      const allFolders = group.flatMap((item) => item.folders);
-
-      const foldersByName: Record<string, (typeof allFolders)[number][]> = {};
-      allFolders.forEach((folder) => {
-        if (!foldersByName[folder.name]) foldersByName[folder.name] = [];
-        foldersByName[folder.name].push(folder);
-      });
-
-      const mergedFolders = Object.entries(foldersByName).map(([name, folders]) => {
-        const isImported = folders.some((folder) => folder.isImported);
-        const allSecrets = folders.flatMap((folder) => folder.secrets || []);
-
-        const uniqueSecrets: { secretId: string; referencedSecretKey: string }[] = [];
-        const secretIds = new Set<string>();
-
-        allSecrets
-          .filter((secret) => secretsToDeleteKeys.includes(secret.referencedSecretKey))
-          .forEach((secret) => {
-            if (!secretIds.has(secret.secretId)) {
-              secretIds.add(secret.secretId);
-              uniqueSecrets.push(secret);
-            }
-          });
-
-        return {
-          name,
-          isImported,
-          ...(uniqueSecrets.length > 0 ? { secrets: uniqueSecrets } : {})
-        };
-      });
-
-      return {
-        environment,
-        folders: mergedFolders.filter(
-          (folder) => folder.isImported || (folder.secrets && folder.secrets.length > 0)
-        )
-      };
-    });
-
-    return mergedImportedBy;
-  };
-
-  const importedBy = useMemo(() => {
-    if (selectedKeysCount === 0 || !importedByEnvs) return null;
-    return filterAndMergeEnvironments(
-      Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries)),
-      importedByEnvs
-    );
-  }, [importedByEnvs, selectedEntries, selectedKeysCount]);
+  const usedBySecretSyncsFiltered = useMemo(() => {
+    if (selectedKeysCount === 0 || usedBySecretSyncs.length === 0) return null;
+    const envs = Object.values(selectedEntries.secret).flatMap((entries) => Object.keys(entries));
+    return usedBySecretSyncs.filter((syncItem) => envs.includes(syncItem.environment));
+  }, [selectedEntries, usedBySecretSyncs, selectedKeysCount]);
 
   const getDeleteModalTitle = () => {
     if (selectedFolderCount > 0 && selectedKeysCount > 0) {
@@ -326,11 +261,12 @@ export const SelectionPanel = ({
         onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
         onDeleteApproved={handleBulkDelete}
         formContent={
-          importedBy &&
-          importedBy.some((element) => element.folders.length > 0) && (
+          ((usedBySecretSyncsFiltered && usedBySecretSyncsFiltered.length > 0) ||
+            (importedBy && importedBy.some((element) => element.folders.length > 0))) && (
             <CollapsibleSecretImports
-              importedBy={importedBy}
+              importedBy={importedBy || []}
               secretsToDelete={secretsToDeleteKeys}
+              usedBySecretSyncs={usedBySecretSyncsFiltered}
             />
           )
         }

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -220,6 +220,7 @@ const Page = () => {
     totalSecretCount = 0,
     totalCount = 0,
     importedBy,
+    usedBySecretSyncs,
     totalSecretRotationCount = 0
   } = data ?? {};
 
@@ -441,6 +442,7 @@ const Page = () => {
             onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
             protectedBranchPolicyName={boardPolicy?.name}
             importedBy={importedBy}
+            usedBySecretSyncs={usedBySecretSyncs}
           />
           <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
             <div className="flex flex-col" id="dashboard">
@@ -530,6 +532,7 @@ const Page = () => {
                   secretPath={secretPath}
                   isProtectedBranch={isProtectedBranch}
                   importedBy={importedBy}
+                  usedBySecretSyncs={usedBySecretSyncs}
                 />
               )}
               {noAccessSecretCount > 0 && <SecretNoAccessListView count={noAccessSecretCount} />}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -69,6 +69,7 @@ import {
   dashboardKeys,
   fetchDashboardProjectSecretsByKeys
 } from "@app/hooks/api/dashboard/queries";
+import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { fetchProjectSecrets, secretKeys } from "@app/hooks/api/secrets/queries";
 import { ApiErrorTypes, SecretType, TApiErrors, WsTag } from "@app/hooks/api/types";
@@ -113,11 +114,12 @@ type Props = {
   onVisibilityToggle: () => void;
   onToggleRowType: (rowType: RowType) => void;
   onClickRollbackMode: () => void;
+  usedBySecretSyncs?: UsedBySecretSyncs[];
   importedBy?: {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
@@ -139,7 +141,8 @@ export const ActionBar = ({
   onClickRollbackMode,
   onToggleRowType,
   protectedBranchPolicyName,
-  importedBy
+  importedBy,
+  usedBySecretSyncs
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "addFolder",
@@ -1071,11 +1074,12 @@ export const ActionBar = ({
         onChange={(isOpen) => handlePopUpToggle("bulkDeleteSecrets", isOpen)}
         onDeleteApproved={handleSecretBulkDelete}
         formContent={
-          importedBy &&
-          importedBy.length > 0 && (
+          ((importedBy && importedBy.length > 0) ||
+            (usedBySecretSyncs && usedBySecretSyncs?.length > 0)) && (
             <CollapsibleSecretImports
               importedBy={importedBy}
               secretsToDelete={Object.values(selectedSecrets).map((s) => s.key)}
+              usedBySecretSyncs={usedBySecretSyncs}
             />
           )
         }

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx

@@ -1,13 +1,16 @@
+/* eslint-disable no-nested-ternary */
 import React, { useMemo } from "react";
-import { faFileImport, faKey, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { faFileImport, faKey, faSync, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Table, TBody, Td, Th, THead, Tr } from "@app/components/v2";
+import { Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
+import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 
 enum ItemType {
   Folder = "Folder",
-  Secret = "Secret"
+  Secret = "Secret",
+  SecretSync = "SecretSync"
 }
 
 interface FlatItem {
@@ -17,6 +20,8 @@ interface FlatItem {
   reference: string;
   id: string;
   environment: { name: string; slug: string };
+  tooltipText?: string;
+  destination?: string;
 }
 
 interface CollapsibleSecretImportsProps {
@@ -24,16 +29,20 @@ interface CollapsibleSecretImportsProps {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
+  usedBySecretSyncs?: UsedBySecretSyncs[] | null;
   secretsToDelete: string[];
+  onlyReferences?: boolean;
 }
 
 export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> = ({
   importedBy = [],
-  secretsToDelete
+  usedBySecretSyncs = [],
+  secretsToDelete,
+  onlyReferences
 }) => {
   const { currentWorkspace } = useWorkspace();
 
@@ -51,6 +60,15 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
   };
 
   const handlePathClick = (item: FlatItem) => {
+    if (item.type === ItemType.SecretSync) {
+      window.open(
+        `/secret-manager/${currentWorkspace.id}/integrations/secret-syncs/${item.destination}/${item.id}`,
+        "_blank",
+        "noopener,noreferrer"
+      );
+      return;
+    }
+
     let pathToNavigate;
     if (item.type === ItemType.Folder) {
       pathToNavigate = item.path;
@@ -70,7 +88,7 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
 
     importedBy.forEach((env) => {
       env.folders.forEach((folder) => {
-        if (folder.isImported) {
+        if (folder.isImported && !onlyReferences) {
           items.push({
             type: ItemType.Folder,
             path: folder.name,
@@ -103,7 +121,26 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
       });
     });
 
+    // Add secret sync items
+    usedBySecretSyncs?.forEach((syncItem) => {
+      items.push({
+        type: ItemType.SecretSync,
+        destination: syncItem.destination,
+        path: syncItem.path,
+        id: syncItem.id,
+        reference: "Secret Sync",
+        environment: { name: syncItem.environment, slug: "" },
+        tooltipText: `Currently used by Secret Sync: ${syncItem.name}`
+      });
+    });
+
     return items.sort((a, b) => {
+      if (a.type === ItemType.SecretSync && b.type !== ItemType.SecretSync) return 1;
+      if (a.type !== ItemType.SecretSync && b.type === ItemType.SecretSync) return -1;
+
+      if (a.type === ItemType.SecretSync && b.type === ItemType.SecretSync) {
+        return a.path.localeCompare(b.path);
+      }
       const envCompare = a.environment.name.localeCompare(b.environment.name);
       if (envCompare !== 0) return envCompare;
 
@@ -119,7 +156,7 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
 
       return aPath.localeCompare(bPath);
     });
-  }, [importedBy]);
+  }, [importedBy, usedBySecretSyncs, secretsToDelete, onlyReferences]);
 
   const hasImportedItems = importedBy.some((element) => {
     if (element.folders && element.folders.length > 0) {
@@ -135,19 +172,33 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
     return false;
   });
 
-  if (!hasImportedItems) {
+  const hasSecretSyncItems = usedBySecretSyncs && usedBySecretSyncs.length > 0;
+
+  if (!hasImportedItems && !hasSecretSyncItems) {
     return null;
   }
 
+  const alertColors = onlyReferences
+    ? {
+        border: "border-yellow-700/30",
+        bg: "bg-yellow-900/20",
+        text: "text-yellow-500"
+      }
+    : {
+        border: "border-red-700/30",
+        bg: "bg-red-900/20",
+        text: "text-red-500"
+      };
+
   return (
     <div className="mb-4 w-full">
-      <div className="mb-4 rounded-md border border-red-700/30 bg-red-900/20">
+      <div className={`mb-4 rounded-md border ${alertColors.border} ${alertColors.bg}`}>
         <div className="flex items-start gap-3 p-4">
-          <div className="mt-0.5 flex-shrink-0 text-red-500">
+          <div className={`mt-0.5 flex-shrink-0 ${alertColors.text}`}>
             <FontAwesomeIcon icon={faWarning} className="h-5 w-5" aria-hidden="true" />
           </div>
           <div className="w-full">
-            <p className="text-sm font-semibold text-red-500">
+            <p className={`text-sm font-semibold ${alertColors.text}`}>
               The following resources will be affected by this change
             </p>
           </div>
@@ -168,14 +219,36 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
                 key={item.id}
                 onClick={() => handlePathClick(item)}
                 className="cursor-pointer hover:bg-mineshaft-700"
-                title={`Navigate to ${item.path}`}
+                title={
+                  item.type === ItemType.SecretSync
+                    ? "Navigate to Secret Sync"
+                    : `Navigate to ${item.path}`
+                }
               >
                 <Td>
-                  <FontAwesomeIcon
-                    icon={item.type === ItemType.Secret ? faKey : faFileImport}
-                    className={`h-4 w-4 ${item.type === ItemType.Secret ? "text-gray-400" : "text-green-700"}`}
-                    aria-hidden="true"
-                  />
+                  <Tooltip
+                    className="max-w-md"
+                    content={item.tooltipText}
+                    isDisabled={!item.tooltipText}
+                  >
+                    <FontAwesomeIcon
+                      icon={
+                        item.type === ItemType.Secret
+                          ? faKey
+                          : item.type === ItemType.Folder
+                            ? faFileImport
+                            : faSync
+                      }
+                      className={`h-4 w-4 ${
+                        item.type === ItemType.Secret
+                          ? "text-gray-400"
+                          : item.type === ItemType.Folder
+                            ? "text-green-700"
+                            : "text-mineshaft-300"
+                      }`}
+                      aria-hidden="true"
+                    />
+                  </Tooltip>
                 </Td>
                 <Td className="px-4">{item.environment.name}</Td>
                 <Td className="truncate px-4">{truncatePath(item.path)}</Td>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -4,6 +4,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   Checkbox,
+  DeleteActionModal,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -31,7 +32,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
-import { useToggle } from "@app/hooks";
+import { usePopUp, useToggle } from "@app/hooks";
 import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 import { WsTag } from "@app/hooks/api/types";
 import { subject } from "@casl/ability";
@@ -46,16 +47,18 @@ import {
 } from "@app/components/secrets/SecretReferenceDetails";
 
 import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
-import { Blur } from "@app/components/v2/Blur";
 import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
+import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
 import {
   FontAwesomeSpriteName,
   formSchema,
   SecretActionType,
   TFormSchema
 } from "./SecretListView.utils";
+import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
+
+const hiddenValue = "******";
 
 type Props = {
   secret: SecretV3RawSanitized;
@@ -74,6 +77,14 @@ type Props = {
   environment: string;
   secretPath: string;
   handleSecretShare: () => void;
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
+      isImported: boolean;
+    }[];
+  }[];
 };
 
 export const SecretItem = memo(
@@ -89,12 +100,33 @@ export const SecretItem = memo(
     onToggleSecretSelect,
     environment,
     secretPath,
-    handleSecretShare
+    handleSecretShare,
+    importedBy
   }: Props) => {
+    const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+      "editSecret"
+    ] as const);
     const { currentWorkspace } = useWorkspace();
     const { permission } = useProjectPermission();
     const { isRotatedSecret } = secret;
 
+    const canEditSecretValue = permission.can(
+      ProjectPermissionSecretActions.Edit,
+      subject(ProjectPermissionSub.Secrets, {
+        environment,
+        secretPath,
+        secretName: secret.key,
+        secretTags: ["*"]
+      })
+    );
+
+    const getDefaultValue = () => {
+      if (secret.secretValueHidden) {
+        return canEditSecretValue ? hiddenValue : "";
+      }
+      return secret.valueOverride || secret.value || "";
+    };
+
     const {
       handleSubmit,
       control,
@@ -108,11 +140,11 @@ export const SecretItem = memo(
     } = useForm<TFormSchema>({
       defaultValues: {
         ...secret,
-        value: secret.secretValueHidden ? "" : secret.value
+        value: getDefaultValue()
       },
       values: {
         ...secret,
-        value: secret.secretValueHidden ? "" : secret.value
+        value: getDefaultValue()
       },
       resolver: zodResolver(formSchema)
     });
@@ -154,6 +186,7 @@ export const SecretItem = memo(
           secretTags: selectedTagSlugs
         })
       );
+
     const { secretValueHidden } = secret;
 
     const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
@@ -194,9 +227,24 @@ export const SecretItem = memo(
     };
 
     const handleFormSubmit = async (data: TFormSchema) => {
+      const hasDirectReferences = importedBy?.some(({ folders }) =>
+        folders?.some(({ secrets }) =>
+          secrets?.some(({ referencedSecretKey }) => referencedSecretKey === secret.key)
+        )
+      );
+
+      if (hasDirectReferences) {
+        handlePopUpOpen("editSecret", data);
+        return;
+      }
       await onSaveSecret(secret, { ...secret, ...data }, () => reset());
     };
 
+    const handleEditSecret = async (data: TFormSchema) => {
+      await onSaveSecret(secret, { ...secret, ...data }, () => reset());
+      handlePopUpClose("editSecret");
+    };
+
     const handleTagSelect = (tag: WsTag) => {
       if (selectedTagsGroupById?.[tag.id]) {
         const tagPos = selectedTags.findIndex(({ id }) => id === tag.id);
@@ -286,6 +334,13 @@ export const SecretItem = memo(
               tabIndex={0}
               role="button"
             >
+              {secretValueHidden && !isOverriden && (
+                <Tooltip
+                  content={`You do not have access to view the current value${canEditSecretValue && !isRotatedSecret ? ", but you can set a new one" : "."}`}
+                >
+                  <FontAwesomeIcon className="pr-2" size="sm" icon={faEyeSlash} />
+                </Tooltip>
+              )}
               {isOverriden ? (
                 <Controller
                   name="valueOverride"
@@ -301,8 +356,6 @@ export const SecretItem = memo(
                     />
                   )}
                 />
-              ) : secretValueHidden ? (
-                <Blur tooltipText="You do not have permission to read the value of this secret." />
               ) : (
                 <Controller
                   name="value"
@@ -312,11 +365,11 @@ export const SecretItem = memo(
                     <InfisicalSecretInput
                       isReadOnly={isReadOnly || isRotatedSecret}
                       key="secret-value"
-                      isVisible={isVisible}
+                      isVisible={isVisible && !secretValueHidden}
                       environment={environment}
                       secretPath={secretPath}
                       {...field}
-                      defaultValue={secretValueHidden ? "" : undefined}
+                      defaultValue={secretValueHidden ? hiddenValue : undefined}
                       containerClassName="py-1.5 rounded-md transition-all"
                     />
                   )}
@@ -682,6 +735,26 @@ export const SecretItem = memo(
             </AnimatePresence>
           </div>
         </div>
+        <DeleteActionModal
+          isOpen={popUp.editSecret.isOpen}
+          deleteKey="confirm"
+          buttonColorSchema="secondary"
+          buttonText="Save"
+          subTitle=""
+          title="Do you want to edit this secret?"
+          onChange={(isOpen) => handlePopUpToggle("editSecret", isOpen)}
+          onDeleteApproved={() => handleEditSecret(popUp?.editSecret?.data)}
+          formContent={
+            importedBy &&
+            importedBy.length > 0 && (
+              <CollapsibleSecretImports
+                importedBy={importedBy}
+                secretsToDelete={[secret.key]}
+                onlyReferences
+              />
+            )
+          }
+        />
       </form>
     );
   }

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx

@@ -8,6 +8,7 @@ import { DeleteActionModal } from "@app/components/v2";
 import { usePopUp } from "@app/hooks";
 import { useCreateSecretV3, useDeleteSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
 import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
+import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
 import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
@@ -29,11 +30,12 @@ type Props = {
   tags?: WsTag[];
   isVisible?: boolean;
   isProtectedBranch?: boolean;
+  usedBySecretSyncs?: UsedBySecretSyncs[];
   importedBy?: {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
@@ -47,10 +49,9 @@ export const SecretListView = ({
   tags: wsTags = [],
   isVisible,
   isProtectedBranch = false,
+  usedBySecretSyncs,
   importedBy
 }: Props) => {
-  console.log("secretssssss", secrets);
-
   const queryClient = useQueryClient();
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "deleteSecret",
@@ -368,6 +369,7 @@ export const SecretListView = ({
           onSaveSecret={handleSaveSecret}
           onDeleteSecret={onDeleteSecret}
           onDetailViewSecret={onDetailViewSecret}
+          importedBy={importedBy}
           onCreateTag={onCreateTag}
           handleSecretShare={() =>
             handlePopUpOpen("createSharedSecret", {
@@ -384,10 +386,11 @@ export const SecretListView = ({
         onDeleteApproved={handleSecretDelete}
         buttonText="Delete Secret"
         formContent={
-          importedBy &&
-          importedBy.length > 0 && (
+          ((importedBy && importedBy.length > 0) ||
+            (usedBySecretSyncs && usedBySecretSyncs?.length > 0)) && (
             <CollapsibleSecretImports
               importedBy={importedBy}
+              usedBySecretSyncs={usedBySecretSyncs}
               secretsToDelete={[(popUp.deleteSecret?.data as SecretV3RawSanitized)?.key || ""]}
             />
           )