fix: ai view issues

.env

@@ -68,7 +68,6 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
 FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
-FEATURE_ASK_DEVTRON_EXPERT=false
 FEATURE_MANAGE_TRAFFIC_ENABLE=false
 FEATURE_REDFISH_NODE_ENABLE=false
 FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE=false

package.json

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

src/components/Navigation/NavItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 
-import { Icon, preventDefault, TreeView } from '@devtron-labs/devtron-fe-common-lib'
+import { Icon, TreeView } from '@devtron-labs/devtron-fe-common-lib'
 
 import { NavItemProps } from './types'
 import { doesNavigationItemMatchPath, getNavigationTreeNodes } from './utils'
@@ -57,17 +57,35 @@ export const NavItem = ({ hasSearchText, ...navItem }: NavItemProps) => {
         )
     }
 
+    const renderContent = () => (
+        <>
+            <Icon name={icon} color="white" />
+            <span className="fs-13 lh-20 text__sidenav">{title}</span>
+        </>
+    )
+
+    // Handle disabled items or items without href
+    if (disabled || !href) {
+        return (
+            <div
+                data-testid={dataTestId}
+                className="nav-item flex left dc__gap-8 px-8 py-6 br-4 dc__disabled"
+                aria-disabled
+            >
+                {renderContent()}
+            </div>
+        )
+    }
+
     return (
         <NavLink
             to={href}
             data-testid={dataTestId}
-            className={`nav-item flex left dc__gap-8 px-8 py-6 br-4 ${disabled ? 'dc__disabled' : ''}`}
+            className="nav-item flex left dc__gap-8 px-8 py-6 br-4"
             activeClassName="is-selected fw-6"
             aria-disabled={disabled}
-            onClick={disabled ? preventDefault : undefined}
         >
-            <Icon name={icon} color="white" />
-            <span className="fs-13 lh-20 text__sidenav">{title}</span>
+            {renderContent()}
         </NavLink>
     )
 }

src/components/Navigation/constants.ts

@@ -279,14 +279,6 @@ const NAVIGATION_LIST: NavigationGroupType[] = [
                 href: '/dummy-url',
                 disabled: true,
             },
-            {
-                title: 'Runbook Automation',
-                dataTestId: 'runbook-automation',
-                id: 'automation-and-enablement-runbook-automation',
-                icon: 'ic-book-open',
-                href: '/dummy-url',
-                disabled: true,
-            },
         ],
     },
     ...(DATA_PROTECTION_MANAGEMENT_NAV_GROUP ? [DATA_PROTECTION_MANAGEMENT_NAV_GROUP] : []),

src/components/Navigation/utils.ts

