feature: Adding VA template custom creation UI

Composer/packages/client/__tests__/components/DialogWrapper/index.test.tsx

@@ -3,8 +3,7 @@
 
 import React from 'react';
 import { render } from '@bfc/test-utils';
-
-import { DialogWrapper, DialogTypes } from '../../../src/components/DialogWrapper';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 describe('<DialogWrapper />', () => {
   const props = {

Composer/packages/client/package.json

@@ -25,6 +25,7 @@
     "@bfc/extension-client": "*",
     "@bfc/indexers": "*",
     "@bfc/shared": "*",
+    "@bfc/ui-shared": "*",
     "@bfc/ui-plugin-composer": "*",
     "@bfc/ui-plugin-cross-trained": "*",
     "@bfc/ui-plugin-dialog-schema-editor": "*",
@@ -33,6 +34,7 @@
     "@bfc/ui-plugin-prompts": "*",
     "@bfc/ui-plugin-select-dialog": "*",
     "@bfc/ui-plugin-select-skill-dialog": "*",
+    "@bfc/ui-plugin-va-creation": "*",
     "@emotion/core": "^10.0.27",
     "@reach/router": "^1.2.1",
     "@uifabric/fluent-theme": "^7.1.107",

Composer/packages/client/public/react-bundle.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

Composer/packages/client/public/react-dom-bundle.js.LICENSE.txt

@@ -0,0 +1,23 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

Composer/packages/client/src/components/CreateSkillModal.tsx

@@ -12,13 +12,12 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { useRecoilValue } from 'recoil';
 import debounce from 'lodash/debounce';
 import { SkillSetting } from '@bfc/shared';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 import { addSkillDialog } from '../constants';
 import httpClient from '../utils/httpUtil';
 import { skillsState } from '../recoilModel';
 
-import { DialogWrapper, DialogTypes } from './DialogWrapper';
-
 export interface SkillFormDataErrors {
   endpoint?: string;
   manifestUrl?: string;

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -21,10 +21,10 @@ import {
 } from 'office-ui-fabric-react/lib/DetailsList';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
 import { ProjectTemplate } from '@bfc/shared';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 
 import { DialogCreationCopy, EmptyBotTemplateId, QnABotTemplateId } from '../../constants';
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 
 // -------------------- Styles -------------------- //
 

Composer/packages/client/src/components/CreationFlow/CreationFlow.tsx

@@ -4,9 +4,11 @@
 // TODO: Remove path module
 import Path from 'path';
 
-import React, { useEffect, useRef, Fragment, useState } from 'react';
+import React, { useEffect, useRef, Fragment, useState, useMemo } from 'react';
 import { RouteComponentProps, Router, navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
+import VirtualAssistantCreationModal from '@bfc/ui-plugin-va-creation';
+import { PluginConfig, mergePluginConfigs, EditorExtension } from '@bfc/extension-client';
 
 import { CreationFlowStatus } from '../../constants';
 import {
@@ -22,6 +24,8 @@ import Home from '../../pages/home/Home';
 import ImportQnAFromUrlModal from '../../pages/knowledge-base/ImportQnAFromUrlModal';
 import { QnABotTemplateId } from '../../constants';
 import { useProjectIdCache } from '../../utils/hooks';
+import { useShell } from '../../shell';
+import plugins from '../../plugins';
 
 import { CreateOptions } from './CreateOptions';
 import { OpenProject } from './OpenProject';
@@ -56,8 +60,8 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
   const currentStorageIndex = useRef(0);
   const storage = storages[currentStorageIndex.current];
   const currentStorageId = storage ? storage.id : 'default';
-  const [formData, setFormData] = useState({ name: '' });
-
+  const [formData, setFormData] = useState({ name: '', description: '', location: '' });
+  const shellForCreation = useShell('VaCreation', projectId);
   useEffect(() => {
     if (storages && storages.length) {
       const storageId = storage.id;
@@ -67,6 +71,13 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     }
   }, [storages]);
 
+  // Plugin config for VA creation plug in
+  const pluginConfig: PluginConfig = useMemo(() => {
+    const sdkUISchema = {};
+    const userUISchema = {};
+    return mergePluginConfigs({ uiSchema: sdkUISchema }, plugins, { uiSchema: userUISchema });
+  }, []);
+
   const fetchResources = async () => {
     // fetchProject use `gotoSnapshot` which will wipe out all state value.
     // so here make those methods call in sequence.
@@ -125,12 +136,20 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     handleCreateNew(formData, QnABotTemplateId, urls);
   };
 
-  const handleSubmitOrImportQnA = async (formData, templateId: string) => {
+  const handleDefineConversationSubmit = async (formData, templateId: string) => {
+    // If selected template is qnaSample then route to QNA import modal
     if (templateId === 'QnASample') {
       setFormData(formData);
       navigate(`./QnASample/importQnA`);
       return;
     }
+    // If selected template is vaCore then route to VA Customization modal
+    if (templateId === 'va-core') {
+      setFormData(formData);
+      navigate(`./vaCore/customize`);
+      return;
+    }
+
     handleSubmit(formData, templateId);
   };
 
@@ -155,40 +174,53 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
   return (
     <Fragment>
       <Home />
-      <Router>
-        <DefineConversation
-          createFolder={createFolder}
-          focusedStorageFolder={focusedStorageFolder}
-          path="create/:templateId"
-          updateFolder={updateFolder}
-          onCurrentPathUpdate={updateCurrentPath}
-          onDismiss={handleDismiss}
-          onSubmit={handleSubmitOrImportQnA}
-        />
-        <CreateOptions path="create" templates={templateProjects} onDismiss={handleDismiss} onNext={handleCreateNext} />
-        <DefineConversation
-          createFolder={createFolder}
-          focusedStorageFolder={focusedStorageFolder}
-          path=":projectId/:templateId/save"
-          updateFolder={updateFolder}
-          onCurrentPathUpdate={updateCurrentPath}
-          onDismiss={handleDismiss}
-          onSubmit={handleSubmitOrImportQnA}
-        />
-        <OpenProject
-          focusedStorageFolder={focusedStorageFolder}
-          path="open"
-          onCurrentPathUpdate={updateCurrentPath}
-          onDismiss={handleDismiss}
-          onOpen={openBot}
-        />
-        <ImportQnAFromUrlModal
-          dialogId={formData.name.toLowerCase()}
-          path="create/QnASample/importQnA"
-          onDismiss={handleDismiss}
-          onSubmit={handleCreateQnA}
-        />
-      </Router>
+      <EditorExtension plugins={pluginConfig} projectId={projectId} shell={shellForCreation}>
+        <Router>
+          <DefineConversation
+            createFolder={createFolder}
+            focusedStorageFolder={focusedStorageFolder}
+            path="create/:templateId"
+            updateFolder={updateFolder}
+            onCurrentPathUpdate={updateCurrentPath}
+            onDismiss={handleDismiss}
+            onSubmit={handleDefineConversationSubmit}
+          />
+          <CreateOptions
+            path="create"
+            templates={templateProjects}
+            onDismiss={handleDismiss}
+            onNext={handleCreateNext}
+          />
+          <DefineConversation
+            createFolder={createFolder}
+            focusedStorageFolder={focusedStorageFolder}
+            path=":projectId/:templateId/save"
+            updateFolder={updateFolder}
+            onCurrentPathUpdate={updateCurrentPath}
+            onDismiss={handleDismiss}
+            onSubmit={handleDefineConversationSubmit}
+          />
+          <OpenProject
+            focusedStorageFolder={focusedStorageFolder}
+            path="open"
+            onCurrentPathUpdate={updateCurrentPath}
+            onDismiss={handleDismiss}
+            onOpen={openBot}
+          />
+          <ImportQnAFromUrlModal
+            dialogId={formData.name.toLowerCase()}
+            path="create/QnASample/importQnA"
+            onDismiss={handleDismiss}
+            onSubmit={handleCreateQnA}
+          />
+          <VirtualAssistantCreationModal
+            formData={formData}
+            handleCreateNew={handleCreateNew}
+            path="create/vaCore/*"
+            onDismiss={handleDismiss}
+          />
+        </Router>
+      </EditorExtension>
     </Fragment>
   );
 };

Composer/packages/client/src/components/CreationFlow/DefineConversation.tsx

@@ -13,9 +13,9 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { RouteComponentProps } from '@reach/router';
 import querystring from 'query-string';
 import { FontWeights } from '@uifabric/styling';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 import { DialogCreationCopy, QnABotTemplateId, nameRegex } from '../../constants';
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { StorageFolder } from '../../recoilModel/types';
 

Composer/packages/client/src/components/CreationFlow/OpenProject.tsx

@@ -8,10 +8,10 @@ import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
 import { RouteComponentProps } from '@reach/router';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 import { StorageFolder } from '../../recoilModel/types';
 import { DialogCreationCopy } from '../../constants';
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 
 import { LocationSelectContent } from './LocationSelectContent';
 interface OpenProjectProps extends RouteComponentProps<{}> {

Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx

@@ -14,8 +14,8 @@ import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 import { MultiLanguagesDialog } from '../../constants';
 
 import { ILanguageFormData } from './types';

Composer/packages/client/src/components/MultiLanguage/DeleteLanguageModal.tsx

@@ -12,8 +12,8 @@ import { ScrollablePane, IScrollablePaneStyles } from 'office-ui-fabric-react/li
 import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Label } from 'office-ui-fabric-react/lib/Label';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
 import { MultiLanguagesDialog } from '../../constants';
 
 import { ILanguageFormData } from './types';

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

@@ -9,10 +9,10 @@ import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { useRecoilValue } from 'recoil';
 import { RecognizerSchema, useRecognizerConfig, useShellApi } from '@bfc/extension-client';
 import { DialogFactory, SDKKinds } from '@bfc/shared';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 import { DialogCreationCopy, nameRegex } from '../../constants';
 import { StorageFolder } from '../../recoilModel/types';
-import { DialogWrapper, DialogTypes } from '../../components/DialogWrapper';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { actionsSeedState, schemasState, validateDialogSelectorFamily } from '../../recoilModel';
 

Composer/packages/client/src/shell/useShell.ts

@@ -36,7 +36,7 @@ import { useTriggerApi } from './triggerApi';
 
 const FORM_EDITOR = 'PropertyEditor';
 
-type EventSource = 'FlowEditor' | 'PropertyEditor' | 'DesignPage';
+type EventSource = 'FlowEditor' | 'PropertyEditor' | 'DesignPage' | 'VaCreation';
 
 export function useShell(source: EventSource, projectId: string): Shell {
   const dialogMapRef = useRef({});
@@ -240,7 +240,9 @@ export function useShell(source: EventSource, projectId: string): Shell {
         skills,
         skillsSettings: settings.skill || {},
       }
-    : ({} as ShellData);
+    : ({
+        projectId,
+      } as ShellData);
 
   return {
     api,

Composer/packages/client/src/components/DialogWrapper.tsx → Composer/packages/lib/ui-shared/src/components/DialogWrapper.tsx

@@ -69,7 +69,6 @@ interface DialogWrapperProps extends Pick<IDialogProps, 'onDismiss'> {
 export const DialogWrapper: React.FC<DialogWrapperProps> = (props) => {
   const { isOpen, onDismiss, title, subText, children, dialogType } = props;
   const [currentStyle, setStyle] = useState(styles[dialogType]);
-
   useEffect(() => {
     if (dialogType) {
       setStyle(styles[dialogType]);

Composer/packages/lib/ui-shared/src/components/index.ts

@@ -3,3 +3,4 @@
 
 export * from './ListOverview';
 export * from './PropertyAssignment';
+export * from './DialogWrapper';

Composer/packages/ui-plugins/virtual-assistant-creation/.eslintrc.js

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

Composer/packages/ui-plugins/virtual-assistant-creation/.gitignore

@@ -0,0 +1,2 @@
+lib
+.vscode

Composer/packages/ui-plugins/virtual-assistant-creation/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@bfc/ui-plugin-va-creation",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Virtual assistant creation experience.",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "start": "tsc --watch --preserveWatchOutput",
+    "build": "yarn clean && yarn build:ts",
+    "build:ts": "tsc --build ./tsconfig.build.json",
+    "clean": "rimraf lib demo/dist",
+    "lint": "eslint --quiet src",
+    "lint:fix": "yarn lint --fix",
+    "prepare": "yarn build"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@bfc/extension-client": "*",
+    "@bfc/adaptive-form": "*",
+    "@uifabric/fluent-theme": "^7.1.4",
+    "@uifabric/icons": "^7.3.0",
+    "@uifabric/styling": "^7.7.4",
+    "format-message": "^6.2.3",
+    "office-ui-fabric-react": "^7.71.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@types/react": "16.9.23",
+    "format-message": "^6.2.3",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  },
+  "dependencies": {
+    "@bfc/ui-shared": "*",
+    "@bfc/extension-client": "*",
+    "@emotion/core": "^10.0.27",
+    "@reach/router": "^1.3.4",
+    "@types/reach__router": "^1.3.5",
+    "axios": "^0.19.2"
+  }
+}