Merge pull request #615 from devtron-labs/feat/theme-dialog

feat: add theme dialog prompt for first time and migrate existing theme switcher to dialog with some minor css enhancement in logout card and page header.

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.8",
+    "version": "1.8.9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -19,7 +19,7 @@ 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 { ConfirmationModalBodyProps, ConfirmationModalProps, ConfirmationModalVariantType } from './types'
 import { getPrimaryButtonStyleFromVariant, getConfirmationLabel, getIconFromVariant } from './utils'
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Backdrop } from '../Backdrop'
@@ -37,6 +37,7 @@ const ConfirmationModalBody = ({
     children,
     handleClose,
     shouldCloseOnEscape = true,
+    isLandscapeView = false,
 }: ConfirmationModalBodyProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -48,6 +49,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,18 +82,20 @@ 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={`${isLandscapeView ? 'w-500' : 'w-400'} 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">
+                    <div className={`flexbox-col ${isLandscapeView ? '' : 'dc__gap-8'}`}>
                         <span className="cn-9 fs-16 fw-6 lh-24 dc__word-break">{title}</span>
 
                         {typeof subtitle === 'string' ? (

src/Assets/IconV2/ic-logout.svg

@@ -64,7 +64,7 @@ type ButtonConfigAndVariantType<isConfig extends boolean> =
       }
     | {
           variant: ConfirmationModalVariantType.custom
-          Icon: ReactElement
+          Icon?: ReactElement
           buttonConfig: ButtonConfig<isConfig, true>
       }
 
@@ -94,6 +94,11 @@ export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWith
      * Configuration object for confirmation behavior.
      */
     confirmationConfig?: ConfirmationConfigType
+    /**
+     * @default false
+     * @deprecated Used to extend the width to 500px and remove gap between title and subTitle.
+     */
+    isLandscapeView?: boolean
 }> &
     ButtonConfigAndVariantType<isConfig> &
     (isConfig extends false

src/Assets/IconV2/ic-medium-paintbucket.svg

@@ -18,19 +18,20 @@ import { useEffect, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import './pageHeader.css'
 import ReactGA from 'react-ga4'
-import { getRandomColor } from '../../../Common'
+import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
+import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
+import { ReactComponent as Close } from '@Icons/ic-close.svg'
+import { ReactComponent as Question } from '@Icons/ic-help-outline.svg'
+import { getAlphabetIcon, TippyCustomized, TippyTheme } from '../../../Common'
 import LogoutCard from '../LogoutCard'
 import { setActionWithExpiry, handlePostHogEventUpdate } from './utils'
 import { InstallationType, ServerInfo, PageHeaderType } from './types'
 import { getServerInfo } from './service'
 import GettingStartedCard from '../GettingStartedCard/GettingStarted'
 import { POSTHOG_EVENT_ONBOARDING, MAX_LOGIN_COUNT } from '../../../Common/Constants'
 import HelpNav from './HelpNav'
-import { ReactComponent as Question } from '../../../Assets/Icon/ic-help-outline.svg'
-import { ReactComponent as Close } from '../../../Assets/Icon/ic-close.svg'
-import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import AnnouncementBanner from '../AnnouncementBanner/AnnouncementBanner'
-import { useMainContext, useUserEmail } from '../../Providers'
+import { useMainContext, useTheme, useUserEmail } from '../../Providers'
 import { InfoIconTippy } from '../InfoIconTippy'
 import { IframePromoButton } from './IframePromoButton'
 
@@ -50,6 +51,8 @@ const PageHeader = ({
 }: PageHeaderType) => {
     const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard, setGettingStartedClicked } =
         useMainContext()
+    const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme()
+
     const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } =
         tippyProps || {}
     const [showHelpCard, setShowHelpCard] = useState(false)
@@ -120,6 +123,17 @@ const PageHeader = ({
         })
     }
 
+    const handleCloseSwitchThemeLocationTippyChange = () => {
+        handleShowSwitchThemeLocationTippyChange(false)
+    }
+
+    const renderThemePreferenceLocationTippyContent = () => (
+        <div className="px-16 pb-16 flexbox-col dc__gap-4">
+            <h6 className="m-0 fs-14 fw-6 lh-20">Theme Preference</h6>
+            <p className="m-0 fs-13 fw-4 lh-20">You can change your theme preference here</p>
+        </div>
+    )
+
     const renderLogoutHelpSection = () => (
         <>
             <div className="flex left cursor dc__gap-8" onClick={onClickHelp}>
@@ -129,20 +143,39 @@ const PageHeader = ({
                 <span className="fs-13 cn-9" data-testid="go-to-get-started">
                     Help
                 </span>
-                <DropDownIcon
+                <ICCaretDown
                     style={{ ['--rotateBy' as any]: `${180 * Number(showHelpCard)}deg` }}
-                    className="fcn-9 icon-dim-20 rotate pointer"
+                    className="scn-7 icon-dim-16 rotate pointer"
                 />
             </div>
             {!window._env_.K8S_CLIENT && (
-                <div
-                    className="logout-card__initial cursor fs-13 icon-dim-24 flex logout-card__initial--nav"
-                    onClick={onClickLogoutButton}
-                    style={{ backgroundColor: getRandomColor(email) }}
-                    data-testid="profile-button"
+                <TippyCustomized
+                    theme={TippyTheme.black}
+                    className="w-250"
+                    placement="bottom"
+                    visible={showSwitchThemeLocationTippy}
+                    Icon={ICMediumPaintBucket}
+                    iconClass="icon-dim-48 dc__no-shrink"
+                    iconSize={48}
+                    additionalContent={renderThemePreferenceLocationTippyContent()}
+                    showCloseButton
+                    trigger="manual"
+                    interactive
+                    arrow
+                    onClose={handleCloseSwitchThemeLocationTippyChange}
                 >
-                    {email[0]}
-                </div>
+                    <button
+                        type="button"
+                        data-testid="profile-button"
+                        onClick={onClickLogoutButton}
+                        className="dc__transparent flex p-4 dc__gap-4 br-18 bg__secondary border__secondary"
+                    >
+                        {getAlphabetIcon(email, 'm-0-imp')}
+                        <ICCaretDown
+                            className={`scn-7 icon-dim-16 ${showLogOutCard ? 'dc__flip-180' : ''} dc__transition--transform`}
+                        />
+                    </button>
+                </TippyCustomized>
             )}
         </>
     )
@@ -255,7 +288,7 @@ const PageHeader = ({
                 )}
             {showLogOutCard && (
                 <LogoutCard
-                    className="logout-card__more-option"
+                    className="logout-card__more-option mt-8"
                     userFirstLetter={email}
                     setShowLogOutCard={setShowLogOutCard}
                     showLogOutCard={showLogOutCard}

src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx

@@ -44,6 +44,8 @@ import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
 import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-logo.svg'
+import { ReactComponent as ICLogout } from '@IconsV2/ic-logout.svg'
+import { ReactComponent as ICMediumPaintbucket } from '@IconsV2/ic-medium-paintbucket.svg'
 import { ReactComponent as ICMicrosoft } from '@IconsV2/ic-microsoft.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
 import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
@@ -113,6 +115,8 @@ export const iconMap = {
     'ic-k8s-job': ICK8sJob,
     'ic-ldap': ICLdap,
     'ic-login-devtron-logo': ICLoginDevtronLogo,
+    'ic-logout': ICLogout,
+    'ic-medium-paintbucket': ICMediumPaintbucket,
     'ic-microsoft': ICMicrosoft,
     'ic-missing': ICMissing,
     'ic-monitoring': ICMonitoring,

src/Shared/Components/ConfirmationModal/types.ts

@@ -19,6 +19,7 @@ import { useHistory } from 'react-router-dom'
 import { useMainContext } from '@Shared/Providers'
 import { getRandomColor, stopPropagation } from '../../Common'
 import { ThemeSwitcher } from './ThemeSwitcher'
+import { Icon } from './Icon'
 
 interface LogoutCardType {
     className: string
@@ -27,6 +28,9 @@ interface LogoutCardType {
     showLogOutCard: boolean
 }
 
+export const LOGOUT_CARD_BASE_BUTTON_CLASS =
+    'dc__unset-button-styles dc__content-space px-12 py-6 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'
+
 const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutCard }: LogoutCardType) => {
     const history = useHistory()
     const { viewIsPipelineRBACConfiguredNode } = useMainContext()
@@ -55,18 +59,19 @@ const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutC
                         {userFirstLetter[0]}
                     </p>
                 </div>
-                <div className="dc__border-top-n1 py-4">
+                <div className="dc__border-top-n1 py-4 px-4 flexbox-col">
                     <ThemeSwitcher onChange={toggleLogoutCard} />
 
                     {viewIsPipelineRBACConfiguredNode}
 
                     <button
-                        className="dc__unset-button-styles px-12 py-6 fs-13 fw-4 lh-20 cr-5 dc__hover-n50 cursor w-100 flex left"
+                        className={`${LOGOUT_CARD_BASE_BUTTON_CLASS} cr-5 dc__hover-r50`}
                         data-testid="logout-button"
                         onClick={onLogout}
                         type="button"
                     >
                         Logout
+                        <Icon name="ic-logout" color="R500" />
                     </button>
                 </div>
             </div>

src/Shared/Components/Header/PageHeader.tsx

@@ -14,57 +14,36 @@
  * limitations under the License.
  */
 
-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 { getThemePreferenceText, useTheme } from '@Shared/Providers'
+import { ReactComponent as ICCaretLeftSmall } from '@Icons/ic-caret-left-small.svg'
 import { ThemeSwitcherProps } from './types'
+import { LOGOUT_CARD_BASE_BUTTON_CLASS } from '../LogoutCard'
 
 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, themePreference } = 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={`${LOGOUT_CARD_BASE_BUTTON_CLASS} dc__hover-n50`}
+            onClick={handleShowThemeSwitcherDialog}
+        >
+            Theme
+            <div className="flexbox dc__gap-4 dc__align-items-center">
+                <span className="cn-7 fs-13 fw-4 lh-20">{getThemePreferenceText(themePreference)}</span>
+                <ICCaretLeftSmall className="dc__flip-180 icon-16 dc__no-shrink scn-7" />
+            </div>
+        </button>
     )
 }