Merge pull request #2596 from glific/feature/new-flow-screen

Updated flow screen

src/components/UI/Form/AutoComplete/AutoComplete.module.css

@@ -59,18 +59,6 @@
   height: 36px !important;
 }
 
-::-webkit-scrollbar {
-  width: 4px;
-}
-
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #888;
-}
-
 @media screen and (max-width: 768px) {
   .Input {
     width: 100%;

src/components/UI/Form/Button/Button.tsx

@@ -26,10 +26,10 @@ export const Button = ({
 
   return (
     <ButtonElement
+      {...rest}
       variant={variant}
       color={color}
       onClick={onClick}
-      data-testid={rest['data-testid']}
       className={`${styles.Button} ${className} ${buttonColor}`}
       disabled={loading || disabled}
       type={type}

src/components/UI/Form/Input/Input.module.css

@@ -43,10 +43,6 @@
   font-weight: 400;
 }
 
-.OutlineInput ::-webkit-scrollbar {
-  width: 0px;
-}
-
 .Resend {
   color: #119656;
   font-weight: bold;

src/components/UI/Layout/Layout.module.css

@@ -5,6 +5,7 @@
 .MainFullWidth {
   width: 100%;
   overflow: auto;
+  position: relative;
 }
 
 .MobileHeader {

src/components/UI/Pager/Pager.module.css

@@ -103,8 +103,3 @@
   scrollbar-width: none;
   border-radius: 10px 10px 0 0;
 }
-
-.StyleForContainer::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}

src/components/floweditor/FlowEditor.module.css

@@ -13,30 +13,6 @@
   margin-right: 10px;
 }
 
-.FlowName {
-  position: fixed !important;
-  top: 16px;
-  left: 270px;
-  z-index: 1000;
-  color: #073f24;
-  font-weight: 500;
-  font-size: 20px;
-}
-
-.FlowNameClosed {
-  composes: FlowName;
-  left: 90px;
-}
-
-:global(.Flow_empty_flow__roKNh) {
-  margin-top: 0px !important;
-  padding-top: 60px;
-}
-
-:global(#canvas-container) > div {
-  padding-top: 80px;
-}
-
 .Icon {
   background-color: #eaedec !important;
   margin-right: 10px !important;
@@ -147,3 +123,29 @@
   composes: ResetFlow;
   left: 90px;
 }
+
+.Header {
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+  height: 70px;
+  display: flex;
+  background-color: #f8faf5;
+}
+
+.Actions {
+  position: relative;
+  padding: 16px 40px;
+  margin-left: auto;
+}
+
+.Title {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+}
+
+.BackIcon {
+  cursor: pointer;
+  margin-right: 8px;
+}

src/components/floweditor/FlowEditor.test.tsx

@@ -1,7 +1,6 @@
 import { BrowserRouter as Router } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 
 import { FlowEditor } from './FlowEditor';
@@ -82,10 +81,10 @@ test('it should display the flowEditor', async () => {
   });
 });
 
-test('it should have a done button that redirects to flow page', async () => {
+test('it should have a back button that redirects to flow page', async () => {
   const { getByTestId } = render(defaultWrapper);
   await waitFor(() => {
-    expect(getByTestId('button')).toBeInTheDocument();
+    expect(getByTestId('back-button')).toBeInTheDocument();
   });
 });
 
@@ -96,12 +95,12 @@ test('it should display name of the flow', async () => {
   });
 });
 
-test('it should have a help button that redirects to help page', async () => {
-  const { getByTestId } = render(defaultWrapper);
-  await waitFor(() => {
-    expect(getByTestId('helpButton')).toBeInTheDocument();
-  });
-});
+// test('it should have a help button that redirects to help page', async () => {
+//   const { getByTestId } = render(defaultWrapper);
+//   await waitFor(() => {
+//     expect(getByTestId('helpButton')).toBeInTheDocument();
+//   });
+// });
 
 test('it should have a preview button', async () => {
   const { getByTestId } = render(defaultWrapper);
@@ -110,25 +109,12 @@ test('it should have a preview button', async () => {
   });
 });
 
-test('it should have save as draft button', async () => {
-  const { getByTestId } = render(defaultWrapper);
-  await waitFor(() => {
-    expect(getByTestId('saveDraftButton')).toBeInTheDocument();
-  });
-});
-
-test('click on preview button should open simulator', async () => {
-  const user = userEvent.setup();
-  render(defaultWrapper);
-
-  mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} }));
-
-  await user.click(screen.getByTestId('previewButton'));
-
-  await waitFor(() => {
-    expect(screen.getByTestId('beneficiaryName')).toBeInTheDocument();
-  });
-});
+// test('it should have save as draft button', async () => {
+//   const { getByTestId } = render(defaultWrapper);
+//   await waitFor(() => {
+//     expect(getByTestId('saveDraftButton')).toBeInTheDocument();
+//   });
+// });
 
 // test('check if someone else is using a flow', async () => {
 //   // onload is not defined for script element in vite so we need to trigger it manually
@@ -247,13 +233,14 @@ test('flow with no keywords', async () => {
 
 test('reset flow counts', async () => {
   mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} }));
-  const { getByTestId, getByText, rerender } = render(wrapperFunction(noKeywordMocks));
+  const { getByTestId, getByText } = render(wrapperFunction(noKeywordMocks));
 
   await waitFor(() => {
     expect(screen.findByText('help workflow'));
   });
 
-  fireEvent.click(getByTestId('resetFlow'));
+  fireEvent.click(getByTestId('moreButton'));
+  fireEvent.click(getByText('Reset flow count'));
   await waitFor(() => {
     expect(
       getByText(