Merge pull request #488 from glific/flow-change

Flows now fetching and publishing through uuid

.env.example

@@ -2,3 +2,4 @@ REACT_APP_GLIFIC_API="http://glific.test:4000/api"
 REACT_APP_WEB_SOCKET="ws://glific.test:4000/socket"
 SENTRY_DSN=""
 REACT_APP_FLOW_EDITOR_API="http://glific.test:4000/flow-editor/"
+REACT_APP_FLOW_EDITOR_CONFIGURE="http://glific.test:3000/automation/configure"

src/common/constants.ts

@@ -8,6 +8,7 @@ export const REACT_APP_GLIFIC_AUTHENTICATION_API =
 export const USER_SESSION = process.env.REACT_APP_GLIFIC_API + '/v1/session';
 export const RESET_PASSWORD = process.env.REACT_APP_GLIFIC_API + '/v1/registration/reset-password';
 export const RENEW_TOKEN = USER_SESSION + '/renew';
+export const FLOW_EDITOR_CONFIGURE_LINK = process.env.REACT_APP_FLOW_EDITOR_CONFIGURE;
 
 // const enums
 // provider status against the contact

src/components/floweditor/FlowEditor.module.css

@@ -0,0 +1,19 @@
+.Button {
+  position: fixed !important;
+  bottom: 20px;
+  right: 15px;
+  z-index: 1000;
+}
+
+.Link {
+  text-decoration: none;
+}
+
+.HelpIcon {
+  position: fixed !important;
+  bottom: 25px;
+  right: 110px;
+  z-index: 1000;
+  width: 28px !important;
+  height: 28px;
+}

src/components/floweditor/FlowEditor.test.tsx

@@ -1,9 +1,26 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { FlowEditor } from './FlowEditor';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
 
-const wrapper = mount(<FlowEditor uuid="d3223dvfdfddffdknf" />);
+const wrapper = mount(
+  <MockedProvider addTypename={false}>
+    <MemoryRouter>
+      <FlowEditor match={{ params: { uuid: 'd3223dvfdfddffdknf' } }} />
+    </MemoryRouter>
+  </MockedProvider>
+);
 
 test('it should display the flowEditor', () => {
   expect(wrapper.find('#flow').exists()).toBe(true);
 });
+
+test('it should have a done button that redirects to automation page', () => {
+  expect(wrapper.find('[data-testid="button"]').exists()).toBe(true);
+});
+
+test('it should have a help button that redirects to help page', () => {
+  expect(wrapper.find('[data-testid="helpButton"]').exists()).toBe(true);
+  wrapper.unmount();
+});

src/components/floweditor/FlowEditor.tsx

@@ -1,7 +1,15 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { FLOW_EDITOR_API } from '../../config/index';
 
+import { useMutation } from '@apollo/client';
+import styles from './FlowEditor.module.css';
+import { ReactComponent as HelpIcon } from '../../assets/images/icons/Help.svg';
+import { Button } from '../UI/Form/Button/Button';
+import { PUBLISH_AUTOMATION } from '../../graphql/mutations/Automation';
+import { Redirect } from 'react-router';
+import { FLOW_EDITOR_CONFIGURE_LINK } from '../../common/constants';
+
 import * as Manifest from '@nyaruka/flow-editor/build/asset-manifest.json';
 
 declare function showFlowEditor(node: any, config: any): void;
@@ -62,9 +70,9 @@ const setConfig = (uuid: any) => {
       'split_by_run_result',
       'split_by_random',
       'split_by_groups',
-      'split_by_scheme'
+      'split_by_scheme',
     ],
