Merge pull request #2768 from devtron-labs/feat/fe-misc-clone

shivani170 · web-flow · commit 4ed00556d0d5 · 2025-06-16T07:42:32.000Z
feat: fe misc clone
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.15.1-pre-5",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/Pages/App/CreateAppModal/AppClone/AppCloneList.tsx b/src/Pages/App/CreateAppModal/AppClone/AppCloneList.tsx
@@ -47,15 +47,17 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView, handleCreationMet
             <div className="flexbox-col dc__gap-12 pt-20 px-20">
                 <h2 className="m-0 fs-15 lh-1-5 fw-6 cn-9">Choose {isJobView ? 'a job' : 'an application'} to clone</h2>
 
-                <SearchBar
-                    dataTestId="template-list-search"
-                    initialSearchText={searchKey}
-                    size={ComponentSizeType.medium}
-                    handleEnter={handleSearch}
-                    inputProps={{
-                        placeholder: `Search ${isJobView ? 'job' : 'application'}`,
-                    }}
-                />
+                {!!list.length && !listError && (
+                    <SearchBar
+                        dataTestId="template-list-search"
+                        initialSearchText={searchKey}
+                        size={ComponentSizeType.medium}
+                        handleEnter={handleSearch}
+                        inputProps={{
+                            placeholder: `Search ${isJobView ? 'job' : 'application'}`,
+                        }}
+                    />
+                )}
             </div>
             <div className="flex-grow-1 flexbox-col dc__gap-12 p-20 dc__overflow-auto">
                 <GenericInfoCardListing
