Merge pull request #1588 from glific/feature/flow-lock

Added functionality for Locking flows while editing

src/components/floweditor/FlowEditor.test.tsx

@@ -8,6 +8,7 @@ import {
   getFlowWithoutKeyword,
   getOrganisationServicesQuery,
   publishFlow,
+  getFreeFlow,
 } from 'mocks/Flow';
 import { conversationQuery } from 'mocks/Chat';
 import {
@@ -26,6 +27,8 @@ const mocks = [
   simulatorGetQuery,
   publishFlow,
   getOrganisationServicesQuery,
+  getFreeFlow,
+  getFreeFlow,
 ];
 
 const activeFlowMocks = [...mocks, getActiveFlow];
@@ -94,6 +97,35 @@ test('click on preview button should open simulator', async () => {
   });
 });
 
+test('check if someone else is using a flow', async () => {
+
+  // onload is not defined for script element in jest so we need to trigger it manually
+  const mockCreateElement = document.createElement.bind(document);
+  let scriptElements: any = [];
+  document.createElement = function (tags: any, options) {
+    if (tags === 'script') {
+      const mockScriptElement = mockCreateElement('script');
+      scriptElements.push(mockScriptElement);
+      return mockScriptElement;
+    } else return mockCreateElement(tags, options);
+  };
+
+  const { getByText } = render(defaultWrapper);
+  await waitFor(() => {
+    getByText('Loading...');
+  });
+
+  await waitFor(() => {
+    scriptElements[1].onload();
+  });
+
+  await waitFor(() => {
+    expect(getByText('The flow is currently being edited by someone else.')).toBeInTheDocument();
+  });
+
+  fireEvent.click(getByText('Okay'));
+});
+
 test('publish flow which has error', async () => {
   const { getByTestId } = render(defaultWrapper);
 

src/components/floweditor/FlowEditor.tsx

@@ -14,7 +14,7 @@ import { Simulator } from 'components/simulator/Simulator';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setNotification } from 'common/notification';
 import { PUBLISH_FLOW } from 'graphql/mutations/Flow';
-import { EXPORT_FLOW, GET_FLOW_DETAILS } from 'graphql/queries/Flow';
+import { EXPORT_FLOW, GET_FLOW_DETAILS, GET_FREE_FLOW } from 'graphql/queries/Flow';
 import { setAuthHeaders } from 'services/AuthService';
 import { GET_ORGANIZATION_SERVICES } from 'graphql/queries/Organization';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
@@ -167,6 +167,7 @@ export const FlowEditor = (props: FlowEditorProps) => {
   const [flowValidation, setFlowValidation] = useState<any>();
   const [IsError, setIsError] = useState(false);
   const [flowKeyword, setFlowKeyword] = useState('');
+  const [currentEditDialogBox, setCurrentEditDialogBox] = useState(false);
 
   let modal = null;
   let dialog = null;
@@ -187,6 +188,17 @@ export const FlowEditor = (props: FlowEditorProps) => {
     },
   });
 
