chore: doc link added

Author: shivani170

src/components/Jobs/JobList/JobsList.tsx

@@ -41,21 +41,10 @@ import {
 } from '../Types'
 import { getJobStatusLabelFromValue, parseSearchParams } from '../Utils'
 import JobListContainer from './JobListContainer'
+import { renderAdditionalJobsHeaderInfo } from './utils'
 
 import '../../app/list/list.scss'
 
-// const renderAppGroupDescriptionContent = () =>
-//     ' Application Groups represent an environment and display all applications deployed to it. They simplify deploying interdependent microservices by allowing you to build and deploy multiple applications together.'
-
-// const renderAdditionalHeaderInfo = () => (
-//     <FeatureTitleWithInfo
-//         title="Application Group"
-//         docLink="APP_GROUP"
-//         showInfoIconTippy
-//         renderDescriptionContent={renderAppGroupDescriptionContent}
-//     />
-// )
-
 const JobsList = () => {
     const { path } = useRouteMatch()
     const history = useHistory()
@@ -169,7 +158,7 @@ const JobsList = () => {
             )}
             {dataStateType === JobListViewType.LIST && (
                 <>
-                    <HeaderWithCreateButton headerName="Jobs" />
+                    <HeaderWithCreateButton renderAdditionalHeaderInfo={renderAdditionalJobsHeaderInfo} />
                     {renderCreateJobRouter()}
                     <JobListContainer
                         masterFilters={masterFilters}

src/components/Jobs/JobList/utils.tsx

@@ -0,0 +1,13 @@
+import { FeatureTitleWithInfo } from '@devtron-labs/devtron-fe-common-lib'
+
+const renderAppGroupDescriptionContent = () =>
+    'Job allows execution of repetitive tasks in a manual or automated manner. Execute custom tasks or choose from a library of preset plugins in your job pipeline.'
+
+export const renderAdditionalJobsHeaderInfo = () => (
+    <FeatureTitleWithInfo
+        title="Jobs"
+        docLink="JOBS"
+        renderDescriptionContent={renderAppGroupDescriptionContent}
+        showInfoIconTippy
+    />
+)

src/components/ResourceBrowser/ResourceBrowser.tsx

@@ -30,6 +30,7 @@ import { DEFAULT_CLUSTER_ID } from '@Pages/GlobalConfigurations/ClustersAndEnvir
 import { sortObjectArrayAlphabetically } from '../common'
 import { renderNewClusterButton } from './PageHeader.buttons'
 import { getClusterListing } from './ResourceBrowser.service'
+import { renderAdditionalBrowserHeaderInfo } from './Utils'
 
 const ResourceBrowser: React.FC = () => {
     const parentRef = useRef<HTMLDivElement>(null)
@@ -80,8 +81,8 @@ const ResourceBrowser: React.FC = () => {
     return (
         <div className="flexbox-col h-100 bg__primary" ref={parentRef}>
             <PageHeader
+                additionalHeaderInfo={renderAdditionalBrowserHeaderInfo}
                 isBreadcrumbs={false}
-                headerName="Kubernetes Resource Browser"
                 renderActionButtons={renderNewClusterButton(reloadDetailClusterList)}
             />
             {renderContent()}

src/components/ResourceBrowser/Utils.tsx

@@ -23,6 +23,7 @@ import {
     ALL_NAMESPACE_OPTION,
     ApiResourceGroupType,
     DATE_TIME_FORMAT_STRING,
+    FeatureTitleWithInfo,
     GVKType,
     InitTabType,
     K8sResourceDetailDataType,
@@ -416,3 +417,15 @@ export const getClusterChangeRedirectionUrl = (shouldRedirectToInstallationStatu
         : `${URLS.RESOURCE_BROWSER}/${id}/${
               ALL_NAMESPACE_OPTION.value
           }/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`
+
+const renderAppGroupDescriptionContent = () =>
+    'Job allows execution of repetitive tasks in a manual or automated manner. Execute custom tasks or choose from a library of preset plugins in your job pipeline.'
+
+export const renderAdditionalBrowserHeaderInfo = () => (
+    <FeatureTitleWithInfo
+        title="Kubernetes Resource Browser"
+        docLink="RESOURCE_BROWSER"
+        renderDescriptionContent={renderAppGroupDescriptionContent}
+        showInfoIconTippy
+    />
+)

src/components/charts/ChartGroupAdvanceDeploy.tsx

@@ -32,10 +32,10 @@ import MultiChartSummary from './MultiChartSummary'
 import useChartGroup from './useChartGroup'
 import { Select, mapByKey } from '../common'
 import AdvancedConfig from './AdvancedConfig'
-import { getDeployableChartsFromConfiguredCharts } from './list/DiscoverCharts'
 import { deployChartGroup } from './charts.service'
 import { ReactComponent as WarningIcon } from '../../assets/icons/ic-alert-triangle.svg'
 import { renderChartGroupDeploymentToastMessage } from './charts.helper'
+import { getDeployableChartsFromConfiguredCharts } from './list/utils'
 
 export default function ChartGroupAdvanceDeploy() {
     const { groupId } = useParams<{ groupId: string }>()

src/components/charts/ChartGroupDetails.tsx

@@ -38,7 +38,6 @@ import MultiChartSummary from './MultiChartSummary'
 import useChartGroup from './useChartGroup'
 import { URLS } from '../../config'
 import { ReactComponent as Pencil } from '@Icons/ic-pencil.svg'
-import { getDeployableChartsFromConfiguredCharts } from './list/DiscoverCharts'
 import {
     deployChartGroup,
     getChartGroupInstallationDetails,
@@ -51,6 +50,7 @@ import { DeleteComponentsName } from '../../config/constantMessaging'
 import { ChartSelector } from '../AppSelector'
 import NoGitOpsConfiguredWarning from '../workflowEditor/NoGitOpsConfiguredWarning'
 import { renderChartGroupDeploymentToastMessage } from './charts.helper'
+import { getDeployableChartsFromConfiguredCharts } from './list/utils'
 
 export default function ChartGroupDetails() {
     const { groupId } = useParams<{ groupId }>()

src/components/charts/list/DiscoverCharts.tsx

@@ -43,7 +43,7 @@ import DiscoverChartDetails from '../discoverChartDetail/DiscoverChartDetails'
 import MultiChartSummary from '../MultiChartSummary'
 import AdvancedConfig from '../AdvancedConfig'
 import useChartGroup from '../useChartGroup'
-import { DeployableCharts, deployChartGroup, getChartProviderList } from '../charts.service'
+import { deployChartGroup, getChartProviderList } from '../charts.service'
 import { ChartGroupEntry, Chart, EmptyCharts, ChartListType } from '../charts.types'
 import ChartGroupBasicDeploy from '../modal/ChartGroupBasicDeploy'
 import CreateChartGroup from '../modal/CreateChartGroup'
@@ -62,23 +62,7 @@ import { isGitOpsModuleInstalledAndConfigured } from '../../../services/service'
 import { ReactComponent as SourceIcon } from '../../../assets/icons/ic-source.svg'
 import ChartListPopUp from './ChartListPopUp'
 import ChartCardSkeletonRow from './ChartCardSkeleton'
-
-// TODO: move to service
-export function getDeployableChartsFromConfiguredCharts(charts: ChartGroupEntry[]): DeployableCharts[] {
-    return charts
-        .filter((chart) => chart.isEnabled)
-        .map((chart) => {
-            return {
-                appName: chart.name.value,
-                environmentId: chart.environment.id,
-                appStoreVersion: chart.appStoreApplicationVersionId,
-                valuesOverrideYaml: chart.valuesYaml,
-                referenceValueId: chart.appStoreValuesVersionId || chart.appStoreApplicationVersionId,
-                referenceValueKind: chart.kind,
-                chartGroupEntryId: chart.installedId,
-            }
-        })
-}
+import { getDeployableChartsFromConfiguredCharts, renderAdditionalChartHeaderInfo } from './utils'
 
 const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
     const { serverMode } = useMainContext()
@@ -233,13 +217,6 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
         }
     }
 
-    function reloadCallback(event): void {
-        event.preventDefault()
-        if (isLeavingPageNotAllowed.current) {
-            event.returnValue = 'Your changes will be lost. Do you want to reload without deploying?'
-        }
-    }
-
     async function handleInstall() {
         if (!project.id) {
             setProject((project) => ({ ...project, error: 'Project is mandatory for deployment.' }))
@@ -399,7 +376,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
                     <div className="flex dc__gap-16">
                         {state.charts.length === 0 ? (
                             <>
-                                <span className="fs-16 cn-9">Chart Store</span>
+                                {renderAdditionalChartHeaderInfo()}
                                 {isSuperAdmin && (
                                     <Button
                                         dataTestId="chart-store-source-button"

src/components/charts/list/utils.tsx

@@ -0,0 +1,30 @@
+import { FeatureTitleWithInfo } from '@devtron-labs/devtron-fe-common-lib'
+
+import { DeployableCharts } from '../charts.service'
+import { ChartGroupEntry } from '../charts.types'
+
+const renderChartStoreDescriptionContent = () =>
+    'The Chart Store offers popular third-party Helm charts for quick deployment. If you don’t find what you need, connect your own chart sources to fetch additional Helm charts.'
+
+export const renderAdditionalChartHeaderInfo = () => (
+    <FeatureTitleWithInfo
+        title="Chart Store"
+        showInfoIconTippy
+        docLink="CHART_STORE"
+        renderDescriptionContent={renderChartStoreDescriptionContent}
+    />
+)
+
+export function getDeployableChartsFromConfiguredCharts(charts: ChartGroupEntry[]): DeployableCharts[] {
+    return charts
+        .filter((chart) => chart.isEnabled)
+        .map((chart) => ({
+            appName: chart.name.value,
+            environmentId: chart.environment.id,
+            appStoreVersion: chart.appStoreApplicationVersionId,
+            valuesOverrideYaml: chart.valuesYaml,
+            referenceValueId: chart.appStoreValuesVersionId || chart.appStoreApplicationVersionId,
+            referenceValueKind: chart.kind,
+            chartGroupEntryId: chart.installedId,
+        }))
+}