Merge branch 'main' into feat/azureClientSecretsRotation

2026-10-18 10:48:36 +00:00 · 2025-04-21 10:27:56 -03:00
parent ccd7b0062e eba12912f8
commit ef47d0056f
175 changed files with 2608 additions and 249 deletions
@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { LoginPage } from "../LoginPage/LoginPage";
+
+export const Route = createFileRoute("/_restrict-login-signup/login/admin")({
+  component: () => <LoginPage isAdmin />
+});
@@ -33,14 +33,21 @@ export const useNavigateToSelectOrganization = () => {
  const { config } = useServerConfig();
  const navigate = useNavigate();

-  const navigateToSelectOrganization = async (cliCallbackPort?: string) => {
+  const navigateToSelectOrganization = async (
+    cliCallbackPort?: string,
+    isFromAdminLogin?: boolean
+  ) => {
    if (!config.defaultAuthOrgId) {
      queryClient.invalidateQueries({ queryKey: userKeys.getUser });
    }

    navigate({
      to: "/login/select-organization",
-      search: { callback_port: cliCallbackPort, org_id: config.defaultAuthOrgId }
+      search: {
+        callback_port: cliCallbackPort,
+        org_id: config.defaultAuthOrgId,
+        is_admin_login: isFromAdminLogin
+      }
    });
  };

@@ -8,7 +8,7 @@ import { isLoggedIn } from "@app/hooks/api/reactQuery";
 import { InitialStep, SSOStep } from "./components";
 import { useNavigateToSelectOrganization } from "./Login.utils";

-export const LoginPage = () => {
+export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
  const { t } = useTranslation();
  const [step, setStep] = useState(0);
  const [email, setEmail] = useState("");
@@ -44,6 +44,7 @@ export const LoginPage = () => {
      case 0:
        return (
          <InitialStep
+            isAdmin={isAdmin}
            setStep={setStep}
            email={email}
            setEmail={setEmail}
@@ -26,9 +26,17 @@ type Props = {
  setEmail: (email: string) => void;
  password: string;
  setPassword: (email: string) => void;
+  isAdmin?: boolean;
 };

-export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
+export const InitialStep = ({
+  setStep,
+  email,
+  setEmail,
+  password,
+  setPassword,
+  isAdmin
+}: Props) => {
  const navigate = useNavigate();

  const { t } = useTranslation();
@@ -62,7 +70,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
  };

  useEffect(() => {
-    if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    if (serverDetails?.samlDefaultOrgSlug && !isAdmin) {
+      redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    }
  }, [serverDetails?.samlDefaultOrgSlug]);

  const handleSaml = () => {
@@ -82,7 +92,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
  };

  const shouldDisplayLoginMethod = (method: LoginMethod) =>
-    !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
+    isAdmin || !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);

  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
@@ -120,7 +130,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:

        if (isLoginSuccessful && isLoginSuccessful.success) {
          // case: login was successful
-          navigateToSelectOrganization();
+          navigateToSelectOrganization(undefined, isAdmin);
          createNotification({
            text: "Successfully logged in",
            type: "success"
@@ -160,7 +170,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
    setIsLoading(false);
  };

-  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod) {
+  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod && !isAdmin) {
    return (
      <form
        onSubmit={handleLogin}
@@ -14,6 +14,7 @@ import { IsCliLoginSuccessful } from "@app/components/utilities/attemptCliLogin"
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button, Spinner } from "@app/components/v2";
 import { SessionStorageKeys } from "@app/const";
+import { OrgMembershipRole } from "@app/helpers/roles";
 import { useToggle } from "@app/hooks";
 import {
  useGetOrganizations,
@@ -53,6 +54,7 @@ export const SelectOrganizationPage = () => {
  const queryParams = new URLSearchParams(window.location.search);
  const orgId = queryParams.get("org_id");
  const callbackPort = queryParams.get("callback_port");
+  const isAdminLogin = queryParams.get("is_admin_login") === "true";
  const defaultSelectedOrg = organizations.data?.find((org) => org.id === orgId);

  const logout = useLogoutUser(true);
@@ -68,7 +70,12 @@ export const SelectOrganizationPage = () => {

  const handleSelectOrganization = useCallback(
    async (organization: Organization) => {
-      if (organization.authEnforced) {
+      const canBypassOrgAuth =
+        organization.bypassOrgAuthEnabled &&
+        organization.userRole === OrgMembershipRole.Admin &&
+        isAdminLogin;
+
+      if (organization.authEnforced && !canBypassOrgAuth) {
        // org has an org-level auth method enabled (e.g. SAML)
        // -> logout + redirect to SAML SSO
        await logout.mutateAsync();
@@ -6,13 +6,16 @@ import { SelectOrganizationPage } from "./SelectOrgPage";

 export const SelectOrganizationPageQueryParams = z.object({
  org_id: z.string().optional().catch(""),
-  callback_port: z.coerce.number().optional().catch(undefined)
+  callback_port: z.coerce.number().optional().catch(undefined),
+  is_admin_login: z.boolean().optional().catch(false)
 });

 export const Route = createFileRoute("/_restrict-login-signup/login/select-organization")({
  component: SelectOrganizationPage,
  validateSearch: zodValidator(SelectOrganizationPageQueryParams),
  search: {
-    middlewares: [stripSearchParams({ org_id: "", callback_port: undefined })]
+    middlewares: [
+      stripSearchParams({ org_id: "", callback_port: undefined, is_admin_login: false })
+    ]
  }
 });
@@ -23,6 +23,7 @@ import { MsSqlConnectionForm } from "./MsSqlConnectionForm";
 import { PostgresConnectionForm } from "./PostgresConnectionForm";
 import { TerraformCloudConnectionForm } from "./TerraformCloudConnectionForm";
 import { VercelConnectionForm } from "./VercelConnectionForm";
+import { WindmillConnectionForm } from "./WindmillConnectionForm";

 type FormProps = {
  onComplete: (appConnection: TAppConnection) => void;
@@ -87,6 +88,8 @@ const CreateForm = ({ app, onComplete }: CreateFormProps) => {
      return <CamundaConnectionForm onSubmit={onSubmit} />;
    case AppConnection.AzureClientSecrets:
      return <AzureClientSecretsConnectionForm />;
+    case AppConnection.Windmill:
+      return <WindmillConnectionForm onSubmit={onSubmit} />;
    case AppConnection.Auth0:
      return <Auth0ConnectionForm onSubmit={onSubmit} />;
    default:
@@ -151,6 +154,8 @@ const UpdateForm = ({ appConnection, onComplete }: UpdateFormProps) => {
      return <CamundaConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.AzureClientSecrets:
      return <AzureClientSecretsConnectionForm appConnection={appConnection} />;
+    case AppConnection.Windmill:
+      return <WindmillConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    case AppConnection.Auth0:
      return <Auth0ConnectionForm onSubmit={onSubmit} appConnection={appConnection} />;
    default:
@@ -0,0 +1,158 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import {
+  Button,
+  FormControl,
+  Input,
+  ModalClose,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
+import { TWindmillConnection, WindmillConnectionMethod } from "@app/hooks/api/appConnections";
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+
+import {
+  genericAppConnectionFieldsSchema,
+  GenericAppConnectionsFields
+} from "./GenericAppConnectionFields";
+
+type Props = {
+  appConnection?: TWindmillConnection;
+  onSubmit: (formData: FormData) => void;
+};
+
+const rootSchema = genericAppConnectionFieldsSchema.extend({
+  app: z.literal(AppConnection.Windmill)
+});
+
+const formSchema = z.discriminatedUnion("method", [
+  rootSchema.extend({
+    method: z.literal(WindmillConnectionMethod.AccessToken),
+    credentials: z.object({
+      accessToken: z.string().trim().min(1, "Access Token required"),
+      instanceUrl: z
+        .string()
+        .trim()
+        .transform((value) => value || undefined)
+        .refine((value) => (!value ? true : z.string().url().safeParse(value).success), {
+          message: "Invalid instance URL"
+        })
+        .optional()
+    })
+  })
+]);
+
+type FormData = z.infer<typeof formSchema>;
+
+export const WindmillConnectionForm = ({ appConnection, onSubmit }: Props) => {
+  const isUpdate = Boolean(appConnection);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues: appConnection ?? {
+      app: AppConnection.Windmill,
+      method: WindmillConnectionMethod.AccessToken
+    }
+  });
+
+  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.Windmill].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(WindmillConnectionMethod).map((method) => {
+                  return (
+                    <SelectItem value={method} key={method}>
+                      {getAppConnectionMethodDetails(method).name}{" "}
+                    </SelectItem>
+                  );
+                })}
+              </Select>
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.instanceUrl"
+          control={control}
+          shouldUnregister
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Instance URL"
+              isOptional
+              tooltipClassName="max-w-sm"
+              tooltipText="Will default to Windmill Cloud if not specified."
+            >
+              <Input {...field} placeholder="https://app.windmill.dev" />
+            </FormControl>
+          )}
+        />
+        <Controller
+          name="credentials.accessToken"
+          control={control}
+          shouldUnregister
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              errorText={error?.message}
+              isError={Boolean(error?.message)}
+              label="Access 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 Windmill"}
+          </Button>
+          <ModalClose asChild>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </ModalClose>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
@@ -18,6 +18,7 @@ import { useOrganization } from "@app/context";
 import { useToggle } from "@app/hooks";
 import { useGetOIDCConfig } from "@app/hooks/api";
 import { useCreateOIDCConfig, useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations";
+import { OIDCJWTSignatureAlgorithm } from "@app/hooks/api/oidcConfig/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 enum ConfigurationType {
@@ -43,7 +44,8 @@ const schema = z
    userinfoEndpoint: z.string().optional(),
    clientId: z.string().min(1),
    clientSecret: z.string().min(1),
-    allowedEmailDomains: z.string().optional()
+    allowedEmailDomains: z.string().optional(),
+    jwtSignatureAlgorithm: z.nativeEnum(OIDCJWTSignatureAlgorithm).optional()
  })
  .superRefine((data, ctx) => {
    if (data.configurationType === ConfigurationType.CUSTOM) {
@@ -159,6 +161,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
      setValue("clientSecret", data.clientSecret);
      setValue("allowedEmailDomains", data.allowedEmailDomains);
      setValue("configurationType", data.configurationType);
+      setValue("jwtSignatureAlgorithm", data.jwtSignatureAlgorithm);
    }
  }, [data]);

@@ -172,7 +175,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
    configurationType,
    discoveryURL,
    clientId,
-    clientSecret
+    clientSecret,
+    jwtSignatureAlgorithm
  }: OIDCFormData) => {
    try {
      if (!currentOrg) {
@@ -192,7 +196,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
          clientId,
          clientSecret,
          isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
        });
      } else {
        await updateMutateAsync({
@@ -207,7 +212,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
          clientId,
          clientSecret,
          isActive: true,
-          orgSlug: currentOrg.slug
+          orgSlug: currentOrg.slug,
+          jwtSignatureAlgorithm
        });
      }

@@ -362,6 +368,29 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDele
                />
              </>
            )}
+            <Controller
+              control={control}
+              defaultValue={OIDCJWTSignatureAlgorithm.RS256}
+              name="jwtSignatureAlgorithm"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  className="w-full"
+                  label="JWT Signature Algorithm"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS256}>RS256</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.RS512}>RS512</SelectItem>
+                    <SelectItem value={OIDCJWTSignatureAlgorithm.HS256}>HS256</SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
            <Controller
              control={control}
              name="allowedEmailDomains"
@@ -1,7 +1,10 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import { Switch, Tooltip } from "@app/components/v2";
 import {
  OrgPermissionActions,
  OrgPermissionSubjects,
@@ -52,6 +55,28 @@ export const OrgGeneralAuthSection = () => {
    }
  };

+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
  return (
    <>
      {/* <div className="py-4">
@@ -72,7 +97,9 @@ export const OrgGeneralAuthSection = () => {
            </div> */}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
+          </div>
          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
              <Switch
@@ -85,9 +112,62 @@ export const OrgGeneralAuthSection = () => {
          </OrgPermissionCan>
        </div>
        <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via SAML to access this organization
+          Enforce users to authenticate via SAML to access this organization
        </p>
      </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass SAML enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
      <UpgradePlanModal
        isOpen={popUp.upgradePlan.isOpen}
        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
@@ -82,6 +82,28 @@ export const OrgOIDCSection = (): JSX.Element => {
    }
  };

+  const handleEnableBypassOrgAuthToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.oidcSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await updateOrg({
+        orgId: currentOrg?.id,
+        bypassOrgAuthEnabled: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} admin bypassing of org-level auth`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
  const handleOIDCGroupManagement = async (value: boolean) => {
    try {
      if (!currentOrg?.id) return;
@@ -158,7 +180,9 @@ export const OrgOIDCSection = (): JSX.Element => {
      )}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
+          </div>
          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
            {(isAllowed) => (
              <Switch
@@ -171,9 +195,62 @@ export const OrgOIDCSection = (): JSX.Element => {
          </OrgPermissionCan>
        </div>
        <p className="text-sm text-mineshaft-300">
-          Enforce members to authenticate via OIDC to access this organization
+          <span>Enforce users to authenticate via OIDC to access this organization.</span>
        </p>
      </div>
+      {currentOrg?.authEnforced && (
+        <div className="py-4">
+          <div className="mb-2 flex justify-between">
+            <div className="flex items-center gap-1">
+              <span className="text-md text-mineshaft-100">Enable Admin SSO Bypass</span>
+              <Tooltip
+                className="max-w-lg"
+                content={
+                  <div>
+                    <span>
+                      When this is enabled, we strongly recommend enforcing MFA at the organization
+                      level.
+                    </span>
+                    <p className="mt-4">
+                      In case of a lockout, admins can use the admin login portal at{" "}
+                      <a
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline underline-offset-2 hover:text-mineshaft-300"
+                        href={`${window.location.origin}/login/admin`}
+                      >
+                        {window.location.origin}/login/admin
+                      </a>
+                    </p>
+                  </div>
+                }
+              >
+                <FontAwesomeIcon
+                  icon={faInfoCircle}
+                  size="sm"
+                  className="mt-0.5 inline-block text-mineshaft-400"
+                />
+              </Tooltip>
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="allow-admin-bypass"
+                  isChecked={currentOrg?.bypassOrgAuthEnabled ?? false}
+                  onCheckedChange={(value) => handleEnableBypassOrgAuthToggle(value)}
+                  isDisabled={!isAllowed}
+                />
+              )}
+            </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">
+            <span>
+              Allow organization admins to bypass OIDC enforcement when SSO is unavailable,
+              misconfigured, or inaccessible.
+            </span>
+          </p>
+        </div>
+      )}
      <div className="py-4">
        <div className="mb-2 flex justify-between">
          <div className="text-md flex items-center text-mineshaft-100">
@@ -20,6 +20,8 @@ import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";

+import { SSOModalHeader } from "./SSOModalHeader";
+
 enum AuthProvider {
  OKTA_SAML = "okta-saml",
  AZURE_SAML = "azure-saml",
@@ -30,12 +32,32 @@ enum AuthProvider {
 }

 const ssoAuthProviders = [
-  { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
-  { label: "Azure / Entra SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
-  { label: "Keycloak SAML", value: AuthProvider.KEYCLOAK_SAML },
-  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML },
-  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML }
+  { label: "Okta SAML", value: AuthProvider.OKTA_SAML, image: "Okta.png", docsUrl: "okta" },
+  {
+    label: "Azure / Entra SAML",
+    value: AuthProvider.AZURE_SAML,
+    image: "Microsoft Azure.png",
+    docsUrl: "azure"
+  },
+  {
+    label: "JumpCloud SAML",
+    value: AuthProvider.JUMPCLOUD_SAML,
+    image: "JumpCloud.png",
+    docsUrl: "jumpcloud"
+  },
+  {
+    label: "Keycloak SAML",
+    value: AuthProvider.KEYCLOAK_SAML,
+    image: "Keycloak.png",
+    docsUrl: "keycloak-saml"
+  },
+  {
+    label: "Google SAML",
+    value: AuthProvider.GOOGLE_SAML,
+    image: "Google.png",
+    docsUrl: "google-saml"
+  },
+  { label: "Auth0 SAML", value: AuthProvider.AUTH0_SAML, image: "Auth0.png", docsUrl: "auth0-saml" }
 ];

 const schema = z
@@ -231,6 +253,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelet
        }}
      >
        <ModalContent title="Manage SAML configuration">
+          <SSOModalHeader
+            providerDetails={ssoAuthProviders.find((provider) => provider.value === authProvider)!}
+            isConnected={Boolean(data)}
+          />
          <form onSubmit={handleSubmit(onSSOModalSubmit)}>
            <Controller
              control={control}
@@ -0,0 +1,53 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type ProviderDetails = {
+  label: string;
+  image: string;
+  value: string;
+  docsUrl: string;
+};
+
+type Props = {
+  providerDetails: ProviderDetails;
+  isConnected: boolean;
+};
+
+const docsBaseUrl = "https://infisical.com/docs/documentation/platform/sso";
+
+export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
+  return (
+    <div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
+      <img
+        alt={`${providerDetails.label} logo`}
+        src={`/images/sso/${providerDetails.image}`}
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+      />
+      <div>
+        <div className="flex items-center text-mineshaft-300">
+          {providerDetails.label}
+          <a
+            href={`${docsBaseUrl}/${providerDetails.docsUrl}`}
+            target="_blank"
+            className="mb-1 ml-1"
+            rel="noopener noreferrer"
+          >
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <span>Docs</span>
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.07rem] ml-1 text-[10px]"
+              />
+            </div>
+          </a>
+        </div>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {isConnected
+            ? `${providerDetails.label} Connection`
+            : `Connect to ${providerDetails.label}`}
+        </p>
+      </div>
+    </div>
+  );
+};
@@ -11,6 +11,7 @@ import { GitHubSyncDestinationCol } from "./GitHubSyncDestinationCol";
 import { HumanitecSyncDestinationCol } from "./HumanitecSyncDestinationCol";
 import { TerraformCloudSyncDestinationCol } from "./TerraformCloudSyncDestinationCol";
 import { VercelSyncDestinationCol } from "./VercelSyncDestinationCol";
+import { WindmillSyncDestinationCol } from "./WindmillSyncDestinationCol";

 type Props = {
  secretSync: TSecretSync;
@@ -40,6 +41,8 @@ export const SecretSyncDestinationCol = ({ secretSync }: Props) => {
      return <CamundaSyncDestinationCol secretSync={secretSync} />;
    case SecretSync.Vercel:
      return <VercelSyncDestinationCol secretSync={secretSync} />;
+    case SecretSync.Windmill:
+      return <WindmillSyncDestinationCol secretSync={secretSync} />;
    default:
      throw new Error(
        `Unhandled Secret Sync Destination Col: ${(secretSync as TSecretSync).destination}`
@@ -0,0 +1,14 @@
+import { TWindmillSync } from "@app/hooks/api/secretSyncs/types/windmill-sync";
+
+import { getSecretSyncDestinationColValues } from "../helpers";
+import { SecretSyncTableCell } from "../SecretSyncTableCell";
+
+type Props = {
+  secretSync: TWindmillSync;
+};
+
+export const WindmillSyncDestinationCol = ({ secretSync }: Props) => {
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+
+  return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
+};
@@ -90,6 +90,10 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
      primaryText = destinationConfig.appName || destinationConfig.app;
      secondaryText = destinationConfig.env;
      break;
+    case SecretSync.Windmill:
+      primaryText = destinationConfig.workspace;
+      secondaryText = destinationConfig.path;
+      break;
    default:
      throw new Error(`Unhandled Destination Col Values ${destination}`);
  }
@@ -9,18 +9,19 @@ import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
 import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
-import { AwsParameterStoreSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection";
-import { AwsSecretsManagerSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsSecretsManagerSyncDestinationSection";
-import { DatabricksSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/DatabricksSyncDestinationSection";
-import { GitHubSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/GitHubSyncDestinationSection";

+import { AwsParameterStoreSyncDestinationSection } from "./AwsParameterStoreSyncDestinationSection";
+import { AwsSecretsManagerSyncDestinationSection } from "./AwsSecretsManagerSyncDestinationSection";
 import { AzureAppConfigurationSyncDestinationSection } from "./AzureAppConfigurationSyncDestinationSection";
 import { AzureKeyVaultSyncDestinationSection } from "./AzureKeyVaultSyncDestinationSection";
 import { CamundaSyncDestinationSection } from "./CamundaSyncDestinationSection";
+import { DatabricksSyncDestinationSection } from "./DatabricksSyncDestinationSection";
 import { GcpSyncDestinationSection } from "./GcpSyncDestinationSection";
+import { GitHubSyncDestinationSection } from "./GitHubSyncDestinationSection";
 import { HumanitecSyncDestinationSection } from "./HumanitecSyncDestinationSection";
 import { TerraformCloudSyncDestinationSection } from "./TerraformCloudSyncDestinationSection";
 import { VercelSyncDestinationSection } from "./VercelSyncDestinationSection";
+import { WindmillSyncDestinationSection } from "./WindmillSyncDestinationSection";

 type Props = {
  secretSync: TSecretSync;
@@ -69,6 +70,9 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
    case SecretSync.Vercel:
      DestinationComponents = <VercelSyncDestinationSection secretSync={secretSync} />;
      break;
+    case SecretSync.Windmill:
+      DestinationComponents = <WindmillSyncDestinationSection secretSync={secretSync} />;
+      break;
    default:
      throw new Error(`Unhandled Destination Section components: ${destination}`);
  }
@@ -0,0 +1,19 @@
+import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { TWindmillSync } from "@app/hooks/api/secretSyncs/types/windmill-sync";
+
+type Props = {
+  secretSync: TWindmillSync;
+};
+
+export const WindmillSyncDestinationSection = ({ secretSync }: Props) => {
+  const {
+    destinationConfig: { path, workspace }
+  } = secretSync;
+
+  return (
+    <>
+      <GenericFieldLabel label="Workspace">{workspace}</GenericFieldLabel>
+      <GenericFieldLabel label="Path">{path}</GenericFieldLabel>
+    </>
+  );
+};
@@ -51,6 +51,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
    case SecretSync.TerraformCloud:
    case SecretSync.Camunda:
    case SecretSync.Vercel:
+    case SecretSync.Windmill:
      AdditionalSyncOptionsComponent = null;
      break;
    default:
@@ -0,0 +1,57 @@
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Checkbox } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggleDeleteProjectProtection } from "@app/hooks/api/workspace/queries";
+
+export const DeleteProjectProtection = () => {
+  const { currentWorkspace } = useWorkspace();
+  const { mutateAsync } = useToggleDeleteProjectProtection();
+
+  const handleToggleDeleteProjectProtection = async (state: boolean) => {
+    try {
+      if (!currentWorkspace?.id) return;
+
+      await mutateAsync({
+        workspaceID: currentWorkspace.id,
+        state
+      });
+
+      const text = `Successfully ${state ? "enabled" : "disabled"} delete protection`;
+      createNotification({
+        text,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to update delete protection",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <p className="mb-3 text-xl font-semibold">Delete Protection</p>
+      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+        {(isAllowed) => (
+          <div className="w-max">
+            <Checkbox
+              className="data-[state=checked]:bg-primary"
+              id="hasDeleteProtection"
+              isDisabled={!isAllowed}
+              isChecked={currentWorkspace?.hasDeleteProtection ?? false}
+              onCheckedChange={(state) => {
+                handleToggleDeleteProjectProtection(state as boolean);
+              }}
+            >
+              Protects the project from being deleted accidentally. While this option is enabled,
+              you can&apos;t delete the project.
+            </Checkbox>
+          </div>
+        )}
+      </ProjectPermissionCan>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { DeleteProjectProtection } from "./DeleteProjectProtection";
@@ -144,7 +144,7 @@ export const DeleteProjectSection = () => {
          {(isAllowed) => (
            <Button
              isLoading={isDeleting}
-              isDisabled={!isAllowed || isDeleting}
+              isDisabled={!isAllowed || isDeleting || currentWorkspace?.hasDeleteProtection}
              colorSchema="danger"
              variant="outline_bg"
              type="submit"
@@ -5,6 +5,7 @@ import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
 import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSection";
+import { DeleteProjectProtection } from "../DeleteProjectProtection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { EnvironmentSection } from "../EnvironmentSection";
 import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
@@ -27,6 +28,7 @@ export const ProjectGeneralTab = () => {
      {currentWorkspace?.version !== ProjectVersion.V3 && isSecretManager && (
        <RebuildSecretIndicesSection />
      )}
+      <DeleteProjectProtection />
      <DeleteProjectSection />
    </div>
  );
				`@@ -0,0 +1 @@`
				`export { DeleteProjectProtection } from "./DeleteProjectProtection";`