+  const [getFreeFlow] = useLazyQuery(GET_FREE_FLOW, {
+    fetchPolicy: 'network-only',
+    onCompleted: ({ flowGet }) => {
+      if (flowGet) {
+        getOrganizationServices();
+      } else {
+        setCurrentEditDialogBox(true);
+      }
+    },
+  });
+
   const [exportFlowMutation] = useLazyQuery(EXPORT_FLOW, {
     fetchPolicy: 'network-only',
     onCompleted: async ({ exportFlow }) => {
@@ -266,26 +278,34 @@ export const FlowEditor = (props: FlowEditorProps) => {
   }, [flowName]);
 
   useEffect(() => {
-    const { fetch, xmlSend } = setAuthHeaders();
-    const files = loadfiles(() => {
-      getOrganizationServices();
-    });
+    if (flowId) {
+      const { fetch, xmlSend } = setAuthHeaders();
+      const files = loadfiles(() => {
+        getFreeFlow({ variables: { id: flowId } });
+      });
 
-    return () => {
-      Object.keys(files).forEach((node: any) => {
-        if (files[node]) {
-          document.body.removeChild(files[node]);
+      // when switching tabs we need to check if the flow is still active for the user
+      window.onfocus = () => {
+        getFreeFlow({ variables: { id: flowId } });
+      };
+
+      return () => {
+        Object.keys(files).forEach((node: any) => {
+          if (files[node]) {
+            document.body.removeChild(files[node]);
+          }
+        });
+        // clearing all timeouts when component unmounts
+        const highestTimeoutId: any = setTimeout(() => {});
+        for (let timeoutId = 0; timeoutId < highestTimeoutId; timeoutId += 1) {
+          clearTimeout(timeoutId);
         }
-      });
-      // clearing all timeouts when component unmounts
-      const highestTimeoutId: any = setTimeout(() => {});
-      for (let timeoutId = 0; timeoutId < highestTimeoutId; timeoutId += 1) {
-        clearTimeout(timeoutId);
-      }
-      XMLHttpRequest.prototype.send = xmlSend;
-      window.fetch = fetch;
-    };
-  }, []);
+        XMLHttpRequest.prototype.send = xmlSend;
+        window.fetch = fetch;
+      };
+    }
+    return () => {};
+  }, [flowId]);
 
   const handlePublishFlow = () => {
     publishFlow({ variables: { uuid: props.match.params.uuid } });
@@ -311,6 +331,21 @@ export const FlowEditor = (props: FlowEditorProps) => {
     </div>
   );
 
+  if (currentEditDialogBox) {
+    dialog = (
+      <DialogBox
+        title="The flow is currently being edited by someone else."
+        alignButtons="center"
+        skipCancel
+        buttonOk="Okay"
+        handleOk={() => {
+          setConfirmedNavigation(true);
+          history.push('/flow');
+        }}
+      />
+    );
+  }
+
   if (publishDialog) {
     dialog = (
       <DialogBox

src/containers/Flow/FlowList/FlowList.test.tsx

@@ -11,6 +11,7 @@ import {
   getFlowQuery,
   importFlow,
   exportFlow,
+  releaseFlow,
 } from 'mocks/Flow';
 import testJSON from 'mocks/ImportFlow.json';
 import { setUserSession } from 'services/AuthService';
@@ -24,6 +25,7 @@ const mocks = [
   getFlowCountNewQuery,
   getFlowQuery,
   importFlow,
+  releaseFlow,
   exportFlow,
 ];
 

src/containers/Flow/FlowList/FlowList.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,13 @@ import { ReactComponent as ImportIcon } from 'assets/images/icons/Flow/Import.sv
 import { ReactComponent as ConfigureIcon } from 'assets/images/icons/Configure/UnselectedDark.svg';
 import { ReactComponent as ContactVariable } from 'assets/images/icons/ContactVariable.svg';
 import { ReactComponent as WebhookLogsIcon } from 'assets/images/icons/Webhook/WebhookLight.svg';
-import { FILTER_FLOW, GET_FLOWS, GET_FLOW_COUNT, EXPORT_FLOW } from 'graphql/queries/Flow';
+import {
+  FILTER_FLOW,
+  GET_FLOWS,
+  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';
 import Loading from 'components/UI/Layout/Loading/Loading';
@@ -68,6 +74,12 @@ export const FlowList: React.SFC<FlowListProps> = () => {
   const [flowName, setFlowName] = useState('');
   const [importing, setImporting] = useState(false);
 
+  const [releaseFlow] = useLazyQuery(RELEASE_FLOW);
+
+  useEffect(() => {
+    releaseFlow();
+  }, []);
+
   const [importFlow] = useMutation(IMPORT_FLOW, {
     onCompleted: (result: any) => {
       const { success } = result.importFlow;

src/graphql/queries/Flow.ts

@@ -64,3 +64,21 @@ export const EXPORT_FLOW = gql`
     }
   }
 `;
+
+export const GET_FREE_FLOW = gql`
+  query flowGet($id: ID!) {
+    flowGet(id: $id) {
+      id
+      uuid
+    }
+  }
+`;
+
+export const RELEASE_FLOW = gql`
+  query flowRelease {
+    flowRelease {
+      id
+      uuid
+    }
+  }
+`;

src/mocks/Flow.tsx

@@ -5,6 +5,8 @@ import {
   GET_FLOW_DETAILS,
   FILTER_FLOW,
   EXPORT_FLOW,
+  RELEASE_FLOW,
+  GET_FREE_FLOW,
 } from 'graphql/queries/Flow';
 import {
   ADD_FLOW_TO_CONTACT,
@@ -282,3 +284,29 @@ export const exportFlow = {
     },
   },
 };
+
+export const releaseFlow = {
+  request: {
+    query: RELEASE_FLOW,
+  },
+  result: {
+    data: {
+      flowRelease: {
+        id: '1',
+        uuid: '3fa22108-f464-41e5-81d9-d8a298854429',
+      },
+    },
+  },
+};
+
+export const getFreeFlow = {
+  request: {
+    query: GET_FREE_FLOW,
+    variables: { id: '1' },
+  },
+  result: {
+    data: {
+      flowGet: null,
+    },
+  },
+};