From 3985bb8a43fe11b4e6fcf9685501f005879cc348 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 14 Apr 2026 16:51:28 +0200
Subject: [PATCH] feat: wire claim mapping rules modal into OIDC config page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/Admin/OidcConfigPage.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/ui/src/pages/Admin/OidcConfigPage.tsx b/ui/src/pages/Admin/OidcConfigPage.tsx
index e871e812..da2b1dc0 100644
--- a/ui/src/pages/Admin/OidcConfigPage.tsx
+++ b/ui/src/pages/Admin/OidcConfigPage.tsx
@@ -6,6 +6,8 @@ import {
 import { useToast } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
 import { adminFetch } from '../../api/queries/admin/admin-api';
+import ClaimMappingRulesModal from './ClaimMappingRulesModal';
+import { useClaimMappingRules } from '../../api/queries/admin/claim-mappings';
 import styles from './OidcConfigPage.module.css';
 import sectionStyles from '../../styles/section-card.module.css';
 
@@ -50,6 +52,8 @@ export default function OidcConfigPage() {
   const [saving, setSaving] = useState(false);
   const [testing, setTesting] = useState(false);
   const { toast } = useToast();
+  const [rulesModalOpen, setRulesModalOpen] = useState(false);
+  const { data: claimRules = [] } = useClaimMappingRules();
 
   useEffect(() => {
     adminFetch<Partial<OidcFormData> & { configured?: boolean }>('/oidc')
@@ -271,6 +275,22 @@ export default function OidcConfigPage() {
             disabled={!editing}
           />
         </FormField>
+        <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--border)' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <div>
+              <span style={{ fontSize: 13, color: 'var(--text-secondary, var(--text-muted))' }}>Advanced Rules</span>
+              {claimRules.length > 0 && (
+                <span style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 8 }}>
+                  {claimRules.length} active rule{claimRules.length !== 1 ? 's' : ''}
+                </span>
+              )}
+            </div>
+            <Button size="sm" variant="secondary" onClick={() => setRulesModalOpen(true)}>
+              Edit Rules
+            </Button>
+          </div>
+        </div>
+        <ClaimMappingRulesModal open={rulesModalOpen} onClose={() => setRulesModalOpen(false)} />
       </section>
 
       <section className={sectionStyles.section}>