@@ -7,7 +7,13 @@ import {
 
 const getNavigationTreeItems = (items: NavigationItemType['subItems']) =>
     items
-        .filter(({ forceHideEnvKey, hideNav }) => (forceHideEnvKey ? window._env_[forceHideEnvKey] : !hideNav))
+        .filter(({ forceHideEnvKey, hideNav, href }) => {
+            // Filter out items with undefined href
+            if (!href) {
+                return false
+            }
+            return forceHideEnvKey ? window._env_[forceHideEnvKey] : !hideNav
+        })
         .map<TreeNode>(({ title, id, href, disabled }) => ({
             id,
             title,
@@ -67,7 +73,7 @@ export const filterNavigationItems = (
 }
 
 // remove trailing slashes
-const normalize = (p: string) => p.replace(/\/+$/, '')
+const normalize = (p: string) => p?.replace(/\/+$/, '') || ''
 
 /**
  * Checks if a given path is under a base path
@@ -76,6 +82,11 @@ const normalize = (p: string) => p.replace(/\/+$/, '')
  * @returns True if the path is under the base path
  */
 const isSubPath = (basePath: string, targetPath: string) => {
+    // Return false if basePath is undefined or null
+    if (!basePath) {
+        return false
+    }
+
     // Ensure both paths start with a single "/"
     const _basePath = normalize(basePath)
     const _targetPath = normalize(targetPath)
@@ -102,7 +113,7 @@ export const doesNavigationItemMatchPath = (
         return navItem.subItems.some((subItem) => !subItem.disabled && doesNavigationItemMatchPath(subItem, pathname))
     }
 
-    return !navItem.disabled && isSubPath(item.href, pathname)
+    return !navItem.disabled && item.href && isSubPath(item.href, pathname)
 }
 
 /**

src/components/common/SidePanel/SidePanelContent.tsx

@@ -25,6 +25,7 @@ import {
     Icon,
     ImageType,
     SidePanelTab,
+    useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICMaintenance } from '@Images/ic-maintenance.svg'
@@ -40,6 +41,8 @@ import { getContentWrapperClassNameForTab, renderOpenTicketButton } from './util
 const AIChat = importComponentFromFELibrary('AIChat', null, 'function')
 
 export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig }: SidePanelContentProps) => {
+    const { featureAskDevtronExpert } = useMainContext()
+
     const tab = sidePanelConfig.state as SidePanelTab
 
     const renderAIChat = () => {
@@ -53,7 +56,7 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
             )
         }
 
-        if (!window._env_?.FEATURE_ASK_DEVTRON_EXPERT) {
+        if (!featureAskDevtronExpert) {
             return (
                 <GenericEmptyState
                     title="AI Integration not configured"

src/components/common/SidePanel/SidePanelDocumentation.tsx

@@ -69,7 +69,7 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
     const iframeKeyRef = useRef<string | null>(`${docLink}-${getUniqueId()}`)
 
     // CONSTANTS
-    const iframeSrc = `${docLink}${docLink.includes('?') ? `&theme=${appTheme}` : `?theme=${appTheme}`}`
+    const iframeSrc = `${docLink}${docLink.includes('?') ? `&docusaurus-theme=${appTheme}` : `?docusaurus-theme=${appTheme}`}`
 
     useEffect(() => {
         /**

src/components/common/navigation/NavigationRoutes.tsx

@@ -137,6 +137,8 @@ const AIResponseWidget = importComponentFromFELibrary('AIResponseWidget', null,
 const EnterpriseRouter = importComponentFromFELibrary('EnterpriseRouter', null, 'function')
 const CostVisibilityRenderProvider: FunctionComponent<CostVisibilityRenderProviderProps> | null =
     importComponentFromFELibrary('CostVisibilityRenderProvider', null, 'function')
+const AIRecommendations = importComponentFromFELibrary('AIRecommendations', null, 'function')
+const AIChatProvider = importComponentFromFELibrary('AIChatProvider', null, 'function')
 
 const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesTypes>) => {
     const history = useHistory()
@@ -412,6 +414,8 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                     result.devtronManagedLicensingEnabled ?? ENVIRONMENT_DATA_FALLBACK.devtronManagedLicensingEnabled,
                 isResourceRecommendationEnabled:
                     result.isResourceRecommendationEnabled ?? ENVIRONMENT_DATA_FALLBACK.isResourceRecommendationEnabled,
+                featureAskDevtronExpert:
+                    result.featureAskDevtronExpert ?? ENVIRONMENT_DATA_FALLBACK.featureAskDevtronExpert,
             }
         } catch {
             return ENVIRONMENT_DATA_FALLBACK
@@ -441,6 +445,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                 canFetchHelmAppStatus: environmentDataResponse.canFetchHelmAppStatus,
                 devtronManagedLicensingEnabled: environmentDataResponse.devtronManagedLicensingEnabled,
                 isResourceRecommendationEnabled: environmentDataResponse.isResourceRecommendationEnabled,
+                featureAskDevtronExpert: environmentDataResponse.featureAskDevtronExpert,
             })
 
             setServerMode(serverModeResponse)
@@ -701,6 +706,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                                     )}
                                     {EnterpriseRouter && CostVisibilityRenderProvider && (
                                         <Route
+                                            key="enterprise-router"
                                             path={[
                                                 CommonURLS.APPLICATION_MANAGEMENT,
                                                 CommonURLS.COST_VISIBILITY,
@@ -729,6 +735,39 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
         )
     }
 
+    const renderMainBody = () => (
+        <motion.main id={DEVTRON_BASE_MAIN_ID} style={{ gridTemplateColumns }}>
+            {!isOnboardingPage && (
+                <Navigation
+                    showStackManager={showStackManager}
+                    isAirgapped={isAirgapped}
+                    serverMode={serverMode}
+                    moduleInInstallingState={moduleInInstallingState}
+                    installedModuleMap={installedModuleMap}
+                    pageState={pageState}
+                />
+            )}
+            <>
+                <motion.div
+                    className={`main flexbox-col bg__primary dc__position-rel ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} br-6 dc__overflow-hidden mt-8 mb-8 ml-8 ${sidePanelConfig.state === 'closed' ? 'mr-8' : ''}`}
+                    ref={navRouteRef}
+                >
+                    {renderMainContent()}
+                </motion.div>
+
+                <SidePanel asideWidth={asideWidth} />
+            </>
+            {showThemeSwitcherDialog && (
+                <SwitchThemeDialog
+                    initialThemePreference={userPreferences?.themePreference}
+                    handleClose={handleCloseSwitchThemeDialog}
+                    handleUpdateUserThemePreference={handleUpdateUserThemePreference}
+                />
+            )}
+            {renderAboutDevtronDialog()}
+        </motion.main>
+    )
+
     return (
         <MainContextProvider
             value={{
@@ -766,6 +805,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                 licenseData,
                 setLicenseData,
                 canFetchHelmAppStatus: environmentDataState.canFetchHelmAppStatus,
+                featureAskDevtronExpert: environmentDataState.featureAskDevtronExpert,
                 reloadVersionConfig,
                 intelligenceConfig,
                 setIntelligenceConfig,
@@ -779,39 +819,12 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                     isGrafanaModuleInstalled && environmentDataState.isResourceRecommendationEnabled,
                 tempAppWindowConfig,
                 setTempAppWindowConfig,
+                AIRecommendations,
             }}
         >
             <ConfirmationModalProvider>
                 <BaseConfirmationModal />
-                <motion.main id={DEVTRON_BASE_MAIN_ID} style={{ gridTemplateColumns }}>
-                    {!isOnboardingPage && (
-                        <Navigation
-                            showStackManager={showStackManager}
-                            isAirgapped={isAirgapped}
-                            serverMode={serverMode}
-                            moduleInInstallingState={moduleInInstallingState}
-                            installedModuleMap={installedModuleMap}
-                            pageState={pageState}
-                        />
-                    )}
-                    <>
-                        <motion.div
-                            className={`main flexbox-col bg__primary dc__position-rel ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} br-6 dc__overflow-hidden mt-8 mb-8 ml-8 ${sidePanelConfig.state === 'closed' ? 'mr-8' : ''}`}
-                            ref={navRouteRef}
-                        >
-                            {renderMainContent()}
-                        </motion.div>
-                        <SidePanel asideWidth={asideWidth} />
-                    </>
-                    {showThemeSwitcherDialog && (
-                        <SwitchThemeDialog
-                            initialThemePreference={userPreferences?.themePreference}
-                            handleClose={handleCloseSwitchThemeDialog}
-                            handleUpdateUserThemePreference={handleUpdateUserThemePreference}
-                        />
-                    )}
-                    {renderAboutDevtronDialog()}
-                </motion.main>
+                {AIChatProvider ? <AIChatProvider>{renderMainBody()}</AIChatProvider> : renderMainBody()}
             </ConfirmationModalProvider>
         </MainContextProvider>
     )

src/components/common/navigation/constants.ts

@@ -31,6 +31,7 @@ const COMMON_ENV_FALLBACK: Omit<EnvironmentDataValuesDTO, 'isAirGapEnvironment'>
     canFetchHelmAppStatus: false,
     devtronManagedLicensingEnabled: false,
     isResourceRecommendationEnabled: false,
+    featureAskDevtronExpert: false,
 }
 
 export const ENVIRONMENT_DATA_FALLBACK: EnvironmentDataValuesDTO = {

src/css/base.scss

@@ -3437,6 +3437,10 @@ button.anchor {
     height: 300px !important;
 }
 
+.h-360 {
+    height: 360px !important;
+}
+
 .h-365 {
     height: 365px !important;
 }

src/index.tsx

@@ -173,7 +173,6 @@ if (!window || !window._env_) {
         GATEKEEPER_URL: 'https://license.devtron.ai/dashboard',
         FEATURE_AI_INTEGRATION_ENABLE: true,
         LOGIN_PAGE_IMAGE: '',
-        FEATURE_ASK_DEVTRON_EXPERT: false,
         FEATURE_MANAGE_TRAFFIC_ENABLE: true,
         FEATURE_REDFISH_NODE_ENABLE: false,
         FEATURE_INFRA_PROVISION_INFO_BLOCK_HIDE: false,

vite.config.mts

@@ -96,7 +96,6 @@ const jsToBottomNoModule = () => {
 export default defineConfig(({ mode }) => {
     const secretsEnv = loadEnv('secrets', process.cwd(), '')
     const targetUrl = secretsEnv.VITE_TARGET_URL ?? TARGET_URL
-
     process.env = { ...process.env, ...loadEnv(mode, process.cwd(), ''), ...secretsEnv }
 
     const baseConfig: UserConfig = {
@@ -275,6 +274,10 @@ export default defineConfig(({ mode }) => {
                     target: targetUrl,
                     changeOrigin: true,
                 },
+                '/proxy': {
+                    target: targetUrl,
+                    changeOrigin: true,
+                },
                 '/grafana': targetUrl,
             },
         },

yarn.lock

@@ -1729,9 +1729,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.22.0-pre-0":
-  version: 1.22.0-pre-0
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.0-pre-0"
+"@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-2":
+  version: 1.22.0-beta-2
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.22.0-beta-2"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1785,7 +1785,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/c0e6254f202d2beac314185caf563674e367769057ae9c6ef4053f44b8a93851f9d6943b027adc65d42321be442ec6440f86d31bb58ceb166374d3476cdf81a5
+  checksum: 10c0/01afa9776f529db4280dbfb8aff10d434c46c22447f19297fe75fed00aa805b618f0974f9543388cefb80104e32d1fb72e0972c716a61d2843789edbdf310a73
   languageName: node
   linkType: hard
 
@@ -5599,7 +5599,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.0-pre-0"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.22.0-beta-2"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"