Skip to content

Commit 5f7827a

Browse files
arunjaindevarunjaindev
committed
Merge branch 'kubecon-2025' of https://github.com/devtron-labs/dashboard into fix/navigation-subpaths
2 parents 7994cb9 + 7d883f2 commit 5f7827a

File tree

12 files changed

+252
-193
lines changed

12 files changed

+252
-193
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.20.6-pre-50",
7+
"@devtron-labs/devtron-fe-common-lib": "1.20.6-pre-51",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@ import {
2323
InvalidYAMLTippyWrapper,
2424
PipelineMigratedFromType,
2525
PopupMenu,
26+
SegmentedControl,
27+
SegmentType,
2628
SelectPicker,
2729
SelectPickerOptionType,
2830
SelectPickerVariantType,
2931
stopPropagation,
30-
StyledRadioGroup as RadioGroup,
3132
versionComparatorBySortOrder,
3233
} from '@devtron-labs/devtron-fe-common-lib'
3334

@@ -87,8 +88,8 @@ const ChartSelectorDropdown = ({
8788
}
8889
}
8990

90-
const changeSelectedTab = (event): void => {
91-
setSelectedChartTypeTab(event.target.value)
91+
const changeSelectedTab = (selectedTab: SegmentType<CHART_TYPE_TAB_KEYS>): void => {
92+
setSelectedChartTypeTab(selectedTab.value)
9293
}
9394

9495
const setPopupState = (isOpen: boolean): void => {
@@ -127,27 +128,16 @@ const ChartSelectorDropdown = ({
127128
className="pt-12 pr-12 pb-8 pl-12 dc__position-sticky bg__primary top-0 dc__top-radius-4"
128129
onClick={stopPropagation}
129130
>
130-
<RadioGroup
131-
className="gui-yaml-switch dc__content-start"
132-
name="chartTypeTab"
133-
initialTab={selectedChartTypeTab}
134-
disabled={false}
131+
<SegmentedControl
132+
segments={Object.values(CHART_TYPE_TAB_KEYS).map((key) => ({
133+
label: CHART_TYPE_TAB[key],
134+
value: key,
135+
}))}
136+
value={selectedChartTypeTab}
135137
onChange={changeSelectedTab}
136-
>
137-
<RadioGroup.Radio
138-
value={CHART_TYPE_TAB_KEYS.DEVTRON_CHART}
139-
canSelect={selectedChartTypeTab !== CHART_TYPE_TAB_KEYS.DEVTRON_CHART}
140-
dataTestId="select-chartversion-menu-list"
141-
>
142-
{CHART_TYPE_TAB[CHART_TYPE_TAB_KEYS.DEVTRON_CHART]}
143-
</RadioGroup.Radio>
144-
<RadioGroup.Radio
145-
value={CHART_TYPE_TAB_KEYS.CUSTOM_CHARTS}
146-
canSelect={selectedChartTypeTab !== CHART_TYPE_TAB_KEYS.CUSTOM_CHARTS}
147-
>
148-
{CHART_TYPE_TAB[CHART_TYPE_TAB_KEYS.CUSTOM_CHARTS]}
149-
</RadioGroup.Radio>
150-
</RadioGroup>
138+
name="chart-type-tabs"
139+
size={ComponentSizeType.xs}
140+
/>
151141
</div>
152142
)}
153143
<div className="pt-4 pb-4" data-testid="select-chart-type-menu-list">

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
1818

1919
export const PROTECT_BASE_DEPLOYMENT_TEMPLATE_IDENTIFIER_DTO = 'BaseDeploymentTemplate' as const
2020

21-
export const CHART_TYPE_TAB_KEYS = { DEVTRON_CHART: 'devtronChart', CUSTOM_CHARTS: 'customCharts' }
21+
export enum CHART_TYPE_TAB_KEYS {
22+
DEVTRON_CHART = 'devtronChart',
23+
CUSTOM_CHARTS = 'customCharts',
24+
}
2225
export const CHART_TYPE_TAB = { devtronChart: 'Charts by Devtron', customCharts: 'Custom charts' }
2326

2427
export const CHART_DOCUMENTATION_LINK = {

‎src/Pages/ChartStore/ChartDetails/ChartDetails.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom'
2020
import {
2121
APIResponseHandler,
2222
BreadCrumb,
23+
ComponentSizeType,
2324
getInfrastructureManagementBreadcrumb,
2425
handleAnalyticsEvent,
2526
PageHeader,
@@ -192,6 +193,7 @@ export const ChartDetails = () => {
192193
segments={CHART_DETAILS_SEGMENTS}
193194
value={tab}
194195
onChange={handleSegmentChange}
196+
size={ComponentSizeType.xs}
195197
/>
196198
</div>
197199
{renderSegments()}

‎src/components/CIPipelineN/TaskDetailComponent.tsx‎

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

17-
import React, { useContext, useState } from 'react'
17+
import { useContext, useState } from 'react'
1818
import { useParams } from 'react-router-dom'
1919
import { BuildStageVariable } from '../../config'
2020
import { ConditionContainerType, PluginVariableType, VariableType } from '../ciPipeline/types'
@@ -24,12 +24,14 @@ import {
2424
CustomInput,
2525
PluginType,
2626
ScriptType,
27-
StyledRadioGroup as RadioGroup,
2827
Progressing,
2928
getPluginsDetail,
3029
StepType,
3130
PluginDataStoreType,
3231
getUpdatedPluginStore,
32+
SegmentedControl,
33+
ComponentSizeType,
34+
SegmentType,
3335
} from '@devtron-labs/devtron-fe-common-lib'
3436
import { PluginDetailHeader } from './PluginDetailHeader'
3537
import { TaskTypeDetailComponent } from './TaskTypeDetailComponent'
@@ -86,9 +88,10 @@ export const TaskDetailComponent = () => {
8688
setFormData(_formData)
8789
}
8890

89-
const handleTaskScriptTypeChange = (ev: any): void => {
91+
const handleSegmentedControlChange = (selectedSegment: SegmentType<ScriptType>) => {
9092
const _formData = { ...formData }
91-
_formData[activeStageName].steps[selectedTaskIndex].inlineStepDetail.scriptType = ev.target.value
93+
_formData[activeStageName].steps[selectedTaskIndex].inlineStepDetail.scriptType =
94+
selectedSegment.value
9295
setFormData(_formData)
9396
}
9497

@@ -243,31 +246,27 @@ export const TaskDetailComponent = () => {
243246
{selectedStep.stepType === PluginType.INLINE && (
244247
<div className="row-container mb-12">
245248
<div className="fw-6 fs-13 lh-32 cn-7 ">Task type</div>
246-
<RadioGroup
247-
className="configuration-container justify-start"
248-
disabled={false}
249-
initialTab={
250-
formData[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable]
251-
.scriptType
252-
}
253-
name="task-type"
254-
onChange={handleTaskScriptTypeChange}
255-
>
256-
<RadioGroup.Radio
257-
className="left-radius"
258-
value={ScriptType.SHELL}
259-
dataTestId="custom-script-task-name-shell"
260-
>
261-
Shell
262-
</RadioGroup.Radio>
263-
<RadioGroup.Radio
264-
className="right-radius dc__no-left-border"
265-
value={ScriptType.CONTAINERIMAGE}
266-
dataTestId="custom-script-task-name-container-image"
267-
>
268-
Container Image
269-
</RadioGroup.Radio>
270-
</RadioGroup>
249+
<div>
250+
<SegmentedControl
251+
segments={[
252+
{
253+
label: 'Shell',
254+
value: ScriptType.SHELL,
255+
},
256+
{
257+
label: 'Container Image',
258+
value: ScriptType.CONTAINERIMAGE,
259+
},
260+
]}
261+
value={
262+
formData[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable]
263+
.scriptType
264+
}
265+
name="task-type"
266+
onChange={handleSegmentedControlChange}
267+
size={ComponentSizeType.xs}
268+
/>
269+
</div>
271270
</div>
272271
)}
273272
</div>

‎src/components/app/Overview/Overview.tsx‎

Lines changed: 30 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,16 @@ import {
2626
stopPropagation,
2727
useAsync,
2828
getRandomColor,
29-
noop,
30-
StyledRadioGroup as RadioGroup,
3129
EditableTextArea,
3230
ToastManager,
3331
ToastVariantType,
3432
URLS as CommonUrls,
3533
AppStatus,
3634
StatusType,
35+
SegmentedControl,
36+
Button,
37+
ComponentSizeType,
38+
SegmentType,
3739
} from '@devtron-labs/devtron-fe-common-lib'
3840
import ReactGA from 'react-ga4'
3941
import { getGitProviderIcon, handleUTCTime, importComponentFromFELibrary } from '../../common'
@@ -49,7 +51,7 @@ import { environmentName } from '../../Jobs/Utils'
4951
import { DEFAULT_ENV } from '../details/triggerView/Constants'
5052
import GenericDescription from '../../common/Description/GenericDescription'
5153
import { editApp } from '../service'
52-
import { getAppConfig, getResourceKindFromAppType } from './utils'
54+
import { getAppConfig, getOverviewSegmentControlOptions, getResourceKindFromAppType } from './utils'
5355
import { EnvironmentList } from './EnvironmentList'
5456
import { MAX_LENGTH_350 } from '../../../config/constantMessaging'
5557
import { getModuleInfo } from '../../v2/devtronStackManager/DevtronStackManager.service'
@@ -461,12 +463,7 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
461463
function renderAppDescription() {
462464
return (
463465
<div>
464-
{Catalog && (
465-
<Catalog
466-
resourceId={appId}
467-
resourceType={getResourceKindFromAppType(appType)}
468-
/>
469-
)}
466+
{Catalog && <Catalog resourceId={appId} resourceType={getResourceKindFromAppType(appType)} />}
470467
{DeploymentWindowOverview && (
471468
<DeploymentWindowOverview appId={Number(appId)} filteredEnvIds={filteredEnvIds} />
472469
)}
@@ -484,6 +481,19 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
484481
)
485482
}
486483

484+
const handleOverviewViewTypeChange = (selectedSegment: SegmentType<AvailableTabs>) => {
485+
setActiveTab(selectedSegment.value)
486+
}
487+
488+
const renderSegmentControlTabs = () => (
489+
<SegmentedControl
490+
segments={getOverviewSegmentControlOptions(appType)}
491+
value={activeTab}
492+
onChange={handleOverviewViewTypeChange}
493+
name="overview-view-type"
494+
/>
495+
)
496+
487497
function renderOverviewContent() {
488498
if (isJobOverview) {
489499
const contentToRender = {
@@ -492,19 +502,8 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
492502
}
493503

494504
return (
495-
<div className="app-overview-wrapper flexbox-col dc__gap-12">
496-
<RadioGroup
497-
className="gui-yaml-switch gui-yaml-switch--lg gui-yaml-switch-window-bg flex-justify-start dc__no-background-imp"
498-
name="overview-tabs"
499-
initialTab={OVERVIEW_TABS.ABOUT}
500-
disabled={false}
501-
onChange={(e) => {
502-
setActiveTab(e.target.value)
503-
}}
504-
>
505-
<RadioGroup.Radio value={OVERVIEW_TABS.ABOUT}>About</RadioGroup.Radio>
506-
<RadioGroup.Radio value={OVERVIEW_TABS.JOB_PIPELINES}>Job Pipelines</RadioGroup.Radio>
507-
</RadioGroup>
505+
<div className="flexbox-col dc__gap-12">
506+
<div>{renderSegmentControlTabs()}</div>
508507
<div className="flexbox-col dc__gap-12">{contentToRender[activeTab]?.()}</div>
509508
</div>
510509
)
@@ -533,30 +532,16 @@ export default function AppOverview({ appMetaInfo, getAppMetaInfoRes, filteredEn
533532
return (
534533
<div className="app-overview-wrapper flexbox-col dc__gap-12">
535534
<div className="flex flex-justify dc__gap-8">
536-
<RadioGroup
537-
className="gui-yaml-switch gui-yaml-switch--lg gui-yaml-switch-window-bg flex-justify-start dc__no-background-imp"
538-
name="overview-tabs"
539-
initialTab={activeTab}
540-
disabled={false}
541-
onChange={(e) => {
542-
setActiveTab(e.target.value)
543-
}}
544-
>
545-
<RadioGroup.Radio value={OVERVIEW_TABS.ABOUT}>About</RadioGroup.Radio>
546-
<RadioGroup.Radio value={OVERVIEW_TABS.ENVIRONMENTS}>Environments</RadioGroup.Radio>
547-
{DependencyList && (
548-
<RadioGroup.Radio value={OVERVIEW_TABS.DEPENDENCIES}>Dependencies</RadioGroup.Radio>
549-
)}
550-
</RadioGroup>
535+
{renderSegmentControlTabs()}
551536
{activeTab === OVERVIEW_TABS.DEPENDENCIES && (
552-
<button
553-
type="button"
554-
className={`cta flex h-28 dc__gap-4 ${isEditDependencyButtonDisabled ? 'disabled-opacity' : ''}`}
555-
onClick={isEditDependencyButtonDisabled ? noop : handleEditDependencyClick}
556-
>
557-
<EditIcon className="mw-14 icon-dim-14 scn-0 dc__no-svg-fill" />
558-
Edit Dependency
559-
</button>
537+
<Button
538+
dataTestId="edit-dependency-btn"
539+
startIcon={<EditIcon className="icon-dim-16" />}
540+
text="Edit Dependency"
541+
onClick={handleEditDependencyClick}
542+
size={ComponentSizeType.small}
543+
disabled={isEditDependencyButtonDisabled}
544+
/>
560545
)}
561546
</div>
562547
<div className="flexbox-col dc__gap-12">{contentToRender[activeTab]?.()}</div>

‎src/components/app/Overview/utils.tsx‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@
1717
import { AppOverviewProps } from '../types'
1818
import { DefaultJobNote, DefaultAppNote, DefaultHelmChartNote } from '../list-new/Constants'
1919
import { EMPTY_STATE_STATUS } from '../../../config/constantMessaging'
20-
import { IconBaseSizeType, ResourceKindType } from '@devtron-labs/devtron-fe-common-lib'
20+
import { IconBaseSizeType, ResourceKindType, SegmentedControlProps } from '@devtron-labs/devtron-fe-common-lib'
2121
import { getAppIconWithBackground } from '@Config/utils'
22+
import { OVERVIEW_TABS } from './constants'
23+
import { importComponentFromFELibrary } from '@Components/common'
2224

2325
const {
2426
OVERVIEW: { APP_DESCRIPTION, JOB_DESCRIPTION },
2527
} = EMPTY_STATE_STATUS
2628

29+
const DependencyList = importComponentFromFELibrary('DependencyList')
2730
export const getResourceKindFromAppType = (appType: AppOverviewProps['appType']) => {
2831
switch (appType) {
2932
case 'app':
@@ -61,3 +64,39 @@ export const getAppConfig = (appType: AppOverviewProps['appType'], iconSize: Ico
6164
}
6265
}
6366
}
67+
68+
export const BASE_OVERVIEW_SEGMENTED_CONTROL_SEGMENTS: SegmentedControlProps['segments'] = [
69+
{
70+
label: 'About',
71+
value: OVERVIEW_TABS.ABOUT,
72+
},
73+
]
74+
75+
export const DEVTRON_APPS_OVERVIEW_CONTROL_SEGMENTS: SegmentedControlProps['segments'] = [
76+
{
77+
label: 'Environments',
78+
value: OVERVIEW_TABS.ENVIRONMENTS,
79+
},
80+
...(DependencyList
81+
? [
82+
{
83+
label: 'Dependencies',
84+
value: OVERVIEW_TABS.DEPENDENCIES,
85+
},
86+
]
87+
: []),
88+
]
89+
90+
export const getOverviewSegmentControlOptions = (appType: AppOverviewProps['appType']) => {
91+
if (appType === 'job') {
92+
return [
93+
...BASE_OVERVIEW_SEGMENTED_CONTROL_SEGMENTS,
94+
{
95+
label: 'Job Pipelines',
96+
value: OVERVIEW_TABS.JOB_PIPELINES,
97+
},
98+
]
99+
}
100+
101+
return [...BASE_OVERVIEW_SEGMENTED_CONTROL_SEGMENTS, ...DEVTRON_APPS_OVERVIEW_CONTROL_SEGMENTS]
102+
}

‎src/components/charts/ChartSourceAccordion.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ export const ChartSourceAccordion = ({ header, options, value, onChange, dataTes
4949

5050
{collapsed && (
5151
<div>
52-
<AddChartSource text="Add chart source" />
52+
<div className="flex left">
53+
<AddChartSource text="Add chart source" />
54+
</div>
5355
{options.map((option) => (
5456
<div
5557
className="dc__position-rel flex left cursor dc__hover-n50"

0 commit comments

Comments
 (0)