From 77e7f3e5f3de1259d05b7cef3c5d7e2e4adf416c Mon Sep 17 00:00:00 2001 From: shivani170 Date: Mon, 29 Sep 2025 17:23:05 +0530 Subject: [PATCH 1/7] feat: breadcrumb optional in buildInfraDescription props --- .../GlobalConfigurations/BuildInfra/constants.tsx | 12 ------------ src/Pages/GlobalConfigurations/BuildInfra/types.tsx | 2 +- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx b/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx index 13fc6bf2f..24ee5e93a 100644 --- a/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx +++ b/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx @@ -19,7 +19,6 @@ import { ReactComponent as ICTag } from '@Icons/ic-tag.svg' import { ReactComponent as ICTimer } from '@Icons/ic-timer.svg' import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg' import { ReactComponent as ICMemory } from '@IconsV2/ic-memory.svg' -import { UseBreadcrumbProps } from '@Common/BreadCrumb/Types' import { CMSecretComponentType } from '@Shared/Services' import { @@ -82,17 +81,6 @@ export const BUILD_INFRA_TEXT = { INVALID_FORM_MESSAGE: 'Valid input is required for all mandatory fields.', } as const -export const BUILD_INFRA_BREADCRUMB: UseBreadcrumbProps = { - alias: { - 'application-management': null, - configurations: null, - 'build-infra': { - component:

{BUILD_INFRA_TEXT.HEADING}

