Skip to content

Commit 563a31d

Browse files
Elessar1802Elessar1802
authored
Merge pull request #2029 from devtron-labs/feat/use-rjsf-chart-store
feat: use RJSF Form in chart store
2 parents 51ff520 + 3ff9fe1 commit 563a31d

24 files changed

+791
-2032
lines changed

‎.eslintignore

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,6 @@ src/components/common/formFields/CopyButton.tsx
282282
src/components/common/formFields/CustomPassword.tsx
283283
src/components/common/formFields/DevtronSwitch.tsx
284284
src/components/common/formFields/Typeahead.tsx
285-
src/components/common/formFields/Widgets/Widgets.tsx
286285
src/components/common/helpers/Helpers.tsx
287286
src/components/common/helpers/compareVersion.ts
288287
src/components/common/helpers/isSubset.ts
@@ -464,11 +463,9 @@ src/components/v2/utils/useSharedState.ts
464463
src/components/v2/values/ChartValues.component.tsx
465464
src/components/v2/values/chartValuesDiff/ChartRepoSelector.tsx
466465
src/components/v2/values/chartValuesDiff/ChartValuesEditor.tsx
467-
src/components/v2/values/chartValuesDiff/ChartValuesGUIView.tsx
468466
src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
469467
src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
470468
src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
471-
src/components/v2/values/chartValuesDiff/ChartValuesView.utils.ts
472469
src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
473470
src/components/v2/values/common/chartValues.api.ts
474471
src/components/workflowEditor/CDSuccessModal.tsx

‎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": "0.3.9",
7+
"@devtron-labs/devtron-fe-common-lib": "0.3.10",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/components/ClusterNodes/clusterNodes.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@
7070
width: max-content;
7171
min-width: 100%;
7272

