Skip to content

Commit a7cecfe

Browse files
talhainvenxiontalhainvenxion
authored
Merge pull request #307 from zenml-io/dev
Dev
2 parents f967853 + c5fc61e commit a7cecfe

File tree

28 files changed

+694
-398
lines changed

28 files changed

+694
-398
lines changed

‎src/constants/constantCommands.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ export const constantCommandsToCreateStack = {
2828
},
2929
],
3030
};
31+
export const constantCommandsToCreateSecret = {
32+
title: 'Stack Cheatsheet',
33+
documentation:
34+
'https://docs.zenml.io/starter-guide/production-fundamentals/secrets-management',
35+
};
3136

3237
export const constantCommandsToCreatePipeline = {
3338
title: 'Pipeline Cheatsheet',
@@ -91,7 +96,6 @@ export const constantCommandsToCreateRuns = {
9196
],
9297
};
9398

94-
9599
export const constantCommandsToCreateComponent = {
96100
documentation: 'https://docs.zenml.io/starter-guide/stacks',
97101
componentCommand: {

‎src/redux/actions/secrets/getSecretByIdAction.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const getSecretByIdAction = ({
77
onFailure,
88
}: {
99
secretId: TId;
10-
onSuccess?: () => void;
10+
onSuccess?: (res: any) => void;
1111
onFailure?: () => void;
1212
}): TRequestAction => ({
1313
type: secretActionTypes.getSecretForId.request,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -853,6 +853,7 @@ const FilterComponent = ({
853853
},
854854
filterValue: value,
855855
},
856+
856857
{
857858
column: {
858859
selectedValue: {

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

Lines changed: 88 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111
LinkBox,
1212
icons,
1313
DropdownInput,
14+
InputWithLabelIcon,
1415
} from '..';
1516
import { handleUpdateNumericInput } from '../../../utils/input';
1617
import { iconColors } from '../../../constants/icons';
17-
import OutsideClickHandler from 'react-outside-click-handler';
1818
import ReactTooltip from 'react-tooltip';
1919

2020
export const FormValidationError = (props: {
@@ -199,69 +199,112 @@ export const MakeSecretField = (
199199
placeholder: any;
200200
value: string;
201201
onChange?: any;
202-
203-
secretLabel: string;
204-
secretLabelColor: any;
205-
secretPlaceholder: any;
206-
secretValue: string;
207202
secretOnChange?: any;
208-
203+
handleClick?: any;
209204
dropdownOptions?: Array<any>;
205+
tooltipText?: string;
210206
} & any,
211207
): any => {
212-
213-
const handleClick = () => {
214-
return null
215-
};
216208

217-
const [popup, setPopup] = useState(false)
218-
219-
const options = props?.dropdownOptions?.filter((e: any) => e?.label?.toLowerCase().includes(props?.value?.toLowerCase()))
209+
const options = props?.dropdownOptions?.filter((e: any) =>
210+
e?.label?.toLowerCase().includes(props?.value?.toLowerCase()),
211+
);
220212

221-
useEffect(() => {
222-
if (props?.value?.slice(0, 2) === '{{') {
223-
setPopup(true)
224-
}
225-
// eslint-disable-next-line
226-
}, [props?.value])
227-
213+
// useEffect(() => {
214+
// if (props?.value?.slice(0, 2) === '{{' && props?.value?.length < 3) {
215+
// setPopup(true);
216+
// }
217+
// // eslint-disable-next-line
218+
// }, [props?.value]);
219+
220+
const handleClick = async (option: any) => {
221+
await props.secretOnChange(option);
222+
// await setPopup(false);
223+
};
228224

229225
return (
230226
<FlexBox.Column fullWidth>
231-
232227
<FlexBox alignItems="center" fullWidth style={{ position: 'relative' }}>
233-
<InputWithLabel
228+
<InputWithLabelIcon
234229
name={props.name}
235230
label={props.label}
236231
labelColor={props.labelColor}
237-
InputComponent={<TextInput {...props} style={{ border: '1px solid #C9CBD0' }} value={props.value} placeholder={props.placeholder} onChangeText={props.onChange} />}
232+
tooltipText={props.tooltipText}
233+
InputComponent={
234+
<TextInput
235+
{...props}
236+
style={{ border: '1px solid #C9CBD0' }}
237+
value={props.value}
238+
placeholder={props.placeholder}
239+
onChangeText={props.onChange}
240+
/>
241+
}
238242
/>
239-
240-
{popup && (
241-
<Box style={{ backgroundColor: '#fff', borderRadius: '4px', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)', width: '100%', position: 'absolute', zIndex: 2, top: '7rem' }}>
242-
<OutsideClickHandler onOutsideClick={() => setPopup(false)}>
243-
244-
<Box marginVertical="sm" marginHorizontal="md" style={{ width: '100%', height: '100%' }}>
245-
{options?.map((option: any, index: number) => (
246-
<Box marginTop="md" onClick={() => {}} key={index}>
247-
<div data-tip data-for={option.name} onClick={() => {props.onChange(() => option.label); setPopup(false)} } style={{ cursor: 'pointer' }}>
248-
<Paragraph>{option.label}</Paragraph>
249-
</div>
250243

251-
<ReactTooltip id={option.label} place="top" effect="solid">
252-
<Paragraph color="white">{option.label}</Paragraph>
253-
</ReactTooltip>
254-
</Box>
255-
))}
256-
</Box>
257-
258-
</OutsideClickHandler>
244+
{props?.value?.length > 0 && props?.value?.slice(0, 2) !== '{{' && (
245+
<Box
246+
style={{
247+
position: 'absolute',
248+
right: '10px',
249+
top: '40px',
250+
display: 'flex',
251+
alignItems: 'center',
252+
background: '#fff',
253+
borderLeft: '1px solid grey',
254+
paddingLeft: '10px',
255+
cursor: 'pointer',
256+
}}
257+
onClick={() => props.handleClick()}
258+
>
259+
<icons.lock
260+
color={iconColors.primary}
261+
style={{ marginRight: '5px' }}
262+
/>
263+
<Paragraph color="primary">Make it Secret</Paragraph>
259264
</Box>
260265
)}
266+
267+
<If condition={props?.value?.slice(0, 2) === '{{' && props?.value?.slice(-2) !== '}}' && props?.dropdownOptions?.length > 0}>
268+
{() => (
269+
<Box
270+
style={{
271+
backgroundColor: '#fff',
272+
borderRadius: '4px',
273+
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.05)',
274+
width: '100%',
275+
position: 'absolute',
276+
zIndex: 2,
277+
top: '7rem',
278+
}}
279+
>
280+
<Box
281+
marginVertical="sm"
282+
marginHorizontal="md"
283+
style={{ width: '100%', height: '100%' }}
284+
>
285+
{options?.map((option: any, index: number) => (
286+
<Box marginTop="md" onClick={() => {}} key={index}>
287+
<div
288+
data-tip
289+
data-for={option.name}
290+
onClick={() => handleClick(option)}
291+
style={{ cursor: 'pointer' }}
292+
>
293+
<Paragraph>{option.label}</Paragraph>
294+
</div>
261295

296+
<ReactTooltip id={option.label} place="top" effect="solid">
297+
<Paragraph color="white">{option.label}</Paragraph>
298+
</ReactTooltip>
299+
</Box>
300+
))}
301+
</Box>
302+
</Box>
303+
)}
304+
</If>
262305
</FlexBox>
263306

264-
{props?.value?.length > 0 &&
307+
{/* {props?.value?.length > 0 &&
265308
props?.value?.slice(0, 2) !== '{{' && (
266309
<FlexBox marginTop='lg' alignItems="center" fullWidth style={{ position: 'relative' }}>
267310
<InputWithLabel
@@ -283,8 +326,7 @@ export const MakeSecretField = (
283326
<Paragraph color='primary'>Make it Secret</Paragraph>
284327
</Box>
285328
</FlexBox>
286-
)}
287-
329+
)} */}
288330
</FlexBox.Column>
289331
);
290332
};

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

Lines changed: 8 additions & 0 deletions
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import { ReactComponent as ModelRegistry } from './assets/ModelRegistry.svg';
7070
import { ReactComponent as Share } from './assets/share.svg';
7171
import { ReactComponent as EmptyRightArrow } from './assets/EmptyRightArrow.svg';
7272
import { ReactComponent as AddNew } from './assets/addNew.svg';
73+
import { ReactComponent as SupportAgent } from './assets/SupportAgent.svg';
7374
// import { ReactComponent as Inprogress } from './assets/InProgress.svg';
7475
// import { ReactComponent as Cached } from './assets/Cached.svg';
7576
// import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -192,6 +193,7 @@ const icons = {
192193
emptyRightArrow: createIcon({ Component: EmptyRightArrow, useStroke: true }),
193194
circleCheck: createIcon({ Component: CircleCheck }),
194195
addNew: createIcon({ Component: AddNew }),
196+
supportAgent: createIcon({ Component: SupportAgent }),
195197
//icons for stackComponents
196198
artifact_store: createIcon({ Component: Folders, useStroke: true }),
197199
alerter: createIcon({ Component: ChatDots, useStroke: true }),

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

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,53 @@
11
import React from 'react';
22
import cn from 'classnames';
33

4-
import { Box, FlexBox, Paragraph } from '..';
5-
4+
import { Box, FlexBox, Paragraph, icons } from '..';
5+
import { iconColors, iconSizes } from '../../../constants';
66
import styles from './index.module.scss';
7+
import ReactTooltip from 'react-tooltip';
8+
9+
export const InputWithLabelIcon = ({
10+
InputComponent,
11+
label,
12+
name,
13+
labelColor,
14+
optional,
15+
tooltipText
16+
}: {
17+
InputComponent: JSX.Element;
18+
label: string;
19+
name?: any;
20+
labelColor?: any;
21+
optional?: string;
22+
tooltipText?: string;
23+
}): JSX.Element => (
24+
<FlexBox.Column fullWidth>
25+
<FlexBox paddingBottom="sm">
26+
<Paragraph
27+
size="body"
28+
style={{ color: labelColor ? labelColor : 'black' }}
29+
>
30+
<label htmlFor={name}>
31+
{label}
32+
{optional && <span style={{ color: 'red' }}>{optional}</span>}
33+
</label>
34+
</Paragraph>
35+
36+
<Box marginLeft='sm' style={{ cursor: 'pointer' }}>
37+
<div data-tip data-for='config-icon'>
38+
<icons.config size={iconSizes.sm} color={iconColors.black} />
39+
</div>
40+
</Box>
41+
42+
<Box style={{ zIndex: 99999 }}>
43+
<ReactTooltip id='config-icon' place="bottom" effect='solid'>
44+
<Paragraph color="white">{tooltipText}</Paragraph>
45+
</ReactTooltip>
46+
</Box>
47+
</FlexBox>
48+
{InputComponent}
49+
</FlexBox.Column>
50+
);
751

852
export const InputWithLabel = ({
953
InputComponent,

0 commit comments

Comments
 (0)