Skip to content

Commit b246f61

Browse files
danialraza03danialraza03
authored
Merge pull request #203 from zenml-io/dev
Dev
2 parents 0616ce7 + 5257b37 commit b246f61

File tree

32 files changed

+987
-494
lines changed

32 files changed

+987
-494
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"react-dom": "^16.13.1",
5252
"react-flow-renderer": "^10.3.16",
5353
"react-joyride": "^2.5.3",
54+
"react-json-pretty": "^2.2.0",
5455
"react-outside-click-handler": "^1.3.0",
5556
"react-redux": "^7.2.1",
5657
"react-router-dom": "^5.2.0",
@@ -78,7 +79,6 @@
7879
"tslint": "tsc",
7980
"all": "eslint './src/**/*.ts*' & react-scripts test --all & tsc"
8081
},
81-
8282
"browserslist": {
8383
"production": [
8484
">0.2%",

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

Lines changed: 8 additions & 5 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
);
@@ -213,10 +216,10 @@ export const SearchInputField = (
213216
} & any,
214217
): JSX.Element => {
215218
return (
216-
<FlexBox.Column fullWidth style={{ height: '100px' }}>
219+
<FlexBox.Column fullWidth style={{ height: '100px', marginTop: '-10px' }}>
217220
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
218221
<LinkBox
219-
style={{ position: 'absolute', left: '7px', top: '30px' }}
222+
style={{ position: 'absolute', left: '7px', top: '35px' }}
220223
onClick={() => {}}
221224
>
222225
<icons.search color={iconColors.grey} />

‎src/ui/components/icons/assets/MultiUser.svg‎

Lines changed: 5 additions & 7 deletions
Loading

‎src/ui/components/icons/assets/SingleUser.svg‎

Lines changed: 5 additions & 3 deletions
Loading

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const InputWithLabel = ({
1919
optional?: string;
2020
}): JSX.Element => (
2121
<FlexBox.Column fullWidth>
22-
<Box paddingBottom="xs">
22+
<Box paddingBottom="sm">
2323
<Paragraph
2424
size="body"
2525
style={{ color: labelColor ? labelColor : 'black' }}
@@ -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/NonEditableConfig/index.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Container,
88
FullWidthSpinner,
99
} from '../../components';
10+
import { ToggleField } from '../common/FormElement';
1011
import styles from './index.module.scss';
1112
import { useService } from './useService';
1213

@@ -106,15 +107,12 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
106107
if (typeof elementSchema === 'boolean') {
107108
return (
108109
<Box marginVertical={'md'} style={{ width: '100%' }}>
109-
<Box>
110-
<FlexBox.Row justifyContent="space-between">
111-
<Paragraph>{titleCase(elementName)}</Paragraph>
112-
<label className={styles.switch}>
113-
<input type="checkbox" checked={elementSchema} />
114-
<span className={`${styles.slider} ${styles.round}`}></span>
115-
</label>
116-
</FlexBox.Row>
117-
</Box>
110+
<ToggleField
111+
value={elementSchema}
112+
onHandleChange={() => {}}
113+
label={titleCase(elementName)}
114+
disabled={true}
115+
/>
118116
</Box>
119117
);
120118
}
@@ -161,13 +159,20 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
161159
className={styles.field}
162160
/>
163161
</Box>
164-
<FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
162+
{/* <FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
165163
<Paragraph>Share Component with public</Paragraph>
166164
<label className={styles.switch}>
167165
<input type="checkbox" checked={details.is_shared} />
168166
<span className={`${styles.slider} ${styles.round}`}></span>
169167
</label>
170-
</FlexBox.Row>
168+
</FlexBox.Row> */}
169+
<ToggleField
170+
name='Share Component with public'
171+
value={details.is_shared}
172+
onHandleChange={() => {}}
173+
label='Share Component with public'
174+
disabled={true}
175+
/>
171176
</Container>
172177
{/* <Container>
173178

‎src/ui/layouts/NonEditableRunConfig/index.module.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import '../../globalStyles.scss';
2+
3+
.field {
4+
background: rgba(168, 168, 168, 0.1);
5+
border: 1px solid #C9CBD0;
6+
border-radius: 4px;
7+
}
8+
9+
.field {
10+
background: rgba(168, 168, 168, 0.1);
11+
border: 1px solid #C9CBD0;
12+
border-radius: 4px;
13+
}
14+
.JSONPretty {
15+
background: rgba(168, 168, 168, 0.1);
16+
border: 1px solid #C9CBD0;
17+
border-radius: 4px;
18+
19+
}
20+
21+
.switch {
22+
position: relative;
23+
display: inline-block;
24+
width: 38px;
25+
height: 20px;
26+
}
27+
28+
.switch input {
29+
opacity: 0;
30+
width: 0;
31+
height: 0;
32+
}
33+
34+
.slider {
35+
position: absolute;
36+
cursor: pointer;
37+
top: 0;
38+
left: 0;
39+
right: 0;
40+
bottom: 0;
41+
background-color: #ccc;
42+
-webkit-transition: .4s;
43+
transition: .4s;
44+
}
45+
46+
.slider:before {
47+
position: absolute;
48+
content: "";
49+
height: 17px;
50+
width: 17px;
51+
left: 1px;
52+
bottom: 2px;
53+
background-color: white;
54+
-webkit-transition: .4s;
55+
transition: .4s;
56+
}
57+
58+
input:checked + .slider {
59+
background-color: $primaryColor;
60+
}
61+
62+
input:focus + .slider {
63+
box-shadow: 0 0 1px $primaryColor;
64+
}
65+
66+
input:checked + .slider:before {
67+
-webkit-transform: translateX(19px);
68+
-ms-transform: translateX(19px);
69+
transform: translateX(19px);
70+
}
71+
72+
/* Rounded sliders */
73+
.slider.round {
74+
border-radius: 34px;
75+
}
76+
77+
.slider.round:before {
78+
border-radius: 50%;
79+
}

‎src/ui/layouts/NonEditableRunConfig/index.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import { Box, EditField, Paragraph } from '../../components';
3+
import styles from './index.module.scss';
4+
import { titleCase } from '../../../utils';
5+
import { ToggleField } from '../common/FormElement';
6+
import JSONPretty from 'react-json-pretty';
7+
8+
export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
9+
runConfiguration,
10+
}) => {
11+
const getFormElement: any = (elementName: any, elementSchema: any) => {
12+
if (typeof elementSchema === 'string') {
13+
return (
14+
<Box marginVertical={'md'} style={{ width: '40%' }}>
15+
<EditField
16+
disabled
17+
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
18+
// onChangeText={(e: any) => onPressEnter(e, 'string', elementName)}
19+
label={titleCase(elementName)}
20+
optional={false}
21+
defaultValue={elementSchema}
22+
placeholder=""
23+
hasError={false}
24+
className={styles.field}
25+
/>
26+
</Box>
27+
);
28+
}
29+
30+
if (typeof elementSchema === 'object' && elementSchema !== null) {
31+
return (
32+
<Box style={{ width: '40%' }}>
33+
<Paragraph size="body" style={{ color: 'black' }}>
34+
<label htmlFor={elementName}>{titleCase(elementName)}</label>
35+
</Paragraph>
36+
<Box
37+
padding={'md'}
38+
marginVertical={'md'}
39+
className={styles.JSONPretty}
40+
>
41+
<JSONPretty
42+
style={{ fontSize: '16px', fontFamily: 'Rubik' }}
43+
id="json-pretty"
44+
data={elementSchema}
45+
></JSONPretty>
46+
</Box>
47+
</Box>
48+
);
49+
}
50+
51+
if (typeof elementSchema === 'boolean' || elementSchema === null) {
52+
return (
53+
<Box marginVertical={'md'} style={{ width: '40%' }}>
54+
<Box>
55+
{/* {console.log(elementSchema, elementName, 'asdasdasda2222sdasd')}
56+
<FlexBox.Row justifyContent="space-between">
57+
<Paragraph>{titleCase(elementName)}</Paragraph>
58+
<label className={styles.switch}>
59+
<input
60+
disabled
61+
type="checkbox"
62+
defaultChecked={elementSchema}
63+
/>
64+
<span className={`${styles.slider} ${styles.round}`}></span>
65+
</label>
66+
</FlexBox.Row> */}
67+
<ToggleField
68+
value={elementSchema}
69+
onHandleChange={() => {}}
70+
label={titleCase(elementName)}
71+
disabled={true}
72+
/>
73+
</Box>
74+
</Box>
75+
);
76+
}
77+
};
78+
79+
return (
80+
<>
81+
{Object.keys(runConfiguration).map((key, ind) => (
82+
// <Col xs={6} key={ind}>
83+
<>{getFormElement(key, runConfiguration[key])}</>
84+
// </Col>
85+
))}
86+
</>
87+
);
88+
};

‎src/ui/layouts/common/CustomStackBox/index.module.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
display: flex;
2323
justify-content: center;
2424
align-items: center;
25-
25+
margin: 8px;
2626

27-
.imageContainer {
28-
height: 59px;
29-
width: 119px;
27+
.imageContainer {
28+
height: 50px;
29+
width: 100px;
3030
background-color: #fff;
31-
display: flex;
32-
justify-content: center;
33-
align-items: center;
31+
// display: flex;
32+
// justify-content: center;
33+
// align-items: center;
3434

3535
img {
3636
height: 100%;

0 commit comments

Comments
 (0)