feat: update SidePanel and SidePanelDocumentation to handle reinitialization of iframe and improve doc link handling

Author: RohitRaj011

src/components/charts/list/DiscoverCharts.tsx

@@ -754,9 +754,10 @@ const ChartListHeader = ({ charts }) => {
                 Select chart to deploy.  
                 <DocLink
                     dataTestId="chart-group-link"
-                    docLinkKey="CHART_GROUP"
-                    text="Learn more about chart groups"
+                    docLinkKey="CHART_LIST"
+                    text="Learn how to deploy charts"
                     fontWeight="normal"
+                    size={ComponentSizeType.small}
                 />
             </p>
         </div>

src/components/common/SidePanel/SidePanel.tsx

@@ -46,7 +46,7 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
     // HANDLERS
     const handleClose = () => {
         asideWidth.set(SIDE_PANEL_MIN_ASIDE_WIDTH)
-        setSidePanelConfig({ open: false })
+        setSidePanelConfig({ open: false, docLink: null, reinitialize: false })
     }
 
     const handleDrag: DraggableEventHandler = (_, data) => {
@@ -89,11 +89,13 @@ export const SidePanel = ({ asideWidth }: SidePanelProps) => {
                             <div className="aside-drag__handle px-1 br-1" />
                         </div>
                     </Draggable>
-                    <div
-                        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" />}
-                        <SidePanelDocumentation onClose={handleClose} />
+                    <div className="flex-grow-1 py-8 pr-8">
+                        <div
+                            className={`w-100 h-100 dc__position-rel 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" />}
+                            <SidePanelDocumentation onClose={handleClose} />
+                        </div>
                     </div>
                 </motion.aside>
             )}

src/components/common/SidePanel/SidePanelDocumentation.tsx

@@ -1,11 +1,12 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 import {
     Button,
     ButtonComponentType,
     ButtonStyleType,
     ButtonVariantType,
     ComponentSizeType,
+    getUniqueId,
     Icon,
     useMainContext,
     useTheme,
@@ -17,17 +18,31 @@ export const SidePanelDocumentation = ({ onClose }: SidePanelDocumentationProps)
     // HOOKS
     const { appTheme } = useTheme()
     const {
-        sidePanelConfig: { docLink },
+        sidePanelConfig: { docLink, reinitialize },
+        setSidePanelConfig,
     } = useMainContext()
 
     // 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
 
+    useEffect(() => {
+        /**
+         * Reinitializes the iframe when the reinitialize flag is set to true. \
+         * This is needed to reload the iframe content whenever doc link is clicked (reinitialize is set to true). \
+         * It generates a new unique key for the iframe which forces React to recreate it.
+         */
+        if (reinitialize) {
+            iframeKeyRef.current = `${docLink}-${getUniqueId()}`
+            setSidePanelConfig((prev) => ({ ...prev, reinitialize: false }))
+        }
+    }, [reinitialize])
+
     return (
         <>
             <div className="side-panel-documentation__header px-16 pt-12 pb-11 border__primary--bottom flex dc__gap-12">
@@ -61,7 +76,7 @@ export const SidePanelDocumentation = ({ onClose }: SidePanelDocumentationProps)
             <div className="flex-grow-1">
                 {iframeSrc && (
                     <iframe
-                        key={iframeSrc}
+                        key={iframeKeyRef.current}
                         ref={iframeRef}
                         title="side-panel-documentation"
                         loading="lazy"

src/components/common/navigation/NavigationRoutes.tsx

@@ -154,7 +154,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>({ open: false, docLink: null, reinitialize: false })
     const asideWidth = useMotionValue(0)
 
     const {

src/components/dockerRegistry/ManageRegistry.tsx

@@ -35,9 +35,9 @@ import {
     InfoIconTippy,
     InfoBlock,
     DocLink,
+    stopPropagation,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
-import { Link } from 'react-router-dom'
 
 export const DropdownIndicator = (props) => {
     return (
@@ -322,6 +322,7 @@ const ManageRegistry = ({
                     docLinkKey="SPECIFY_IMAGE_PULL_SECRET"
                     text="image pull secret name created via CLI"
                     fontWeight="normal"
+                    onClick={stopPropagation}
                 />
                 . The secret must be present in the namespaces you're deploying to.
             </div>