Skip to content

Commit 5c42346

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #341 from zenml-io/ahsan_secrets_2
UI updates
2 parents 7bde328 + 5415efd commit 5c42346

File tree

9 files changed

+291
-208
lines changed

9 files changed

+291
-208
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.formatOnSave": true
3+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,11 @@ export const MakeSecretField = (
282282
borderRadius: '4px',
283283
boxShadow: 'var(--cardShadow)',
284284
width: '100%',
285+
286+
height: '185px',
287+
overflowY: 'auto',
288+
overflowX: 'hidden',
289+
285290
position: 'absolute',
286291
zIndex: 2,
287292
top: '7rem',

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

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -126,22 +126,22 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
126126
{Object.keys(elementSchema).length < 1 && (
127127
<Box style={{ position: 'relative' }}>
128128
<div
129-
style={{
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',
143-
}}
144-
>
129+
style={{
130+
position: 'absolute',
131+
bottom: '-5px',
132+
width: '5px',
133+
height: '5px',
134+
borderRadius: '100%',
135+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
136+
}}
137+
></div>
138+
139+
<div
140+
style={{
141+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
142+
marginLeft: '2px',
143+
}}
144+
>
145145
<FlexBox.Row>
146146
<Box
147147
style={{ display: 'flex', alignItems: 'center' }}
@@ -205,49 +205,49 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
205205
</FlexBox.Row>
206206
</div>
207207
</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"
233-
>
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>
208+
)}
209+
210+
<Box style={{ position: 'relative' }}>
211+
<div
212+
style={{
213+
position: 'absolute',
214+
bottom: '-5px',
215+
width: '5px',
216+
height: '5px',
217+
borderRadius: '100%',
218+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
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"
233+
>
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>
251251

252252
<EditField
253253
disabled
@@ -301,22 +301,22 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
301301

302302
<Box style={{ position: 'relative' }}>
303303
<div
304-
style={{
305-
position: 'absolute',
306-
bottom: '10px',
307-
width: '5px',
308-
height: '5px',
309-
borderRadius: '100%',
310-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
311-
}}
312-
></div>
313-
314-
<div
315-
style={{
316-
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
317-
marginLeft: '2px',
318-
}}
319-
>
304+
style={{
305+
position: 'absolute',
306+
bottom: '10px',
307+
width: '5px',
308+
height: '5px',
309+
borderRadius: '100%',
310+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
311+
}}
312+
></div>
313+
314+
<div
315+
style={{
316+
borderLeft: '1px solid rgba(68, 62, 153, 0.3)',
317+
marginLeft: '2px',
318+
}}
319+
>
320320
{mappedObject &&
321321
mappedObject[elementName]?.map((item: any, index: any) => (
322322
<Fragment key={index}>

‎src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const Configuration: React.FC<{
8282
value={secret?.name}
8383
disabled
8484
onChange={() => {}}
85-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
85+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
8686
/>
8787
</Box>
8888
<Box marginTop="lg" style={{ width: '329px' }}>
@@ -98,6 +98,8 @@ export const Configuration: React.FC<{
9898
paddingLeft: '10px',
9999
backgroundColor: 'rgba(168, 168, 168, 0.1)',
100100
color: '#a1a4ab',
101+
border: '1px solid #c9cbd0',
102+
borderRadius: '4px',
101103
}}
102104
/>
103105
</Box>

‎src/ui/layouts/secrets/Selector/SelectorDisabled.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
3434
value={item[0]}
3535
disabled
3636
placeholder={''}
37-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
37+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
3838
/>
3939
</Box>
4040
{console.log(item, 'itemitem')}
@@ -48,7 +48,7 @@ const SelectorDisabled: React.FC<Props> = ({ label, inputFields, width }) => {
4848
placeholder={''}
4949
error={{}}
5050
showPasswordOption
51-
style={{ backgroundColor: 'rgba(168, 168, 168, 0.1)' }}
51+
style={{ background: 'rgba(168, 168, 168, 0.1)', border: '1px solid #c9cbd0', borderRadius: '4px' }}
5252
/>
5353
</Box>
5454
</Box>

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

Lines changed: 34 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -273,11 +273,11 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
273273
<div
274274
style={{
275275
position: 'absolute',
276-
bottom: '0',
276+
bottom: '-5px',
277277
width: '5px',
278278
height: '5px',
279279
borderRadius: '100%',
280-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
280+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
281281
}}
282282
></div>
283283

@@ -381,7 +381,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
381381
)
382382
}
383383
>
384-
<icons.minusCircle color={iconColors.primary} />
384+
<icons.delete color={iconColors.grey} />
385385
</button>
386386
)}
387387

@@ -393,7 +393,7 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
393393
handleAddFields(props.name, parentIndex)
394394
}
395395
>
396-
<icons.plusCircle color={iconColors.primary} />
396+
<icons.addNew color={iconColors.primary} />
397397
</button>
398398
)}
399399
</div>
@@ -588,11 +588,11 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
588588
<div
589589
style={{
590590
position: 'absolute',
591-
bottom: '0',
591+
bottom: '-5px',
592592
width: '5px',
593593
height: '5px',
594594
borderRadius: '100%',
595-
backgroundColor: 'rgba(68, 62, 153, 0.8)',
595+
backgroundColor: 'rgba(68, 62, 153, 0.3)',
596596
}}
597597
></div>
598598

