From 0478c4104acedecd3b56cda618ccbcd247086a59 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <akanshasakhre@Akanshas-MacBook-Air.local>
Date: Thu, 4 Jul 2024 08:41:33 +0530
Subject: [PATCH 01/21] added template flows in drop down

---
 src/assets/images/icons/ViewLight.svg         | 15 ++++++
 src/containers/Flow/Flow.tsx                  |  4 ++
 src/containers/Flow/FlowList/FlowList.tsx     | 46 +++++++++++++++----
 .../AuthenticatedRoute/AuthenticatedRoute.tsx |  1 +
 4 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/icons/ViewLight.svg

diff --git a/src/assets/images/icons/ViewLight.svg b/src/assets/images/icons/ViewLight.svg
new file mode 100644
index 0000000000..3a9d55b862
--- /dev/null
+++ b/src/assets/images/icons/ViewLight.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>View</title>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon/View-Dark" fill-rule="nonzero" stroke="#777" stroke-width="2">
+            <g id="Icon/View" transform="translate(0.000000, 2.000000)">
+                <circle id="Oval" cx="9" cy="7" r="3"></circle>
+                <path
+                    d="M9,1.5 C11.900431,1.5 14.4718451,3.41491734 16.8144426,7.00053069 C14.4715162,10.5853276 11.9002455,12.5 9,12.5 C6.09956895,12.5 3.52815491,10.5850827 1.18555744,6.99946931 C3.52848384,3.41467239 6.09975446,1.5 9,1.5 Z"
+                    id="Oval"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 901b32642e..3893e339a6 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -44,6 +44,10 @@ export const Flow = () => {
   const [ignoreKeywords, setIgnoreKeywords] = useState(false);
   const { t } = useTranslation();
 
+  let isViewing = false;
+  if (location) {
+    console.log(location);
+  }
   const { data: tag } = useQuery(GET_TAGS, {
     variables: {},
     fetchPolicy: 'network-only',
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 3c5a2b5ebd..929815252a 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -11,6 +11,7 @@ import DuplicateIcon from 'assets/images/icons/Duplicate.svg?react';
 import ExportIcon from 'assets/images/icons/Flow/Export.svg?react';
 import ConfigureIcon from 'assets/images/icons/Configure/UnselectedDark.svg?react';
 import PinIcon from 'assets/images/icons/Pin/Active.svg?react';
+import ViewIcon from 'assets/images/icons/ViewLight.svg?react';
 import { FILTER_FLOW, GET_FLOW_COUNT, EXPORT_FLOW, RELEASE_FLOW } from 'graphql/queries/Flow';
 import { DELETE_FLOW, IMPORT_FLOW } from 'graphql/mutations/Flow';
 import { List } from 'containers/List/List';
@@ -78,6 +79,7 @@ const queries = {
 };
 
 const configureIcon = <ConfigureIcon />;
+const viewIcon = <ViewIcon />;
 
 export const FlowList = () => {
   const navigate = useNavigate();
@@ -156,7 +158,24 @@ export const FlowList = () => {
     />
   );
 
-  const additionalAction = () => [
+  const templateFlowActions = [
+    {
+      label: 'View it',
+      icon: viewIcon,
+      parameter: 'uuid',
+      insideMore: false,
+      link: '/flow/view',
+    },
+    {
+      label: 'Use it',
+      icon: configureIcon,
+      parameter: 'uuid',
+      insideMore: false,
+      link: '/flow/configure',
+    },
+  ];
+
+  const actions = [
     {
       label: t('Configure'),
       icon: configureIcon,
@@ -179,6 +198,8 @@ export const FlowList = () => {
     },
   ];
 
+  const additionalAction = () => (filter === 'isTemplate' ? templateFlowActions : actions);
+
   const getColumns = ({
     name,
     keywords,
@@ -215,6 +236,7 @@ export const FlowList = () => {
   const filterList = [
     { label: 'Active', value: true },
     { label: 'Inactive', value: false },
+    { label: 'Template Flows', value: 'isTemplate' },
   ];
   const { data: tag } = useQuery(GET_TAGS, {
     variables: {},
@@ -230,7 +252,7 @@ export const FlowList = () => {
           value={filter}
           onChange={(event) => {
             const { value } = event.target;
-            setFilter(JSON.parse(value));
+            setFilter(value);
           }}
           className={styles.SearchBar}
         >
@@ -259,13 +281,20 @@ export const FlowList = () => {
     </>
   );
 
-  const filters = useMemo(
-    () => ({
-      isActive: filter,
+  const filters = useMemo(() => {
+    let filters = {
       ...(selectedtag?.id && { tagIds: [parseInt(selectedtag?.id)] }),
-    }),
-    [filter, selectedtag, importing]
-  );
+    };
+    if (filter === 'isTemplate') {
+      filters = { ...filters, isTemplate: true };
+    } else {
+      filters = { ...filters, isActive: filter };
+    }
+    return filters;
+  }, [filter, selectedtag, importing]);
+
+  const restrictedAction = () =>
+    filter === 'isTemplate' ? { delete: false, edit: false } : { edit: true, delete: true };
 
   return (
     <>
@@ -287,6 +316,7 @@ export const FlowList = () => {
         filters={filters}
         filterList={activeFilter}
         loadingList={importing}
+        restrictedAction={restrictedAction}
       />
     </>
   );
diff --git a/src/routes/AuthenticatedRoute/AuthenticatedRoute.tsx b/src/routes/AuthenticatedRoute/AuthenticatedRoute.tsx
index 815a89a6a4..cb51d5b93c 100644
--- a/src/routes/AuthenticatedRoute/AuthenticatedRoute.tsx
+++ b/src/routes/AuthenticatedRoute/AuthenticatedRoute.tsx
@@ -97,6 +97,7 @@ const routeAdmin = (
     <Route path="flow" element={<FlowList />} />
     <Route path="flow/add" element={<Flow />} />
     <Route path="flow/:id/edit" element={<Flow />} />
+    <Route path="flow/:id/view" element={<Flow />} />
     <Route path="role" element={<RoleList />} />
     <Route path="role/add" element={<Role />} />
     <Route path="role/:id/edit" element={<Role />} />

From a31fea31c475c4eeeae0483ffd8021c3244b0bd3 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Mon, 8 Jul 2024 17:47:06 +0530
Subject: [PATCH 02/21] added support for viewing template flow

---
 .../floweditor/FlowEditor.helper.ts           |  4 ++--
 src/components/floweditor/FlowEditor.tsx      |  7 ++++--
 src/containers/Flow/Flow.tsx                  | 24 ++++++++++++++-----
 src/containers/Flow/FlowList/FlowList.tsx     |  8 ++++---
 src/containers/Form/FormLayout.tsx            | 16 +++++++++++--
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/components/floweditor/FlowEditor.helper.ts b/src/components/floweditor/FlowEditor.helper.ts
index 8b59d0943e..321dd91814 100644
--- a/src/components/floweditor/FlowEditor.helper.ts
+++ b/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'],
diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
index 3d71a4b7ae..62a8a89b7e 100644
--- a/src/components/floweditor/FlowEditor.tsx
+++ b/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);
@@ -55,6 +57,7 @@ export const FlowEditor = () => {
   const handleClose = () => {
     setAnchorEl(null);
   };
+  console.log(location?.state);
 
   const isTranslationEnabled = getOrganizationServices('autoTranslationEnabled');
 
diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 3893e339a6..960ccb76d7 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -44,9 +44,9 @@ export const Flow = () => {
   const [ignoreKeywords, setIgnoreKeywords] = useState(false);
   const { t } = useTranslation();
 
-  let isViewing = false;
-  if (location) {
-    console.log(location);
+  let isTemplate = false;
+  if (location.state === 'template') {
+    isTemplate = true;
   }
   const { data: tag } = useQuery(GET_TAGS, {
     variables: {},
@@ -142,7 +142,11 @@ export const Flow = () => {
 
   const dialogMessage = t("You won't be able to use this flow again.");
 
-  const additionalAction = { label: t('Configure'), link: '/flow/configure' };
+  const additionalAction = {
+    label: isTemplate ? t('View') : t('Configure'),
+    link: '/flow/configure',
+    state: isTemplate && 'template',
+  };
 
   const formFields = [
     {
@@ -150,6 +154,7 @@ export const Flow = () => {
       name: 'name',
       type: 'text',
       label: t('Name'),
+      disabled: isTemplate,
     },
     {
       component: Input,
@@ -157,6 +162,7 @@ export const Flow = () => {
       type: 'text',
       label: t('Keywords'),
       helperText: t('Enter comma separated keywords that trigger this flow.'),
+      disabled: isTemplate,
     },
     {
       component: Input,
@@ -165,13 +171,14 @@ export const Flow = () => {
       textArea: true,
       rows: 2,
       label: t('Description'),
+      disabled: isTemplate,
     },
     {
       component: AutoComplete,
       name: 'tagId',
       options: tag ? tag.tags : [],
       optionLabel: 'label',
-      disabled: false,
+      disabled: isTemplate,
       handleCreateItem: handleCreateLabel,
       hasCreateOption: true,
       multiple: false,
@@ -189,25 +196,28 @@ export const Flow = () => {
       },
       darkCheckbox: true,
       className: styles.Checkbox,
+      disabled: isTemplate,
     },
     {
       component: Checkbox,
       name: 'isActive',
       title: t('Is active?'),
       darkCheckbox: true,
+      disabled: isTemplate,
     },
     {
       component: Checkbox,
       name: 'isPinned',
       title: t('Is pinned?'),
       darkCheckbox: !isPinnedDisable,
-      disabled: isPinnedDisable,
+      disabled: isPinnedDisable || isTemplate,
     },
     {
       component: Checkbox,
       name: 'isBackground',
       title: t('Run this flow in the background'),
       darkCheckbox: true,
+      disabled: isTemplate,
     },
   ];
 
@@ -286,6 +296,8 @@ export const Flow = () => {
       customHandler={customHandler}
       helpData={flowInfo}
       backLinkButton="/flow"
+      buttonState={{ text: 'Save', status: isTemplate }}
+      restrictButtonStatus={{ status: isTemplate }}
     />
   );
 };
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 929815252a..6d78ad7c51 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -162,16 +162,18 @@ export const FlowList = () => {
     {
       label: 'View it',
       icon: viewIcon,
-      parameter: 'uuid',
+      parameter: 'id',
       insideMore: false,
-      link: '/flow/view',
+      dialog: (id: any) => {
+        navigate(`/flow/${id}/edit`, { state: 'template' });
+      },
     },
     {
       label: 'Use it',
       icon: configureIcon,
       parameter: 'uuid',
       insideMore: false,
-      link: '/flow/configure',
+      link: '/flow/configure?template=true',
     },
   ];
 
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index c066a3c64a..88cab13b48 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -1,5 +1,5 @@
 import { useState, Fragment, useEffect } from 'react';
-import { Navigate, useParams } from 'react-router-dom';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { Formik, Form, Field } from 'formik';
 // eslint-disable-next-line no-unused-vars
 import { DocumentNode, ApolloError, useQuery, useMutation } from '@apollo/client';
@@ -75,6 +75,10 @@ export interface FormLayoutProps {
   helpData?: HelpDataProps;
   noHeading?: boolean;
   partialPage?: boolean;
+  restrictButtonStatus?: {
+    text?: string;
+    status?: boolean;
+  };
 }
 
 export const FormLayout = ({
@@ -126,6 +130,7 @@ export const FormLayout = ({
   languageAttributes = {},
   noHeading = false,
   partialPage = false,
+  restrictButtonStatus,
 }: FormLayoutProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -138,6 +143,7 @@ export const FormLayout = ({
   const [isLoadedData, setIsLoadedData] = useState(false);
   const [customError, setCustomError] = useState<any>(null);
   const params = useParams();
+  const navigate = useNavigate();
 
   const { t } = useTranslation();
 
@@ -494,9 +500,10 @@ export const FormLayout = ({
         data-testid="remove-icon"
         className={styles.DeleteButton}
         onClick={() => setShowDialog(true)}
+        disabled={restrictButtonStatus?.status}
       >
         <DeleteIcon className={styles.DeleteIcon} />
-        Remove
+        {restrictButtonStatus?.text || 'Remove'}
       </Button>
     ) : null;
 
@@ -562,6 +569,11 @@ export const FormLayout = ({
                 variant="outlined"
                 color="primary"
                 onClick={() => {
+                  if (additionalAction?.state === 'template') {
+                    navigate(`${additionalAction.link}/${link}`, {
+                      state: additionalAction?.state,
+                    });
+                  }
                   submitForm();
                   setAction(true);
                 }}

From b516ed5fe7e235bfb755dc5517d0281d350bd7cf Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 11 Jul 2024 11:51:55 +0530
Subject: [PATCH 03/21] create options

---
 .../Flow/FlowList/FlowList.module.css         |  4 +++
 src/containers/Flow/FlowList/FlowList.tsx     | 29 ++++++++++++++++++-
 src/containers/List/List.tsx                  |  3 ++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css
index b762fe109b..f8c1b52445 100644
--- a/src/containers/Flow/FlowList/FlowList.module.css
+++ b/src/containers/Flow/FlowList/FlowList.module.css
@@ -191,3 +191,7 @@
 .ImportDialog {
   max-width: 395px;
 }
+
+.DialogContent {
+  text-align: center;
+}
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 6d78ad7c51..80a3e950ef 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -24,6 +24,7 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { flowInfo } from 'common/HelpData';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setErrorMessage, setNotification } from 'common/notification';
+import { Button } from 'components/UI/Form/Button/Button';
 
 const getName = (text: string, keywordsList: any, roles: any) => {
   const keywords = keywordsList.map((keyword: any) => keyword);
@@ -89,6 +90,7 @@ export const FlowList = () => {
   const [flowName, setFlowName] = useState('');
   const [importing, setImporting] = useState(false);
   const [importStatus, setImportStatus] = useState([]);
+  const [showDialog, setShowDialog] = useState(false);
 
   const [releaseFlow] = useLazyQuery(RELEASE_FLOW);
 
@@ -298,9 +300,34 @@ export const FlowList = () => {
   const restrictedAction = () =>
     filter === 'isTemplate' ? { delete: false, edit: false } : { edit: true, delete: true };
 
+  let dialogBox: any;
+  if (showDialog) {
+    dialogBox = (
+      <DialogBox
+        title="Create flow"
+        buttonOk="Create from Scratch"
+        buttonMiddle="Create from Template"
+        alignButtons="center"
+        skipCancel
+        handleMiddle={() => {
+          setFilter('isTemplate');
+          setShowDialog(false);
+        }}
+        handleOk={() => {
+          navigate('/flow/add');
+        }}
+      >
+        <div className={styles.DialogContent}>
+          Do you want to create a flow from scratch or use a template flow?
+        </div>
+      </DialogBox>
+    );
+  }
+
   return (
     <>
       {dialog}
+      {dialogBox}
       <List
         helpData={flowInfo}
         title={t('Flows')}
@@ -313,7 +340,7 @@ export const FlowList = () => {
         {...columnAttributes}
         searchParameter={['name_or_keyword_or_tags']}
         additionalAction={additionalAction}
-        button={{ show: true, label: t('Create') }}
+        button={{ show: true, label: t('Create'), action: () => setShowDialog(true) }}
         secondaryButton={importButton}
         filters={filters}
         filterList={activeFilter}
diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
index 3e1d8c877e..49a1d95136 100644
--- a/src/containers/List/List.tsx
+++ b/src/containers/List/List.tsx
@@ -700,6 +700,7 @@ export const List = ({
 
     let buttonContent;
     if (button.action) {
+      console.log('if');
       buttonContent = (
         <Button
           color="primary"
@@ -711,6 +712,8 @@ export const List = ({
         </Button>
       );
     } else if (!button.link) {
+      console.log('else');
+
       buttonContent = (
         <Button
           color="primary"

From bc099420d743a0f95e214339d504d64ca227ddd5 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 11 Jul 2024 12:13:34 +0530
Subject: [PATCH 04/21] fixed mocks

---
 src/components/floweditor/FlowEditor.tsx  |  1 -
 src/containers/Flow/Flow.test.tsx         |  7 +++++++
 src/containers/Flow/FlowList/FlowList.tsx | 15 ++++++++++-----
 src/containers/List/List.tsx              |  3 ---
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
index 62a8a89b7e..81f79f01f3 100644
--- a/src/components/floweditor/FlowEditor.tsx
+++ b/src/components/floweditor/FlowEditor.tsx
@@ -57,7 +57,6 @@ export const FlowEditor = () => {
   const handleClose = () => {
     setAnchorEl(null);
   };
-  console.log(location?.state);
 
   const isTranslationEnabled = getOrganizationServices('autoTranslationEnabled');
 
diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index e64f356cef..d419349352 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -12,6 +12,8 @@ import {
   createFlowQuery,
   createTagQuery,
   updateFlowQueryWithError,
+  getFlowCountQuery,
+  releaseFlow,
 } from 'mocks/Flow';
 import { Flow } from './Flow';
 import { setOrganizationServices } from 'services/AuthService';
@@ -19,6 +21,7 @@ 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}');
 
@@ -33,6 +36,9 @@ const mocks = [
   copyFlowQuery,
   createFlowQuery,
   createTagQuery,
+  getFlowCountQuery,
+  releaseFlow,
+  getFilterTagQuery,
 ];
 
 const mockUseLocationValue: any = {
@@ -155,6 +161,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>
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 80a3e950ef..ad69bd4561 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -173,9 +173,11 @@ export const FlowList = () => {
     {
       label: 'Use it',
       icon: configureIcon,
-      parameter: 'uuid',
+      parameter: 'id',
       insideMore: false,
-      link: '/flow/configure?template=true',
+      dialog: (id: any) => {
+        navigate(`/flow/${id}/edit`, { state: 'copyTemplate' });
+      },
     },
   ];
 
@@ -305,16 +307,19 @@ export const FlowList = () => {
     dialogBox = (
       <DialogBox
         title="Create flow"
+        alignButtons="center"
         buttonOk="Create from Scratch"
         buttonMiddle="Create from Template"
-        alignButtons="center"
         skipCancel
+        handleOk={() => {
+          navigate('/flow/add');
+        }}
         handleMiddle={() => {
           setFilter('isTemplate');
           setShowDialog(false);
         }}
-        handleOk={() => {
-          navigate('/flow/add');
+        handleCancel={() => {
+          setShowDialog(false);
         }}
       >
         <div className={styles.DialogContent}>
diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
index 49a1d95136..3e1d8c877e 100644
--- a/src/containers/List/List.tsx
+++ b/src/containers/List/List.tsx
@@ -700,7 +700,6 @@ export const List = ({
 
     let buttonContent;
     if (button.action) {
-      console.log('if');
       buttonContent = (
         <Button
           color="primary"
@@ -712,8 +711,6 @@ export const List = ({
         </Button>
       );
     } else if (!button.link) {
-      console.log('else');
-
       buttonContent = (
         <Button
           color="primary"

From 19aabbdc83a49478eda81f5f9e3d2e879490c473 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 11 Jul 2024 12:19:06 +0530
Subject: [PATCH 05/21] fixed formik submit func

---
 src/containers/Form/FormLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index e99906ebe6..95b02bb1f1 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -590,7 +590,7 @@ export const FormLayout = ({
                       state: additionalAction?.state,
                     });
                   }
-                  submitForm();
+                  formik.submitForm();
                   setAction(true);
                 }}
                 data-testid="additionalActionButton"

From 30824f673b8ef02214f0c79251979677bfdf5ae4 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 11 Jul 2024 12:29:08 +0530
Subject: [PATCH 06/21] fixed test cases

---
 src/containers/Flow/FlowList/FlowList.tsx | 9 +++------
 src/containers/Profile/Profile.test.tsx   | 9 +++++++--
 src/containers/Search/Search.test.tsx     | 9 +++++++--
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index ad69bd4561..866c56e2b0 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -24,7 +24,6 @@ import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { flowInfo } from 'common/HelpData';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setErrorMessage, setNotification } from 'common/notification';
-import { Button } from 'components/UI/Form/Button/Button';
 
 const getName = (text: string, keywordsList: any, roles: any) => {
   const keywords = keywordsList.map((keyword: any) => keyword);
@@ -122,7 +121,7 @@ export const FlowList = () => {
     },
   });
 
-  const setDialog = (id: any) => {
+  const handleCopy = (id: any) => {
     navigate(`/flow/${id}/edit`, { state: 'copy' });
   };
 
@@ -175,9 +174,7 @@ export const FlowList = () => {
       icon: configureIcon,
       parameter: 'id',
       insideMore: false,
-      dialog: (id: any) => {
-        navigate(`/flow/${id}/edit`, { state: 'copyTemplate' });
-      },
+      dialog: handleCopy,
     },
   ];
 
@@ -193,7 +190,7 @@ export const FlowList = () => {
       icon: <DuplicateIcon />,
       parameter: 'id',
       insideMore: true,
-      dialog: setDialog,
+      dialog: handleCopy,
     },
     {
       label: t('Export'),
diff --git a/src/containers/Profile/Profile.test.tsx b/src/containers/Profile/Profile.test.tsx
index 9447100198..600e2a7ef8 100644
--- a/src/containers/Profile/Profile.test.tsx
+++ b/src/containers/Profile/Profile.test.tsx
@@ -1,5 +1,6 @@
 import { render, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 import { LOGGED_IN_USER_MOCK } from 'mocks/Contact';
 import { Profile } from './Profile';
@@ -12,7 +13,9 @@ const props: any = {
 };
 const wrapper = (
   <MockedProvider mocks={mocks} addTypename={false}>
-    <Profile match={{ params: { id: 1 } }} {...props} />
+    <Router>
+      <Profile match={{ params: { id: 1 } }} {...props} />
+    </Router>
   </MockedProvider>
 );
 
@@ -30,7 +33,9 @@ it('should render profile page for contact profile', async () => {
 
   render(
     <MockedProvider mocks={mocks} addTypename={false}>
-      <Profile {...props} />
+      <Router>
+        <Profile {...props} />
+      </Router>
     </MockedProvider>
   );
 
diff --git a/src/containers/Search/Search.test.tsx b/src/containers/Search/Search.test.tsx
index d14ffe84d1..e2d07f9d6e 100644
--- a/src/containers/Search/Search.test.tsx
+++ b/src/containers/Search/Search.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 import { Search } from './Search';
 import { LIST_ITEM_MOCKS } from './Search.test.helper';
@@ -48,7 +49,9 @@ test('should load the search edit', async () => {
 
   const wrapper = (
     <MockedProvider mocks={mocks} addTypename={false}>
-      <Search {...props} />
+      <Router>
+        <Search {...props} />
+      </Router>
     </MockedProvider>
   );
 
@@ -71,7 +74,9 @@ test('should load the search edit', async () => {
 test('it renders component with saveSearch params', async () => {
   const wrapper = (
     <MockedProvider mocks={mocks} addTypename={false}>
-      <Search {...defaultProps('saveSearch')} />
+      <Router>
+        <Search {...defaultProps('saveSearch')} />
+      </Router>
     </MockedProvider>
   );
 

From f7e2506167541ec5a397aa10500526d779b7ed00 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 12:17:51 +0530
Subject: [PATCH 07/21] added test cases

---
 src/containers/Flow/Flow.test.tsx             | 27 ++++++-
 .../Flow/FlowList/FlowList.test.tsx           | 80 +++++++++++++++++--
 src/containers/Flow/FlowList/FlowList.tsx     |  2 +-
 src/containers/Form/FormLayout.test.helper.ts |  4 +-
 src/containers/List/List.test.helper.ts       |  4 +-
 src/mocks/Flow.tsx                            | 37 +++++++--
 6 files changed, 134 insertions(+), 20 deletions(-)

diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index d419349352..cb1fdfbe9b 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -36,7 +36,7 @@ const mocks = [
   copyFlowQuery,
   createFlowQuery,
   createTagQuery,
-  getFlowCountQuery,
+  getFlowCountQuery(),
   releaseFlow,
   getFilterTagQuery,
 ];
@@ -243,3 +243,28 @@ 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('Edit flow')).toBeInTheDocument();
+  });
+
+  screen.debug(document, Infinity);
+
+  await waitFor(() => {
+    expect(screen.getByTestId('submitActionButton')).toBeDisabled();
+    expect(screen.getByTestId('remove-icon')).toBeDisabled();
+  });
+});
diff --git a/src/containers/Flow/FlowList/FlowList.test.tsx b/src/containers/Flow/FlowList/FlowList.test.tsx
index e04ac7ea00..517ee75577 100644
--- a/src/containers/Flow/FlowList/FlowList.test.tsx
+++ b/src/containers/Flow/FlowList/FlowList.test.tsx
@@ -12,6 +12,7 @@ import {
   importFlow,
   exportFlow,
   releaseFlow,
+  filterTemplateFlows,
 } from 'mocks/Flow';
 import { getOrganizationQuery } from 'mocks/Organization';
 import testJSON from 'mocks/ImportFlow.json';
@@ -22,10 +23,10 @@ import { getFilterTagQuery } from 'mocks/Tag';
 import { getRoleNameQuery } from 'mocks/Role';
 
 const mocks = [
-  getFlowCountQuery,
-  getFlowCountQuery,
-  getFlowCountQuery,
-  getFlowCountQuery,
+  getFlowCountQuery(),
+  getFlowCountQuery(),
+  getFlowCountQuery(),
+  getFlowCountQuery(),
   filterFlowQuery,
   filterFlowQuery,
   filterFlowQuery,
@@ -39,6 +40,8 @@ const mocks = [
   exportFlow,
   getFilterTagQuery,
   getRoleNameQuery,
+  getFlowCountQuery('isTemplate'),
+  filterTemplateFlows,
   ...getOrganizationQuery,
 ];
 
@@ -52,11 +55,13 @@ const flowList = (
 
 HTMLAnchorElement.prototype.click = vi.fn();
 
+const mockedUsedNavigate = vi.fn();
 vi.mock('react-router-dom', async () => {
   return {
     ...(await vi.importActual<any>('react-router-dom')),
     useLocation: () => ({ state: 'copy', pathname: '/flow/1/edit' }),
     useParams: () => ({ id: 1 }),
+    useNavigate: () => mockedUsedNavigate,
   };
 });
 
@@ -108,8 +113,13 @@ describe('<FlowList />', () => {
     fireEvent.click(getAllByTestId('MoreIcon')[0]);
 
     await waitFor(() => {
-      expect(screen.getAllByTestId('additionalButton')[0]).toBeInTheDocument();
-      fireEvent.click(screen.getAllByTestId('additionalButton')[0]);
+      expect(screen.getByText('Copy')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByText('Copy'));
+
+    await waitFor(() => {
+      expect(mockedUsedNavigate).toHaveBeenCalled();
     });
   });
 
@@ -137,7 +147,11 @@ describe('<FlowList />', () => {
     const input = screen.getByTestId('import');
     fireEvent.change(input);
 
-    await waitFor(() => {});
+    await waitFor(() => {
+      expect(screen.getByText('Import flow Status')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('ok-button'));
   });
 
   test('should export flow to json file', async () => {
@@ -157,3 +171,55 @@ describe('<FlowList />', () => {
     });
   });
 });
+
+describe('Template flows', () => {
+  test('it opens and closes dialog box', async () => {
+    render(flowList);
+
+    await waitFor(() => {
+      expect(screen.getByText('Flows')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('newItemButton'));
+
+    // test if it closes the dialog
+    fireEvent.click(screen.getByTestId('CloseIcon'));
+
+    fireEvent.click(screen.getByTestId('newItemButton'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Create flow')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('ok-button'));
+
+    await waitFor(() => {
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+    });
+  });
+  test('it shows and creates a template flows', async () => {
+    render(flowList);
+
+    await waitFor(() => {
+      expect(screen.getByText('Flows')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('newItemButton'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Create flow')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('middle-button'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Template Flows')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getAllByTestId('viewIt')[0]);
+
+    await waitFor(() => {
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 866c56e2b0..f2da7a2fed 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -79,7 +79,7 @@ const queries = {
 };
 
 const configureIcon = <ConfigureIcon />;
-const viewIcon = <ViewIcon />;
+const viewIcon = <ViewIcon data-testid="viewIt" />;
 
 export const FlowList = () => {
   const navigate = useNavigate();
diff --git a/src/containers/Form/FormLayout.test.helper.ts b/src/containers/Form/FormLayout.test.helper.ts
index cae0e1a430..fb7b8fdf44 100644
--- a/src/containers/Form/FormLayout.test.helper.ts
+++ b/src/containers/Form/FormLayout.test.helper.ts
@@ -89,7 +89,7 @@ export const LIST_ITEM_MOCKS = [
   getFlowQuery({ id: 1 }),
   filterFlowQuery,
   filterFlowQuery,
-  getFlowCountQuery,
-  getFlowCountQuery,
+  getFlowCountQuery(),
+  getFlowCountQuery(),
   getFilterTagQuery,
 ];
diff --git a/src/containers/List/List.test.helper.ts b/src/containers/List/List.test.helper.ts
index f470f0c295..7d1988a581 100644
--- a/src/containers/List/List.test.helper.ts
+++ b/src/containers/List/List.test.helper.ts
@@ -46,10 +46,10 @@ export const defaultProps = {
 export const LIST_MOCKS = [
   getCurrentUserQuery,
   filterFlowQuery,
-  getFlowCountQuery,
+  getFlowCountQuery(),
   filterFlowQuery,
   filterFlowSortQuery,
-  getFlowCountQuery,
+  getFlowCountQuery(),
   filterFlowWithNameOrKeywordOrTagQuery,
   getFlowCountWithFilterQuery,
   getCurrentUserQuery,
diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx
index da987a76cb..3dc8eb3d52 100644
--- a/src/mocks/Flow.tsx
+++ b/src/mocks/Flow.tsx
@@ -191,6 +191,23 @@ export const filterFlowQuery = {
   result: filterFlowResult,
 };
 
+export const filterTemplateFlows = {
+  request: {
+    query: FILTER_FLOW,
+    variables: {
+      filter: { isTemplate: true },
+      opts: {
+        limit: 50,
+        offset: 0,
+        order: 'DESC',
+        orderWith: 'is_pinned',
+      },
+    },
+  },
+
+  result: filterFlowResult,
+};
+
 export const filterFlowSortQuery = {
   request: {
     query: FILTER_FLOW,
@@ -279,11 +296,11 @@ export const getActiveFlow = getFlowDetails();
 export const getInactiveFlow = getFlowDetails(false);
 export const getFlowWithoutKeyword = getFlowDetails(true, []);
 
-export const getFlowCountQuery = {
+export const getFlowCountQuery = (filter: string = 'isActive') => ({
   request: {
     query: GET_FLOW_COUNT,
     variables: {
-      filter: { isActive: true },
+      filter: { [filter]: true },
     },
   },
 
@@ -292,7 +309,7 @@ export const getFlowCountQuery = {
       countFlows: 1,
     },
   },
-};
+});
 
 export const getFlowCountWithFilterQuery = {
   request: {
@@ -427,10 +444,16 @@ export const importFlow = {
   result: {
     data: {
       importFlow: {
-        status: {
-          flowName: 'flow 1',
-          status: 'success',
-        },
+        status: [
+          {
+            flowName: 'Registration flow',
+            status: 'Successfully imported',
+          },
+          {
+            flowName: 'Optin',
+            status: 'Successfully imported',
+          },
+        ],
       },
     },
   },

From 8ef9ac8a4e6266d54838d9950467222ba34232f8 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 12:40:22 +0530
Subject: [PATCH 08/21] minor refactoring

---
 src/containers/Form/FormLayout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index 95b02bb1f1..2ee433c7ca 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -589,6 +589,7 @@ export const FormLayout = ({
                     navigate(`${additionalAction.link}/${link}`, {
                       state: additionalAction?.state,
                     });
+                    return;
                   }
                   formik.submitForm();
                   setAction(true);

From 60883315892e660b0f6e48b950787b5c8d5e7ba0 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 12:51:27 +0530
Subject: [PATCH 09/21] minor refactoring

---
 src/containers/Flow/FlowList/FlowList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index f2da7a2fed..5695eb6f3b 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -291,7 +291,7 @@ export const FlowList = () => {
     if (filter === 'isTemplate') {
       filters = { ...filters, isTemplate: true };
     } else {
-      filters = { ...filters, isActive: filter };
+      filters = { ...filters, isActive: filter, isTemplate: false };
     }
     return filters;
   }, [filter, selectedtag, importing]);

From 643390df1a79be5726513c3dbc93b44a23298163 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 13:07:56 +0530
Subject: [PATCH 10/21] updated mocks

---
 src/containers/Flow/Flow.test.tsx              |  2 +-
 src/containers/Flow/FlowList/FlowList.test.tsx | 10 +++++-----
 src/containers/Form/FormLayout.test.helper.ts  |  4 ++--
 src/containers/List/List.test.helper.ts        |  4 ++--
 src/mocks/Flow.tsx                             |  6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index cb1fdfbe9b..4ab4153cfc 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -36,7 +36,7 @@ const mocks = [
   copyFlowQuery,
   createFlowQuery,
   createTagQuery,
-  getFlowCountQuery(),
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
   releaseFlow,
   getFilterTagQuery,
 ];
diff --git a/src/containers/Flow/FlowList/FlowList.test.tsx b/src/containers/Flow/FlowList/FlowList.test.tsx
index 517ee75577..4b018f559b 100644
--- a/src/containers/Flow/FlowList/FlowList.test.tsx
+++ b/src/containers/Flow/FlowList/FlowList.test.tsx
@@ -23,10 +23,10 @@ import { getFilterTagQuery } from 'mocks/Tag';
 import { getRoleNameQuery } from 'mocks/Role';
 
 const mocks = [
-  getFlowCountQuery(),
-  getFlowCountQuery(),
-  getFlowCountQuery(),
-  getFlowCountQuery(),
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
+  getFlowCountQuery({ isActive: true, isTemplate: false }),
   filterFlowQuery,
   filterFlowQuery,
   filterFlowQuery,
@@ -40,7 +40,7 @@ const mocks = [
   exportFlow,
   getFilterTagQuery,
   getRoleNameQuery,
-  getFlowCountQuery('isTemplate'),
+  getFlowCountQuery({ isTemplate: true }),
   filterTemplateFlows,
   ...getOrganizationQuery,
 ];
diff --git a/src/containers/Form/FormLayout.test.helper.ts b/src/containers/Form/FormLayout.test.helper.ts
index fb7b8fdf44..f7dba6e3a4 100644
--- a/src/containers/Form/FormLayout.test.helper.ts
+++ b/src/containers/Form/FormLayout.test.helper.ts
@@ -89,7 +89,7 @@ export const LIST_ITEM_MOCKS = [
   getFlowQuery({ id: 1 }),
   filterFlowQuery,
   filterFlowQuery,
-  getFlowCountQuery(),
-  getFlowCountQuery(),
+  getFlowCountQuery({ isTemplate: false, isActive: true }),
+  getFlowCountQuery({ isTemplate: false, isActive: true }),
   getFilterTagQuery,
 ];
diff --git a/src/containers/List/List.test.helper.ts b/src/containers/List/List.test.helper.ts
index 7d1988a581..e79ac52d04 100644
--- a/src/containers/List/List.test.helper.ts
+++ b/src/containers/List/List.test.helper.ts
@@ -46,10 +46,10 @@ export const defaultProps = {
 export const LIST_MOCKS = [
   getCurrentUserQuery,
   filterFlowQuery,
-  getFlowCountQuery(),
+  getFlowCountQuery({ isTemplate: false, isActive: true }),
   filterFlowQuery,
   filterFlowSortQuery,
-  getFlowCountQuery(),
+  getFlowCountQuery({ isTemplate: false, isActive: true }),
   filterFlowWithNameOrKeywordOrTagQuery,
   getFlowCountWithFilterQuery,
   getCurrentUserQuery,
diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx
index 3dc8eb3d52..35f09269ba 100644
--- a/src/mocks/Flow.tsx
+++ b/src/mocks/Flow.tsx
@@ -178,7 +178,7 @@ export const filterFlowQuery = {
   request: {
     query: FILTER_FLOW,
     variables: {
-      filter: { isActive: true },
+      filter: { isActive: true, isTemplate: false },
       opts: {
         limit: 50,
         offset: 0,
@@ -296,11 +296,11 @@ export const getActiveFlow = getFlowDetails();
 export const getInactiveFlow = getFlowDetails(false);
 export const getFlowWithoutKeyword = getFlowDetails(true, []);
 
-export const getFlowCountQuery = (filter: string = 'isActive') => ({
+export const getFlowCountQuery = (filter: any) => ({
   request: {
     query: GET_FLOW_COUNT,
     variables: {
-      filter: { [filter]: true },
+      filter,
     },
   },
 

From c87ac51e6e39da71bf9c9bbd2802df6fea47da3a Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 13:16:18 +0530
Subject: [PATCH 11/21] disabled buttons

---
 src/components/floweditor/FlowEditor.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
index 81f79f01f3..393feaf639 100644
--- a/src/components/floweditor/FlowEditor.tsx
+++ b/src/components/floweditor/FlowEditor.tsx
@@ -404,6 +404,7 @@ export const FlowEditor = () => {
                 handleClose();
               }}
               disableRipple
+              disabled={isTemplate}
             >
               Reset flow count
             </MenuItem>
@@ -413,6 +414,7 @@ export const FlowEditor = () => {
               variant="outlined"
               color="primary"
               data-testid="previewButton"
+              disabled={isTemplate}
               onClick={() => {
                 setShowTranslateFlowModal(true);
                 handleClose();
@@ -435,6 +437,7 @@ export const FlowEditor = () => {
             variant="contained"
             color="primary"
             data-testid="button"
+            disabled={isTemplate}
             onClick={() => setPublishDialog(true)}
           >
             <PublishIcon className={styles.Icon} />

From 5ffa54db21eac86edf9101f30558bacf2529b4e5 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 12 Jul 2024 13:27:26 +0530
Subject: [PATCH 12/21] updated mocks

---
 src/containers/Flow/Flow.test.tsx              |  4 +---
 src/containers/Flow/FlowList/FlowList.test.tsx | 18 ++++++++++--------
 src/containers/Form/FormLayout.test.helper.ts  |  4 ++--
 src/containers/List/List.test.helper.ts        |  8 ++++----
 src/mocks/Flow.tsx                             |  6 +++---
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index 4ab4153cfc..37ed83f3a7 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -29,7 +29,7 @@ const mocks = [
   ...getOrganizationQuery,
   getFlowQuery({ id: 1 }),
   getFlowQuery({ id: '1' }),
-  filterFlowQuery,
+  filterFlowQuery({ isActive: true, isTemplate: false }),
   getFilterTagQuery,
   getRoleNameQuery,
   getOrganizationLanguagesQuery,
@@ -261,8 +261,6 @@ it('buttons should be disabled in template state', async () => {
     expect(screen.getByText('Edit flow')).toBeInTheDocument();
   });
 
-  screen.debug(document, Infinity);
-
   await waitFor(() => {
     expect(screen.getByTestId('submitActionButton')).toBeDisabled();
     expect(screen.getByTestId('remove-icon')).toBeDisabled();
diff --git a/src/containers/Flow/FlowList/FlowList.test.tsx b/src/containers/Flow/FlowList/FlowList.test.tsx
index 4b018f559b..eda758cbcc 100644
--- a/src/containers/Flow/FlowList/FlowList.test.tsx
+++ b/src/containers/Flow/FlowList/FlowList.test.tsx
@@ -22,15 +22,17 @@ import { Flow } from '../Flow';
 import { getFilterTagQuery } from 'mocks/Tag';
 import { getRoleNameQuery } from 'mocks/Role';
 
+const isActiveFilter = { isActive: true, isTemplate: false };
+
 const mocks = [
-  getFlowCountQuery({ isActive: true, isTemplate: false }),
-  getFlowCountQuery({ isActive: true, isTemplate: false }),
-  getFlowCountQuery({ isActive: true, isTemplate: false }),
-  getFlowCountQuery({ isActive: true, isTemplate: false }),
-  filterFlowQuery,
-  filterFlowQuery,
-  filterFlowQuery,
-  filterFlowQuery,
+  getFlowCountQuery(isActiveFilter),
+  getFlowCountQuery(isActiveFilter),
+  getFlowCountQuery(isActiveFilter),
+  getFlowCountQuery(isActiveFilter),
+  filterFlowQuery(isActiveFilter),
+  filterFlowQuery(isActiveFilter),
+  filterFlowQuery(isActiveFilter),
+  filterFlowQuery(isActiveFilter),
   filterFlowNewQuery,
   getFlowCountNewQuery,
   getFlowQuery({ id: 1 }),
diff --git a/src/containers/Form/FormLayout.test.helper.ts b/src/containers/Form/FormLayout.test.helper.ts
index f7dba6e3a4..32646a5588 100644
--- a/src/containers/Form/FormLayout.test.helper.ts
+++ b/src/containers/Form/FormLayout.test.helper.ts
@@ -87,8 +87,8 @@ export const LIST_ITEM_MOCKS = [
   ...getOrganizationQuery,
   getOrganizationLanguagesQuery,
   getFlowQuery({ id: 1 }),
-  filterFlowQuery,
-  filterFlowQuery,
+  filterFlowQuery({ isActive: true, isTemplate: false }),
+  filterFlowQuery({ isActive: true, isTemplate: false }),
   getFlowCountQuery({ isTemplate: false, isActive: true }),
   getFlowCountQuery({ isTemplate: false, isActive: true }),
   getFilterTagQuery,
diff --git a/src/containers/List/List.test.helper.ts b/src/containers/List/List.test.helper.ts
index e79ac52d04..ad856bba25 100644
--- a/src/containers/List/List.test.helper.ts
+++ b/src/containers/List/List.test.helper.ts
@@ -45,11 +45,11 @@ export const defaultProps = {
 
 export const LIST_MOCKS = [
   getCurrentUserQuery,
-  filterFlowQuery,
-  getFlowCountQuery({ isTemplate: false, isActive: true }),
-  filterFlowQuery,
+  filterFlowQuery({ isActive: true }),
+  getFlowCountQuery({ isActive: true }),
+  filterFlowQuery({ isActive: true }),
   filterFlowSortQuery,
-  getFlowCountQuery({ isTemplate: false, isActive: true }),
+  getFlowCountQuery({ isActive: true }),
   filterFlowWithNameOrKeywordOrTagQuery,
   getFlowCountWithFilterQuery,
   getCurrentUserQuery,
diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx
index 35f09269ba..dd65aafadf 100644
--- a/src/mocks/Flow.tsx
+++ b/src/mocks/Flow.tsx
@@ -174,11 +174,11 @@ const filterFlowResult = {
   },
 };
 
-export const filterFlowQuery = {
+export const filterFlowQuery = (filter: any) => ({
   request: {
     query: FILTER_FLOW,
     variables: {
-      filter: { isActive: true, isTemplate: false },
+      filter,
       opts: {
         limit: 50,
         offset: 0,
@@ -189,7 +189,7 @@ export const filterFlowQuery = {
   },
 
   result: filterFlowResult,
-};
+});
 
 export const filterTemplateFlows = {
   request: {

From c5ed9170fb0bd761a1e95606aa88af74bed3bd63 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Mon, 15 Jul 2024 11:12:17 +0530
Subject: [PATCH 13/21] updated branch for cypress test cases

---
 .github/workflows/cypress-testing.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/cypress-testing.yml b/.github/workflows/cypress-testing.yml
index b85dce6a03..8256c7922c 100644
--- a/.github/workflows/cypress-testing.yml
+++ b/.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

From affb611f1734acd48f73e2c1bdaec66c2e22d20e Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Tue, 16 Jul 2024 14:54:59 +0530
Subject: [PATCH 14/21] testing feedbacks

---
 src/containers/Flow/Flow.tsx              | 30 ++++++++++++++++----
 src/containers/Flow/FlowList/FlowList.tsx | 34 +++++++++++++++--------
 src/i18n/en/en.json                       |  5 +++-
 3 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 960ccb76d7..ad0bce60ae 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -98,11 +98,15 @@ export const Flow = () => {
     // Override name & keywords when creating Flow Copy
     let fieldName = nameValue;
     let fieldKeywords = keywordsValue;
+    let description = descriptionValue;
+    let tags = tagValue;
     if (location.state === 'copy') {
       fieldName = `Copy of ${nameValue}`;
       fieldKeywords = '';
+    } else if (location.state === 'copyTemplate') {
+      description = '';
+      tags = null;
     }
-
     const {
       organization: {
         organization: { newcontactFlowId },
@@ -118,7 +122,7 @@ export const Flow = () => {
     setIsPinned(isPinnedValue);
     setIsBackground(isBackgroundValue);
     setRoles(rolesValue);
-    setDescription(descriptionValue);
+    setDescription(description);
 
     // we are receiving keywords as an array object
     if (fieldKeywords.length > 0) {
@@ -126,7 +130,8 @@ export const Flow = () => {
       setKeywords(fieldKeywords.join(','));
     }
     setIgnoreKeywords(ignoreKeywordsValue);
-    const getTagId = tag && tag.tags.filter((tags: any) => tags.id === tagValue?.id);
+    const getTagId = tag && tag.tags.filter((t: any) => t.id === tags?.id);
+
     if (getTagId.length > 0) {
       setTagId(getTagId[0]);
     }
@@ -141,6 +146,12 @@ export const Flow = () => {
   });
 
   const dialogMessage = t("You won't be able to use this flow again.");
+  let backLink = '/flow';
+  let cancelLink = 'flow';
+  if (isTemplate || location.state === 'copyTemplate') {
+    backLink = '/flow?isTemplate=true';
+    cancelLink = 'flow?isTemplate=true';
+  }
 
   const additionalAction = {
     label: isTemplate ? t('View') : t('Configure'),
@@ -251,10 +262,17 @@ export const Flow = () => {
   // alter header & update/copy queries
   let title;
   let type;
+  let copyNotification;
   if (location.state === 'copy') {
     queries.updateItemQuery = CREATE_FLOW_COPY;
     title = t('Copy flow');
     type = 'copy';
+    copyNotification = t('Copy of the flow has been created!');
+  } else if (location.state === 'copyTemplate') {
+    queries.updateItemQuery = CREATE_FLOW_COPY;
+    title = t('Template flow copy');
+    type = 'copy';
+    copyNotification = t('Flow created successfully from template!');
   } else {
     queries.updateItemQuery = UPDATE_FLOW;
   }
@@ -284,7 +302,7 @@ export const Flow = () => {
       dialogMessage={dialogMessage}
       formFields={formFields}
       redirectionLink="flow"
-      cancelLink="flow"
+      cancelLink={`flow?isTemplate=${isTemplate}`}
       linkParameter="uuid"
       listItem="flow"
       icon={flowIcon}
@@ -292,10 +310,10 @@ export const Flow = () => {
       languageSupport={false}
       title={title}
       type={type}
-      copyNotification={t('Copy of the flow has been created!')}
+      copyNotification={copyNotification}
       customHandler={customHandler}
       helpData={flowInfo}
-      backLinkButton="/flow"
+      backLinkButton={backLink}
       buttonState={{ text: 'Save', status: isTemplate }}
       restrictButtonStatus={{ status: isTemplate }}
     />
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 5695eb6f3b..932927dcb1 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
@@ -83,6 +83,7 @@ const viewIcon = <ViewIcon data-testid="viewIt" />;
 
 export const FlowList = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const { t } = useTranslation();
   const [filter, setFilter] = useState<any>(true);
   const [selectedtag, setSelectedTag] = useState<any>(null);
@@ -121,8 +122,8 @@ export const FlowList = () => {
     },
   });
 
-  const handleCopy = (id: any) => {
-    navigate(`/flow/${id}/edit`, { state: 'copy' });
+  const handleCopy = (id: any, template: boolean = false) => {
+    navigate(`/flow/${id}/edit`, { state: template ? 'copyTemplate' : 'copy' });
   };
 
   const exportFlow = (id: any, item: any) => {
@@ -171,7 +172,7 @@ export const FlowList = () => {
     },
     {
       label: 'Use it',
-      icon: configureIcon,
+      icon: <DuplicateIcon />,
       parameter: 'id',
       insideMore: false,
       dialog: handleCopy,
@@ -305,13 +306,13 @@ export const FlowList = () => {
       <DialogBox
         title="Create flow"
         alignButtons="center"
-        buttonOk="Create from Scratch"
-        buttonMiddle="Create from Template"
+        buttonMiddle="Create from Scratch"
+        buttonOk="Create from Template"
         skipCancel
-        handleOk={() => {
+        handleMiddle={() => {
           navigate('/flow/add');
         }}
-        handleMiddle={() => {
+        handleOk={() => {
           setFilter('isTemplate');
           setShowDialog(false);
         }}
@@ -319,20 +320,29 @@ export const FlowList = () => {
           setShowDialog(false);
         }}
       >
-        <div className={styles.DialogContent}>
-          Do you want to create a flow from scratch or use a template flow?
-        </div>
+        <div className={styles.DialogContent}>How do you want to create a flow?</div>
       </DialogBox>
     );
   }
 
+  useEffect(() => {
+    if (location.search) {
+      const isTemplate = new URLSearchParams(location.search).get('isTemplate');
+      if (isTemplate === 'true') {
+        setFilter('isTemplate');
+      }
+    }
+  }, [location]);
+
+  const title = filter === 'isTemplate' ? t('Template Flows') : t('Flows');
+
   return (
     <>
       {dialog}
       {dialogBox}
       <List
         helpData={flowInfo}
-        title={t('Flows')}
+        title={title}
         listItem="flows"
         listItemName="flow"
         pageLink="flow"
diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
index c9bd01044d..64e8b10a4c 100644
--- a/src/i18n/en/en.json
+++ b/src/i18n/en/en.json
@@ -508,5 +508,8 @@
   "Export without translations": "Export without translations",
   "Export the translated content of the message as a csv.": "Export the translated content of the message as a csv.",
   "Export the content of the message as a csv.": "Export the content of the message as a csv.",
-  "Import the csv with translations for interactive message.": "Import the csv with translations for interactive message."
+  "Import the csv with translations for interactive message.": "Import the csv with translations for interactive message.",
+  "Template Flows": "Template Flows",
+  "Template flow copy": "Template flow copy",
+  "Flow created successfully from template!": "Flow created successfully from template!"
 }

From 3086d497037470780f522c9115751b530e5ad160 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Tue, 16 Jul 2024 15:08:31 +0530
Subject: [PATCH 15/21] resolved comments

---
 src/containers/Flow/Flow.tsx                   | 11 ++++++++---
 src/containers/Flow/FlowList/FlowList.test.tsx |  3 ++-
 src/containers/Flow/FlowList/FlowList.tsx      |  2 +-
 src/containers/Form/FormLayout.tsx             |  9 +++------
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index ad0bce60ae..e01e944984 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useQuery, useMutation } from '@apollo/client';
 
 import { FormLayout } from 'containers/Form/FormLayout';
@@ -31,6 +31,7 @@ const queries = {
 
 export const Flow = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const params = useParams();
   const [name, setName] = useState('');
   const [isPinnedDisable, setIsPinnedDisable] = useState(false);
@@ -156,7 +157,11 @@ export const Flow = () => {
   const additionalAction = {
     label: isTemplate ? t('View') : t('Configure'),
     link: '/flow/configure',
-    state: isTemplate && 'template',
+    action: (link: any) => {
+      navigate(link, {
+        state: isTemplate && 'template',
+      });
+    },
   };
 
   const formFields = [
@@ -302,7 +307,7 @@ export const Flow = () => {
       dialogMessage={dialogMessage}
       formFields={formFields}
       redirectionLink="flow"
-      cancelLink={`flow?isTemplate=${isTemplate}`}
+      cancelLink={cancelLink}
       linkParameter="uuid"
       listItem="flow"
       icon={flowIcon}
diff --git a/src/containers/Flow/FlowList/FlowList.test.tsx b/src/containers/Flow/FlowList/FlowList.test.tsx
index eda758cbcc..18376583ef 100644
--- a/src/containers/Flow/FlowList/FlowList.test.tsx
+++ b/src/containers/Flow/FlowList/FlowList.test.tsx
@@ -199,6 +199,7 @@ describe('Template flows', () => {
       expect(mockedUsedNavigate).toHaveBeenCalled();
     });
   });
+
   test('it shows and creates a template flows', async () => {
     render(flowList);
 
@@ -212,7 +213,7 @@ describe('Template flows', () => {
       expect(screen.getByText('Create flow')).toBeInTheDocument();
     });
 
-    fireEvent.click(screen.getByTestId('middle-button'));
+    fireEvent.click(screen.getByTestId('ok-button'));
 
     await waitFor(() => {
       expect(screen.getByText('Template Flows')).toBeInTheDocument();
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 932927dcb1..859896d0fd 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -240,7 +240,7 @@ export const FlowList = () => {
   const filterList = [
     { label: 'Active', value: true },
     { label: 'Inactive', value: false },
-    { label: 'Template Flows', value: 'isTemplate' },
+    { label: 'Template', value: 'isTemplate' },
   ];
   const { data: tag } = useQuery(GET_TAGS, {
     variables: {},
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index 2ee433c7ca..1cfab87cb7 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -1,5 +1,5 @@
 import { useState, Fragment, useEffect } from 'react';
-import { Navigate, useParams, useNavigate } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
 import { Field, useFormik, FormikProvider } from 'formik';
 // eslint-disable-next-line no-unused-vars
 import { DocumentNode, ApolloError, useQuery, useMutation } from '@apollo/client';
@@ -152,7 +152,6 @@ export const FormLayout = ({
   const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);
   const params = useParams();
 
-  const navigate = useNavigate();
   const formik = useFormik({
     initialValues: {
       languageId,
@@ -585,10 +584,8 @@ export const FormLayout = ({
                 variant="outlined"
                 color="primary"
                 onClick={() => {
-                  if (additionalAction?.state === 'template') {
-                    navigate(`${additionalAction.link}/${link}`, {
-                      state: additionalAction?.state,
-                    });
+                  if (additionalAction?.action) {
+                    additionalAction.action(`${additionalAction.link}/${link}`);
                     return;
                   }
                   formik.submitForm();

From 2e7411ec7c091dc9072f82f3b009c0cd6f8ceee0 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Wed, 17 Jul 2024 09:14:34 +0530
Subject: [PATCH 16/21] minor refactoring

---
 src/containers/Flow/Flow.tsx       | 7 ++++++-
 src/containers/Form/FormLayout.tsx | 7 +++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index e01e944984..756824562b 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -105,8 +105,10 @@ export const Flow = () => {
       fieldName = `Copy of ${nameValue}`;
       fieldKeywords = '';
     } else if (location.state === 'copyTemplate') {
+      fieldName = `Copy of ${nameValue}`;
       description = '';
       tags = null;
+      fieldKeywords = '';
     }
     const {
       organization: {
@@ -157,10 +159,13 @@ export const Flow = () => {
   const additionalAction = {
     label: isTemplate ? t('View') : t('Configure'),
     link: '/flow/configure',
-    action: (link: any) => {
+    action: (link: any, submitForm?: any) => {
       navigate(link, {
         state: isTemplate && 'template',
       });
+      if (!isTemplate) {
+        submitForm();
+      }
     },
   };
 
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index 1cfab87cb7..b8fcf80bbf 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -584,12 +584,11 @@ export const FormLayout = ({
                 variant="outlined"
                 color="primary"
                 onClick={() => {
+                  setAction(true);
+
                   if (additionalAction?.action) {
-                    additionalAction.action(`${additionalAction.link}/${link}`);
-                    return;
+                    additionalAction.action(`${additionalAction.link}/${link}`, formik.submitForm);
                   }
-                  formik.submitForm();
-                  setAction(true);
                 }}
                 data-testid="additionalActionButton"
               >

From b7e80a48e4174bba167558b6a8825f654da084d9 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Wed, 17 Jul 2024 09:22:34 +0530
Subject: [PATCH 17/21] minor refactoring

---
 src/containers/Flow/FlowList/FlowList.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 859896d0fd..ada308699a 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -122,8 +122,8 @@ export const FlowList = () => {
     },
   });
 
-  const handleCopy = (id: any, template: boolean = false) => {
-    navigate(`/flow/${id}/edit`, { state: template ? 'copyTemplate' : 'copy' });
+  const handleCopy = (id: any) => {
+    navigate(`/flow/${id}/edit`, { state: 'copy' });
   };
 
   const exportFlow = (id: any, item: any) => {
@@ -175,7 +175,9 @@ export const FlowList = () => {
       icon: <DuplicateIcon />,
       parameter: 'id',
       insideMore: false,
-      dialog: handleCopy,
+      dialog: (id: any) => {
+        navigate(`/flow/${id}/edit`, { state: 'copyTemplate' });
+      },
     },
   ];
 

From bca286624004098a1b166fb4f0b1528bb3b1ce86 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Wed, 17 Jul 2024 09:41:45 +0530
Subject: [PATCH 18/21] updated test cases

---
 src/containers/Flow/Flow.test.tsx | 62 ++++++++++++++++++++++++-
 src/containers/Flow/Flow.tsx      |  1 +
 src/mocks/Flow.tsx                | 77 +++++++++++++++++--------------
 3 files changed, 104 insertions(+), 36 deletions(-)

diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index 37ed83f3a7..e729554ce3 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -33,7 +33,8 @@ const mocks = [
   getFilterTagQuery,
   getRoleNameQuery,
   getOrganizationLanguagesQuery,
-  copyFlowQuery,
+  copyFlowQuery(),
+  copyFlowQuery(true),
   createFlowQuery,
   createTagQuery,
   getFlowCountQuery({ isActive: true, isTemplate: false }),
@@ -47,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) => {
@@ -187,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}>
@@ -265,4 +295,34 @@ it('buttons should be disabled in template state', async () => {
     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(() => {});
 });
diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 756824562b..0e602de061 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -273,6 +273,7 @@ export const Flow = () => {
   let title;
   let type;
   let copyNotification;
+
   if (location.state === 'copy') {
     queries.updateItemQuery = CREATE_FLOW_COPY;
     title = t('Copy flow');
diff --git a/src/mocks/Flow.tsx b/src/mocks/Flow.tsx
index dd65aafadf..ef4a0077f7 100644
--- a/src/mocks/Flow.tsx
+++ b/src/mocks/Flow.tsx
@@ -663,46 +663,53 @@ export const exportFlowTranslationsWithErrors = {
   },
 };
 
-export const copyFlowQuery = {
-  request: {
-    query: CREATE_FLOW_COPY,
-    variables: {
-      id: '1',
-      input: {
-        isActive: true,
-        isPinned: false,
-        isBackground: false,
-        name: 'Copy of Help',
-        keywords: ['help', 'activity'],
-        description: 'Help flow',
-        ignoreKeywords: false,
-        addRoleIds: [],
-        deleteRoleIds: [],
-        tag_id: '1',
+export const copyFlowQuery = (template: boolean = false) => {
+  let input = {
+    isActive: true,
+    isPinned: false,
+    isBackground: false,
+    name: 'Copy of Help',
+    keywords: template ? [] : ['help', 'activity'],
+    description: template ? '' : 'Help flow',
+    ignoreKeywords: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+  };
+
+  if (!template) {
+    Object.assign(input, { tag_id: '1' });
+  }
+
+  return {
+    request: {
+      query: CREATE_FLOW_COPY,
+      variables: {
+        id: '1',
+        input,
       },
     },
-  },
-  result: {
-    data: {
-      copyFlow: {
-        flow: {
-          roles: [],
-          tag: { id: '1', label: 'New tag' },
-          id: '1',
-          isActive: true,
-          keywords: ['help', 'activity'],
-          description: 'Help flow',
-          name: 'Copy of Help',
-          isBackground: false,
-          updatedAt: '2021-03-05T04:32:23Z',
-          uuid: '3fa22108-f464-41e5-81d9-d8a298854429',
-          isPinned: false,
-        },
+    result: {
+      data: {
+        copyFlow: {
+          flow: {
+            roles: [],
+            tag: { id: '1', label: 'New tag' },
+            id: '1',
+            isActive: true,
+            keywords: ['help', 'activity'],
+            description: 'Help flow',
+            name: 'Copy of Help',
+            isBackground: false,
+            updatedAt: '2021-03-05T04:32:23Z',
+            uuid: '3fa22108-f464-41e5-81d9-d8a298854429',
+            isPinned: false,
+          },
 
-        errors: null,
+          errors: null,
+        },
       },
     },
-  },
+  };
 };
 
 export const createFlowQuery = {

From ebae9583ba5f8aeca97aeffde651c1a8a4b7f39b Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 18 Jul 2024 10:27:38 +0530
Subject: [PATCH 19/21] fixed a small bug

---
 src/containers/Flow/Flow.tsx       | 18 +++++++++++-------
 src/containers/Form/FormLayout.tsx |  4 +++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 0e602de061..dfa3edcd51 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -156,19 +156,23 @@ export const Flow = () => {
     cancelLink = 'flow?isTemplate=true';
   }
 
-  const additionalAction = {
-    label: isTemplate ? t('View') : t('Configure'),
+  const configureAction = {
+    label: t('Configure'),
     link: '/flow/configure',
-    action: (link: any, submitForm?: any) => {
+  };
+
+  const viewAction = {
+    label: t('View'),
+    link: '/flow/configure',
+    action: (link: any) => {
       navigate(link, {
-        state: isTemplate && 'template',
+        state: 'template',
       });
-      if (!isTemplate) {
-        submitForm();
-      }
     },
   };
 
+  const additionalAction = isTemplate ? viewAction : configureAction;
+
   const formFields = [
     {
       component: Input,
diff --git a/src/containers/Form/FormLayout.tsx b/src/containers/Form/FormLayout.tsx
index b8fcf80bbf..a1a6196ff6 100644
--- a/src/containers/Form/FormLayout.tsx
+++ b/src/containers/Form/FormLayout.tsx
@@ -587,7 +587,9 @@ export const FormLayout = ({
                   setAction(true);
 
                   if (additionalAction?.action) {
-                    additionalAction.action(`${additionalAction.link}/${link}`, formik.submitForm);
+                    additionalAction.action(`${additionalAction.link}/${link}`);
+                  } else {
+                    formik.submitForm();
                   }
                 }}
                 data-testid="additionalActionButton"

From f7d725bac0d43bfec7aa04cc48bbc6c7a4d1120d Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Fri, 19 Jul 2024 12:21:17 +0530
Subject: [PATCH 20/21] round 2 feedbacks

---
 src/components/floweditor/FlowEditor.tsx | 2 +-
 src/containers/Flow/Flow.tsx             | 2 ++
 src/i18n/en/en.json                      | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
index 393feaf639..46f1e33cea 100644
--- a/src/components/floweditor/FlowEditor.tsx
+++ b/src/components/floweditor/FlowEditor.tsx
@@ -352,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"
           />
diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index dfa3edcd51..1507673454 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -288,6 +288,8 @@ export const Flow = () => {
     title = t('Template flow copy');
     type = 'copy';
     copyNotification = t('Flow created successfully from template!');
+  } else if (location.state === 'template') {
+    title = t('Template Flow');
   } else {
     queries.updateItemQuery = UPDATE_FLOW;
   }
diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
index 64e8b10a4c..ec7930c355 100644
--- a/src/i18n/en/en.json
+++ b/src/i18n/en/en.json
@@ -510,6 +510,7 @@
   "Export the content of the message as a csv.": "Export the content of the message as a csv.",
   "Import the csv with translations for interactive message.": "Import the csv with translations for interactive message.",
   "Template Flows": "Template Flows",
+  "Template Flow": "Template Flow",
   "Template flow copy": "Template flow copy",
   "Flow created successfully from template!": "Flow created successfully from template!"
 }

From f174b91c0afea5509a8fe221c8f3116258c40f7d Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Tue, 23 Jul 2024 10:45:28 +0530
Subject: [PATCH 21/21] fixed failing test case

---
 src/containers/Flow/Flow.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/Flow/Flow.test.tsx b/src/containers/Flow/Flow.test.tsx
index e729554ce3..3d7a29e04d 100644
--- a/src/containers/Flow/Flow.test.tsx
+++ b/src/containers/Flow/Flow.test.tsx
@@ -288,7 +288,7 @@ it('buttons should be disabled in template state', async () => {
   );
 
   await waitFor(() => {
-    expect(screen.getByText('Edit flow')).toBeInTheDocument();
+    expect(screen.getByText('Template Flow')).toBeInTheDocument();
   });
 
   await waitFor(() => {