Skip to content

Commit e6af98e

Browse files
danialraza03danialraza03
authored
Merge pull request #211 from zenml-io/dev
Dev
2 parents b246f61 + 2238273 commit e6af98e

File tree

21 files changed

+261
-139
lines changed

21 files changed

+261
-139
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export const EditField = (
180180
} & any,
181181
): JSX.Element => {
182182
return (
183-
<FlexBox.Column fullWidth style={{ height: '100px' }}>
183+
<FlexBox.Column fullWidth >
184184
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
185185
<InputWithLabel
186186
name={props.name}

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

Lines changed: 5 additions & 0 deletions
Loading

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

Lines changed: 9 additions & 5 deletions
Loading

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

Lines changed: 3 additions & 5 deletions
Loading

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import { ReactComponent as Search } from './assets/Search.svg';
4747
import { ReactComponent as Logs } from './assets/Logs.svg';
4848
import { ReactComponent as PlusCircle } from './assets/PlusCircle.svg';
4949
import { ReactComponent as MinusCircle } from './assets/MinusCircle.svg';
50+
import { ReactComponent as Config } from './assets/Config.svg';
5051
//icons for stackComponents
5152
// import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
5253
import { ReactComponent as Folders } from './assets/Folders.svg';
@@ -176,7 +177,7 @@ const icons = {
176177
search: createIcon({ Component: Search }),
177178
run: createIcon({ Component: Run, useStroke: true }),
178179
logs: createIcon({ Component: Logs, useStroke: true }),
179-
180+
config: createIcon({ Component: Config, useStroke: true }),
180181
plusCircle: createIcon({ Component: PlusCircle, useStroke: true }),
181182
minusCircle: createIcon({ Component: MinusCircle, useStroke: true }),
182183
//icons for stackComponents

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

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
2929
const getFormElement: any = (elementName: any, elementSchema: any) => {
3030
if (typeof elementSchema === 'string') {
3131
return (
32-
<Box marginVertical={'md'} style={{ width: '100%' }}>
32+
<Box marginTop='lg' style={{ width: '100%' }}>
3333
<EditField
3434
disabled
3535
onChangeText={() => console.log('')}
@@ -45,7 +45,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
4545
}
4646
if (typeof elementSchema === 'object') {
4747
return (
48-
<Box marginVertical={'xl'} style={{ width: '100%' }}>
48+
<Box marginTop='lg' style={{ width: '100%' }}>
4949
<Paragraph size="body" style={{ color: 'black' }}>
5050
<label htmlFor={elementName}>{titleCase(elementName)}</label>
5151
</Paragraph>
@@ -76,7 +76,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
7676
</FlexBox.Row>
7777
)}
7878
{Object.entries(elementSchema).map(([key, value]) => (
79-
<FlexBox.Row>
79+
<FlexBox.Row marginTop='lg'>
8080
<EditField
8181
disabled
8282
onChangeText={() => console.log('')}
@@ -106,7 +106,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
106106
}
107107
if (typeof elementSchema === 'boolean') {
108108
return (
109-
<Box marginVertical={'md'} style={{ width: '100%' }}>
109+
<Box marginTop='lg' style={{ width: '100%' }}>
110110
<ToggleField
111111
value={elementSchema}
112112
onHandleChange={() => {}}
@@ -145,7 +145,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
145145

146146
return (
147147
<FlexBox.Column marginTop="xl" fullWidth>
148-
<FlexBox.Row>
148+
<FlexBox.Row flexDirection='column'>
149149
<Container>
150150
<Box style={{ width: '80%' }}>
151151
<EditField
@@ -159,20 +159,15 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
159159
className={styles.field}
160160
/>
161161
</Box>
162-
{/* <FlexBox.Row justifyContent="space-between" style={{ width: '80%' }}>
163-
<Paragraph>Share Component with public</Paragraph>
164-
<label className={styles.switch}>
165-
<input type="checkbox" checked={details.is_shared} />
166-
<span className={`${styles.slider} ${styles.round}`}></span>
167-
</label>
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-
/>
162+
<Box marginTop='lg'>
163+
<ToggleField
164+
name='Share Component with public'
165+
value={details.is_shared}
166+
onHandleChange={() => {}}
167+
label='Share Component with public'
168+
disabled={true}
169+
/>
170+
</Box>
176171
</Container>
177172
{/* <Container>
178173

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,14 @@
1515
background: rgba(168, 168, 168, 0.1);
1616
border: 1px solid #C9CBD0;
1717
border-radius: 4px;
18+
position: relative;
1819

1920
}
21+
.copy{
22+
right: 10px;
23+
position: absolute;
24+
cursor: pointer;
25+
}
2026

2127
.switch {
2228
position: relative;

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

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import React from 'react';
2-
import { Box, EditField, Paragraph } from '../../components';
2+
import { Box, EditField, FlexBox, Paragraph, icons } from '../../components';
33
import styles from './index.module.scss';
44
import { titleCase } from '../../../utils';
55
import { ToggleField } from '../common/FormElement';
66
import JSONPretty from 'react-json-pretty';
7+
import { useDispatch } from '../../hooks';
8+
import { showToasterAction } from '../../../redux/actions';
9+
import { iconColors, iconSizes, toasterTypes } from '../../../constants';
710

811
export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
912
runConfiguration,
1013
}) => {
14+
const dispatch = useDispatch();
1115
const getFormElement: any = (elementName: any, elementSchema: any) => {
1216
if (typeof elementSchema === 'string') {
1317
return (
14-
<Box marginVertical={'md'} style={{ width: '40%' }}>
18+
<Box marginTop={'lg'} style={{ width: '40%' }}>
1519
<EditField
1620
disabled
1721
// onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -28,16 +32,32 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
2832
}
2933

3034
if (typeof elementSchema === 'object' && elementSchema !== null) {
35+
const handleCopy = () => {
36+
navigator.clipboard.writeText(JSON.stringify(elementSchema));
37+
38+
dispatch(
39+
showToasterAction({
40+
description: 'Config copied to clipboard',
41+
type: toasterTypes.success,
42+
}),
43+
);
44+
};
3145
return (
32-
<Box style={{ width: '40%' }}>
46+
<Box marginTop='lg' style={{ width: '40%' }}>
3347
<Paragraph size="body" style={{ color: 'black' }}>
3448
<label htmlFor={elementName}>{titleCase(elementName)}</label>
3549
</Paragraph>
3650
<Box
3751
padding={'md'}
38-
marginVertical={'md'}
52+
// marginVertical={'md'}
3953
className={styles.JSONPretty}
4054
>
55+
<icons.copy
56+
className={styles.copy}
57+
onClick={handleCopy}
58+
color={iconColors.black}
59+
size={iconSizes.sm}
60+
/>
4161
<JSONPretty
4262
style={{ fontSize: '16px', fontFamily: 'Rubik' }}
4363
id="json-pretty"
@@ -50,7 +70,7 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
5070

5171
if (typeof elementSchema === 'boolean' || elementSchema === null) {
5272
return (
53-
<Box marginVertical={'md'} style={{ width: '40%' }}>
73+
<Box marginTop={'lg'} style={{ width: '40%' }}>
5474
<Box>
5575
{/* {console.log(elementSchema, elementName, 'asdasdasda2222sdasd')}
5676
<FlexBox.Row justifyContent="space-between">
@@ -64,11 +84,11 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
6484
<span className={`${styles.slider} ${styles.round}`}></span>
6585
</label>
6686
</FlexBox.Row> */}
67-
<ToggleField
68-
value={elementSchema}
69-
onHandleChange={() => {}}
70-
label={titleCase(elementName)}
71-
disabled={true}
87+
<ToggleField
88+
value={elementSchema}
89+
onHandleChange={() => {}}
90+
label={titleCase(elementName)}
91+
disabled={true}
7292
/>
7393
</Box>
7494
</Box>
@@ -77,12 +97,12 @@ export const NonEditableRunConfig: React.FC<{ runConfiguration: any }> = ({
7797
};
7898

7999
return (
80-
<>
100+
<FlexBox.Column marginLeft="md">
81101
{Object.keys(runConfiguration).map((key, ind) => (
82102
// <Col xs={6} key={ind}>
83103
<>{getFormElement(key, runConfiguration[key])}</>
84104
// </Col>
85105
))}
86-
</>
106+
</FlexBox.Column>
87107
);
88108
};

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@
1717
position: absolute;
1818
}
1919

20+
.viewConfig {
21+
height: 18px;
22+
width: 18px;
23+
right:4px;
24+
accent-color: $primaryColor;
25+
position: absolute;
26+
}
27+
2028

2129
.imageWrapper {
2230
display: flex;

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React from 'react';
2-
import { Box, Paragraph } from '../../../components';
2+
import { Box, Paragraph, icons } from '../../../components';
33

44
import styles from './index.module.scss';
55
import { titleCase } from '../../../../utils/camelCase';
66
import ReactTooltip from 'react-tooltip';
7+
import { iconColors } from '../../../../constants';
78

89
export const CustomStackBox: React.FC<{
910
image: any;
1011
stackName: string;
1112
stackDesc: string;
1213
value?: any;
1314
onCheck: any;
14-
}> = ({ image, stackName, stackDesc, value, onCheck }) => {
15+
onViewConfig: any;
16+
}> = ({ image, stackName, stackDesc, value, onCheck, onViewConfig }) => {
1517
return (
1618
<Box
1719
paddingHorizontal="sm2"
@@ -24,6 +26,15 @@ export const CustomStackBox: React.FC<{
2426
checked={value}
2527
onClick={onCheck}
2628
/>
29+
30+
<icons.config
31+
onClick={onViewConfig}
32+
className={styles.viewConfig}
33+
// size={iconSizes.sm}
34+
// style={{ height: '18px', width: '18px' }}
35+
color={iconColors.primary}
36+
/>
37+
2738
<Box className={styles.imageWrapper}>
2839
<Box className={styles.imageContainer}>
2940
<img src={image} alt="by Zenml" />

0 commit comments

Comments
 (0)