@@ -662,44 +662,34 @@ export const CreateComponent: React.FC<{ flavor: any; state: any }> = ({
662662
marginLeft: '-10px',
663663
}}
664664
>
665-
<div
666-
style={{
667-
display: 'flex',
668-
flexDirection: 'row',
669-
justifyContent: 'space-between',
670-
alignItems: 'center',
671-
}}
672-
>
673-
{inputArrayFields[props.name].length > 1 && (
674-
<button
675-
className={styles.fieldButton}
676-
style={{}}
677-
type="button"
678-
// disabled={item[props.name].length === 1}
679-
onClick={() => {
680-
const values = { ...inputArrayFields };
681-
values[props.name].splice(index, 1);
682-
setInputArrayFields(values);
683-
}}
684-
>
685-
<icons.minusCircle color={iconColors.primary} />
686-
</button>
687-
)}
688-
{index ===
689-
inputArrayFields[props.name].length - 1 && (
690-
<button
691-
className={styles.fieldButton}
692-
type="button"
693-
onClick={() => {
694-
const values = { ...inputArrayFields };
695-
values[props.name].push('');
696-
setInputArrayFields(values);
697-
}}
698-
>
699-
<icons.plusCircle color={iconColors.primary} />
700-
</button>
701-
)}
702-
</div>
665+
{inputArrayFields[props.name].length > 1 && (
666+
<button
667+
className={styles.fieldButton}
668+
style={{}}
669+
type="button"
670+
// disabled={item[props.name].length === 1}
671+
onClick={() => {
672+
const values = { ...inputArrayFields };
673+
values[props.name].splice(index, 1);
674+
setInputArrayFields(values);
675+
}}
676+
>
677+
<icons.delete color={iconColors.grey} />
678+
</button>
679+
)}
680+
{index === inputArrayFields[props.name].length - 1 && (
681+
<button
682+
className={styles.fieldButton}
683+
type="button"
684+
onClick={() => {
685+
const values = { ...inputArrayFields };
686+
values[props.name].push('');
687+
setInputArrayFields(values);
688+
}}
689+
>
690+
<icons.addNew color={iconColors.primary} />
691+
</button>
692+
)}
703693
</div>
704694
</Box>
705695
</Fragment>

‎src/ui/layouts/stackComponents/StackDetail/Configuration/index.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ input:checked + .slider:before {
110110
box-sizing: border-box;
111111
display: flex;
112112
min-height: 45px;
113+
min-width: 417px;
113114
width: 100%;
114115
height: 160px;
115116
font-family: $fontFamilyNormal;

0 commit comments

Comments
 (0)