diff --git a/src/components/ApplicationGroup/List/EnvironmentsList.tsx b/src/components/ApplicationGroup/List/EnvironmentsList.tsx
@@ -18,6 +18,7 @@ import { useMemo } from 'react'
 
 import {
     ErrorScreenManager,
+    FeatureTitleWithInfo,
     FilterChips,
     FilterSelectPicker,
     GenericEmptyState,
@@ -39,6 +40,18 @@ import EnvironmentsListView from './EnvironmentListView'
 
 import './EnvironmentsList.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 Groups"
+        docLink="APP_GROUP"
+        showInfoIconTippy
+        renderDescriptionContent={renderAppGroupDescriptionContent}
+    />
+)
+
 const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
     const urlFilters = useUrlFilters<never, AppGroupUrlFiltersType>({
         parseSearchParams,
@@ -199,7 +212,7 @@ const EnvironmentsList = ({ isSuperAdmin }: AppGroupAdminType) => {
 
     return (
         <div className="flexbox-col h-100 dc__overflow-auto">
-            <PageHeader headerName="Application Groups" />
+            <PageHeader additionalHeaderInfo={renderAdditionalHeaderInfo} />
             {renderBody()}
         </div>
     )
diff --git a/src/components/Jobs/JobList/JobsList.tsx b/src/components/Jobs/JobList/JobsList.tsx
@@ -41,6 +41,7 @@ import {
 } from '../Types'
 import { getJobStatusLabelFromValue, parseSearchParams } from '../Utils'
 import JobListContainer from './JobListContainer'
+import { renderAdditionalJobsHeaderInfo } from './utils'
 
 import '../../app/list/list.scss'
 
@@ -157,7 +158,7 @@ const JobsList = () => {
             )}
             {dataStateType === JobListViewType.LIST && (
                 <>
-                    <HeaderWithCreateButton headerName="Jobs" />
+                    <HeaderWithCreateButton headerName="" additionalHeaderInfo={renderAdditionalJobsHeaderInfo} />
                     {renderCreateJobRouter()}
                     <JobListContainer
                         masterFilters={masterFilters}
diff --git a/src/components/Jobs/JobList/utils.tsx b/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
+    />
+)
diff --git a/src/components/Jobs/Jobs.tsx b/src/components/Jobs/Jobs.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 import { URLS } from '../../config'
 import { ErrorBoundary } from '../common'
diff --git a/src/components/ResourceBrowser/ResourceBrowser.tsx b/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()}
diff --git a/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx b/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx
@@ -116,25 +116,27 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
 
             {defaultOption?.isProd && <span className="px-6 py-2 br-4 bcb-1 cb-7 fs-12 lh-16 fw-5">Production</span>}
 
-            <PopupMenu autoClose>
-                <PopupMenu.Button rootClassName="flex ml-auto p-4 border__secondary" isKebab>
-                    <MenuDots className="icon-dim-16 fcn-7" data-testid="popup-menu-button" />
-                </PopupMenu.Button>
-
-                <PopupMenu.Body rootClassName="dc__border p-4">
-                    <div className="w-150 flexbox-col">
-                        <button
-                            type="button"
-                            className="dc__outline-none flexbox dc__gap-8 dc__transparent dc__hover-n50 px-12 py-6 dc__align-items-center"
-                            onClick={handleOpenDeleteModal}
-                            data-testid="delete_cluster_button"
-                        >
-                            <Icon name="ic-delete" color="R500" />
-                            <span className="fs-14 lh-1-5 cr-5">Delete</span>
-                        </button>
-                    </div>
-                </PopupMenu.Body>
-            </PopupMenu>
+            {defaultOption?.value !== String(DEFAULT_CLUSTER_ID) && (
+                <PopupMenu autoClose>
+                    <PopupMenu.Button rootClassName="flex ml-auto p-4 border__secondary" isKebab>
+                        <MenuDots className="icon-dim-16 fcn-7" data-testid="popup-menu-button" />
+                    </PopupMenu.Button>
+
+                    <PopupMenu.Body rootClassName="dc__border p-4">
+                        <div className="w-150 flexbox-col">
+                            <button
+                                type="button"
+                                className="dc__outline-none flexbox dc__gap-8 dc__transparent dc__hover-n50 px-12 py-6 dc__align-items-center"
+                                onClick={handleOpenDeleteModal}
+                                data-testid="delete_cluster_button"
+                            >
+                                <Icon name="ic-delete" color="R500" />
+                                <span className="fs-14 lh-1-5 cr-5">Delete</span>
+                            </button>
+                        </div>
+                    </PopupMenu.Body>
+                </PopupMenu>
+            )}
 
             {openDeleteClusterModal && (
                 <DeleteClusterConfirmationModal
diff --git a/src/components/ResourceBrowser/Utils.tsx b/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
+    />
+)
diff --git a/src/components/app/list-new/AppList.tsx b/src/components/app/list-new/AppList.tsx
@@ -29,6 +29,7 @@ import {
 
 import {
     AppListConstants,
+    FeatureTitleWithInfo,
     FilterChips,
     getNamespaceListMin,
     handleUTCTime,
@@ -420,9 +421,11 @@ const AppList = ({ isArgoInstalled }: AppListPropType) => {
         )
     }
 
+    const renderApplicationsInfo = () => <FeatureTitleWithInfo title="Applications" />
+
     return (
         <div ref={appListContainerRef} className="flexbox-col h-100 dc__overflow-auto">
-            <HeaderWithCreateButton headerName="Applications" />
+            <HeaderWithCreateButton headerName="" additionalHeaderInfo={renderApplicationsInfo} />
             <AppListFilters
                 filterConfig={filterConfig}
                 appCount={appCount}
diff --git a/src/components/charts/ChartCard.tsx b/src/components/charts/ChartCard.tsx
@@ -27,7 +27,6 @@ import {
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as ICCaretSmall } from '@Icons/ic-caret-left-small.svg'
 import { InteractiveCellText } from '@Components/common/helpers/InteractiveCellText/InteractiveCellText'
 
 import { ReactComponent as Helm } from '../../assets/icons/ic-default-chart.svg'
@@ -125,7 +124,7 @@ const ChartCard = ({
                         fontSize={14}
                     />
                     <div className="chart-name__arrow dc__no-shrink flex">
-                        <ICCaretSmall className="icon-dim-16 dc__flip-180 scb-5" />
+                        <Icon name="ic-caret-down-small" color="B500" rotateBy={270} />
                     </div>
                 </div>
                 {chart.deprecated && renderDeprecatedWarning()}
diff --git a/src/components/charts/ChartGroupAdvanceDeploy.tsx b/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 }>()
diff --git a/src/components/charts/ChartGroupDetails.tsx b/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 }>()
diff --git a/src/components/charts/list/DiscoverCharts.tsx b/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"
@@ -526,7 +503,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
                                                     !searchApplied &&
                                                     !selectedChartRepo.length &&
                                                     !chartCategoryIds.length &&
-                                                    !!state.charts.length && (
+                                                    !!chartList.length && (
                                                         <ChartGroupListMin
                                                             chartGroups={state.chartGroups.slice(0, isGrid ? 5 : 1)}
                                                             showChartGroupModal={showChartGroupModal}
diff --git a/src/components/charts/list/utils.tsx b/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,
+        }))
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1125,10 +1125,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.15.1-pre-5":
-  version "1.15.1-pre-5"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.1-pre-5.tgz#5a0e58d329f066193961700c7eb2ac9f4f3e0757"
-  integrity sha512-71Ik06tlMy/Zd7l/XwyGeJqEkQcCxUjMyz+kDMz0jKVPCCyHSyZys2TvcHCTYRf/WRM3rmt0jvUvm+v5HL2WxA==
+"@devtron-labs/devtron-fe-common-lib@1.15.3":
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.15.3.tgz#54931912caa555562ff606f8a2ca9e92870503c2"
+  integrity sha512-shKgYUEfGQDXSRb1fLyodKxEzR2hollEkwPZEHyLkBIYuf7oki1MZfGRDQhvGQN8lDK3xEkqqmLasqOHIwmwtA==
   dependencies:
     "@codemirror/lang-json" "6.0.1"
     "@codemirror/lang-yaml" "6.1.2"
