@nyaruka/temba-components 0.120.7 → 0.121.0

package/src/store/Store.ts

@@ -18,7 +18,6 @@ import {
   KeyedAssets,
   CustomEventType,
   Workspace,
-  User,
   Shortcut
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -29,6 +28,8 @@ import { configureLocalization } from '@lit/localize';
 import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { StoreMonitorElement } from './StoreMonitorElement';
 import { getFullName } from '../user/TembaUser';
+import app, { AppState } from './AppState';
+import { StoreApi } from 'zustand/vanilla';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -36,6 +37,10 @@ const { setLocale } = configureLocalization({
   loadLocale: (locale) => import(`./locales/${locale}.js`)
 });
 
+export const getStore = () => {
+  return document.querySelector('temba-store') as Store;
+};
+
 export class Store extends RapidElement {
   public static get styles() {
     return css`
@@ -102,10 +107,8 @@ export class Store extends RapidElement {
   private groups: { [uuid: string]: ContactGroup } = {};
   private shortcuts: Shortcut[] = [];
   private languages: any = {};
-  private users: User[] = [];
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
-  private flowContents: FlowContents;
 
   // http promise to monitor for completeness
   public initialHttpComplete: Promise<void | WebResponse[]>;
@@ -146,6 +149,7 @@ export class Store extends RapidElement {
   }
 
   public reset() {
+    const appState = this.getState();
     this.ready = false;
     this.clearCache();
     this.settings = JSON.parse(getCookie('settings') || '{}');
@@ -188,6 +192,7 @@ export class Store extends RapidElement {
     }
 
     if (this.languagesEndpoint) {
+      appState.fetchAllLanguages(this.languagesEndpoint);
       fetches.push(
         getAssets(this.languagesEndpoint).then((results: any[]) => {
           // convert array of objects to lookup
@@ -214,6 +219,7 @@ export class Store extends RapidElement {
     }
 
     if (this.workspaceEndpoint) {
+      appState.fetchWorkspace(this.workspaceEndpoint);
       fetches.push(
         getUrl(this.workspaceEndpoint).then((response: WebResponse) => {
           this.workspace = response.json;
@@ -617,61 +623,20 @@ export class Store extends RapidElement {
     }
   }
 
-  // TODO: for now we let the flow editor set this externally to avoid
-  // double fetches and updates
-  public setFlowContents(contents: FlowContents) {
-    this.flowContents = contents;
-  }
-
-  public setFlowInfo(info: FlowInfo) {
-    this.flowContents.info = info;
+  public getCompletions(type: string) {
+    const info = this.getState().flow.info;
+    if (type === 'results') {
+      return info.results.map((result) => result.key);
+    } else if (type === 'locals') {
+      return info.locals;
+    }
   }
 
-  public async loadFlow(
-    flowUUID: string,
-    revision = 'latest'
-  ): Promise<FlowContents> {
-    const response = await getUrl(
-      `/flow/revisions/${flowUUID}/${revision}/?version=14.3`
-    );
-    this.flowContents = response.json;
-    return this.flowContents;
+  public getApp(): StoreApi<AppState> {
+    return app;
   }
 
-  public getFlowResults(): InfoResult[] {
-    return this.flowContents.info.results;
+  public getState(): AppState {
+    return app.getState();
   }
 }
-
-export interface InfoResult {
-  key: string;
-  name: string;
-  categories: string[];
-  node_uuids: string[];
-}
-
-export interface ObjectRef {
-  uuid: string;
-  name: string;
-}
-
-export interface TypedObjectRef extends ObjectRef {
-  type: string;
-}
-
-export interface Language {
-  code: string;
-  name: string;
-}
-
-export interface FlowInfo {
-  results: InfoResult[];
-  dependencies: TypedObjectRef[];
-  counts: { nodes: number; languages: number };
-  locals: string[];
-}
-
-export interface FlowContents {
-  definition: any;
-  info: FlowInfo;
-}

package/src/store/flow-definition.d.ts

@@ -0,0 +1,139 @@
+export type LocalizationMap = Record<string, Record<string, any>>;
+
+export type FlowTypes =
+  | 'messaging'
+  | 'messaging_background'
+  | 'messaging_offline'
+  | 'voice'
+  | '-';
+
+export type ActionType =
+  | 'execute_actions'
+  | 'add_contact_urn'
+  | 'add_contact_groups'
+  | 'add_input_labels'
+  | 'remove_contact_groups'
+  | 'set_contact_channel'
+  | 'set_contact_field'
+  | 'set_contact_name'
+  | 'set_contact_language'
+  | 'set_contact_status'
+  | 'set_run_result'
+  | 'call_classifier'
+  | 'call_resthook'
+  | 'call_webhook'
+  | 'call_llm'
+  | 'open_ticket'
+  | 'send_msg'
+  | 'send_email'
+  | 'send_broadcast'
+  | 'enter_flow'
+  | 'start_session'
+  | 'transfer_airtime'
+  | 'split_by_airtime'
+  | 'split_by_expression'
+  | 'split_by_contact_field'
+  | 'split_by_run_result'
+  | 'split_by_run_result_delimited'
+  | 'split_by_groups'
+  | 'split_by_intent'
+  | 'split_by_random'
+  | 'split_by_resthook'
+  | 'split_by_ticket'
+  | 'split_by_scheme'
+  | 'split_by_subflow'
+  | 'split_by_webhook'
+  | 'split_by_llm'
+  | 'wait_for_response'
+  | 'wait_for_menu'
+  | 'wait_for_dial'
+  | 'wait_for_digits'
+  | 'wait_for_audio'
+  | 'wait_for_video'
+  | 'wait_for_location'
+  | 'wait_for_image'
+  | 'request_optin'
+  | 'missing'
+  | 'say_msg'
+  | 'play_audio';
+
+export interface Action {
+  type: ActionType;
+  uuid: string;
+}
+
+export interface Exit {
+  uuid: string;
+  destination_uuid?: string;
+}
+
+export type Hint = {
+  type: 'digits' | 'audio' | 'image' | 'video' | 'location';
+  count?: number;
+};
+
+export interface Timeout {
+  category_uuid: string;
+  seconds: number;
+}
+
+export interface Wait {
+  type: 'msg' | 'dial';
+  timeout?: Timeout;
+  hint?: Hint;
+  phone?: string;
+  dial_limit_seconds?: number;
+  call_limit_seconds?: number;
+}
+
+export interface Category {
+  uuid: string;
+  name: string;
+  exit_uuid: string;
+}
+
+export interface Router {
+  type: 'switch' | 'random';
+  result_name?: string;
+  categories: Category[];
+  wait?: Wait;
+}
+
+export interface FlowNode {
+  uuid: string;
+  actions: Action[];
+  exits: Exit[];
+  router?: Router;
+}
+
+export interface FlowPosition {
+  left: number;
+  top: number;
+  right?: number;
+  bottom?: number;
+}
+
+export interface UINode {
+  position: FlowPosition;
+  type?: ActionType;
+  config?: Record<string, any>;
+}
+
+export interface UIMetaData {
+  nodes: Record<string, UINode>;
+  languages: Record<string, string>[];
+  translation_filters?: { categories: boolean };
+  auto_translations?: Record<string, Record<string, string[]>>;
+}
+
+export interface FlowDefinition {
+  localization: LocalizationMap;
+  language: string;
+  name: string;
+  nodes: FlowNode[];
+  uuid: string;
+  type: FlowTypes;
+  revision: number;
+  spec_version: string;
+  _ui: UIMetaData;
+}

package/test/utils.test.ts

@@ -82,7 +82,7 @@ const createJSONResponse = (mocked) => {
   return Promise.resolve(mockResponse);
 };
 
-const getResponse = (endpoint: string, options) => {
+const getResponse = (endpoint: string, options = { method: 'GET' }) => {
   // check if our path has been mocked in code
   const mocks = options.method === 'GET' ? gets : posts;
   const codeMock = mocks.find((mock) => mock.endpoint.test(endpoint));
@@ -99,7 +99,6 @@ const getResponse = (endpoint: string, options) => {
       return createJSONResponse(codeMock);
     }
   }
-
   // otherwise fetch over http
   return normalFetch(endpoint, options);
 };
@@ -262,6 +261,7 @@ export const loadStore = async () => {
       languages='/test-assets/store/languages.json'
       fields='/test-assets/store/fields.json'
       users='/test-assets/store/users.json'
+      workspace='/test-assets/store/workspace.json'
     />`
   );
   await store.initialHttpComplete;

package/test-assets/store/workspace.json

@@ -0,0 +1,14 @@
+{
+  "uuid": "3e8e7154-0233-4d53-b564-c258ee8390f9",
+  "name": "WHO Chile",
+  "country": "NG",
+  "languages": ["eng", "spa", "afr"],
+  "timezone": "PST8PDT",
+  "date_style": "day_first",
+  "anon": false,
+  "credits": {
+    "used": -1,
+    "remaining": -1
+  },
+  "primary_language": "eng"
+}

package/tsconfig.json

@@ -19,5 +19,5 @@
     "declaration": false,
     "noEmit": false,
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "setup-test.js"]
 }

