Merge pull request #2765 from devtron-labs/fix/ai

chore: side panel default link

Author: Elessar1802

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.1-pre-4",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.1-pre-5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/app/details/main.tsx

@@ -65,7 +65,15 @@ const AIAgentContextSetterWrapper = ({ children, appName }: PropsWithChildren<{
     const { path, url } = useRouteMatch()
 
     useEffect(() => {
-        setAIAgentContext({ path, context: { appName, ...params }})
+        const contextData: Record<string, string> = {
+            ...params,
+        }
+        if (contextData.buildId) {
+            // For build history page
+            contextData['Workflow_id'] = contextData.buildId
+            delete contextData.buildId
+        }
+        setAIAgentContext({ path, context: { appName, ...contextData }})
     }, [path, url])
 
     return <>{children}</>

src/components/common/SidePanel/SidePanel.scss

@@ -13,8 +13,9 @@
     }
 }
 
-.side-panel-documentation {
-    &__header {
-        flex: 0 0 48px;
+.side-panel-content {
+    &--hidden {
+        visibility: hidden;
+        height: 0;
     }
 }

src/components/common/SidePanel/SidePanel.tsx

@@ -90,7 +90,7 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
                             <div className="aside-drag__handle px-1 br-1" />
                         </div>
                     </Draggable>
-                    <div className="flex-grow-1 py-8 pr-8">
+                    <div className="flex-grow-1 py-8 pr-8 dc__overflow-hidden">
                         <div
                             className={`w-100 h-100 dc__position-rel br-6 bg__primary flexbox-col dc__overflow-hidden ${appTheme === AppThemeType.dark ? 'border__primary-translucent' : ''}`}
                         >

src/components/common/SidePanel/SidePanelContent.tsx

@@ -8,7 +8,6 @@ import {
     GenericEmptyState,
     Icon,
     ImageType,
-    logExceptionToSentry,
     SidePanelTab,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -20,7 +19,7 @@ import { TABS_CONFIG } from './constants'
 import { SidePanelDocumentation } from './SidePanelDocumentation'
 import { SidePanelHeaderActions } from './SidePanelHeaderActions'
 import { SidePanelContentProps } from './types'
-import { renderOpenTicketButton } from './utils'
+import { getContentWrapperClassNameForTab, renderOpenTicketButton } from './utils'
 
 const AIChat = importComponentFromFELibrary(
     'AIChat',
@@ -35,51 +34,24 @@ const AIChat = importComponentFromFELibrary(
 )
 
 export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig }: SidePanelContentProps) => {
-    const tab = sidePanelConfig.state
-
-    const renderContent = () => {
-        switch (tab) {
-            case SidePanelTab.DOCUMENTATION:
-                return <SidePanelDocumentation SidePanelHeaderActions={SidePanelHeaderActions} />
-            case SidePanelTab.ASK_DEVTRON:
-                // NOTE: even if flag is off, for oss clients need to show EnterpriseTrialDialog
-                if (!AIChat || window._env_?.FEATURE_ASK_DEVTRON_EXPERT) {
-                    return <AIChat SidePanelHeaderActions={SidePanelHeaderActions} />
-                }
-
-                return (
-                    <GenericEmptyState
-                        title="AI Integration not configured"
-                        subTitle="For AI-powered insights, please follow documentation or contact the Devtron team."
-                        SvgImage={ICMaintenance}
-                        imageType={ImageType.Medium}
-                        isButtonAvailable
-                        renderButton={renderOpenTicketButton}
-                    />
-                )
-            default:
-                logExceptionToSentry(`Unknown ${tab} in SidePanelContent`)
-                return null
-        }
-    }
+    const tab = sidePanelConfig.state as SidePanelTab
 
-    const getConfigForTab = (tabId: SidePanelTab) => {
-        if (sidePanelConfig.state === tabId) {
-            return sidePanelConfig
+    const renderAIChat = () => {
+        // NOTE: even if flag is off, for oss clients need to show EnterpriseTrialDialog
+        if (!AIChat || window._env_?.FEATURE_ASK_DEVTRON_EXPERT) {
+            return <AIChat SidePanelHeaderActions={SidePanelHeaderActions} />
         }
 
-        switch (tabId) {
-            case SidePanelTab.ASK_DEVTRON:
-                return {
-                    state: SidePanelTab.ASK_DEVTRON,
-                }
-            case SidePanelTab.DOCUMENTATION:
-            default:
-                return {
-                    state: SidePanelTab.DOCUMENTATION,
-                    docLink: null,
-                }
-        }
+        return (
+            <GenericEmptyState
+                title="AI Integration not configured"
+                subTitle="For AI-powered insights, please follow documentation or contact the Devtron team."
+                SvgImage={ICMaintenance}
+                imageType={ImageType.Medium}
+                isButtonAvailable
+                renderButton={renderOpenTicketButton}
+            />
+        )
     }
 
     return (
@@ -108,7 +80,6 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
                                 onClick={onTabClick}
                                 style={{ ...(isSelected ? { boxShadow: '0 1px 0 0 var(--bg-primary)' } : {}) }}
                                 tabIndex={0}
-                                data-config={JSON.stringify(getConfigForTab(id))}
                                 onKeyDown={onKeyDown}
                             >
                                 <Icon name={iconName} color={isSelected ? 'N900' : 'N700'} />
@@ -137,7 +108,11 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
                 </div>
             </div>
 
-            {renderContent()}
+            <div className={getContentWrapperClassNameForTab(tab, SidePanelTab.DOCUMENTATION)}>
+                <SidePanelDocumentation SidePanelHeaderActions={SidePanelHeaderActions} />
+            </div>
+
+            <div className={getContentWrapperClassNameForTab(tab, SidePanelTab.ASK_DEVTRON)}>{renderAIChat()}</div>
         </>
     )
 }

src/components/common/SidePanel/SidePanelDocumentation.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
     Button,
@@ -9,6 +9,7 @@ import {
     DOCUMENTATION,
     getUniqueId,
     Icon,
+    ProgressBar,
     useMainContext,
     useTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -19,18 +20,20 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
     // HOOKS
     const { appTheme } = useTheme()
     const {
-        sidePanelConfig: { docLink = DOCUMENTATION.DOC_HOME_PAGE, reinitialize },
+        sidePanelConfig: { docLink: sidePanelDocLink, reinitialize },
         setSidePanelConfig,
     } = useMainContext()
 
+    const [isLoading, setIsLoading] = useState(true)
+
+    const docLink = sidePanelDocLink ?? DOCUMENTATION.DOC_HOME_PAGE
+
     // REFS
     const iframeRef = useRef<HTMLIFrameElement | null>(null)
     const iframeKeyRef = useRef<string | null>(`${docLink}-${getUniqueId()}`)
 
     // CONSTANTS
-    const iframeSrc = docLink
-        ? `${docLink}${docLink.includes('?') ? `&theme=${appTheme}` : `?theme=${appTheme}`}`
-        : null
+    const iframeSrc = `${docLink}${docLink.includes('?') ? `&theme=${appTheme}` : `?theme=${appTheme}`}`
 
     useEffect(() => {
         /**
@@ -44,6 +47,10 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
         }
     }, [reinitialize])
 
+    const onLoad = () => {
+        setIsLoading(false)
+    }
+
     return (
         <>
             <SidePanelHeaderActions>
@@ -61,7 +68,9 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
                 />
             </SidePanelHeaderActions>
 
-            <div className="flex-grow-1">
+            <div className="flex-grow-1 dc__position-rel">
+                <ProgressBar isLoading={isLoading} />
+
                 {iframeSrc && (
                     <iframe
                         key={iframeKeyRef.current}
@@ -74,6 +83,7 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
                         height="100%"
                         allow="clipboard-read; clipboard-write"
                         referrerPolicy="strict-origin-when-cross-origin"
+                        onLoad={onLoad}
                     />
                 )}
             </div>

src/components/common/SidePanel/types.ts

@@ -11,7 +11,6 @@ export interface SidePanelContentBaseProps {
 }
 
 export interface SidePanelContentProps extends Pick<MainContext, 'sidePanelConfig' | 'setSidePanelConfig'> {
-    tab?: SidePanelTab
     onClose: () => void
 }
 

src/components/common/SidePanel/utils.tsx

@@ -5,6 +5,7 @@ import {
     ComponentSizeType,
     CONTACT_SUPPORT_LINK,
     OPEN_NEW_TICKET,
+    SidePanelTab,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 export const renderOpenTicketButton = () => (
@@ -29,3 +30,6 @@ export const renderOpenTicketButton = () => (
         />
     </div>
 )
+
+export const getContentWrapperClassNameForTab = (tab: SidePanelTab, expected: SidePanelTab) =>
+    `flexbox-col dc__overflow-hidden ${tab !== expected ? 'side-panel-content--hidden' : 'flex-grow-1'}`

src/components/common/navigation/navigation.scss

@@ -15,10 +15,10 @@
  */
 
 #root > div > main {
-    width: 100%;
+    width: 100vw;
     min-height: 100vh;
     display: grid;
-    overflow-y: hidden;
+    overflow: hidden;
 }
 
 .main {

yarn.lock

@@ -1125,10 +1125,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected]4":
-  version "1.15.1-pre-4"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.1-pre-4.tgz#e08f6aa2a0dbeaf4c86f5da9ae2d7eed283d1801"
-  integrity sha512-YbsS4aR9hgR/DXi6ya5itARn40nvSkxLeiQrPULK1Q3KKL1zy9BiUVOyYXf1tGIAbLJIi+wQVT1w5xmQOOkA7Q==
+"@devtron-labs/[email protected]5":
+  version "1.15.1-pre-5"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.1-pre-5.tgz#5a0e58d329f066193961700c7eb2ac9f4f3e0757"
+  integrity sha512-71Ik06tlMy/Zd7l/XwyGeJqEkQcCxUjMyz+kDMz0jKVPCCyHSyZys2TvcHCTYRf/WRM3rmt0jvUvm+v5HL2WxA==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"