feat(web): templates list page - create template dropdown button #3462

LetItRock · 2023-05-19T11:16:04Z

What change does this PR introduce?

On the Templates List page, we introduced the "Create Workflow" dropdown button which will have a few options:

to pick one of the popular templates
to browse the Templates Store
or to start with blank template

Why was this change needed?

Templates Store PRD.

Other information (Screenshots)

Screen.Recording.2023-05-19.at.12.48.54.mov

linear · 2023-05-19T11:16:07Z

NV-2236 🏪 [Template store] New Workflow Button

Why?

When a user is creating a workflow, help him by reducing the amount of time to set up a base for his workflow.

What?

Create a dropdown menu on the "Create Workflow" Button.

Solution

Sort templates by "the most popular".

Blank Workflow button
3 templates (most popular)
All templates button

Workflow list - Template store (Figma)

White theme

Empty state WE - Template store (Figma)

LetItRock · 2023-05-19T11:17:42Z

apps/web/cypress/tests/notifications.spec.ts

+  it('should show the create template dropdown', function () {
+    cy.intercept('**/notification-templates**').as('notificationTemplates');
+    cy.visit('/templates');
+    cy.wait('@notificationTemplates');
+
+    cy.getByTestId('create-template-btn').should('not.be.disabled').click();
+    cy.getByTestId('create-workfolow-all-templates').contains('All templates');
+    cy.getByTestId('create-workfolow-blank').contains('Blank workflow');
+  });


right now we only check for All templates and Blank workflow, but in the near future we will initialize test with blueprints and then will check the most popular items in the dropdown

LetItRock · 2023-05-19T11:18:25Z

apps/web/src/components/layout/components/HeaderNav.tsx

