Feature: Template flows

.github/workflows/cypress-testing.yml

@@ -96,7 +96,7 @@ jobs:
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
           cd cypress-testing
-          git checkout main
+          git checkout feature/template-flows
           cd ..
           cp -r cypress-testing/cypress cypress
           yarn add cypress@13.6.2

src/components/floweditor/FlowEditor.helper.ts

@@ -4,14 +4,14 @@ import '@nyaruka/temba-components/dist/temba-components.js';
 
 const glificBase = FLOW_EDITOR_API;
 
-export const setConfig = (uuid: any) => {
+export const setConfig = (uuid: any, isTemplate: boolean) => {
   const services = JSON.parse(localStorage.getItem('organizationServices') || '{}');
 
   const config = {
     flow: uuid,
     flowType: 'messaging',
     localStorage: true,
-    mutable: true,
+    mutable: !isTemplate,
     showNodeLabel: false,
     attachmentsEnabled: false,
     filters: ['whatsapp', 'classifier', 'profile', 'optins', 'ticketer'],

src/components/floweditor/FlowEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useLazyQuery, useQuery } from '@apollo/client';
-import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Menu, MenuItem, Typography } from '@mui/material';
 import BackIconFlow from 'assets/images/icons/BackIconFlow.svg?react';
 import WarningIcon from 'assets/images/icons/Warning.svg?react';
@@ -31,11 +31,13 @@ export const FlowEditor = () => {
   const params = useParams();
   const { uuid } = params;
   const navigate = useNavigate();
+  const location = useLocation();
   const [publishDialog, setPublishDialog] = useState(false);
   const [loading, setLoading] = useState(true);
   const [flowEditorLoaded, setFlowEditorLoaded] = useState(false);
   const [flowId, setFlowId] = useState();
-  const config = setConfig(uuid);
+  const isTemplate = location?.state === 'template';
+  const config = setConfig(uuid, isTemplate);
   const [published, setPublished] = useState(false);
   const [showSimulator, setShowSimulator] = useState(false);
   const [stayOnPublish, setStayOnPublish] = useState(false);
@@ -350,7 +352,7 @@ export const FlowEditor = () => {
       <div className={styles.Header}>
         <div className={styles.Title}>
           <BackIconFlow
-            onClick={() => navigate('/flow')}
+            onClick={() => (isTemplate ? navigate('/flow?isTemplate=true') : navigate('/flow'))}
             className={styles.BackIcon}
             data-testid="back-button"
           />
@@ -402,6 +404,7 @@ export const FlowEditor = () => {
                 handleClose();
               }}
               disableRipple
+              disabled={isTemplate}
             >
               Reset flow count
             </MenuItem>
@@ -411,6 +414,7 @@ export const FlowEditor = () => {
               variant="outlined"
               color="primary"
               data-testid="previewButton"
+              disabled={isTemplate}
               onClick={() => {
                 setShowTranslateFlowModal(true);
                 handleClose();
@@ -433,6 +437,7 @@ export const FlowEditor = () => {
             variant="contained"
             color="primary"
             data-testid="button"
+            disabled={isTemplate}
             onClick={() => setPublishDialog(true)}
           >
             <PublishIcon className={styles.Icon} />

src/containers/Flow/Flow.test.tsx

@@ -12,27 +12,34 @@ import {
   createFlowQuery,
   createTagQuery,
   updateFlowQueryWithError,
+  getFlowCountQuery,
+  releaseFlow,
 } from 'mocks/Flow';
 import { Flow } from './Flow';
 import { setOrganizationServices } from 'services/AuthService';
 import { getFilterTagQuery } from 'mocks/Tag';
 import { getRoleNameQuery } from 'mocks/Role';
 import userEvent from '@testing-library/user-event';
 import { setErrorMessage, setNotification } from 'common/notification';
+import FlowList from './FlowList/FlowList';
 
 setOrganizationServices('{"__typename":"OrganizationServicesResult","rolesAndPermission":true}');
 
 const mocks = [
   ...getOrganizationQuery,
   getFlowQuery({ id: 1 }),
   getFlowQuery({ id: '1' }),
-  filterFlowQuery,
+  filterFlowQuery({ isActive: true, isTemplate: false }),
   getFilterTagQuery,
   getRoleNameQuery,
   getOrganizationLanguagesQuery,
-  copyFlowQuery,
+  copyFlowQuery(),
+  copyFlowQuery(true),
   createFlowQuery,
   createTagQuery,
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
+  releaseFlow,
+  getFilterTagQuery,
 ];
 
 const mockUseLocationValue: any = {
@@ -41,11 +48,14 @@ const mockUseLocationValue: any = {
   hash: '',
   state: null,
 };
+const mockedUsedNavigate = vi.fn();
+
 vi.mock('react-router-dom', async () => ({
   ...((await vi.importActual<any>('react-router-dom')) as {}),
   useLocation: () => {
     return mockUseLocationValue;
   },
+  useNavigate: () => mockedUsedNavigate,
 }));
 
 vi.mock('common/notification', async (importOriginal) => {
@@ -155,6 +165,7 @@ it('should edit the flow', async () => {
     <MockedProvider mocks={[...mocks, updateFlowQuery]} addTypename={false}>
       <MemoryRouter initialEntries={[`/flow/1/edit`]}>
         <Routes>
+          <Route path="flow" element={<FlowList />} />
           <Route path="flow/:id/edit" element={<Flow />} />
         </Routes>
       </MemoryRouter>
@@ -180,6 +191,32 @@ it('should edit the flow', async () => {
   });
 });
 
+it('should configure the flow', async () => {
+  const editFlow = () => (
+    <MockedProvider mocks={[...mocks, updateFlowQuery]} addTypename={false}>
+      <MemoryRouter initialEntries={[`/flow/1/edit`]}>
+        <Routes>
+          <Route path="flow" element={<FlowList />} />
+          <Route path="flow/:id/edit" element={<Flow />} />
+        </Routes>
+      </MemoryRouter>
+    </MockedProvider>
+  );
+  const { getByText } = render(editFlow());
+
+  expect(getByText('Loading...')).toBeInTheDocument();
+
+  await waitFor(() => {
+    expect(getByText('Edit flow')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByText('Configure'));
+
+  await waitFor(() => {
+    expect(setNotification).toHaveBeenCalled();
+  });
+});
+
 it('should edit the flow and show error if exists', async () => {
   const editFlow = () => (
     <MockedProvider mocks={[...mocks, updateFlowQueryWithError]} addTypename={false}>
@@ -236,3 +273,56 @@ it('should create copy of flow', async () => {
   fireEvent.click(button);
   await waitFor(() => {});
 });
+
+it('buttons should be disabled in template state', async () => {
+  mockUseLocationValue.state = 'template';
+
+  render(
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <MemoryRouter initialEntries={[`/flow/1/edit`]}>
+        <Routes>
+          <Route path="flow/:id/edit" element={<Flow />} />
+        </Routes>
+      </MemoryRouter>
+    </MockedProvider>
+  );
+
+  await waitFor(() => {
+    expect(screen.getByText('Template Flow')).toBeInTheDocument();
+  });
+
+  await waitFor(() => {
+    expect(screen.getByTestId('submitActionButton')).toBeDisabled();
+    expect(screen.getByTestId('remove-icon')).toBeDisabled();
+  });
+
+  fireEvent.click(screen.getByText('View'));
+
+  await waitFor(() => {
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+  });
+});
+
+it('should create copy of a template flow', async () => {
+  mockUseLocationValue.state = 'copyTemplate';
+
+  const copyFlow = () => (
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <MemoryRouter initialEntries={[`/flow/1/edit`]}>
+        <Routes>
+          <Route path="flow/:id/edit" element={<Flow />} />
+        </Routes>
+      </MemoryRouter>
+    </MockedProvider>
+  );
+
+  const { container, getByTestId } = render(copyFlow());
+  await waitFor(() => {
+    const inputElement = container.querySelector('input[name="name"]') as HTMLInputElement;
+    expect(inputElement?.value).toBe('Copy of Help');
+  });
+
+  const button = getByTestId('submitActionButton');
+  fireEvent.click(button);
+  await waitFor(() => {});
+});