Merge branch 'main' into ENG-2800

2026-10-14 13:22:08 +00:00 · 2025-05-30 11:42:24 -04:00
parent f4bed26781 4dc587576b
commit 0bdb5d3f19
49 changed files with 1860 additions and 100 deletions
@@ -25,6 +25,7 @@
        "@hookform/resolvers": "^3.9.1",
        "@lexical/react": "^0.29.0",
        "@lottiefiles/dotlottie-react": "^0.12.0",
+        "@lottiefiles/dotlottie-web": "^0.38.2",
        "@octokit/rest": "^21.0.2",
        "@peculiar/x509": "^1.12.3",
        "@radix-ui/react-accordion": "^1.2.2",
@@ -29,6 +29,7 @@
    "@hookform/resolvers": "^3.9.1",
    "@lexical/react": "^0.29.0",
    "@lottiefiles/dotlottie-react": "^0.12.0",
+    "@lottiefiles/dotlottie-web": "^0.38.2",
    "@octokit/rest": "^21.0.2",
    "@peculiar/x509": "^1.12.3",
    "@radix-ui/react-accordion": "^1.2.2",
@@ -2,6 +2,7 @@ export { useOrgPermission } from "./OrgPermissionContext";
 export type { TOrgPermission } from "./types";
 export {
  OrgPermissionActions,
+  OrgPermissionBillingActions,
  OrgPermissionGroupActions,
  OrgPermissionIdentityActions,
  OrgPermissionSubjects
@@ -7,6 +7,11 @@ export enum OrgPermissionActions {
  Delete = "delete"
 }

+export enum OrgPermissionBillingActions {
+  Read = "read",
+  ManageBilling = "manage-billing"
+}
+
 export enum OrgGatewayPermissionActions {
  // is there a better word for this. This mean can an identity be a gateway
  CreateGateways = "create-gateways",
@@ -100,7 +105,7 @@ export type OrgPermissionSet =
  | [OrgPermissionActions, OrgPermissionSubjects.Ldap]
  | [OrgPermissionGroupActions, OrgPermissionSubjects.Groups]
  | [OrgPermissionActions, OrgPermissionSubjects.SecretScanning]
-  | [OrgPermissionActions, OrgPermissionSubjects.Billing]
+  | [OrgPermissionBillingActions, OrgPermissionSubjects.Billing]
  | [OrgPermissionActions, OrgPermissionSubjects.Kms]
  | [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
  | [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
@@ -2,6 +2,7 @@ export { useOrganization } from "./OrganizationContext";
 export type { TOrgPermission } from "./OrgPermissionContext";
 export {
  OrgPermissionActions,
+  OrgPermissionBillingActions,
  OrgPermissionGroupActions,
  OrgPermissionIdentityActions,
  OrgPermissionSubjects,
@@ -31,10 +31,14 @@ export const useUpdateCa = () => {

      return data;
    },
-    onSuccess: ({ projectId, type }) => {
+    onSuccess: ({ projectId, type }, { caName }) => {
+      caKeys.getCaByNameAndProjectId(caName, projectId);
      queryClient.invalidateQueries({
        queryKey: caKeys.listCasByTypeAndProjectId(type, projectId)
      });
+      queryClient.invalidateQueries({
+        queryKey: caKeys.getCaByNameAndProjectId(caName, projectId)
+      });
    }
  });
 };
@@ -31,7 +31,8 @@ export enum DynamicSecretProviders {
  SapHana = "sap-hana",
  Snowflake = "snowflake",
  Totp = "totp",
-  SapAse = "sap-ase"
+  SapAse = "sap-ase",
+  Kubernetes = "kubernetes"
 }

 export enum SqlProviders {
@@ -261,6 +262,20 @@ export type TDynamicSecretProvider =
            algorithm?: string;
            digits?: number;
          };
+    }
+  | {
+      type: DynamicSecretProviders.Kubernetes;
+      inputs: {
+        url: string;
+        clusterToken: string;
+        ca?: string;
+        serviceAccountName: string;
+        credentialType: "dynamic" | "static";
+        namespace: string;
+        gatewayId?: string;
+        sslEnabled: boolean;
+        audiences: string[];
+      };
    };

 export type TCreateDynamicSecretDTO = {
@@ -1,5 +1,7 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+import { setWasmUrl } from "@lottiefiles/dotlottie-react";
+import lottieWasmUrl from "@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm?url";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import NProgress from "nprogress";

@@ -22,6 +24,9 @@ import "./translation";
 // have a look at the Quick start guide
 // for passing in lng and translations on init/

+// Configure Lottie player to use local WASM file
+setWasmUrl(lottieWasmUrl);
+
 // Create a new router instance
 NProgress.configure({ showSpinner: false });

@@ -188,11 +188,7 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
          name,
          type: CaType.INTERNAL,
          status,
-          enableDirectIssuance,
-          configuration: {
-            ...configuration,
-            maxPathLength: Number(configuration.maxPathLength)
-          }
+          enableDirectIssuance
        });
      } else {
        // create
@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

 import { OrgPermissionCan } from "@app/components/permissions";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";

 import { BillingTabGroup } from "./components";

@@ -24,7 +24,7 @@ export const BillingPage = () => {
          </div>
          <OrgPermissionCan
            passThrough={false}
-            I={OrgPermissionActions.Read}
+            I={OrgPermissionBillingActions.Read}
            a={OrgPermissionSubjects.Billing}
          >
            <BillingTabGroup />
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
 import {
-  OrgPermissionActions,
+  OrgPermissionBillingActions,
  OrgPermissionSubjects,
  useOrganization,
  useSubscription
@@ -112,7 +112,7 @@ export const PreviewSection = () => {
                  Get unlimited members, projects, RBAC, smart alerts, and so much more.
                </p>
              </div>
-              <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+              <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
                {(isAllowed) => (
                  <Button
                    onClick={() => handleUpgradeBtnClick()}
@@ -156,7 +156,7 @@ export const PreviewSection = () => {
              }`}
            </p>
            {isInfisicalCloud() && (
-              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+              <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
                {(isAllowed) => (
                  <button
                    type="button"
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetOrgBillingDetails, useUpdateOrgBillingDetails } from "@app/hooks/api";

 const schema = z
@@ -74,7 +74,7 @@ export const CompanyNameSection = () => {
          name="name"
        />
      </div>
-      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+      <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
        {(isAllowed) => (
          <Button
            type="submit"
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useGetOrgBillingDetails, useUpdateOrgBillingDetails } from "@app/hooks/api";

 const schema = z
@@ -75,7 +75,7 @@ export const InvoiceEmailSection = () => {
          name="email"
        />
      </div>
-      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+      <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
        {(isAllowed) => (
          <Button
            type="submit"
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useAddOrgPmtMethod } from "@app/hooks/api";

 import { PmtMethodsTable } from "./PmtMethodsTable";
@@ -27,7 +27,7 @@ export const PmtMethodsSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-8 flex items-center">
        <h2 className="flex-1 text-xl font-semibold text-white">Payment methods</h2>
-        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
+        <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
          {(isAllowed) => (
            <Button
              onClick={handleAddPmtMethodBtnClick}
@@ -16,7 +16,7 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";

@@ -75,7 +75,7 @@ export const PmtMethodsTable = () => {
                  <Td>{`${exp_month}/${exp_year}`}</Td>
                  <Td>
                    <OrgPermissionCan
-                      I={OrgPermissionActions.Delete}
+                      I={OrgPermissionBillingActions.ManageBilling}
                      a={OrgPermissionSubjects.Billing}
                    >
                      {(isAllowed) => (
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 import { usePopUp } from "@app/hooks/usePopUp";

 import { TaxIDModal } from "./TaxIDModal";
@@ -18,7 +18,7 @@ export const TaxIDSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-8 flex items-center">
        <h2 className="flex-1 text-xl font-semibold text-white">Tax ID</h2>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+        <OrgPermissionCan I={OrgPermissionBillingActions.ManageBilling} a={OrgPermissionSubjects.Billing}>
          {(isAllowed) => (
            <Button
              onClick={() => handlePopUpOpen("addTaxID")}
@@ -14,7 +14,7 @@ import {
  THead,
  Tr
 } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteOrgTaxId, useGetOrgTaxIds } from "@app/hooks/api";

 const taxIDTypeLabelMap: { [key: string]: string } = {
@@ -103,7 +103,7 @@ export const TaxIDTable = () => {
                <Td>{value}</Td>
                <Td>
                  <OrgPermissionCan
-                    I={OrgPermissionActions.Delete}
+                    I={OrgPermissionBillingActions.ManageBilling}
                    a={OrgPermissionSubjects.Billing}
                  >
                    {(isAllowed) => (
@@ -1,5 +1,5 @@
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { OrgPermissionBillingActions, OrgPermissionSubjects } from "@app/context";
 import { isInfisicalCloud } from "@app/helpers/platform";
 import { withPermission } from "@app/hoc";

@@ -47,5 +47,5 @@ export const BillingTabGroup = withPermission(
      </Tabs>
    );
  },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Billing }
+  { action: OrgPermissionBillingActions.Read, subject: OrgPermissionSubjects.Billing }
 );
@@ -5,6 +5,7 @@ import { OrgPermissionSubjects } from "@app/context";
 import {
  OrgGatewayPermissionActions,
  OrgPermissionAppConnectionActions,
+  OrgPermissionBillingActions,
  OrgPermissionGroupActions,
  OrgPermissionIdentityActions,
  OrgPermissionKmipActions,
@@ -21,6 +22,13 @@ const generalPermissionSchema = z
  })
  .optional();

+const billingPermissionSchema = z
+  .object({
+    [OrgPermissionBillingActions.Read]: z.boolean().optional(),
+    [OrgPermissionBillingActions.ManageBilling]: z.boolean().optional()
+  })
+  .optional();
+
 const appConnectionsPermissionSchema = z
  .object({
    [OrgPermissionAppConnectionActions.Read]: z.boolean().optional(),
@@ -113,7 +121,7 @@ export const formSchema = z.object({
      scim: generalPermissionSchema,
      [OrgPermissionSubjects.GithubOrgSync]: generalPermissionSchema,
      ldap: generalPermissionSchema,
-      billing: generalPermissionSchema,
+      billing: billingPermissionSchema,
      identity: identityPermissionSchema,
      "organization-admin-console": adminConsolePermissionSchmea,
      [OrgPermissionSubjects.Kms]: generalPermissionSchema,
@@ -0,0 +1,174 @@
+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 { OrgPermissionBillingActions } from "@app/context/OrgPermissionContext/types";
+import { useToggle } from "@app/hooks";
+
+import { TFormSchema } from "../OrgRoleModifySection.utils";
+
+const PERMISSION_ACTIONS = [
+  { action: OrgPermissionBillingActions.Read, label: "View bills" },
+  { action: OrgPermissionBillingActions.ManageBilling, label: "Manage billing" }
+] as const;
+
+type Props = {
+  isEditable: boolean;
+  setValue: UseFormSetValue<TFormSchema>;
+  control: Control<TFormSchema>;
+};
+
+enum Permission {
+  NoAccess = "no-access",
+  ReadOnly = "read-only",
+  FullAccess = "full-access",
+  Custom = "custom"
+}
+
+export const OrgPermissionBillingRow = ({ isEditable, control, setValue }: Props) => {
+  const [isRowExpanded, setIsRowExpanded] = useToggle();
+  const [isCustom, setIsCustom] = useToggle();
+
+  const rule = useWatch({
+    control,
+    name: "permissions.billing"
+  });
+
+  const selectedPermissionCategory = useMemo(() => {
+    const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
+    const totalActions = PERMISSION_ACTIONS.length;
+    const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
+
+    if (isCustom) return Permission.Custom;
+    if (score === 0) return Permission.NoAccess;
+    if (score === totalActions) return Permission.FullAccess;
+    if (score === 1 && rule?.[OrgPermissionBillingActions.Read]) return Permission.ReadOnly;
+    return Permission.Custom;
+  }, [rule, isCustom]);
+
+  useEffect(() => {
+    if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
+    else setIsCustom.off();
+  }, [selectedPermissionCategory]);
+
+  const handlePermissionChange = (val: Permission) => {
+    if (val === Permission.Custom) {
+      setIsRowExpanded.on();
+      setIsCustom.on();
+      return;
+    }
+    setIsCustom.off();
+
+    switch (val) {
+      case Permission.NoAccess:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: false,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.ReadOnly:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: true,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+      case Permission.FullAccess:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: true,
+            [OrgPermissionBillingActions.ManageBilling]: true
+          },
+          { shouldDirty: true }
+        );
+        break;
+      default:
+        setValue(
+          "permissions.billing",
+          {
+            [OrgPermissionBillingActions.Read]: false,
+            [OrgPermissionBillingActions.ManageBilling]: false
+          },
+          { shouldDirty: true }
+        );
+        break;
+    }
+  };
+
+  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>Billing</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.ReadOnly}>Read Only</SelectItem>
+            <SelectItem value={Permission.FullAccess}>Full 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.billing.${action}`}
+                    key={`permissions.billing.${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.billing.${action}`}
+                      >
+                        {label}
+                      </Checkbox>
+                    )}
+                  />
+                );
+              })}
+            </div>
+          </Td>
+        </Tr>
+      )}
+    </>
+  );
+};
@@ -38,13 +38,6 @@ const MEMBERS_PERMISSIONS = [
  { action: "delete", label: "Remove members" }
 ] as const;