@@ -183,6 +183,7 @@ export function HeaderNav({}: Props) {
          <NotificationCenterWidget user={currentUser} />
          <Dropdown
            position="bottom-end"
+            styles={{ dropdown: { minWidth: 220 } }}


moved this style from the Dropdown component to this specific for that style place - user header dropdown

LetItRock · 2023-05-19T11:18:44Z

apps/web/src/design-system/dropdown/Dropdown.styles.ts

+    divider: {
+      margin: '10px',
+      borderTop: `0.0625rem solid ${colors.B30}`,
+    },


dropdown divider styles

LetItRock · 2023-05-19T11:20:58Z

apps/web/src/design-system/dropdown/Dropdown.tsx

@@ -32,3 +45,4 @@ export function Dropdown({ control, children, ...props }: IDropdownProps) {

 Dropdown.Item = Menu.Item;
 Dropdown.Label = Menu.Label;
+Dropdown.Divider = Menu.Divider;


the option to provide the divider in the dropdown

LetItRock · 2023-05-19T11:21:25Z

apps/web/src/design-system/dropdown/Dropdown.tsx

  control: React.ReactNode;
  children: React.ReactNode;
 }

-export function Dropdown({ control, children, ...props }: IDropdownProps) {
+export function Dropdown({ control, withArrow = true, offset = 10, children, ...props }: IDropdownProps) {


moved to defaults which can be overriden

LetItRock · 2023-05-19T11:23:55Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+        <div>
+          <ButtonStyled disabled={readonly} icon={<PlusCircle />} data-test-id="create-template-btn">
+            Create Workflow
+          </ButtonStyled>
+        </div>


had to wrap it within the div, otherwise, the dropdown is not positioned appropriately

LetItRock · 2023-05-19T11:24:19Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+      data-test-id="create-template-dropdown"
+    >
+      {isLoading
+        ? Array.from({ length: 3 }).map((_, index) => <DropdownItemSkeleton key={index} />)


when loading show skeleton items for the most popular templates

LetItRock · 2023-05-19T11:25:10Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+            <Popover
+              key={template.name}
+              opened={template.id === templateId}
+              withArrow
+              withinPortal
+              offset={5}
+              transitionDuration={300}
+              position="left"
+              width={300}
+              target={
+                <Dropdown.Item
+                  icon={<FontAwesomeIcon icon={template.iconName} />}
+                  onClick={() => onTemplateClick(template)}
+                  onMouseEnter={() => {
+                    setTemplateId(template.id);
+                  }}
+                  onMouseLeave={() => {
+                    setTemplateId(null);
+                  }}
+                  data-test-id="logout-button"
+                >
+                  {template.name}
+                </Dropdown.Item>
+              }
+              content={template.description}
+            />


the dropdown items with the most popular templates, wrapped with the popover to show the description

I think it will be a good idea to wrap all the items including All templates and Blank workflow so the popover will be consistent on all the hovers. and additional info won't hurt.

I'll ask Nikolay about the texts ;)

LetItRock · 2023-05-19T11:25:31Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+      <Dropdown.Item
+        disabled={allTemplatesDisabled}
+        icon={<FontAwesomeIcon icon={faDiagramNext} />}
+        onClick={onAllTemplatesClick}
+        data-test-id="create-workfolow-all-templates"
+      >
+        All templates
+      </Dropdown.Item>


it will open the Templates Store modal

LetItRock · 2023-05-19T11:25:56Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+      <Dropdown.Item
+        icon={<FontAwesomeIcon icon={faFile} />}
+        onClick={onBlankWorkflowClick}
+        data-test-id="create-workfolow-blank"
+      >
+        Blank workflow
+      </Dropdown.Item>
+    </Dropdown>


this one will create the blank template and open the editor

djabarovgeorge

As always look like an awesome chunk of work 🙃

djabarovgeorge · 2023-05-21T11:11:11Z

apps/web/src/design-system/dropdown/Dropdown.styles.ts

@@ -26,5 +25,9 @@ export default createStyles((theme: MantineTheme) => {
    itemHovered: {
      backgroundColor: dark ? colors.B30 : colors.B98,
    },
+    divider: {
+      margin: '10px',
+      borderTop: `0.0625rem solid ${colors.B30}`,


If this one is the divider color here, we need to add 'Light BG' for the light them.

yes, thanks for pointing on that :)

djabarovgeorge · 2023-05-21T11:21:31Z

apps/web/src/pages/templates/components/CreateWorkflowDropdown.tsx

+            <Popover
+              key={template.name}
+              opened={template.id === templateId}
+              withArrow
+              withinPortal
+              offset={5}
+              transitionDuration={300}
+              position="left"
+              width={300}
+              target={
+                <Dropdown.Item
+                  icon={<FontAwesomeIcon icon={template.iconName} />}
+                  onClick={() => onTemplateClick(template)}
+                  onMouseEnter={() => {
+                    setTemplateId(template.id);
+                  }}
+                  onMouseLeave={() => {
+                    setTemplateId(null);
+                  }}
+                  data-test-id="logout-button"
+                >
+                  {template.name}
+                </Dropdown.Item>
+              }
+              content={template.description}
+            />


I think it will be a good idea to wrap all the items including All templates and Blank workflow so the popover will be consistent on all the hovers. and additional info won't hurt.

feat(web): templates list page - create template dropdown button

8d74dc0

LetItRock requested a review from djabarovgeorge May 19, 2023 11:16

LetItRock self-assigned this May 19, 2023

github-actions bot added the @novu/web label May 19, 2023

LetItRock commented May 19, 2023

View reviewed changes

Base automatically changed from nv-2235-templates-store-empty-templates-screen to next May 19, 2023 15:26

LetItRock and others added 2 commits May 19, 2023 17:27

Merge branch 'next' into nv-2236-create-workflow-dropdown-button

82180b1

chore(web): fixed spellcheck issue

37fd74a

djabarovgeorge approved these changes May 21, 2023

View reviewed changes

LetItRock and others added 4 commits May 22, 2023 12:22

chore(web): polishing create template dropdown styles

e385513

Merge branch 'next' into nv-2236-create-workflow-dropdown-button

ffa49cb

chore(web): fix failing e2e test for the new create template dropdown

126e459

Merge branch 'next' into nv-2236-create-workflow-dropdown-button

3c908a5

LetItRock added this pull request to the merge queue May 22, 2023

Merged via the queue into next with commit 8059892 May 22, 2023
25 checks passed

LetItRock deleted the nv-2236-create-workflow-dropdown-button branch May 22, 2023 12:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): templates list page - create template dropdown button #3462

feat(web): templates list page - create template dropdown button #3462

LetItRock commented May 19, 2023

linear bot commented May 19, 2023

Why?

What?

Solution

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

djabarovgeorge May 21, 2023

LetItRock May 22, 2023

LetItRock May 19, 2023

LetItRock May 19, 2023

djabarovgeorge left a comment

djabarovgeorge May 21, 2023

LetItRock May 22, 2023

djabarovgeorge May 21, 2023

feat(web): templates list page - create template dropdown button #3462

feat(web): templates list page - create template dropdown button #3462

Conversation

LetItRock commented May 19, 2023

What change does this PR introduce?

Why was this change needed?

Other information (Screenshots)

linear bot commented May 19, 2023

Why?

What?

Solution

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

djabarovgeorge left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment