Merge pull request #2708 from devtron-labs/feat/doc-utm-source

feat: doc utm source

Author: shivani170

.env

@@ -69,3 +69,4 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
 FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
+FEATURE_REDFISH_NODE_ENABLE=false

package.json

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

src/Pages/App/CreateAppModal/Sidebar.tsx

@@ -16,8 +16,6 @@
 
 import { ModalSidebarPanel } from '@devtron-labs/devtron-fe-common-lib'
 
-import { DOCUMENTATION } from '@Config/constants'
-
 import { CreationMethodType, SidebarProps } from './types'
 
 const Sidebar = ({
@@ -80,7 +78,7 @@ const Sidebar = ({
             <div className="divider__secondary--horizontal" />
             <ModalSidebarPanel
                 heading={null}
-                documentationLink={isJobView ? DOCUMENTATION.JOBS : DOCUMENTATION.APP_CREATE}
+                documentationLink={isJobView ? 'JOBS' : 'APP_CREATE'}
                 rootClassName="w-100 dc__no-background-imp"
             >
                 <div className="flexbox-col dc__gap-24">{isJobView ? renderJobContent() : renderAppContent()}</div>

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts

@@ -20,12 +20,13 @@ import {
     AppConfigProps,
     BASE_CONFIGURATION_ENV_ID,
     ConfigResourceType,
+    getDocumentationUrl,
     ResourceKindType,
     stringComparatorBySortOrder,
     URLS as CommonURLS,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { APP_COMPOSE_STAGE, DOCUMENTATION, getAppComposeURL, URLS } from '@Config/index'
+import { APP_COMPOSE_STAGE, getAppComposeURL, URLS } from '@Config/index'
 
 import { AppConfigStatusItemType, EnvConfigDTO } from '../../service.types'
 import { AppConfigState, AppStageUnlockedType, CustomNavItemsType, EnvConfigType, STAGE_NAME } from './AppConfig.types'
@@ -137,7 +138,7 @@ export const getNavItems = ({
                         href: `/job/${appId}/edit/materials`,
                         stage: STAGE_NAME.GIT_MATERIAL,
                         isLocked: !_isUnlocked.material,
-                        supportDocumentURL: DOCUMENTATION.JOB_SOURCE_CODE,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'JOB_SOURCE_CODE' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         required: true,
@@ -147,7 +148,7 @@ export const getNavItems = ({
                         href: `/job/${appId}/edit/workflow`,
                         stage: STAGE_NAME.WORKFLOW,
                         isLocked: !_isUnlocked.workflowEditor,
-                        supportDocumentURL: DOCUMENTATION.JOB_WORKFLOW_EDITOR,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'JOB_WORKFLOW_EDITOR' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         required: true,
@@ -165,7 +166,7 @@ export const getNavItems = ({
                         href: getAppComposeURL(appId, APP_COMPOSE_STAGE.CONFIG_MAPS, true, isTemplateView),
                         stage: STAGE_NAME.CONFIGMAP,
                         isLocked: !_isUnlocked.configmap,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_CONFIG_MAP,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_CONFIG_MAP' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         isProtectionAllowed: true,
@@ -177,7 +178,7 @@ export const getNavItems = ({
                         href: getAppComposeURL(appId, APP_COMPOSE_STAGE.SECRETS, true, isTemplateView),
                         stage: STAGE_NAME.SECRETS,
                         isLocked: !_isUnlocked.secret,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_SECRET,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_SECRET' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         isProtectionAllowed: true,
@@ -203,7 +204,7 @@ export const getNavItems = ({
                         href: `${basePath}/edit/materials`,
                         stage: STAGE_NAME.GIT_MATERIAL,
                         isLocked: !_isUnlocked.material,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_MATERIAL,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_MATERIAL' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         required: true,
@@ -213,7 +214,7 @@ export const getNavItems = ({
                         href: `${basePath}/edit/docker-build-config`,
                         stage: STAGE_NAME.CI_CONFIG,
                         isLocked: !_isUnlocked.dockerBuildConfig,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_CI_CONFIG,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_CI_CONFIG' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         required: true,
@@ -232,7 +233,7 @@ export const getNavItems = ({
                         href: getAppComposeURL(appId, APP_COMPOSE_STAGE.DEPLOYMENT_TEMPLATE, null, isTemplateView),
                         stage: STAGE_NAME.DEPLOYMENT_TEMPLATE,
                         isLocked: !_isUnlocked.deploymentTemplate,
-                        supportDocumentURL: DOCUMENTATION.APP_DEPLOYMENT_TEMPLATE,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_DEPLOYMENT_TEMPLATE' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         isProtectionAllowed: true,
@@ -254,7 +255,7 @@ export const getNavItems = ({
                         href: `${basePath}/edit/workflow`,
                         stage: STAGE_NAME.WORKFLOW,
                         isLocked: !_isUnlocked.workflowEditor,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_WORKFLOW,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_WORKFLOW' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         required: true,
@@ -264,7 +265,7 @@ export const getNavItems = ({
                         href: getAppComposeURL(appId, APP_COMPOSE_STAGE.CONFIG_MAPS, null, isTemplateView),
                         stage: STAGE_NAME.CONFIGMAP,
                         isLocked: !_isUnlocked.configmap,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_CONFIG_MAP,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_CONFIG_MAP' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         isProtectionAllowed: true,
@@ -276,7 +277,7 @@ export const getNavItems = ({
                         href: getAppComposeURL(appId, APP_COMPOSE_STAGE.SECRETS, null, isTemplateView),
                         stage: STAGE_NAME.SECRETS,
                         isLocked: !_isUnlocked.secret,
-                        supportDocumentURL: DOCUMENTATION.APP_CREATE_SECRET,
+                        supportDocumentURL: getDocumentationUrl({ docLinkKey: 'APP_CREATE_SECRET' }),
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                         isProtectionAllowed: true,
@@ -291,7 +292,7 @@ export const getNavItems = ({
                                   href: `${basePath}/edit/external-links`,
                                   stage: STAGE_NAME.EXTERNAL_LINKS,
                                   isLocked: false,
-                                  supportDocumentURL: DOCUMENTATION.EXTERNAL_LINKS,
+                                  supportDocumentURL: getDocumentationUrl({ docLinkKey: 'EXTERNAL_LINKS' }),
                                   flowCompletionPercent: completedPercent,
                                   currentStep: completedSteps,
                               },

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx

@@ -19,6 +19,7 @@ import { useState } from 'react'
 import {
     ComponentSizeType,
     DeploymentChartVersionType,
+    DocLink,
     InvalidYAMLTippyWrapper,
     PipelineMigratedFromType,
     PopupMenu,
@@ -181,15 +182,11 @@ const ChartSelectorDropdown = ({
                                             chart.description.substring(0, 250)}
                                          
                                         {CHART_DOCUMENTATION_LINK[chart.name] && (
-                                            <a
-                                                className="dc__no-decor"
-                                                href={CHART_DOCUMENTATION_LINK[chart.name]}
-                                                target="_blank"
-                                                rel="noreferrer noopener"
+                                            <DocLink
+                                                docLinkKey={CHART_DOCUMENTATION_LINK[chart.name]}
+                                                dataTestId="chart-doc-link"
                                                 onClick={stopPropagation}
-                                            >
-                                                Learn more
-                                            </a>
+                                            />
                                         )}
                                     </div>
                                 )}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts

@@ -16,17 +16,15 @@
 
 import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 
-import { DOCUMENTATION } from '@Config/constants'
-
 export const PROTECT_BASE_DEPLOYMENT_TEMPLATE_IDENTIFIER_DTO = 'BaseDeploymentTemplate' as const
 
 export const CHART_TYPE_TAB_KEYS = { DEVTRON_CHART: 'devtronChart', CUSTOM_CHARTS: 'customCharts' }
 export const CHART_TYPE_TAB = { devtronChart: 'Charts by Devtron', customCharts: 'Custom charts' }
 
 export const CHART_DOCUMENTATION_LINK = {
-    'Job & CronJob': DOCUMENTATION.JOB_CRONJOB,
-    'Rollout Deployment': DOCUMENTATION.ROLLOUT,
-    Deployment: DOCUMENTATION.DEPLOYMENT,
+    'Job & CronJob': 'JOB_CRONJOB',
+    'Rollout Deployment': 'ROLLOUT',
+    Deployment: 'DEPLOYMENT',
 }
 
 export const GUI_VIEW_TEXTS = {

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx

@@ -16,7 +16,6 @@
 
 import {
     ComponentSizeType,
-    DOCUMENTATION_HOME_PAGE,
     getSelectPickerOptionByValue,
     InfoIconTippy,
     noop,
@@ -104,7 +103,7 @@ const SelectMergeStrategy = ({
                         {PatchStrategyTooltipInfo && <PatchStrategyTooltipInfo />}
                     </OverrideStrategyTippyContent>
                 }
-                documentationLink={DOCUMENTATION_HOME_PAGE}
+                documentationLink="HOME_PAGE"
             />
 
             {renderContent()}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

@@ -18,8 +18,10 @@ import { Fragment, useEffect, useState } from 'react'
 import { Link, NavLink, useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
 import {
+    ComponentSizeType,
     ConfirmationDialog,
     DeleteConfirmationModal,
+    DocLink,
     EnvResourceType,
     getEnvironmentListMinPublic,
     InfoBlock,
@@ -39,7 +41,7 @@ import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-o
 import warn from '../../../../../../assets/icons/ic-warning.svg'
 import { createClusterEnvGroup, usePrevious } from '../../../../../../components/common'
 import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
-import { DOCUMENTATION, URLS } from '../../../../../../config'
+import { URLS } from '../../../../../../config'
 import { addJobEnvironment, deleteJobEnvironment, getCIConfig } from '../../../../../../services/service'
 import { AppConfigState, JobEnvOverrideRouteProps } from '../AppConfig.types'
 import { useAppConfigurationContext } from '../AppConfiguration.provider'
@@ -49,14 +51,11 @@ const EnvOverridesHelpNote = () => (
     <div className="fs-12 fw-4 lh-18">
         Environment overrides allow you to manage environment specific configurations after you’ve created deployment
         pipelines. &nbsp;
-        <a
-            className="dc__link"
-            href={DOCUMENTATION.APP_CREATE_ENVIRONMENT_OVERRIDE}
-            rel="noreferrer noopener"
-            target="_blank"
-        >
-            Learn more
-        </a>
+        <DocLink
+            docLinkKey="APP_CREATE_ENVIRONMENT_OVERRIDE"
+            dataTestId="env-overrides-learn-more"
+            size={ComponentSizeType.xs}
+        />
     </div>
 )
 

src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx

@@ -33,7 +33,7 @@ import {
 
 import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
 import { importComponentFromFELibrary } from '../../../../components/common'
-import { DOCUMENTATION, REQUIRED_FIELDS_MISSING } from '../../../../config'
+import { REQUIRED_FIELDS_MISSING } from '../../../../config'
 import { API_COMPONENTS } from '../../../../config/constantMessaging'
 import { createOrUpdateUser } from '../authorization.service'
 import { getDefaultUserStatusAndTimeout } from '../libUtils'
@@ -57,7 +57,7 @@ export const renderQuestionwithTippy = () => (
     <InfoIconTippy
         heading={API_COMPONENTS.TITLE}
         infoText={API_COMPONENTS.QUESTION_ICON_INFO}
-        documentationLink={DOCUMENTATION.GLOBAL_CONFIG_API_TOKEN}
+        documentationLink="GLOBAL_CONFIG_API_TOKEN"
         documentationLinkText="View Documentation"
         iconClassName="icon-dim-20 fcn-9 ml-4"
     />

src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx

@@ -20,14 +20,12 @@ import {
     Button,
     ButtonComponentType,
     ComponentSizeType,
-    InfoIconTippy,
+    FeatureTitleWithInfo,
     SearchBar,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-add.svg'
-import { ReactComponent as ArrowSquareOut } from '../../../../../assets/icons/ic-arrow-square-out.svg'
-import { DOCUMENTATION } from '../../../../../config'
 import ExportPermissionGroupsToCsv from './ExportPermissionGroupsToCsv'
 import { PermissionGroupListHeaderProps } from './types'
 
@@ -43,24 +41,13 @@ const PermissionGroupListHeader = ({
     return (
         <div className="flex dc__content-space pl-20 pr-20 pt-16">
             <div className="flex dc__gap-8">
-                <h2 className="fs-16 lh-32 cn-9 fw-6 m-0">Permission Groups</h2>
-                <InfoIconTippy
-                    infoText="Permission groups allow you to easily manage user permissions by assigning desired permissions to a group and assigning these groups to users to provide all underlying permissions."
-                    heading="Permission Groups"
-                    additionalContent={
-                        <div className="pl-12 pb-12">
-                            <a
-                                href={DOCUMENTATION.GLOBAL_CONFIG_GROUPS}
-                                target="_blank"
-                                rel="noreferrer noreferrer"
-                                className="anchor flexbox flex-align-center fs-13 dc__gap-4"
-                            >
-                                View Documentation
-                                <ArrowSquareOut className="icon-dim-14 scb-5" />
-                            </a>
-                        </div>
+                <FeatureTitleWithInfo
+                    title="Permission Groups"
+                    renderDescriptionContent={() =>
+                        'Permission groups allow you to easily manage user permissions by assigning desired permissions to a group and assigning these groups to users to provide all underlying permissions.'
                     }
-                    iconClassName="mw-20 icon-dim-20 fcn-6"
+                    docLink="GLOBAL_CONFIG_GROUPS"
+                    showInfoIconTippy
                 />
             </div>
             <div className="flex dc__gap-8">