feat: support bot project's ui schema

Composer/jest.config.js

@@ -47,7 +47,6 @@ module.exports = {
     '<rootDir>/packages/server',
     '<rootDir>/packages/electron-server',
     '<rootDir>/packages/tools/language-servers/language-generation',
-    '<rootDir>/packages/ui-plugins/expressions',
     '<rootDir>/packages/ui-plugins/lg',
     '<rootDir>/packages/ui-plugins/luis',
     '<rootDir>/packages/ui-plugins/prompts',

Composer/packages/client/__tests__/plugins.test.ts

@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { mergePluginConfigs } from '../src/plugins';
+
+describe('mergePluginConfigs', () => {
+  it('merges plugin configs from left to right', () => {
+    const config1 = {
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            label: 'default label',
+          },
+        },
+      },
+    };
+    const config2 = {
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            description: 'new description',
+          },
+        },
+      },
+    };
+    const config3 = {
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            label: 'label override',
+          },
+        },
+      },
+    };
+
+    const result = mergePluginConfigs(config1, config2, config3);
+    expect(result).toEqual({
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            label: 'label override',
+            description: 'new description',
+          },
+        },
+      },
+      recognizers: [],
+      flowWidgets: {},
+    });
+  });
+
+  it('adds recognizers', () => {
+    const config1 = {
+      recognizers: ['recognizer 1'],
+    };
+
+    const config2 = {
+      recognizers: ['recognizer 2'],
+    };
+
+    // @ts-expect-error
+    expect(mergePluginConfigs(config1, config2).recognizers).toEqual(['recognizer 1', 'recognizer 2']);
+  });
+
+  it('replaces other arrays', () => {
+    const config1 = {
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            order: ['foo', 'bar'],
+          },
+        },
+      },
+    };
+    const config2 = {
+      uiSchema: {
+        'Microsoft.SendActivity': {
+          form: {
+            order: ['baz', '*'],
+          },
+        },
+      },
+    };
+
+    expect(mergePluginConfigs(config1, config2).uiSchema).toEqual({
+      'Microsoft.SendActivity': {
+        form: {
+          order: ['baz', '*'],
+        },
+      },
+    });
+  });
+});

Composer/packages/client/package.json

@@ -24,7 +24,7 @@
     "@bfc/extension": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
-    "@bfc/ui-plugin-expressions": "*",
+    "@bfc/ui-plugin-composer": "*",
     "@bfc/ui-plugin-lg": "*",
     "@bfc/ui-plugin-luis": "*",
     "@bfc/ui-plugin-prompts": "*",

Composer/packages/client/src/pages/design/PropertyEditor.tsx

@@ -4,16 +4,17 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import AdaptiveForm, { resolveRef, getUIOptions, mergePluginConfigs } from '@bfc/adaptive-form';
-import Extension, { FormErrors, JSONSchema7 } from '@bfc/extension';
+import AdaptiveForm, { resolveRef, getUIOptions } from '@bfc/adaptive-form';
+import Extension, { FormErrors, JSONSchema7, PluginConfig } from '@bfc/extension';
 import formatMessage from 'format-message';
 import isEqual from 'lodash/isEqual';
 import debounce from 'lodash/debounce';
+import mapValues from 'lodash/mapValues';
 import { Resizable, ResizeCallback } from 're-resizable';
 import { MicrosoftAdaptiveDialog } from '@bfc/shared';
 
 import { useShell } from '../../shell';
-import plugins from '../../plugins';
+import plugins, { mergePluginConfigs } from '../../plugins';
 
 import { formEditor } from './styles';
 
@@ -62,12 +63,15 @@ const PropertyEditor: React.FC = () => {
     }
   }, [schemas?.sdk?.content, localData.$kind]);
 
