From 9a6d6767d123eb6cd2f14631b98288e3d7a7d53c Mon Sep 17 00:00:00 2001
From: Tim Jacomb <timjacomb1@gmail.com>
Date: Tue, 19 Dec 2023 15:12:13 +0000
Subject: [PATCH] Add theme manager integration

---
 src/main/frontend/index.ts                    | 24 +++++++++++++++++++
 .../config.jelly                              |  8 ++++++-
 src/main/webapp/css/azure-ad.css              |  5 ----
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/main/frontend/index.ts b/src/main/frontend/index.ts
index e0a3ff8d..edc50c6a 100644
--- a/src/main/frontend/index.ts
+++ b/src/main/frontend/index.ts
@@ -1,7 +1,31 @@
 import { Providers } from '@microsoft/mgt-element/dist/es6';
 import { ProxyProvider } from '@microsoft/mgt-proxy-provider/dist/es6/ProxyProvider';
 import '@microsoft/mgt-components';
+import { applyTheme } from "@microsoft/mgt-components";
 
+document.addEventListener('DOMContentLoaded', () => {
+    const peoplePicker = document.querySelector(".entra-id-people-picker");
+
+    const anyWindow = window as any;
+
+    function getTheme() {
+        return anyWindow.getThemeManagerProperty('entra-id', 'theme')
+    }
+
+    if (anyWindow.getThemeManagerProperty) {
+        const peopleManagerTheme = getTheme();
+        if (peopleManagerTheme) {
+            const setTheme = () => applyTheme(getTheme(), peoplePicker as HTMLElement);
+            setTheme();
+
+            if (anyWindow.isSystemRespectingTheme) {
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                    setTheme()
+                });
+            }
+        }
+    }
+})
 const currentUrl = window.location.href
 
 // GraphProxy is either a root action or at the job level
diff --git a/src/main/resources/com/microsoft/jenkins/azuread/AzureAdMatrixAuthorizationStrategy/config.jelly b/src/main/resources/com/microsoft/jenkins/azuread/AzureAdMatrixAuthorizationStrategy/config.jelly
index 2bba1033..185b3553 100644
--- a/src/main/resources/com/microsoft/jenkins/azuread/AzureAdMatrixAuthorizationStrategy/config.jelly
+++ b/src/main/resources/com/microsoft/jenkins/azuread/AzureAdMatrixAuthorizationStrategy/config.jelly
@@ -203,7 +203,13 @@ THE SOFTWARE.
           </j:when>
           <j:otherwise>
             <div class="mgmt-people-picker-wrapper">
-              <mgt-people-picker type="any" user-type="any" group-type="any" show-max="10" />
+              <mgt-people-picker
+                      class="entra-id-people-picker"
+                      type="any"
+                      user-type="any"
+                      group-type="any"
+                      show-max="10"
+              />
             </div>
             <div class="no-graph-integration-wrapper">
               <button type="button" class="jenkins-button azure-ad-add-button" id="${id}button"
diff --git a/src/main/webapp/css/azure-ad.css b/src/main/webapp/css/azure-ad.css
index 4d3eeef8..c1ddab35 100644
--- a/src/main/webapp/css/azure-ad.css
+++ b/src/main/webapp/css/azure-ad.css
@@ -2,11 +2,6 @@ td.azure-ad-controls {
     text-align: left;
 }
 
-.mgmt-people-picker-wrapper {
-    border: 1px solid var(--input-border);
-    border-radius: 3px
-}
-
 .no-graph-integration-wrapper {
     margin-top: 1rem;
 }