Talha/feat/modal with constants

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,
+    },
+  ],
+};

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 => (
   <a
-    target="_blank" 
+    target="_blank"
     rel="noopener noreferrer"
     className={styles.link}
     href={props.href}

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

@@ -34,7 +34,7 @@ export interface TableProps {
   trOnClick?: (arg: any) => void;
 }
 
-const ITEMS_PER_PAGE = 25;
+const ITEMS_PER_PAGE = 5;
 
 export const Table: React.FC<TableProps> = ({
   headerCols,
@@ -72,15 +72,22 @@ export const Table: React.FC<TableProps> = ({
         renderWhenTrue={() => (
           <>
             <table className={styles.table}>
-              <thead style={{ backgroundColor: '#F4F4F4' }} >
+              <thead style={{ backgroundColor: '#F4F4F4' }}>
                 <tr className={showHeader ? styles.tableHeaderRow : ''}>
                   {headerCols.map((headerCol: HeaderCol, index: number) => (
                     <th
                       className={styles.tableHeadingTh}
-                      style={{ width: headerCol.width, color: '#000', fontWeight: 700 }}
+                      style={{
+                        width: headerCol.width,
+                        color: '#000',
+                        fontWeight: 700,
+                      }}
                       key={index}
                     >
-                      <Box paddingVertical={showHeader ? 'sm' : null} paddingLeft='lg' >
+                      <Box
+                        paddingVertical={showHeader ? 'sm' : null}
+                        paddingLeft="lg"
+                      >
                         {headerCol.render && headerCol.render()}
                       </Box>
                     </th>
@@ -111,7 +118,7 @@ export const Table: React.FC<TableProps> = ({
                           style={{ width: headerCol.width }}
                           key={index}
                         >
-                          <Box paddingVertical="md" paddingLeft='lg'>
+                          <Box paddingVertical="md" paddingLeft="lg">
                             <Truncate maxLines={1}>
                               {headerCol.renderRow(headerRow)}
                             </Truncate>

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 (
+//     <Box
+//       style={{ position: 'relative' }}
+//       paddingVertical="sm"
+//       paddingHorizontal="sm"
+//     >
+//       <PrimaryButton onClick={() => setCreatePipelinePopupOpen(true)}>
+//         {translate('createButton.text')}
+//       </PrimaryButton>
+//       <CommandPopup
+//         commandText={commandText}
+//         open={createPipelinePopupOpen}
+//         setOpen={setCreatePipelinePopupOpen}
+//       />
+//     </Box>
+//   );
+// };
+
 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 (
     <Box
@@ -23,13 +80,100 @@ export const CreatePipelineButton: React.FC = () => {
       paddingHorizontal="sm"
     >
       <PrimaryButton onClick={() => setCreatePipelinePopupOpen(true)}>
-        {translate('createButton.text')}
+        Create Pipeline
       </PrimaryButton>
-      <CommandPopup
-        commandText={commandText}
-        open={createPipelinePopupOpen}
-        setOpen={setCreatePipelinePopupOpen}
-      />
+
+      {createPipelinePopupOpen && (
+        <Popup onClose={() => setCreatePipelinePopupOpen(false)}>
+          <FlexBox.Row>
+            <H3 bold color="darkGrey">
+              {constantCommandsToCreatePipeline.title}
+            </H3>
+          </FlexBox.Row>
+          {constantCommandsToCreatePipeline.body.map((item): any =>
+            item.isCode ? (
+              <FlexBox alignItems="center" marginTop="md">
+                <CommandBoxWScroll command={item.text} />
+                <Box
+                  className={styles.iconStyle}
+                  style={{ paddingTop: '7px' }}
+                  onClick={handleCopy}
+                >
+                  <icons.copy size={iconSizes.sm} color={iconColors.black} />
+                </Box>
+              </FlexBox>
+            ) : (
+              <FlexBox.Row>
+                <Box marginTop="md">
+                  <Paragraph>{item.text}</Paragraph>
+                </Box>
+              </FlexBox.Row>
+            ),
+          )}
+
+          {/* <FlexBox.Row>
+            <Box marginTop="md">
+              <Paragraph>you can set it active</Paragraph>
+            </Box>
+          </FlexBox.Row>
+
+          <FlexBox alignItems="center" marginTop="md">
+            <CommandBoxWScroll command={codeString} />
+            <Box
+              className={styles.iconStyle}
+              style={{ paddingTop: '7px' }}
+              onClick={handleCopy}
+            >
+              <icons.copy size={iconSizes.sm} color={iconColors.black} />
+            </Box>
+          </FlexBox>  */}
+
+          {/* <FlexBox alignItems="center" marginTop="sm">
+            <CommandBoxWScroll command={codeString} />
+            <Box
+              className={styles.iconStyle}
+              style={{ paddingTop: '7px' }}
+              onClick={handleCopy}
+            >
+              <icons.copy size={iconSizes.sm} color={iconColors.black} />
+            </Box>
+          </FlexBox>
+
+          <FlexBox alignItems="center" marginTop="sm">
+            <CommandBoxWScroll command={codeString} />
+            <Box
+              className={styles.iconStyle}
+              style={{ paddingTop: '7px' }}
+              onClick={handleCopy}
+            >
+              <icons.copy size={iconSizes.sm} color={iconColors.black} />
+            </Box>
+          </FlexBox> */}
+
+          {/* <FlexBox.Row>
+            <Box marginTop="md">
+              <Paragraph>you can set it active</Paragraph>
+            </Box>
+          </FlexBox.Row> */}
+
+          {/* <FlexBox alignItems="center" marginTop="sm">
+            <CommandBoxWScroll command={codeString} />
+            <Box
+              className={styles.iconStyle}
+              style={{ paddingTop: '7px' }}
+              onClick={handleCopy}
+            >
+              <icons.copy size={iconSizes.sm} color={iconColors.black} />
+            </Box>
+          </FlexBox> */}
+
+          <FlexBox justifyContent="end" marginTop="xl" flexWrap>
+            <DocumentationLink
+              text={constantCommandsToCreatePipeline.documentation}
+            />
+          </FlexBox>
+        </Popup>
+      )}
     </Box>
   );
 };