Skip to content

Commit 5820f93

Browse files
danialraza03danialraza03
authored
Merge pull request #24 from zenml-io/talha/Feat/Modal-with-constants
Talha/feat/modal with constants
2 parents 9c07b3f + 042dad4 commit 5820f93

File tree

11 files changed

+636
-121
lines changed

11 files changed

+636
-121
lines changed

‎src/constants/constantCommands.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
export const constantCommandsToCreateStack = {
2+
title: 'Create Stack',
3+
documentation: 'https://google.com',
4+
body: [
5+
{
6+
text: 'you can set it active',
7+
isCode: false,
8+
},
9+
{
10+
text: 'yarn start',
11+
isCode: true,
12+
},
13+
{
14+
text: 'yarn start',
15+
isCode: true,
16+
},
17+
{
18+
text: 'yarn start',
19+
isCode: true,
20+
},
21+
{
22+
text: 'yarn start',
23+
isCode: true,
24+
},
25+
{
26+
text: 'yarn start',
27+
isCode: true,
28+
},
29+
{
30+
text: 'you can set it active',
31+
isCode: false,
32+
},
33+
],
34+
};
35+
36+
export const constantCommandsToCreatePipeline = {
37+
title: 'Create Pipeline',
38+
documentation: 'https://google.com',
39+
body: [
40+
{
41+
text: 'you can set it active',
42+
isCode: false,
43+
},
44+
{
45+
text: 'yarn start',
46+
isCode: true,
47+
},
48+
{
49+
text: 'yarn start',
50+
isCode: true,
51+
},
52+
{
53+
text: 'yarn start',
54+
isCode: true,
55+
},
56+
{
57+
text: 'yarn start',
58+
isCode: true,
59+
},
60+
{
61+
text: 'yarn start',
62+
isCode: true,
63+
},
64+
{
65+
text: 'you can set it active',
66+
isCode: false,
67+
},
68+
],
69+
};
70+
71+
export const constantCommandsToCreateComponent = {
72+
// title: 'Create Pipeline',
73+
documentation: 'https://google.com',
74+
componentCommand: {
75+
type: 'alerter',
76+
body: [
77+
{
78+
text: 'you can set it active',
79+
isCode: false,
80+
},
81+
{
82+
text: 'yarn start alerter ',
83+
isCode: true,
84+
},
85+
{
86+
text: 'yarn start alerter',
87+
isCode: true,
88+
},
89+
{
90+
text: 'yarn start alerter',
91+
isCode: true,
92+
},
93+
{
94+
text: 'yarn start alerter',
95+
isCode: true,
96+
},
97+
{
98+
text: 'yarn start alerter',
99+
isCode: true,
100+
},
101+
{
102+
text: 'you can set it active',
103+
isCode: false,
104+
},
105+
],
106+
},
107+
defaultBody: [
108+
{
109+
text: 'you can set it default',
110+
isCode: false,
111+
},
112+
{
113+
text: 'yarn start default ',
114+
isCode: true,
115+
},
116+
{
117+
text: 'yarn start default',
118+
isCode: true,
119+
},
120+
{
121+
text: 'yarn start default',
122+
isCode: true,
123+
},
124+
{
125+
text: 'yarn start default',
126+
isCode: true,
127+
},
128+
{
129+
text: 'yarn start default',
130+
isCode: true,
131+
},
132+
{
133+
text: 'you can set it default',
134+
isCode: false,
135+
},
136+
],
137+
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ export const SecondaryLink = (props: {
2424
);
2525

2626
export const ExternalSecondaryLink = (props: {
27-
href: string;
27+
href?: string;
2828
text: string;
2929
size?: Sizes;
3030
}): JSX.Element => (
3131
<a
32-
target="_blank"
32+
target="_blank"
3333
rel="noopener noreferrer"
3434
className={styles.link}
3535
href={props.href}

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export interface TableProps {
3434
trOnClick?: (arg: any) => void;
3535
}
3636

37-
const ITEMS_PER_PAGE = 25;
37+
const ITEMS_PER_PAGE = 5;
3838

3939
export const Table: React.FC<TableProps> = ({
4040
headerCols,
@@ -72,15 +72,22 @@ export const Table: React.FC<TableProps> = ({
7272
renderWhenTrue={() => (
7373
<>
7474
<table className={styles.table}>
75-
<thead style={{ backgroundColor: '#F4F4F4' }} >
75+
<thead style={{ backgroundColor: '#F4F4F4' }}>
7676
<tr className={showHeader ? styles.tableHeaderRow : ''}>
7777
{headerCols.map((headerCol: HeaderCol, index: number) => (
7878
<th
7979
className={styles.tableHeadingTh}
80-
style={{ width: headerCol.width, color: '#000', fontWeight: 700 }}
80+
style={{
81+
width: headerCol.width,
82+
color: '#000',
83+
fontWeight: 700,
84+
}}
8185
key={index}
8286
>
83-
<Box paddingVertical={showHeader ? 'sm' : null} paddingLeft='lg' >
87+
<Box
88+
paddingVertical={showHeader ? 'sm' : null}
89+
paddingLeft="lg"
90+
>
8491
{headerCol.render && headerCol.render()}
8592
</Box>
8693
</th>
@@ -111,7 +118,7 @@ export const Table: React.FC<TableProps> = ({
111118
style={{ width: headerCol.width }}
112119
key={index}
113120
>
114-
<Box paddingVertical="md" paddingLeft='lg'>
121+
<Box paddingVertical="md" paddingLeft="lg">
115122
<Truncate maxLines={1}>
116123
{headerCol.renderRow(headerRow)}
117124
</Truncate>

‎src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx‎

Lines changed: 158 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,77 @@
1+
// import React from 'react';
2+
// import { translate } from './translate';
3+
// import { Box, PrimaryButton } from '../../../components';
4+
// import { useService } from './useService';
5+
6+
// import { CommandPopup } from '../../common/CommandPopup';
7+
8+
// export const CreatePipelineButton: React.FC = () => {
9+
// const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState<
10+
// boolean
11+
// >(false);
12+
13+
// const { currentWorkspace } = useService();
14+
15+
// const commandText = `zenml workspace set ${
16+
// currentWorkspace && currentWorkspace.id
17+
// }`;
18+
19+
// return (
20+
// <Box
21+
// style={{ position: 'relative' }}
22+
// paddingVertical="sm"
23+
// paddingHorizontal="sm"
24+
// >
25+
// <PrimaryButton onClick={() => setCreatePipelinePopupOpen(true)}>
26+
// {translate('createButton.text')}
27+
// </PrimaryButton>
28+
// <CommandPopup
29+
// commandText={commandText}
30+
// open={createPipelinePopupOpen}
31+
// setOpen={setCreatePipelinePopupOpen}
32+
// />
33+
// </Box>
34+
// );
35+
// };
36+
137
import React from 'react';
2-
import { translate } from './translate';
3-
import { Box, PrimaryButton } from '../../../components';
4-
import { useService } from './useService';
38+
import styles from './index.module.scss';
539

6-
import { CommandPopup } from '../../common/CommandPopup';
40+
import { useDispatch } from '../../../hooks';
41+
import { showToasterAction } from '../../../../redux/actions';
42+
import { toasterTypes } from '../../../../constants';
43+
44+
import {
45+
Box,
46+
PrimaryButton,
47+
FlexBox,
48+
H3,
49+
Paragraph,
50+
icons,
51+
} from '../../../components';
52+
import { iconSizes, iconColors } from '../../../../constants';
53+
import { Popup } from '../../common/Popup';
54+
import { DocumentationLink } from './DocumentationLink';
55+
import { CommandBoxWScroll } from '../../common/CommandBox';
56+
import { constantCommandsToCreatePipeline } from '../../../../constants/constantCommands';
757

858
export const CreatePipelineButton: React.FC = () => {
59+
const dispatch = useDispatch();
960
const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState<
1061
boolean
1162
>(false);
1263

13-
const { currentWorkspace } = useService();
64+
const codeString = '#!/bin/bash';
1465

15-
const commandText = `zenml workspace set ${
16-
currentWorkspace && currentWorkspace.id
17-
}`;
66+
const handleCopy = () => {
67+
navigator.clipboard.writeText(codeString);
68+
dispatch(
69+
showToasterAction({
70+
description: 'Command copied to clipboard',
71+
type: toasterTypes.success,
72+
}),
73+
);
74+
};
1875

1976
return (
2077
<Box
@@ -23,13 +80,100 @@ export const CreatePipelineButton: React.FC = () => {
2380
paddingHorizontal="sm"
2481
>
2582
<PrimaryButton onClick={() => setCreatePipelinePopupOpen(true)}>
26-
{translate('createButton.text')}
83+
Create Pipeline
2784
</PrimaryButton>
28-
<CommandPopup
29-
commandText={commandText}
30-
open={createPipelinePopupOpen}
31-
setOpen={setCreatePipelinePopupOpen}
32-
/>
85+
86+
{createPipelinePopupOpen && (
87+
<Popup onClose={() => setCreatePipelinePopupOpen(false)}>
88+
<FlexBox.Row>
89+
<H3 bold color="darkGrey">
90+
{constantCommandsToCreatePipeline.title}
91+
</H3>
92+
</FlexBox.Row>
93+
{constantCommandsToCreatePipeline.body.map((item): any =>
94+
item.isCode ? (
95+
<FlexBox alignItems="center" marginTop="md">
96+
<CommandBoxWScroll command={item.text} />
97+
<Box
98+
className={styles.iconStyle}
99+
style={{ paddingTop: '7px' }}
100+
onClick={handleCopy}
101+
>
102+
<icons.copy size={iconSizes.sm} color={iconColors.black} />
103+
</Box>
104+
</FlexBox>
105+
) : (
106+
<FlexBox.Row>
107+
<Box marginTop="md">
108+
<Paragraph>{item.text}</Paragraph>
109+
</Box>
110+
</FlexBox.Row>
111+
),
112+
)}
113+
114+
{/* <FlexBox.Row>
115+
<Box marginTop="md">
116+
<Paragraph>you can set it active</Paragraph>
117+
</Box>
118+
</FlexBox.Row>
119+
120+
<FlexBox alignItems="center" marginTop="md">
121+
<CommandBoxWScroll command={codeString} />
122+
<Box
123+
className={styles.iconStyle}
124+
style={{ paddingTop: '7px' }}
125+
onClick={handleCopy}
126+
>
127+
<icons.copy size={iconSizes.sm} color={iconColors.black} />
128+
</Box>
129+
</FlexBox> */}
130+
131+
{/* <FlexBox alignItems="center" marginTop="sm">
132+
<CommandBoxWScroll command={codeString} />
133+
<Box
134+
className={styles.iconStyle}
135+
style={{ paddingTop: '7px' }}
136+
onClick={handleCopy}
137+
>
138+
<icons.copy size={iconSizes.sm} color={iconColors.black} />
139+
</Box>
140+
</FlexBox>
141+
142+
<FlexBox alignItems="center" marginTop="sm">
143+
<CommandBoxWScroll command={codeString} />
144+
<Box
145+
className={styles.iconStyle}
146+
style={{ paddingTop: '7px' }}
147+
onClick={handleCopy}
148+
>
149+
<icons.copy size={iconSizes.sm} color={iconColors.black} />
150+
</Box>
151+
</FlexBox> */}
152+
153+
{/* <FlexBox.Row>
154+
<Box marginTop="md">
155+
<Paragraph>you can set it active</Paragraph>
156+
</Box>
157+
</FlexBox.Row> */}
158+
159+
{/* <FlexBox alignItems="center" marginTop="sm">
160+
<CommandBoxWScroll command={codeString} />
161+
<Box
162+
className={styles.iconStyle}
163+
style={{ paddingTop: '7px' }}
164+
onClick={handleCopy}
165+
>
166+
<icons.copy size={iconSizes.sm} color={iconColors.black} />
167+
</Box>
168+
</FlexBox> */}
169+
170+
<FlexBox justifyContent="end" marginTop="xl" flexWrap>
171+
<DocumentationLink
172+
text={constantCommandsToCreatePipeline.documentation}
173+
/>
174+
</FlexBox>
175+
</Popup>
176+
)}
33177
</Box>
34178
);
35179
};

0 commit comments

Comments
 (0)