From 272be7b4aa5caab00e5bd278b8707858801271df Mon Sep 17 00:00:00 2001 From: shivani170 Date: Thu, 13 Nov 2025 17:41:23 +0530 Subject: [PATCH 1/5] feat: info block css fix --- .../DeploymentConfigDiffNavigation.tsx | 31 +++++++------------ .../InfoBlock/InfoBlock.component.tsx | 2 +- 2 files changed, 13 insertions(+), 20 deletions(-) diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx index 432b91b2e..4da62eae4 100644 --- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx +++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx @@ -14,14 +14,16 @@ * limitations under the License. */ -import { ChangeEvent, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { Link, NavLink } from 'react-router-dom' import Tippy from '@tippyjs/react' import { ReactComponent as ICClose } from '@Icons/ic-close.svg' import { ReactComponent as ICError } from '@Icons/ic-error.svg' import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg' -import { StyledRadioGroup } from '@Common/index' +import { SegmentedControl } from '@Common/index' +import { SegmentType } from '@Common/SegmentedControl/types' +import { ComponentSizeType } from '@Shared/constants' import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList' import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants' @@ -87,11 +89,8 @@ export const DeploymentConfigDiffNavigation = ({ } /** Handles tab click. */ - const onTabClick = (e: ChangeEvent) => { - const { value } = e.target - if (tabConfig?.activeTab !== value) { - tabConfig?.onClick?.(value) - } + const onTabClick = (segment: SegmentType) => { + tabConfig?.onClick?.(segment.value as string) } // RENDERERS @@ -113,19 +112,13 @@ export const DeploymentConfigDiffNavigation = ({ return (
- ({ label: tab, value: tab }))} + value={activeTab} onChange={onTabClick} - disabled={isLoading} - className="gui-yaml-switch deployment-config-diff__tab-list" - > - {tabs.map((tab) => ( - - {tab} - - ))} - + name="deployment-config-diff-tab-list" + size={ComponentSizeType.xs} + />
) } diff --git a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx index 194cd67a1..9ebecb106 100644 --- a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx +++ b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx @@ -98,7 +98,7 @@ const InfoBlock = ({ if (layout === 'row') { return (
-
+
{renderIcon()} {renderContent()}
From 051b28b3275fe50761603322afe89fd0d6c51c71 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Mon, 17 Nov 2025 15:42:53 +0530 Subject: [PATCH 2/5] chore: styled group removed --- src/Common/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Common/index.ts b/src/Common/index.ts index 7295df8fb..e5d948307 100644 --- a/src/Common/index.ts +++ b/src/Common/index.ts @@ -53,7 +53,6 @@ export * from './Policy.Types' export { default as PopupMenu } from './PopupMenu' export * from './Progressing' export { default as RadioGroup } from './RadioGroup' -export { default as StyledRadioGroup } from './RadioGroup/RadioGroup' export { default as RadioGroupItem } from './RadioGroupItem' export { default as Reload } from './Reload' export * from './RJSF' From 742cfedad69ec9ed71246fbd8ac32efd68d6db74 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 18 Nov 2025 13:25:08 +0530 Subject: [PATCH 3/5] chore: segment control generic type --- src/Common/SegmentedControl/Segment.tsx | 10 +++++++++- .../SegmentedControl.component.tsx | 8 ++++---- src/Common/SegmentedControl/types.ts | 20 +++++++++---------- .../DeploymentConfigDiffNavigation.tsx | 4 ++-- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/Common/SegmentedControl/Segment.tsx b/src/Common/SegmentedControl/Segment.tsx index 6210902e2..e07e40f4f 100644 --- a/src/Common/SegmentedControl/Segment.tsx +++ b/src/Common/SegmentedControl/Segment.tsx @@ -32,7 +32,15 @@ const wrapWithTooltip = (tooltipProps: SegmentType['tooltipProps']) => (children ) -const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disabled }: SegmentProps) => { +const Segment = ({ + segment, + isSelected, + name, + onChange, + fullWidth, + size, + disabled, +}: SegmentProps) => { const inputId = useMemo(getUniqueId, []) const { value, icon, isError, label, tooltipProps, ariaLabel } = segment diff --git a/src/Common/SegmentedControl/SegmentedControl.component.tsx b/src/Common/SegmentedControl/SegmentedControl.component.tsx index 9e1bb1a09..97564a120 100644 --- a/src/Common/SegmentedControl/SegmentedControl.component.tsx +++ b/src/Common/SegmentedControl/SegmentedControl.component.tsx @@ -23,7 +23,7 @@ import { SegmentedControlProps, SegmentType } from './types' import './segmentedControl.scss' -const SegmentedControl = ({ +const SegmentedControl = ({ segments, onChange, name, @@ -31,12 +31,12 @@ const SegmentedControl = ({ value: controlledValue, fullWidth = false, disabled, -}: SegmentedControlProps) => { +}: SegmentedControlProps) => { const isUnControlledComponent = controlledValue === undefined - const [selectedSegmentValue, setSelectedSegmentValue] = useState(segments[0].value) + const [selectedSegmentValue, setSelectedSegmentValue] = useState['value'] | null>(segments[0].value) const segmentValue = isUnControlledComponent ? selectedSegmentValue : controlledValue - const handleSegmentChange = (updatedSegment: SegmentType) => { + const handleSegmentChange = (updatedSegment: SegmentType) => { if (isUnControlledComponent) { setSelectedSegmentValue(updatedSegment.value) } diff --git a/src/Common/SegmentedControl/types.ts b/src/Common/SegmentedControl/types.ts index 289d57550..08f55e8e3 100644 --- a/src/Common/SegmentedControl/types.ts +++ b/src/Common/SegmentedControl/types.ts @@ -23,7 +23,7 @@ type SegmentTooltipProps = Omit< 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement' > -export type SegmentType = Pick & { +export type SegmentType = Pick & { /** * If true, the segment will be in error state with error icon */ @@ -39,7 +39,7 @@ export type SegmentType = Pick & { * * Note: Either of label or icon is required */ - label: SelectPickerOptionType['label'] + label: SelectPickerOptionType['label'] | T /** * Icon for the segment * @@ -65,11 +65,11 @@ export type SegmentType = Pick & { } ) -export type SegmentedControlProps = { +export type SegmentedControlProps = { /** * List of segments to be displayed */ - segments: SegmentType[] + segments: SegmentType[] /** * Please make sure this is unique */ @@ -83,19 +83,19 @@ export type SegmentedControlProps = { /** * On change handler for the component */ - onChange?: (selectedSegment: SegmentType) => void + onChange?: (selectedSegment: SegmentType) => void } | { /** * If defined, the component is controlled and onChange needs to be handled by the parent */ - value: SegmentType['value'] - onChange: (selectedSegment: SegmentType) => void + value: SegmentType['value'] + onChange: (selectedSegment: SegmentType) => void } ) -export interface SegmentProps - extends Required> { +export interface SegmentProps + extends Required, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> { isSelected: boolean - segment: SegmentType + segment: SegmentType } diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx index 4da62eae4..0b28e64d2 100644 --- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx +++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx @@ -89,8 +89,8 @@ export const DeploymentConfigDiffNavigation = ({ } /** Handles tab click. */ - const onTabClick = (segment: SegmentType) => { - tabConfig?.onClick?.(segment.value as string) + const onTabClick = (segment: SegmentType) => { + tabConfig?.onClick?.(String(segment.value)) } // RENDERERS From 1968595c0a73cd382a91091b3be535e989357c49 Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 18 Nov 2025 13:26:44 +0530 Subject: [PATCH 4/5] chore: version bump --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index f667e2a96..045f33481 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-47", + "version": "1.20.6-pre-49", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-47", + "version": "1.20.6-pre-49", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index f3a35a518..5b0947eb3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.20.6-pre-47", + "version": "1.20.6-pre-49", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", From c2c98fb2e063b3c342cfd7993eb61344fcc199af Mon Sep 17 00:00:00 2001 From: shivani170 Date: Tue, 18 Nov 2025 13:35:33 +0530 Subject: [PATCH 5/5] chore: version bump && code clean --- src/Common/SegmentedControl/types.ts | 68 ++++++++++--------- .../DeploymentConfigDiffNavigation.tsx | 2 +- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/src/Common/SegmentedControl/types.ts b/src/Common/SegmentedControl/types.ts index 08f55e8e3..c74672632 100644 --- a/src/Common/SegmentedControl/types.ts +++ b/src/Common/SegmentedControl/types.ts @@ -23,7 +23,7 @@ type SegmentTooltipProps = Omit< 'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement' > -export type SegmentType = Pick & { +export type SegmentType = { /** * If true, the segment will be in error state with error icon */ @@ -32,38 +32,42 @@ export type SegmentType = Pick) - | { - label?: never - tooltipProps: SegmentTooltipProps - icon: IconsProps['name'] - /** - * Aria label for the segment - */ - ariaLabel: string - } - ) + | ({ + /** + * Label for the segment + * + * Note: Either of label or icon is required + */ + label: SelectPickerOptionType['label'] + /** + * Icon for the segment + * + * Note: Either of label or icon is required + */ + icon?: IconsProps['name'] + /** + * Tooltip props for the segment + * + * Note: Required if only icon is provided + */ + tooltipProps?: SegmentTooltipProps + ariaLabel?: never + } & Pick) + | { + label?: never + tooltipProps: SegmentTooltipProps + icon: IconsProps['name'] + /** + * Aria label for the segment + */ + ariaLabel: string + } +) export type SegmentedControlProps = { /** diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx index 0b28e64d2..4a4ba9171 100644 --- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx +++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx @@ -90,7 +90,7 @@ export const DeploymentConfigDiffNavigation = ({ /** Handles tab click. */ const onTabClick = (segment: SegmentType) => { - tabConfig?.onClick?.(String(segment.value)) + tabConfig?.onClick?.(segment.value) } // RENDERERS