feature: Adding VA template custom creation UI

Composer/package.json

@@ -46,11 +46,12 @@
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
-    "build:plugins": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:runtimes",
+    "build:plugins": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:runtimes & yarn build:plugins:vacore",
     "build:plugins:localpublish": "cd plugins/localPublish && yarn install && yarn build",
     "build:plugins:samples": "cd plugins/samples && yarn install && yarn build",
     "build:plugins:azurePublish": "cd plugins/azurePublish && yarn install && yarn build",
     "build:plugins:runtimes": "cd plugins/runtimes && yarn install && yarn build",
+    "build:plugins:vacore": "cd plugins/vacore && yarn install && yarn build",
     "start": "cross-env NODE_ENV=production PORT=3000 yarn start:server",
     "startall": "yarn start",
     "start:dev": "concurrently  \"npm:start:client\" \"npm:start:server:dev\"",

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

@@ -4,7 +4,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-dialog-schema-editor": "*",
     "@bfc/ui-plugin-lg": "*",
@@ -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/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 { Skill } 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,7 +4,7 @@
 // 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';
 
@@ -26,6 +26,10 @@ import { useProjectIdCache } from '../../utils/hooks';
 import { CreateOptions } from './CreateOptions';
 import { OpenProject } from './OpenProject';
 import DefineConversation from './DefineConversation';
+import { VirtualAssistantCreationModal } from '@bfc/ui-plugin-va-creation';
+import { useShell } from '../../shell';
+import { PluginConfig, mergePluginConfigs, EditorExtension } from '@bfc/extension-client';
+import plugins from '../../plugins';
 
 type CreationFlowProps = RouteComponentProps<{}>;
 
@@ -55,8 +59,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;
@@ -129,6 +133,11 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
       navigate(`./QnASample/importQnA`);
       return;
     }
+    if (templateId === 'va-core') {
+      setFormData(formData);
+      navigate(`./va-core/customize`);
+      return;
+    }
     handleSubmit(formData, templateId);
   };
 
@@ -150,43 +159,61 @@ const CreationFlow: React.FC<CreationFlowProps> = () => {
     navigate(`./create/${data}`);
   };
 
+  const pluginConfig: PluginConfig = useMemo(() => {
+    const sdkUISchema = {};
+    const userUISchema = {};
+    return mergePluginConfigs({ uiSchema: sdkUISchema }, plugins, { uiSchema: userUISchema });
+  }, []);
   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 projectId={projectId} plugins={pluginConfig} shell={shellForCreation}>
+        <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}
+          />
+          <VirtualAssistantCreationModal
+            handleCreateNew={handleCreateNew}
+            formData={formData}
+            onDismiss={handleDismiss}
+            path="create/va-core/*"
+          />
+        </Router>
+      </EditorExtension>
     </Fragment>
   );
 };

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

@@ -13,9 +13,10 @@ 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

@@ -11,7 +11,7 @@ import { RouteComponentProps } from '@reach/router';
 
 import { StorageFolder } from '../../recoilModel/types';
 import { DialogCreationCopy } from '../../constants';
-import { DialogWrapper, DialogTypes } from '../DialogWrapper';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 
 import { LocationSelectContent } from './LocationSelectContent';
 interface OpenProjectProps extends RouteComponentProps<{}> {

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

@@ -15,7 +15,8 @@ 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 '../DialogWrapper';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
+
 import { MultiLanguagesDialog } from '../../constants';
 
 import { ILanguageFormData } from './types';

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

@@ -13,7 +13,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 { DialogWrapper, DialogTypes } from '../DialogWrapper';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
+
 import { MultiLanguagesDialog } from '../../constants';
 
 import { ILanguageFormData } from './types';

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

@@ -10,7 +10,8 @@ import { useRecoilValue } from 'recoil';
 
 import { DialogCreationCopy, nameRegex } from '../../constants';
 import { StorageFolder } from '../../recoilModel/types';
-import { DialogWrapper, DialogTypes } from '../../components/DialogWrapper';
+import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
+
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { 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({});

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

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