diff --git a/.env.example b/.env.example
index b6de917e4..f69ff18d0 100644
--- a/.env.example
+++ b/.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"
diff --git a/src/common/constants.ts b/src/common/constants.ts
index aff01394f..4cfa19c5f 100644
--- a/src/common/constants.ts
+++ b/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
diff --git a/src/components/floweditor/FlowEditor.module.css b/src/components/floweditor/FlowEditor.module.css
index e69de29bb..0167cd90f 100644
--- a/src/components/floweditor/FlowEditor.module.css
+++ b/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;
+}
diff --git a/src/components/floweditor/FlowEditor.test.tsx b/src/components/floweditor/FlowEditor.test.tsx
index 1c61956f2..ec50ea1c5 100644
--- a/src/components/floweditor/FlowEditor.test.tsx
+++ b/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();
+const wrapper = mount(
+
+
+
+
+
+);
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();
+});
diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
index a0ce2e30f..a3b257acb 100644
--- a/src/components/floweditor/FlowEditor.tsx
+++ b/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
;
+ const handlePublishFlow = () => {
+ publishFlow({ variables: { uuid: props.match.params.uuid } });
+ setPublished(true);
+ };
+
+ if (published) {
+ return ;
+ }
+
+ return (
+ <>
+
+
+
+
+
+ >
+ );
};
diff --git a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.module.css b/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.module.css
deleted file mode 100644
index 0167cd90f..000000000
--- a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.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;
-}
diff --git a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.test.tsx b/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.test.tsx
deleted file mode 100644
index b7db3ed90..000000000
--- a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.test.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { FlowEditorContainer } from './FlowEditorContainer';
-import { MemoryRouter } from 'react-router-dom';
-import { GET_AUTOMATION } from '../../../graphql/queries/Automation';
-import { MockedProvider } from '@apollo/client/testing';
-import { FlowEditor } from '../FlowEditor';
-
-const mocks = [
- {
- request: {
- query: GET_AUTOMATION,
- variables: {
- id: '1',
- },
- },
- result: {
- data: {
- flow: {
- flow: {
- id: '1',
- uuid: 'dnkdskknfknfiwee',
- },
- },
- },
- },
- },
-];
-
-const wrapper = mount(
-
-
-
-
-
-);
-
-test('it should contain the flowEditor', () => {
- expect(wrapper.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();
-});
diff --git a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.tsx b/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.tsx
deleted file mode 100644
index 5c75ac503..000000000
--- a/src/components/floweditor/FlowEditorContainer/FlowEditorContainer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
-import { GET_AUTOMATION } from '../../../graphql/queries/Automation';
-import { FlowEditor } from '../FlowEditor';
-import styles from './FlowEditorContainer.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';
-
-export interface FlowEditorContainerProps {
- match: any;
-}
-
-export const FlowEditorContainer = (props: FlowEditorContainerProps) => {
- const { data } = useQuery(GET_AUTOMATION, { variables: { id: props.match.params.id } });
- const [publishFlow] = useMutation(PUBLISH_AUTOMATION);
- const [published, setPublished] = useState(false);
- let uuid, id: any;
- if (data) {
- id = data.flow.flow.id;
- uuid = data.flow.flow.uuid;
- }
-
- const handlePublishFlow = () => {
- publishFlow({ variables: { id: id } });
- setPublished(true);
- };
-
- if (published) {
- return ;
- }
-
- return (
- <>
-
-
-
-
- {uuid ? : null};
- >
- );
-};
diff --git a/src/containers/Automation/Automation.tsx b/src/containers/Automation/Automation.tsx
index c010f8e9e..216ef2324 100644
--- a/src/containers/Automation/Automation.tsx
+++ b/src/containers/Automation/Automation.tsx
@@ -136,7 +136,7 @@ export const Automation: React.SFC = ({ match }) => {
formFields={formFields}
redirectionLink="automation"
cancelLink="automation"
- linkParameter="id"
+ linkParameter="uuid"
listItem="flow"
icon={automationIcon}
additionalAction={additionalAction}
diff --git a/src/containers/Automation/AutomationList/AutomationList.tsx b/src/containers/Automation/AutomationList/AutomationList.tsx
index fbb321f85..aafb6762b 100644
--- a/src/containers/Automation/AutomationList/AutomationList.tsx
+++ b/src/containers/Automation/AutomationList/AutomationList.tsx
@@ -32,7 +32,7 @@ const columnAttributes = {
};
const configureIcon = ;
-const additionalAction = { icon: configureIcon, parameter: 'id', link: '/automation/configure' };
+const additionalAction = { icon: configureIcon, parameter: 'uuid', link: '/automation/configure' };
export const AutomationList: React.SFC = (props) => (
{
-
+