-const BILLING_PERMISSIONS = [
-  { action: "read", label: "View bills" },
-  { action: "create", label: "Add payment methods" },
-  { action: "edit", label: "Edit payments" },
-  { action: "delete", label: "Remove payments" }
-] as const;
-
 const PROJECT_TEMPLATES_PERMISSIONS = [
  { action: "read", label: "View & Apply" },
  { action: "create", label: "Create" },
@@ -52,18 +45,16 @@ const PROJECT_TEMPLATES_PERMISSIONS = [
  { action: "delete", label: "Remove" }
 ] as const;

-const getPermissionList = (option: string) => {
-  switch (option) {
-    case "secret-scanning":
-      return SECRET_SCANNING_PERMISSIONS;
-    case "billing":
-      return BILLING_PERMISSIONS;
-    case "incident-contact":
-      return INCIDENT_CONTACTS_PERMISSIONS;
+const getPermissionList = (formName: Props["formName"]) => {
+  switch (formName) {
    case "member":
      return MEMBERS_PERMISSIONS;
    case OrgPermissionSubjects.ProjectTemplates:
      return PROJECT_TEMPLATES_PERMISSIONS;
+    case "secret-scanning":
+      return SECRET_SCANNING_PERMISSIONS;
+    case "incident-contact":
+      return INCIDENT_CONTACTS_PERMISSIONS;
    default:
      return PERMISSIONS;
  }
@@ -74,7 +65,7 @@ type Props = {
  title: string;
  formName: keyof Omit<
    Exclude<TFormSchema["permissions"], undefined>,
-    "workspace" | "organization-admin-console" | "kmip" | "gateway" | "secret-share"
+    "workspace" | "organization-admin-console" | "kmip" | "gateway" | "secret-share" | "billing"
  >;
  setValue: UseFormSetValue<TFormSchema>;
  control: Control<TFormSchema>;
@@ -14,6 +14,7 @@ import {
  TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgPermissionBillingRow } from "./OrgPermissionBillingRow";
 import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionGroupRow } from "./OrgPermissionGroupRow";
 import { OrgPermissionIdentityRow } from "./OrgPermissionIdentityRow";
@@ -27,10 +28,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
    title: "User Management",
    formName: "member"
  },
-  {
-    title: "Usage & Billing",
-    formName: "billing"
-  },
  {
    title: "Role Management",
    formName: "role"
@@ -186,6 +183,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                setValue={setValue}
                isEditable={isCustomRole}
              />
+              <OrgPermissionBillingRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
              <OrgPermissionSecretShareRow
                control={control}
                setValue={setValue}
@@ -49,7 +49,7 @@ const formSchema = z
    environment: z.object({ slug: z.string(), name: z.string() }),
    name: z.string().optional(),
    secretPath: z.string().optional(),
-    approvals: z.number().min(1),
+    approvals: z.number().min(1).default(1),
    userApprovers: z
      .object({ type: z.literal(ApproverType.User), id: z.string() })
      .array()
@@ -67,7 +67,7 @@ const formSchema = z
      .array()
      .default([]),
    policyType: z.nativeEnum(PolicyType),
-    enforcementLevel: z.nativeEnum(EnforcementLevel),
+    enforcementLevel: z.nativeEnum(EnforcementLevel).default(EnforcementLevel.Hard),
    allowedSelfApprovals: z.boolean().default(true)
  })
  .superRefine((data, ctx) => {
@@ -4,6 +4,7 @@ import {
  SiApachecassandra,
  SiElasticsearch,
  SiFiles,
+  SiKubernetes,
  SiMongodb,
  SiRabbitmq,
  SiSap,
@@ -24,6 +25,7 @@ import { AwsIamInputForm } from "./AwsIamInputForm";
 import { AzureEntraIdInputForm } from "./AzureEntraIdInputForm";
 import { CassandraInputForm } from "./CassandraInputForm";
 import { ElasticSearchInputForm } from "./ElasticSearchInputForm";
+import { KubernetesInputForm } from "./KubernetesInputForm";
 import { LdapInputForm } from "./LdapInputForm";
 import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
 import { MongoDBDatabaseInputForm } from "./MongoDBInputForm";
@@ -124,6 +126,11 @@ const DYNAMIC_SECRET_LIST = [
    icon: <FontAwesomeIcon icon={faClock} size="lg" />,
    provider: DynamicSecretProviders.Totp,
    title: "TOTP"
+  },
+  {
+    icon: <SiKubernetes size="1.5rem" />,
+    provider: DynamicSecretProviders.Kubernetes,
+    title: "Kubernetes"
  }
 ];

@@ -472,6 +479,25 @@ export const CreateDynamicSecretForm = ({
                />
              </motion.div>
            )}
+          {wizardStep === WizardSteps.ProviderInputs &&
+            selectedProvider === DynamicSecretProviders.Kubernetes && (
+              <motion.div
+                key="dynamic-kubernetes-step"
+                transition={{ duration: 0.1 }}
+                initial={{ opacity: 0, translateX: 30 }}
+                animate={{ opacity: 1, translateX: 0 }}
+                exit={{ opacity: 0, translateX: -30 }}
+              >
+                <KubernetesInputForm
+                  onCompleted={handleFormReset}
+                  onCancel={handleFormReset}
+                  projectSlug={projectSlug}
+                  secretPath={secretPath}
+                  environments={environments}
+                  isSingleEnvironmentMode={isSingleEnvironmentMode}
+                />
+              </motion.div>
+            )}
        </AnimatePresence>
      </ModalContent>
    </Modal>
@@ -0,0 +1,492 @@
+import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faQuestionCircle,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FilterableSelect,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys, useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+import { WorkspaceEnv } from "@app/hooks/api/types";
+
+enum CredentialType {
+  Dynamic = "dynamic",
+  Static = "static"
+}
+
+const credentialTypes = [
+  {
+    label: "Static",
+    value: CredentialType.Static
+  }
+] as const;
+
+const formSchema = z.object({
+  provider: z.object({
+    url: z.string().url().trim().min(1),
+    clusterToken: z.string().trim().min(1),
+    ca: z.string().optional(),
+    sslEnabled: z.boolean().default(false),
+    credentialType: z.literal(CredentialType.Static),
+    serviceAccountName: z.string().trim().min(1),
+    namespace: z.string().trim().min(1),
+    gatewayId: z.string().optional(),
+    audiences: z.array(z.string().trim().min(1))
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      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"),
+  environment: z.object({ name: z.string(), slug: z.string() })
+});
+
+type TForm = z.infer<typeof formSchema> & FieldValues;
+
+type Props = {
+  onCompleted: () => void;
+  onCancel: () => void;
+  secretPath: string;
+  projectSlug: string;
+  environments: WorkspaceEnv[];
+  isSingleEnvironmentMode?: boolean;
+};
+
+export const KubernetesInputForm = ({
+  onCompleted,
+  onCancel,
+  secretPath,
+  projectSlug,
+  environments,
+  isSingleEnvironmentMode
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      provider: {
+        url: "",
+        clusterToken: "",
+        ca: "",
+        sslEnabled: false,
+        serviceAccountName: "",
+        namespace: "",
+        credentialType: CredentialType.Static,
+        gatewayId: undefined,
+        audiences: []
+      },
+      environment: isSingleEnvironmentMode ? environments[0] : undefined
+    }
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "provider.audiences"
+  });
+
+  const createDynamicSecret = useCreateDynamicSecret();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+  const sslEnabled = watch("provider.sslEnabled");
+
+  const handleCreateDynamicSecret = async (formData: TForm) => {
+    const { provider, ...rest } = formData;
+    // wait till previous request is finished
+    if (createDynamicSecret.isPending) return;
+    try {
+      await createDynamicSecret.mutateAsync({
+        provider: { type: DynamicSecretProviders.Kubernetes, inputs: provider },
+        maxTTL: rest.maxTTL,
+        name: rest.name,
+        path: secretPath,
+        defaultTTL: rest.defaultTTL,
+        projectSlug,
+        environmentSlug: rest.environment.slug
+      });
+
+      onCompleted();
+    } catch {
+      createNotification({
+        type: "error",
+        text: "Failed to create dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
+      <div>
+        <div className="flex items-center space-x-2">
+          <div className="flex-grow">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="name"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="dynamic-secret" />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="defaultTTL"
+              defaultValue="1h"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Default TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+          <div className="w-32">
+            <Controller
+              control={control}
+              name="maxTTL"
+              defaultValue="24h"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label={<TtlFormLabel label="Max TTL" />}
+                  isError={Boolean(error?.message)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} />
+                </FormControl>
+              )}
+            />
+          </div>
+        </div>
+        <div>
+          <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+            Configuration
+            <a
+              href="https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                Docs
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-xxs"
+                />
+              </div>
+            </a>
+          </div>
+          <div className="flex flex-col">
+            <div className="flex items-center space-x-2">
+              <div className="flex-grow">
+                <div>
+                  <OrgPermissionCan
+                    I={OrgGatewayPermissionActions.AttachGateways}
+                    a={OrgPermissionSubjects.Gateway}
+                  >
+                    {(isAllowed) => (
+                      <Controller
+                        control={control}
+                        name="provider.gatewayId"
+                        defaultValue=""
+                        render={({ field: { value, onChange }, fieldState: { error } }) => (
+                          <FormControl
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                            label="Gateway"
+                          >
+                            <Tooltip
+                              isDisabled={isAllowed}
+                              content="Restricted access. You don't have permission to attach gateways to resources."
+                            >
+                              <div>
+                                <Select
+                                  isDisabled={!isAllowed}
+                                  value={value}
+                                  onValueChange={onChange}
+                                  className="w-full border border-mineshaft-500"
+                                  dropdownContainerClassName="max-w-none"
+                                  isLoading={isGatewaysLoading}
+                                  placeholder="Default: Internet Gateway"
+                                  position="popper"
+                                >
+                                  <SelectItem
+                                    value={null as unknown as string}
+                                    onClick={() => onChange(undefined)}
+                                  >
+                                    Internet Gateway
+                                  </SelectItem>
+                                  {gateways?.map((el) => (
+                                    <SelectItem value={el.id} key={el.id}>
+                                      {el.name}
+                                    </SelectItem>
+                                  ))}
+                                </Select>
+                              </div>
+                            </Tooltip>
+                          </FormControl>
+                        )}
+                      />
+                    )}
+                  </OrgPermissionCan>
+                </div>
+                <Controller
+                  control={control}
+                  name="provider.url"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Cluster URL"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+
+                <div className="mb-2 flex items-center">
+                  <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                    Enable SSL
+                    <Tooltip
+                      className="ml-1 max-w-md"
+                      content={
+                        <span>
+                          If enabled, you can optionally provide a custom CA certificate. Leave
+                          blank to use the system/public CA.
+                        </span>
+                      }
+                    >
+                      <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                    </Tooltip>
+                  </span>
+                  <Controller
+                    name="provider.sslEnabled"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <Switch
+                        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                        id="ssl-enabled"
+                        thumbClassName="bg-mineshaft-800"
+                        isChecked={value}
+                        onCheckedChange={onChange}
+                        aria-label="Enable SSL"
+                      />
+                    )}
+                  />
+                </div>
+
+                <Controller
+                  control={control}
+                  name="provider.ca"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="CA"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className={sslEnabled ? "" : "opacity-50"}
+                    >
+                      <TextArea
+                        {...field}
+                        placeholder="-----BEGIN CERTIFICATE----- ..."
+                        isDisabled={!sslEnabled}
+                      />
+                    </FormControl>
+                  )}
+                />
+
+                <Controller
+                  control={control}
+                  name="provider.clusterToken"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Cluster Token"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="password" autoComplete="new-password" />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="provider.credentialType"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Credential Type"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="w-full"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        className="w-full"
+                        onValueChange={(e) => field.onChange(e)}
+                      >
+                        {credentialTypes.map((credentialType) => (
+                          <SelectItem
+                            value={credentialType.value}
+                            key={`credential-type-${credentialType.value}`}
+                          >
+                            {credentialType.label}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <div className="flex items-center space-x-2">
+                  <div className="flex-1">
+                    <Controller
+                      control={control}
+                      name="provider.serviceAccountName"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Service Account Name"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input {...field} autoComplete="new-password" />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <Controller
+                      control={control}
+                      name="provider.namespace"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Namespace"
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                </div>
+                <div className="mt-2 w-1/2">
+                  <Controller
+                    control={control}
+                    name="provider.audiences"
+                    render={({ fieldState: { error } }) => (
+                      <FormControl
+                        label="Audiences"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <div className="space-y-2">
+                          {fields.map((field, index) => (
+                            <div key={field.id} className="flex items-center space-x-2">
+                              <Input
+                                {...control.register(`provider.audiences.${index}`)}
+                                placeholder="Enter audience"
+                                className="flex-grow"
+                              />
+                              <IconButton
+                                onClick={() => remove(index)}
+                                variant="outline_bg"
+                                ariaLabel="Remove audience"
+                              >
+                                <FontAwesomeIcon icon={faTrash} />
+                              </IconButton>
+                            </div>
+                          ))}
+                          <Button variant="outline_bg" onClick={() => append("")} type="button">
+                            Add Audience
+                          </Button>
+                        </div>
+                      </FormControl>
+                    )}
+                  />
+                </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>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center space-x-4">
+        <Button type="submit" isLoading={isSubmitting}>
+          Submit
+        </Button>
+        <Button variant="outline_bg" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
@@ -320,6 +320,20 @@ const renderOutputForm = (
    );
  }

+  if (provider === DynamicSecretProviders.Kubernetes) {
+    const { TOKEN } = data as { TOKEN: string };
+
+    return (
+      <div>
+        <OutputDisplay
+          label="Service Account JWT"
+          value={TOKEN}
+          helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
+        />
+      </div>
+    );
+  }
+
  if (provider === DynamicSecretProviders.Totp) {
    const { TOTP, TIME_REMAINING } = data as {
      TOTP: string;
@@ -9,6 +9,7 @@ import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
 import { EditDynamicSecretAzureEntraIdForm } from "./EditDynamicSecretAzureEntraIdForm";
 import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
 import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
+import { EditDynamicSecretKubernetesForm } from "./EditDynamicSecretKubernetesForm";
 import { EditDynamicSecretLdapForm } from "./EditDynamicSecretLdapForm";
 import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
 import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
@@ -312,6 +313,23 @@ export const EditDynamicSecretForm = ({
          />
        </motion.div>
      )}
+      {dynamicSecretDetails?.type === DynamicSecretProviders.Kubernetes && (
+        <motion.div
+          key="kubernetes-edit"
+          transition={{ duration: 0.1 }}
+          initial={{ opacity: 0, translateX: 30 }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{ opacity: 0, translateX: -30 }}
+        >
+          <EditDynamicSecretKubernetesForm
+            onClose={onClose}
+            projectSlug={projectSlug}
+            secretPath={secretPath}
+            dynamicSecret={dynamicSecretDetails}
+            environment={environment}
+          />
+        </motion.div>
+      )}
    </AnimatePresence>
  );
 };
@@ -0,0 +1,463 @@
+import { Controller, FieldValues, useFieldArray, useForm } from "react-hook-form";
+import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
+  faQuestionCircle,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Switch,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
+import { OrgPermissionSubjects } from "@app/context/OrgPermissionContext";
+import { OrgGatewayPermissionActions } from "@app/context/OrgPermissionContext/types";
+import { gatewaysQueryKeys, useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+enum CredentialType {
+  Dynamic = "dynamic",
+  Static = "static"
+}
+
+const credentialTypes = [
+  {
+    label: "Static",
+    value: CredentialType.Static
+  }
+] as const;
+
+const formSchema = z.object({
+  inputs: z.object({
+    url: z.string().url().trim().min(1),
+    clusterToken: z.string().trim().min(1),
+    ca: z.string().optional(),
+    sslEnabled: z.boolean().default(false),
+    credentialType: z.literal(CredentialType.Static),
+    serviceAccountName: z.string().trim().min(1),
+    namespace: z.string().trim().min(1),
+    gatewayId: z.string().optional(),
+    audiences: z.array(z.string().trim().min(1))
+  }),
+  defaultTTL: z.string().superRefine((val, ctx) => {
+    const valMs = ms(val);
+    if (valMs < 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+    if (valMs > 24 * 60 * 60 * 1000)
+      ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+  }),
+  maxTTL: z
+    .string()
+    .optional()
+    .superRefine((val, ctx) => {
+      if (!val) return;
+      const valMs = ms(val);
+      if (valMs < 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+      if (valMs > 24 * 60 * 60 * 1000)
+        ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+    }),
+  newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+
+type TForm = z.infer<typeof formSchema> & FieldValues;
+
+type Props = {
+  onClose: () => void;
+  dynamicSecret: TDynamicSecret & { inputs: unknown };
+  secretPath: string;
+  projectSlug: string;
+  environment: string;
+};
+
+export const EditDynamicSecretKubernetesForm = ({
+  onClose,
+  dynamicSecret,
+  environment,
+  secretPath,
+  projectSlug
+}: Props) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    watch
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      newName: dynamicSecret.name,
+      defaultTTL: dynamicSecret.defaultTTL,
+      maxTTL: dynamicSecret.maxTTL,
+      inputs: dynamicSecret.inputs as TForm["inputs"]
+    }
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "inputs.audiences" as const
+  });
+
+  const updateDynamicSecret = useUpdateDynamicSecret();
+  const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list());
+
+  const sslEnabled = watch("inputs.sslEnabled");
+
+  const handleUpdateDynamicSecret = async (formData: TForm) => {
+    // wait till previous request is finished
+    if (updateDynamicSecret.isPending) return;
+    try {
+      await updateDynamicSecret.mutateAsync({
+        name: dynamicSecret.name,
+        path: secretPath,
+        projectSlug,
+        environmentSlug: environment,
+        data: {
+          inputs: formData.inputs,
+          newName: formData.newName === dynamicSecret.name ? undefined : formData.newName,
+          defaultTTL: formData.defaultTTL,
+          maxTTL: formData.maxTTL
+        }
+      });
+      onClose();
+      createNotification({
+        type: "success",
+        text: "Successfully updated dynamic secret"
+      });
+    } catch (err) {
+      createNotification({
+        type: "error",
+        text: err instanceof Error ? err.message : "Failed to update dynamic secret"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
+        <div>
+          <div className="flex items-center space-x-2">
+            <div className="flex-grow">
+              <Controller
+                control={control}
+                defaultValue=""
+                name="newName"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="Secret Name"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} placeholder="dynamic-secret" />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="defaultTTL"
+                defaultValue="1h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Default TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+            <div className="w-32">
+              <Controller
+                control={control}
+                name="maxTTL"
+                defaultValue="24h"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label={<TtlFormLabel label="Max TTL" />}
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} />
+                  </FormControl>
+                )}
+              />
+            </div>
+          </div>
+          <div>
+            <div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
+              Configuration
+              <a
+                href="https://infisical.com/docs/documentation/platform/dynamic-secrets/kubernetes"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                  Docs
+                  <FontAwesomeIcon
+                    icon={faArrowUpRightFromSquare}
+                    className="mb-[0.07rem] ml-1.5 text-xxs"
+                  />
+                </div>
+              </a>
+            </div>
+            <div className="flex flex-col">
+              <div className="flex items-center space-x-2">
+                <div className="flex-grow">
+                  <div>
+                    <OrgPermissionCan
+                      I={OrgGatewayPermissionActions.AttachGateways}
+                      a={OrgPermissionSubjects.Gateway}
+                    >
+                      {(isAllowed) => (
+                        <Controller
+                          control={control}
+                          name="inputs.gatewayId"
+                          defaultValue=""
+                          render={({ field: { value, onChange }, fieldState: { error } }) => (
+                            <FormControl
+                              isError={Boolean(error?.message)}
+                              errorText={error?.message}
+                              label="Gateway"
+                            >
+                              <Tooltip
+                                isDisabled={isAllowed}
+                                content="Restricted access. You don't have permission to attach gateways to resources."
+                              >
+                                <div>
+                                  <Select
+                                    isDisabled={!isAllowed}
+                                    value={value}
+                                    onValueChange={onChange}
+                                    className="w-full border border-mineshaft-500"
+                                    dropdownContainerClassName="max-w-none"
+                                    isLoading={isGatewaysLoading}
+                                    placeholder="Default: Internet Gateway"
+                                    position="popper"
+                                  >
+                                    <SelectItem
+                                      value={null as unknown as string}
+                                      onClick={() => onChange(undefined)}
+                                    >
+                                      Internet Gateway
+                                    </SelectItem>
+                                    {gateways?.map((el) => (
+                                      <SelectItem value={el.id} key={el.id}>
+                                        {el.name}
+                                      </SelectItem>
+                                    ))}
+                                  </Select>
+                                </div>
+                              </Tooltip>
+                            </FormControl>
+                          )}
+                        />
+                      )}
+                    </OrgPermissionCan>
+                  </div>
+                  <Controller
+                    control={control}
+                    name="inputs.url"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Cluster URL"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} />
+                      </FormControl>
+                    )}
+                  />
+
+                  <div className="mb-2 flex items-center">
+                    <span className="mr-3 flex items-center text-sm text-mineshaft-400">
+                      Enable SSL
+                      <Tooltip
+                        className="ml-1 max-w-md"
+                        content={
+                          <span>
+                            If enabled, you can optionally provide a custom CA certificate. Leave
+                            blank to use the system/public CA.
+                          </span>
+                        }
+                      >
+                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" className="ml-1" />
+                      </Tooltip>
+                    </span>
+                    <Controller
+                      name="inputs.sslEnabled"
+                      control={control}
+                      render={({ field: { value, onChange } }) => (
+                        <Switch
+                          className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
+                          id="ssl-enabled"
+                          thumbClassName="bg-mineshaft-800"
+                          isChecked={value}
+                          onCheckedChange={onChange}
+                          aria-label="Enable SSL"
+                        />
+                      )}
+                    />
+                  </div>
+
+                  <Controller
+                    control={control}
+                    name="inputs.ca"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="CA"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className={sslEnabled ? "" : "opacity-50"}
+                      >
+                        <TextArea
+                          {...field}
+                          placeholder="-----BEGIN CERTIFICATE----- ..."
+                          isDisabled={!sslEnabled}
+                        />
+                      </FormControl>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name="inputs.clusterToken"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Cluster Token"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                      >
+                        <Input {...field} type="password" autoComplete="new-password" />
+                      </FormControl>
+                    )}
+                  />
+                  <Controller
+                    control={control}
+                    name="inputs.credentialType"
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        label="Credential Type"
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="w-full"
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          className="w-full"
+                          onValueChange={(e) => field.onChange(e)}
+                        >
+                          {credentialTypes.map((credentialType) => (
+                            <SelectItem
+                              value={credentialType.value}
+                              key={`credential-type-${credentialType.value}`}
+                            >
+                              {credentialType.label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div className="flex items-center space-x-2">
+                    <div className="flex-1">
+                      <Controller
+                        control={control}
+                        name="inputs.serviceAccountName"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Service Account Name"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input {...field} autoComplete="new-password" />
+                          </FormControl>
+                        )}
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <Controller
+                        control={control}
+                        name="inputs.namespace"
+                        render={({ field, fieldState: { error } }) => (
+                          <FormControl
+                            label="Namespace"
+                            isError={Boolean(error?.message)}
+                            errorText={error?.message}
+                          >
+                            <Input {...field} />
+                          </FormControl>
+                        )}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-2 w-1/2">
+                <Controller
+                  control={control}
+                  name="inputs.audiences"
+                  render={({ fieldState: { error } }) => (
+                    <FormControl
+                      label="Audiences"
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                    >
+                      <div className="space-y-2">
+                        {fields.map((field, index) => (
+                          <div key={field.id} className="flex items-center space-x-2">
+                            <Input
+                              {...control.register(`inputs.audiences.${index}`)}
+                              placeholder="Enter audience"
+                              className="flex-grow"
+                            />
+                            <IconButton
+                              onClick={() => remove(index)}
+                              variant="outline_bg"
+                              ariaLabel="Remove audience"
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          </div>
+                        ))}
+                        <Button variant="outline_bg" onClick={() => append("")} type="button">
+                          Add Audience
+                        </Button>
+                      </div>
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 flex items-center space-x-4">
+          <Button type="submit" isLoading={isSubmitting}>
+            Submit
+          </Button>
+          <Button variant="outline_bg" onClick={onClose}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};