Added warning if flow is not published

src/components/floweditor/FlowEditor.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
@@ -15,6 +15,7 @@
   resetFlowCount,
   getFlowTranslations,
   getTemplateFlow,
+  unsavedFlow,
 } from 'mocks/Flow';
 import { conversationQuery } from 'mocks/Chat';
 import {
@@ -29,20 +30,19 @@
 
 window.location = { assign: vi.fn() } as any;
 
-vi.mock('react-router-dom', async () => {
-  return {
-    ...(await vi.importActual<any>('react-router-dom')),
-    useParams: () => ({ uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676' }),
-  };
-});
-
 vi.mock('axios');
 const mockedAxios = axios as any;
 
 vi.mock('../simulator/Simulator', () => ({
   default: ({ message }: { message: string }) => <div data-testid="simulator">{message}</div>, // Mocking the component's behavior
 }));
 
+const mockedUsedNavigate = vi.fn();
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
 const mocks = [
   messageReceivedSubscription({ organizationId: null }),
   messageSendSubscription({ organizationId: null }),
@@ -60,16 +60,19 @@
   getFlowTranslations,
 ];
 
-const activeFlowMocks = [...mocks, getActiveFlow];
+const activeFlowMocks = [...mocks, getActiveFlow, getActiveFlow];
 const inActiveFlowMocks = [...mocks, getInactiveFlow];
 const noKeywordMocks = [...mocks, getFlowWithoutKeyword, resetFlowCount];
 const templateFlowMocks = [...mocks, getTemplateFlow, resetFlowCount];
+const flowWithUnsavedChanges = [...mocks, unsavedFlow, unsavedFlow];
 
-const wrapperFunction = (mocks: any) => (
+const wrapperFunction = (mocks: any, uuid: string = 'b050c652-65b5-4ccf-b62b-1e8b3f328676') => (
   <MockedProvider mocks={mocks} addTypename={false}>
-    <Router>
-      <FlowEditor />
-    </Router>
+    <MemoryRouter initialEntries={[`/flow/configure/${uuid}`]}>
+      <Routes>
+        <Route path="flow/configure/:uuid" element={<FlowEditor />} />
+      </Routes>
+    </MemoryRouter>
   </MockedProvider>
 );
 
@@ -95,6 +98,12 @@
   await waitFor(() => {
     expect(getByTestId('back-button')).toBeInTheDocument();
   });
+
+  fireEvent.click(getByTestId('back-button'));
+
+  await waitFor(() => {
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+  });
 });
 
 test('it should display name of the flow', async () => {
@@ -220,7 +229,7 @@
   });
   fireEvent.click(screen.getByTestId('previewButton'));
   await waitFor(() => {
     expect(screen.findByTestId('beneficiaryName'));
   });
 
   await waitFor(() => {
@@ -313,4 +322,25 @@
   await waitFor(() => {
     expect(screen.getByTestId('simulator')).toHaveTextContent('template:help workflow');
   });
+
+  fireEvent.click(screen.getByTestId('back-button'));
+
+  await waitFor(() => {
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+  });
+});
+
+test('if flow is not published it should show warning', async () => {
+  const { getByTestId } = render(wrapperFunction(flowWithUnsavedChanges, '63397051-789d-418d-9388-2ef7eb1268bb'));
+
+  await waitFor(() => {
+    expect(getByTestId('back-button')).toBeInTheDocument();
+  });
+
+  fireEvent.click(getByTestId('back-button'));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('dialogBox')).toBeInTheDocument();
+  });
+  fireEvent.click(getByTestId('cancel-button'));
 });

src/components/floweditor/FlowEditor.tsx

@@ -31,7 +31,7 @@ export const FlowEditor = () => {
   const params = useParams();
   const { uuid } = params;
   const navigate = useNavigate();
-  const [publishDialog, setPublishDialog] = useState(false);
+  const [publishDialog, setPublishDialog] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [flowEditorLoaded, setFlowEditorLoaded] = useState(false);
   const [flowId, setFlowId] = useState();
@@ -127,7 +127,7 @@ export const FlowEditor = () => {
     },
   });
 