-    
+
     excludeOperators: [
       'has_beginning',
       'has_text',
@@ -96,7 +104,7 @@ const setConfig = (uuid: any) => {
       'has_ward',
       'has_error',
       'has_value',
-      'has_pattern'
+      'has_pattern',
     ],
     help: {
       legacy_extra: 'help.html',
@@ -123,17 +131,19 @@ const setConfig = (uuid: any) => {
       flows: base_glific + 'flows',
       revisions: base_glific + 'revisions/' + uuid,
       functions: base_glific + 'functions',
-      editor: '/',
+      editor: FLOW_EDITOR_CONFIGURE_LINK,
     },
   };
 };
 
 export interface FlowEditorProps {
-  uuid: string;
+  match: any;
 }
 
 export const FlowEditor = (props: FlowEditorProps) => {
-  const config = setConfig(props.uuid);
+  const config = setConfig(props.match.params.uuid);
+  const [publishFlow] = useMutation(PUBLISH_AUTOMATION);
+  const [published, setPublished] = useState(false);
 
   useEffect(() => {
     const files = loadfiles();
@@ -153,5 +163,36 @@ export const FlowEditor = (props: FlowEditorProps) => {
     }
   }, []);
 
-  return <div id="flow"></div>;
+  const handlePublishFlow = () => {
+    publishFlow({ variables: { uuid: props.match.params.uuid } });
+    setPublished(true);
+  };
+
+  if (published) {
+    return <Redirect to="/automation" />;
+  }
+
+  return (
+    <>
+      <a
+        href="https://app.rapidpro.io/video/"
+        className={styles.Link}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-testid="helpButton"
+      >
+        <HelpIcon className={styles.HelpIcon} />
+      </a>
+      <Button
+        variant="contained"
+        color="primary"
+        className={styles.Button}
+        data-testid="button"
+        onClick={handlePublishFlow}
+      >
+        Done
+      </Button>
+      <div id="flow"></div>
+    </>
+  );
 };

src/containers/Automation/Automation.tsx

@@ -158,7 +158,7 @@ export const Automation: React.SFC<AutomationProps> = ({ match }) => {
       formFields={formFields}
       redirectionLink="automation"
       cancelLink="automation"
-      linkParameter="id"
+      linkParameter="uuid"
       listItem="flow"
       icon={automationIcon}
       additionalAction={additionalAction}

src/containers/Automation/AutomationList/AutomationList.tsx

@@ -32,7 +32,7 @@ const columnAttributes = {
 };
 const configureIcon = <ConfigureIcon></ConfigureIcon>;
 
-const additionalAction = { icon: configureIcon, parameter: 'id', link: '/automation/configure' };
+const additionalAction = { icon: configureIcon, parameter: 'uuid', link: '/automation/configure' };
 
 export const AutomationList: React.SFC<AutomationListProps> = (props) => (
   <List

src/graphql/mutations/Automation.ts

@@ -43,8 +43,8 @@ export const UPDATE_AUTOMATION = gql`
 `;
 
 export const PUBLISH_AUTOMATION = gql`
-  mutation publishFlow($id: ID!) {
-    publishFlow(id: $id) {
+  mutation publishFlow($uuid: UUID!) {
+    publishFlow(uuid: $uuid) {
       success
     }
   }

src/route/AuthenticatedRoute/AuthenticatedRoute.tsx

@@ -10,7 +10,7 @@ import { Automation } from '../../containers/Automation/Automation';
 import { GroupList } from '../../containers/Group/GroupList/GroupList';
 import { Group } from '../../containers/Group/Group';
 import { GroupContact } from '../../containers/Group/GroupContact/GroupContact';
-import { FlowEditorContainer } from '../../components/floweditor/FlowEditorContainer/FlowEditorContainer';
+import { FlowEditor } from '../../components/floweditor/FlowEditor';
 import { CollectionList } from '../../containers/Collection/CollectionList/CollectionList';
 import { Collection } from '../../containers/Collection/Collection';
 import { Chat } from '../../containers/Chat/Chat';
@@ -88,7 +88,7 @@ export const AuthenticatedRoute: React.SFC = () => {
         <Route path="/group/:id/edit" exact component={Group} />
         <Route path="/group/:id/contacts" exact component={GroupContact} />
 
-        <Route path="/automation/configure/:id" exact component={FlowEditorContainer} />
+        <Route path="/automation/configure/:uuid" exact component={FlowEditor} />
 
         <Route path="/collection" exact component={CollectionList} />
         <Route path="/collection/add" exact component={Collection} />