Merge remote-tracking branch 'origin/main' into misc/privilege-management-v2-transition

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx

@@ -0,0 +1,197 @@
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
+import { HUMANITEC_SYNC_SCOPES } from "@app/helpers/secretSyncs";
+import {
+  THumanitecConnectionApp,
+  THumanitecConnectionEnvironment,
+  THumanitecConnectionOrganization,
+  useHumanitecConnectionListOrganizations
+} from "@app/hooks/api/appConnections/humanitec";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+
+import { TSecretSyncForm } from "../schemas";
+
+export const HumanitecSyncFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretSyncForm & { destination: SecretSync.Humanitec }
+  >();
+
+  const connectionId = useWatch({ name: "connection.id", control });
+  const currentOrg = watch("destinationConfig.org");
+  const currentApp = watch("destinationConfig.app");
+  const currentScope = watch("destinationConfig.scope");
+
+  const { data: organizations = [], isPending: isOrganizationsPending } =
+    useHumanitecConnectionListOrganizations(connectionId, {
+      enabled: Boolean(connectionId)
+    });
+
+  const selectedOrg = organizations?.find((org) => org.id === currentOrg);
+  const selectedApp = selectedOrg?.apps?.find((app) => app.id === currentApp);
+  const environments = selectedApp?.envs || [];
+
+  return (
+    <>
+      <SecretSyncConnectionField
+        onChange={() => {
+          setValue("destinationConfig.org", "");
+          setValue("destinationConfig.app", "");
+          setValue("destinationConfig.env", "");
+        }}
+      />
+      <Controller
+        name="destinationConfig.org"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Organization"
+          >
+            <FilterableSelect
+              isLoading={isOrganizationsPending && Boolean(connectionId)}
+              isDisabled={!connectionId}
+              value={organizations ? (organizations.find((org) => org.id === value) ?? []) : []}
+              onChange={(option) => {
+                onChange((option as SingleValue<THumanitecConnectionOrganization>)?.id ?? null);
+                setValue("destinationConfig.app", "");
+                setValue("destinationConfig.env", "");
+              }}
+              options={organizations}
+              placeholder="Select an organization..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id.toString()}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        name="destinationConfig.app"
+        control={control}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="App"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure that the app exists in the selected organization and the service account used on this connection has write permissions for the specified app."
+              >
+                <div>
+                  <span>Don&#39;t see the app you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
+            <FilterableSelect
+              menuPlacement="top"
+              isLoading={isOrganizationsPending && Boolean(connectionId) && Boolean(currentOrg)}
+              isDisabled={!connectionId || !currentOrg}
+              value={
+                organizations
+                  .find((org) => org.id === currentOrg)
+                  ?.apps?.find((app) => app.id === value) ?? null
+              }
+              onChange={(option) => {
+                onChange((option as SingleValue<THumanitecConnectionApp>)?.id ?? null);
+                setValue("destinationConfig.env", "");
+              }}
+              options={
+                currentOrg ? (organizations.find((org) => org.id === currentOrg)?.apps ?? []) : []
+              }
+              placeholder="Select an app..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id.toString()}
+            />
+          </FormControl>
+        )}
+      />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        defaultValue={HumanitecSyncScope.Application}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            errorText={error?.message}
+            isError={Boolean(error?.message)}
+            label="Scope"
+            tooltipClassName="max-w-lg py-3"
+            tooltipText={
+              <div className="flex flex-col gap-3">
+                <p>
+                  Specify how Infisical should manage secrets from Humanitec. The following options
+                  are available:
+                </p>
+                <ul className="flex list-disc flex-col gap-3 pl-4">
+                  {Object.values(HUMANITEC_SYNC_SCOPES).map(({ name, description }) => {
+                    return (
+                      <li key={name}>
+                        <p className="text-mineshaft-300">
+                          <span className="font-medium text-bunker-200">{name}</span>: {description}
+                        </p>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            }
+          >
+            <Select
+              value={value}
+              onValueChange={(val) => {
+                onChange(val);
+                setValue("destinationConfig.env", "");
+              }}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a scope..."
+              dropdownContainerClassName="max-w-none"
+            >
+              {Object.values(HumanitecSyncScope).map((scope) => (
+                <SelectItem className="capitalize" value={scope} key={scope}>
+                  {scope.replace("-", " ")}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      {currentScope === HumanitecSyncScope.Environment && (
+        <Controller
+          name="destinationConfig.env"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Environment">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={
+                  isOrganizationsPending &&
+                  Boolean(connectionId) &&
+                  Boolean(currentOrg) &&
+                  Boolean(currentApp)
+                }
+                isDisabled={!connectionId || !currentApp}
+                value={environments.find((env) => env.id === value) ?? null}
+                onChange={(option) =>
+                  onChange((option as SingleValue<THumanitecConnectionEnvironment>)?.id ?? null)
+                }
+                options={environments}
+                placeholder="Select an env..."
+                getOptionLabel={(option) => option.name}
+                getOptionValue={(option) => option.id.toString()}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx

@@ -10,6 +10,7 @@ import { AzureKeyVaultSyncFields } from "./AzureKeyVaultSyncFields";
 import { DatabricksSyncFields } from "./DatabricksSyncFields";
 import { GcpSyncFields } from "./GcpSyncFields";
 import { GitHubSyncFields } from "./GitHubSyncFields";
+import { HumanitecSyncFields } from "./HumanitecSyncFields";
 
 export const SecretSyncDestinationFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
@@ -31,6 +32,8 @@ export const SecretSyncDestinationFields = () => {
       return <AzureAppConfigurationSyncFields />;
     case SecretSync.Databricks:
       return <DatabricksSyncFields />;
+    case SecretSync.Humanitec:
+      return <HumanitecSyncFields />;
     default:
       throw new Error(`Unhandled Destination Config Field: ${destination}`);
   }

frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx

@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { FormControl, Select, SelectItem } from "@app/components/v2";
+import { FormControl, Select, SelectItem, Switch, Tooltip } from "@app/components/v2";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
 import { SecretSync, useSecretSyncOption } from "@app/hooks/api/secretSyncs";
 
@@ -38,6 +38,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
     case SecretSync.AzureKeyVault:
     case SecretSync.AzureAppConfiguration:
     case SecretSync.Databricks:
+    case SecretSync.Humanitec:
       AdditionalSyncOptionsFieldsComponent = null;
       break;
     default:
@@ -115,6 +116,44 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
         </>
       )}
       {AdditionalSyncOptionsFieldsComponent}
+      <Controller
+        control={control}
+        name="syncOptions.disableSecretDeletion"
+        render={({ field: { value, onChange }, fieldState: { error } }) => {
+          return (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="auto-sync-enabled"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p className="w-[11rem]">
+                  Disable Secret Deletion{" "}
+                  <Tooltip
+                    className="max-w-md"
+                    content={
+                      <>
+                        <p>
+                          When enabled, Infisical will <span className="font-semibold">not</span>{" "}
+                          remove secrets from the destination during a sync.
+                        </p>
+                        <p className="mt-4">
+                          Enable this option if you intend to manage some secrets manually outside
+                          of Infisical.
+                        </p>
+                      </>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                  </Tooltip>
+                </p>
+              </Switch>
+            </FormControl>
+          );
+        }}
+      />
       {/* <Controller
         render={({ field: { value, onChange }, fieldState: { error } }) => (
           <FormControl

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/HumanitecSyncReviewFields.tsx

@@ -0,0 +1,24 @@
+import { useFormContext } from "react-hook-form";
+
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+
+export const HumanitecSyncReviewFields = () => {
+  const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Humanitec }>();
+  const orgId = watch("destinationConfig.org");
+  const appId = watch("destinationConfig.app");
+  const envId = watch("destinationConfig.env");
+  const scope = watch("destinationConfig.scope");
+
+  return (
+    <>
+      <SecretSyncLabel label="Organization">{orgId}</SecretSyncLabel>
+      <SecretSyncLabel label="Application">{appId}</SecretSyncLabel>
+      {scope === HumanitecSyncScope.Environment && (
+        <SecretSyncLabel label="Environment">{envId}</SecretSyncLabel>
+      )}
+    </>
+  );
+};

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -20,6 +20,7 @@ import { AzureKeyVaultSyncReviewFields } from "./AzureKeyVaultSyncReviewFields";
 import { DatabricksSyncReviewFields } from "./DatabricksSyncReviewFields";
 import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
 import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
+import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
 
 export const SecretSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm>();
@@ -35,6 +36,7 @@ export const SecretSyncReviewFields = () => {
     secretPath,
     syncOptions: {
       // appendSuffix, prependPrefix,
+      disableSecretDeletion,
       initialSyncBehavior
     },
     destination,
@@ -67,6 +69,9 @@ export const SecretSyncReviewFields = () => {
     case SecretSync.Databricks:
       DestinationFieldsComponent = <DatabricksSyncReviewFields />;
       break;
+    case SecretSync.Humanitec:
+      DestinationFieldsComponent = <HumanitecSyncReviewFields />;
+      break;
     default:
       throw new Error(`Unhandled Destination Review Fields: ${destination}`);
   }
@@ -107,6 +112,11 @@ export const SecretSyncReviewFields = () => {
           {/* <SecretSyncLabel label="Prepend Prefix">{prependPrefix}</SecretSyncLabel>
           <SecretSyncLabel label="Append Suffix">{appendSuffix}</SecretSyncLabel> */}
           {AdditionalSyncOptionsFieldsComponent}
+          {disableSecretDeletion && (
+            <SecretSyncLabel label="Secret Deletion">
+              <Badge variant="primary">Disabled</Badge>
+            </SecretSyncLabel>
+          )}
         </div>
       </div>
       <div className="flex flex-col gap-3">

frontend/src/components/secret-syncs/forms/schemas/base-secret-sync-schema.ts

@@ -7,7 +7,8 @@ export const BaseSecretSyncSchema = <T extends AnyZodObject | undefined = undefi
   additionalSyncOptions?: T
 ) => {
   const baseSyncOptionsSchema = z.object({
-    initialSyncBehavior: z.nativeEnum(SecretSyncInitialSyncBehavior)
+    initialSyncBehavior: z.nativeEnum(SecretSyncInitialSyncBehavior),
+    disableSecretDeletion: z.boolean().optional().default(false)
     // scott: removed temporarily for evaluation of template formatting
     // prependPrefix: z
     //   .string()

frontend/src/components/secret-syncs/forms/schemas/humanitec-sync-destination-schema.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+
+export const HumanitecSyncDestinationSchema = BaseSecretSyncSchema().merge(
+  z.object({
+    destination: z.literal(SecretSync.Humanitec),
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(HumanitecSyncScope.Application),
+        org: z.string().trim().min(1, "Organization required"),
+        app: z.string().trim().min(1, "Application required")
+      }),
+      z.object({
+        scope: z.literal(HumanitecSyncScope.Environment),
+        org: z.string().trim().min(1, "Organization required"),
+        app: z.string().trim().min(1, "Application required"),
+        env: z.string().trim().min(1, "Environment required")
+      })
+    ])
+  })
+);

frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts

@@ -8,6 +8,7 @@ import { AwsParameterStoreSyncDestinationSchema } from "./aws-parameter-store-sy
 import { AzureAppConfigurationSyncDestinationSchema } from "./azure-app-configuration-sync-destination-schema";
 import { AzureKeyVaultSyncDestinationSchema } from "./azure-key-vault-sync-destination-schema";
 import { GcpSyncDestinationSchema } from "./gcp-sync-destination-schema";
+import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-schema";
 
 const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   AwsParameterStoreSyncDestinationSchema,
@@ -16,7 +17,8 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
   GcpSyncDestinationSchema,
   AzureKeyVaultSyncDestinationSchema,
   AzureAppConfigurationSyncDestinationSchema,
-  DatabricksSyncDestinationSchema
+  DatabricksSyncDestinationSchema,
+  HumanitecSyncDestinationSchema
 ]);
 
 export const SecretSyncFormSchema = SecretSyncUnionSchema;

frontend/src/const/routes.ts

@@ -23,7 +23,11 @@ export const ROUTE_PATHS = Object.freeze({
     ),
     SecretSharing: setRoute(
       "/organization/secret-sharing",
-      "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing"
+      "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/"
+    ),
+    SecretSharingSettings: setRoute(
+      "/organization/secret-sharing/settings",
+      "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings"
     ),
     SettingsPage: setRoute(
       "/organization/settings",

frontend/src/context/OrgPermissionContext/types.ts

@@ -34,13 +34,18 @@ export enum OrgPermissionSubjects {
   ProjectTemplates = "project-templates",
   AppConnections = "app-connections",
   Kmip = "kmip",
-  Gateway = "gateway"
+  Gateway = "gateway",
+  SecretShare = "secret-share"
 }
 
 export enum OrgPermissionAdminConsoleAction {
   AccessAllProjects = "access-all-projects"
 }
 
+export enum OrgPermissionSecretShareAction {
+  ManageSettings = "manage-settings"
+}
+
 export enum OrgPermissionAppConnectionActions {
   Read = "read",
   Create = "create",
@@ -100,8 +105,8 @@ export type OrgPermissionSet =
   | [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections]
   | [OrgPermissionIdentityActions, OrgPermissionSubjects.Identity]
   | [OrgPermissionKmipActions, OrgPermissionSubjects.Kmip]
-  | [OrgGatewayPermissionActions, OrgPermissionSubjects.Gateway];
-
+  | [OrgGatewayPermissionActions, OrgPermissionSubjects.Gateway]
+  | [OrgPermissionSecretShareAction, OrgPermissionSubjects.SecretShare];
 // TODO(scott): add back once org UI refactored
 // | [
 //     OrgPermissionAppConnectionActions,

frontend/src/helpers/appConnections.ts

@@ -11,6 +11,7 @@ import {
   TAppConnection
 } from "@app/hooks/api/appConnections/types";
 import { DatabricksConnectionMethod } from "@app/hooks/api/appConnections/types/databricks-connection";
+import { HumanitecConnectionMethod } from "@app/hooks/api/appConnections/types/humanitec-connection";
 
 export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: string }> = {
   [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
@@ -24,7 +25,8 @@ export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: st
     name: "Azure App Configuration",
     image: "Microsoft Azure.png"
   },
-  [AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" }
+  [AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" },
+  [AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -43,6 +45,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
       return { name: "Service Account Impersonation", icon: faUser };
     case DatabricksConnectionMethod.ServicePrincipal:
       return { name: "Service Principal", icon: faUser };
+    case HumanitecConnectionMethod.API_TOKEN:
+      return { name: "API Token", icon: faKey };
     default:
       throw new Error(`Unhandled App Connection Method: ${method}`);
   }

frontend/src/helpers/secretSyncs.ts

@@ -4,6 +4,7 @@ import {
   SecretSyncImportBehavior,
   SecretSyncInitialSyncBehavior
 } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }> = {
   [SecretSync.AWSParameterStore]: { name: "AWS Parameter Store", image: "Amazon Web Services.png" },
@@ -18,6 +19,10 @@ export const SECRET_SYNC_MAP: Record<SecretSync, { name: string; image: string }
   [SecretSync.Databricks]: {
     name: "Databricks",
     image: "Databricks.png"
+  },
+  [SecretSync.Humanitec]: {
+    name: "Humanitec",
+    image: "Humanitec.png"
   }
 };
 
@@ -28,7 +33,8 @@ export const SECRET_SYNC_CONNECTION_MAP: Record<SecretSync, AppConnection> = {
   [SecretSync.GCPSecretManager]: AppConnection.GCP,
   [SecretSync.AzureKeyVault]: AppConnection.AzureKeyVault,
   [SecretSync.AzureAppConfiguration]: AppConnection.AzureAppConfiguration,
-  [SecretSync.Databricks]: AppConnection.Databricks
+  [SecretSync.Databricks]: AppConnection.Databricks,
+  [SecretSync.Humanitec]: AppConnection.Humanitec
 };
 
 export const SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP: Record<
@@ -62,3 +68,19 @@ export const SECRET_SYNC_IMPORT_BEHAVIOR_MAP: Record<
     description: `Infisical will import any secrets present in the ${destinationName} destination, prioritizing values from ${destinationName} over Infisical when keys conflict.`
   })
 };
+
+export const HUMANITEC_SYNC_SCOPES: Record<
+  HumanitecSyncScope,
+  { name: string; description: string }
+> = {
+  [HumanitecSyncScope.Application]: {
+    name: "Application",
+    description:
+      "Infisical will sync secrets as application level shared values to the specified Humanitec application."
+  },
+  [HumanitecSyncScope.Environment]: {
+    name: "Environment",
+    description:
+      "Infisical will sync secrets as environment level shared values to the specified Humanitec application environment."
+  }
+};

frontend/src/hooks/api/admin/queries.ts

@@ -1,6 +1,7 @@
 import { useInfiniteQuery, useQuery, UseQueryOptions } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { Identity } from "@app/hooks/api/identities/types";
 
 import { User } from "../types";
 import {
@@ -10,7 +11,6 @@ import {
   TGetServerRootKmsEncryptionDetails,
   TServerConfig
 } from "./types";
-import { Identity } from "@app/hooks/api/identities/types";
 
 export const adminStandaloneKeys = {
   getUsers: "get-users",

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

@@ -4,5 +4,6 @@ export enum AppConnection {
   GCP = "gcp",
   AzureKeyVault = "azure-key-vault",
   AzureAppConfiguration = "azure-app-configuration",
-  Databricks = "databricks"
+  Databricks = "databricks",
+  Humanitec = "humanitec"
 }

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

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

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

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

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

@@ -0,0 +1,28 @@
+export type THumanitecOrganization = {
+  name: string;
+  id: string;
+  apps: THumanitecApp[];
+};
+
+export type THumanitecApp = {
+  id: string;
+  name: string;
+  envs: { id: string; name: string }[];
+};
+
+export type THumanitecConnectionApp = {
+  id: string;
+  name: string;
+  envs: THumanitecConnectionEnvironment[];
+};
+
+export type THumanitecConnectionEnvironment = {
+  id: string;
+  name: string;
+};
+
+export type THumanitecConnectionOrganization = {
+  id: string;
+  name: string;
+  apps: THumanitecConnectionApp[];
+};

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

@@ -34,13 +34,18 @@ export type TDatabricksConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.Databricks;
 };
 
+export type THumanitecConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Humanitec;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
   | TGcpConnectionOption
   | TAzureAppConfigurationConnectionOption
   | TAzureKeyVaultConnectionOption
-  | TDatabricksConnectionOption;
+  | TDatabricksConnectionOption
+  | THumanitecConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -49,4 +54,5 @@ export type TAppConnectionOptionMap = {
   [AppConnection.AzureKeyVault]: TAzureKeyVaultConnectionOption;
   [AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnectionOption;
   [AppConnection.Databricks]: TDatabricksConnectionOption;
+  [AppConnection.Humanitec]: THumanitecConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/humanitec-connection.ts

@@ -0,0 +1,13 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+export enum HumanitecConnectionMethod {
+  API_TOKEN = "api-token"
+}
+
+export type THumanitecConnection = TRootAppConnection & { app: AppConnection.Humanitec } & {
+  method: HumanitecConnectionMethod.API_TOKEN;
+  credentials: {
+    apiToken: string;
+  };
+};

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

@@ -3,6 +3,7 @@ import { TAppConnectionOption } from "@app/hooks/api/appConnections/types/app-op
 import { TAwsConnection } from "@app/hooks/api/appConnections/types/aws-connection";
 import { TDatabricksConnection } from "@app/hooks/api/appConnections/types/databricks-connection";
 import { TGitHubConnection } from "@app/hooks/api/appConnections/types/github-connection";
+import { THumanitecConnection } from "@app/hooks/api/appConnections/types/humanitec-connection";
 
 import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
 import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
@@ -13,6 +14,7 @@ export * from "./azure-app-configuration-connection";
 export * from "./azure-key-vault-connection";
 export * from "./gcp-connection";
 export * from "./github-connection";
+export * from "./humanitec-connection";
 
 export type TAppConnection =
   | TAwsConnection
@@ -20,7 +22,8 @@ export type TAppConnection =
   | TGcpConnection
   | TAzureKeyVaultConnection
   | TAzureAppConfigurationConnection
-  | TDatabricksConnection;
+  | TDatabricksConnection
+  | THumanitecConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -54,4 +57,5 @@ export type TAppConnectionMap = {
   [AppConnection.AzureKeyVault]: TAzureKeyVaultConnection;
   [AppConnection.AzureAppConfiguration]: TAzureAppConfigurationConnection;
   [AppConnection.Databricks]: TDatabricksConnection;
+  [AppConnection.Humanitec]: THumanitecConnection;
 };

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

@@ -462,6 +462,7 @@ export const useUpdateIdentityOidcAuth = () => {
       boundIssuer,
       boundAudiences,
       boundClaims,
+      claimMetadataMapping,
       boundSubject
     }) => {
       const {
@@ -478,7 +479,8 @@ export const useUpdateIdentityOidcAuth = () => {
           accessTokenTTL,
           accessTokenMaxTTL,
           accessTokenNumUsesLimit,
-          accessTokenTrustedIps
+          accessTokenTrustedIps,
+          claimMetadataMapping
         }
       );
 
@@ -504,6 +506,7 @@ export const useAddIdentityOidcAuth = () => {
       boundIssuer,
       boundAudiences,
       boundClaims,
+      claimMetadataMapping,
       boundSubject,
       accessTokenTTL,
       accessTokenMaxTTL,
@@ -524,7 +527,8 @@ export const useAddIdentityOidcAuth = () => {
           accessTokenTTL,
           accessTokenMaxTTL,
           accessTokenNumUsesLimit,
-          accessTokenTrustedIps
+          accessTokenTrustedIps,
+          claimMetadataMapping
         }
       );
 

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

@@ -193,6 +193,7 @@ export type IdentityOidcAuth = {
   boundIssuer: string;
   boundAudiences: string;
   boundClaims: Record<string, string>;
+  claimMetadataMapping?: Record<string, string>;
   boundSubject: string;
   accessTokenTTL: number;
   accessTokenMaxTTL: number;
@@ -208,6 +209,7 @@ export type AddIdentityOidcAuthDTO = {
   boundIssuer: string;
   boundAudiences: string;
   boundClaims: Record<string, string>;
+  claimMetadataMapping?: Record<string, string>;
   boundSubject: string;
   accessTokenTTL: number;
   accessTokenMaxTTL: number;
@@ -225,6 +227,7 @@ export type UpdateIdentityOidcAuthDTO = {
   boundIssuer?: string;
   boundAudiences?: string;
   boundClaims?: Record<string, string>;
+  claimMetadataMapping?: Record<string, string>;
   boundSubject?: string;
   accessTokenTTL?: number;
   accessTokenMaxTTL?: number;

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

@@ -109,7 +109,8 @@ export const useUpdateOrg = () => {
       orgId,
       defaultMembershipRoleSlug,
       enforceMfa,
-      selectedMfaMethod
+      selectedMfaMethod,
+      allowSecretSharingOutsideOrganization
     }) => {
       return apiRequest.patch(`/api/v1/organization/${orgId}`, {
         name,
@@ -118,7 +119,8 @@ export const useUpdateOrg = () => {
         slug,
         defaultMembershipRoleSlug,
         enforceMfa,
-        selectedMfaMethod
+        selectedMfaMethod,
+        allowSecretSharingOutsideOrganization
       });
     },
     onSuccess: () => {

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

@@ -16,6 +16,7 @@ export type Organization = {
   enforceMfa: boolean;
   selectedMfaMethod?: MfaMethod;
   shouldUseNewPrivilegeSystem: boolean;
+  allowSecretSharingOutsideOrganization?: boolean;
 };
 
 export type UpdateOrgDTO = {
@@ -27,6 +28,7 @@ export type UpdateOrgDTO = {
   defaultMembershipRoleSlug?: string;
   enforceMfa?: boolean;
   selectedMfaMethod?: MfaMethod;
+  allowSecretSharingOutsideOrganization?: boolean;
 };
 
 export type BillingDetails = {

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

@@ -5,7 +5,8 @@ export enum SecretSync {
   GCPSecretManager = "gcp-secret-manager",
   AzureKeyVault = "azure-key-vault",
   AzureAppConfiguration = "azure-app-configuration",
-  Databricks = "databricks"
+  Databricks = "databricks",
+  Humanitec = "humanitec"
 }
 
 export enum SecretSyncStatus {

frontend/src/hooks/api/secretSyncs/types/humanitec-sync.ts

@@ -0,0 +1,29 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
+
+export type THumanitecSync = TRootSecretSync & {
+  destination: SecretSync.Humanitec;
+  destinationConfig:
+    | {
+        scope: HumanitecSyncScope.Application;
+        org: string;
+        app: string;
+      }
+    | {
+        scope: HumanitecSyncScope.Environment;
+        org: string;
+        app: string;
+        env: string;
+      };
+  connection: {
+    app: AppConnection.Humanitec;
+    name: string;
+    id: string;
+  };
+};
+
+export enum HumanitecSyncScope {
+  Application = "application",
+  Environment = "environment"
+}

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

@@ -8,6 +8,7 @@ import { TAwsSecretsManagerSync } from "./aws-secrets-manager-sync";
 import { TAzureAppConfigurationSync } from "./azure-app-configuration-sync";
 import { TAzureKeyVaultSync } from "./azure-key-vault-sync";
 import { TGcpSync } from "./gcp-sync";
+import { THumanitecSync } from "./humanitec-sync";
 
 export type TSecretSyncOption = {
   name: string;
@@ -22,7 +23,8 @@ export type TSecretSync =
   | TGcpSync
   | TAzureKeyVaultSync
   | TAzureAppConfigurationSync
-  | TDatabricksSync;
+  | TDatabricksSync
+  | THumanitecSync;
 
 export type TListSecretSyncs = { secretSyncs: TSecretSync[] };
 

frontend/src/hooks/api/secretSyncs/types/root-sync.ts

@@ -3,6 +3,7 @@ import { SecretSyncInitialSyncBehavior, SecretSyncStatus } from "@app/hooks/api/
 
 export type RootSyncOptions = {
   initialSyncBehavior: SecretSyncInitialSyncBehavior;
+  disableSecretDeletion?: boolean;
   // prependPrefix?: string;
   // appendSuffix?: string;
 };

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -1,30 +1,33 @@
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Link, linkOptions, Outlet, useLocation, useRouterState } from "@tanstack/react-router";
+import { linkOptions, Outlet, useLocation, useRouterState } from "@tanstack/react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
 import { Banner } from "@app/components/page-frames/Banner";
-import {
-  BreadcrumbContainer,
-  Menu,
-  MenuGroup,
-  MenuItem,
-  TBreadcrumbFormat
-} from "@app/components/v2";
-import { useServerConfig } from "@app/context";
+import { BreadcrumbContainer, TBreadcrumbFormat } from "@app/components/v2";
+import { OrgPermissionSubjects, useOrgPermission, useServerConfig } from "@app/context";
+import { OrgPermissionSecretShareAction } from "@app/context/OrgPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
 import { MinimizedOrgSidebar } from "./components/MinimizedOrgSidebar";
 import { SidebarHeader } from "./components/SidebarHeader";
+import { DefaultSideBar, SecretSharingSideBar } from "./ProductsSideBar";
 
 export const OrganizationLayout = () => {
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const location = useLocation();
   const { config } = useServerConfig();
+  const { permission } = useOrgPermission();
+
+  const shouldShowProductsSidebar = permission.can(
+    OrgPermissionSecretShareAction.ManageSettings,
+    OrgPermissionSubjects.SecretShare
+  );
+
   const isOrganizationSpecificPage = location.pathname.startsWith("/organization");
   const breadcrumbs =
     isOrganizationSpecificPage && matches && "breadcrumbs" in matches
@@ -35,16 +38,23 @@ export const OrganizationLayout = () => {
 
   const { t } = useTranslation();
 
+  const isSecretSharingPage = (
+    [
+      linkOptions({ to: "/organization/secret-sharing" }).to,
+      linkOptions({ to: "/organization/secret-sharing/settings" }).to
+    ] as string[]
+  ).includes(location.pathname);
+
   const shouldShowOrgSidebar =
     location.pathname.startsWith("/organization") &&
+    (!isSecretSharingPage || shouldShowProductsSidebar) &&
     !(
       [
         linkOptions({ to: "/organization/secret-manager/overview" }).to,
         linkOptions({ to: "/organization/cert-manager/overview" }).to,
         linkOptions({ to: "/organization/ssh/overview" }).to,
         linkOptions({ to: "/organization/kms/overview" }).to,
-        linkOptions({ to: "/organization/secret-scanning" }).to,
-        linkOptions({ to: "/organization/secret-sharing" }).to
+        linkOptions({ to: "/organization/secret-scanning" }).to
       ] as string[]
     ).includes(location.pathname);
 
@@ -73,58 +83,7 @@ export const OrganizationLayout = () => {
                   <div className="p-2 pt-3">
                     <SidebarHeader />
                   </div>
-                  <Menu>
-                    <MenuGroup title="Organization Control">
-                      <Link to="/organization/audit-logs">
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="moving-block">
-                            Audit Logs
-                          </MenuItem>
-                        )}
-                      </Link>
-                      {(window.location.origin.includes("https://app.infisical.com") ||
-                        window.location.origin.includes("https://eu.infisical.com") ||
-                        window.location.origin.includes("https://gamma.infisical.com")) && (
-                        <Link to="/organization/billing">
-                          {({ isActive }) => (
-                            <MenuItem isSelected={isActive} icon="spinning-coin">
-                              Usage & Billing
-                            </MenuItem>
-                          )}
-                        </Link>
-                      )}
-                    </MenuGroup>
-                    <MenuGroup title="Other">
-                      <Link to="/organization/access-management">
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="groups">
-                            Access Control
-                          </MenuItem>
-                        )}
-                      </Link>
-                      <Link to="/organization/app-connections">
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="jigsaw-puzzle">
-                            App Connections
-                          </MenuItem>
-                        )}
-                      </Link>
-                      <Link to="/organization/gateways">
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="gateway" iconMode="reverse">
-                            Gateways
-                          </MenuItem>
-                        )}
-                      </Link>
-                      <Link to="/organization/settings">
-                        {({ isActive }) => (
-                          <MenuItem isSelected={isActive} icon="toggle-settings">
-                            Organization Settings
-                          </MenuItem>
-                        )}
-                      </Link>
-                    </MenuGroup>
-                  </Menu>
+                  {isSecretSharingPage ? <SecretSharingSideBar /> : <DefaultSideBar />}
                 </nav>
               </motion.div>
             )}

frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx

@@ -0,0 +1,58 @@
+import { Link } from "@tanstack/react-router";
+
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
+
+export const DefaultSideBar = () => (
+  <Menu>
+    <MenuGroup title="Organization Control">
+      <Link to="/organization/audit-logs">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="moving-block">
+            Audit Logs
+          </MenuItem>
+        )}
+      </Link>
+      {(window.location.origin.includes("https://app.infisical.com") ||
+        window.location.origin.includes("https://eu.infisical.com") ||
+        window.location.origin.includes("https://gamma.infisical.com")) && (
+        <Link to="/organization/billing">
+          {({ isActive }) => (
+            <MenuItem isSelected={isActive} icon="spinning-coin">
+              Usage & Billing
+            </MenuItem>
+          )}
+        </Link>
+      )}
+    </MenuGroup>
+    <MenuGroup title="Other">
+      <Link to="/organization/access-management">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="groups">
+            Access Control
+          </MenuItem>
+        )}
+      </Link>
+      <Link to="/organization/app-connections">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="jigsaw-puzzle">
+            App Connections
+          </MenuItem>
+        )}
+      </Link>
+      <Link to="/organization/gateways">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="gateway" iconMode="reverse">
+            Gateways
+          </MenuItem>
+        )}
+      </Link>
+      <Link to="/organization/settings">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="toggle-settings">
+            Organization Settings
+          </MenuItem>
+        )}
+      </Link>
+    </MenuGroup>
+  </Menu>
+);

