Skip to content

Commit bdeadfe

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #331 from zenml-io/ahsan_secrets_2
UI update
2 parents 06df6df + 48aa5ec commit bdeadfe

File tree

3 files changed

+606
-296
lines changed

3 files changed

+606
-296
lines changed

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

Lines changed: 210 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -122,117 +122,173 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
122122
<Paragraph size="body" style={{ color: 'black' }}>
123123
<label htmlFor={elementName}>{titleCase(elementName)}</label>
124124
</Paragraph>
125-
{Object.keys(elementSchema).length < 1 && (
126-
<FlexBox.Row>
127-
<EditField
128-
disabled
129-
// onKeyDown={(e: any) =>
130-
// onPressEnterForEmpty(
131-
// e,
132-
// 'key',
133-
// elementName,
134-
// // index,
135-
// )
136-
// }
137-
onChangeText={
138-
(event: any) => {}
139-
// handleInputChange(0, event, elementName, 'key')
140-
}
141-
label="Key"
142-
optional={false}
143-
// value={''}
144-
placeholder=""
145-
hasError={false}
146-
className={styles.field}
147-
/>
148125

149-
<div style={{ width: '10%' }}></div>
150-
<EditField
151-
disabled
152-
// onKeyDown={(e: any) =>
153-
// onPressEnterForEmpty(e, 'value', elementName)
154-
// }
155-
onChangeText={(event: any) => {}}
156-
label="Value"
157-
// optional={true}
158-
// value={''}
159-
placeholder=""
160-
hasError={false}
161-
className={styles.field}
162-
/>
163-
{/* <div
164-
className="col-sx-2 "
126+
{Object.keys(elementSchema).length < 1 && (
127+
<Box style={{ position: 'relative' }}>
128+
<div
165129
style={{
166-
justifyContent: 'space-between',
167-
display: 'flex',
168-
marginTop: '35px',
169-
marginLeft: '5px',
130+
position: 'absolute',
131+
bottom: '0',
132+
width: '5px',
133+
height: '5px',
134+
borderRadius: '100%',
135+
backgroundColor: 'rgba(68, 62, 153, 0.8)',
136+
}}
137+
></div>
138+
139+
<div
140+
style={{
141+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
142+
marginLeft: '2px',
170143
}}
171144
>
172-
<icons.plusCircle
173-
onClick={() => handleAddFields()}
174-
color={iconColors.primary}
145+
<FlexBox.Row>
146+
<Box
147+
style={{ display: 'flex', alignItems: 'center' }}
148+
marginTop="sm"
149+
>
150+
<div
151+
style={{
152+
marginTop: '30px',
153+
width: '15px',
154+
borderTop: '1px solid rgba(68, 62, 153, 0.3)',
155+
}}
156+
></div>
157+
<div
158+
style={{
159+
marginTop: '30px',
160+
marginRight: '5px',
161+
marginLeft: '-2px',
162+
color: 'rgba(68, 62, 153, 0.3)',
163+
}}
164+
>
165+
&#x27A4;
166+
</div>
167+
168+
<EditField
169+
disabled
170+
// onKeyDown={(e: any) =>
171+
// onPressEnterForEmpty(
172+
// e,
173+
// 'key',
174+
// elementName,
175+
// // index,
176+
// )
177+
// }
178+
onChangeText={
179+
(event: any) => {}
180+
// handleInputChange(0, event, elementName, 'key')
181+
}
182+
label="Key"
183+
optional={false}
184+
// value={''}
185+
placeholder=""
186+
hasError={false}
187+
className={styles.field}
175188
/>
176-
</div> */}
177-
</FlexBox.Row>
178-
)}
179-
{Object.entries(elementSchema).map(([key, value], index) => (
180-
<>
181-
<FlexBox.Row marginTop="lg">
182-
<EditField
183-
disabled
184-
// onKeyDown={(e: any) =>
185-
// onPressEnter(e, 'key', elementName, key)
186-
// }
187-
// onChangeText={(e: any) =>{}
188-
// // onPressEnter(e, 'key', elementName, key, index)
189-
// }
190-
label="Key"
191-
optional={false}
192-
defaultValue={key}
193-
// value={key}
194-
placeholder=""
195-
hasError={false}
196-
className={styles.field}
197-
/>
198-
<div style={{ width: '10%' }}></div>
199-
<EditField
200-
disabled
201-
// marginRight={'md'}
202-
// onKeyDown={(e: any) =>
203-
// onPressEnter(e, 'value', elementName, key, index)
204-
// }
205-
// onChangeText={(e: any) =>
206-
// onPressEnter(e, 'value', elementName, key, index)
207-
// }
208-
label="Value"
209-
// optional={true}
210-
defaultValue={value}
211-
// value={value}
212-
placeholder=""
213-
hasError={false}
214-
className={styles.field}
215-
/>
216-
{/* {index === Object.entries(elementSchema).length - 1 &&
217-
!inputFields.length && (
218-
<div
219-
className="col-sx-2 "
220-
style={{
221-
justifyContent: 'space-between',
222-
display: 'flex',
223-
marginTop: '35px',
224-
marginLeft: '5px',
225-
}}
189+
190+
<div style={{ width: '10%' }}></div>
191+
<EditField
192+
disabled
193+
// onKeyDown={(e: any) =>
194+
// onPressEnterForEmpty(e, 'value', elementName)
195+
// }
196+
onChangeText={(event: any) => {}}
197+
label="Value"
198+
// optional={true}
199+
// value={''}
200+
placeholder=""
201+
hasError={false}
202+
className={styles.field}
203+
/>
204+
</Box>
205+
</FlexBox.Row>
206+
</div>
207+
</Box>
208+
)}
209+
210+
<Box style={{ position: 'relative' }}>
211+
<div
212+
style={{
213+
position: 'absolute',
214+
bottom: '0',
215+
width: '5px',
216+
height: '5px',
217+
borderRadius: '100%',
218+
backgroundColor: 'rgba(68, 62, 153, 0.8)',
219+
}}
220+
></div>
221+
222+
<div
223+
style={{
224+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
225+
marginLeft: '2px',
226+
}}
227+
>
228+
{Object.entries(elementSchema).map(([key, value], index) => (
229+
<FlexBox.Row>
230+
<Box
231+
style={{ display: 'flex', alignItems: 'center' }}
232+
marginTop="sm"
226233
>
227-
<icons.plusCircle
228-
onClick={() => handleAddFields()}
229-
color={iconColors.primary}
230-
/>
231-
</div>
232-
)} */}
233-
</FlexBox.Row>
234-
</>
235-
))}
234+
<div
235+
style={{
236+
marginTop: '30px',
237+
width: '35px',
238+
borderTop: '1px solid rgba(68, 62, 153, 0.3)',
239+
}}
240+
></div>
241+
<div
242+
style={{
243+
marginTop: '30px',
244+
marginRight: '5px',
245+
marginLeft: '-2px',
246+
color: 'rgba(68, 62, 153, 0.3)',
247+
}}
248+
>
249+
&#x27A4;
250+
</div>
251+
252+
<EditField
253+
disabled
254+
// onKeyDown={(e: any) =>
255+
// onPressEnter(e, 'key', elementName, key)
256+
// }
257+
// onChangeText={(e: any) =>{}
258+
// // onPressEnter(e, 'key', elementName, key, index)
259+
// }
260+
label="Key"
261+
optional={false}
262+
defaultValue={key}
263+
// value={key}
264+
placeholder=""
265+
hasError={false}
266+
className={styles.field}
267+
/>
268+
<div style={{ width: '10%' }}></div>
269+
<EditField
270+
disabled
271+
// marginRight={'md'}
272+
// onKeyDown={(e: any) =>
273+
// onPressEnter(e, 'value', elementName, key, index)
274+
// }
275+
// onChangeText={(e: any) =>
276+
// onPressEnter(e, 'value', elementName, key, index)
277+
// }
278+
label="Value"
279+
// optional={true}
280+
defaultValue={value}
281+
// value={value}
282+
placeholder=""
283+
hasError={false}
284+
className={styles.field}
285+
/>
286+
287+
</Box>
288+
</FlexBox.Row>
289+
))}
290+
</div>
291+
</Box>
236292
</Box>
237293
);
238294
}
@@ -244,48 +300,66 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
244300
<label htmlFor="key">{titleCase(elementName)}</label>
245301
</Paragraph>
246302

