Skip to content

Commit 449a2dd

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #158 from zenml-io/register-component-ui
table and config UI updates
2 parents c31ed4a + 2518901 commit 449a2dd

File tree

6 files changed

+101
-71
lines changed

6 files changed

+101
-71
lines changed

‎src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,9 +184,11 @@ export const GetHeaderCols = ({
184184
},
185185
{
186186
render: () => (
187-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
188-
STATUS
189-
</Paragraph>
187+
<div style={{ marginLeft: '7rem' }} >
188+
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
189+
STATUS
190+
</Paragraph>
191+
</div>
190192
),
191193
width: '8%',
192194
renderRow: (pipeline: TPipeline) => <Status pipeline={pipeline} />,

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -169,13 +169,15 @@ export const useHeaderCols = ({
169169
activeSorting={activeSorting}
170170
activeSortingDirection={activeSortingDirection}
171171
>
172-
<Paragraph
173-
size="small"
174-
color="black"
175-
style={{ fontSize: '12px' }}
176-
>
177-
STATUS
178-
</Paragraph>
172+
<div style={{ margin: '0 auto 0 auto' }}>
173+
<Paragraph
174+
size="small"
175+
color="black"
176+
style={{ fontSize: '12px', marginLeft: '-24px' }}
177+
>
178+
STATUS
179+
</Paragraph>
180+
</div>
179181
</SortingHeader>
180182
),
181183
width: '15%',
@@ -419,13 +421,15 @@ export const useHeaderCols = ({
419421
activeSorting={activeSorting}
420422
activeSortingDirection={activeSortingDirection}
421423
>
422-
<Paragraph
423-
size="small"
424-
color="black"
425-
style={{ fontSize: '12px' }}
426-
>
427-
STATUS
428-
</Paragraph>
424+
<div style={{ margin: '0 auto 0 auto' }}>
425+
<Paragraph
426+
size="small"
427+
color="black"
428+
style={{ fontSize: '12px', marginLeft: '-24px' }}
429+
>
430+
STATUS
431+
</Paragraph>
432+
</div>
429433
</SortingHeader>
430434
),
431435
width: '15%',

‎src/ui/layouts/stackComponents/RunsTable/HeaderCols/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,9 +189,11 @@ export const useHeaderCols = ({
189189
activeSorting={activeSorting}
190190
activeSortingDirection={activeSortingDirection}
191191
>
192-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
193-
STATUS
194-
</Paragraph>
192+
<div style={{ margin: '0 auto 0 auto' }}>
193+
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
194+
STATUS
195+
</Paragraph>
196+
</div>
195197
</SortingHeader>
196198
),
197199
width: '10%',

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

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,32 @@ import {
44
Box,
55
EditField,
66
Paragraph,
7-
// PrimaryButton,
7+
Row,
88
} from '../../../../components';
99
import styles from './index.module.scss';
1010
import { useService } from './useService';
1111

12+
1213
export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
1314
const { stackComponent } = useService({
1415
stackId,
1516
});
16-
console.log(stackComponent, 'stack222Component');
17-
const getFormElement = (elementName: any, elementSchema: any) => {
18-
// debugger;
1917

18+
19+
const titleCase = (s: any) =>
20+
s.replace(/^_*(.)|_+(.)/g, (s: any, c: string, d: string) =>
21+
c ? c.toUpperCase() : ' ' + d.toUpperCase(),
22+
);
23+
24+
25+
const getFormElement = (elementName: any, elementSchema: any) => {
2026
if (typeof elementSchema === 'string') {
2127
return (
22-
<Box style={{ width: '40%' }}>
28+
<Box style={{ width: '90%' }}>
2329
<EditField
2430
disabled
2531
onChangeText={() => console.log('')}
26-
label={elementName}
32+
label={titleCase(elementName)}
2733
optional={false}
2834
value={elementSchema}
2935
placeholder=""
@@ -35,9 +41,9 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
3541
}
3642
if (typeof elementSchema === 'object') {
3743
return (
38-
<Box style={{ width: '40%' }}>
44+
<Box style={{ width: '90%' }}>
3945
<Paragraph size="body" style={{ color: 'black' }}>
40-
<label htmlFor={elementName}>{elementName}</label>
46+
<label htmlFor={elementName}>{titleCase(elementName)}</label>
4147
</Paragraph>
4248
{Object.entries(elementSchema).map(([key, value]) => (
4349
<FlexBox.Row>
@@ -54,7 +60,7 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
5460
<div style={{ width: '10%' }}></div>
5561
<EditField
5662
disabled
57-
marginRight={'md'}
63+
// marginRight={'md'}
5864
onChangeText={() => console.log('')}
5965
label="Value"
6066
// optional={true}
@@ -70,10 +76,13 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
7076
}
7177
if (typeof elementSchema === 'boolean') {
7278
return (
73-
<Box style={{ width: '40%' }} marginVertical="md">
79+
<Box
80+
// marginVertical="md"
81+
style={{ width: '90%' }}
82+
>
7483
<Box>
7584
<FlexBox.Row justifyContent="space-between">
76-
<Paragraph>{elementName}</Paragraph>
85+
<Paragraph>{titleCase(elementName)}</Paragraph>
7786
<label className={styles.switch}>
7887
<input type="checkbox" checked={elementSchema} />
7988
<span className={`${styles.slider} ${styles.round}`}></span>
@@ -86,35 +95,42 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
8695
};
8796

8897
return (
89-
<FlexBox.Column fullWidth marginTop="xl">
90-
<Box style={{ width: '40%' }}>
91-
<EditField
92-
disabled
93-
onChangeText={() => console.log('')}
94-
label={'Flavor Name'}
95-
optional={false}
96-
value={stackComponent.flavor}
97-
placeholder=""
98-
hasError={false}
99-
className={styles.field}
100-
/>
101-
</Box>
102-
<Box style={{ width: '40%' }} marginVertical="md">
103-
<Box>
104-
<FlexBox.Row justifyContent="space-between">
105-
<Paragraph>Share Component with public</Paragraph>
106-
<label className={styles.switch}>
107-
<input type="checkbox" checked={stackComponent.isShared} />
108-
<span className={`${styles.slider} ${styles.round}`}></span>
109-
</label>
110-
</FlexBox.Row>
111-
</Box>
112-
</Box>
113-
{Object.keys(stackComponent?.configuration).map((key, ind) => (
114-
<div key={key}>
115-
{getFormElement(key, stackComponent?.configuration[key])}
116-
</div>
117-
))}
98+
<FlexBox justifyContent='space-between' marginLeft='md' marginTop="xl" fullWidth>
99+
<Row>
100+
<Box style={{ width: '46%' }}>
101+
<EditField
102+
disabled
103+
onChangeText={() => console.log('')}
104+
label={'Flavor Name'}
105+
optional={false}
106+
value={stackComponent.flavor}
107+
placeholder=""
108+
hasError={false}
109+
className={styles.field}
110+
/>
111+
</Box>
112+
<Box style={{ width: '46%', marginLeft: '5%' }} marginTop='lg' >
113+
<FlexBox.Row justifyContent="space-between">
114+
<Paragraph>Share Component with public</Paragraph>
115+
<label className={styles.switch}>
116+
<input type="checkbox" checked={stackComponent.isShared} />
117+
<span className={`${styles.slider} ${styles.round}`}></span>
118+
</label>
119+
</FlexBox.Row>
120+
</Box>
121+
122+
<Row>
123+
{Object.keys(stackComponent?.configuration).map((key, ind) => (
124+
<Row key={ind} style={{ width: '50%', marginLeft: 'auto' }}>
125+
{getFormElement(key, stackComponent?.configuration[key])}
126+
</Row>
127+
))}
128+
</Row>
129+
130+
131+
132+
</Row>
133+
118134
{/* <FlexBox.Row>
119135
<Box style={{ width: '40%' }}>
120136
<Box>
@@ -195,6 +211,6 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
195211
</FlexBox.Row> */}
196212

197213
{/* <Box style={{ marginLeft: 'auto' }} marginRight='lg' ><PrimaryButton>Register Component</PrimaryButton></Box> */}
198-
</FlexBox.Column>
214+
</FlexBox>
199215
);
200216
};

‎src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,11 @@ export const GetHeaderCols = ({
145145
activeSorting={activeSorting}
146146
activeSortingDirection={activeSortingDirection}
147147
>
148-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
149-
FLAVOR
150-
</Paragraph>
148+
<div style={{ margin: '0 auto 0 auto' }}>
149+
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
150+
FLAVOR
151+
</Paragraph>
152+
</div>
151153
</SortingHeader>
152154
),
153155
width: '15%',
@@ -196,9 +198,11 @@ export const GetHeaderCols = ({
196198
activeSorting={activeSorting}
197199
activeSortingDirection={activeSortingDirection}
198200
>
199-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
200-
SHARED
201-
</Paragraph>
201+
<div style={{ margin: '0 auto 0 auto' }}>
202+
<Paragraph size="small" color="black" style={{ fontSize: '12px', marginLeft: '-24px' }}>
203+
SHARED
204+
</Paragraph>
205+
</div>
202206
</SortingHeader>
203207
),
204208
width: '15%',

‎src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export const GetHeaderCols = ({
155155
},
156156
{
157157
render: () => (
158-
<SortingHeader
158+
<SortingHeader
159159
onlyOneRow={filteredStacks.length === 1 || expendedRow?.length === 1}
160160
sorting="is_shared"
161161
sortMethod={sortMethod('is_shared', {
@@ -167,9 +167,11 @@ export const GetHeaderCols = ({
167167
activeSorting={activeSorting}
168168
activeSortingDirection={activeSortingDirection}
169169
>
170-
<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
171-
SHARED
172-
</Paragraph>
170+
<div style={{ margin: '0 auto 0 auto' }}>
171+
<Paragraph size="small" color="black" style={{ marginLeft: '-24px' }}>
172+
SHARED
173+
</Paragraph>
174+
</div>
173175
</SortingHeader>
174176
),
175177
width: '8%',

0 commit comments

Comments
 (0)