microsoft · cwhitten · Mar 26, 2020 · Feb 4, 2020 · Feb 4, 2020 · Feb 4, 2020
@@ -3,7 +3,7 @@ module.exports = {
   plugins: ['react-hooks', 'format-message', 'emotion'],
   settings: {
     react: {
-      version: '16.9.0',
+      version: '16.9.16',
     },
   },
   parserOptions: {

@@ -50,7 +50,7 @@ Composer is managed via yarn workspaces, producing such a folder layout.
     |- server       // composer api server
     |- extensions
       |- package.json  // put all extension as one package
-      |- obiformeditor // dialog property editor
+      |- adaptive-form // dialog property editor
     |- lib
       |- shared        // shared code
 ```

@@ -62,7 +62,13 @@ context('Notification Page', () => {
 
     cy.withinEditor('FormEditor', () => {
       cy.findByText('Condition').should('exist');
-      cy.get('.ObjectItem input').type('()');
+      cy.findByTestId('expression-type-dropdown-Condition')
+        .focus()
+        .type('{downarrow}')
+        .should('contain.text', 'expression');
+      cy.get('#root\\.condition')
+        .click()
+        .type('()');
     });
 
     cy.get('[data-testid="notifications-info-button"]').click();

@@ -5,6 +5,7 @@ context('ToDo Bot', () => {
   before(() => {
     cy.visit(Cypress.env('COMPOSER_URL'));
     cy.createBot('TodoSample');
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.wait(5000);
   });
 

@@ -9,6 +9,7 @@ beforeEach(() => {
 });
 
 after(() => {
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(500);
   cy.exec('yarn test:integration:clean');
 });
@@ -39,11 +39,18 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/', '/scripts/', '/jestMocks/', '__tests__/setup.(j|t)s', '/cypress/'],
   projects: [
     '<rootDir>/packages/client',
-    '<rootDir>/packages/server',
-    '<rootDir>/packages/extensions/obiformeditor',
+    '<rootDir>/packages/extensions/adaptive-form',
+    '<rootDir>/packages/extensions/extension',
     '<rootDir>/packages/extensions/visual-designer',
     '<rootDir>/packages/lib/code-editor',
     '<rootDir>/packages/lib/shared',
+    '<rootDir>/packages/server',
     '<rootDir>/packages/tools/language-servers/language-generation',
+    '<rootDir>/packages/ui-plugins/expressions',
+    '<rootDir>/packages/ui-plugins/json',
+    '<rootDir>/packages/ui-plugins/lg',
+    '<rootDir>/packages/ui-plugins/luis',
+    '<rootDir>/packages/ui-plugins/prompts',
+    '<rootDir>/packages/ui-plugins/select-dialog',
   ],
 };
@@ -3,7 +3,7 @@
   "license": "MIT",
   "private": true,
   "resolutions": {
-    "@types/react": "16.9.0"
+    "@types/react": "16.9.23"
   },
   "engines": {
     "node": ">=12"
@@ -17,14 +17,15 @@
     "packages/lib/*",
     "packages/tools",
     "packages/tools/language-servers",
-    "packages/tools/language-servers/*"
+    "packages/tools/language-servers/*",
+    "packages/ui-plugins/*"
   ],
   "scripts": {
     "build": "node scripts/update.js && node scripts/begin.js && yarn build:prod && yarn build:plugins",
     "build:prod": "yarn build:dev && yarn build:server && yarn build:client",
     "build:dev": "yarn build:lib && yarn build:tools && yarn build:extensions && yarn build:plugins",
     "build:lib": "yarn workspace @bfc/libs build:all",
-    "build:extensions": "yarn workspace @bfc/extensions build:all",
+    "build:extensions": "wsrun -lt -p @bfc/extension @bfc/adaptive-form @bfc/visual-designer @bfc/ui-plugin-* -c build",
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
@@ -71,6 +72,7 @@
     "@cypress/webpack-preprocessor": "^4.1.1",
     "@emotion/babel-preset-css-prop": "^10.0.17",
     "@testing-library/cypress": "^5.2.1",
+    "@types/jest": "^25.1.3",
     "@typescript-eslint/eslint-plugin": "2.10.0",
     "@typescript-eslint/parser": "2.10.0",
     "babel-jest": "24.0.0",

@@ -17,7 +17,6 @@ const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeM
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const MonacoWebpackPlugin = require('@bfcomposer/monaco-editor-webpack-plugin');
 
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
@@ -404,10 +403,6 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
-      new MonacoWebpackPlugin({
-        // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-        languages: ['markdown', 'json'],
-      }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(

@@ -1,6 +1,7 @@
 // eslint-disable-next-line
 const path = require('path');
 module.exports = {
+  displayName: 'client',
   preset: 'ts-jest/presets/js-with-ts',
   // transform: {
   //   '^.+\\.tsx?$': 'ts-jest',
@@ -19,7 +20,14 @@ module.exports = {
 
     '^@src/(.*)$': '<rootDir>/src/$1',
   },
-  testPathIgnorePatterns: ['/node_modules/', '/jestMocks/', '/testUtils/', '__tests__/setupTests.ts', '.*\\.d\\.ts'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/jestMocks/',
+    '__mocks__',
+    '/testUtils/',
+    '__tests__/setupTests.ts',
+    '.*\\.d\\.ts',
+  ],
   // Some node modules are packaged and distributed in a non-transpiled form
   // (ex. contain import & export statements); and Jest won't be able to
   // understand them because node_modules aren't transformed by default. So

@@ -16,13 +16,24 @@
   },
   "proxy": "http://localhost:5000",
   "dependencies": {
+    "@bfc/adaptive-form": "*",
     "@bfc/code-editor": "*",
-    "@bfc/extensions": "*",
+    "@bfc/extension": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
+    "@bfc/ui-plugin-expressions": "*",
+    "@bfc/ui-plugin-json": "*",
+    "@bfc/ui-plugin-lg": "*",
+    "@bfc/ui-plugin-luis": "*",
+    "@bfc/ui-plugin-prompts": "*",
+    "@bfc/ui-plugin-select-dialog": "*",
+    "@bfc/visual-designer": "*",
     "@emotion/core": "^10.0.7",
     "@microsoft/bf-lu": "^4.9.0-preview.115707",
     "@reach/router": "^1.2.1",
+    "@uifabric/fluent-theme": "^7.1.13",
+    "@uifabric/icons": "^7.3.4",
+    "@uifabric/styling": "^7.10.4",
     "adaptive-expressions": "^4.8.0-preview-110700",
     "axios": "^0.18.0",
     "botbuilder-lg": "^4.8.0-preview-109324",
@@ -31,13 +42,13 @@
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.15",
     "nanoid": "^2.1.6",
-    "office-ui-fabric-react": "7.37.1",
+    "office-ui-fabric-react": "^7.88.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.8.2",
-    "react": "16.9.0",
+    "react": "16.13.0",
     "react-app-polyfill": "^0.2.1",
     "react-dev-utils": "^7.0.3",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.0",
     "react-frame-component": "^4.0.2",
     "react-timeago": "^4.4.0",
     "styled-components": "^4.1.3"
@@ -56,15 +67,14 @@
     "@babel/preset-env": "7.3.0",
     "@babel/preset-react": "7.0.0",
     "@babel/runtime": "7.3.4",
-    "@bfcomposer/monaco-editor-webpack-plugin": "^1.7.2",
     "@emotion/babel-preset-css-prop": "^10.0.14",
     "@svgr/webpack": "4.1.0",
     "@types/jest": "^24.0.16",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash": "^4.14.146",
     "@types/reach__router": "^1.2.4",
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0",
+    "@types/react": "16.9.23",
+    "@types/react-dom": "16.9.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "24.0.0",

@@ -18,6 +18,7 @@ export const dropdown: Partial<IDropdownStyles> = {
   subComponentStyles: {
     label: textFieldlabel,
     panel: {},
+    multiSelectItem: {},
   },
   // root: [
   //   {

@@ -96,8 +96,9 @@ export const ShellApi: React.FC = () => {
       return {} as ShellData;
     }
 
+    const data = getData(sourceWindow);
     return {
-      data: getData(sourceWindow),
+      data,
       locale,
       botName,
       projectId,
@@ -108,6 +109,7 @@ export const ShellApi: React.FC = () => {
       luFiles,
       currentDialog,
       dialogId,
+      designerId: get(data, '$designer.id'),
       focusedEvent: selected,
       focusedActions: focused ? [focused] : [],
       focusedSteps: focused ? [focused] : selected ? [selected] : [],

@@ -9,7 +9,7 @@ import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import formatMessage from 'format-message';
-import { DiagnosticSeverity, Diagnostic } from '@bfc/indexers';
+import { DiagnosticSeverity, Diagnostic } from '@bfc/shared';
 
 import settingsStorage from './utils/dialogSettingStorage';
 import { StoreContext } from './store';

@@ -3,11 +3,12 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useCallback, useContext, useState } from 'react';
-import { Link, LinkGetProps } from '@reach/router';
+import { useCallback, useContext } from 'react';
+import { Link } from '@reach/router';
 import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
 
 import { StoreContext } from '../../store';
+import { useLocation } from '../../utils/hooks';
 
 import { link, outer, commandBarButton } from './styles';
 
@@ -31,20 +32,18 @@ export const NavItem: React.FC<INavItemProps> = props => {
     actions: { onboardingAddCoachMarkRef },
   } = useContext(StoreContext);
 
-  const { to, exact, iconName, labelName, disabled } = props;
-  const [active, setActive] = useState(false);
+  const { to, iconName, labelName, disabled } = props;
+  const {
+    location: { pathname },
+  } = useLocation();
+  const active = pathname.startsWith(to);
 
   const addRef = useCallback(ref => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
 
   return (
     <Link
       to={to}
       css={link(active, disabled)}
-      getProps={(props: LinkGetProps) => {
-        const isActive = exact ? props.isCurrent : props.isPartiallyCurrent;
-        setActive(isActive);
-        return {};
-      }}
       data-testid={'LeftNav-CommandBarButton' + labelName}
       aria-disabled={disabled}
       aria-label={labelName}

@@ -12,8 +12,9 @@ import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { DialogInfo, luIndexer, combineMessage } from '@bfc/indexers';
+import { luIndexer, combineMessage } from '@bfc/indexers';
 import get from 'lodash/get';
+import { DialogInfo } from '@bfc/shared';
 import { LuEditor } from '@bfc/code-editor';
 
 import {
@@ -265,7 +266,7 @@ export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = props =
             <LuEditor
               onChange={onTriggerPhrasesChange}
               value={formData.triggerPhrases}
-              errorMsg={formData.errors.triggerPhrases}
+              errorMessage={formData.errors.triggerPhrases}
               hidePlaceholder={true}
               luOption={{
                 projectId,

@@ -16,7 +16,7 @@ import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
-import { DialogInfo, ITrigger } from '@bfc/indexers';
+import { DialogInfo, ITrigger } from '@bfc/shared';
 
 import { StoreContext } from '../../store';
 import { createSelectedPath, getFriendlyName } from '../../utils';

@@ -2,10 +2,10 @@
 // Licensed under the MIT License.
 
 // this is currently hard-coded here
-import FormEditor from '@bfc/extensions/obiformeditor';
-import VisualDesigner from '@bfc/extensions/visual-designer';
+import VisualDesigner from '@bfc/visual-designer';
+import AdaptiveForm from '@bfc/adaptive-form';
 
-const getEditor = (): typeof VisualDesigner | typeof FormEditor | null => {
+const getEditor = (): typeof VisualDesigner | typeof AdaptiveForm | null => {
   // i'm now more towarding pick editor based on name, not data
   // because we want shell to totally control file read/save
   // which means each editor cann't be differiante by data
@@ -14,7 +14,7 @@ const getEditor = (): typeof VisualDesigner | typeof FormEditor | null => {
   }
 
   if (window.name === 'FormEditor') {
-    return FormEditor;
+    return AdaptiveForm;
   }
   return null;
 };

@@ -4,10 +4,12 @@
 import React, { useState, useEffect } from 'react';
 import { initializeIcons } from '@uifabric/icons';
 import { ShellData, ShellApi } from '@bfc/shared';
+import Extension from '@bfc/extension';
 
 import ApiClient from '../messenger/ApiClient';
 
 import getEditor from './EditorMap';
+import plugins from './plugins';
 
 import './extensionContainer.css';
 
@@ -181,7 +183,21 @@ function ExtensionContainer() {
 
   const RealEditor = shellData.data ? getEditor() : null;
 
-  return RealEditor && <RealEditor {...shellData} onChange={shellApi.saveData} shellApi={shellApi} />;
+  return (
+    RealEditor && (
+      <Extension shell={shellApi} shellData={shellData}>
+        <RealEditor
+          key={shellData.focusPath}
+          {...shellData}
+          onChange={shellApi.saveData}
+          shellApi={shellApi}
+          formData={shellData.data}
+          plugins={plugins}
+          schema={shellData.schemas?.sdk?.content}
+        />
+      </Extension>
+    )
+  );
 }
 
 export default ExtensionContainer;
@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import json from '@bfc/ui-plugin-json';
+import expressions from '@bfc/ui-plugin-expressions';
+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';
+
+export default [json, prompts, selectDialog, lg, lu, expressions];