73+
&:hover > :first-child {
74+
background-color: var(--N50);
75+
}
76+
7377
& > :first-child {
7478
position: sticky;
7579
left: 0;

‎src/components/ResourceBrowser/ResourceBrowser.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,10 @@
139139
min-width: 100%;
140140
display: grid;
141141

142+
&:hover > :first-child {
143+
background-color: var(--N50);
144+
}
145+
142146
& > :first-child {
143147
position: sticky;
144148
left: 0;

‎src/components/charts/chartValues/ChartValues.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export default function ChartValues() {
115115
)
116116
}
117117
return (
118-
<>
118+
<div className="flexbox-col h-100">
119119
<Header appStoreApplicationName={appStoreApplicationName} name={valueName} />
120120
<ChartValuesView
121121
isCreateValueView
@@ -125,7 +125,7 @@ export default function ChartValues() {
125125
chartValuesFromParent={chartValues}
126126
selectedVersionFromParent={chartVersionId}
127127
/>
128-
</>
128+
</div>
129129
)
130130
}
131131

‎src/components/charts/discoverChartDetail/DiscoverChartDetails.tsx

Lines changed: 52 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
useBreadcrumb,
2424
useEffectAfterMount,
2525
PageHeader,
26+
versionComparatorBySortOrder,
2627
ToastManager,
2728
ToastVariantType,
2829
} from '@devtron-labs/devtron-fe-common-lib'
@@ -127,17 +128,14 @@ const DiscoverChartDetails: React.FC<DiscoverChartDetailsProps> = ({ match, hist
127128
[chartId],
128129
)
129130

130-
function goBackToDiscoverChart() {
131-
history.push(`${URLS.CHARTS}/discover/chart/${chartId}`)
132-
}
133-
134131
async function fetchVersions() {
135132
setLoading(true)
136133
try {
137134
const { result } = await getChartVersionsMin(chartId)
138135
if (result?.length) {
139-
setChartVersions(result)
140-
selectVersion(result[0]?.id)
136+
const sorted = [...result].sort((a, b) => versionComparatorBySortOrder(a.version, b.version))
137+
setChartVersions(sorted)
138+
selectVersion(sorted[0].id)
141139
} else {
142140
ToastManager.showToast({
143141
variant: ToastVariantType.error,
@@ -191,9 +189,9 @@ const DiscoverChartDetails: React.FC<DiscoverChartDetailsProps> = ({ match, hist
191189
}, [selectedVersion])
192190

193191
useEffect(() => {
194-
const chartValues = chartValuesList.find((chrtValue) => {
195-
if (chrtValue.kind === 'DEFAULT' && chrtValue.id === selectedVersion) {
196-
return chrtValue
192+
const chartValues = chartValuesList.find((chartValue) => {
193+
if (chartValue.kind === 'DEFAULT' && chartValue.id === selectedVersion) {
194+
return chartValue
197195
}
198196
})
199197
if (chartValues) {
@@ -211,7 +209,6 @@ const DiscoverChartDetails: React.FC<DiscoverChartDetailsProps> = ({ match, hist
211209
return (
212210
<DiscoverDetailsContext.Provider
213211
value={{
214-
goBackToDiscoverChart,
215212
openSavedValuesList,
216213
availableVersions,
217214
selectedVersion,
@@ -222,66 +219,53 @@ const DiscoverChartDetails: React.FC<DiscoverChartDetailsProps> = ({ match, hist
222219
redirectToChartValues,
223220
}}
224221
>
225-
<div className="chart-detail-container">
226-
<PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
227-
{loading ? (
228-
<Progressing pageLoader />
229-
) : (
230-
<div style={{ overflow: 'auto' }}>
231-
<div className="left-right-container">
232-
<div className="chart-detail-left">
233-
<About {...chartInformation} chartYaml={chartYaml} />
234-
<ReadmeRowHorizontal {...chartInformation} />
235-
<ChartDeploymentList chartId={chartId} />
236-
</div>
237-
<div className="chart-detail-right">
238-
<Deployment
239-
chartId={chartId}
240-
{...chartInformation}
241-
availableVersions={mapById(availableVersions)}
242-
/>
243-
</div>
244-
</div>
245-
</div>
246-
)}
247-
</div>
248222
<Switch>
249-
<Route
250-
path={`${URLS.CHARTS_DISCOVER}${URLS.CHART}/:chartId${URLS.DEPLOY_CHART}/:presetValueId?`}
251-
render={(props) => {
252-
return (
253-
<div className="deploy-chart__container">
254-
{!chartInformation.chartName ||
255-
!selectedVersion ||
256-
chartValuesList.length <= 0 ||
257-
availableVersions.length <= 0 ? (
258-
<Progressing pageLoader />
259-
) : (
260-
<>
261-
<PageHeader
262-
headerName={`Deploy chart: ${chartInformation.chartName}/${chartInformation.name}`}
263-
additionalHeaderInfo={() =>
264-
chartInformation.deprecated && (
265-
<span style={{ color: 'var(--R500)' }}>&nbsp;(Deprecated)</span>
266-
)
267-
}
268-
showCloseButton
269-
onClose={goBackToDiscoverChart}
270-
/>
271-
<ChartValuesView
272-
isDeployChartView
273-
installedConfigFromParent={chartInformation as ChartInstalledConfig}
274-
chartValuesListFromParent={chartValuesList}
275-
chartVersionsDataFromParent={availableVersions}
276-
chartValuesFromParent={chartValues}
277-
selectedVersionFromParent={selectedVersion}
223+
<Route path={`${URLS.CHARTS_DISCOVER}${URLS.CHART}/:chartId`} exact>
224+
<div className="chart-detail-container">
225+
<PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
226+
{loading ? (
227+
<Progressing pageLoader />
228+
) : (
229+
<div style={{ overflow: 'auto' }}>
230+
<div className="left-right-container">
231+
<div className="chart-detail-left">
232+
<About {...chartInformation} chartYaml={chartYaml} />
233+
<ReadmeRowHorizontal {...chartInformation} />
234+
<ChartDeploymentList chartId={chartId} />
235+
</div>
236+
<div className="chart-detail-right">
237+
<Deployment
238+
chartId={chartId}
239+
{...chartInformation}
240+
availableVersions={mapById(availableVersions)}
278241
/>
279-
</>
280-
)}
242+
</div>
243+
</div>
281244
</div>
282-
)
283-
}}
284-
/>
245+
)}
246+
</div>
247+
</Route>
248+
<Route path={`${URLS.CHARTS_DISCOVER}${URLS.CHART}/:chartId${URLS.DEPLOY_CHART}/:presetValueId?`}>
249+
<div className="flexbox-col h-100">
250+
<PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
251+
{!chartInformation.chartName ||
252+
!selectedVersion ||
253+
chartValuesList.length <= 0 ||
254+
availableVersions.length <= 0 ||
255+
loading ? (
256+
<Progressing pageLoader />
257+
) : (
258+
<ChartValuesView
259+
isDeployChartView
260+
installedConfigFromParent={chartInformation as ChartInstalledConfig}
261+
chartValuesListFromParent={chartValuesList}
262+
chartVersionsDataFromParent={availableVersions}
263+
chartValuesFromParent={chartValues}
264+
selectedVersionFromParent={selectedVersion}
265+
/>
266+
)}
267+
</div>
268+
</Route>
285269
</Switch>
286270
</DiscoverDetailsContext.Provider>
287271
)
@@ -507,7 +491,7 @@ export const MarkDown = ({ markdown = '', className = '', breaks = false, disabl
507491
<article
508492
{...props}
509493
ref={mdeRef}
510-
className={`deploy-chart__readme-markdown mr-20 ${className}`}
494+
className={`deploy-chart__readme-markdown pr-20 ${className}`}
511495
dangerouslySetInnerHTML={createMarkup()}
512496
data-testid="article-for-bulk-edit"
513497
/>

‎src/components/common/formFields/Widgets/Widgets.scss

Lines changed: 0 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -14,81 +14,6 @@
1414
* limitations under the License.
1515
*/
1616

17-
.styled-field.form__row {
18-
.info-label-icon {
19-
svg circle {
20-
fill: var(--N500);
21-
}
22-
}
23-
24-
.error-label-icon {
25-
svg g path:nth-of-type(2) {
26-
fill: var(--R500);
27-
}
28-
}
29-
}
30-
31-
.styled-form-box {
32-
> .styled-form-box:last-of-type {
33-
margin-bottom: 0 !important;
34-
}
35-
}
36-
37-
.required-field::after {
38-
content: ' *';
39-
color: var(--R500);
40-
}
41-
42-
.slider-input-box-container {
43-
.slider-input {
44-
-webkit-appearance: none;
45-
width: 450px;
46-
height: 12px;
47-
border-radius: 6px;
48-
background: linear-gradient(to right, var(--B500) 0%, var(--B500) 50%, var(--N200) 50%, var(--N200) 100%);
49-
outline: none;
50-
transition: background 450ms ease-in;
51-
}
52-
53-
.slider-input::-webkit-slider-thumb {
54-
-webkit-appearance: none;
55-
appearance: none;
56-
height: 24px;
57-
width: 24px;
58-
border-radius: 50%;
59-
background-image: radial-gradient(circle, var(--B500) 35%, white 36%);
60-
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
61-
cursor: pointer;
62-
}
63-
64-
.slider-input::-moz-range-thumb {
65-
height: 24px;
66-
width: 24px;
67-
border-radius: 50%;
68-
background-image: radial-gradient(circle, var(--B500) 35%, white 36%);
69-
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
70-
cursor: pointer;
71-
}
72-
73-
.slider-input-box-wrapper {
74-
.slider-input-box,
75-
.slider-input-unit {
76-
padding: 6px 10px;
77-
}
78-
79-
.slider-input-box {
80-
width: 98px;
81-
background-color: var(--N50);
82-
outline: none;
83-
}
84-
85-
.slider-input-unit {
86-
background-color: white;
87-
border-left: none;
88-
}
89-
}
90-
}
91-
9217
progress.styled-progress-bar {
9318
-webkit-appearance: none;
9419
-moz-appearance: none;

0 commit comments

Comments
 (0)