frontend/src/layouts/OrganizationLayout/ProductsSideBar/SecretSharingSideBar.tsx

@@ -0,0 +1,34 @@
+import { Link, useMatchRoute } from "@tanstack/react-router";
+
+import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
+
+export const SecretSharingSideBar = () => {
+  const matchRoute = useMatchRoute();
+  const isOverviewActive = !!matchRoute({
+    to: "/organization/secret-sharing",
+    fuzzy: false
+  });
+
+  return (
+    <Menu>
+      <MenuGroup title="Overview">
+        <Link to="/organization/secret-sharing">
+          {() => (
+            <MenuItem isSelected={isOverviewActive} icon="lock-closed">
+              Secret Sharing
+            </MenuItem>
+          )}
+        </Link>
+      </MenuGroup>
+      <MenuGroup title="Other">
+        <Link to="/organization/secret-sharing/settings">
+          {({ isActive }) => (
+            <MenuItem isSelected={isActive} icon="toggle-settings">
+              Settings
+            </MenuItem>
+          )}
+        </Link>
+      </MenuGroup>
+    </Menu>
+  );
+};

frontend/src/layouts/OrganizationLayout/ProductsSideBar/index.ts

@@ -0,0 +1,2 @@
+export * from "./DefaultSideBar";
+export * from "./SecretSharingSideBar";

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -28,13 +28,13 @@ import {
   useGetServerRootKmsEncryptionDetails,
   useUpdateServerConfig
 } from "@app/hooks/api";
