feat: derive open tab from sidePanelConfig

Author: Elessar1802

src/components/common/SidePanel/SidePanel.tsx

@@ -13,7 +13,7 @@ import {
 
 import { SIDE_PANEL_ASIDE_DRAG_HANDLE, SIDE_PANEL_MAX_ASIDE_WIDTH, SIDE_PANEL_MIN_ASIDE_WIDTH } from './constants'
 import { SidePanelContent } from './SidePanelContent'
-import { SidePanelProps, SidePanelTab } from './types'
+import { SidePanelProps } from './types'
 
 import './SidePanel.scss'
 
@@ -25,7 +25,8 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
     const { appTheme } = useTheme()
     const { sidePanelConfig, setSidePanelConfig } = useMainContext()
 
-    const { open } = sidePanelConfig
+    const { state } = sidePanelConfig
+    const open = state !== 'closed'
 
     useEffect(() => {
         if (open) {
@@ -46,7 +47,7 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
     // HANDLERS
     const handleClose = () => {
         asideWidth.set(SIDE_PANEL_MIN_ASIDE_WIDTH)
-        setSidePanelConfig({ open: false })
+        setSidePanelConfig({ state: 'closed' })
     }
 
     const handleDrag: DraggableEventHandler = (_, data) => {
@@ -67,7 +68,7 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
                     animate={{ x: 0, opacity: 1 }}
                     exit={{ x: SIDE_PANEL_MIN_ASIDE_WIDTH, opacity: 0 }}
                     transition={{ duration: 0.2, ease: 'easeInOut' }}
-                    className="flexbox"
+                    className="flexbox h-100vh dc__overflow-hidden"
                 >
                     <Draggable
                         handle={`.${SIDE_PANEL_ASIDE_DRAG_HANDLE}`}
@@ -93,7 +94,11 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
                         className={`flex-grow-1 dc__position-rel mt-8 mr-8 mb-8 br-6 bg__primary flexbox-col dc__overflow-hidden ${appTheme === AppThemeType.dark ? 'border__primary-translucent' : ''}`}
                     >
                         {contentOverlay && <div className="dc__position-abs w-100 h-100 dc__zi-1" />}
-                        <SidePanelContent onClose={handleClose} initialTab={SidePanelTab.DOCUMENTATION} />
+                        <SidePanelContent
+                            onClose={handleClose}
+                            sidePanelConfig={sidePanelConfig}
+                            setSidePanelConfig={setSidePanelConfig}
+                        />
                     </div>
                 </motion.aside>
             )}

src/components/common/SidePanel/SidePanelContent.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { MouseEvent } from 'react'
 
 import {
     Button,
@@ -9,6 +9,7 @@ import {
     Icon,
     ImageType,
     logExceptionToSentry,
+    SidePanelTab,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICMaintenance } from '@Images/ic-maintenance.svg'
@@ -18,7 +19,7 @@ import { importComponentFromFELibrary } from '../helpers/Helpers'
 import { TABS_CONFIG } from './constants'
 import { SidePanelDocumentation } from './SidePanelDocumentation'
 import { SidePanelHeaderActions } from './SidePanelHeaderActions'
-import { SidePanelContentProps, SidePanelTab } from './types'
+import { SidePanelContentProps } from './types'
 import { renderOpenTicketButton } from './utils'
 
 const AIChat = importComponentFromFELibrary(
@@ -33,8 +34,8 @@ const AIChat = importComponentFromFELibrary(
     'function',
 )
 
-export const SidePanelContent = ({ onClose, initialTab = SidePanelTab.DOCUMENTATION }: SidePanelContentProps) => {
-    const [tab, setTab] = useState<SidePanelTab>(initialTab)
+export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig }: SidePanelContentProps) => {
+    const tab = sidePanelConfig.state
 
     const renderContent = () => {
         switch (tab) {
@@ -57,20 +58,43 @@ export const SidePanelContent = ({ onClose, initialTab = SidePanelTab.DOCUMENTAT
                     />
                 )
             default:
-                logExceptionToSentry('Unknown tab in SidePanelContent', tab)
+                logExceptionToSentry(`Unknown ${tab} in SidePanelContent`)
                 return null
         }
     }
 
+    const getConfigForTab = (tabId: SidePanelTab) => {
+        if (sidePanelConfig.state === tabId) {
+            return sidePanelConfig
+        }
+
+        switch (tabId) {
+            case SidePanelTab.ASK_DEVTRON:
+                return {
+                    state: SidePanelTab.ASK_DEVTRON,
+                }
+            case SidePanelTab.DOCUMENTATION:
+            default:
+                return {
+                    state: SidePanelTab.DOCUMENTATION,
+                    docLink: null,
+                }
+        }
+    }
+
     return (
         <>
             <div className="border__primary--bottom flexbox dc__gap-12 dc__no-shrink bg__tertiary">
                 <div className="flexbox flex-grow-1 dc__content-start">
                     {TABS_CONFIG.map(({ label, iconName, id }) => {
                         const isSelected = tab === id
 
-                        const handleTabClick = () => {
-                            setTab(id)
+                        const handleTabClick = ({
+                            currentTarget: {
+                                dataset: { config },
+                            },
+                        }: MouseEvent<HTMLDivElement>) => {
+                            setSidePanelConfig(() => JSON.parse(config))
                         }
 
                         return (
@@ -81,6 +105,7 @@ export const SidePanelContent = ({ onClose, initialTab = SidePanelTab.DOCUMENTAT
                                 onClick={handleTabClick}
                                 style={{ ...(isSelected ? { boxShadow: '0 1px 0 0 var(--bg-primary)' } : {}) }}
                                 tabIndex={0}
+                                data-config={JSON.stringify(getConfigForTab(id))}
                             >
                                 <Icon name={iconName} color={isSelected ? 'N900' : 'N700'} />
 

src/components/common/SidePanel/constants.ts

@@ -1,4 +1,6 @@
-import { SidePanelTab, TabConfig } from './types'
+import { SidePanelTab } from '@devtron-labs/devtron-fe-common-lib'
+
+import { TabConfig } from './types'
 
 export const SIDE_PANEL_MIN_ASIDE_WIDTH = 362
 

src/components/common/SidePanel/types.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react'
 
-import { IconName, useMotionValue } from '@devtron-labs/devtron-fe-common-lib'
+import { IconName, MainContext, SidePanelTab, useMotionValue } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface SidePanelProps {
     asideWidth: ReturnType<typeof useMotionValue<number>>
@@ -11,13 +11,10 @@ export interface SidePanelContentBaseProps {
 }
 
 export interface SidePanelContentProps {
-    initialTab?: SidePanelTab
+    tab?: SidePanelTab
     onClose: () => void
-}
-
-export enum SidePanelTab {
-    DOCUMENTATION = 'documentation',
-    ASK_DEVTRON = 'ask-devtron',
+    setSidePanelConfig: MainContext['setSidePanelConfig']
+    sidePanelConfig: MainContext['sidePanelConfig']
 }
 
 export interface TabConfig {

src/components/common/navigation/NavigationRoutes.tsx

@@ -158,7 +158,7 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
     const [licenseInfoDialogType, setLicenseInfoDialogType] = useState<LicenseInfoDialogType>(null)
     const [intelligenceConfig, setIntelligenceConfig] = useState<IntelligenceConfig>(null)
 
-    const [sidePanelConfig, setSidePanelConfig] = useState<SidePanelConfig>({ open: false })
+    const [sidePanelConfig, setSidePanelConfig] = useState<SidePanelConfig>({ state: 'closed' })
     const asideWidth = useMotionValue(0)
 
     const {
@@ -522,7 +522,6 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                         handleUpdateUserThemePreference={handleUpdateUserThemePreference}
                     />
                 )}
-                {AIChat && window._env_?.FEATURE_AI_APP_DETAILS_ENABLE && <AIChat parentRef={parentRef} {...aiAgentContext} />}
                 {renderAboutDevtronDialog()}
                 {!isOnboardingPage && (
                     <Navigation