feat: add computedAppTheme in user preferences

Author: eshankvaish

src/Shared/Providers/ThemeProvider/ThemeProvider.tsx

@@ -50,7 +50,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
     }
 
     const handleColorSchemeChange = () => {
-        handleThemePreferenceChange(THEME_PREFERENCE_MAP.auto)
+        handleThemePreferenceChange(THEME_PREFERENCE_MAP.auto, showThemeSwitcherDialog)
     }
 
     useEffect(() => {
@@ -73,7 +73,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         return () => {
             matchQuery.removeEventListener('change', handleColorSchemeChange)
         }
-    }, [themeConfig.themePreference])
+    }, [themeConfig.themePreference, showThemeSwitcherDialog])
 
     const handleThemeSwitcherDialogVisibilityChange = (isVisible: boolean) => {
         setShowThemeSwitcherDialog(isVisible)

src/Shared/Services/common.service.ts

@@ -15,6 +15,7 @@
  */
 
 import { ViewIsPipelineRBACConfiguredRadioTabs } from '@Shared/types'
+import { THEME_PREFERENCE_MAP } from '@Shared/Providers/ThemeProvider/types'
 import { get, getUrlWithSearchParams, post, ROUTES, showError } from '../../Common'
 import { USER_PREFERENCES_ATTRIBUTE_KEY } from './constants'
 import {
@@ -23,7 +24,8 @@ import {
     GetResourceApiUrlProps,
     GetUserPreferencesParsedDTO,
     GetUserPreferencesQueryParamsType,
-    UpdateUserPreferencesParsedValueType,
+    UpdatedUserPreferencesType,
+    UserPreferencesPayloadValueType,
     UpdateUserPreferencesPayloadType,
     UserPreferencesType,
 } from './types'
@@ -58,20 +60,25 @@ export const getUserPreferences = async (): Promise<UserPreferencesType> => {
 
     return {
         pipelineRBACViewSelectedTab,
-        themePreference: parsedResult.themePreference,
+        themePreference:
+            parsedResult.computedAppTheme === 'system-dark' || parsedResult.computedAppTheme === 'system-light'
+                ? THEME_PREFERENCE_MAP.auto
+                : parsedResult.computedAppTheme,
     }
 }
 
 export const updateUserPreferences = async (
-    updatedUserPreferences: UserPreferencesType,
+    updatedUserPreferences: UpdatedUserPreferencesType,
     shouldThrowError: boolean = false,
 ): Promise<boolean> => {
     try {
-        const value: UpdateUserPreferencesParsedValueType = {
+        const { themePreference, appTheme } = updatedUserPreferences
+
+        const value: UserPreferencesPayloadValueType = {
             viewPermittedEnvOnly:
                 updatedUserPreferences.pipelineRBACViewSelectedTab ===
                 ViewIsPipelineRBACConfiguredRadioTabs.ACCESS_ONLY,
-            themePreference: updatedUserPreferences.themePreference,
+            computedAppTheme: themePreference === THEME_PREFERENCE_MAP.auto ? `system-${appTheme}` : appTheme,
         }
 
         const payload: UpdateUserPreferencesPayloadType = {

src/Shared/Services/types.ts

@@ -15,7 +15,7 @@
  */
 
 import { MainContext } from '@Shared/Providers'
-import { ThemePreferenceType } from '@Shared/Providers/ThemeProvider/types'
+import { AppThemeType, ThemeConfigType, ThemePreferenceType } from '@Shared/Providers/ThemeProvider/types'
 import { getUrlWithSearchParams } from '../../Common'
 import { PolicyKindType, ResourceKindType, ResourceVersionType, ViewIsPipelineRBACConfiguredRadioTabs } from '../types'
 import { USER_PREFERENCES_ATTRIBUTE_KEY } from './constants'
@@ -63,18 +63,26 @@ 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
+     * Computed app theme for the user
+     *
+     * Could be 'light' | 'dark' | 'system-light' | 'system-dark'
      */
-    themePreference: ThemePreferenceType | null
+    computedAppTheme: AppThemeType | `system-${AppThemeType}`
 }
 
-export interface UpdateUserPreferencesParsedValueType extends GetUserPreferencesParsedDTO {}
+export interface UserPreferencesPayloadValueType extends GetUserPreferencesParsedDTO {}
 
 export interface UpdateUserPreferencesPayloadType extends Pick<GetUserPreferencesQueryParamsType, 'key'> {
     value: string
 }
 
-export interface UserPreferencesType extends Pick<GetUserPreferencesParsedDTO, 'themePreference'> {
+export interface UserPreferencesType {
+    /**
+     * Preferred theme for the user
+     * If null, would forcibly show user theme switcher dialog for user to select
+     */
+    themePreference: ThemePreferenceType | null
     pipelineRBACViewSelectedTab: ViewIsPipelineRBACConfiguredRadioTabs
 }
+
+export interface UpdatedUserPreferencesType extends UserPreferencesType, Pick<ThemeConfigType, 'appTheme'> {}