Skip to content

Commit 443d829

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #195 from zenml-io/QA-Fixes
Qa fixes
2 parents 49cb6a9 + 1ac4c5a commit 443d829

File tree

6 files changed

+69
-95
lines changed

6 files changed

+69
-95
lines changed

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export type FieldError = {
3636
};
3737

3838
export const FormTextField = (props: {
39+
autoFocus?: any;
3940
label: string;
4041
labelColor?: any;
4142
placeholder: string;
@@ -195,9 +196,11 @@ export const EditField = (
195196
/>
196197
}
197198
/>
198-
<Box style={{ position: 'absolute', right: '10px', top: '35px' }}>
199-
<icons.pen color={iconColors.grey} />
200-
</Box>
199+
{!props.disabled && (
200+
<Box style={{ position: 'absolute', right: '10px', top: '35px' }}>
201+
<icons.pen color={iconColors.grey} />
202+
</Box>
203+
)}
201204
</FlexBox>
202205
</FlexBox.Column>
203206
);

‎src/ui/layouts/common/FormElement/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export function ToggleField(props: any) {
3939
<Box>
4040
<label className={styles.switch}>
4141
<input
42+
defaultChecked={props?.default}
4243
type="checkbox"
4344
onChange={(event) => onHandleChange(name, event.target.checked)}
4445
/>
@@ -54,17 +55,22 @@ export function ToggleFieldBlock(props: any) {
5455
const { name, value, onHandleChange, label } = props;
5556
return (
5657
<Box style={{ height: '68px' }}>
57-
<FlexBox.Row justifyContent="space-between" flexDirection='column'>
58+
<FlexBox.Row justifyContent="space-between" flexDirection="column">
5859
<Box>
5960
<Paragraph size="body" style={{ color: '#000' }}>
6061
{label}
6162
</Paragraph>
6263
</Box>
6364
<FlexBox.Row className={styles.switchContainer}>
64-
<div><span className={styles.switchLabel} >{value ? <>Yes</> : <>No</>}</span></div>
65+
<div>
66+
<span className={styles.switchLabel}>
67+
{value ? <>Yes</> : <>No</>}
68+
</span>
69+
</div>
6570
<label className={styles.switch}>
6671
<input
6772
type="checkbox"
73+
defaultChecked={value}
6874
onChange={(event) => onHandleChange(name, event.target.checked)}
6975
/>
7076
<span className={`${styles.sliderBlue} ${styles.round}`}></span>

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
3737
const user = useSelector(userSelectors.myUser);
3838
const workspaces = useSelector(workspaceSelectors.myWorkspaces);
3939
const [componentName, setComponentName] = useState('');
40-
const [isShared, setIsShared] = useState(false);
40+
const [isShared, setIsShared] = useState(true);
4141
const [inputData, setInputData] = useState({}) as any;
4242
const [inputFields, setInputFields] = useState() as any;
4343
const history = useHistory();
@@ -321,10 +321,16 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
321321
final[key] = {};
322322

323323
ar[key].forEach((nestedArr: any) => {
324-
final[key] = {
325-
...final[key],
326-
[nestedArr.key]: nestedArr.value,
327-
};
324+
if (nestedArr.key && nestedArr.value) {
325+
final[key] = {
326+
...final[key],
327+
[nestedArr.key]: nestedArr.value,
328+
};
329+
} else {
330+
if (Object.keys(final[key]).length === 0) {
331+
delete final[key];
332+
}
333+
}
328334
});
329335
});
330336
});
@@ -370,7 +376,7 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
370376
dispatch(
371377
showToasterAction({
372378
description: err?.response?.data?.detail[0].includes('Exists')
373-
? `${componentName} is already exist.`
379+
? `Component name is already exists.`
374380
: err?.response?.data?.detail[0],
375381
type: toasterTypes.failure,
376382
}),
@@ -400,6 +406,7 @@ export const CreateComponent: React.FC<{ flavor: any }> = ({ flavor }) => {
400406
/>
401407
<ToggleField
402408
label={'Share Component with public'}
409+
default={isShared}
403410
onHandleChange={
404411
(key: any, value: any) => setIsShared(value)
405412
// setInputData({ ...inputData, ['is_shared']: value })

‎src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx‎

Lines changed: 32 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
Paragraph,
77
Container,
88
FullWidthSpinner,
9-
icons,
9+
// icons,
1010
} from '../../../../components';
1111
import styles from './index.module.scss';
1212
import { useService } from './useService';
@@ -21,7 +21,7 @@ import {
2121
showToasterAction,
2222
stackComponentsActions,
2323
} from '../../../../../redux/actions';
24-
import { iconColors, toasterTypes } from '../../../../../constants';
24+
import { toasterTypes } from '../../../../../constants';
2525

2626
export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
2727
const { stackComponent, flavor } = useService({
@@ -208,11 +208,11 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
208208
onCallApi(updateConfig);
209209
};
210210

211-
const handleAddFields = () => {
212-
const values = [...inputFields];
213-
values.push({ key: '', value: '' });
214-
setInputFields(values);
215-
};
211+
// const handleAddFields = () => {
212+
// const values = [...inputFields];
213+
// values.push({ key: '', value: '' });
214+
// setInputFields(values);
215+
// };
216216
const handleInputChange = (index: any, event: any, label: any, type: any) => {
217217
const values = [...inputFields];
218218
if (type === 'key') {
@@ -222,17 +222,18 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
222222
}
223223
setInputFields(values);
224224
};
225-
const handleRemoveFields = (index: any) => {
226-
const values = [...inputFields];
227-
values.splice(index, 1);
228-
setInputFields(values);
229-
};
225+
// const handleRemoveFields = (index: any) => {
226+
// const values = [...inputFields];
227+
// values.splice(index, 1);
228+
// setInputFields(values);
229+
// };
230230

231231
const getFormElement: any = (elementName: any, elementSchema: any) => {
232232
if (typeof elementSchema === 'string') {
233233
return (
234234
<Box marginVertical={'md'} style={{ width: '100%' }}>
235235
<EditField
236+
disabled
236237
onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
237238
onChangeText={(e: any) => onPressEnter(e, 'string', elementName)}
238239
label={titleCase(elementName)}
@@ -254,7 +255,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
254255
{Object.keys(elementSchema).length < 1 && (
255256
<FlexBox.Row>
256257
<EditField
257-
// disabled
258+
disabled
258259
onKeyDown={(e: any) =>
259260
onPressEnterForEmpty(
260261
e,
@@ -277,28 +278,19 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
277278

278279
<div style={{ width: '10%' }}></div>
279280
<EditField
280-
// disabled
281-
// marginRight={'md'}
281+
disabled
282282
onKeyDown={(e: any) =>
283-
onPressEnterForEmpty(
284-
e,
285-
'value',
286-
elementName,
287-
// index,
288-
)
289-
}
290-
onChangeText={
291-
(event: any) => {}
292-
// handleInputChange(0, event, elementName, 'value')
283+
onPressEnterForEmpty(e, 'value', elementName)
293284
}
285+
onChangeText={(event: any) => {}}
294286
label="Value"
295287
// optional={true}
296288
// value={''}
297289
placeholder=""
298290
hasError={false}
299291
className={styles.field}
300292
/>
301-
<div
293+
{/* <div
302294
className="col-sx-2 "
303295
style={{
304296
justifyContent: 'space-between',
@@ -307,21 +299,18 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
307299
marginLeft: '5px',
308300
}}
309301
>
310-
{/* <button className={styles.fieldButton} type="button"> */}
311302
<icons.plusCircle
312303
onClick={() => handleAddFields()}
313-
// className={styles.fieldButton}
314304
color={iconColors.primary}
315305
/>
316-
{/* </button> */}
317-
</div>
306+
</div> */}
318307
</FlexBox.Row>
319308
)}
320309
{Object.entries(elementSchema).map(([key, value], index) => (
321310
<>
322311
<FlexBox.Row>
323312
<EditField
324-
// disabled
313+
disabled
325314
onKeyDown={(e: any) =>
326315
onPressEnter(e, 'key', elementName, key)
327316
}
@@ -338,7 +327,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
338327
/>
339328
<div style={{ width: '10%' }}></div>
340329
<EditField
341-
// disabled
330+
disabled
342331
// marginRight={'md'}
343332
onKeyDown={(e: any) =>
344333
onPressEnter(e, 'value', elementName, key, index)
@@ -353,8 +342,8 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
353342
placeholder=""
354343
hasError={false}
355344
className={styles.field}
356-
/>{' '}
357-
{index === Object.entries(elementSchema).length - 1 &&
345+
/>
346+
{/* {index === Object.entries(elementSchema).length - 1 &&
358347
!inputFields.length && (
359348
<div
360349
className="col-sx-2 "
@@ -365,35 +354,12 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
365354
marginLeft: '5px',
366355
}}
367356
>
368-
{/* <button
369-
className={styles.fieldButton}
370-
type="button"
371-
372-
> */}
373357
<icons.plusCircle
374358
onClick={() => handleAddFields()}
375359
color={iconColors.primary}
376360
/>
377-
{/* </button> */}
378361
</div>
379-
)}
380-
{/* <div
381-
className="col-sx-2 "
382-
style={{
383-
justifyContent: 'space-between',
384-
display: 'flex',
385-
marginTop: '10px',
386-
}}
387-
>
388-
<div
389-
style={{
390-
display: 'flex',
391-
flexDirection: 'row',
392-
justifyContent: 'space-between',
393-
alignItems: 'center',
394-
}}
395-
></div>
396-
</div> */}
362+
)} */}
397363
</FlexBox.Row>
398364
</>
399365
))}
@@ -415,6 +381,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
415381
onChangeText={(event: any) =>
416382
handleInputChange(index, event, elementName, 'key')
417383
}
384+
disabled
418385
label={'Key'}
419386
className={styles.field}
420387
value={inputField?.key}
@@ -432,6 +399,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
432399
// index,
433400
)
434401
}
402+
disabled
435403
className={styles.field}
436404
onChangeText={(event: any) =>
437405
handleInputChange(index, event, elementName, 'value')
@@ -441,13 +409,12 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
441409
placeholder={''}
442410
/>
443411
{/* </div> */}
444-
<div
412+
{/* <div
445413
className="col-sx-2 "
446414
style={{
447415
justifyContent: 'space-between',
448416
display: 'flex',
449417
marginBottom: '10px',
450-
// marginTop: '10px',
451418
}}
452419
>
453420
<div
@@ -460,35 +427,20 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
460427
marginLeft: '5px',
461428
}}
462429
>
463-
{/* <button
464-
className={styles.fieldButton}
465-
style={{}}
466-
type="button"
467-
// disabled={inputFields.length === 1}
468-
onClick={() => handleRemoveFields(index)}
469-
> */}
470430
<icons.minusCircle
471431
onClick={() => handleRemoveFields(index)}
472432
color={iconColors.primary}
473433
/>
474-
{/* </button> */}
434+
475435
{index === inputFields.length - 1 && (
476-
// <button
477-
// className={styles.fieldButton}
478-
// type="button"
479-
// onClick={() => handleAddFields()}
480-
// >
481436
<icons.plusCircle
482437
onClick={() => handleAddFields()}
483438
color={iconColors.primary}
484439
/>
485-
// </button>
486440
)}
487441
</div>
488-
</div>
489-
{/* </div> */}
442+
</div> */}
490443
</FlexBox.Row>
491-
// </div>
492444
))}
493445
</Box>
494446
);
@@ -502,6 +454,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
502454
<Paragraph>{titleCase(elementName)}</Paragraph>
503455
<label className={styles.switch}>
504456
<input
457+
disabled
505458
type="checkbox"
506459
defaultChecked={elementSchema}
507460
onChange={() =>
@@ -551,7 +504,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
551504
<Container>
552505
<Box style={{ width: '79%' }}>
553506
<EditField
554-
// disabled
507+
disabled
555508
onKeyDown={(e: any) => onPressEnter(e, 'name')}
556509
onChangeText={(e: any) => onPressEnter(e, 'name')}
557510
label={'Component Name'}
@@ -571,6 +524,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
571524
{console.log(stackComponent, 'asdasdasda2222122sdasd')}
572525
<input
573526
type="checkbox"
527+
disabled
574528
defaultChecked={stackComponent.isShared}
575529
// checked={stackComponent.isShared}
576530
onChange={() =>

‎src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const SidePopup: React.FC<{
5151
<FlexBox.Row justifyContent="space-between" alignItems="center">
5252
<Box>
5353
<LinkBox onClick={onSeeExisting}>
54-
<Paragraph>Edit Component</Paragraph>
54+
<Paragraph>Goto Component</Paragraph>
5555
</LinkBox>
5656
</Box>
5757
{isCreate && (

0 commit comments

Comments
 (0)