Skip to content

Commit 06e6b8a

Browse files
arunjaindevarunjaindev
committed
Merge branch 'kubecon-2025' of https://github.com/devtron-labs/devtron-fe-common-lib into feat/scan-cve-listing
2 parents 4638040 + aa4129f commit 06e6b8a

11 files changed

Lines changed: 80 additions & 75 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.20.6-pre-47",
3+
"version": "1.20.6-pre-51",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/Constants.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,9 @@ export const URLS = {
9292
// APPLICATION MANAGEMENT
9393
APPLICATION_MANAGEMENT: APPLICATION_MANAGEMENT_ROOT,
9494
APPLICATION_MANAGEMENT_OVERVIEW: `${APPLICATION_MANAGEMENT_ROOT}/overview`,
95-
APPLICATION_MANAGEMENT_APP: `${APPLICATION_MANAGEMENT_ROOT}/app`,
96-
APPLICATION_MANAGEMENT_APP_LIST: `${APPLICATION_MANAGEMENT_ROOT}/devtron-apps`,
97-
APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP: `${APPLICATION_MANAGEMENT_ROOT}/devtron-apps/create-app`,
95+
APPLICATION_MANAGEMENT_APP: `${APPLICATION_MANAGEMENT_ROOT}/devtron-app`,
96+
APPLICATION_MANAGEMENT_APP_LIST: `${APPLICATION_MANAGEMENT_ROOT}/devtron-app/list`,
97+
APPLICATION_MANAGEMENT_CREATE_DEVTRON_APP: `${APPLICATION_MANAGEMENT_ROOT}/devtron-app/list/create-app`,
9898
APPLICATION_MANAGEMENT_APPLICATION_GROUP: `${APPLICATION_MANAGEMENT_ROOT}/application-group`,
9999
APPLICATION_MANAGEMENT_TEMPLATES_DEVTRON_APP,
100100
APPLICATION_MANAGEMENT_TEMPLATES_DEVTRON_APP_CREATE: `${APPLICATION_MANAGEMENT_TEMPLATES_DEVTRON_APP}/create`,
@@ -111,7 +111,7 @@ export const URLS = {
111111
INFRASTRUCTURE_MANAGEMENT: INFRASTRUCTURE_MANAGEMENT_ROOT,
112112
INFRASTRUCTURE_MANAGEMENT_OVERVIEW: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/overview`,
113113
INFRASTRUCTURE_MANAGEMENT_APP_LIST: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/apps/:appType(${Object.values(InfrastructureManagementAppListType).join('|')})`,
114-
INFRASTRUCTURE_MANAGEMENT_APP: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/app`,
114+
INFRASTRUCTURE_MANAGEMENT_APP: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/apps`,
115115
INFRASTRUCTURE_MANAGEMENT_CHART_STORE: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/chart-store`,
116116
INFRASTRUCTURE_MANAGEMENT_CHART_STORE_DISCOVER: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/chart-store/discover`,
117117
INFRASTRUCTURE_MANAGEMENT_RESOURCE_BROWSER: `${INFRASTRUCTURE_MANAGEMENT_ROOT}/resource-browser`,

‎src/Common/SegmentedControl/Segment.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,15 @@ const wrapWithTooltip = (tooltipProps: SegmentType['tooltipProps']) => (children
3232
</Tooltip>
3333
)
3434

35-
const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disabled }: SegmentProps) => {
35+
const Segment = <T extends string | number>({
36+
segment,
37+
isSelected,
38+
name,
39+
onChange,
40+
fullWidth,
41+
size,
42+
disabled,
43+
}: SegmentProps<T>) => {
3644
const inputId = useMemo(getUniqueId, [])
3745

3846
const { value, icon, isError, label, tooltipProps, ariaLabel } = segment

‎src/Common/SegmentedControl/SegmentedControl.component.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,20 @@ import { SegmentedControlProps, SegmentType } from './types'
2323

2424
import './segmentedControl.scss'
2525

26-
const SegmentedControl = ({
26+
const SegmentedControl = <T extends string | number>({
2727
segments,
2828
onChange,
2929
name,
3030
size = ComponentSizeType.medium,
3131
value: controlledValue,
3232
fullWidth = false,
3333
disabled,
34-
}: SegmentedControlProps) => {
34+
}: SegmentedControlProps<T>) => {
3535
const isUnControlledComponent = controlledValue === undefined
36-
const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType['value'] | null>(segments[0].value)
36+
const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType<T>['value'] | null>(segments[0].value)
3737
const segmentValue = isUnControlledComponent ? selectedSegmentValue : controlledValue
3838

39-
const handleSegmentChange = (updatedSegment: SegmentType) => {
39+
const handleSegmentChange = (updatedSegment: SegmentType<T>) => {
4040
if (isUnControlledComponent) {
4141
setSelectedSegmentValue(updatedSegment.value)
4242
}

‎src/Common/SegmentedControl/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
*/
1616

1717
export { default as SegmentedControl } from './SegmentedControl.component'
18-
export { type SegmentedControlProps } from './types'
18+
export { type SegmentedControlProps, type SegmentType } from './types'

‎src/Common/SegmentedControl/types.ts‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ type SegmentTooltipProps = Omit<
2323
'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement'
2424
>
2525

26-
export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
26+
export type SegmentType<T = string | number> = {
2727
/**
2828
* If true, the segment will be in error state with error icon
2929
*/
@@ -32,44 +32,48 @@ export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
3232
* If true, the segment will be in disabled state
3333
*/
3434
isDisabled?: boolean
35+
/**
36+
* Value for the segment
37+
*/
38+
value: T
3539
} & (
36-
| ({
37-
/**
38-
* Label for the segment
39-
*
40-
* Note: Either of label or icon is required
41-
*/
42-
label: SelectPickerOptionType['label']
43-
/**
44-
* Icon for the segment
45-
*
46-
* Note: Either of label or icon is required
47-
*/
48-
icon?: IconsProps['name']
49-
/**
50-
* Tooltip props for the segment
51-
*
52-
* Note: Required if only icon is provided
53-
*/
54-
tooltipProps?: SegmentTooltipProps
55-
ariaLabel?: never
56-
} & Pick<SelectPickerOptionType, 'label'>)
57-
| {
58-
label?: never
59-
tooltipProps: SegmentTooltipProps
60-
icon: IconsProps['name']
61-
/**
62-
* Aria label for the segment
63-
*/
64-
ariaLabel: string
65-
}
66-
)
40+
| ({
41+
/**
42+
* Label for the segment
43+
*
44+
* Note: Either of label or icon is required
45+
*/
46+
label: SelectPickerOptionType['label']
47+
/**
48+
* Icon for the segment
49+
*
50+
* Note: Either of label or icon is required
51+
*/
52+
icon?: IconsProps['name']
53+
/**
54+
* Tooltip props for the segment
55+
*
56+
* Note: Required if only icon is provided
57+
*/
58+
tooltipProps?: SegmentTooltipProps
59+
ariaLabel?: never
60+
} & Pick<SelectPickerOptionType, 'label'>)
61+
| {
62+
label?: never
63+
tooltipProps: SegmentTooltipProps
64+
icon: IconsProps['name']
65+
/**
66+
* Aria label for the segment
67+
*/
68+
ariaLabel: string
69+
}
70+
)
6771

68-
export type SegmentedControlProps = {
72+
export type SegmentedControlProps<T = string | number> = {
6973
/**
7074
* List of segments to be displayed
7175
*/
72-
segments: SegmentType[]
76+
segments: SegmentType<T>[]
7377
/**
7478
* Please make sure this is unique
7579
*/
@@ -86,19 +90,19 @@ export type SegmentedControlProps = {
8690
/**
8791
* On change handler for the component
8892
*/
89-
onChange?: (selectedSegment: SegmentType) => void
93+
onChange?: (selectedSegment: SegmentType<T>) => void
9094
}
9195
| {
9296
/**
9397
* If defined, the component is controlled and onChange needs to be handled by the parent
9498
*/
95-
value: SegmentType['value']
96-
onChange: (selectedSegment: SegmentType) => void
99+
value: SegmentType<T>['value']
100+
onChange: (selectedSegment: SegmentType<T>) => void
97101
}
98102
)
99103

100-
export interface SegmentProps
101-
extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
104+
export interface SegmentProps<T>
105+
extends Required<Pick<SegmentedControlProps<T>, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
102106
isSelected: boolean
103-
segment: SegmentType
107+
segment: SegmentType<T>
104108
}

‎src/Common/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export * from './Policy.Types'
5353
export { default as PopupMenu } from './PopupMenu'
5454
export * from './Progressing'
5555
export { default as RadioGroup } from './RadioGroup'
56-
export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
5756
export { default as RadioGroupItem } from './RadioGroupItem'
5857
export { default as Reload } from './Reload'
5958
export * from './RJSF'

‎src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,16 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { ChangeEvent, useEffect, useState } from 'react'
17+
import { useEffect, useState } from 'react'
1818
import { Link, NavLink } from 'react-router-dom'
1919
import Tippy from '@tippyjs/react'
2020

2121
import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
2222
import { ReactComponent as ICError } from '@Icons/ic-error.svg'
2323
import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
24-
import { StyledRadioGroup } from '@Common/index'
24+
import { SegmentedControl } from '@Common/index'
25+
import { SegmentType } from '@Common/SegmentedControl/types'
26+
import { ComponentSizeType } from '@Shared/constants'
2527

2628
import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
2729
import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
@@ -87,11 +89,8 @@ export const DeploymentConfigDiffNavigation = ({
8789
}
8890

8991
/** Handles tab click. */
90-
const onTabClick = (e: ChangeEvent<HTMLInputElement>) => {
91-
const { value } = e.target
92-
if (tabConfig?.activeTab !== value) {
93-
tabConfig?.onClick?.(value)
94-
}
92+
const onTabClick = (segment: SegmentType<string>) => {
93+
tabConfig?.onClick?.(segment.value)
9594
}
9695

9796
// RENDERERS
@@ -113,19 +112,13 @@ export const DeploymentConfigDiffNavigation = ({
113112

114113
return (
115114
<div className="p-12">
116-
<StyledRadioGroup
117-
name="deployment-config-diff-tab-list"
118-
initialTab={activeTab}
115+
<SegmentedControl
116+
segments={tabs.map((tab) => ({ label: tab, value: tab }))}
117+
value={activeTab}
119118
onChange={onTabClick}
120-
disabled={isLoading}
121-
className="gui-yaml-switch deployment-config-diff__tab-list"
122-
>
123-
{tabs.map((tab) => (
124-
<StyledRadioGroup.Radio key={tab} value={tab} className="fs-12 lh-20 cn-7 fw-6">
125-
{tab}
126-
</StyledRadioGroup.Radio>
127-
))}
128-
</StyledRadioGroup>
119+
name="deployment-config-diff-tab-list"
120+
size={ComponentSizeType.xs}
121+
/>
129122
</div>
130123
)
131124
}

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ export const HeaderWithCreateButton = ({ viewType }: HeaderWithCreateButtonProps
7979
default:
8080
return {
8181
...getApplicationManagementBreadcrumb(),
82-
'devtron-apps': { component: <BreadcrumbText isActive heading="Devtron Applications" /> },
82+
'devtron-app': { component: <BreadcrumbText isActive heading="Devtron Applications" /> },
83+
list: null,
8384
}
8485
}
8586
}

0 commit comments

Comments
 (0)