feat: introduce the package library extension

.vscode/launch.json

@@ -44,12 +44,12 @@
       "type": "node",
       "request": "launch",
       "name": "Server: Launch",
-      "args": ["./build/init.js"],
+      "program": "${workspaceFolder}/Composer/packages/server/src/init.ts",
       "env": {
-        "DEBUG": ""
+        "DEBUG": "composer*"
       },
       "restart": true,
-      "outFiles": ["./build/*"],
+      "outFiles": ["${workspaceFolder}/Composer/packages/server/build/**/*.js"],
       "preLaunchTask": "server: build",
       "outputCapture": "std",
       "cwd": "${workspaceFolder}/Composer/packages/server"

Composer/packages/adaptive-flow/src/adaptive-flow-editor/hooks/useEditorEventApi.ts

@@ -158,7 +158,7 @@ export const useEditorEventApi = (
         break;
       case NodeEventTypes.OpenDialog:
         handler = ({ callee }) => {
-          navTo(callee, '"beginDialog"');
+          navTo(callee);
           announce(ScreenReaderMessage.DialogOpened);
         };
         break;

Composer/packages/client/__tests__/components/home.test.tsx

@@ -3,12 +3,13 @@
 
 import * as React from 'react';
 import { fireEvent, render } from '@botframework-composer/test-utils';
+import { Toolbar } from '@bfc/ui-shared';
 import { BotTemplate } from '@bfc/shared';
 
 import { RecentBotList } from '../../src/pages/home/RecentBotList';
 import { ExampleList } from '../../src/pages/home/ExampleList';
 import { renderWithRecoil } from '../testUtils';
-import { Toolbar } from '../../src/components/Toolbar';
+
 describe('<Home/>', () => {
   it('should dispatch onSelectionChanged event when clicked on a link on <RecentBotList>', () => {
     const recentProjects = [

Composer/packages/client/__tests__/components/skill.test.tsx

@@ -18,8 +18,6 @@ import Skills from '../../src/pages/skills';
 
 jest.mock('../../src//utils/httpUtil');
 
-jest.mock('../../src/components/Modal/dialogStyle', () => ({}));
-
 const skills: Skill[] = [
   {
     id: 'email-skill',

Composer/packages/client/package.json

@@ -42,7 +42,7 @@
     "@uifabric/icons": "^7.3.59",
     "@uifabric/react-hooks": "^7.4.12",
     "@uifabric/styling": "^7.13.7",
-    "axios": "^0.19.2",
+    "axios": "^0.21.0",
     "babel-plugin-extract-format-message": "^6.2.3",
     "format-message": "^6.2.3",
     "format-message-generate-id": "^6.2.3",

Composer/packages/client/src/components/Modal/ConfirmDialog.tsx

@@ -127,12 +127,13 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
   );
 };
 
-export const OpenConfirmModal = (title, subTitle, setting = {}) => {
+export const OpenConfirmModal = (title, subTitle, setting = {}): Promise<boolean> => {
   return new Promise((resolve) => {
     const node = document.createElement('div');
     document.body.appendChild(node);
     const removeNode = () => {
       ReactDOM.unmountComponentAtNode(node);
+      node.remove();
     };
 
     const onConfirm = () => {

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

@@ -5,10 +5,10 @@
 import { jsx, css } from '@emotion/core';
 import React from 'react';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
 import { LeftRightSplit } from '../components/Split/LeftRightSplit';
 
-import { Toolbar, IToolbarItem } from './Toolbar';
 import { NavTree, INavTreeItem } from './NavTree';
 
 // -------------------- Styles -------------------- //

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

@@ -3,12 +3,13 @@
 
 /** @jsx jsx */
 
-import React, { useState, useRef, Fragment, useEffect, useCallback } from 'react';
+import React, { useState, useRef, Fragment, useEffect, useCallback, useMemo } from 'react';
 import { jsx, css } from '@emotion/core';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { IConfig, IPublishConfig, defaultPublishConfig, checkForPVASchema } from '@bfc/shared';
+import { EditorExtension, PluginConfig, mergePluginConfigs } from '@bfc/extension-client';
 
 import {
   botEndpointsState,
@@ -27,6 +28,8 @@ import { BotStatus } from '../../constants';
 import { isAbsHosted } from '../../utils/envUtil';
 import useNotifications from '../../pages/notifications/useNotifications';
 import { navigateTo, openInEmulator } from '../../utils/navigation';
+import plugins from '../../plugins';
+import { useShell } from '../../shell/useShell';
 
 import { isBuildConfigComplete, needsBuild } from './../../utils/buildUtil';
 import { PublishDialog } from './publishDialog';
@@ -53,7 +56,7 @@ let botStatusInterval: NodeJS.Timeout | undefined = undefined;
 
 // -------------------- TestController -------------------- //
 const POLLING_INTERVAL = 2500;
-export const TestController: React.FC<{ projectId: string }> = (props) => {
+export const TestControllerContent: React.FC<{ projectId: string }> = (props) => {
   const { projectId = '' } = props;
   const [modalOpen, setModalOpen] = useState(false);
   const [calloutVisible, setCalloutVisible] = useState(false);
@@ -287,3 +290,20 @@ export const TestController: React.FC<{ projectId: string }> = (props) => {
     </Fragment>
   );
 };
+
+export const TestController: React.FC<{ projectId: string }> = (props) => {
+  const schemas = useRecoilValue(schemasState(props.projectId));
+  const shellForPropertyEditor = useShell('DesignPage', props.projectId);
+
+  const pluginConfig: PluginConfig = useMemo(() => {
+    const sdkUISchema = schemas?.ui?.content ?? {};
+    const userUISchema = schemas?.uiOverrides?.content ?? {};
+    return mergePluginConfigs({ uiSchema: sdkUISchema }, plugins, { uiSchema: userUISchema });
+  }, [schemas?.ui?.content, schemas?.uiOverrides?.content]);
+
+  return (
+    <EditorExtension plugins={pluginConfig} projectId={props.projectId} shell={shellForPropertyEditor}>
+      <TestControllerContent {...props} />
+    </EditorExtension>
+  );
+};

Composer/packages/client/src/pages/home/Home.tsx

@@ -10,11 +10,11 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { RouteComponentProps } from '@reach/router';
 import { navigate } from '@reach/router';
 import { useRecoilValue } from 'recoil';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
 import { CreationFlowStatus } from '../../constants';
 import { dispatcherState, botDisplayNameState, filteredTemplatesSelector } from '../../recoilModel';
 import { recentProjectsState, templateIdState, currentProjectIdState } from '../../recoilModel/atoms/appState';
-import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 
 import * as home from './styles';
 import { ItemContainer } from './ItemContainer';

Composer/packages/client/src/pages/notifications/Notifications.tsx

@@ -5,8 +5,8 @@
 import { jsx } from '@emotion/core';
 import { useState } from 'react';
 import { RouteComponentProps } from '@reach/router';
+import { Toolbar } from '@bfc/ui-shared';
 
-import { Toolbar } from '../../components/Toolbar';
 import { navigateTo } from '../../utils/navigation';
 import { convertPathToUrl } from '../../utils/navigation';
 

Composer/packages/client/src/pages/publish/Publish.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { PublishTarget } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
 import { LeftRightSplit } from '../../components/Split/LeftRightSplit';
 import settingsStorage from '../../utils/dialogSettingStorage';
@@ -22,7 +23,6 @@ import {
   publishHistoryState,
 } from '../../recoilModel';
 import { navigateTo } from '../../utils/navigation';
-import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { OpenConfirmModal } from '../../components/Modal/ConfirmDialog';
 
 import { TargetList } from './targetList';

Composer/packages/client/src/pages/publish/pullDialog.tsx

@@ -30,7 +30,7 @@ export const PullDialog: React.FC<PullDialogProps> = (props) => {
   const { onDismiss, projectId, selectedTarget } = props;
   const [status, setStatus] = useState<PullDialogStatus>('connecting');
   const [error, setError] = useState<string>('');
-  const { addNotification, reloadExistingProject } = useRecoilValue(dispatcherState);
+  const { addNotification, reloadProject } = useRecoilValue(dispatcherState);
   const botLocation = useRecoilValue(locationState(projectId));
 
   const pull = useCallback(() => {
@@ -56,7 +56,7 @@ export const PullDialog: React.FC<PullDialogProps> = (props) => {
           });
           addNotification(notification);
           // reload the bot project to update the authoring canvas
-          reloadExistingProject(projectId);
+          reloadProject(projectId);
           onDismiss();
           return;
         } catch (e) {

Composer/packages/client/src/pages/setting/SettingsPage.tsx

@@ -9,6 +9,7 @@ import { RouteComponentProps } from '@reach/router';
 import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 import { useRecoilValue } from 'recoil';
+import { IToolbarItem } from '@bfc/ui-shared';
 
 import {
   dispatcherState,
@@ -24,7 +25,6 @@ import { navigateTo } from '../../utils/navigation';
 import { Page } from '../../components/Page';
 import { INavTreeItem } from '../../components/NavTree';
 import { useLocation } from '../../utils/hooks';
-import { IToolbarItem } from '../../components/Toolbar';
 import { AddLanguageModal, DeleteLanguageModal } from '../../components/MultiLanguage/index';
 import { useProjectIdCache } from '../../utils/hooks';
 

Composer/packages/client/src/pages/setting/extensions/Extensions.tsx

@@ -21,8 +21,8 @@ import formatMessage from 'format-message';
 import { useRecoilValue, selector } from 'recoil';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { ExtensionMetadata, ExtensionSearchResult } from '@bfc/extension-client';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
-import { Toolbar, IToolbarItem } from '../../../components/Toolbar';
 import { dispatcherState, extensionsState } from '../../../recoilModel';
 
 import { InstallExtensionDialog } from './InstallExtensionDialog';

Composer/packages/client/src/pages/skills/index.tsx

@@ -8,9 +8,9 @@ import React, { useCallback, useState } from 'react';
 import formatMessage from 'format-message';
 import { useRecoilValue } from 'recoil';
 import { SkillSetting } from '@bfc/shared';
+import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
 
 import { dispatcherState, settingsState, botDisplayNameState } from '../../recoilModel';
-import { Toolbar, IToolbarItem } from '../../components/Toolbar';
 import { TestController } from '../../components/TestController/TestController';
 import { CreateSkillModal } from '../../components/CreateSkillModal';
 

Composer/packages/client/src/recoilModel/dispatchers/__tests__/setting.test.tsx

@@ -49,6 +49,7 @@ const settings = {
     environment: 'composer',
   },
   publishTargets: [],
+  importedLibraries: [],
   qna: {
     knowledgebaseid: '',
     endpointKey: '',
@@ -63,6 +64,7 @@ const settings = {
     customRuntime: false,
     path: '',
     command: '',
+    key: '',
   },
   downsampling: {
     maxImbalanceRatio: 10,

Composer/packages/client/src/recoilModel/dispatchers/formDialogs.ts

@@ -75,7 +75,7 @@ export const formDialogsDispatcher = () => {
         const response = await httpClient.post(`/formDialogs/${projectId}/generate`, {
           name: schemaId,
         });
-        await reloadProject(callbackHelpers, response);
+        await reloadProject(response.data.id);
       } catch (error) {
         set(applicationErrorState, {
           message: error.message,
@@ -99,8 +99,8 @@ export const formDialogsDispatcher = () => {
           return;
         }
 
-        const response = await httpClient.delete(`/formDialogs/${projectId}/${dialogId}`);
-        await reloadProject(callbackHelpers, response);
+        await httpClient.delete(`/formDialogs/${projectId}/${dialogId}`);
+        await reloadProject(projectId);
       } catch (error) {
         set(applicationErrorState, {
           message: error.message,

Composer/packages/client/src/recoilModel/dispatchers/project.ts

@@ -409,15 +409,8 @@ export const projectDispatcher = () => {
     }
   });
 
-  const reloadProject = async (callbackHelpers: CallbackInterface, response: any) => {
-    callbackHelpers.reset(filePersistenceState(response.data.id));
-    const { projectData, botFiles } = loadProjectData(response.data);
-
-    await initBotState(callbackHelpers, projectData, botFiles);
-  };
-
   /** Resets the file persistence of a project, and then reloads the bot state. */
-  const reloadExistingProject = useRecoilCallback((callbackHelpers: CallbackInterface) => async (projectId: string) => {
+  const reloadProject = useRecoilCallback((callbackHelpers: CallbackInterface) => async (projectId: string) => {
     callbackHelpers.reset(filePersistenceState(projectId));
     const { projectData, botFiles } = await fetchProjectDataById(projectId);
     await initBotState(callbackHelpers, projectData, botFiles);
@@ -490,7 +483,6 @@ export const projectDispatcher = () => {
     addRemoteSkillToBotProject,
     replaceSkillInBotProject,
     reloadProject,
-    reloadExistingProject,
     updateCreationMessage,
   };
 };

Composer/packages/client/src/recoilModel/dispatchers/setting.ts

@@ -3,7 +3,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import { CallbackInterface, useRecoilCallback } from 'recoil';
-import { SensitiveProperties, DialogSetting, PublishTarget, Skill } from '@bfc/shared';
+import { SensitiveProperties, DialogSetting, PublishTarget, Skill, LibraryRef } from '@bfc/shared';
 import { skillIndexer } from '@bfc/indexers';
 import get from 'lodash/get';
 import has from 'lodash/has';
@@ -91,6 +91,15 @@ export const settingsDispatcher = () => {
     }
   );
 
+  const setImportedLibraries = useRecoilCallback(
+    ({ set }: CallbackInterface) => async (projectId: string, importedLibraries: LibraryRef[]) => {
+      set(settingsState(projectId), (currentSettingsState) => ({
+        ...currentSettingsState,
+        importedLibraries,
+      }));
+    }
+  );
+
   const setRuntimeField = useRecoilCallback(
     ({ set }: CallbackInterface) => async (projectId: string, field: string, newValue: boolean) => {
       set(settingsState(projectId), (currentValue) => ({
@@ -134,6 +143,7 @@ export const settingsDispatcher = () => {
     setRuntimeSettings,
     setPublishTargets,
     setRuntimeField,
+    setImportedLibraries,
     setCustomRuntime,
     setQnASettings,
   };

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

@@ -29,6 +29,9 @@ import {
   rootBotProjectIdSelector,
 } from '../recoilModel';
 import { undoFunctionState } from '../recoilModel/undo/history';
+import httpClient from '../utils/httpUtil';
+import { navigateTo } from '../utils/navigation';
+import { OpenConfirmModal } from '../components/Modal/ConfirmDialog';
 
 import { useLgApi } from './lgApi';
 import { useLuApi } from './luApi';
@@ -98,6 +101,8 @@ export function useShell(source: EventSource, projectId: string): Shell {
     displayManifestModal,
     updateSkill,
     updateZoomRate,
+    reloadProject,
+    setApplicationLevelError,
   } = useRecoilValue(dispatcherState);
 
   const lgApi = useLgApi(projectId);
@@ -226,20 +231,26 @@ export function useShell(source: EventSource, projectId: string): Shell {
     undo,
     redo,
     commitChanges,
-    addCoachMarkRef: onboardingAddCoachMarkRef,
-    updateUserSettings,
-    announce: setMessage,
     displayManifestModal: (skillId) => displayManifestModal(skillId, projectId),
     updateDialogSchema: async (dialogSchema: DialogSchemaFile) => {
       updateDialogSchema(dialogSchema, projectId);
     },
     updateSkillSetting: (...params) => updateSkill(projectId, ...params),
     updateFlowZoomRate,
+    reloadProject: () => reloadProject(projectId),
     ...lgApi,
     ...luApi,
     ...qnaApi,
     ...triggerApi,
     ...actionApi,
+
+    // application context
+    addCoachMarkRef: onboardingAddCoachMarkRef,
+    announce: setMessage,
+    navigateTo,
+    setApplicationLevelError,
+    updateUserSettings,
+    confirm: OpenConfirmModal,
   };
 
   const currentDialog = useMemo(() => dialogs.find((d) => d.id === dialogId) ?? stubDialog(), [
@@ -277,6 +288,8 @@ export function useShell(source: EventSource, projectId: string): Shell {
     skills,
     skillsSettings: settings.skill || {},
     flowZoomRate,
+    settings,
+    httpClient,
   };
 
   return {