diff --git a/src/constants/constantCommands.ts b/src/constants/constantCommands.ts new file mode 100644 index 000000000..3daf46d90 --- /dev/null +++ b/src/constants/constantCommands.ts @@ -0,0 +1,137 @@ +export const constantCommandsToCreateStack = { + title: 'Create Stack', + documentation: 'https://google.com', + body: [ + { + text: 'you can set it active', + isCode: false, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'you can set it active', + isCode: false, + }, + ], +}; + +export const constantCommandsToCreatePipeline = { + title: 'Create Pipeline', + documentation: 'https://google.com', + body: [ + { + text: 'you can set it active', + isCode: false, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'yarn start', + isCode: true, + }, + { + text: 'you can set it active', + isCode: false, + }, + ], +}; + +export const constantCommandsToCreateComponent = { + // title: 'Create Pipeline', + documentation: 'https://google.com', + componentCommand: { + type: 'alerter', + body: [ + { + text: 'you can set it active', + isCode: false, + }, + { + text: 'yarn start alerter ', + isCode: true, + }, + { + text: 'yarn start alerter', + isCode: true, + }, + { + text: 'yarn start alerter', + isCode: true, + }, + { + text: 'yarn start alerter', + isCode: true, + }, + { + text: 'yarn start alerter', + isCode: true, + }, + { + text: 'you can set it active', + isCode: false, + }, + ], + }, + defaultBody: [ + { + text: 'you can set it default', + isCode: false, + }, + { + text: 'yarn start default ', + isCode: true, + }, + { + text: 'yarn start default', + isCode: true, + }, + { + text: 'yarn start default', + isCode: true, + }, + { + text: 'yarn start default', + isCode: true, + }, + { + text: 'yarn start default', + isCode: true, + }, + { + text: 'you can set it default', + isCode: false, + }, + ], +}; diff --git a/src/ui/components/links/index.tsx b/src/ui/components/links/index.tsx index 83b17342c..dc3072e96 100644 --- a/src/ui/components/links/index.tsx +++ b/src/ui/components/links/index.tsx @@ -24,12 +24,12 @@ export const SecondaryLink = (props: { ); export const ExternalSecondaryLink = (props: { - href: string; + href?: string; text: string; size?: Sizes; }): JSX.Element => ( void; } -const ITEMS_PER_PAGE = 25; +const ITEMS_PER_PAGE = 5; export const Table: React.FC = ({ headerCols, @@ -72,15 +72,22 @@ export const Table: React.FC = ({ renderWhenTrue={() => ( <> - + {headerCols.map((headerCol: HeaderCol, index: number) => ( @@ -111,7 +118,7 @@ export const Table: React.FC = ({ style={{ width: headerCol.width }} key={index} > - + {headerCol.renderRow(headerRow)} diff --git a/src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx b/src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx index bd56ee19f..cae215392 100644 --- a/src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx +++ b/src/ui/layouts/pipelines/Header/CreatePipelineButton.tsx @@ -1,20 +1,77 @@ +// import React from 'react'; +// import { translate } from './translate'; +// import { Box, PrimaryButton } from '../../../components'; +// import { useService } from './useService'; + +// import { CommandPopup } from '../../common/CommandPopup'; + +// export const CreatePipelineButton: React.FC = () => { +// const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState< +// boolean +// >(false); + +// const { currentWorkspace } = useService(); + +// const commandText = `zenml workspace set ${ +// currentWorkspace && currentWorkspace.id +// }`; + +// return ( +// +// setCreatePipelinePopupOpen(true)}> +// {translate('createButton.text')} +// +// +// +// ); +// }; + import React from 'react'; -import { translate } from './translate'; -import { Box, PrimaryButton } from '../../../components'; -import { useService } from './useService'; +import styles from './index.module.scss'; -import { CommandPopup } from '../../common/CommandPopup'; +import { useDispatch } from '../../../hooks'; +import { showToasterAction } from '../../../../redux/actions'; +import { toasterTypes } from '../../../../constants'; + +import { + Box, + PrimaryButton, + FlexBox, + H3, + Paragraph, + icons, +} from '../../../components'; +import { iconSizes, iconColors } from '../../../../constants'; +import { Popup } from '../../common/Popup'; +import { DocumentationLink } from './DocumentationLink'; +import { CommandBoxWScroll } from '../../common/CommandBox'; +import { constantCommandsToCreatePipeline } from '../../../../constants/constantCommands'; export const CreatePipelineButton: React.FC = () => { + const dispatch = useDispatch(); const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState< boolean >(false); - const { currentWorkspace } = useService(); + const codeString = '#!/bin/bash'; - const commandText = `zenml workspace set ${ - currentWorkspace && currentWorkspace.id - }`; + const handleCopy = () => { + navigator.clipboard.writeText(codeString); + dispatch( + showToasterAction({ + description: 'Command copied to clipboard', + type: toasterTypes.success, + }), + ); + }; return ( { paddingHorizontal="sm" > setCreatePipelinePopupOpen(true)}> - {translate('createButton.text')} + Create Pipeline - + + {createPipelinePopupOpen && ( + setCreatePipelinePopupOpen(false)}> + +

+ {constantCommandsToCreatePipeline.title} +

+ + {constantCommandsToCreatePipeline.body.map((item): any => + item.isCode ? ( + + + + + + + ) : ( + + + {item.text} + + + ), + )} + + {/* + + you can set it active + + + + + + + + + */} + + {/* + + + + + + + + + + + + */} + + {/* + + you can set it active + + */} + + {/* + + + + + */} + + + + + + )} ); }; diff --git a/src/ui/layouts/pipelines/Header/DocumentationLink.tsx b/src/ui/layouts/pipelines/Header/DocumentationLink.tsx index a4ae44054..e8d22a174 100644 --- a/src/ui/layouts/pipelines/Header/DocumentationLink.tsx +++ b/src/ui/layouts/pipelines/Header/DocumentationLink.tsx @@ -1,12 +1,24 @@ +// import React from 'react'; +// import { Box, ExternalSecondaryLink } from '../../../components'; +// import { translate } from './translate'; + +// export const DocumentationLink: React.FC = () => ( +// +// +// +// ); + import React from 'react'; import { Box, ExternalSecondaryLink } from '../../../components'; import { translate } from './translate'; - -export const DocumentationLink: React.FC = () => ( +interface Props { + text?: string; +} +export const DocumentationLink: React.FC = ({ text }: Props) => ( - + ); diff --git a/src/ui/layouts/runs/Header/CreateStackButton.tsx b/src/ui/layouts/runs/Header/CreateStackButton.tsx index 0bc4d6891..3b2b1123d 100644 --- a/src/ui/layouts/runs/Header/CreateStackButton.tsx +++ b/src/ui/layouts/runs/Header/CreateStackButton.tsx @@ -1,18 +1,24 @@ import React from 'react'; -import styles from './index.module.scss' +import styles from './index.module.scss'; import { useDispatch } from '../../../hooks'; import { showToasterAction } from '../../../../redux/actions'; import { toasterTypes } from '../../../../constants'; -import { Box, PrimaryButton, FlexBox, H3, Paragraph, icons} from '../../../components'; +import { + Box, + PrimaryButton, + FlexBox, + H3, + Paragraph, + icons, +} from '../../../components'; import { iconSizes, iconColors } from '../../../../constants'; import { Popup } from '../../common/Popup'; -import { DocumentationLink } from './DocumentationLink' +import { DocumentationLink } from './DocumentationLink'; import { CommandBoxWScroll } from '../../common/CommandBox'; export const CreateStackButton: React.FC = () => { - const dispatch = useDispatch(); const [createStackPopupOpen, setCreateStackPopupOpen] = React.useState< boolean @@ -20,15 +26,15 @@ export const CreateStackButton: React.FC = () => { const codeString = '#!/bin/bash'; - const handleCopy = () => { - navigator.clipboard.writeText(codeString) + const handleCopy = () => { + navigator.clipboard.writeText(codeString); dispatch( showToasterAction({ description: 'Command copied to clipboard', type: toasterTypes.success, }), ); - } + }; return ( { paddingVertical="sm" paddingHorizontal="sm" > - setCreateStackPopupOpen(true)}>Create Stack - + setCreateStackPopupOpen(true)}> + Create Stack + + {createStackPopupOpen && ( - setCreateStackPopupOpen(false)} > - -

