Skip to content

Commit 49cb6a9

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #194 from zenml-io/QA-Fixes
Qa fixes
2 parents ec3c568 + 310cb5d commit 49cb6a9

File tree

2 files changed

+156
-94
lines changed
  • src/ui
    • components/inputs
    • layouts/stackComponents/ConfigureComponent/CreateComponent

2 files changed

+156
-94
lines changed

‎src/ui/components/inputs/index.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export const InputWithLabel = ({
3737
export const BaseInput = ({
3838
onChange,
3939
value,
40-
defaultValue,
4140
placeholder,
4241
type,
4342
hasError,
@@ -46,8 +45,7 @@ export const BaseInput = ({
4645
...props
4746
}: {
4847
onChange: any;
49-
value: string;
50-
defaultValue?: any;
48+
value?: string;
5149
placeholder?: string;
5250
type: string;
5351
hasError?: boolean;
@@ -58,7 +56,6 @@ export const BaseInput = ({
5856
{...props}
5957
onChange={onChange}
6058
value={value}
61-
defaultValue={defaultValue}
6259
placeholder={placeholder}
6360
className={cn(styles.input, hasError ? styles.error : null, className)}
6461
type={type}
@@ -123,16 +120,14 @@ export const EmailInput = ({
123120
export const TextInput = ({
124121
onChangeText,
125122
value,
126-
defaultValue,
127123
placeholder,
128124
hasError,
129125
style,
130126
type = 'text',
131127
...props
132128
}: {
133129
onChangeText: any;
134-
value: string;
135-
defaultValue?: string;
130+
value?: string;
136131
placeholder?: string;
137132
hasError?: boolean;
138133
type?: string;
@@ -144,7 +139,6 @@ export const TextInput = ({
144139
onChange={(e: any): void => {
145140
onChangeText(e.target.value);
146141
}}
147-
defaultValue={defaultValue}
148142
value={value}
149143
placeholder={placeholder}
150144
type={type}

‎src/ui/layouts/stackComponents/ConfigureComponent/CreateComponent/index.tsx‎

Lines changed: 154 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,12 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
3939
const [componentName, setComponentName] = useState('');
4040
const [isShared, setIsShared] = useState(false);
4141
const [inputData, setInputData] = useState({}) as any;
42-
const [inputFields, setInputFields] = useState([
43-
{ key: '', value: '' },
44-
]) as any;
42+
const [inputFields, setInputFields] = useState() as any;
4543
const history = useHistory();
4644
console.log(flavor, 'flavorflavor');
4745
useEffect(() => {
4846
let setDefaultData = {};
47+
let setInputObjectType: any = [];
4948
initForm(flavor.configSchema.properties);
5049
Object.keys(flavor.configSchema.properties).map((key, ind) => {
5150
const data = flavor.configSchema.properties[key];
@@ -56,26 +55,40 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
5655
};
5756
return null;
5857
});
58+
59+
Object.keys(flavor.configSchema.properties).map((key, ind) => {
60+
const data = flavor.configSchema.properties[key];
61+
if (data.type === 'object')
62+
setInputObjectType.push({
63+
[key]: [{ key: '', value: '' }],
64+
});
65+
return null;
66+
});
67+
68+
setInputFields(setInputObjectType);
69+
5970
setInputData({ ...setDefaultData });
6071

6172
// eslint-disable-next-line react-hooks/exhaustive-deps
6273
}, []);
63-
const handleAddFields = () => {
74+
const handleAddFields = (name: any, index: any) => {
6475
const values = [...inputFields];
65-
values.push({ key: '', value: '' });
76+
// const check = values.find(({ name }) => name);
77+
// const targetObject = values.find((x) => x[name] !== undefined);
78+
79+
// if (targetObject) {
80+
// }
81+
// debugger;
82+
values[index][name].push({ key: '', value: '' });
83+
6684
setInputFields(values);
6785
};
6886

69-
const handleRemoveFields = (index: any, label: any) => {
87+
const handleRemoveFields = (parentIndex: any, childIndex: any, name: any) => {
7088
const values = [...inputFields];
71-
values.splice(index, 1);
89+
debugger;
90+
values[parentIndex][name].splice(childIndex, 1);
7291
setInputFields(values);
73-
74-
const keys = values.map((object) => object.key);
75-
const value = values.map((object) => object.value);
76-
var result: any = {};
77-
keys.forEach((key: any, i: any) => (result[key] = value[i]));
78-
setInputData({ ...inputData, [label]: result });
7992
};
8093
const toSnakeCase = (str: any) =>
8194
str &&
@@ -86,27 +99,33 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
8699
.map((x: any) => x.toLowerCase())
87100
.join('_');
88101

89-
const handleInputChange = (index: any, event: any, label: any, type: any) => {
102+
const handleInputChange = (
103+
parentIndex: any,
104+
childIndex: any,
105+
event: any,
106+
name: any,
107+
type: any,
108+
) => {
90109
const values = [...inputFields];
91110
if (type === 'key') {
92-
values[index].key = event;
111+
values[parentIndex][name][childIndex].key = event;
93112
} else {
94-
values[index].value = event;
113+
values[parentIndex][name][childIndex].value = event;
95114
}
96115
setInputFields(values);
97-
const keys = values.map((object) => object.key);
98-
const value = values.map((object) => object.value);
99-
var result: any = {};
100-
keys.forEach((key: any, i: any) => (result[key] = value[i]));
116+
// const keys = values.map((object) => object.key);
117+
// const value = values.map((object) => object.value);
101118

102-
if (event) {
103-
setInputData({
104-
...inputData,
105-
[toSnakeCase(label)]: {
106-
...result,
107-
},
108-
});
109-
}
119+
// keys.forEach((key: any, i: any) => (result[key] = value[i]));
120+
121+
// if (event) {
122+
// setInputData({
123+
// ...inputData,
124+
// [name]: {
125+
// ...values[parentIndex][name],
126+
// },
127+
// });
128+
// }
110129
};
111130

112131
const initForm = (properties: any) => {
@@ -135,69 +154,97 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
135154

136155
<FlexBox.Row>
137156
<div className="form-row">
138-
{inputFields.map((inputField: any, index: any) => (
139-
<Fragment key={`${inputField}~${index}`}>
140-
<div className="form-group col-sm-5">
141-
<FormTextField
142-
onChange={(event: any) =>
143-
handleInputChange(index, event, props.label, 'key')
144-
}
145-
label={'Key'}
146-
value={inputField?.key}
147-
placeholder={''}
148-
/>
149-
</div>
150-
<div className="form-group col-sm-5">
151-
<FormTextField
152-
onChange={(event: any) =>
153-
handleInputChange(index, event, props.label, 'value')
154-
}
155-
label={'Value'}
156-
value={inputField?.value}
157-
placeholder={''}
158-
/>
159-
</div>
160-
<div
161-
className="col-sx-2 "
162-
style={{
163-
justifyContent: 'space-between',
164-
display: 'flex',
165-
marginTop: '10px',
166-
}}
167-
>
157+
{inputFields?.map((item: any, parentIndex: any) =>
158+
item[props.name]?.map((inputField: any, childIndex: any) => (
159+
<Fragment key={`${inputField}~${childIndex}`}>
160+
<div className="form-group col-sm-5">
161+
<FormTextField
162+
onChange={(event: any) =>
163+
handleInputChange(
164+
parentIndex,
165+
childIndex,
166+
event,
167+
props.name,
168+
'key',
169+
)
170+
}
171+
label={'Key'}
172+
value={inputField?.key}
173+
placeholder={''}
174+
/>
175+
</div>
176+
177+
<div className="form-group col-sm-5">
178+
<FormTextField
179+
onChange={(event: any) =>
180+
handleInputChange(
181+
parentIndex,
182+
childIndex,
183+
event,
184+
props.name,
185+
'value',
186+
)
187+
}
188+
label={'Value'}
189+
value={inputField?.value}
190+
placeholder={''}
191+
/>
192+
</div>
168193
<div
194+
className="col-sx-2 "
169195
style={{
170-
display: 'flex',
171-
flexDirection: 'row',
172196
justifyContent: 'space-between',
173-
alignItems: 'center',
197+
display: 'flex',
198+
marginTop: '10px',
174199
}}
175200
>
176-
<button
177-
className={styles.fieldButton}
178-
style={{}}
179-
type="button"
180-
disabled={inputFields.length === 1}
181-
onClick={() =>
182-
handleRemoveFields(index, toSnakeCase(props.label))
183-
}
201+
<div
202+
style={{
203+
display: 'flex',
204+
flexDirection: 'row',
205+
justifyContent: 'space-between',
206+
alignItems: 'center',
207+
}}
184208
>
185-
<icons.minusCircle color={iconColors.primary} />
186-
</button>
187-
{index === inputFields.length - 1 && (
188-
<button
189-
className={styles.fieldButton}
190-
type="button"
191-
onClick={() => handleAddFields()}
192-
>
193-
<icons.plusCircle color={iconColors.primary} />
194-
</button>
195-
)}
209+
{item[props.name].length > 1 && (
210+
<button
211+
className={styles.fieldButton}
212+
style={{}}
213+
type="button"
214+
// disabled={item[props.name].length === 1}
215+
onClick={() =>
216+
handleRemoveFields(
217+
parentIndex,
218+
childIndex,
219+
props.name,
220+
)
221+
}
222+
>
223+
<icons.minusCircle color={iconColors.primary} />
224+
</button>
225+
)}
226+
227+
{childIndex === item[props.name].length - 1 && (
228+
<button
229+
className={styles.fieldButton}
230+
type="button"
231+
onClick={() =>
232+
handleAddFields(props.name, parentIndex)
233+
}
234+
>
235+
<icons.plusCircle color={iconColors.primary} />
236+
</button>
237+
)}
238+
</div>
196239
</div>
197-
</div>
198-
{/* </div> */}
199-
</Fragment>
200-
))}
240+
</Fragment>
241+
)),
242+
)}
243+
{/* {inputFields
244+
?.filter((x: any) => x.hasOwnProperty(props.name))
245+
.map((inputField: any, index: any) => (
246+
247+
))} */}
201248
</div>
202249
<div className="submit-button"></div>
203250
<br />
@@ -219,6 +266,9 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
219266
// (elementSchema.type === 'string' ||
220267
// elementSchema.type === 'integer')
221268
// }
269+
default={
270+
inputData[props.name] ? inputData[props.name] : props.default
271+
}
222272
onHandleChange={(key: any, value: any) =>
223273
setInputData({ ...inputData, [key]: value })
224274
}
@@ -263,14 +313,30 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
263313
const { id }: any = workspaces.find(
264314
(item) => item.name === selectedWorkspace,
265315
);
316+
317+
const final: any = {};
318+
inputFields.forEach((ar: any) => {
319+
const keys = Object.keys(ar);
320+
keys.forEach((key) => {
321+
final[key] = {};
322+
323+
ar[key].forEach((nestedArr: any) => {
324+
final[key] = {
325+
...final[key],
326+
[nestedArr.key]: nestedArr.value,
327+
};
328+
});
329+
});
330+
});
331+
266332
const body = {
267333
user: user?.id,
268334
workspace: id,
269335
is_shared: isShared,
270336
name: componentName,
271337
type: flavor.type,
272338
flavor: flavor.name,
273-
configuration: { ...inputData },
339+
configuration: { ...inputData, ...final },
274340
};
275341
setLoading(true);
276342
await axios
@@ -303,7 +369,9 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
303369
setLoading(false);
304370
dispatch(
305371
showToasterAction({
306-
description: err?.response?.data?.detail[0],
372+
description: err?.response?.data?.detail[0].includes('Exists')
373+
? `${componentName} is already exist.`
374+
: err?.response?.data?.detail[0],
307375
type: toasterTypes.failure,
308376
}),
309377
);

0 commit comments

Comments
 (0)