feat: support custom event type in EmitEvent Action (#2435)

* add emit event ui plugin

* use emit event plugin in client

* make dropdown same width as menu

* turn on autoComplete

* add adaptive form to emit-event dependencies

Composer/packages/client/package.json

@@ -21,6 +21,7 @@
     "@bfc/extension": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
+    "@bfc/ui-plugin-emit-event": "*",
     "@bfc/ui-plugin-expressions": "*",
     "@bfc/ui-plugin-json": "*",
     "@bfc/ui-plugin-lg": "*",

Composer/packages/client/src/extension-container/plugins.ts

@@ -6,5 +6,6 @@ import prompts from '@bfc/ui-plugin-prompts';
 import selectDialog from '@bfc/ui-plugin-select-dialog';
 import lg from '@bfc/ui-plugin-lg';
 import lu from '@bfc/ui-plugin-luis';
+import emitEvent from '@bfc/ui-plugin-emit-event';
 
-export default [json, prompts, selectDialog, lg, lu, expressions];
+export default [json, prompts, selectDialog, lg, lu, expressions, emitEvent];

Composer/packages/extensions/adaptive-form/src/components/fields/SelectField.tsx

@@ -32,7 +32,6 @@ export const SelectField: React.FC<FieldProps<string | number>> = function Selec
         responsiveMode={ResponsiveMode.large}
         selectedKey={value}
         styles={{
-          label: { fontSize: '10px', fontWeight: '400' },
           errorMessage: { display: 'none' },
         }}
         onBlur={() => onBlur && onBlur(id, value)}

Composer/packages/ui-plugins/emit-event/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['../../../.eslintrc.react.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};

Composer/packages/ui-plugins/emit-event/.gitignore

@@ -0,0 +1 @@
+lib

Composer/packages/ui-plugins/emit-event/jest.config.js

@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+module.exports = {
+  displayName: 'ui-plugin/emit-event',
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    // use commonjs modules for test so they do not need to be compiled
+    'office-ui-fabric-react/lib/(.*)$': 'office-ui-fabric-react/lib-commonjs/$1',
+    '@uifabric/fluent-theme/lib/(.*)$': '@uifabric/fluent-theme/lib-commonjs/$1',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: path.resolve(__dirname, './tsconfig.json'),
+      diagnostics: false,
+    },
+  },
+};

Composer/packages/ui-plugins/emit-event/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@bfc/ui-plugin-emit-event",
+  "version": "0.0.0",
+  "private": true,
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "tsc --build ./tsconfig.build.json",
+    "lint": "eslint --quiet --ext .ts,.tsx src"
+  },
+  "keywords": [
+    "botframework",
+    "composer"
+  ],
+  "author": "andy.brown@microsoft.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
+    "react": "16.13.0",
+    "react-dom": "16.13.0"
+  },
+  "dependencies": {
+  }
+}

Composer/packages/ui-plugins/emit-event/src/EventNameField.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import { FieldLabel } from '@bfc/adaptive-form';
+import { ComboBox, IComboBox, IComboBoxOption } from 'office-ui-fabric-react/lib/ComboBox';
+import formatMessage from 'format-message';
+
+const EventNameField: React.FC<FieldProps<string>> = props => {
+  const { enumOptions, value, description, id, label, uiOptions, onChange, error } = props;
+
+  const options: IComboBoxOption[] = (enumOptions ?? []).map(o => ({
+    key: o?.toString(),
+    text: o?.toString(),
+  }));
+
+  const handleChange = (e: React.FormEvent<IComboBox>, option?: IComboBoxOption, index?: number, value?: string) => {
+    if (option) {
+      onChange(option.key as string);
+    } else if (value) {
+      onChange(value);
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  return (
+    <>
+      <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
+      <ComboBox
+        id={id}
+        text={value}
+        options={options}
+        placeholder={formatMessage('Select event type or type a custom one')}
+        allowFreeform
+        autoComplete="on"
+        onChange={handleChange}
+        errorMessage={error as string}
+        useComboBoxAsMenuWidth
+        styles={{
+          errorMessage: { display: 'none' },
+        }}
+      />
+    </>
+  );
+};
+
+export { EventNameField };

Composer/packages/ui-plugins/emit-event/src/index.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { PluginConfig } from '@bfc/extension';
+import { SDKTypes } from '@bfc/shared';
+
+import { EventNameField } from './EventNameField';
+
+const config: PluginConfig = {
+  uiSchema: {
+    [SDKTypes.EmitEvent]: {
+      properties: {
+        eventName: {
+          field: EventNameField,
+        },
+      },
+    },
+  },
+};
+
+export default config;

Composer/packages/ui-plugins/emit-event/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/__tests__/**"]
+}

Composer/packages/ui-plugins/emit-event/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./lib/",
+  },
+  "include": ["src"]
+}

Composer/packages/ui-plugins/example/package.json

@@ -16,7 +16,9 @@
   "author": "andy.brown@microsoft.com",
   "license": "MIT",
   "peerDependencies": {
+    "@bfc/adaptive-form": "*",
     "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27",
     "@uifabric/fluent-theme": "^7.1.4",
     "@uifabric/icons": "^7.3.0",
     "@uifabric/styling": "^7.7.4",
@@ -25,13 +27,14 @@
     "react-dom": "16.13.0"
   },
   "devDependencies": {
+    "@bfc/adaptive-form": "*",
+    "@bfc/extension": "*",
+    "@emotion/core": "^10.0.27",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
     "react": "16.13.0",
     "react-dom": "16.13.0"
   },
   "dependencies": {
-    "@bfc/extension": "*",
-    "@emotion/core": "^10.0.27"
   }
 }