Merge branch 'kubecon-2025' of github.com:devtron-labs/devtron-fe-common-lib into feat/finops-uat

Author: Amrit Kashyap Borah

package-lock.json

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

package.json

@@ -4,14 +4,19 @@ import { Link } from 'react-router-dom'
 import { BreadcrumbText, getBreadCrumbSeparator } from './BreadcrumbStore'
 import { NestedBreadCrumbProps } from './Types'
 
-export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => {
+export const NestedBreadCrumb = ({
+    redirectUrl,
+    linkText,
+    profileName,
+    nestedBreadCrumbsText,
+}: NestedBreadCrumbProps) => {
     const breadcrumbLinkClass = 'active dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155'
 
     const breadcrumbs = [
         { type: 'link', label: linkText, to: redirectUrl },
         ...(profileName
             ? [
-                  { type: 'link', label: 'Profiles', to: redirectUrl },
+                  ...(nestedBreadCrumbsText ? [{ type: 'link', label: nestedBreadCrumbsText, to: redirectUrl }] : []),
                   {
                       type: 'text',
                       label: profileName,

src/Assets/IconV2/ic-cost-visibility.svg

@@ -67,4 +67,9 @@ export interface NestedBreadCrumbProps {
      * If not given, would show "Create Profile"
      */
     profileName: string
+    /**
+     * @default Profiles
+     * It is the text of the nested breadcrumb
+     */
+    nestedBreadCrumbsText?: string
 }

src/Common/BreadCrumb/NestedBreadCrumb.tsx

@@ -11,8 +11,8 @@ export const ApplicationManagementIcon = () => (
         linkProps={{
             to: URLS.APPLICATION_MANAGEMENT_APP,
         }}
-        ariaLabel="Redirect to Devtron Apps"
-        showAriaLabelInTippy={false}
+        ariaLabel="Application Management"
+        showAriaLabelInTippy
         icon={<Icon name="ic-grid-view" color={null} />}
     />
 )

src/Common/BreadCrumb/Types.ts

@@ -11,8 +11,8 @@ export const InfrastructureManagementIcon = () => (
         linkProps={{
             to: URLS.INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER,
         }}
-        ariaLabel="Redirect to Infrastructure Management Overview"
-        showAriaLabelInTippy={false}
+        ariaLabel="Infrastructure Management"
+        showAriaLabelInTippy
         icon={<Icon name="ic-cloud" color={null} />}
     />
 )

src/Pages-Devtron-2.0/ApplicationManagement/Shared/ApplicationManagementIcon/ApplicationManagementIcon.tsx

@@ -15,8 +15,8 @@ export const getAutomationEnablementBreadcrumbConfig = () => ({
                     to: URLS.AUTOMATION_AND_ENABLEMENT_JOB,
                 }}
                 icon={<Icon name="ic-bot" color={null} />}
-                ariaLabel="Redirect to Automation & Enablement Overview"
-                showAriaLabelInTippy={false}
+                ariaLabel="Automation & Enablement"
+                showAriaLabelInTippy
             />
         ),
         linked: true,

src/Pages-Devtron-2.0/InfrastructureManagement/Shared/InfrastructureManagementIcon/InfrastructureManagementIcon.tsx

@@ -37,6 +37,7 @@ const Descriptor = ({
                         redirectUrl={URLS.APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA_PROFILES}
                         linkText={BUILD_INFRA_TEXT.HEADING}
                         profileName={profileName}
+                        nestedBreadCrumbsText="Profiles"
                     />
                     <InfoIconTippy
                         infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}

src/Pages-Devtron-2.0/InfrastructureManagement/utils.tsx

@@ -72,6 +72,7 @@ import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
 import { ReactComponent as ICContainerRegistry } from '@IconsV2/ic-container-registry.svg'
 import { ReactComponent as ICCookr } from '@IconsV2/ic-cookr.svg'
 import { ReactComponent as ICCopy } from '@IconsV2/ic-copy.svg'
+import { ReactComponent as ICCostVisibility } from '@IconsV2/ic-cost-visibility.svg'
 import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
@@ -351,6 +352,7 @@ export const iconMap = {
     'ic-container': ICContainer,
     'ic-cookr': ICCookr,
     'ic-copy': ICCopy,
+    'ic-cost-visibility': ICCostVisibility,
     'ic-cpu': ICCpu,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,