Merge pull request #754 from devtron-labs/feat/open-doc-link

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

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.14.1-pre-4",
+    "version": "1.14.1-pre-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -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/CustomTagSelector/PropagateTagInfo.tsx

@@ -23,7 +23,7 @@ import 'tippy.js/animations/shift-toward-subtle.css'
 import 'tippy.js/animations/shift-toward.css'
 import { TippyCustomizedProps, TippyTheme } from './Types'
 import { not, stopPropagation } from './Helper'
-import { DocLink } from '../Shared/DocLink'
+import { DocLink } from '@Shared/Components'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
@@ -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/TippyCustomized.tsx

@@ -28,12 +28,12 @@ import {
     ButtonProps,
     ComponentLayoutType,
     StatusType,
+    DocLinkProps,
 } from '../Shared'
 import {
     ACTION_STATE,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
-    DOCUMENTATION,
     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/Common/Types.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-export * from '../Shared/DocLink'
 export * from './AddCDButton'
 export * from './API'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'

src/Common/index.ts

@@ -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/AboutDevtron/AboutDevtronBody.tsx

@@ -24,12 +24,12 @@ import folder from '@Icons/ic-folder.svg'
 import { ReactComponent as ICHelpOutline } from '@Icons/ic-help.svg'
 import { ReactComponent as MechanicalOperation } from '@Icons/ic-mechanical-operation.svg'
 import noartifact from '@Images/no-artifact.webp'
-import { DocLink } from '@Shared/DocLink'
 import { getIsApprovalPolicyConfigured } from '@Shared/Helpers'
 import { useDownload } from '@Shared/Hooks'
 
 import { ClipboardButton, extractImage, GenericEmptyState, ImageTagsContainer, useGetUserRoles } from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
+import { DocLink } from '../DocLink'
 import { TargetPlatformBadgeList } from '../TargetPlatforms'
 import { TERMINAL_STATUS_MAP } from './constants'
 import { ArtifactType, CIListItemType } from './types'

src/Shared/Components/CICDHistory/Artifacts.tsx

@@ -23,7 +23,6 @@ import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
 import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
 import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
-import { DocLink } from '@Shared/DocLink'
 import { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers'
 import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
 
@@ -40,6 +39,7 @@ import {
     useRegisterShortcut,
     useUrlFilters,
 } from '../../../Common'
+import { DocLink } from '../DocLink'
 import {
     EVENT_STREAM_EVENTS_MAP,
     LOGS_RETRY_COUNT,

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -0,0 +1,57 @@
+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 { useMainContext } from '@Shared/Providers'
+
+import { DocLinkProps } from './types'
+import { getDocumentationUrl } from './utils'
+
+export const DocLink = <T extends boolean = false>({
+    docLinkKey,
+    text = 'Learn more',
+    dataTestId,
+    showExternalIcon,
+    onClick,
+    size = ComponentSizeType.medium,
+    variant = ButtonVariantType.text,
+    isExternalLink,
+    openInNewTab = false,
+    fullWidth = true,
+}: DocLinkProps<T>) => {
+    // HOOKS
+    const { isEnterprise, setSidePanelConfig } = useMainContext()
+
+    // CONSTANTS
+    const documentationLink = getDocumentationUrl({
+        docLinkKey,
+        isEnterprise,
+        isExternalLink,
+    })
+
+    // HANDLERS
+    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        if (!isExternalLink && !openInNewTab && !e.metaKey && documentationLink.startsWith(DOCUMENTATION_HOME_PAGE)) {
+            e.preventDefault()
+            setSidePanelConfig((prev) => ({ ...prev, open: true, docLink: documentationLink }))
+        }
+        onClick?.(e)
+    }
+
+    return (
+        <Button
+            component={ButtonComponentType.anchor}
+            anchorProps={{
+                href: documentationLink,
+            }}
+            onClick={handleClick}
+            dataTestId={dataTestId}
+            text={text}
+            variant={variant}
+            size={size}
+            endIcon={showExternalIcon && <Icon name="ic-open-in-new" color={null} />}
+            fullWidth={fullWidth}
+        />
+    )
+}