-  const { data: flowName } = useQuery(GET_FLOW_DETAILS, {
+  const { data: flowData, refetch } = useQuery(GET_FLOW_DETAILS, {
     fetchPolicy: 'network-only',
     variables: {
       filter: {
@@ -138,15 +138,15 @@ export const FlowEditor = () => {
   });
 
   useEffect(() => {
-    if (flowName && flowName.flows.length > 0) {
-      setFlowId(flowName.flows[0].id);
-      setIsTemplate(flowName.flows[0].isTemplate);
+    if (flowData && flowData.flows.length > 0) {
+      setFlowId(flowData.flows[0].id);
+      setIsTemplate(flowData.flows[0].isTemplate);
     }
-  }, [flowName]);
+  }, [flowData]);
 
-  if (flowName && flowName.flows.length > 0) {
-    flowTitle = flowName.flows[0].name;
-    flowKeywords = flowName.flows[0].keywords.join(', ');
+  if (flowData && flowData.flows.length > 0) {
+    flowTitle = flowData.flows[0].name;
+    flowKeywords = flowData.flows[0].keywords.join(', ');
   }
 
   const handleResetFlowCount = () => {
@@ -167,31 +167,25 @@ export const FlowEditor = () => {
         additionalTitleStyles={styles.DialogTitle}
       >
         <div className={styles.DialogContent}>
-          Please be careful, this cannot be undone. Once you reset the flow counts you will lose
-          tracking of how many times a node was triggered for users.
+          Please be careful, this cannot be undone. Once you reset the flow counts you will lose tracking of how many
+          times a node was triggered for users.
         </div>
       </DialogBox>
     );
   }
 
   if (showTranslateFlowModal) {
-    modal = (
-      <FlowTranslation
-        loadFlowEditor={loadFlowEditor}
-        flowId={flowId}
-        setDialog={setShowTranslateFlowModal}
-      />
-    );
+    modal = <FlowTranslation loadFlowEditor={loadFlowEditor} flowId={flowId} setDialog={setShowTranslateFlowModal} />;
   }
 
   useEffect(() => {
-    if (flowName) {
+    if (flowData) {
       document.title = flowTitle;
     }
     return () => {
       document.title = APP_NAME;
     };
-  }, [flowName]);
+  }, [flowData]);
 
   useEffect(() => {
     if (flowId) {
@@ -234,7 +228,7 @@ export const FlowEditor = () => {
   };
 
   const handleCancelFlow = () => {
-    setPublishDialog(false);
+    setPublishDialog(null);
     setIsError(false);
     setFlowValidation('');
   };
@@ -267,8 +261,7 @@ export const FlowEditor = () => {
         }}
       >
         <p className={styles.DialogDescription}>
-          You can either go back and edit it later or <br /> &lsquo;Take Over&rsquo; this flow to
-          start editing now.
+          You can either go back and edit it later or <br /> &lsquo;Take Over&rsquo; this flow to start editing now.
         </p>
       </DialogBox>
     );
@@ -277,7 +270,7 @@ export const FlowEditor = () => {
   if (publishDialog) {
     dialog = (
       <DialogBox
-        title="Ready to publish?"
+        title={publishDialog === 'publish' ? 'Publish flow' : 'Unsaved changes.'}
         buttonOk="Publish & stay"
         titleAlign="center"
         buttonOkLoading={publishLoading}
@@ -296,7 +289,11 @@ export const FlowEditor = () => {
         buttonCancel="Cancel"
         additionalTitleStyles={styles.PublishDialogTitle}
       >
-        <p className={styles.DialogDescription}>New changes will be activated for the users</p>
+        <p className={styles.DialogDescription}>
+          {publishDialog === 'publish'
+            ? 'New changes will be activated for the users'
+            : 'You have unsaved changes. Do you want to publish the flow before exiting?'}
+        </p>
       </DialogBox>
     );
   }
@@ -307,7 +304,7 @@ export const FlowEditor = () => {
         title="Errors were detected in the flow. Would you like to continue modifying?"
         buttonOk="Publish"
         handleOk={() => {
-          setPublishDialog(false);
+          setPublishDialog(null);
           setIsError(false);
           setPublished(true);
         }}
@@ -325,12 +322,12 @@ export const FlowEditor = () => {
     if (!stayOnPublish) {
       return <Navigate to="/flow" />;
     }
-    setPublishDialog(false);
+    setPublishDialog(null);
     setPublished(false);
   }
 
   const getFlowKeyword = () => {
-    const flows = flowName ? flowName.flows : null;
+    const flows = flowData ? flowData.flows : null;
     if (flows && flows.length > 0) {
       const { isActive, keywords, isTemplate, name } = flows[0];
       if (isTemplate) {
@@ -345,20 +342,32 @@ export const FlowEditor = () => {
     }
   };
 
+  const handleBack = async () => {
+    if (isTemplate) {
+      navigate('/flow?isTemplate=true');
+      return;
+    }
+
+    refetch().then(({ data }) => {
+      const isFlowPublished = data.flows[0].lastChangedAt === null;
+      if (isFlowPublished) {
+        navigate('/flow');
+      } else {
+        setPublishDialog('unsaved');
+      }
+    });
+  };
+
   return (
     <>
       {exportFlowloading && <BackdropLoader />}
       {dialog}
       <div className={styles.Header}>
         <div className={styles.Title}>
-          <BackIconFlow
-            onClick={() => (isTemplate ? navigate('/flow?isTemplate=true') : navigate('/flow'))}
-            className={styles.BackIcon}
-            data-testid="back-button"
-          />
+          <BackIconFlow onClick={handleBack} className={styles.BackIcon} data-testid="back-button" />
           <div>
             <Typography variant="h6" data-testid="flowName">
-              {flowName ? flowTitle : 'Flow'}
+              {flowData ? flowTitle : 'Flow'}
             </Typography>
             <div>{flowKeywords}</div>
           </div>
@@ -436,7 +445,7 @@ export const FlowEditor = () => {
             color="primary"
             data-testid="button"
             disabled={isTemplate}
-            onClick={() => setPublishDialog(true)}
+            onClick={() => setPublishDialog('publish')}
           >
             <PublishIcon className={styles.Icon} />
             Publish
@@ -445,12 +454,7 @@ export const FlowEditor = () => {
       </div>
 
       {showSimulator && (
-        <Simulator
-          setShowSimulator={setShowSimulator}
-          hasResetButton
-          flowSimulator
-          message={getFlowKeyword()}
-        />
+        <Simulator setShowSimulator={setShowSimulator} hasResetButton flowSimulator message={getFlowKeyword()} />
       )}
       {modal}
       <div className={styles.FlowContainer}>

src/graphql/queries/Flow.ts

@@ -77,6 +77,8 @@ export const GET_FLOW_DETAILS = gql`
       name
       keywords
       isTemplate
+      lastPublishedAt
+      lastChangedAt
     }
   }
 `;

src/mocks/Flow.tsx

@@ -268,12 +268,12 @@ export const filterFlowWithNameOrKeywordOrTagQuery = {
   },
 };
 
-const getFlowDetails = (isActive = true, keywords = ['help'], isTemplate = false) => ({
+const getFlowDetails = (data?: any, uuid: string = 'b050c652-65b5-4ccf-b62b-1e8b3f328676') => ({
   request: {
     query: GET_FLOW_DETAILS,
     variables: {
       filter: {
-        uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676',
+        uuid,
       },
       opts: {},
     },
@@ -284,20 +284,27 @@ const getFlowDetails = (isActive = true, keywords = ['help'], isTemplate = false
       flows: [
         {
           id: '1',
-          isActive,
           name: 'help workflow',
-          keywords,
-          isTemplate,
+          isActive: true,
+          keywords: ['keyword'],
+          isTemplate: false,
+          lastPublishedAt: '2021-03-05T04:32:23Z',
+          lastChangedAt: null,
+          ...data,
         },
       ],
     },
   },
 });
 
-export const getActiveFlow = getFlowDetails();
-export const getInactiveFlow = getFlowDetails(false);
-export const getFlowWithoutKeyword = getFlowDetails(true, []);
-export const getTemplateFlow = getFlowDetails(true, [], true);
+export const getActiveFlow = getFlowDetails({ keywords: ['help'] });
+export const getInactiveFlow = getFlowDetails({ isActive: false });
+export const getFlowWithoutKeyword = getFlowDetails({ isActive: true, keywords: [] });
+export const getTemplateFlow = getFlowDetails({ isActive: true, keywords: [], isTemplate: true });
+export const unsavedFlow = getFlowDetails(
+  { lastChangedAt: '2021-04-05T04:32:23Z' },
+  '63397051-789d-418d-9388-2ef7eb1268bb'
+);
 
 export const getFlowCountQuery = (filter: any) => ({
   request: {