Create Stack

+ setCreateStackPopupOpen(false)}> + +

+ Create Stack +

- + you can set it active - - + + - - - - - + + + + + + - - + + + - + - - + + + @@ -74,19 +99,22 @@ export const CreateStackButton: React.FC = () => { - + - - + + + - + - )} - ); }; diff --git a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx b/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx index bd56ee19f..072c9cba6 100644 --- a/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx +++ b/src/ui/layouts/stackComponents/Header/CreatePipelineButton.tsx @@ -1,20 +1,42 @@ import React from 'react'; -import { translate } from './translate'; -import { Box, PrimaryButton } from '../../../components'; -import { useService } from './useService'; +import styles from './index.module.scss'; -import { CommandPopup } from '../../common/CommandPopup'; +import { useDispatch, useLocationPath } from '../../../hooks'; +import { showToasterAction } from '../../../../redux/actions'; +import { toasterTypes } from '../../../../constants'; + +import { + Box, + PrimaryButton, + FlexBox, + H3, + Paragraph, + icons, +} from '../../../components'; +import { iconSizes, iconColors } from '../../../../constants'; +import { Popup } from '../../common/Popup'; +import { DocumentationLink } from './DocumentationLink'; +import { CommandBoxWScroll } from '../../common/CommandBox'; +import { constantCommandsToCreateComponent } from '../../../../constants/constantCommands'; export const CreatePipelineButton: React.FC = () => { + const locationPath = useLocationPath(); + const dispatch = useDispatch(); const [createPipelinePopupOpen, setCreatePipelinePopupOpen] = React.useState< boolean >(false); - const { currentWorkspace } = useService(); + const codeString = '#!/bin/bash'; - const commandText = `zenml workspace set ${ - currentWorkspace && currentWorkspace.id - }`; + const handleCopy = () => { + navigator.clipboard.writeText(codeString); + dispatch( + showToasterAction({ + description: 'Command copied to clipboard', + type: toasterTypes.success, + }), + ); + }; return ( { paddingHorizontal="sm" > setCreatePipelinePopupOpen(true)}> - {translate('createButton.text')} + Create {locationPath.split('/')[2]} - + + {createPipelinePopupOpen && ( + setCreatePipelinePopupOpen(false)}> + +

+ Create {locationPath.split('/')[2]} +

+ + {locationPath.split('/')[2] === + constantCommandsToCreateComponent.componentCommand.type + ? constantCommandsToCreateComponent.componentCommand.body.map( + (item): any => + item.isCode ? ( + + + + + + + ) : ( + + + {item.text} + + + ), + ) + : constantCommandsToCreateComponent.defaultBody.map((item): any => + item.isCode ? ( + + + + + + + ) : ( + + + {item.text} + + + ), + )} + + {/* + + you can set it active + + + + + + + + + */} + + {/* + + + + + + + + + + + + */} + + {/* + + you can set it active + + */} + + {/* + + + + + */} + + + + + + )} ); }; diff --git a/src/ui/layouts/stackComponents/Header/DocumentationLink.tsx b/src/ui/layouts/stackComponents/Header/DocumentationLink.tsx index a4ae44054..b6decb057 100644 --- a/src/ui/layouts/stackComponents/Header/DocumentationLink.tsx +++ b/src/ui/layouts/stackComponents/Header/DocumentationLink.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { Box, ExternalSecondaryLink } from '../../../components'; import { translate } from './translate'; - -export const DocumentationLink: React.FC = () => ( +interface Props { + text?: string; +} +export const DocumentationLink: React.FC = ({ text }: Props) => ( - + ); diff --git a/src/ui/layouts/stacks/Header/CreateStackButton.tsx b/src/ui/layouts/stacks/Header/CreateStackButton.tsx index 0bc4d6891..d1100fff6 100644 --- a/src/ui/layouts/stacks/Header/CreateStackButton.tsx +++ b/src/ui/layouts/stacks/Header/CreateStackButton.tsx @@ -1,18 +1,25 @@ import React from 'react'; -import styles from './index.module.scss' +import styles from './index.module.scss'; import { useDispatch } from '../../../hooks'; import { showToasterAction } from '../../../../redux/actions'; import { toasterTypes } from '../../../../constants'; -import { Box, PrimaryButton, FlexBox, H3, Paragraph, icons} from '../../../components'; +import { + Box, + PrimaryButton, + FlexBox, + H3, + Paragraph, + icons, +} from '../../../components'; import { iconSizes, iconColors } from '../../../../constants'; import { Popup } from '../../common/Popup'; -import { DocumentationLink } from './DocumentationLink' +import { DocumentationLink } from './DocumentationLink'; import { CommandBoxWScroll } from '../../common/CommandBox'; +import { constantCommandsToCreateStack } from '../../../../constants/constantCommands'; export const CreateStackButton: React.FC = () => { - const dispatch = useDispatch(); const [createStackPopupOpen, setCreateStackPopupOpen] = React.useState< boolean @@ -20,15 +27,15 @@ export const CreateStackButton: React.FC = () => { const codeString = '#!/bin/bash'; - const handleCopy = () => { - navigator.clipboard.writeText(codeString) + const handleCopy = () => { + navigator.clipboard.writeText(codeString); dispatch( showToasterAction({ description: 'Command copied to clipboard', type: toasterTypes.success, }), ); - } + }; return ( { paddingVertical="sm" paddingHorizontal="sm" > - setCreateStackPopupOpen(true)}>Create Stack - + setCreateStackPopupOpen(true)}> + Create Stack + + {createStackPopupOpen && ( - setCreateStackPopupOpen(false)} > - -

Create Stack

- - + setCreateStackPopupOpen(false)}> +

+ {constantCommandsToCreateStack.title} +

+ + {constantCommandsToCreateStack.body.map((item): any => + item.isCode ? ( + + + + + + + ) : ( + + + {item.text} + + + ), + )} + + {/* you can set it active - - + + - - - - - + + + + */} + + {/* - - + + + - + - - - + + + + */} - + {/* you can set it active - + */} - + {/* - - - + + + + */} - + - )} - ); }; diff --git a/src/ui/layouts/stacks/Header/DocumentationLink.tsx b/src/ui/layouts/stacks/Header/DocumentationLink.tsx index a4ae44054..b6decb057 100644 --- a/src/ui/layouts/stacks/Header/DocumentationLink.tsx +++ b/src/ui/layouts/stacks/Header/DocumentationLink.tsx @@ -1,12 +1,11 @@ import React from 'react'; import { Box, ExternalSecondaryLink } from '../../../components'; import { translate } from './translate'; - -export const DocumentationLink: React.FC = () => ( +interface Props { + text?: string; +} +export const DocumentationLink: React.FC = ({ text }: Props) => ( - + ); diff --git a/src/ui/layouts/stacks/Stacks/List/RunsForStackTable/index.tsx b/src/ui/layouts/stacks/Stacks/List/RunsForStackTable/index.tsx index 4a453e6f2..077bffe27 100644 --- a/src/ui/layouts/stacks/Stacks/List/RunsForStackTable/index.tsx +++ b/src/ui/layouts/stacks/Stacks/List/RunsForStackTable/index.tsx @@ -13,7 +13,7 @@ export const RunsForStackTable: React.FC<{ nestedRow: boolean; }> = ({ stack, openStackIds, fetching, nestedRow }) => { const { runIds, isStackOpen } = useService({ - stack, + stack, openStackIds, });
- + {headerCol.render && headerCol.render()}