Skip to content

Commit 2442bc7

Browse files
Elessar1802Elessar1802
committed
feat: keep component mounted on sidePanel
1 parent 3c4eec3 commit 2442bc7

File tree

5 files changed

+42
-68
lines changed

5 files changed

+42
-68
lines changed

‎src/components/common/SidePanel/SidePanel.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
}
1414
}
1515

16-
.side-panel-documentation {
17-
&__header {
18-
flex: 0 0 48px;
16+
.side-panel-content {
17+
&--hidden {
18+
visibility: hidden;
19+
height: 0;
1920
}
2021
}

‎src/components/common/SidePanel/SidePanelContent.tsx

Lines changed: 21 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
GenericEmptyState,
99
Icon,
1010
ImageType,
11-
logExceptionToSentry,
1211
SidePanelTab,
1312
} from '@devtron-labs/devtron-fe-common-lib'
1413

@@ -20,7 +19,7 @@ import { TABS_CONFIG } from './constants'
2019
import { SidePanelDocumentation } from './SidePanelDocumentation'
2120
import { SidePanelHeaderActions } from './SidePanelHeaderActions'
2221
import { SidePanelContentProps } from './types'
23-
import { renderOpenTicketButton } from './utils'
22+
import { getContentWrapperClassNameForTab, renderOpenTicketButton } from './utils'
2423

2524
const AIChat = importComponentFromFELibrary(
2625
'AIChat',
@@ -35,51 +34,24 @@ const AIChat = importComponentFromFELibrary(
3534
)
3635

3736
export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig }: SidePanelContentProps) => {
38-
const tab = sidePanelConfig.state
39-
40-
const renderContent = () => {
41-
switch (tab) {
42-
case SidePanelTab.DOCUMENTATION:
43-
return <SidePanelDocumentation SidePanelHeaderActions={SidePanelHeaderActions} />
44-
case SidePanelTab.ASK_DEVTRON:
45-
// NOTE: even if flag is off, for oss clients need to show EnterpriseTrialDialog
46-
if (!AIChat || window._env_?.FEATURE_ASK_DEVTRON_EXPERT) {
47-
return <AIChat SidePanelHeaderActions={SidePanelHeaderActions} />
48-
}
49-
50-
return (
51-
<GenericEmptyState
52-
title="AI Integration not configured"
53-
subTitle="For AI-powered insights, please follow documentation or contact the Devtron team."
54-
SvgImage={ICMaintenance}
55-
imageType={ImageType.Medium}
56-
isButtonAvailable
57-
renderButton={renderOpenTicketButton}
58-
/>
59-
)
60-
default:
61-
logExceptionToSentry(`Unknown ${tab} in SidePanelContent`)
62-
return null
63-
}
64-
}
37+
const tab = sidePanelConfig.state as SidePanelTab
6538

66-
const getConfigForTab = (tabId: SidePanelTab) => {
67-
if (sidePanelConfig.state === tabId) {
68-
return sidePanelConfig
39+
const renderAIChat = () => {
40+
// NOTE: even if flag is off, for oss clients need to show EnterpriseTrialDialog
41+
if (!AIChat || window._env_?.FEATURE_ASK_DEVTRON_EXPERT) {
42+
return <AIChat SidePanelHeaderActions={SidePanelHeaderActions} />
6943
}
7044

71-
switch (tabId) {
72-
case SidePanelTab.ASK_DEVTRON:
73-
return {
74-
state: SidePanelTab.ASK_DEVTRON,
75-
}
76-
case SidePanelTab.DOCUMENTATION:
77-
default:
78-
return {
79-
state: SidePanelTab.DOCUMENTATION,
80-
docLink: null,
81-
}
82-
}
45+
return (
46+
<GenericEmptyState
47+
title="AI Integration not configured"
48+
subTitle="For AI-powered insights, please follow documentation or contact the Devtron team."
49+
SvgImage={ICMaintenance}
50+
imageType={ImageType.Medium}
51+
isButtonAvailable
52+
renderButton={renderOpenTicketButton}
53+
/>
54+
)
8355
}
8456

8557
return (
@@ -108,7 +80,6 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
10880
onClick={onTabClick}
10981
style={{ ...(isSelected ? { boxShadow: '0 1px 0 0 var(--bg-primary)' } : {}) }}
11082
tabIndex={0}
111-
data-config={JSON.stringify(getConfigForTab(id))}
11283
onKeyDown={onKeyDown}
11384
>
11485
<Icon name={iconName} color={isSelected ? 'N900' : 'N700'} />
@@ -137,7 +108,11 @@ export const SidePanelContent = ({ onClose, setSidePanelConfig, sidePanelConfig
137108
</div>
138109
</div>
139110

140-
{renderContent()}
111+
<div className={getContentWrapperClassNameForTab(tab, SidePanelTab.DOCUMENTATION)}>
112+
<SidePanelDocumentation SidePanelHeaderActions={SidePanelHeaderActions} />
113+
</div>
114+
115+
<div className={getContentWrapperClassNameForTab(tab, SidePanelTab.ASK_DEVTRON)}>{renderAIChat()}</div>
141116
</>
142117
)
143118
}

‎src/components/common/SidePanel/SidePanelDocumentation.tsx

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useRef } from 'react'
1+
import { useEffect, useRef, useState } from 'react'
22

33
import {
44
Button,
@@ -9,6 +9,7 @@ import {
99
DOCUMENTATION,
1010
getUniqueId,
1111
Icon,
12+
ProgressBar,
1213
useMainContext,
1314
useTheme,
1415
} from '@devtron-labs/devtron-fe-common-lib'
@@ -23,16 +24,16 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
2324
setSidePanelConfig,
2425
} = useMainContext()
2526

27+
const [isLoading, setIsLoading] = useState(true)
28+
2629
const docLink = sidePanelDocLink ?? DOCUMENTATION.DOC_HOME_PAGE
2730

2831
// REFS
2932
const iframeRef = useRef<HTMLIFrameElement | null>(null)
3033
const iframeKeyRef = useRef<string | null>(`${docLink}-${getUniqueId()}`)
3134

3235
// CONSTANTS
33-
const iframeSrc = docLink
34-
? `${docLink}${docLink.includes('?') ? `&theme=${appTheme}` : `?theme=${appTheme}`}`
35-
: null
36+
const iframeSrc = `${docLink}${docLink.includes('?') ? `&theme=${appTheme}` : `?theme=${appTheme}`}`
3637

3738
useEffect(() => {
3839
/**
@@ -44,21 +45,12 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
4445
iframeKeyRef.current = `${docLink}-${getUniqueId()}`
4546
setSidePanelConfig((prev) => ({ ...prev, reinitialize: false }))
4647
}
47-
48-
let iframeLatestSrc = docLink
49-
50-
const interval = setInterval(() => {
51-
if (iframeRef.current?.contentWindow?.location?.href) {
52-
iframeLatestSrc = iframeRef.current.contentWindow.location.href
53-
}
54-
}, 100)
55-
56-
return () => {
57-
clearInterval(interval)
58-
setSidePanelConfig((prev) => ({ ...prev, reinitialize: false, docLink: iframeLatestSrc }))
59-
}
6048
}, [reinitialize])
6149

50+
const onLoad = () => {
51+
setIsLoading(false)
52+
}
53+
6254
return (
6355
<>
6456
<SidePanelHeaderActions>
@@ -76,7 +68,9 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
7668
/>
7769
</SidePanelHeaderActions>
7870

79-
<div className="flex-grow-1">
71+
<div className="flex-grow-1 dc__position-rel">
72+
<ProgressBar isLoading={isLoading} />
73+
8074
{iframeSrc && (
8175
<iframe
8276
key={iframeKeyRef.current}
@@ -89,6 +83,7 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
8983
height="100%"
9084
allow="clipboard-read; clipboard-write"
9185
referrerPolicy="strict-origin-when-cross-origin"
86+
onLoad={onLoad}
9287
/>
9388
)}
9489
</div>

‎src/components/common/SidePanel/types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export interface SidePanelContentBaseProps {
1111
}
1212

1313
export interface SidePanelContentProps extends Pick<MainContext, 'sidePanelConfig' | 'setSidePanelConfig'> {
14-
tab?: SidePanelTab
1514
onClose: () => void
1615
}
1716

‎src/components/common/SidePanel/utils.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
ComponentSizeType,
66
CONTACT_SUPPORT_LINK,
77
OPEN_NEW_TICKET,
8+
SidePanelTab,
89
} from '@devtron-labs/devtron-fe-common-lib'
910

1011
export const renderOpenTicketButton = () => (
@@ -29,3 +30,6 @@ export const renderOpenTicketButton = () => (
2930
/>
3031
</div>
3132
)
33+
34+
export const getContentWrapperClassNameForTab = (tab: SidePanelTab, expected: SidePanelTab) =>
35+
`flexbox-col dc__overflow-hidden ${tab !== expected ? 'side-panel-content--hidden' : 'flex-grow-1'}`

0 commit comments

Comments
 (0)