Merge pull request #2825 from devtron-labs/fix/doc-link-unsecure-connection

feat: add handling for insecure connections in SidePanelDocumentation

Author: RohitRaj011

package.json

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

src/assets/img/img-page-blocked.webp

@@ -7,25 +7,44 @@ import {
     ButtonVariantType,
     ComponentSizeType,
     DOCUMENTATION,
+    GenericEmptyState,
     getUniqueId,
     Icon,
     ProgressBar,
     SidePanelTab,
+    useIsSecureConnection,
     useMainContext,
     useTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import ImgPageBlocked from '@Images/img-page-blocked.webp'
+
 import { SidePanelContentBaseProps } from './types'
 
+const renderButton = (docLink: string) => () => (
+    <Button
+        dataTestId="open-in-new-tab-button"
+        endIcon={<Icon name="ic-arrow-square-out" color={null} />}
+        variant={ButtonVariantType.text}
+        size={ComponentSizeType.medium}
+        component={ButtonComponentType.anchor}
+        text="Open in new tab"
+        anchorProps={{
+            href: docLink,
+        }}
+    />
+)
+
 export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelContentBaseProps) => {
     // HOOKS
     const { appTheme } = useTheme()
     const {
         sidePanelConfig: { state, docLink: sidePanelDocLink, reinitialize },
         setSidePanelConfig,
     } = useMainContext()
+    const isSecureConnection = useIsSecureConnection()
 
-    const [isLoading, setIsLoading] = useState(true)
+    const [isLoading, setIsLoading] = useState(isSecureConnection)
 
     const docLink = sidePanelDocLink ?? DOCUMENTATION.DOC_HOME_PAGE
 
@@ -74,19 +93,29 @@ export const SidePanelDocumentation = ({ SidePanelHeaderActions }: SidePanelCont
             <div className="flex-grow-1 dc__position-rel">
                 <ProgressBar isLoading={isLoading} />
 
-                {iframeSrc && (
-                    <iframe
-                        key={iframeKeyRef.current}
-                        ref={iframeRef}
-                        title="side-panel-documentation"
-                        loading="lazy"
-                        className="dc__no-border"
-                        src={iframeSrc}
-                        width="100%"
-                        height="100%"
-                        allow="clipboard-read; clipboard-write"
-                        referrerPolicy="strict-origin-when-cross-origin"
-                        onLoad={onLoad}
+                {isSecureConnection ? (
+                    iframeSrc && (
+                        <iframe
+                            key={iframeKeyRef.current}
+                            ref={iframeRef}
+                            title="side-panel-documentation"
+                            loading="lazy"
+                            className="dc__no-border"
+                            src={iframeSrc}
+                            width="100%"
+                            height="100%"
+                            allow="clipboard-read; clipboard-write"
+                            referrerPolicy="strict-origin-when-cross-origin"
+                            onLoad={onLoad}
+                        />
+                    )
+                ) : (
+                    <GenericEmptyState
+                        title="Unable to load docs"
+                        subTitle="Your Devtron setup isn’t secure, so the documentation can’t be displayed here."
+                        image={ImgPageBlocked}
+                        isButtonAvailable
+                        renderButton={renderButton(docLink)}
                     />
                 )}
             </div>

src/components/common/SidePanel/SidePanelDocumentation.tsx

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.17.0":
-  version: 1.17.0
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.0"
+"@devtron-labs/devtron-fe-common-lib@npm:1.17.1":
+  version: 1.17.1
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.17.1"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1773,7 +1773,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/184b4d26eb3252c329aca4f863ce21764d535e5f77d52e26417303612c1dfae37c0205e1ac48da1eb2ac0d35bfeed9ff781edee604b240e531a75357ca84fc75
+  checksum: 10c0/d3b52fcda1289dcb7c73af80f54a7a24953516d82cd1cf9bfde7b585c1f5750e77cb1ad0651e000cdc19f0c66b0d9c5ab2bd55b245fe406f42cc50fc53ca1d08
   languageName: node
   linkType: hard
 
@@ -5685,7 +5685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.0"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.17.1"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"