-  const pluginConfig = useMemo(() => {
-    return mergePluginConfigs(...plugins);
-  }, []);
+  const pluginConfig: PluginConfig = useMemo(() => {
+    const sdkUISchema = schemas?.ui?.content ?? {};
+    const userUISchema = schemas?.uiOverrides?.content ?? {};
 
-  const $uiSchema = useMemo(() => {
-    return getUIOptions($schema, pluginConfig.formSchema, pluginConfig.roleSchema);
+    return mergePluginConfigs({ uiSchema: sdkUISchema }, plugins, { uiSchema: userUISchema });
+  }, [schemas?.ui?.content, schemas?.uiOverrides?.content]);
+
+  const $uiOptions = useMemo(() => {
+    return getUIOptions($schema, mapValues(pluginConfig.uiSchema, 'form'));
   }, [$schema, pluginConfig]);
 
   const errors = useMemo(() => {
@@ -129,13 +133,12 @@ const PropertyEditor: React.FC = () => {
       onResizeStop={handleResize}
     >
       <div aria-label={formatMessage('form editor')} css={formEditor} data-testid="PropertyEditor" role="region">
-        <Extension plugins={plugins} shell={shellApi} shellData={shellData}>
+        <Extension plugins={pluginConfig} shell={shellApi} shellData={shellData}>
           <AdaptiveForm
             errors={errors}
             formData={localData}
-            pluginConfig={pluginConfig}
             schema={$schema}
-            uiOptions={$uiSchema}
+            uiOptions={$uiOptions}
             onChange={handleDataChange}
           />
         </Extension>

Composer/packages/client/src/plugins.ts

@@ -1,10 +1,38 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import expressions from '@bfc/ui-plugin-expressions';
+import mergeWith from 'lodash/mergeWith';
+import isArray from 'lodash/isArray';
+// this is just a type import
+// eslint-disable-next-line lodash/import-scope
+import type { MergeWithCustomizer } from 'lodash';
+import type { PluginConfig } from '@bfc/extension';
+import composer from '@bfc/ui-plugin-composer';
 import prompts from '@bfc/ui-plugin-prompts';
 import selectDialog from '@bfc/ui-plugin-select-dialog';
 import selectSkillDialog from '@bfc/ui-plugin-select-skill-dialog';
 import lg from '@bfc/ui-plugin-lg';
 import lu from '@bfc/ui-plugin-luis';
 
-export default [prompts, selectDialog, selectSkillDialog, lg, lu, expressions];
+const mergeArrays: MergeWithCustomizer = (objValue, srcValue, key) => {
+  if (isArray(objValue)) {
+    // merge recognizers into defaults
+    if (key === 'recognizers') {
+      return objValue.concat(srcValue);
+    }
+
+    // otherwise override other arrays
+    return srcValue;
+  }
+};
+
+const defaultPlugin: Required<PluginConfig> = {
+  uiSchema: {},
+  recognizers: [],
+  flowWidgets: {},
+};
+
+export function mergePluginConfigs(...plugins: PluginConfig[]): Required<PluginConfig> {
+  return mergeWith({}, defaultPlugin, ...plugins, mergeArrays);
+}
+
+export default mergePluginConfigs(composer, prompts, selectDialog, selectSkillDialog, lg, lu);

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx

@@ -17,7 +17,6 @@ import { AdaptiveDialog } from '../adaptive-flow-renderer/adaptive/AdaptiveDialo
 
 import { NodeRendererContext, NodeRendererContextValue } from './contexts/NodeRendererContext';
 import { SelfHostContext } from './contexts/SelfHostContext';
-import { mergePluginConfig } from './utils/mergePluginConfig';
 import { getCustomSchema } from './utils/getCustomSchema';
 import { SelectionContext } from './contexts/SelectionContext';
 import { enableKeyboardCommandAttributes, KeyboardCommandHandler } from './components/KeyboardZone';
@@ -30,6 +29,7 @@ import {
   VisualEditorNodeWrapper,
   VisualEditorElementWrapper,
 } from './renderers';
+import { useFlowUIOptions } from './hooks/useFlowUIOptions';
 
 formatMessage.setup({
   missingTranslation: 'ignore',
@@ -61,7 +61,8 @@ export interface VisualDesignerProps {
   schema?: JSONSchema7;
 }
 const VisualDesigner: React.FC<VisualDesignerProps> = ({ schema }): JSX.Element => {
-  const { shellApi, plugins, ...shellData } = useShellApi();
+  const { shellApi, ...shellData } = useShellApi();
+  const { schema: schemaFromPlugins, widgets: widgetsFromPlugins } = useFlowUIOptions();
   const {
     dialogId,
     focusedEvent,
@@ -102,7 +103,6 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ schema }): JSX.Element
     customSchemas: customSchema ? [customSchema] : [],
   };
 
-  const { schema: schemaFromPlugins, widgets: widgetsFromPlugins } = mergePluginConfig(...plugins);
   const customFlowSchema: FlowSchema = nodeContext.customSchemas.reduce((result, s) => {
     const definitionKeys: string[] = Object.keys(s.definitions);
     definitionKeys.forEach(($kind) => {

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-editor/hooks/useFlowUIOptions.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useShellApi, useFlowConfig } from '@bfc/extension';
+
+export function useFlowUIOptions() {
+  const { plugins } = useShellApi();
+  const schema = useFlowConfig();
+
+  return { widgets: plugins.flowWidgets ?? {}, schema };
+}

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/utils/visual/WidgetSchemaProvider.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import get from 'lodash/get';
+import merge from 'lodash/merge';
 
 import { FlowWidget, FlowSchema } from '../../types/flowRenderer.types';
 
@@ -17,7 +18,7 @@ export class WidgetSchemaProvider {
 
   private mergeSchemas(orderedSchemas: FlowSchema[]): FlowSchema {
     if (!Array.isArray(orderedSchemas) || !orderedSchemas.length) return {};
-    return Object.assign({}, ...orderedSchemas);
+    return merge({}, ...orderedSchemas);
   }
 
   get = ($kind: string): FlowWidget => {