feat: workflow add button to use reusable plusbutton

novuhq · Aug 6, 2023 · f89f929 · f89f929
1 parent 9682c9f
commit f89f929
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/apps/web/src/pages/templates/WorkflowListPage.tsx b/apps/web/src/pages/templates/WorkflowListPage.tsx
@@ -13,7 +13,17 @@ import {
 } from '../../hooks';
 import PageHeader from '../../components/layout/components/PageHeader';
 import PageContainer from '../../components/layout/components/PageContainer';
-import { Tag, Table, colors, Text, Button, IExtendedColumn, withCellLoading } from '../../design-system';
+import {
+  Tag,
+  Table,
+  colors,
+  Text,
+  Button,
+  IExtendedColumn,
+  withCellLoading,
+  PlusButton,
+  Container,
+} from '../../design-system';
 import { Bolt, BoltFilled, BoltOffFilled, Edit, PlusCircle } from '../../design-system/icons';
 import { Tooltip } from '../../design-system';
 import { ROUTES } from '../../constants/routes.enum';
@@ -166,10 +176,10 @@ function WorkflowListPage() {
 
   return (
     <PageContainer title="Workflows">
-      <PageHeader
-        title="Workflows"
-        actions={
-          isTemplateStoreEnabled ? (
+      <PageHeader title="Workflows" />
+      <Container fluid sx={{ padding: '0 24px 8px 24px' }}>
+        {isTemplateStoreEnabled ? (
+          <div>
             <CreateWorkflowDropdown
               readonly={readonly}
               blueprints={popular?.blueprints}
@@ -180,18 +190,18 @@ function WorkflowListPage() {
               onTemplateClick={handleOnBlueprintClick}
               onAllTemplatesClick={openModal}
             />
-          ) : (
-            <Button
+          </div>
+        ) : (
+          <>
+            <PlusButton
+              label="Add a workflow"
               disabled={readonly}
               onClick={() => handleRedirectToCreateTemplate(true)}
-              icon={<PlusCircle />}
-              data-test-id="create-template-btn"
-            >
-              Create Workflow
-            </Button>
-          )
-        }
-      />
+              data-test-id="create-workflow-btn"
+            />
+          </>
+        )}
+      </Container>
 
       <TemplateListTableWrapper>
         {isTemplateStoreEnabled ? (

diff --git a/apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx b/apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx
@@ -4,7 +4,7 @@ import { faFile } from '@fortawesome/free-regular-svg-icons';
 import { faDiagramNext } from '@fortawesome/free-solid-svg-icons';
 import styled from '@emotion/styled';
 
-import { Button, Dropdown, Popover } from '../../../design-system';
+import { Button, Dropdown, PlusButton, Popover } from '../../../design-system';
 import { PlusCircle } from '../../../design-system/icons';
 import { IBlueprintTemplate } from '../../../api/types';
 import { useSegment } from '../../../components/providers/SegmentProvider';
@@ -13,10 +13,6 @@ import { useHoverOverItem } from '../../../hooks';
 
 const WIDTH = 172;
 
-const ButtonStyled = styled(Button)`
-  width: ${WIDTH}px;
-`;
-
 const DropdownItemSkeleton = styled(Skeleton)`
   margin-bottom: 4px;
   width: 100%;
@@ -47,7 +43,7 @@ export const CreateWorkflowDropdown = ({
 
   return (
     <Dropdown
-      position="bottom"
+      position="bottom-start"
       disabled={readonly}
       withArrow={false}
       width={WIDTH}
@@ -56,9 +52,7 @@ export const CreateWorkflowDropdown = ({
       }}
       control={
         <div>
-          <ButtonStyled disabled={readonly} icon={<PlusCircle />} data-test-id="create-workflow-btn">
-            Create Workflow
-          </ButtonStyled>
+          <PlusButton disabled={readonly} label="Add a workflow" data-test-id="create-workflow-btn" />
         </div>
       }
       data-test-id="create-workflow-dropdown"