package/web-dev-server.config.mjs

@@ -0,0 +1,14 @@
+import replace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
+
+const replacePlugin = fromRollup(replace);
+
+export default {
+  nodeResolve: true,
+  plugins: [
+    replacePlugin({
+      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify('development'),
+    }),
+  ],
+};

package/web-test-runner.config.mjs

@@ -11,6 +11,10 @@ import sizeOf from 'image-size';
 
 import rimraf from 'rimraf';
 
+import replace from '@rollup/plugin-replace';
+import { fromRollup } from '@web/dev-server-rollup';
+const replacePlugin = fromRollup(replace);
+
 const SCREENSHOTS = 'screenshots';
 const DIFF = 'diff';
 const TEST = 'test';
@@ -297,7 +301,7 @@ export default {
   rootDir: './',
   files: '**/test/**/*.test.ts',
   nodeResolve: true,
-
+  setupFiles: ['./test-setup.js'],
   testFramework: {
     config: {
       timeout: '10000',
@@ -305,6 +309,10 @@ export default {
   },
 
   plugins: [
+    replacePlugin({
+      preventAssignment: true,
+      'process.env.NODE_ENV': JSON.stringify('test'),
+    }),
     {
       name: 'add-style',
       transform(context) {
@@ -372,3 +380,4 @@ export default {
     }),
   ],
 };
+