247-
<FlexBox.Row>
248-
<div className="form-row">
303+
<Box style={{ position: 'relative' }}>
304+
<div
305+
style={{
306+
position: 'absolute',
307+
bottom: '10px',
308+
width: '5px',
309+
height: '5px',
310+
borderRadius: '100%',
311+
backgroundColor: 'rgba(68, 62, 153, 0.8)',
312+
}}
313+
></div>
314+
315+
<div
316+
style={{
317+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
318+
marginLeft: '2px',
319+
}}
320+
>
249321
{mappedObject &&
250322
mappedObject[elementName]?.map((item: any, index: any) => (
251-
<Fragment>
252-
<div className="form-group col-sm-8">
253-
<EditField
254-
disabled
255-
className={styles.field}
256-
label={'Value'}
257-
value={item}
258-
placeholder={''}
259-
/>
260-
</div>
261-
<div
262-
className="col-sx-2 "
263-
style={{
264-
justifyContent: 'space-between',
265-
display: 'flex',
266-
marginTop: '10px',
267-
}}
323+
<Fragment key={index}>
324+
<Box
325+
style={{ display: 'flex', alignItems: 'center' }}
326+
marginTop="sm"
268327
>
269328
<div
270329
style={{
271-
display: 'flex',
272-
flexDirection: 'row',
273-
justifyContent: 'space-between',
274-
alignItems: 'center',
330+
marginTop: '30px',
331+
width: '15px',
332+
borderTop: '1px solid rgba(68, 62, 153, 0.3)',
275333
}}
276334
></div>
277-
</div>
278-
</Fragment>
335+
<div
336+
style={{
337+
marginTop: '30px',
338+
marginRight: '5px',
339+
marginLeft: '-2px',
340+
color: 'rgba(68, 62, 153, 0.3)',
341+
}}
342+
>
343+
&#x27A4;
344+
</div>
345+
346+
<div className="form-group col-sm-8">
347+
<EditField
348+
disabled
349+
className={styles.field}
350+
label={'Value'}
351+
value={item}
352+
placeholder={''}
353+
/>
354+
</div>
355+
356+
</Box>
357+
</Fragment>
279358
))}
280-
{/* {inputFields
281-
?.filter((x: any) => x.hasOwnProperty(props.name))
282-
.map((inputField: any, index: any) => (
283-
284-
))} */}
285359
</div>
286360
<div className="submit-button"></div>
287361
<br />
288-
</FlexBox.Row>
362+
</Box>
289363
</Box>
290364
);
291365
}

0 commit comments

Comments
 (0)