+import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
 
 import { AuthPanel } from "./components/AuthPanel";
 import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
 import { RateLimitPanel } from "./components/RateLimitPanel";
 import { UserPanel } from "./components/UserPanel";
-import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
 
 enum TabSections {
   Settings = "settings",

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

@@ -46,12 +46,22 @@ const schema = z.object({
   caCert: z.string().trim().default(""),
   boundIssuer: z.string().min(1),
   boundAudiences: z.string().optional().default(""),
-  boundClaims: z.array(
-    z.object({
-      key: z.string(),
-      value: z.string()
-    })
-  ),
+  boundClaims: z
+    .array(
+      z.object({
+        key: z.string(),
+        value: z.string()
+      })
+    )
+    .default([]),
+  claimMetadataMapping: z
+    .array(
+      z.object({
+        key: z.string(),
+        value: z.string()
+      })
+    )
+    .default([]),
   boundSubject: z.string().optional().default("")
 });
 
@@ -96,10 +106,11 @@ export const IdentityOidcAuthForm = ({
       accessTokenTTL: "2592000",
       accessTokenMaxTTL: "2592000",
       accessTokenNumUsesLimit: "0",
-      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+      boundClaims: [],
+      claimMetadataMapping: []
     }
   });
-
   const {
     fields: boundClaimsFields,
     append: appendBoundClaimField,
@@ -109,6 +120,15 @@ export const IdentityOidcAuthForm = ({
     name: "boundClaims"
   });
 
+  const {
+    fields: claimMetadataMappingFields,
+    append: appendClaimMetadataMappingField,
+    remove: removeClaimMetadataMappingField
+  } = useFieldArray({
+    control,
+    name: "claimMetadataMapping"
+  });
+
   const {
     fields: accessTokenTrustedIpsFields,
     append: appendAccessTokenTrustedIp,
@@ -126,6 +146,12 @@ export const IdentityOidcAuthForm = ({
           key,
           value
         })),
+        claimMetadataMapping: data?.claimMetadataMapping
+          ? Object.entries(data.claimMetadataMapping).map(([key, value]) => ({
+              key,
+              value
+            }))
+          : undefined,
         boundSubject: data.boundSubject,
         accessTokenTTL: String(data.accessTokenTTL),
         accessTokenMaxTTL: String(data.accessTokenMaxTTL),
@@ -149,7 +175,8 @@ export const IdentityOidcAuthForm = ({
         accessTokenTTL: "2592000",
         accessTokenMaxTTL: "2592000",
         accessTokenNumUsesLimit: "0",
-        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }],
+        claimMetadataMapping: []
       });
     }
   }, [data]);
