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) => ( { - +