feat: enhance theme management with user preferences and dialog support

Author: AbhishekA1509

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -19,7 +19,8 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { noop, stopPropagation, useRegisterShortcut, UseRegisterShortcutProvider } from '@Common/index'
 import { ComponentSizeType } from '@Shared/constants'
 import { getUniqueId } from '@Shared/Helpers'
-import { ConfirmationModalBodyProps, ConfirmationModalProps } from './types'
+import { getComponentSpecificThemeClass } from '@Shared/index'
+import { ConfirmationModalBodyProps, ConfirmationModalProps, ConfirmationModalVariantType } from './types'
 import { getPrimaryButtonStyleFromVariant, getConfirmationLabel, getIconFromVariant } from './utils'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Backdrop } from '../Backdrop'
@@ -37,6 +38,7 @@ const ConfirmationModalBody = ({
     children,
     handleClose,
     shouldCloseOnEscape = true,
+    overriddenTheme,
 }: ConfirmationModalBodyProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -48,6 +50,7 @@ const ConfirmationModalBody = ({
     const { primaryButtonConfig, secondaryButtonConfig } = buttonConfig
 
     const RenderIcon = Icon ?? getIconFromVariant(variant)
+    const hideIcon = variant === ConfirmationModalVariantType.custom && !Icon
 
     const disablePrimaryButton: boolean =
         ('disabled' in primaryButtonConfig && primaryButtonConfig.disabled) ||
@@ -80,16 +83,18 @@ const ConfirmationModalBody = ({
     return (
         <Backdrop onEscape={shouldCloseOnEscape ? handleCloseWrapper : noop}>
             <motion.div
-                className="confirmation-modal border__secondary flexbox-col br-8 bg__primary dc__m-auto mt-40 w-400"
+                className={`${overriddenTheme ? getComponentSpecificThemeClass(overriddenTheme) : ''} confirmation-modal border__secondary flexbox-col br-8 bg__primary dc__m-auto mt-40 w-400`}
                 exit={{ y: 100, opacity: 0, scale: 0.75, transition: { duration: 0.35 } }}
                 initial={{ y: 100, opacity: 0, scale: 0.75 }}
                 animate={{ y: 0, opacity: 1, scale: 1 }}
                 onClick={stopPropagation}
             >
                 <div className="flexbox-col dc__gap-16 p-20">
-                    {cloneElement(RenderIcon, {
-                        className: `${RenderIcon.props?.className ?? ''} icon-dim-48 dc__no-shrink`,
-                    })}
+                    {hideIcon
+                        ? null
+                        : cloneElement(RenderIcon, {
+                              className: `${RenderIcon.props?.className ?? ''} icon-dim-48 dc__no-shrink`,
+                          })}
 
                     <div className="flexbox-col dc__gap-8">
                         <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>

src/Shared/Components/ConfirmationModal/types.ts

@@ -23,6 +23,7 @@ import {
     SetStateAction,
     SyntheticEvent,
 } from 'react'
+import { AppThemeType } from '@Shared/index'
 import { ButtonProps } from '../Button'
 
 export enum ConfirmationModalVariantType {
@@ -64,7 +65,7 @@ type ButtonConfigAndVariantType<isConfig extends boolean> =
       }
     | {
           variant: ConfirmationModalVariantType.custom
-          Icon: ReactElement
+          Icon?: ReactElement
           buttonConfig: ButtonConfig<isConfig, true>
       }
 
@@ -94,6 +95,10 @@ export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWith
      * Configuration object for confirmation behavior.
      */
     confirmationConfig?: ConfirmationConfigType
+    /**
+     * If provided, the modal will use the specified theme instead of using the theme set by theme provider.
+     */
+    overriddenTheme?: AppThemeType
 }> &
     ButtonConfigAndVariantType<isConfig> &
     (isConfig extends false

src/Shared/Components/ThemeSwitcher/ThemeSwitcher.component.tsx

@@ -15,56 +15,29 @@
  */
 
 import { useTheme } from '@Shared/Providers'
-import { THEME_PREFERENCE_MAP, ThemePreferenceType } from '@Shared/Providers/ThemeProvider/types'
-import { SegmentedControl, SegmentedControlProps, SegmentedControlVariant } from '@Common/SegmentedControl'
-import { ChangeEvent, useMemo } from 'react'
-import { stopPropagation } from '@Common/Helper'
-import { ComponentSizeType } from '@Shared/constants'
-import { THEME_PREFERENCE_TO_ICON_MAP } from './constants'
 import { ThemeSwitcherProps } from './types'
 
 const ThemeSwitcher = ({ onChange }: ThemeSwitcherProps) => {
-    const { themePreference, handleThemePreferenceChange } = useTheme()
-
-    const { tabs, tooltips } = useMemo<Required<Pick<SegmentedControlProps, 'tabs' | 'tooltips'>>>(() => {
-        const availableThemePreferences = Object.values(THEME_PREFERENCE_MAP)
-
-        return {
-            tabs: availableThemePreferences.map((value) => ({
-                label: (
-                    <span className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">
-                        {THEME_PREFERENCE_TO_ICON_MAP[value].icon}
-                    </span>
-                ),
-                value,
-            })),
-            tooltips: availableThemePreferences.map((value) => THEME_PREFERENCE_TO_ICON_MAP[value].tippyContent),
-        }
-    }, [])
+    const { handleThemeSwitcherDialogVisibilityChange } = useTheme()
 
     if (!window._env_.FEATURE_EXPERIMENTAL_THEMING_ENABLE) {
         return null
     }
 
-    const handleThemeSwitch = (e: ChangeEvent<HTMLInputElement>) => {
-        const updatedThemePreference = e.target.value as ThemePreferenceType
-        handleThemePreferenceChange(updatedThemePreference)
+    const handleShowThemeSwitcherDialog = () => {
+        handleThemeSwitcherDialogVisibilityChange(true)
         onChange()
     }
 
     return (
-        <div className="flex dc__content-space dc__gap-8 px-12 py-6" onClick={stopPropagation}>
-            <p className="m-0 fs-13 fw-4 lh-20 cn-9">Theme</p>
-            <SegmentedControl
-                initialTab={themePreference}
-                name="theme-preference-selector"
-                onChange={handleThemeSwitch}
-                tabs={tabs}
-                tooltips={tooltips}
-                size={ComponentSizeType.medium}
-                variant={SegmentedControlVariant.GRAY_ON_WHITE}
-            />
-        </div>
+        <button
+            type="button"
+            data-testid="open-theme-switcher-dialog"
+            className="dc__transparent fs-13 fw-4 lh-20 cn-9 dc__hover-n50 w-100"
+            onClick={handleShowThemeSwitcherDialog}
+        >
+            Theme
+        </button>
     )
 }
 

src/Shared/Components/ThemeSwitcher/constants.tsx

@@ -27,6 +27,7 @@ import { DARK_COLOR_SCHEME_MATCH_QUERY } from './constants'
 const themeContext = createContext<ThemeContextType>(null)
 
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+    const [showThemeSwitcherDialog, setShowThemeSwitcherDialog] = useState<boolean>(false)
     const [themeConfig, setThemeConfig] = useState<ThemeConfigType>(getThemeConfigFromLocalStorage)
 
     const handleThemePreferenceChange: ThemeContextType['handleThemePreferenceChange'] = (updatedThemePreference) => {
@@ -68,12 +69,18 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         }
     }, [themeConfig.themePreference])
 
+    const handleThemeSwitcherDialogVisibilityChange = (isVisible: boolean) => {
+        setShowThemeSwitcherDialog(isVisible)
+    }
+
     const value = useMemo<ThemeContextType>(
         () => ({
             ...themeConfig,
+            showThemeSwitcherDialog,
+            handleThemeSwitcherDialogVisibilityChange,
             handleThemePreferenceChange,
         }),
-        [themeConfig],
+        [themeConfig, showThemeSwitcherDialog],
     )
 
     return <themeContext.Provider value={value}>{children}</themeContext.Provider>

src/Shared/Providers/ThemeProvider/ThemeProvider.tsx

@@ -16,4 +16,4 @@
 
 export * from './ThemeProvider'
 export { AppThemeType } from './types'
-export { getComponentSpecificThemeClass } from './utils'
+export { getComponentSpecificThemeClass, getAppThemeForAutoPreference } from './utils'

src/Shared/Providers/ThemeProvider/index.ts

@@ -40,12 +40,14 @@ export interface ThemeConfigType {
      *
      * @default THEME_PREFERENCE_MAP.auto
      *
-     * Note: This shouldn't be consumed other than in ThemeSwitcher component
+     * Note: This shouldn't be consumed other than in ThemeSwitcherDialog component
      */
     themePreference: ThemePreferenceType
 }
 
 export interface ThemeContextType extends ThemeConfigType {
+    showThemeSwitcherDialog: boolean
+    handleThemeSwitcherDialogVisibilityChange: (isVisible: boolean) => void
     handleThemePreferenceChange: (updatedThemePreference: ThemePreferenceType) => void
 }
 

src/Shared/Providers/ThemeProvider/types.ts

@@ -58,6 +58,7 @@ export const getUserPreferences = async (): Promise<UserPreferencesType> => {
 
     return {
         pipelineRBACViewSelectedTab,
+        themePreference: parsedResult.themePreference,
     }
 }
 
@@ -70,6 +71,7 @@ export const updateUserPreferences = async (
             viewPermittedEnvOnly:
                 updatedUserPreferences.pipelineRBACViewSelectedTab ===
                 ViewIsPipelineRBACConfiguredRadioTabs.ACCESS_ONLY,
+            themePreference: updatedUserPreferences.themePreference,
         }
 
         const payload: UpdateUserPreferencesPayloadType = {

src/Shared/Services/common.service.ts

@@ -15,6 +15,7 @@
  */
 
 import { MainContext } from '@Shared/Providers'
+import { ThemePreferenceType } from '@Shared/Providers/ThemeProvider/types'
 import { getUrlWithSearchParams } from '../../Common'
 import { PolicyKindType, ResourceKindType, ResourceVersionType, ViewIsPipelineRBACConfiguredRadioTabs } from '../types'
 import { USER_PREFERENCES_ATTRIBUTE_KEY } from './constants'
@@ -61,6 +62,11 @@ export interface GetUserPreferencesQueryParamsType {
 
 export interface GetUserPreferencesParsedDTO {
     viewPermittedEnvOnly?: boolean
+    /**
+     * Preferred theme for the user
+     * If null, would forcibly show user theme switcher dialog for user to select
+     */
+    themePreference: ThemePreferenceType | null
 }
 
 export interface UpdateUserPreferencesParsedValueType extends GetUserPreferencesParsedDTO {}
@@ -69,6 +75,6 @@ export interface UpdateUserPreferencesPayloadType extends Pick<GetUserPreference
     value: string
 }
 
-export interface UserPreferencesType {
+export interface UserPreferencesType extends Pick<GetUserPreferencesParsedDTO, 'themePreference'> {
     pipelineRBACViewSelectedTab: ViewIsPipelineRBACConfiguredRadioTabs
 }