Skip to content

Commit d184b7c

Browse files
Elessar1802Elessar1802
authored
Merge pull request #174 from devtron-labs/feat/adv-base-template-gui
feat: gui schema driven basic view on deployment template & env override view
2 parents d40d080 + 0ec2641 commit d184b7c

20 files changed

+180
-100
lines changed

‎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": "0.0.92",
3+
"version": "0.0.93",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Common/RJSF/Form.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const RJSFForm = (props: FormProps) => (
3434
showErrorList={false}
3535
autoComplete="off"
3636
{...props}
37+
className={`rjsf-form-template__container ${props.className || ''}`}
3738
validator={validator}
3839
templates={{
3940
...templates,

‎src/Common/RJSF/common/FieldRow.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,20 @@
1515
*/
1616

1717
import React from 'react'
18+
import { ConditionalWrap } from '../../Helper'
1819
import { FieldRowProps } from './types'
19-
import { DEFAULT_FIELD_TITLE, DO_NOT_SHOW_LABEL } from '../constants'
20+
import { DEFAULT_FIELD_TITLE } from '../constants'
21+
import { getTippyWrapperWithContent } from '../utils'
2022

2123
export const FieldRowWithLabel = ({
2224
showLabel,
2325
label,
2426
required,
2527
children,
2628
id,
29+
rawDescription,
2730
shouldAlignCenter = true,
28-
}: Omit<FieldRowProps, 'label'> & {
29-
label: FieldRowProps['label'] | typeof DO_NOT_SHOW_LABEL
30-
}) => (
31+
}: FieldRowProps) => (
3132
<div
3233
className={
3334
showLabel
@@ -36,14 +37,13 @@ export const FieldRowWithLabel = ({
3637
}
3738
>
3839
{showLabel && (
39-
<label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
40-
{/* The check is added here intentionally for proper layout for array type field */}
41-
{label !== DO_NOT_SHOW_LABEL && (
42-
<>
43-
<span className="dc__ellipsis-right">{label || DEFAULT_FIELD_TITLE}</span>
44-
{required && <span className="cr-5">&nbsp;*</span>}
45-
</>
46-
)}
40+
<label className="cn-7 fs-13 lh-20 fw-4 flexbox mb-0" htmlFor={id}>
41+
<ConditionalWrap condition={!!rawDescription} wrap={getTippyWrapperWithContent(rawDescription, 'top')}>
42+
<span className={`dc__ellipsis-right ${rawDescription ? 'text-underline-dashed-300' : ''}`}>
43+
{label || DEFAULT_FIELD_TITLE}
44+
</span>
45+
</ConditionalWrap>
46+
{required && <span className="cr-5">&nbsp;*</span>}
4747
</label>
4848
)}
4949
{children}

‎src/Common/RJSF/common/types.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616

1717
import { FieldTemplateProps } from '@rjsf/utils'
1818

19-
export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
19+
export interface FieldRowProps
20+
extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id' | 'rawDescription'> {
2021
showLabel?: boolean
2122
/**
2223
* @default true

‎src/Common/RJSF/config.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
ArrayFieldItemTemplate,
2323
ArrayFieldTemplate,
2424
BaseInputTemplate,
25-
DescriptionFieldTemplate,
2625
FieldTemplate,
2726
FieldErrorTemplate,
2827
ObjectFieldTemplate,
@@ -44,7 +43,6 @@ export const templates: FormProps['templates'] = {
4443
ArrayFieldTemplate,
4544
BaseInputTemplate,
4645
ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
47-
DescriptionFieldTemplate,
4846
FieldTemplate,
4947
FieldErrorTemplate,
5048
ObjectFieldTemplate,

‎src/Common/RJSF/constants.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,7 @@ export const PLACEHOLDERS = {
2222

2323
export const DEFAULT_FIELD_TITLE = 'Key not available'
2424

25-
// Using symbol to ensure uniqueness across the fields
26-
export const DO_NOT_SHOW_LABEL = Symbol('Do not show label')
25+
export const ADD_BUTTON_WIDTH = {
26+
MAX_WIDTH_VALUE: 250,
27+
MAX_WIDTH_CLASSNAME: 'dc__mxw-250',
28+
}

‎src/Common/RJSF/rjsfForm.scss

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,21 @@
1515
*/
1616

1717
.rjsf-form-template {
18-
&__field {
18+
&__container > div:first-child {
19+
padding: 20px;
20+
margin-right: 28px;
21+
}
22+
23+
&__field, &__field--error {
1924
grid-template-columns: 250px 1fr;
25+
26+
input.form__input {
27+
padding: 6px 8px;
28+
}
2029
}
2130

2231
&__additional-fields {
23-
grid-template-columns: 1fr 1fr minmax(20px, auto);
32+
grid-template-columns: 1fr 1fr;
2433
}
2534

2635
&__array-field-item {
@@ -31,4 +40,41 @@
3140
margin: 0;
3241
}
3342
}
43+
44+
&__additional-fields,
45+
&__array-field-item {
46+
z-index: 0;
47+
background: transparent;
48+
49+
&:has(> .remove-btn__container:hover)::after {
50+
background: var(--R50);
51+
}
52+
53+
&:has(> .remove-btn__container)::after {
54+
border-radius: 4px;
55+
transform: translate(-50%, -50%);
56+
top: 50%;
57+
left: 50%;
58+
background: transparent;
59+
z-index: -1;
60+
position: absolute;
61+
/* NOTE: this overlay is exactly 6px wider & taller on all sides
62+
* therefore the 12px (6 + 6) on height & width */
63+
height: calc(100% + 12px);
64+
width: calc(100% + 12px);
65+
content: '';
66+
transition: all 100ms ease-out;
67+
}
68+
69+
& > .remove-btn__container:hover {
70+
fill: var(--R500);
71+
path {
72+
fill: var(--R500);
73+
}
74+
}
75+
76+
& > .remove-btn__container {
77+
transition: all 100ms ease-out;
78+
}
79+
}
3480
}

‎src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,18 @@ export const ArrayFieldItemTemplate = ({
3232
const { RemoveButton } = registry.templates.ButtonTemplates
3333

3434
return (
35-
<div className="display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12">
35+
<div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center mb-12">
3636
{children}
37-
{hasToolbar && hasRemove && (
38-
<RemoveButton
39-
disabled={disabled || readonly}
40-
onClick={onDropIndexClick(index)}
41-
uiSchema={uiSchema}
42-
registry={registry}
43-
/>
44-
)}
37+
<div className="dc__position-abs remove-btn__container" style={{ right: "-28px", top: "9px" }}>
38+
{hasToolbar && hasRemove && (
39+
<RemoveButton
40+
disabled={disabled || readonly}
41+
onClick={onDropIndexClick(index)}
42+
uiSchema={uiSchema}
43+
registry={registry}
44+
/>
45+
)}
46+
</div>
4547
</div>
4648
)
4749
}

‎src/Common/RJSF/templates/ArrayFieldTemplate.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,21 @@
1717
import React from 'react'
1818
import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
1919
import { FieldRowWithLabel } from '../common/FieldRow'
20-
import { DO_NOT_SHOW_LABEL } from '../constants'
2120

22-
const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
21+
const ActionButton = ({ label, canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
2322
const {
2423
ButtonTemplates: { AddButton },
2524
} = registry.templates
2625

2726
return (
2827
canAdd && (
29-
<AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
28+
<AddButton
29+
label={label}
30+
onClick={onAddClick}
31+
disabled={disabled || readonly}
32+
uiSchema={uiSchema}
33+
registry={registry}
34+
/>
3035
)
3136
)
3237
}
@@ -59,7 +64,6 @@ export const ArrayFieldTemplate = ({
5964
...itemProps.children,
6065
props: {
6166
...itemProps.children.props,
62-
name: index === 0 ? label : DO_NOT_SHOW_LABEL,
6367
},
6468
}
6569
return (
@@ -69,6 +73,7 @@ export const ArrayFieldTemplate = ({
6973
)
7074
})}
7175
<ActionButton
76+
label={label}
7277
canAdd={canAdd}
7378
onAddClick={onAddClick}
7479
disabled={disabled}
@@ -80,6 +85,7 @@ export const ArrayFieldTemplate = ({
8085
) : (
8186
<FieldRowWithLabel label={label} required={required} showLabel id={idSchema.$id}>
8287
<ActionButton
88+
label={label}
8389
canAdd={canAdd}
8490
onAddClick={onAddClick}
8591
disabled={disabled}

0 commit comments

Comments
 (0)