Merge pull request #3047 from glific/template-flows/refactoring

Refactored the code for template flows

src/components/floweditor/FlowEditor.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useLazyQuery, useQuery } from '@apollo/client';
-import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Navigate, 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,13 +31,10 @@ 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 isTemplate = location?.state === 'template';
-  const config = setConfig(uuid, isTemplate);
   const [published, setPublished] = useState(false);
   const [showSimulator, setShowSimulator] = useState(false);
   const [stayOnPublish, setStayOnPublish] = useState(false);
@@ -48,6 +45,8 @@ export const FlowEditor = () => {
   const [currentEditDialogBox, setCurrentEditDialogBox] = useState(false);
   const [dialogMessage, setDialogMessage] = useState('');
   const [publishLoading, setPublishLoading] = useState(false);
+  const [isTemplate, setIsTemplate] = useState(false);
+  const config = setConfig(uuid, isTemplate);
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -141,6 +140,7 @@ export const FlowEditor = () => {
   useEffect(() => {
     if (flowName && flowName.flows.length > 0) {
       setFlowId(flowName.flows[0].id);
+      setIsTemplate(flowName.flows[0].isTemplate);
     }
   }, [flowName]);
 

src/containers/Flow/Flow.test.tsx

@@ -33,13 +33,35 @@ const mocks = [
   getFilterTagQuery,
   getRoleNameQuery,
   getOrganizationLanguagesQuery,
-  copyFlowQuery(),
-  copyFlowQuery(true),
+  copyFlowQuery({
+    isActive: true,
+    isPinned: false,
+    isBackground: false,
+    name: 'Copy of Help',
+    keywords: [],
+    description: '',
+    ignoreKeywords: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+  }),
+  copyFlowQuery({
+    isActive: true,
+    isPinned: false,
+    isBackground: false,
+    name: 'Copy of Help',
+    keywords: ['help', 'activity'],
+    description: 'Help flow',
+    ignoreKeywords: false,
+    addRoleIds: [],
+    deleteRoleIds: [],
+    tag_id: '1',
+  }),
   createFlowQuery,
   createTagQuery,
   getFlowCountQuery({ isActive: true, isTemplate: false }),
   releaseFlow,
   getFilterTagQuery,
+  updateFlowQuery,
 ];
 
 const mockUseLocationValue: any = {

src/mocks/Flow.tsx

@@ -663,23 +663,7 @@ export const exportFlowTranslationsWithErrors = {
   },
 };
 
-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' });
-  }
-
+export const copyFlowQuery = (input: any) => {
   return {
     request: {
       query: CREATE_FLOW_COPY,