fixed issue related to dark mode (#30510)

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/admin-ui/src/components/dropdown-panel/DropdownPanel.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { Icon } from "@patternfly/react-core";
 import { CaretDownIcon } from "@patternfly/react-icons";
+import { mediaQuery } from "../../util";
 import "./dropdown-panel.css";
 
 type DropdownPanelProps = {
@@ -63,7 +64,15 @@ const DropdownPanel: React.FC<DropdownPanelProps> = ({
         </Icon>
       </button>
       {searchDropdownOpen && (
-        <div className="kc-dropdown-panel-content">{children}</div>
+        <div
+          className={
+            mediaQuery?.matches
+              ? "kc-dropdown-panel-content dark-mode"
+              : "kc-dropdown-panel-content light-mode"
+          }
+        >
+          {children}
+        </div>
       )}
     </span>
   );

js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css

@@ -1,9 +1,8 @@
 .kc-dropdown-panel {
   background-color: transparent;
-  padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm)
+  padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--form-element)
-    var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm);
+    var(--pf-v5-global--spacer--sm);
-  border-color: var(--pf-v5-global--BorderColor--300)
+  border-color: var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
-    var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--200)
     var(--pf-v5-global--BorderColor--300);
   border-width: var(--pf-v5-global--BorderWidth--sm);
   border-style: solid;
@@ -36,3 +35,11 @@
   padding: 0.75rem;
   z-index: 1;
 }
+
+.light-mode {
+  background-color: var(--pf-v5-global--Color--light-100);
+}
+
+.dark-mode {
+  background-color: var(--pf-v5-global--BackgroundColor--300);
+}

js/apps/admin-ui/src/components/users/UserDataTableAttributeSearchForm.tsx

@@ -162,7 +162,9 @@ export function UserDataTableAttributeSearchForm({
                 setSelectAttributeKeyOpen(false);
                 setValue("name", option.name!);
               }}
-            />
+            >
+              {label(t, option.displayName!, option.name)}
+            </SelectOption>
           ))}
         </KeycloakSelect>
       );

js/apps/admin-ui/src/events/AdminEvents.tsx

@@ -333,7 +333,9 @@ export const AdminEvents = () => {
                             }
                           >
                             {resourceTypes?.map((option) => (
-                              <SelectOption key={option} value={option} />
+                              <SelectOption key={option} value={option}>
+                                {option}
+                              </SelectOption>
                             ))}
                           </KeycloakSelect>
                         )}
@@ -399,7 +401,9 @@ export const AdminEvents = () => {
                               <SelectOption
                                 key={option.toString()}
                                 value={option}
-                              />
+                              >
+                                {option}
+                              </SelectOption>
                             ))}
                           </KeycloakSelect>
                         )}

js/apps/admin-ui/src/realm-settings/ThemesTab.tsx

@@ -163,7 +163,7 @@ export const RealmSettingsThemesTab = ({
                 isOpen={adminUIThemeOpen}
                 placeholderText={t("selectATheme")}
                 data-testid="select-admin-theme"
-                aria-label="selectAdminTheme"
+                aria-label={t("selectAdminTheme")}
               >
                 {themeTypes.admin
                   .filter((theme) => theme.name !== "base")

js/apps/admin-ui/src/realm-settings/localization/EffectiveMessageBundles.tsx

@@ -229,6 +229,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="theme"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -252,7 +253,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectThemesOpen}
-                      aria-labelledby={t("theme")}
+                      aria-label={t("selectTheme")}
                       chipGroupComponent={
                         <ChipGroup>
                           <Chip
@@ -270,14 +271,16 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="theme_placeholder"
-                          value="Select theme"
                           label={t("selectTheme")}
-                          className="kc__effective_message_bundles_search_theme__placeholder"
                           isDisabled
-                        />,
+                        >
+                          {t("selectTheme")}
+                        </SelectOption>,
                       ].concat(
                         themeNames.map((option) => (
-                          <SelectOption key={option} value={option} />
+                          <SelectOption key={option} value={option}>
+                            {option}
+                          </SelectOption>
                         )),
                       )}
                     </KeycloakSelect>
@@ -292,6 +295,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="themeType"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -315,7 +319,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectThemeTypeOpen}
-                      aria-labelledby={t("themeType")}
+                      aria-label={t("selectThemeType")}
                       chipGroupComponent={
                         <ChipGroup>
                           <Chip
@@ -333,14 +337,16 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="themeType_placeholder"
-                          value="Select theme type"
                           label={t("selectThemeType")}
-                          className="pf-m-plain"
                           isDisabled
-                        />,
+                        >
+                          {t("selectThemeType")}
+                        </SelectOption>,
                       ].concat(
                         themeTypes.map((option) => (
-                          <SelectOption key={option} value={option} />
+                          <SelectOption key={option} value={option}>
+                            {option}
+                          </SelectOption>
                         )),
                       )}
                     </KeycloakSelect>
@@ -351,6 +357,7 @@ export const EffectiveMessageBundles = ({
                 <Controller
                   name="locale"
                   control={control}
+                  defaultValue=""
                   rules={{
                     validate: (value) => (value || "").length > 0,
                   }}
@@ -374,7 +381,7 @@ export const EffectiveMessageBundles = ({
                         field.onChange("");
                       }}
                       isOpen={selectLanguageOpen}
-                      aria-labelledby="language"
+                      aria-label={t("selectLanguage")}
                       chipGroupComponent={
                         <ChipGroup>
                           {field.value ? (
@@ -397,11 +404,11 @@ export const EffectiveMessageBundles = ({
                       {[
                         <SelectOption
                           key="language_placeholder"
-                          value="Select language"
                           label={t("selectLanguage")}
-                          className="pf-m-plain"
                           isDisabled
-                        />,
+                        >
+                          {t("selectLanguage")}
+                        </SelectOption>,
                       ].concat(
                         combinedLocales.map((option) => (
                           <SelectOption key={option} value={option}>

js/apps/admin-ui/src/util.ts

@@ -83,9 +83,10 @@ export function convertAttributeNameToForm<T>(
   name: string,
 ): PathValue<T, Path<T>> {
   const index = name.indexOf(".");
-  return `${name.substring(0, index)}.${beerify(
+  return `${name.substring(0, index)}.${beerify(name.substring(index + 1))}` as PathValue<
-    name.substring(index + 1),
+    T,
-  )}` as PathValue<T, Path<T>>;
+    Path<T>
+  >;
 }
 
 export const beerify = <T extends string>(name: T) =>
@@ -182,7 +183,7 @@ export const localeToDisplayName = (locale: string, displayLocale: string) => {
 };
 
 const DARK_MODE_CLASS = "pf-v5-theme-dark";
-const mediaQuery =
+export const mediaQuery =
   window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
 
 updateDarkMode(mediaQuery?.matches);