Merge pull request #820 from devtron-labs/chore/action-menu

feat: added utm to action menu href

Author: shivani170

package-lock.json

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

package.json

@@ -2,7 +2,9 @@ import { LegacyRef, MouseEvent, Ref } from 'react'
 import { Link } from 'react-router-dom'
 
 import { Tooltip } from '@Common/Tooltip'
+import { useMainContext } from '@Shared/Providers'
 
+import { getUTMPathAppended } from '../DocLink/utils'
 import { Icon } from '../Icon'
 import { getTooltipProps } from '../SelectPicker/common'
 import { TrailingItem } from '../TrailingItem'
@@ -30,6 +32,8 @@ export const ActionMenuItem = <T extends string | number>({
         componentType = 'button',
     } = item
 
+    const { isEnterprise } = useMainContext()
+
     // REFS
     const ref: LegacyRef<HTMLLIElement> = (el) => {
         if (isFocused && el) {
@@ -92,7 +96,7 @@ export const ActionMenuItem = <T extends string | number>({
                     <a
                         ref={itemRef as LegacyRef<HTMLAnchorElement>}
                         className={COMMON_ACTION_MENU_ITEM_CLASS}
-                        href={item.href}
+                        href={getUTMPathAppended({ isEnterprise, link: item.href })}
                         target="_blank"
                         rel="noreferrer"
                         onClick={handleClick}

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -25,3 +25,8 @@ export type DocLinkProps<T extends boolean = false> = Pick<
          */
         openInNewTab?: boolean
     }
+
+export interface URLWithUTMSource {
+    isEnterprise: BaseDocLink<false>['isEnterprise']
+    link?: string
+}

src/Shared/Components/DocLink/types.ts

@@ -1,7 +1,10 @@
 import { DOCUMENTATION_HOME_PAGE, DOCUMENTATION_VERSION } from '@Common/Constants'
 
 import { DOCUMENTATION } from './constants'
-import { BaseDocLink } from './types'
+import { BaseDocLink, URLWithUTMSource } from './types'
+
+export const getUTMPathAppended = ({ isEnterprise, link = '' }: URLWithUTMSource) =>
+    `${link}?utm_source=product_${isEnterprise ? 'ent' : 'oss'}&utm_medium=product_app&utm_campaign=docs_navigation`
 
 export const getDocumentationUrl = <T extends boolean = false>({
     docLinkKey,
@@ -19,9 +22,7 @@ export const getDocumentationUrl = <T extends boolean = false>({
         return docPath
     }
 
-    const utmPath = !isLicenseDashboard
-        ? `?utm_source=product_${isEnterprise ? 'ent' : 'oss'}&utm_medium=product_app&utm_campaign=docs_navigation`
-        : ''
+    const utmPath = !isLicenseDashboard ? getUTMPathAppended({ isEnterprise }) : ''
 
     return `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/${docPath || ''}${utmPath}`
 }