feat: DocLink: enhance component to open devtron docs in SidePanel

src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -47,6 +47,7 @@ export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean
             interactive
             documentationLink={isCreateApp ? "APP_TAGS" : "APP_OVERVIEW_TAGS"}
             documentationLinkText="View Documentation"
+            openInNewTab
         >
             <div className="flexbox cursor">
                 <InjectTag className="icon-dim-16 mt-2 mr-4" />

src/Common/TippyCustomized.tsx

@@ -79,8 +79,8 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
             additionalContent,
             documentationLink,
             documentationLinkText,
-            isEnterprise,
             isExternalLink,
+            openInNewTab,
         } = props
         return (
             <>
@@ -164,9 +164,9 @@ export const TippyCustomized = <T extends boolean = false>(props: TippyCustomize
                             dataTestId="learn-more-about-tippy-link"
                             showExternalIcon
                             onClick={closeTippy}
-                            isEnterprise={isEnterprise}
                             isExternalLink={isExternalLink}
                             docLinkKey={documentationLink}
+                            openInNewTab={openInNewTab}
                         />
                     </div>
                 )}

src/Common/Types.ts

@@ -33,7 +33,7 @@ import {
     ACTION_STATE,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
-    DOCUMENTATION,
+    DocLinkProps,
     RefVariableType,
     SortingOrder,
     TaskErrorObj,
@@ -120,10 +120,9 @@ export interface CheckboxProps {
     children?: ReactNode
 }
 
-export type TippyWithBaseDocLinkTypes<T extends boolean> = {
-    isExternalLink?: T
-    isEnterprise?: boolean
-    documentationLink?: T extends true ? string : keyof typeof DOCUMENTATION
+export interface TippyWithBaseDocLinkTypes<T extends boolean>
+    extends Pick<DocLinkProps<T>, 'isExternalLink' | 'openInNewTab'> {
+    documentationLink?: DocLinkProps<T>['docLinkKey']
 }
 
 export type TippyCustomizedProps<T extends boolean> = Pick<TippyProps, 'appendTo'> &
@@ -169,8 +168,8 @@ export interface InfoIconTippyProps<T extends boolean = false>
         | 'Icon'
         | 'headingInfo'
         | 'documentationLink'
-        | 'isEnterprise'
         | 'isExternalLink'
+        | 'openInNewTab'
     > {
     dataTestid?: string
     children?: TippyCustomizedProps<T>['children']

src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx

@@ -5,14 +5,12 @@ import { EULA_LINK, PRIVACY_POLICY_LINK, TERMS_OF_USE_LINK } from '@Shared/const
 import { useMainContext } from '@Shared/Providers'
 
 import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button'
-import { InstallationType } from '../Header/types'
 import { Icon } from '../Icon'
 
 const AboutDevtronBody = ({ isFELibAvailable }: { isFELibAvailable: boolean }) => {
-    const { currentServerInfo } = useMainContext()
+    const { currentServerInfo, isEnterprise } = useMainContext()
 
     const currentVersion = currentServerInfo?.serverInfo?.currentVersion
-    const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
 
     const isVersionCompatible = isFELibAvailable === isEnterprise
 

src/Shared/Components/FeatureDescription/FeatureDescriptionModal.tsx

@@ -34,7 +34,6 @@ const FeatureDescriptionModalContent = ({
     imageVariant,
     SVGImage,
     imageStyles = {},
-    isEnterprise,
 }: Required<Omit<FeatureDescriptionModalProps, 'tabsConfig' | 'title'>>) => {
     const renderImage = () => {
         if (!SVGImage) {
@@ -70,7 +69,7 @@ const FeatureDescriptionModalContent = ({
                     dataTestId="feature-desc__view-doc"
                     showExternalIcon
                     variant={ButtonVariantType.secondary}
-                    isEnterprise={isEnterprise}
+                    onClick={closeModal}
                 />
             )}
             <Button
@@ -100,7 +99,6 @@ export const FeatureDescriptionModal = ({
     SVGImage,
     imageStyles = {},
     tabsConfig,
-    isEnterprise,
 }: FeatureDescriptionModalProps) => {
     const [selectedTabId, setSelectedTabId] = useState(tabsConfig?.[0]?.id ?? null)
     const selectedTab = tabsConfig?.find((tab) => tab.id === selectedTabId) ?? null
@@ -143,7 +141,6 @@ export const FeatureDescriptionModal = ({
                                 renderDescriptionContent={selectedTab.renderDescriptionContent}
                                 closeModal={closeModal}
                                 closeModalText={closeModalText}
-                                isEnterprise={isEnterprise}
                             />
                         </>
                     )
@@ -156,7 +153,6 @@ export const FeatureDescriptionModal = ({
                         imageStyles={imageStyles}
                         imageVariant={imageVariant}
                         renderDescriptionContent={renderDescriptionContent}
-                        isEnterprise={isEnterprise}
                     />
                 )}
             </div>

src/Shared/Components/FeatureDescription/FeatureTitleWithInfo.tsx

@@ -38,7 +38,6 @@ const FeatureTitleWithInfo = ({
     additionalContent,
     showInfoIcon = false,
     tabsConfig,
-    isEnterprise,
 }: DescriptorProps) => {
     const [showFeatureDescriptionModal, setShowFeatureDescriptionModal] = useState(false)
     const onClickInfoIcon = () => {
@@ -64,7 +63,6 @@ const FeatureTitleWithInfo = ({
                         documentationLink={docLink}
                         documentationLinkText={docLinkText}
                         dataTestid="info-tippy-button"
-                        isEnterprise={isEnterprise}
                     />
                 </div>
             )
@@ -97,7 +95,6 @@ const FeatureTitleWithInfo = ({
                 <FeatureDescriptionModal
                     title={title}
                     closeModal={closeModal}
-                    isEnterprise={isEnterprise}
                     closeModalText={closeModalText}
                     {...(Array.isArray(tabsConfig)
                         ? {

src/Shared/Components/FeatureDescription/types.ts

@@ -16,14 +16,14 @@
 
 import React, { ReactNode } from 'react'
 
-import { DocLinkProps } from '@Shared/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink'
 
 import { ImageType } from '../../../Common'
 import { Breadcrumb } from '../../../Common/BreadCrumb/Types'
 
-interface BaseFeatureDescriptionModalProps<T extends boolean = false> {
+interface BaseFeatureDescriptionModalProps {
     renderDescriptionContent?: () => ReactNode
-    docLink?: DocLinkProps<T>['docLinkKey']
+    docLink?: DocLinkProps<false>['docLinkKey']
     imageVariant?: ImageType
     SVGImage?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
     imageStyles?: React.CSSProperties
@@ -55,7 +55,6 @@ export type FeatureDescriptionModalProps = {
     title: string
     closeModalText?: string
     closeModal?: () => void
-    isEnterprise?: boolean
 } & (
     | (BaseFeatureDescriptionModalProps & {
           tabsConfig?: never
@@ -84,5 +83,4 @@ export type DescriptorProps = (
      * @default false
      */
     showInfoIcon?: boolean
-    isEnterprise?: boolean
 }

src/Shared/Components/Header/HelpButton.tsx

@@ -5,11 +5,12 @@ import { SliderButton } from '@typeform/embed-react'
 import { URLS } from '@Common/Constants'
 import { ComponentSizeType } from '@Shared/constants'
 import { useMainContext } from '@Shared/Providers'
+import { InstallationType } from '@Shared/types'
 
 import { ActionMenu, ActionMenuItemType } from '../ActionMenu'
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
-import { HelpButtonActionMenuProps, HelpButtonProps, HelpMenuItems, InstallationType } from './types'
+import { HelpButtonActionMenuProps, HelpButtonProps, HelpMenuItems } from './types'
 import { getHelpActionMenuOptions } from './utils'
 
 const CheckForUpdates = ({
@@ -40,14 +41,13 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt
     const [isActionMenuOpen, setIsActionMenuOpen] = useState(false)
 
     // HOOKS
-    const { currentServerInfo, handleOpenLicenseInfoDialog, licenseData, setGettingStartedClicked } = useMainContext()
+    const { handleOpenLicenseInfoDialog, licenseData, setGettingStartedClicked, isEnterprise } = useMainContext()
 
     // REFS
     const typeFormSliderButtonRef = useRef(null)
 
     // CONSTANTS
     const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}`
-    const isEnterprise = currentServerInfo?.serverInfo?.installationType === InstallationType.ENTERPRISE
 
     // HANDLERS
     const handleAnalytics = (option: ActionMenuItemType) => {

src/Shared/Components/Header/PageHeader.tsx

@@ -21,6 +21,7 @@ import Tippy from '@tippyjs/react'
 import { ReactComponent as ICCaretDownSmall } from '@Icons/ic-caret-down-small.svg'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
+import { InstallationType } from '@Shared/types'
 
 import { getAlphabetIcon, TippyCustomized, TippyTheme } from '../../../Common'
 import { MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../../Common/Constants'
@@ -31,7 +32,7 @@ import LogoutCard from '../LogoutCard'
 import { HelpButton } from './HelpButton'
 import { IframePromoButton } from './IframePromoButton'
 import { getServerInfo } from './service'
-import { InstallationType, PageHeaderType, ServerInfo } from './types'
+import { PageHeaderType, ServerInfo } from './types'
 import { getIsShowingLicenseData, handlePostHogEventUpdate, setActionWithExpiry } from './utils'
 
 import './pageHeader.scss'
@@ -48,7 +49,6 @@ const PageHeader = ({
     onClose,
     markAsBeta,
     tippyProps,
-    isEnterprise,
 }: PageHeaderType) => {
     const { loginCount, setLoginCount, showGettingStartedCard, setShowGettingStartedCard, licenseData } =
         useMainContext()
@@ -155,7 +155,6 @@ const PageHeader = ({
                     interactive
                     arrow
                     onClose={handleCloseSwitchThemeLocationTippyChange}
-                    isEnterprise={isEnterprise}
                     documentationLink={tippyRedirectLink}
                 >
                     <button

src/Shared/Components/Header/types.ts

@@ -14,18 +14,12 @@
  * limitations under the License.
  */
 
-import { ModuleStatus } from '@Shared/types'
+import { InstallationType, ModuleStatus } from '@Shared/types'
 
 import { DOCUMENTATION, ResponseType, TippyCustomizedProps } from '../../../Common'
 import { ActionMenuProps } from '../ActionMenu'
 
-export enum InstallationType {
-    OSS_KUBECTL = 'oss_kubectl',
-    OSS_HELM = 'oss_helm',
-    ENTERPRISE = 'enterprise',
-}
-
-export interface PageHeaderType<T extends boolean = false> {
+export interface PageHeaderType {
     headerName?: string
     showTabs?: boolean
     additionalHeaderInfo?: () => JSX.Element
@@ -36,14 +30,13 @@ export interface PageHeaderType<T extends boolean = false> {
     showCloseButton?: boolean
     onClose?: () => void
     markAsBeta?: boolean
-    tippyProps?: Pick<TippyCustomizedProps<T>, 'additionalContent'> & {
+    tippyProps?: Pick<TippyCustomizedProps<false>, 'additionalContent'> & {
         isTippyCustomized?: boolean
         tippyRedirectLink?: keyof typeof DOCUMENTATION
         TippyIcon?: React.FunctionComponent<any>
         tippyMessage?: string
         onClickTippyButton?: () => void
     }
-    isEnterprise?: boolean
 }
 
 export interface ServerInfo {

src/Shared/Components/InfoIconTippy/InfoIconTippy.tsx

@@ -32,8 +32,8 @@ const InfoIconTippy = <T extends boolean = false>({
     children,
     headingInfo,
     buttonPadding = 'p-0',
-    isEnterprise = false,
     isExternalLink,
+    openInNewTab,
 }: InfoIconTippyProps<T>) => (
     <TippyCustomized
         theme={TippyTheme.white}
@@ -52,8 +52,8 @@ const InfoIconTippy = <T extends boolean = false>({
         additionalContent={additionalContent}
         animation="shift-toward"
         duration={400}
-        isEnterprise={isEnterprise}
         isExternalLink={isExternalLink}
+        openInNewTab={openInNewTab}
     >
         {children || (
             <button

src/Shared/Components/License/License.components.tsx

@@ -90,6 +90,7 @@ const InstallationFingerprintInfo = ({ fingerprint, showHelpTooltip = false }: I
                     iconClassName="icon-dim-20 fcn-6"
                     placement="right"
                     documentationLink="ENTERPRISE_LICENSE"
+                    openInNewTab
                 />
             )}
         </div>

src/Shared/Components/ModalSidebarPanel/ModalSidebarPanel.component.tsx

@@ -24,7 +24,6 @@ const ModalSidebarPanel = ({
     icon,
     children,
     documentationLink,
-    isEnterprise = false,
 }: ModalSidebarPanelProps) => (
     <div className={`flexbox-col w-250 dc__gap-24 dc__modal-gradient ${rootClassName}`}>
         <div className="flexbox-col dc__gap-12">
@@ -43,7 +42,7 @@ const ModalSidebarPanel = ({
                 text="View documentation"
                 dataTestId="learn-more-about-modal-sidebar-panel-link"
                 showExternalIcon
-                isEnterprise={isEnterprise}
+                openInNewTab
             />
         </div>
     </div>

src/Shared/Components/ModalSidebarPanel/types.ts

@@ -16,14 +16,12 @@
 
 import { ReactNode } from 'react'
 
-import { DocLinkProps } from '@Shared/DocLink/types'
+import { DocLinkProps } from '@Shared/DocLink'
 
-import { PageHeaderType } from '../Header/types'
-
-export interface ModalSidebarPanelProps<T extends boolean = false> extends Pick<PageHeaderType, 'isEnterprise'> {
+export interface ModalSidebarPanelProps {
     rootClassName?: string
     heading: string | null
     icon?: JSX.Element
     children?: ReactNode
-    documentationLink: DocLinkProps<T>['docLinkKey']
+    documentationLink: DocLinkProps<false>['docLinkKey']
 }