@@ -164,6 +191,7 @@ export const IdentityOidcAuthForm = ({
     boundIssuer,
     boundAudiences,
     boundClaims,
+    claimMetadataMapping,
     boundSubject
   }: FormData) => {
     try {
@@ -180,6 +208,9 @@ export const IdentityOidcAuthForm = ({
           boundIssuer,
           boundAudiences,
           boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          claimMetadataMapping: claimMetadataMapping
+            ? Object.fromEntries(claimMetadataMapping.map((entry) => [entry.key, entry.value]))
+            : undefined,
           boundSubject,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -194,6 +225,9 @@ export const IdentityOidcAuthForm = ({
           boundIssuer,
           boundAudiences,
           boundClaims: Object.fromEntries(boundClaims.map((entry) => [entry.key, entry.value])),
+          claimMetadataMapping: claimMetadataMapping
+            ? Object.fromEntries(claimMetadataMapping.map((entry) => [entry.key, entry.value]))
+            : undefined,
           boundSubject,
           organizationId: orgId,
           accessTokenTTL: Number(accessTokenTTL),
@@ -223,7 +257,9 @@ export const IdentityOidcAuthForm = ({
     <form
       onSubmit={handleSubmit(onFormSubmit, (fields) => {
         setTabValue(
-          ["accessTokenTrustedIps", "caCert", "boundClaims"].includes(Object.keys(fields)[0])
+          ["accessTokenTrustedIps", "caCert", "claimMetadataMapping"].includes(
+            Object.keys(fields)[0]
+          )
             ? IdentityFormTab.Advanced
             : IdentityFormTab.Configuration
         );
@@ -313,63 +349,6 @@ export const IdentityOidcAuthForm = ({
               </FormControl>
             )}
           />
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue="2592000"
-            name="accessTokenMaxTTL"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token Max TTL (seconds)"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            defaultValue="0"
-            name="accessTokenNumUsesLimit"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="Access Token Max Number of Uses"
-                isError={Boolean(error)}
-                errorText={error?.message}
-              >
-                <Input {...field} placeholder="0" type="number" min="0" step="1" />
-              </FormControl>
-            )}
-          />
-        </TabPanel>
-        <TabPanel value={IdentityFormTab.Advanced}>
-          <Controller
-            control={control}
-            name="caCert"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label="CA Certificate"
-                errorText={error?.message}
-                isError={Boolean(error)}
-              >
-                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-              </FormControl>
-            )}
-          />
           {boundClaimsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -449,6 +428,155 @@ export const IdentityOidcAuthForm = ({
               Add Claims
             </Button>
           </div>
+
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+
+          {claimMetadataMappingFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`claimMetadataMapping.${index}.key`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Token Claim Mapping" : undefined}
+                      icon={
+                        index === 0 ? (
+                          <Tooltip
+                            className="text-center"
+                            content={
+                              <div className="w-[180px]">
+                                <p>Map OIDC token claims to metadata fields</p>
+                                <p className="mt-2 text-sm">Example:</p>
+                                <p className="mt-1 text-sm">
+                                  &apos;role&apos; → &apos;token.groups&apos;
+                                </p>
+                                <p className="mt-1 text-xs text-gray-400">
+                                  Becomes: identity.metadata.oidc.claims.role
+                                </p>
+                              </div>
+                            }
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        ) : undefined
+                      }
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="Field name"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <Controller
+                control={control}
+                name={`claimMetadataMapping.${index}.value`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="Token claim"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => removeClaimMetadataMappingField(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={() =>
+                appendClaimMetadataMappingField({
+                  key: "",
+                  value: ""
+                })
+              }
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add Token Mapping
+            </Button>
+          </div>
+
           {accessTokenTrustedIpsFields.map(({ id }, index) => (
             <div className="mb-3 flex items-end space-x-2" key={id}>
               <Controller
@@ -519,24 +647,21 @@ export const IdentityOidcAuthForm = ({
           </div>
         </TabPanel>
       </Tabs>
-      <div className="flex items-center">
-        <Button
-          className="mr-4"
-          size="sm"
-          type="submit"
-          isLoading={isSubmitting}
-          isDisabled={isSubmitting}
-        >
-          {isUpdate ? "Update" : "Add"}
-        </Button>
 
-        <Button
-          colorSchema="secondary"
-          variant="plain"
-          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-        >
-          Cancel
-        </Button>
+      <div className="mt-8 flex justify-between">
+        <div className="flex items-center">
+          <Button
+            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+            variant="outline_bg"
+            className="mr-4"
+            isDisabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" isLoading={isSubmitting}>
+            {isUpdate ? "Update" : "Add"} Auth Method
+          </Button>
+        </div>
       </div>
     </form>
   );

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

@@ -15,6 +15,7 @@ import { AzureKeyVaultConnectionForm } from "./AzureKeyVaultConnectionForm";
 import { DatabricksConnectionForm } from "./DatabricksConnectionForm";
 import { GcpConnectionForm } from "./GcpConnectionForm";
 import { GitHubConnectionForm } from "./GitHubConnectionForm";
+import { HumanitecConnectionForm } from "./HumanitecConnectionForm";
 
 type FormProps = {
   onComplete: (appConnection: TAppConnection) => void;
@@ -62,6 +63,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
       return <AzureAppConfigurationConnectionForm />;
     case AppConnection.Databricks:
       return <DatabricksConnectionForm onSubmit={onSubmit} />;
+    case AppConnection.Humanitec:
+      return <HumanitecConnectionForm onSubmit={onSubmit} />;
     default:
       throw new Error(`Unhandled App ${app}`);
   }
@@ -107,6 +110,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
       return <AzureAppConfigurationConnectionForm appConnection={appConnection} />;
     case AppConnection.Databricks:
       return <DatabricksConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
+    case AppConnection.Humanitec:
+      return <HumanitecConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
     default:
       throw new Error(`Unhandled App ${(appConnection as TAppConnection).app}`);
   }

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

@@ -0,0 +1,132 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { HumanitecConnectionMethod, THumanitecConnection } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: THumanitecConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Humanitec)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(HumanitecConnectionMethod.API_TOKEN),
+    credentials: z.object({
+      apiToken: z.string().trim().min(1, "Service API Token required")
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Humanitec,
+      method: HumanitecConnectionMethod.API_TOKEN
+    }
+  });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, isDirty }
+  } = form;
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {!isUpdate && <GenericAppConnectionsFields />}
+        <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.Humanitec].name
+              }. This field cannot be changed after creation.`}
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              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(HumanitecConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.apiToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Service API Token"
+            >
+              <SecretInput
+                containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+              />
+            </FormControl>
+          )}
+        />
+        <div className="mt-8 flex items-center">
+          <Button
+            className="mr-4"
+            size="sm"
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting || !isDirty}
+          >
+            {isUpdate ? "Update Credentials" : "Connect to Humanitec"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

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

@@ -111,6 +111,26 @@ export const ViewIdentityOidcAuthContent = ({
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Claim Metadata Mapping">
+        {data.claimMetadataMapping && Object.keys(data.claimMetadataMapping).length && (
+          <Tooltip
+            side="right"
+            className="max-w-xl p-2"
+            content={
+              <pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
+                {JSON.stringify(data.claimMetadataMapping, null, 2)}
+              </pre>
+            }
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>Reveal</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
+      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts

@@ -7,7 +7,8 @@ import {
   OrgPermissionAppConnectionActions,
   OrgPermissionGroupActions,
   OrgPermissionIdentityActions,
-  OrgPermissionKmipActions
+  OrgPermissionKmipActions,
+  OrgPermissionSecretShareAction
 } from "@app/context/OrgPermissionContext/types";
 import { TPermission } from "@app/hooks/api/roles/types";
 
@@ -78,6 +79,12 @@ const adminConsolePermissionSchmea = z
   })
   .optional();
 
+const secretSharingPermissionSchema = z
+  .object({
+    [OrgPermissionSecretShareAction.ManageSettings]: z.boolean().optional()
+  })
+  .optional();
+
 export const formSchema = z.object({
   name: z.string().trim(),
   description: z.string().trim().optional(),
@@ -111,7 +118,8 @@ export const formSchema = z.object({
       [OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,
       "app-connections": appConnectionsPermissionSchema,
       kmip: kmipPermissionSchema,
-      gateway: orgGatewayPermissionSchema
+      gateway: orgGatewayPermissionSchema,
+      "secret-share": secretSharingPermissionSchema
     })
     .optional()
 });

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionSecretShareRow.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useMemo } from "react";
+import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  Custom = "custom"
+}
+
+const PERMISSION_ACTIONS = [{ action: "manage-settings", label: "Manage settings" }] as const;
+
+export const OrgPermissionSecretShareRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.secret-share"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    if (rule?.["manage-settings"]) {
+      return Permission.Custom;
+    }
+    return Permission.NoAccess;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  useEffect(() => {
+    const isRowCustom = selectedPermissionCategory === Permission.Custom;
+    if (isRowCustom) {
+      setIsRowExpanded.on();
+    }
+  }, []);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (!val) return;
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    if (val === Permission.NoAccess) {
+      setValue("permissions.secret-share", { "manage-settings": false }, { shouldDirty: true });
+    }
+  };
+
+  return (
+    <>
+      <Tr
+        className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+        onClick={() => setIsRowExpanded.toggle()}
+      >
+        <Td>
+          <FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
+        </Td>
+        <Td>Secret Share</Td>
+        <Td>
+          <Select
+            value={selectedPermissionCategory}
+            className="w-40 bg-mineshaft-600"
+            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
+            onValueChange={handlePermissionChange}
+            isDisabled={!isEditable}
+          >
+            <SelectItem value={Permission.NoAccess}>No Access</SelectItem>
+            <SelectItem value={Permission.Custom}>Custom</SelectItem>
+          </Select>
+        </Td>
+      </Tr>
+      {isRowExpanded && (
+        <Tr>
+          <Td
+            colSpan={3}
+            className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
+          >
+            <div className="grid grid-cols-3 gap-4">
+              {PERMISSION_ACTIONS.map(({ action, label }) => {
+                return (
+                  <Controller
+                    name={`permissions.secret-share.${action}`}
+                    key={`permissions.secret-share.${action}`}
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        isChecked={field.value}
+                        onCheckedChange={(e) => {
+                          if (!isEditable) {
+                            createNotification({
+                              type: "error",
+                              text: "Failed to update default role"
+                            });
+                            return;
+                          }
+                          field.onChange(e);
+                        }}
+                        id={`permissions.secret-share.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionRow.tsx

@@ -74,7 +74,7 @@ type Props = {
   title: string;
   formName: keyof Omit<
     Exclude<TFormSchema["permissions"], undefined>,
-    "workspace" | "organization-admin-console" | "kmip" | "gateway"
+    "workspace" | "organization-admin-console" | "kmip" | "gateway" | "secret-share"
   >;
   setValue: UseFormSetValue<TFormSchema>;
   control: Control<TFormSchema>;

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -18,6 +18,7 @@ import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
 import { OrgPermissionIdentityRow } from "./OrgPermissionIdentityRow";
 import { OrgPermissionKmipRow } from "./OrgPermissionKmipRow";
+import { OrgPermissionSecretShareRow } from "./OrgPermissionSecretShareRow";
 import { OrgRoleWorkspaceRow } from "./OrgRoleWorkspaceRow";
 import { RolePermissionRow } from "./RolePermissionRow";
 
@@ -181,6 +182,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                 setValue={setValue}
                 isEditable={isCustomRole}
               />
+              <OrgPermissionSecretShareRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
               <OrgRoleWorkspaceRow
                 control={control}
                 setValue={setValue}

frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/AddShareSecretModal.tsx

@@ -1,4 +1,5 @@
 import { Modal, ModalContent } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 import { ShareSecretForm } from "@app/pages/public/ShareSecretPage/components";
 
@@ -11,6 +12,7 @@ type Props = {
 };
 
 export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
   return (
     <Modal
       isOpen={popUp?.createSharedSecret?.isOpen}
@@ -25,6 +27,9 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
         <ShareSecretForm
           isPublic={false}
           value={(popUp.createSharedSecret.data as { value?: string })?.value}
+          allowSecretSharingOutsideOrganization={
+            currentOrg?.allowSecretSharingOutsideOrganization ?? true
+          }
         />
       </ModalContent>
     </Modal>

frontend/src/pages/organization/SecretSharingPage/route.tsx

@@ -11,7 +11,7 @@ const SecretSharingQueryParams = z.object({
 });
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing"
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/"
 )({
   component: SecretSharingPage,
 

frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx

@@ -0,0 +1,35 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@app/components/v2";
+import {
+  OrgPermissionSecretShareAction,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
+import { withPermission } from "@app/hoc";
+
+import { SecretSharingSettingsTabGroup } from "./components";
+
+export const SecretSharingSettingsPage = withPermission(
+  () => {
+    const { t } = useTranslation();
+
+    return (
+      <>
+        <Helmet>
+          <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        </Helmet>
+        <div className="flex w-full justify-center bg-bunker-800 text-white">
+          <div className="w-full max-w-7xl">
+            <PageHeader title={t("settings.org.title")} />
+            <SecretSharingSettingsTabGroup />
+          </div>
+        </div>
+      </>
+    );
+  },
+  {
+    action: OrgPermissionSecretShareAction.ManageSettings,
+    subject: OrgPermissionSubjects.SecretShare
+  }
+);

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx

@@ -0,0 +1,58 @@
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+export const SecretSharingAllowShareToAnyone = () => {
+  const { currentOrg } = useOrganization();
+  const { mutateAsync } = useUpdateOrg();
+
+  const handleSecretSharingToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      await mutateAsync({
+        orgId: currentOrg.id,
+        allowSecretSharingOutsideOrganization: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} secret sharing to members outside of this organization`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <h3 className="text-md text-mineshaft-100">
+            Allow sharing secrets to members outside of this organization
+          </h3>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-secret-sharing-outside-org"
+                onCheckedChange={(value) => handleSecretSharingToggle(value)}
+                isChecked={currentOrg?.allowSecretSharingOutsideOrganization ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          If enabled, team members will be able to share secrets to members outside of this
+          organization
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/index.tsx

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

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsGeneralTab/SecretSharingSettingsGeneralTab.tsx

@@ -0,0 +1,9 @@
+import { SecretSharingAllowShareToAnyone } from "../SecretSharingAllowShareToAnyone";
+
+export const SecretSharingSettingsGeneralTab = () => {
+  return (
+    <div className="w-full">
+      <SecretSharingAllowShareToAnyone />
+    </div>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsGeneralTab/index.tsx

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

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsTabGroup/SecretSharingSettingsTabGroup.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useSearch } from "@tanstack/react-router";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+
+import { SecretSharingSettingsGeneralTab } from "../SecretSharingSettingsGeneralTab";
+
+export const SecretSharingSettingsTabGroup = () => {
+  const search = useSearch({
+    from: ROUTE_PATHS.Organization.SecretSharingSettings.id
+  });
+  const tabs = [
+    {
+      name: "General",
+      key: "tab-secret-sharing-general",
+      component: SecretSharingSettingsGeneralTab
+    }
+  ];
+
+  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
+
+  return (
+    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+      <TabList>
+        {tabs.map((tab) => (
+          <Tab value={tab.key} key={tab.key}>
+            {tab.name}
+          </Tab>
+        ))}
+      </TabList>
+      {tabs.map(({ key, component: Component }) => (
+        <TabPanel value={key} key={`tab-panel-${key}`}>
+          <Component />
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsTabGroup/index.tsx

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

frontend/src/pages/organization/SecretSharingSettingsPage/components/index.tsx

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

frontend/src/pages/organization/SecretSharingSettingsPage/route.tsx

@@ -0,0 +1,37 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretSharingSettingsPage } from "./SecretSharingSettingsPage";
+
+const SettingsPageQueryParams = z.object({
+  selectedTab: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings"
+)({
+  component: SecretSharingSettingsPage,
+  validateSearch: zodValidator(SettingsPageQueryParams),
+  search: {
+    middlewares: [stripSearchParams({ selectedTab: "" })]
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "Secret Sharing",
+        link: linkOptions({ to: "/organization/secret-sharing" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
+});

frontend/src/pages/public/ShareSecretPage/components/ShareSecretForm.tsx

@@ -41,9 +41,14 @@ export type FormData = z.infer<typeof schema>;
 type Props = {
   isPublic: boolean; // whether or not this is a public (non-authenticated) secret sharing form
   value?: string;
+  allowSecretSharingOutsideOrganization?: boolean;
 };
 
-export const ShareSecretForm = ({ isPublic, value }: Props) => {
+export const ShareSecretForm = ({
+  isPublic,
+  value,
+  allowSecretSharingOutsideOrganization = true
+}: Props) => {
   const [secretLink, setSecretLink] = useState("");
   const [, isCopyingSecret, setCopyTextSecret] = useTimedReset<string>({
     initialState: "Copy to clipboard"
@@ -230,7 +235,9 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
                 onValueChange={(e) => onChange(e)}
                 className="w-full"
               >
-                <SelectItem value={SecretSharingAccessType.Anyone}>Anyone</SelectItem>
+                {allowSecretSharingOutsideOrganization && (
+                  <SelectItem value={SecretSharingAccessType.Anyone}>Anyone</SelectItem>
+                )}
                 <SelectItem value={SecretSharingAccessType.Organization}>
                   People within your organization
                 </SelectItem>

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/HumanitecSyncDestinationCol.tsx

@@ -0,0 +1,14 @@
+import { THumanitecSync } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: THumanitecSync;
+};
+
+export const HumanitecSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol.tsx

@@ -7,6 +7,7 @@ import { AzureKeyVaultDestinationSyncCol } from "./AzureKeyVaultDestinationSyncC
 import { DatabricksSyncDestinationCol } from "./DatabricksSyncDestinationCol";
 import { GcpSyncDestinationCol } from "./GcpSyncDestinationCol";
 import { GitHubSyncDestinationCol } from "./GitHubSyncDestinationCol";
+import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
 
 type Props = {
   secretSync: TSecretSync;
@@ -28,6 +29,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
       return <AzureAppConfigurationDestinationSyncCol secretSync={secretSync} />;
     case SecretSync.Databricks:
       return <DatabricksSyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.Humanitec:
+      return <HumanitecSyncDestinationCol secretSync={secretSync} />;
     default:
       throw new Error(
         `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -3,6 +3,7 @@ import {
   GitHubSyncScope,
   GitHubSyncVisibility
 } from "@app/hooks/api/secretSyncs/types/github-sync";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 // This functional ensures parity across what is displayed in the destination column
 // and the values used when search filtering
@@ -59,6 +60,19 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
     case SecretSync.Databricks:
       primaryText = destinationConfig.scope;
       break;
+    case SecretSync.Humanitec:
+      switch (destinationConfig.scope) {
+        case HumanitecSyncScope.Application:
+          primaryText = destinationConfig.app;
+          break;
+        case HumanitecSyncScope.Environment:
+          primaryText = `${destinationConfig.app} / ${destinationConfig.env}`;
+          break;
+        default:
+          throw new Error(`Unhandled Humanitec Scope Destination Col Values ${destination}`);
+      }
+      secondaryText = `Organization - ${destinationConfig.org}`;
+      break;
     default:
       throw new Error(`Unhandled Destination Col Values ${destination}`);
   }

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

@@ -19,6 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
@@ -49,8 +50,10 @@ import {
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
   ProjectPermissionActions,
+  ProjectPermissionDynamicSecretActions,
   ProjectPermissionSub,
   useProjectPermission,
+  useSubscription,
   useWorkspace
 } from "@app/context";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
@@ -71,6 +74,7 @@ import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import { useDynamicSecretOverview, useFolderOverview, useSecretOverview } from "@app/hooks/utils";
 
+import { CreateDynamicSecretForm } from "../SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm";
 import { FolderForm } from "../SecretDashboardPage/components/ActionBar/FolderForm";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
@@ -131,6 +135,7 @@ export const OverviewPage = () => {
   const [searchFilter, setSearchFilter] = useState("");
   const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(searchFilter);
   const secretPath = (routerSearch?.secretPath as string) || "/";
+  const { subscription } = useSubscription();
 
   const [filter, setFilter] = useState<Filter>(DEFAULT_FILTER_STATE);
   const [filterHistory, setFilterHistory] = useState<
@@ -178,6 +183,15 @@ export const OverviewPage = () => {
   }, []);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
+  const userAvailableDynamicSecretEnvs = userAvailableEnvs.filter((env) =>
+    permission.can(
+      ProjectPermissionDynamicSecretActions.CreateRootCredential,
+      subject(ProjectPermissionSub.DynamicSecrets, {
+        environment: env.slug,
+        secretPath
+      })
+    )
+  );
 
   const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
 
@@ -249,7 +263,9 @@ export const OverviewPage = () => {
     "addSecretsInAllEnvs",
     "addFolder",
     "misc",
-    "updateFolder"
+    "updateFolder",
+    "addDynamicSecret",
+    "upgradePlan"
   ] as const);
 
   const handleFolderCreate = async (folderName: string, description: string | null) => {
@@ -851,20 +867,43 @@ export const OverviewPage = () => {
                       >
                         {(isAllowed) => (
                           <Button
-                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} className="pr-2" />}
                             onClick={() => {
                               handlePopUpOpen("addFolder");
                               handlePopUpClose("misc");
                             }}
                             isDisabled={!isAllowed}
                             variant="outline_bg"
-                            className="h-10"
+                            className="h-10 text-left"
                             isFullWidth
                           >
                             Add Folder
                           </Button>
                         )}
                       </ProjectPermissionCan>
+                      <Tooltip
+                        content={
+                          userAvailableDynamicSecretEnvs.length === 0 ? "Access restricted" : ""
+                        }
+                      >
+                        <Button
+                          leftIcon={<FontAwesomeIcon icon={faFingerprint} className="pr-2" />}
+                          onClick={() => {
+                            if (subscription?.dynamicSecret) {
+                              handlePopUpOpen("addDynamicSecret");
+                              handlePopUpClose("misc");
+                              return;
+                            }
+                            handlePopUpOpen("upgradePlan");
+                          }}
+                          isDisabled={userAvailableDynamicSecretEnvs.length === 0}
+                          variant="outline_bg"
+                          className="h-10 text-left"
+                          isFullWidth
+                        >
+                          Add Dynamic Secret
+                        </Button>
+                      </Tooltip>
                     </div>
                   </DropdownMenuContent>
                 </DropdownMenu>
@@ -1170,6 +1209,24 @@ export const OverviewPage = () => {
           />
         </ModalContent>
       </Modal>
+      <CreateDynamicSecretForm
+        isOpen={popUp.addDynamicSecret.isOpen}
+        onToggle={(isOpen) => handlePopUpToggle("addDynamicSecret", isOpen)}
+        projectSlug={projectSlug}
+        environments={userAvailableDynamicSecretEnvs}
+        secretPath={secretPath}
+      />
+      {subscription && (
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={
+            subscription.slug === null
+              ? "You can perform this action under an Enterprise license"
+              : "You can perform this action if you switch to Infisical's Team plan"
+          }
+        />
+      )}
     </div>
   );
 };

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

@@ -655,8 +655,9 @@ export const ActionBar = ({
         isOpen={popUp.addDynamicSecret.isOpen}
         onToggle={(isOpen) => handlePopUpToggle("addDynamicSecret", isOpen)}
         projectSlug={projectSlug}
-        environment={environment}
+        environments={[{ slug: environment, name: environment, id: "not-used" }]}
         secretPath={secretPath}
+        isSingleEnvironmentMode
       />
       <Modal
         isOpen={popUp.addFolder.isOpen}

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

@@ -11,6 +11,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   SecretInput,
@@ -18,6 +19,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -50,7 +52,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -59,15 +62,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const AwsElastiCacheInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -87,13 +92,20 @@ export const AwsElastiCacheInputForm = ({
         revocationStatement: `{
         "UserId": "{{username}}"
 }`
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -104,7 +116,7 @@ export const AwsElastiCacheInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -299,6 +311,28 @@ export const AwsElastiCacheInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -5,9 +5,10 @@ import { z } from "zod";
 
 import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { Button, FilterableSelect, FormControl, Input, TextArea } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -40,7 +41,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -49,29 +51,41 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const AwsIamInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
     formState: { isSubmitting },
     handleSubmit
   } = useForm<TForm>({
-    resolver: zodResolver(formSchema)
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
+    }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.AwsIam, inputs: provider },
@@ -80,7 +94,7 @@ export const AwsIamInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -286,6 +300,29 @@ export const AwsIamInputForm = ({
                   </FormControl>
                 )}
               />
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -12,7 +12,7 @@ import { z } from "zod";
 
 import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,6 +23,7 @@ import { Tooltip } from "@app/components/v2/Tooltip";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { useGetDynamicSecretProviderData } from "@app/hooks/api/dynamicSecret/queries";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   selectedUsers: z.array(
@@ -60,7 +61,8 @@ const formSchema = z.object({
   name: z
     .string()
     .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -69,15 +71,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const AzureEntraIdInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -85,7 +89,10 @@ export const AzureEntraIdInputForm = ({
     watch,
     handleSubmit
   } = useForm<TForm>({
-    resolver: zodResolver(formSchema)
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
+    }
   });
   const tenantId = watch("provider.tenantId");
   const applicationId = watch("provider.applicationId");
@@ -107,7 +114,8 @@ export const AzureEntraIdInputForm = ({
     selectedUsers,
     provider,
     maxTTL,
-    defaultTTL
+    defaultTTL,
+    environment
   }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
@@ -129,7 +137,7 @@ export const AzureEntraIdInputForm = ({
           path: secretPath,
           defaultTTL,
           projectSlug,
-          environmentSlug: environment
+          environmentSlug: environment.slug
         });
       });
       onCompleted();
@@ -373,6 +381,29 @@ export const AzureEntraIdInputForm = ({
               </div>
             </div>
           </div>
+          {!isSingleEnvironmentMode && (
+            <Controller
+              control={control}
+              name="environment"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <FormControl
+                  label="Environment"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <FilterableSelect
+                    options={environments}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Select the environment to create secret in..."
+                    getOptionLabel={(option) => option.name}
+                    getOptionValue={(option) => option.slug}
+                    menuPlacement="top"
+                  />
+                </FormControl>
+              )}
+            />
+          )}
         </div>
         <div className="mt-4 flex items-center space-x-4">
           <Button type="submit" isLoading={isSubmitting} isDisabled={isLoading || isError}>

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

@@ -11,6 +11,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   SecretInput,
@@ -18,6 +19,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -52,7 +54,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -61,7 +64,8 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 const getSqlStatements = () => {
@@ -76,9 +80,10 @@ const getSqlStatements = () => {
 export const CassandraInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -87,15 +92,23 @@ export const CassandraInputForm = ({
   } = useForm<TForm>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      provider: getSqlStatements()
+      provider: getSqlStatements(),
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.Cassandra, inputs: provider },
@@ -104,7 +117,7 @@ export const CassandraInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -345,6 +358,29 @@ export const CassandraInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -17,6 +17,7 @@ import { AnimatePresence, motion } from "framer-motion";
 
 import { Modal, ModalContent } from "@app/components/v2";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 import { AwsElastiCacheInputForm } from "./AwsElastiCacheInputForm";
 import { AwsIamInputForm } from "./AwsIamInputForm";
@@ -38,8 +39,9 @@ type Props = {
   isOpen?: boolean;
   onToggle: (isOpen: boolean) => void;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
   secretPath: string;
+  isSingleEnvironmentMode?: boolean;
 };
 
 enum WizardSteps {
@@ -129,8 +131,9 @@ export const CreateDynamicSecretForm = ({
   isOpen,
   onToggle,
   projectSlug,
-  environment,
-  secretPath
+  environments,
+  secretPath,
+  isSingleEnvironmentMode
 }: Props) => {
   const [wizardStep, setWizardStep] = useState(WizardSteps.SelectProvider);
   const [selectedProvider, setSelectedProvider] = useState<DynamicSecretProviders | null>(null);
@@ -197,7 +200,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -215,7 +219,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -233,7 +238,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -251,7 +257,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -269,7 +276,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -287,7 +295,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -305,7 +314,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -323,7 +333,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -341,7 +352,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -359,7 +371,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -377,7 +390,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -395,7 +409,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -413,7 +428,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -432,7 +448,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}
@@ -450,7 +467,8 @@ export const CreateDynamicSecretForm = ({
                   onCancel={handleFormReset}
                   projectSlug={projectSlug}
                   secretPath={secretPath}
-                  environment={environment}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
                 />
               </motion.div>
             )}

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

@@ -9,6 +9,7 @@ import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
+  FilterableSelect,
   FormControl,
   FormLabel,
   IconButton,
@@ -19,6 +20,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const authMethods = [
   {
@@ -73,7 +75,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -82,15 +85,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const ElasticSearchInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -107,13 +112,20 @@ export const ElasticSearchInputForm = ({
         },
         roles: ["superuser"],
         port: 443
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -124,7 +136,7 @@ export const ElasticSearchInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -406,6 +418,29 @@ export const ElasticSearchInputForm = ({
                   )}
                 />
               </div>
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -7,9 +7,18 @@ import { z } from "zod";
 
 import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Select, SelectItem, TextArea } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  TextArea
+} from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 enum CredentialType {
   Dynamic = "dynamic",
@@ -69,7 +78,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 
 type TForm = z.infer<typeof formSchema>;
@@ -79,7 +89,8 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const LdapInputForm = ({
@@ -87,7 +98,8 @@ export const LdapInputForm = ({
   onCancel,
   secretPath,
   projectSlug,
-  environment
+  environments,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -107,7 +119,8 @@ export const LdapInputForm = ({
         revocationLdif: "",
         rollbackLdif: "",
         credentialType: CredentialType.Dynamic
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
@@ -115,7 +128,13 @@ export const LdapInputForm = ({
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -126,7 +145,7 @@ export const LdapInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -369,6 +388,29 @@ export const LdapInputForm = ({
                     )}
                   />
                 )}
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -13,6 +13,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   FormLabel,
   IconButton,
@@ -22,6 +23,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -63,7 +65,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -72,7 +75,8 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 const ATLAS_SCOPE_TYPES = [
@@ -93,9 +97,10 @@ const ATLAS_SCOPE_TYPES = [
 export const MongoAtlasInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -108,7 +113,8 @@ export const MongoAtlasInputForm = ({
     defaultValues: {
       provider: {
         roles: [{ databaseName: "", roleName: "" }]
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
@@ -124,7 +130,13 @@ export const MongoAtlasInputForm = ({
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -135,7 +147,7 @@ export const MongoAtlasInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -438,6 +450,29 @@ export const MongoAtlasInputForm = ({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -7,9 +7,18 @@ import { z } from "zod";
 
 import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  SecretInput
+} from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -46,7 +55,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -55,15 +65,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const MongoDBDatabaseInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -76,7 +88,8 @@ export const MongoDBDatabaseInputForm = ({
     defaultValues: {
       provider: {
         roles: [{ roleName: "readWrite" }]
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
@@ -87,7 +100,13 @@ export const MongoDBDatabaseInputForm = ({
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -105,7 +124,7 @@ export const MongoDBDatabaseInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -321,6 +340,29 @@ export const MongoDBDatabaseInputForm = ({
                   )}
                 />
               </div>
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -7,9 +7,18 @@ import { z } from "zod";
 
 import { TtlFormLabel } from "@app/components/features";
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Input,
+  SecretInput
+} from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -50,7 +59,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -59,15 +69,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const RabbitMqInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -89,13 +101,20 @@ export const RabbitMqInputForm = ({
           }
         },
         tags: []
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -106,7 +125,7 @@ export const RabbitMqInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -405,6 +424,29 @@ export const RabbitMqInputForm = ({
                   )}
                 />
               </div>
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -11,6 +11,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   SecretInput,
@@ -18,6 +19,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -50,7 +52,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -59,15 +62,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const RedisInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -81,13 +86,20 @@ export const RedisInputForm = ({
         port: 6379,
         creationStatement: "ACL SETUSER {{username}} on >{{password}} ~* &* +@all",
         revocationStatement: "ACL DELUSER {{username}}"
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -98,7 +110,7 @@ export const RedisInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -313,6 +325,29 @@ export const RedisInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -11,12 +11,14 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   TextArea
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -48,7 +50,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -57,15 +60,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const SapAseInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -82,13 +87,20 @@ sp_adduser '{{username}}', '{{username}}', null;
 sp_role 'grant', 'mon_role', '{{username}}';`,
         revocationStatement: `sp_dropuser '{{username}}';
 sp_droplogin '{{username}}';`
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -99,7 +111,7 @@ sp_droplogin '{{username}}';`
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -291,6 +303,29 @@ sp_droplogin '{{username}}';`
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -11,6 +11,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   SecretInput,
@@ -18,6 +19,7 @@ import {
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -50,7 +52,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -59,15 +62,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const SapHanaInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -82,13 +87,20 @@ GRANT "MONITORING" TO {{username}};`,
         revocationStatement: `REVOKE "MONITORING" FROM {{username}};
 DROP USER {{username}};`,
         renewStatement: "ALTER USER {{username}} VALID UNTIL '{{expiration}}';"
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -99,7 +111,7 @@ DROP USER {{username}};`,
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -311,6 +323,29 @@ DROP USER {{username}};`,
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -13,12 +13,14 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   TextArea
 } from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const formSchema = z.object({
   provider: z.object({
@@ -54,7 +56,8 @@ const formSchema = z.object({
     .string()
     .trim()
     .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -63,15 +66,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const SnowflakeInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -85,13 +90,20 @@ export const SnowflakeInputForm = ({
           "CREATE USER {{username}} PASSWORD = '{{password}}' DEFAULT_ROLE = public DEFAULT_SECONDARY_ROLES = ('ALL') MUST_CHANGE_PASSWORD = FALSE DAYS_TO_EXPIRY = {{expiration}};",
         revocationStatement: "DROP USER {{username}};",
         renewStatement: "ALTER USER {{username}} SET DAYS_TO_EXPIRY = {{expiration}};"
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -102,7 +114,7 @@ export const SnowflakeInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch (err) {
@@ -314,6 +326,29 @@ export const SnowflakeInputForm = ({
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -12,6 +12,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   Button,
+  FilterableSelect,
   FormControl,
   Input,
   SecretInput,
@@ -22,6 +23,7 @@ import {
 import { useWorkspace } from "@app/context";
 import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders, SqlProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 const passwordRequirementsSchema = z
   .object({
@@ -79,7 +81,8 @@ const formSchema = z.object({
       if (valMs > 24 * 60 * 60 * 1000)
         ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
     }),
-  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+  name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 type TForm = z.infer<typeof formSchema>;
 
@@ -88,7 +91,8 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 const getSqlStatements = (provider: SqlProviders) => {
@@ -145,9 +149,10 @@ const getDefaultPort = (provider: SqlProviders) => {
 export const SqlDatabaseInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const { currentWorkspace } = useWorkspace();
 
@@ -172,7 +177,8 @@ export const SqlDatabaseInputForm = ({
           },
           allowedSymbols: "-_.~!*"
         }
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
@@ -181,9 +187,16 @@ export const SqlDatabaseInputForm = ({
     gatewaysQueryKeys.listProjectGateways({ projectId: currentWorkspace.id })
   );
 
-  const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
+  const handleCreateDynamicSecret = async ({
+    name,
+    maxTTL,
+    provider,
+    defaultTTL,
+    environment
+  }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
+
     try {
       await createDynamicSecret.mutateAsync({
         provider: { type: DynamicSecretProviders.SqlDatabase, inputs: provider },
@@ -192,7 +205,7 @@ export const SqlDatabaseInputForm = ({
         path: secretPath,
         defaultTTL,
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch {
@@ -649,6 +662,29 @@ export const SqlDatabaseInputForm = ({
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
+                {!isSingleEnvironmentMode && (
+                  <Controller
+                    control={control}
+                    name="environment"
+                    render={({ field: { value, onChange }, fieldState: { error } }) => (
+                      <FormControl
+                        label="Environment"
+                        isError={Boolean(error)}
+                        errorText={error?.message}
+                      >
+                        <FilterableSelect
+                          options={environments}
+                          value={value}
+                          onChange={onChange}
+                          placeholder="Select the environment to create secret in..."
+                          getOptionLabel={(option) => option.name}
+                          getOptionValue={(option) => option.slug}
+                          menuPlacement="top"
+                        />
+                      </FormControl>
+                    )}
+                  />
+                )}
               </div>
             </div>
           </div>

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

@@ -5,9 +5,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "@app/components/v2";
 import { useCreateDynamicSecret } from "@app/hooks/api";
 import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
 
 enum ConfigType {
   URL = "url",
@@ -52,7 +60,8 @@ const formSchema = z.object({
     .string()
     .trim()
     .min(1)
-    .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+    .refine((val) => val.toLowerCase() === val, "Must be lowercase"),
+  environment: z.object({ name: z.string(), slug: z.string() })
 });
 
 type TForm = z.infer<typeof formSchema>;
@@ -62,15 +71,17 @@ type Props = {
   onCancel: () => void;
   secretPath: string;
   projectSlug: string;
-  environment: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
 };
 
 export const TotpInputForm = ({
   onCompleted,
   onCancel,
-  environment,
+  environments,
   secretPath,
-  projectSlug
+  projectSlug,
+  isSingleEnvironmentMode
 }: Props) => {
   const {
     control,
@@ -82,7 +93,8 @@ export const TotpInputForm = ({
     defaultValues: {
       provider: {
         configType: ConfigType.URL
-      }
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
     }
   });
 
@@ -90,7 +102,7 @@ export const TotpInputForm = ({
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  const handleCreateDynamicSecret = async ({ name, provider }: TForm) => {
+  const handleCreateDynamicSecret = async ({ name, provider, environment }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;
     try {
@@ -101,7 +113,7 @@ export const TotpInputForm = ({
         path: secretPath,
         defaultTTL: "1m",
         projectSlug,
-        environmentSlug: environment
+        environmentSlug: environment.slug
       });
       onCompleted();
     } catch (err) {
@@ -295,6 +307,29 @@ export const TotpInputForm = ({
                   </p>
                 </>
               )}
+              {!isSingleEnvironmentMode && (
+                <Controller
+                  control={control}
+                  name="environment"
+                  render={({ field: { value, onChange }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Environment"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <FilterableSelect
+                        options={environments}
+                        value={value}
+                        onChange={onChange}
+                        placeholder="Select the environment to create secret in..."
+                        getOptionLabel={(option) => option.name}
+                        getOptionValue={(option) => option.slug}
+                        menuPlacement="top"
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
             </div>
           </div>
         </div>

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

@@ -306,7 +306,10 @@ export const SecretItem = memo(
                   )}
                 />
               )}
-              <div key="actions" className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2">
+              <div
+                key="actions"
+                className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2"
+              >
                 <Tooltip content="Copy secret">
                   <IconButton
                     isDisabled={secret.secretValueHidden}

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/HumanitecSyncDestinationSection.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+
+import { SecretSyncLabel } from "@app/components/secret-syncs";
+import {
+  HumanitecSyncScope,
+  THumanitecSync
+} from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+
+type Props = {
+  secretSync: THumanitecSync;
+};
+
+export const HumanitecSyncDestinationSection = ({ secretSync }: Props) => {
+  const { destinationConfig } = secretSync;
+
+  let Components: ReactNode;
+  switch (destinationConfig.scope) {
+    case HumanitecSyncScope.Application:
+      Components = (
+        <>
+          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
+          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+        </>
+      );
+      break;
+    case HumanitecSyncScope.Environment:
+      Components = (
+        <>
+          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
+          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+          <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+        </>
+      );
+      break;
+    default:
+      throw new Error(
+        `Uhandled Humanitec Sync Destination Section Scope ${secretSync.destinationConfig.scope}`
+      );
+  }
+
+  return (
+    <>
+      <SecretSyncLabel className="capitalize" label="Scope">
+        {destinationConfig.scope.replace("-", " ")}
+      </SecretSyncLabel>
+      {Components}
+    </>
+  );
+};

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx

@@ -17,6 +17,7 @@ import { GitHubSyncDestinationSection } from "@app/pages/secret-manager/SecretSy
 import { AzureAppConfigurationSyncDestinationSection } from "./AzureAppConfigurationSyncDestinationSection";
 import { AzureKeyVaultSyncDestinationSection } from "./AzureKeyVaultSyncDestinationSection";
 import { GcpSyncDestinationSection } from "./GcpSyncDestinationSection";
+import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSection";
 
 type Props = {
   secretSync: TSecretSync;
@@ -53,6 +54,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
     case SecretSync.Databricks:
       DestinationComponents = <DatabricksSyncDestinationSection secretSync={secretSync} />;
       break;
+    case SecretSync.Humanitec:
+      DestinationComponents = <HumanitecSyncDestinationSection secretSync={secretSync} />;
+      break;
     default:
       throw new Error(`Unhandled Destination Section components: ${destination}`);
   }

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection/SecretSyncOptionsSection.tsx

@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
-import { IconButton } from "@app/components/v2";
+import { Badge, IconButton } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
@@ -24,7 +24,8 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
     syncOptions: {
       // appendSuffix,
       // prependPrefix,
-      initialSyncBehavior
+      initialSyncBehavior,
+      disableSecretDeletion
     }
   } = secretSync;
 
@@ -46,6 +47,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
     case SecretSync.AzureKeyVault:
     case SecretSync.AzureAppConfiguration:
     case SecretSync.Databricks:
+    case SecretSync.Humanitec:
       AdditionalSyncOptionsComponent = null;
       break;
     default:
@@ -57,24 +59,22 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
       <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
         <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
           <h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
-          {AdditionalSyncOptionsComponent && (
-            <ProjectPermissionCan
-              I={ProjectPermissionSecretSyncActions.Edit}
-              a={ProjectPermissionSub.SecretSyncs}
-            >
-              {(isAllowed) => (
-                <IconButton
-                  variant="plain"
-                  colorSchema="secondary"
-                  isDisabled={!isAllowed}
-                  ariaLabel="Edit sync options"
-                  onClick={onEditOptions}
-                >
-                  <FontAwesomeIcon icon={faEdit} />
-                </IconButton>
-              )}
-            </ProjectPermissionCan>
-          )}
+          <ProjectPermissionCan
+            I={ProjectPermissionSecretSyncActions.Edit}
+            a={ProjectPermissionSub.SecretSyncs}
+          >
+            {(isAllowed) => (
+              <IconButton
+                variant="plain"
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+                ariaLabel="Edit sync options"
+                onClick={onEditOptions}
+              >
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            )}
+          </ProjectPermissionCan>
         </div>
         <div>
           <div className="space-y-3">
@@ -84,6 +84,11 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
             {/* <SecretSyncLabel label="Prefix">{prependPrefix}</SecretSyncLabel>
             <SecretSyncLabel label="Suffix">{appendSuffix}</SecretSyncLabel> */}
             {AdditionalSyncOptionsComponent}
+            {disableSecretDeletion && (
+              <SecretSyncLabel label="Secret Deletion">
+                <Badge variant="primary">Disabled</Badge>
+              </SecretSyncLabel>
+            )}
           </div>
         </div>
       </div>

frontend/src/routeTree.gen.ts

@@ -42,7 +42,6 @@ import { Route as authProviderSuccessPageRouteImport } from './pages/auth/Provid
 import { Route as authProviderErrorPageRouteImport } from './pages/auth/ProviderErrorPage/route'
 import { Route as userPersonalSettingsPageRouteImport } from './pages/user/PersonalSettingsPage/route'
 import { Route as organizationSettingsPageRouteImport } from './pages/organization/SettingsPage/route'
-import { Route as organizationSecretSharingPageRouteImport } from './pages/organization/SecretSharingPage/route'
 import { Route as organizationSecretScanningPageRouteImport } from './pages/organization/SecretScanningPage/route'
 import { Route as organizationBillingPageRouteImport } from './pages/organization/BillingPage/route'
 import { Route as organizationAuditLogsPageRouteImport } from './pages/organization/AuditLogsPage/route'
@@ -54,6 +53,7 @@ import { Route as secretManagerLayoutImport } from './pages/secret-manager/layou
 import { Route as kmsLayoutImport } from './pages/kms/layout'
 import { Route as certManagerLayoutImport } from './pages/cert-manager/layout'
 import { Route as organizationSshOverviewPageRouteImport } from './pages/organization/SshOverviewPage/route'
+import { Route as organizationSecretSharingSettingsPageRouteImport } from './pages/organization/SecretSharingSettingsPage/route'
 import { Route as organizationSecretManagerOverviewPageRouteImport } from './pages/organization/SecretManagerOverviewPage/route'
 import { Route as organizationRoleByIDPageRouteImport } from './pages/organization/RoleByIDPage/route'
 import { Route as organizationUserDetailsByIDPageRouteImport } from './pages/organization/UserDetailsByIDPage/route'
@@ -61,6 +61,7 @@ import { Route as organizationKmsOverviewPageRouteImport } from './pages/organiz
 import { Route as organizationIdentityDetailsByIDPageRouteImport } from './pages/organization/IdentityDetailsByIDPage/route'
 import { Route as organizationGroupDetailsByIDPageRouteImport } from './pages/organization/GroupDetailsByIDPage/route'
 import { Route as organizationCertManagerOverviewPageRouteImport } from './pages/organization/CertManagerOverviewPage/route'
+import { Route as organizationSecretSharingPageRouteImport } from './pages/organization/SecretSharingPage/route'
 import { Route as organizationGatewaysGatewayListPageRouteImport } from './pages/organization/Gateways/GatewayListPage/route'
 import { Route as organizationAppConnectionsAppConnectionsPageRouteImport } from './pages/organization/AppConnections/AppConnectionsPage/route'
 import { Route as projectAccessControlPageRouteSshImport } from './pages/project/AccessControlPage/route-ssh'
@@ -211,6 +212,10 @@ const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdImport =
   createFileRoute(
     '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId',
   )()
+const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport =
+  createFileRoute(
+    '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing',
+  )()
 const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport =
   createFileRoute(
     '/_authenticate/_inject-org-details/_org-layout/organization/gateways',
@@ -467,6 +472,14 @@ const AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRoute =
     getParentRoute: () => organizationLayoutRoute,
   } as any)
 
+const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute =
+  AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport.update({
+    id: '/secret-sharing',
+    path: '/secret-sharing',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
+  } as any)
+
 const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute =
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport.update({
     id: '/gateways',
@@ -505,14 +518,6 @@ const organizationSettingsPageRouteRoute =
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
   } as any)
 
-const organizationSecretSharingPageRouteRoute =
-  organizationSecretSharingPageRouteImport.update({
-    id: '/secret-sharing',
-    path: '/secret-sharing',
-    getParentRoute: () =>
-      AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
-  } as any)
-
 const organizationSecretScanningPageRouteRoute =
   organizationSecretScanningPageRouteImport.update({
     id: '/secret-scanning',
@@ -590,6 +595,14 @@ const organizationSshOverviewPageRouteRoute =
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
   } as any)
 
+const organizationSecretSharingSettingsPageRouteRoute =
+  organizationSecretSharingSettingsPageRouteImport.update({
+    id: '/settings',
+    path: '/settings',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute,
+  } as any)
+
 const organizationSecretManagerOverviewPageRouteRoute =
   organizationSecretManagerOverviewPageRouteImport.update({
     id: '/secret-manager/overview',
@@ -646,6 +659,14 @@ const organizationCertManagerOverviewPageRouteRoute =
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute,
   } as any)
 
+const organizationSecretSharingPageRouteRoute =
+  organizationSecretSharingPageRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () =>
+      AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute,
+  } as any)
+
 const organizationGatewaysGatewayListPageRouteRoute =
   organizationGatewaysGatewayListPageRouteImport.update({
     id: '/',
@@ -1887,13 +1908,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof organizationSecretScanningPageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
     }
-    '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': {
-      id: '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing'
-      path: '/secret-sharing'
-      fullPath: '/organization/secret-sharing'
-      preLoaderRoute: typeof organizationSecretSharingPageRouteImport
-      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
-    }
     '/_authenticate/_inject-org-details/_org-layout/organization/settings': {
       id: '/_authenticate/_inject-org-details/_org-layout/organization/settings'
       path: '/settings'
@@ -1929,6 +1943,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': {
+      id: '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing'
+      path: '/secret-sharing'
+      fullPath: '/organization/secret-sharing'
+      preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId': {
       id: '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId'
       path: '/secret-manager/$projectId'
@@ -1957,6 +1978,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof organizationGatewaysGatewayListPageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/': {
+      id: '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/'
+      path: '/'
+      fullPath: '/organization/secret-sharing/'
+      preLoaderRoute: typeof organizationSecretSharingPageRouteImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview': {
       id: '/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview'
       path: '/cert-manager/overview'
@@ -2006,6 +2034,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof organizationSecretManagerOverviewPageRouteImport
       parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport
     }
+    '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings': {
+      id: '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings'
+      path: '/settings'
+      fullPath: '/organization/secret-sharing/settings'
+      preLoaderRoute: typeof organizationSecretSharingSettingsPageRouteImport
+      parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport
+    }
     '/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview': {
       id: '/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview'
       path: '/ssh/overview'
@@ -2965,16 +3000,34 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteChildren,
   )
 
+interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteChildren {
+  organizationSecretSharingPageRouteRoute: typeof organizationSecretSharingPageRouteRoute
+  organizationSecretSharingSettingsPageRouteRoute: typeof organizationSecretSharingSettingsPageRouteRoute
+}
+
+const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteChildren =
+  {
+    organizationSecretSharingPageRouteRoute:
+      organizationSecretSharingPageRouteRoute,
+    organizationSecretSharingSettingsPageRouteRoute:
+      organizationSecretSharingSettingsPageRouteRoute,
+  }
+
+const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren =
+  AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute._addFileChildren(
+    AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteChildren,
+  )
+
 interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren {
   organizationAccessManagementPageRouteRoute: typeof organizationAccessManagementPageRouteRoute
   organizationAdminPageRouteRoute: typeof organizationAdminPageRouteRoute
   organizationAuditLogsPageRouteRoute: typeof organizationAuditLogsPageRouteRoute
   organizationBillingPageRouteRoute: typeof organizationBillingPageRouteRoute
   organizationSecretScanningPageRouteRoute: typeof organizationSecretScanningPageRouteRoute
-  organizationSecretSharingPageRouteRoute: typeof organizationSecretSharingPageRouteRoute
   organizationSettingsPageRouteRoute: typeof organizationSettingsPageRouteRoute
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
   AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
+  AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren
   organizationCertManagerOverviewPageRouteRoute: typeof organizationCertManagerOverviewPageRouteRoute
   organizationGroupDetailsByIDPageRouteRoute: typeof organizationGroupDetailsByIDPageRouteRoute
   organizationIdentityDetailsByIDPageRouteRoute: typeof organizationIdentityDetailsByIDPageRouteRoute
@@ -2994,13 +3047,13 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren: Authentica
     organizationBillingPageRouteRoute: organizationBillingPageRouteRoute,
     organizationSecretScanningPageRouteRoute:
       organizationSecretScanningPageRouteRoute,
-    organizationSecretSharingPageRouteRoute:
-      organizationSecretSharingPageRouteRoute,
     organizationSettingsPageRouteRoute: organizationSettingsPageRouteRoute,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute:
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren,
     AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute:
       AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren,
+    AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute:
+      AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren,
     organizationCertManagerOverviewPageRouteRoute:
       organizationCertManagerOverviewPageRouteRoute,
     organizationGroupDetailsByIDPageRouteRoute:
@@ -3672,16 +3725,17 @@ export interface FileRoutesByFullPath {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/secret-scanning': typeof organizationSecretScanningPageRouteRoute
-  '/organization/secret-sharing': typeof organizationSecretSharingPageRouteRoute
   '/organization/settings': typeof organizationSettingsPageRouteRoute
   '/cert-manager/$projectId': typeof certManagerLayoutRouteWithChildren
   '/kms/$projectId': typeof kmsLayoutRouteWithChildren
   '/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
   '/organization/gateways': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
+  '/organization/secret-sharing': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren
   '/secret-manager/$projectId': typeof secretManagerLayoutRouteWithChildren
   '/ssh/$projectId': typeof sshLayoutRouteWithChildren
   '/organization/app-connections/': typeof organizationAppConnectionsAppConnectionsPageRouteRoute
   '/organization/gateways/': typeof organizationGatewaysGatewayListPageRouteRoute
+  '/organization/secret-sharing/': typeof organizationSecretSharingPageRouteRoute
   '/organization/cert-manager/overview': typeof organizationCertManagerOverviewPageRouteRoute
   '/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute
   '/organization/identities/$identityId': typeof organizationIdentityDetailsByIDPageRouteRoute
@@ -3689,6 +3743,7 @@ export interface FileRoutesByFullPath {
   '/organization/members/$membershipId': typeof organizationUserDetailsByIDPageRouteRoute
   '/organization/roles/$roleId': typeof organizationRoleByIDPageRouteRoute
   '/organization/secret-manager/overview': typeof organizationSecretManagerOverviewPageRouteRoute
+  '/organization/secret-sharing/settings': typeof organizationSecretSharingSettingsPageRouteRoute
   '/organization/ssh/overview': typeof organizationSshOverviewPageRouteRoute
   '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
   '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
@@ -3845,7 +3900,6 @@ export interface FileRoutesByTo {
   '/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/organization/billing': typeof organizationBillingPageRouteRoute
   '/organization/secret-scanning': typeof organizationSecretScanningPageRouteRoute
-  '/organization/secret-sharing': typeof organizationSecretSharingPageRouteRoute
   '/organization/settings': typeof organizationSettingsPageRouteRoute
   '/cert-manager/$projectId': typeof certManagerLayoutRouteWithChildren
   '/kms/$projectId': typeof kmsLayoutRouteWithChildren
@@ -3853,6 +3907,7 @@ export interface FileRoutesByTo {
   '/ssh/$projectId': typeof sshLayoutRouteWithChildren
   '/organization/app-connections': typeof organizationAppConnectionsAppConnectionsPageRouteRoute
   '/organization/gateways': typeof organizationGatewaysGatewayListPageRouteRoute
+  '/organization/secret-sharing': typeof organizationSecretSharingPageRouteRoute
   '/organization/cert-manager/overview': typeof organizationCertManagerOverviewPageRouteRoute
   '/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute
   '/organization/identities/$identityId': typeof organizationIdentityDetailsByIDPageRouteRoute
@@ -3860,6 +3915,7 @@ export interface FileRoutesByTo {
   '/organization/members/$membershipId': typeof organizationUserDetailsByIDPageRouteRoute
   '/organization/roles/$roleId': typeof organizationRoleByIDPageRouteRoute
   '/organization/secret-manager/overview': typeof organizationSecretManagerOverviewPageRouteRoute
+  '/organization/secret-sharing/settings': typeof organizationSecretSharingSettingsPageRouteRoute
   '/organization/ssh/overview': typeof organizationSshOverviewPageRouteRoute
   '/cert-manager/$projectId/overview': typeof certManagerCertificatesPageRouteRoute
   '/cert-manager/$projectId/settings': typeof certManagerSettingsPageRouteRoute
@@ -4025,16 +4081,17 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/organization/audit-logs': typeof organizationAuditLogsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/billing': typeof organizationBillingPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning': typeof organizationSecretScanningPageRouteRoute
-  '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': typeof organizationSecretSharingPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/settings': typeof organizationSettingsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutCertManagerProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutKmsProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/organization/gateways': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren
+  '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutSshProjectIdRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/organization/app-connections/': typeof organizationAppConnectionsAppConnectionsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/gateways/': typeof organizationGatewaysGatewayListPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/': typeof organizationSecretSharingPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview': typeof organizationCertManagerOverviewPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/identities/$identityId': typeof organizationIdentityDetailsByIDPageRouteRoute
@@ -4042,6 +4099,7 @@ export interface FileRoutesById {
   '/_authenticate/_inject-org-details/_org-layout/organization/members/$membershipId': typeof organizationUserDetailsByIDPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/roles/$roleId': typeof organizationRoleByIDPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/overview': typeof organizationSecretManagerOverviewPageRouteRoute
+  '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings': typeof organizationSecretSharingSettingsPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview': typeof organizationSshOverviewPageRouteRoute
   '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout': typeof certManagerLayoutRouteWithChildren
   '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout': typeof kmsLayoutRouteWithChildren
@@ -4208,16 +4266,17 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/secret-scanning'
-    | '/organization/secret-sharing'
     | '/organization/settings'
     | '/cert-manager/$projectId'
     | '/kms/$projectId'
     | '/organization/app-connections'
     | '/organization/gateways'
+    | '/organization/secret-sharing'
     | '/secret-manager/$projectId'
     | '/ssh/$projectId'
     | '/organization/app-connections/'
     | '/organization/gateways/'
+    | '/organization/secret-sharing/'
     | '/organization/cert-manager/overview'
     | '/organization/groups/$groupId'
     | '/organization/identities/$identityId'
@@ -4225,6 +4284,7 @@ export interface FileRouteTypes {
     | '/organization/members/$membershipId'
     | '/organization/roles/$roleId'
     | '/organization/secret-manager/overview'
+    | '/organization/secret-sharing/settings'
     | '/organization/ssh/overview'
     | '/cert-manager/$projectId/overview'
     | '/cert-manager/$projectId/settings'
@@ -4380,7 +4440,6 @@ export interface FileRouteTypes {
     | '/organization/audit-logs'
     | '/organization/billing'
     | '/organization/secret-scanning'
-    | '/organization/secret-sharing'
     | '/organization/settings'
     | '/cert-manager/$projectId'
     | '/kms/$projectId'
@@ -4388,6 +4447,7 @@ export interface FileRouteTypes {
     | '/ssh/$projectId'
     | '/organization/app-connections'
     | '/organization/gateways'
+    | '/organization/secret-sharing'
     | '/organization/cert-manager/overview'
     | '/organization/groups/$groupId'
     | '/organization/identities/$identityId'
@@ -4395,6 +4455,7 @@ export interface FileRouteTypes {
     | '/organization/members/$membershipId'
     | '/organization/roles/$roleId'
     | '/organization/secret-manager/overview'
+    | '/organization/secret-sharing/settings'
     | '/organization/ssh/overview'
     | '/cert-manager/$projectId/overview'
     | '/cert-manager/$projectId/settings'
@@ -4558,16 +4619,17 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/organization/audit-logs'
     | '/_authenticate/_inject-org-details/_org-layout/organization/billing'
     | '/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning'
-    | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing'
     | '/_authenticate/_inject-org-details/_org-layout/organization/settings'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/app-connections'
     | '/_authenticate/_inject-org-details/_org-layout/organization/gateways'
+    | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing'
     | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/ssh/$projectId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/app-connections/'
     | '/_authenticate/_inject-org-details/_org-layout/organization/gateways/'
+    | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/'
     | '/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview'
     | '/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/identities/$identityId'
@@ -4575,6 +4637,7 @@ export interface FileRouteTypes {
     | '/_authenticate/_inject-org-details/_org-layout/organization/members/$membershipId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/roles/$roleId'
     | '/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/overview'
+    | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings'
     | '/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview'
     | '/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout'
     | '/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout'
@@ -4936,10 +4999,10 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/organization/audit-logs",
         "/_authenticate/_inject-org-details/_org-layout/organization/billing",
         "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning",
-        "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing",
         "/_authenticate/_inject-org-details/_org-layout/organization/settings",
         "/_authenticate/_inject-org-details/_org-layout/organization/app-connections",
         "/_authenticate/_inject-org-details/_org-layout/organization/gateways",
+        "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing",
         "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview",
         "/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId",
         "/_authenticate/_inject-org-details/_org-layout/organization/identities/$identityId",
@@ -4981,10 +5044,6 @@ export const routeTree = rootRoute
       "filePath": "organization/SecretScanningPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
     },
-    "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing": {
-      "filePath": "organization/SecretSharingPage/route.tsx",
-      "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
-    },
     "/_authenticate/_inject-org-details/_org-layout/organization/settings": {
       "filePath": "organization/SettingsPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
@@ -5018,6 +5077,14 @@ export const routeTree = rootRoute
         "/_authenticate/_inject-org-details/_org-layout/organization/gateways/"
       ]
     },
+    "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing": {
+      "filePath": "",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/organization",
+      "children": [
+        "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/",
+        "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings"
+      ]
+    },
     "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId": {
       "filePath": "",
       "parent": "/_authenticate/_inject-org-details/_org-layout",
@@ -5040,6 +5107,10 @@ export const routeTree = rootRoute
       "filePath": "organization/Gateways/GatewayListPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization/gateways"
     },
+    "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/": {
+      "filePath": "organization/SecretSharingPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing"
+    },
     "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview": {
       "filePath": "organization/CertManagerOverviewPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
@@ -5068,6 +5139,10 @@ export const routeTree = rootRoute
       "filePath": "organization/SecretManagerOverviewPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"
     },
+    "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings": {
+      "filePath": "organization/SecretSharingSettingsPage/route.tsx",
+      "parent": "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing"
+    },
     "/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview": {
       "filePath": "organization/SshOverviewPage/route.tsx",
       "parent": "/_authenticate/_inject-org-details/_org-layout/organization"

frontend/src/routes.ts

@@ -16,7 +16,10 @@ const organizationRoutes = route("/organization", [
   route("/admin", "organization/AdminPage/route.tsx"),
   route("/audit-logs", "organization/AuditLogsPage/route.tsx"),
   route("/billing", "organization/BillingPage/route.tsx"),
-  route("/secret-sharing", "organization/SecretSharingPage/route.tsx"),
+  route("/secret-sharing", [
+    index("organization/SecretSharingPage/route.tsx"),
+    route("/settings", "organization/SecretSharingSettingsPage/route.tsx")
+  ]),
   route("/settings", "organization/SettingsPage/route.tsx"),
   route("/secret-scanning", "organization/SecretScanningPage/route.tsx"),
   route("/groups/$groupId", "organization/GroupDetailsByIDPage/route.tsx"),