, - linked: false, - }, - }, -} - export const BUILD_INFRA_LOCATOR_MARKER_MAP: Readonly> = { [BuildInfraLocators.CPU]: ICCpu, [BuildInfraLocators.MEMORY]: ICMemory, diff --git a/src/Pages/GlobalConfigurations/BuildInfra/types.tsx b/src/Pages/GlobalConfigurations/BuildInfra/types.tsx index f0abdba0a..3ce20e42a 100644 --- a/src/Pages/GlobalConfigurations/BuildInfra/types.tsx +++ b/src/Pages/GlobalConfigurations/BuildInfra/types.tsx @@ -81,7 +81,7 @@ export interface BuildInfraDescriptorProps { * In case we want to restrict the max-width */ additionalContainerClasses?: string - breadCrumbs: Breadcrumb[] + breadCrumbs?: Breadcrumb[] /** * Would stick at right of div */ From e9fbb9a3d3fcd8b15c47310b5fbfd7383ddec2ff Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 30 Sep 2025 14:11:33 +0530 Subject: [PATCH 2/7] chore: nested breadcrumb --- src/Common/BreadCrumb/BreadCrumb.tsx | 4 ++-- src/Common/BreadCrumb/BreadcrumbStore.tsx | 4 ++++ src/Common/BreadCrumb/NestedBreadCrumb.tsx | 24 ++++++++++++++++++++++ src/Common/Constants.ts | 1 + src/Common/index.ts | 1 + 5 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 src/Common/BreadCrumb/NestedBreadCrumb.tsx diff --git a/src/Common/BreadCrumb/BreadCrumb.tsx b/src/Common/BreadCrumb/BreadCrumb.tsx index 55077a9b5..5121d4dd8 100644 --- a/src/Common/BreadCrumb/BreadCrumb.tsx +++ b/src/Common/BreadCrumb/BreadCrumb.tsx @@ -16,7 +16,7 @@ import React, { useMemo, useEffect } from 'react' import { Link, useRouteMatch, useParams } from 'react-router-dom' -import { useBreadcrumbContext } from './BreadcrumbStore' +import { useBreadcrumbContext, getBreadCrumbSeparator } from './BreadcrumbStore' import { ConditionalWrap } from '../Helper' import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types' @@ -115,7 +115,7 @@ export const BreadCrumb: React.FC = ({ {idx + 1 !== filteredCrumbs.length && breadcrumb.name && ( - {sep} + getBreadCrumbSeparator(sep) )} ))} diff --git a/src/Common/BreadCrumb/BreadcrumbStore.tsx b/src/Common/BreadCrumb/BreadcrumbStore.tsx index 14b3ad4da..62f45428c 100644 --- a/src/Common/BreadCrumb/BreadcrumbStore.tsx +++ b/src/Common/BreadCrumb/BreadcrumbStore.tsx @@ -25,6 +25,10 @@ export const BreadcrumbText = ({ heading, isActive, shouldTruncate = false }: Br {heading} ) +export const getBreadCrumbSeparator = (sep: string = '/') => ( + {sep} +) + const Store = ({ children }) => { const [state, setState] = useState(initialState) return {children} diff --git a/src/Common/BreadCrumb/NestedBreadCrumb.tsx b/src/Common/BreadCrumb/NestedBreadCrumb.tsx new file mode 100644 index 000000000..eee850fc7 --- /dev/null +++ b/src/Common/BreadCrumb/NestedBreadCrumb.tsx @@ -0,0 +1,24 @@ +import { Link } from 'react-router-dom' + +import { BreadcrumbText, getBreadCrumbSeparator } from './BreadcrumbStore' + +export const NestedBreadCrumb = ({ + redirectUrl, + linkText, + profileName, +}: { + redirectUrl: string + linkText: string + profileName: string +}) => ( +
+ + {linkText} + + {getBreadCrumbSeparator()} + +
+) diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts index 711db97f0..fffd8238f 100644 --- a/src/Common/Constants.ts +++ b/src/Common/Constants.ts @@ -100,6 +100,7 @@ export const URLS = { APPLICATION_MANAGEMENT_CONFIGURATIONS_DEPLOYMENT_CHARTS: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/deployment-charts`, APPLICATION_MANAGEMENT_CONFIGURATIONS_SCOPED_VARIABLES: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/scoped-variables`, APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/build-infra`, + APPLICATION_MANAGEMENT_CONFIGURATIONS_BUILD_INFRA_PROFILES: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/build-infra/profiles`, APPLICATION_MANAGEMENT_CONFIGURATIONS_NOTIFICATIONS: `${APPLICATION_MANAGEMENT_CONFIGURATIONS}/notifications`, // INFRASTRUCTURE MANAGEMENT INFRASTRUCTURE_MANAGEMENT: INFRASTRUCTURE_MANAGEMENT_ROOT, diff --git a/src/Common/index.ts b/src/Common/index.ts index 44b595cc9..7295df8fb 100644 --- a/src/Common/index.ts +++ b/src/Common/index.ts @@ -18,6 +18,7 @@ export * from './AddCDButton' export * from './API' export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb' export { default as BreadcrumbStore, BreadcrumbText } from './BreadCrumb/BreadcrumbStore' +export { NestedBreadCrumb } from './BreadCrumb/NestedBreadCrumb' export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector' export * from './Checkbox' export * from './CIPipeline.Types' From 5e59b0278545bb8b3949076b197df0a54b0b03d8 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 30 Sep 2025 15:31:31 +0530 Subject: [PATCH 3/7] feat: types added for nested bread crump component --- src/Common/BreadCrumb/NestedBreadCrumb.tsx | 13 +++---------- src/Common/BreadCrumb/Types.ts | 6 ++++++ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Common/BreadCrumb/NestedBreadCrumb.tsx b/src/Common/BreadCrumb/NestedBreadCrumb.tsx index eee850fc7..2c42c8da3 100644 --- a/src/Common/BreadCrumb/NestedBreadCrumb.tsx +++ b/src/Common/BreadCrumb/NestedBreadCrumb.tsx @@ -1,17 +1,10 @@ import { Link } from 'react-router-dom' import { BreadcrumbText, getBreadCrumbSeparator } from './BreadcrumbStore' +import { NestedBreadCrumbProps } from './Types' -export const NestedBreadCrumb = ({ - redirectUrl, - linkText, - profileName, -}: { - redirectUrl: string - linkText: string - profileName: string -}) => ( -
+export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => ( +
Date: Tue, 30 Sep 2025 16:14:36 +0530 Subject: [PATCH 4/7] chore: resource context added in context switcher --- src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx | 3 ++- src/Shared/Components/ContextSwitcher/types.ts | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx index d58993707..1e9cb8b2d 100644 --- a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx +++ b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx @@ -45,6 +45,7 @@ export const ContextSwitcher = ({ optionListError, reloadOptionList, classNamePrefix, + resource, }: ContextSwitcherTypes) => { const selectRef = useRef>(null) const shouldShowToastRef = useRef(true) @@ -60,7 +61,7 @@ export const ContextSwitcher = ({ if (shouldShowToastRef.current) { ToastManager.showToast({ variant: ToastVariantType.shortcut, - text: 'to switch Applications', + text: `to switch ${resource}`, shortcuts: ['S'], }) } diff --git a/src/Shared/Components/ContextSwitcher/types.ts b/src/Shared/Components/ContextSwitcher/types.ts index 7be803ee4..465bb1563 100644 --- a/src/Shared/Components/ContextSwitcher/types.ts +++ b/src/Shared/Components/ContextSwitcher/types.ts @@ -36,6 +36,7 @@ export interface ContextSwitcherTypes > { options: GroupBase>[] isAppDataAvailable?: boolean + resource: 'Cluster' | 'Release' | 'Tenant' | 'Application' | 'Job' | 'Application Group' | 'Chart Store' } export interface RecentlyVisitedOptions extends SelectPickerOptionType { From 874dea20cd2f0b6b88fa7d94c555711dc8890ed2 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 30 Sep 2025 17:12:43 +0530 Subject: [PATCH 5/7] chore: revert switch content --- package-lock.json | 4 ++-- package.json | 2 +- src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx | 3 +-- src/Shared/Components/ContextSwitcher/types.ts | 1 - 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d5984284..eade387da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.3-pre-10", + "version": "1.20.3-pre-11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.3-pre-10", + "version": "1.20.3-pre-11", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index b63d3935f..4bbcd6169 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.3-pre-10", + "version": "1.20.3-pre-11", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx index 1e9cb8b2d..d58993707 100644 --- a/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx +++ b/src/Shared/Components/ContextSwitcher/ContextSwitcher.tsx @@ -45,7 +45,6 @@ export const ContextSwitcher = ({ optionListError, reloadOptionList, classNamePrefix, - resource, }: ContextSwitcherTypes) => { const selectRef = useRef>(null) const shouldShowToastRef = useRef(true) @@ -61,7 +60,7 @@ export const ContextSwitcher = ({ if (shouldShowToastRef.current) { ToastManager.showToast({ variant: ToastVariantType.shortcut, - text: `to switch ${resource}`, + text: 'to switch Applications', shortcuts: ['S'], }) } diff --git a/src/Shared/Components/ContextSwitcher/types.ts b/src/Shared/Components/ContextSwitcher/types.ts index 465bb1563..7be803ee4 100644 --- a/src/Shared/Components/ContextSwitcher/types.ts +++ b/src/Shared/Components/ContextSwitcher/types.ts @@ -36,7 +36,6 @@ export interface ContextSwitcherTypes > { options: GroupBase>[] isAppDataAvailable?: boolean - resource: 'Cluster' | 'Release' | 'Tenant' | 'Application' | 'Job' | 'Application Group' | 'Chart Store' } export interface RecentlyVisitedOptions extends SelectPickerOptionType { From 9bf2565bd65396a865b8b069180a2d92471a862e Mon Sep 17 00:00:00 2001 From: shivani170 Date: Wed, 1 Oct 2025 13:49:28 +0530 Subject: [PATCH 6/7] chore: BuildInfraDescriptorProps type & NestedBreadCrumb component refactoring --- src/Common/BreadCrumb/NestedBreadCrumb.tsx | 39 +++++++++++++------ .../BuildInfra/Descriptor.tsx | 10 +++-- .../GlobalConfigurations/BuildInfra/types.tsx | 25 ++++++++---- 3 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/Common/BreadCrumb/NestedBreadCrumb.tsx b/src/Common/BreadCrumb/NestedBreadCrumb.tsx index 2c42c8da3..d0ef0aa40 100644 --- a/src/Common/BreadCrumb/NestedBreadCrumb.tsx +++ b/src/Common/BreadCrumb/NestedBreadCrumb.tsx @@ -1,17 +1,32 @@ +import React from 'react' import { Link } from 'react-router-dom' import { BreadcrumbText, getBreadCrumbSeparator } from './BreadcrumbStore' import { NestedBreadCrumbProps } from './Types' -export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedBreadCrumbProps) => ( -
- - {linkText} - - {getBreadCrumbSeparator()} - -
-) +export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: 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 }, + { type: 'link', label: 'Profiles', to: redirectUrl }, + { type: 'text', label: profileName }, + ] + + return ( +
+ {breadcrumbs.map((crumb, index) => ( + + {crumb.type === 'link' ? ( + + {crumb.label} + + ) : ( + + )} + {index < breadcrumbs.length - 1 && getBreadCrumbSeparator()} + + ))} +
+ ) +} diff --git a/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx b/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx index 37853c59f..15f5879d9 100644 --- a/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +++ b/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx @@ -14,26 +14,30 @@ * limitations under the License. */ +import { NestedBreadCrumb, URLS } from '@Common/index' import { InfoIconTippy } from '@Shared/Components/InfoIconTippy' -import { BreadCrumb } from '../../../Common' import { BUILD_INFRA_TEXT } from './constants' import { BuildInfraDescriptorProps } from './types' const Descriptor = ({ additionalContainerClasses, - breadCrumbs, children, tippyInfoText, tippyAdditionalContent, tooltipNode, tooltipHeading, + profileName, }: BuildInfraDescriptorProps) => (
{tooltipNode || ( <> - + Date: Wed, 1 Oct 2025 14:15:08 +0530 Subject: [PATCH 7/7] chore: breadcrumbs refactoring of NestedBreadCrumb --- src/Common/BreadCrumb/NestedBreadCrumb.tsx | 16 ++++++++++++++-- src/Common/BreadCrumb/Types.ts | 10 ++++++++++ .../BuildInfra/Descriptor.tsx | 2 +- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/Common/BreadCrumb/NestedBreadCrumb.tsx b/src/Common/BreadCrumb/NestedBreadCrumb.tsx index d0ef0aa40..62cd77e1f 100644 --- a/src/Common/BreadCrumb/NestedBreadCrumb.tsx +++ b/src/Common/BreadCrumb/NestedBreadCrumb.tsx @@ -9,8 +9,20 @@ export const NestedBreadCrumb = ({ redirectUrl, linkText, profileName }: NestedB const breadcrumbs = [ { type: 'link', label: linkText, to: redirectUrl }, - { type: 'link', label: 'Profiles', to: redirectUrl }, - { type: 'text', label: profileName }, + ...(profileName + ? [ + { type: 'link', label: 'Profiles', to: redirectUrl }, + { + type: 'text', + label: profileName, + }, + ] + : [ + { + type: 'text', + label: 'Create Profile', + }, + ]), ] return ( diff --git a/src/Common/BreadCrumb/Types.ts b/src/Common/BreadCrumb/Types.ts index 8f0105328..2be48a998 100644 --- a/src/Common/BreadCrumb/Types.ts +++ b/src/Common/BreadCrumb/Types.ts @@ -54,7 +54,17 @@ export interface BreadcrumbTextProps { } export interface NestedBreadCrumbProps { + /** + * It is the url to which the link should redirect + */ redirectUrl: string + /** + * It is the text of the link + */ linkText: string + /** + * It is the name of the profile + * If not given, would show "Create Profile" + */ profileName: string } diff --git a/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx b/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx index 15f5879d9..033cbe14a 100644 --- a/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx +++ b/src/Pages/GlobalConfigurations/BuildInfra/Descriptor.tsx @@ -23,9 +23,9 @@ import { BuildInfraDescriptorProps } from './types' const Descriptor = ({ additionalContainerClasses, children, + tooltipNode, tippyInfoText, tippyAdditionalContent, - tooltipNode, tooltipHeading, profileName, }: BuildInfraDescriptorProps) => (