feat: implement useIsSecureConnection hook and integrate it into DocLink and HelpButton components

Author: RohitRaj011

src/Shared/Components/DocLink/DocLink.tsx

@@ -3,6 +3,7 @@ import { MouseEvent } from 'react'
 import { DOCUMENTATION_HOME_PAGE } from '@Common/Constants'
 import { Button, ButtonComponentType, ButtonVariantType, Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
+import { useIsSecureConnection } from '@Shared/Hooks'
 import { SidePanelTab, useMainContext } from '@Shared/Providers'
 
 import { DocLinkProps } from './types'
@@ -24,6 +25,7 @@ export const DocLink = <T extends boolean = false>({
 }: DocLinkProps<T>) => {
     // HOOKS
     const { isEnterprise, setSidePanelConfig, isLicenseDashboard } = useMainContext()
+    const isSecureConnection = useIsSecureConnection()
 
     // CONSTANTS
     const documentationLink = getDocumentationUrl({
@@ -36,6 +38,7 @@ export const DocLink = <T extends boolean = false>({
     // HANDLERS
     const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
         if (
+            isSecureConnection &&
             !isExternalLink &&
             !openInNewTab &&
             !e.metaKey &&

src/Shared/Components/Header/HelpButton.tsx

@@ -5,6 +5,7 @@ import { SliderButton } from '@typeform/embed-react'
 import { DOCUMENTATION_HOME_PAGE, MAX_LOGIN_COUNT, URLS } from '@Common/Constants'
 import { handleAnalyticsEvent } from '@Shared/Analytics'
 import { ComponentSizeType } from '@Shared/constants'
+import { useIsSecureConnection } from '@Shared/Hooks'
 import { AppThemeType, SidePanelTab, useMainContext, useTheme } from '@Shared/Providers'
 import { InstallationType } from '@Shared/types'
 
@@ -54,6 +55,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettin
         showGettingStartedCard,
     } = useMainContext()
     const { appTheme } = useTheme()
+    const isSecureConnection = useIsSecureConnection()
 
     // REFS
     const typeFormSliderButtonRef = useRef(null)
@@ -73,7 +75,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettin
 
     const handleViewDocumentationClick: HelpButtonActionMenuProps['onClick'] = (_, e) => {
         // Opens documentation in side panel when clicked normally, or in a new tab when clicked with the meta/command key
-        if (!e.metaKey) {
+        if (isSecureConnection && !e.metaKey) {
             e.preventDefault()
             setSidePanelConfig((prev) => ({
                 ...prev,

src/Shared/Hooks/index.ts

@@ -17,6 +17,7 @@
 export * from './UseDownload'
 export * from './useForm'
 export * from './useGetResourceKindsOptions'
+export * from './useIsSecureConnection'
 export * from './useOneTimePrompt'
 export * from './UsePrompt'
 export * from './useStickyEvent'

src/Shared/Hooks/useIsSecureConnection/index.ts

@@ -0,0 +1 @@
+export * from './useIsSecureConnection'

src/Shared/Hooks/useIsSecureConnection/useIsSecureConnection.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react'
+
+export const useIsSecureConnection = () => {
+    const [isSecure, setIsSecure] = useState(false)
+
+    useEffect(() => {
+        setIsSecure(window.location.protocol === 'https:')
+    }, [])
+
+    return isSecure
+}