Merge tag 'v1.14.3' into update/v1.14.3

v1.14.3

Author: jcbalmeida

CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.14.3](https://github.com/nyaruka/floweditor/compare/v1.14.1...v1.14.3)
+
+> 20 September 2021
+
+- Let components control how new objects are created [`#1013`](https://github.com/nyaruka/floweditor/pull/1013)
+- Use topic rather than subject for open ticket events in simulator [`#1012`](https://github.com/nyaruka/floweditor/pull/1012)
+- Bump axios from 0.21.1 to 0.21.2 [`#1011`](https://github.com/nyaruka/floweditor/pull/1011)
+- Change topic to be an object rather than string [`521994f`](https://github.com/nyaruka/floweditor/commit/521994f536a45618c7adf7cfd2b5cc6adeed2d9e)
+
+#### [v1.14.1](https://github.com/nyaruka/floweditor/compare/v1.14.0...v1.14.1)
+
+> 15 September 2021
+
+- Topic and assignee [`#1010`](https://github.com/nyaruka/floweditor/pull/1010)
+- Include latest translations from transifex [`#1006`](https://github.com/nyaruka/floweditor/pull/1006)
+- Add topic and assignee to open ticket action [`f3f6274`](https://github.com/nyaruka/floweditor/commit/f3f6274e0169de45d81e302be899b7010b289f5e)
+- Update snapshots [`07a9bef`](https://github.com/nyaruka/floweditor/commit/07a9befef7699da7d41f235ddee31e44bb475899)
+- Update snapshots [`95de60a`](https://github.com/nyaruka/floweditor/commit/95de60a6b89860baf573858a5e02995d4e3c2230)
+
 #### [v1.14.0](https://github.com/nyaruka/floweditor/compare/v1.13.19...v1.14.0)
 
 > 14 July 2021

lambda/topics.js

@@ -0,0 +1,29 @@
+import { v4 as generateUUID } from 'uuid';
+
+import { respond } from './utils/index.js';
+const topics = {
+  next: null,
+  previous: null,
+  results: [
+    {
+      uuid: '6f38eba0-d673-4a35-82df-21bae2b6d466',
+      name: 'General',
+      created_on: '2021-09-01T01:06:39.178493Z'
+    }
+  ]
+};
+
+exports.handler = (request, context, callback) => {
+  if (request.httpMethod === 'POST') {
+    const body = JSON.parse(request.body);
+    respond(callback, {
+      uuid: generateUUID(),
+      name: body.name,
+      query: null,
+      status: 'ready',
+      count: 0
+    });
+  } else {
+    respond(callback, topics);
+  }
+};

lambda/users.js

@@ -0,0 +1,45 @@
+import { v4 as generateUUID } from 'uuid';
+
+import { respond } from './utils/index.js';
+const users = {
+  next: null,
+  previous: null,
+  results: [
+    {
+      email: '[email protected]',
+      first_name: 'Agent',
+      last_name: 'User',
+      role: 'agent',
+      created_on: '2021-06-10T21:44:30.971221Z'
+    },
+    {
+      email: '[email protected]',
+      first_name: 'Viewer',
+      last_name: 'User',
+      role: 'viewer',
+      created_on: '2020-11-09T23:02:10.095493Z'
+    },
+    {
+      email: '[email protected]',
+      first_name: 'Admin',
+      last_name: 'User',
+      role: 'administrator',
+      created_on: '2020-08-18T19:07:08.984182Z'
+    }
+  ]
+};
+
+exports.handler = (request, context, callback) => {
+  if (request.httpMethod === 'POST') {
+    const body = JSON.parse(request.body);
+    respond(callback, {
+      uuid: generateUUID(),
+      name: body.name,
+      query: null,
+      status: 'ready',
+      count: 0
+    });
+  } else {
+    respond(callback, users);
+  }
+};

package.json

@@ -2,7 +2,7 @@
   "name": "@nyaruka/flow-editor",
   "license": "AGPL-3.0",
   "repository": "git://github.com/nyaruka/floweditor.git",
-  "version": "1.14.0",
+  "version": "1.14.3",
   "description": "'Standalone flow editing tool designed for use within the RapidPro suite of messaging tools but can be adopted for use outside of that ecosystem.'",
   "browser": "umd/flow-editor.min.js",
   "unpkg": "umd/flow-editor.min.js",
@@ -70,7 +70,7 @@
     "@babel/core": "^7.4.4",
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "7.0.0",
-    "@nyaruka/temba-components": "0.11.13",
+    "@nyaruka/temba-components": "0.16.1",
     "@testing-library/jest-dom": "4.0.0",
     "@testing-library/react": "8.0.1",
     "@types/common-tags": "^1.8.0",
@@ -96,7 +96,7 @@
     "array-move": "2.1.0",
     "auto-bind": "2.1.0",
     "auto-changelog": "1.13.0",
-    "axios": "0.21.1",
+    "axios": "0.21.2",
     "camelcase": "^5.3.1",
     "classnames": "2.2.6",
     "common-tags": "1.8.0",

src/components/__snapshots__/index.test.ts.snap

@@ -23,6 +23,8 @@ Array [
     "simulateStart": "",
     "templates": "/assets/templates.json",
     "ticketers": "/assets/ticketers.json",
+    "topics": "/assets/topics.json",
+    "users": "/assets/users.json",
   },
   "a4f64f1b-85bc-477e-b706-de313a022979",
   undefined,

src/components/flow/actions/openticket/OpenTicket.tsx

@@ -3,13 +3,13 @@ import { OpenTicket } from 'flowTypes';
 import { fakePropType } from 'config/ConfigProvider';
 
 const OpenTicketComp: React.SFC<OpenTicket> = (
-  { ticketer, subject },
+  { ticketer, subject, topic },
   context: any
 ): JSX.Element => {
   const showTicketer = ticketer.name.indexOf(context.config.brand) === -1;
   return (
     <div>
-      <div>{subject}</div>
+      <div>{subject ? subject : topic ? topic.name : null}</div>
       {showTicketer ? (
         <div style={{ fontSize: '80%' }}>
           Using <span style={{ fontWeight: 400 }}>{ticketer.name}</span>

src/components/flow/routers/ticket/TicketRouterForm.test.tsx

@@ -9,6 +9,7 @@ import { render, fireEvent, fireChangeText, fireTembaSelect } from 'test/utils';
 
 mock(utils, 'createUUID', utils.seededUUIDs());
 
+// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
 const ticketForm = getRouterFormProps({
   node: createOpenTicketNode('Need help', 'Where are my cookies'),
   ui: { type: Types.split_by_ticket }
@@ -30,17 +31,28 @@ describe(TicketRouterForm.name, () => {
       expect(baseElement).toMatchSnapshot();
 
       const okButton = getByText('Ok');
-      const subject = getByTestId('Subject');
       const resultName = getByTestId('Result Name');
 
-      // our ticketer, subject, body and result name are required
-      fireChangeText(subject, '');
+      // our ticketer, body and result name are required
       fireChangeText(resultName, '');
       fireEvent.click(okButton);
       expect(ticketForm.updateRouter).not.toBeCalled();
 
-      // set our subject and result name
-      fireChangeText(subject, 'Need help');
+      // we need a topic
+      fireTembaSelect(getByTestId('temba_select_assignee'), {
+        email: '[email protected]',
+        first_name: 'Agent',
+        last_name: 'User',
+        role: 'agent',
+        created_on: '2021-06-10T21:44:30.971221Z'
+      });
+
+      // we need a topic
+      fireTembaSelect(getByTestId('temba_select_topic'), {
+        name: 'General',
+        uuid: '6f38eba0-d673-4a35-82df-21bae2b6d466'
+      });
+
       fireChangeText(resultName, 'My Ticket Result');
 
       fireEvent.click(okButton);

src/components/flow/routers/ticket/TicketRouterForm.tsx

@@ -19,8 +19,13 @@ import { Asset } from 'store/flowContext';
 import styles from './TicketRouterForm.module.scss';
 import i18n from 'config/i18n';
 import TextInputElement from 'components/form/textinput/TextInputElement';
+import TembaSelect from 'temba/TembaSelect';
+import { fakePropType } from 'config/ConfigProvider';
+import { Topic, User } from 'flowTypes';
 
 export interface TicketRouterFormState extends FormState {
+  assignee: FormEntry;
+  topic: FormEntry;
   ticketer: FormEntry;
   subject: StringEntry;
   body: StringEntry;
@@ -31,6 +36,10 @@ export default class TicketRouterForm extends React.Component<
   RouterFormProps,
   TicketRouterFormState
 > {
+  public static contextTypes = {
+    config: fakePropType
+  };
+
   constructor(props: RouterFormProps) {
     super(props);
 
@@ -45,6 +54,8 @@ export default class TicketRouterForm extends React.Component<
   }
   private handleUpdate(
     keys: {
+      assignee?: User;
+      topic?: Topic;
       ticketer?: Asset;
       subject?: string;
       body?: string;
@@ -54,16 +65,26 @@ export default class TicketRouterForm extends React.Component<
   ): boolean {
     const updates: Partial<TicketRouterFormState> = {};
 
+    if (keys.hasOwnProperty('assignee')) {
+      updates.assignee = validate(i18n.t('forms.assignee', 'Assignee'), keys.assignee, [
+        shouldRequireIf(submitting)
+      ]);
+    }
+
+    if (keys.hasOwnProperty('topic')) {
+      updates.topic = validate(i18n.t('forms.topic', 'Topic'), keys.topic, [
+        shouldRequireIf(submitting)
+      ]);
+    }
+
     if (keys.hasOwnProperty('ticketer')) {
       updates.ticketer = validate(i18n.t('forms.ticketer', 'Ticketer'), keys.ticketer, [
         shouldRequireIf(submitting)
       ]);
     }
 
     if (keys.hasOwnProperty('subject')) {
-      updates.subject = validate(i18n.t('forms.subject', 'Subject'), keys.subject, [
-        shouldRequireIf(submitting)
-      ]);
+      updates.subject = validate(i18n.t('forms.subject', 'Subject'), keys.subject, []);
     }
 
     if (keys.hasOwnProperty('body')) {
@@ -89,6 +110,14 @@ export default class TicketRouterForm extends React.Component<
     this.handleUpdate({ ticketer: selected[0] });
   }
 
+  private handleAssigneeUpdate(assignee: User): void {
+    this.handleUpdate({ assignee });
+  }
+
+  private handleTopicUpdate(topic: Topic): void {
+    this.handleUpdate({ topic });
+  }
+
   private handleSubjectUpdate(subject: string, name: string, submitting = false): boolean {
     return this.handleUpdate({ subject }, submitting);
   }
@@ -165,14 +194,37 @@ export default class TicketRouterForm extends React.Component<
           ''
         )}
 
-        <div className={styles.subject}>
-          <TextInputElement
-            name={i18n.t('forms.subject', 'Subject')}
-            placeholder={i18n.t('forms.enter_a_subject', 'Enter a subject')}
-            entry={this.state.subject}
-            onChange={this.handleSubjectUpdate}
-            autocomplete={true}
-          />
+        <div style={{ display: 'flex', width: '100%', marginTop: '0.5em' }}>
+          <div style={{ flexBasis: 250 }}>
+            <TembaSelect
+              key="select_topic"
+              name={i18n.t('forms.topic', 'Topic')}
+              endpoint={this.context.config.endpoints.topics}
+              onChange={this.handleTopicUpdate}
+              value={this.state.topic.value}
+              createPrefix={i18n.t('forms.topic_prefix', 'Create Topic: ')}
+              searchable={true}
+            />
+          </div>
+
+          <div style={{ flexGrow: 1, marginLeft: '0.5em' }}>
+            <TembaSelect
+              key="select_assignee"
+              name={i18n.t('forms.assignee', 'Assignee')}
+              placeholder="Assign to (Optional)"
+              valueKey="email"
+              endpoint={this.context.config.endpoints.users}
+              onChange={this.handleAssigneeUpdate}
+              clearable={true}
+              value={this.state.assignee.value}
+              getName={(user: User) => {
+                if (!user.first_name && !user.last_name) {
+                  return user.email || '';
+                }
+                return `${user.first_name} ${user.last_name}`;
+              }}
+            />
+          </div>
         </div>
         <div className={styles.body}>
           <TextInputElement