support org mapping on org idp

src/components/AutoProvisionConfigWidget.tsx

@@ -1,19 +1,33 @@
 "use client";
 
-import IdpAutoProvisionUsersDescription from "@app/components/IdpAutoProvisionUsersDescription";
-import { FormDescription } from "@app/components/ui/form";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
 import { SwitchInput } from "@app/components/SwitchInput";
-import { useTranslations } from "next-intl";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { MappingBuilderRule, RoleMappingMode } from "@app/lib/idpRoleMapping";
-import RoleMappingConfigFields from "@app/components/RoleMappingConfigFields";
+import { useTranslations } from "next-intl";
+import type { Control } from "react-hook-form";
 
 type Role = {
     roleId: number;
     name: string;
 };
 
+export type IdpOrgMappingFieldBinding = {
+    control: unknown;
+    name: string;
+    labelKey?: string;
+};
+
 type AutoProvisionConfigWidgetProps = {
     autoProvision: boolean;
     onAutoProvisionChange: (checked: boolean) => void;
@@ -28,6 +42,11 @@ type AutoProvisionConfigWidgetProps = {
     onMappingBuilderRulesChange: (rules: MappingBuilderRule[]) => void;
     rawExpression: string;
     onRawExpressionChange: (expression: string) => void;
+    orgMappingField: IdpOrgMappingFieldBinding;
+    showAutoProvisionSwitch?: boolean;
+    roleMappingFieldIdPrefix?: string;
+    showFreeformRoleNamesHint?: boolean;
+    autoProvisionSwitchId?: string;
 };
 
 export default function AutoProvisionConfigWidget({
@@ -43,41 +62,95 @@ export default function AutoProvisionConfigWidget({
     mappingBuilderRules,
     onMappingBuilderRulesChange,
     rawExpression,
-    onRawExpressionChange
+    onRawExpressionChange,
+    orgMappingField,
+    showAutoProvisionSwitch = true,
+    roleMappingFieldIdPrefix = "org-idp-auto-provision",
+    showFreeformRoleNamesHint = false,
+    autoProvisionSwitchId = "auto-provision-toggle"
 }: AutoProvisionConfigWidgetProps) {
     const t = useTranslations();
     const { isPaidUser } = usePaidStatus();
 
+    const showMappingTabs = showAutoProvisionSwitch === false || autoProvision;
+
+    const orgMappingLabelKey =
+        orgMappingField.labelKey ?? "orgMappingPathOptional";
+
     return (
         <div className="space-y-4">
-            <div className="mb-4">
-                <SwitchInput
-                    id="auto-provision-toggle"
-                    label={t("idpAutoProvisionUsers")}
-                    defaultChecked={autoProvision}
-                    onCheckedChange={onAutoProvisionChange}
-                    disabled={!isPaidUser(tierMatrix.autoProvisioning)}
-                />
-            </div>
+            {showAutoProvisionSwitch && (
+                <div className="mb-4">
+                    <SwitchInput
+                        id={autoProvisionSwitchId}
+                        label={t("idpAutoProvisionUsers")}
+                        defaultChecked={autoProvision}
+                        onCheckedChange={onAutoProvisionChange}
+                        disabled={!isPaidUser(tierMatrix.autoProvisioning)}
+                    />
+                </div>
+            )}
 
-            {autoProvision && (
-                <RoleMappingConfigFields
-                    fieldIdPrefix="org-idp-auto-provision"
-                    showFreeformRoleNamesHint={false}
-                    roleMappingMode={roleMappingMode}
-                    onRoleMappingModeChange={onRoleMappingModeChange}
-                    roles={roles}
-                    fixedRoleNames={fixedRoleNames}
-                    onFixedRoleNamesChange={onFixedRoleNamesChange}
-                    mappingBuilderClaimPath={mappingBuilderClaimPath}
-                    onMappingBuilderClaimPathChange={
-                        onMappingBuilderClaimPathChange
-                    }
-                    mappingBuilderRules={mappingBuilderRules}
-                    onMappingBuilderRulesChange={onMappingBuilderRulesChange}
-                    rawExpression={rawExpression}
-                    onRawExpressionChange={onRawExpressionChange}
-                />
+            {showMappingTabs && (
+                <HorizontalTabs
+                    clientSide
+                    defaultTab={0}
+                    items={[
+                        { title: t("roleMapping"), href: "#" },
+                        { title: t("orgMapping"), href: "#" }
+                    ]}
+                >
+                    <div className="space-y-4 mt-4 p-1">
+                        <RoleMappingConfigFields
+                            fieldIdPrefix={roleMappingFieldIdPrefix}
+                            showFreeformRoleNamesHint={
+                                showFreeformRoleNamesHint
+                            }
+                            roleMappingMode={roleMappingMode}
+                            onRoleMappingModeChange={onRoleMappingModeChange}
+                            roles={roles}
+                            fixedRoleNames={fixedRoleNames}
+                            onFixedRoleNamesChange={onFixedRoleNamesChange}
+                            mappingBuilderClaimPath={mappingBuilderClaimPath}
+                            onMappingBuilderClaimPathChange={
+                                onMappingBuilderClaimPathChange
+                            }
+                            mappingBuilderRules={mappingBuilderRules}
+                            onMappingBuilderRulesChange={
+                                onMappingBuilderRulesChange
+                            }
+                            rawExpression={rawExpression}
+                            onRawExpressionChange={onRawExpressionChange}
+                        />
+                    </div>
+                    <div className="space-y-4 mt-4 p-1">
+                        <div className="space-y-4">
+                            <p className="text-sm text-muted-foreground">
+                                {t("defaultMappingsOrgDescription")}
+                            </p>
+                            <FormField
+                                control={
+                                    orgMappingField.control as Control<any>
+                                }
+                                name={orgMappingField.name}
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>
+                                            {t(orgMappingLabelKey)}
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                {...field}
+                                                placeholder="e.g., ends_with(email, '@organization.com')"
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+                    </div>
+                </HorizontalTabs>
             )}
         </div>
     );

src/components/RoleMappingConfigFields.tsx

@@ -79,10 +79,7 @@ export default function RoleMappingConfigFields({
     );
 
     useEffect(() => {
-        if (
-            !supportsMultipleRolesPerUser &&
-            mappingBuilderRules.length > 1
-        ) {
+        if (!supportsMultipleRolesPerUser && mappingBuilderRules.length > 1) {
             onMappingBuilderRulesChange([mappingBuilderRules[0]]);
         }
     }, [
@@ -95,11 +92,7 @@ export default function RoleMappingConfigFields({
         if (!supportsMultipleRolesPerUser && fixedRoleNames.length > 1) {
             onFixedRoleNamesChange([fixedRoleNames[0]]);
         }
-    }, [
-        supportsMultipleRolesPerUser,
-        fixedRoleNames,
-        onFixedRoleNamesChange
-    ]);
+    }, [supportsMultipleRolesPerUser, fixedRoleNames, onFixedRoleNamesChange]);
 
     const fixedRadioId = `${fieldIdPrefix}-fixed-roles-mode`;
     const builderRadioId = `${fieldIdPrefix}-mapping-builder-mode`;
@@ -116,7 +109,6 @@ export default function RoleMappingConfigFields({
     return (
         <div className="space-y-4">
             <div>
-                <FormLabel className="mb-2">{t("roleMapping")}</FormLabel>
                 <FormDescription className="mb-4">
                     {t("roleMappingDescription")}
                 </FormDescription>
@@ -272,7 +264,9 @@ export default function RoleMappingConfigFields({
                                 supportsMultipleRolesPerUser={
                                     supportsMultipleRolesPerUser
                                 }
-                                showRemoveButton={mappingBuilderShowsRemoveColumn}
+                                showRemoveButton={
+                                    mappingBuilderShowsRemoveColumn
+                                }
                                 rule={rule}
                                 onChange={(nextRule) => {
                                     const nextRules = mappingBuilderRules.map(
@@ -390,12 +384,10 @@ function BuilderRuleRow({
                             text: name
                         }))}
                         setTags={(nextTags) => {
-                            const prevRoleTags = rule.roleNames.map(
-                                (name) => ({
-                                    id: name,
-                                    text: name
-                                })
-                            );
+                            const prevRoleTags = rule.roleNames.map((name) => ({
+                                id: name,
+                                text: name
+                            }));
                             const next =
                                 typeof nextTags === "function"
                                     ? nextTags(prevRoleTags)