feat: enable js runtime (preview)

.github/workflows/main.yml

@@ -49,7 +49,7 @@ jobs:
           base-path: ./Composer
 
   botproject:
-    name: BotProject
+    name: BotProject-dotnet
     runs-on: windows-latest
     timeout-minutes: 20
 
@@ -67,11 +67,31 @@ jobs:
         run: dotnet test
         working-directory: runtime/dotnet/tests
 
+  nodejs:
+    name: BotProject-nodejs
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set Node Version
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.13.0
+      - name: npm install
+        run: npm install
+        working-directory: runtime/node
+      - name: npm build
+        run: npm run build
+        working-directory: runtime/node
+      - name: npm test
+        run: npm run test
+        working-directory: runtime/node
   # docker-build:
   #   name: Docker Build
   #   timeout-minutes: 20
   #   runs-on: ubuntu-latest
-
   #   steps:
   #     - name: Checkout
   #       uses: actions/checkout@v2

.vscode/launch.json

@@ -22,7 +22,7 @@
       ],
       "sourceMaps": true,
       "cwd": "${workspaceFolder}/Composer/packages/tools/language-servers/language-understanding/demo/src",
-      "protocol": "inspector",
+      "protocol": "inspector"
     },
     {
       "name": "LG LSP Server",
@@ -38,20 +38,16 @@
       ],
       "sourceMaps": true,
       "cwd": "${workspaceFolder}/Composer/packages/tools/language-servers/language-generation/demo/src",
-      "protocol": "inspector",
+      "protocol": "inspector"
     },
     {
       "type": "node",
       "request": "launch",
       "name": "Server: Launch",
-      "args": [
-        "./build/server.js"
-      ],
+      "args": ["./build/server.js"],
       "preLaunchTask": "server: build",
       "restart": true,
-      "outFiles": [
-        "./build/*"
-      ],
+      "outFiles": ["./build/*"],
       "envFile": "${workspaceFolder}/Composer/packages/server/.env",
       "outputCapture": "std",
       "cwd": "${workspaceFolder}/Composer/packages/server"
@@ -63,14 +59,8 @@
       "name": "Jest Debug",
       "program": "${workspaceRoot}/Composer/node_modules/jest/bin/jest",
       "stopOnEntry": false,
-      "args": [
-        "--runInBand",
-        "--env=jsdom",
-        "--config=jest.config.js"
-      ],
-      "runtimeArgs": [
-        "--inspect-brk"
-      ],
+      "args": ["--runInBand", "--env=jsdom", "--config=jest.config.js"],
+      "runtimeArgs": ["--inspect-brk"],
       "cwd": "${workspaceRoot}/Composer/packages/server",
       "sourceMaps": true,
       "console": "integratedTerminal"
@@ -87,11 +77,9 @@
       "request": "launch",
       "name": "Electron Main Process",
       "runtimeExecutable": "${workspaceRoot}/Composer/node_modules/.bin/electron",
-      "args": [
-        "${workspaceRoot}/Composer/packages/electron-server",
-      ],
+      "args": ["${workspaceRoot}/Composer/packages/electron-server"],
       "env": {
-        "NODE_ENV": "development",
+        "NODE_ENV": "development"
       },
       "outputCapture": "std"
     },

Composer/.npmrc

@@ -1 +1,2 @@
 @bfcomposer:registry=https://botbuilder.myget.org/F/botbuilder-declarative/npm/
+scripts-prepend-node-path=true

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -4,9 +4,9 @@
 context('Luis Deploy', () => {
   beforeEach(() => {
     cy.server();
-    cy.route('POST', '/api/publish/*/publish/default', { endpointURL: 'anything' });
+    cy.route('POST', '/api/publish/*/publish/default', { endpointURL: 'anything', status: 202 });
     cy.route('POST', '/api/projects/*/settings', 'OK');
-    cy.route('GET', '/api/publish/*/status/default', { endpointURL: 'anything' });
+    cy.route('GET', '/api/publish/*/status/default', { endpointURL: 'anything', status: 200 });
     cy.visit('/home');
     cy.createBot('ToDoBotWithLuisSample');
   });

Composer/package.json

@@ -41,7 +41,11 @@
     "build:server": "yarn workspace @bfc/server build",
     "build:client": "yarn workspace @bfc/client build",
     "build:tools": "yarn workspace @bfc/tools build:all",
-    "build:plugins": "cd plugins && yarn install && yarn build:all",
+    "build:plugins": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:runtimes",
+    "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",
     "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/src/components/TestController/TestController.tsx

@@ -8,8 +8,8 @@ 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 { defaultPublishConfig } from '@bfc/shared';
 
-import { DefaultPublishConfig } from '../../constants';
 import {
   botNameState,
   botStatusState,
@@ -49,10 +49,12 @@ export const botButton = css`
 `;
 
 // -------------------- TestController -------------------- //
-
+const POLLING_INTERVAL = 2500;
 export const TestController: React.FC = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const [calloutVisible, setCalloutVisible] = useState(false);
+  const [botStatusInterval, setBotStatusInterval] = useState<NodeJS.Timeout | undefined>(undefined);
+
   const botActionRef = useRef(null);
   const notifications = useNotifications();
   const botName = useRecoilValue(botNameState);
@@ -82,20 +84,34 @@ export const TestController: React.FC = () => {
 
   useEffect(() => {
     if (projectId) {
-      getPublishStatus(projectId, DefaultPublishConfig);
+      getPublishStatus(projectId, defaultPublishConfig);
     }
   }, [projectId]);
 
   useEffect(() => {
     switch (botStatus) {
       case BotStatus.failed:
         openCallout();
+        stopPollingRuntime();
         setBotStatus(BotStatus.pending);
         break;
       case BotStatus.published:
+        stopPollingRuntime();
         handleLoadBot();
         break;
+      case BotStatus.reloading:
+        startPollingRuntime();
+        break;
+      default:
+      case BotStatus.connected:
+        stopPollingRuntime();
+        break;
     }
+    // return the stoppolling function so the component will clean up
+    return () => {
+      stopPollingRuntime();
+      return;
+    };
   }, [botStatus]);
 
   function dismissDialog() {
@@ -114,6 +130,23 @@ export const TestController: React.FC = () => {
     setCalloutVisible(true);
   }
 
+  function startPollingRuntime() {
+    if (!botStatusInterval) {
+      const cancelInterval = setInterval(() => {
+        // get publish status
+        getPublishStatus(projectId, defaultPublishConfig);
+      }, POLLING_INTERVAL);
+      setBotStatusInterval(cancelInterval);
+    }
+  }
+
+  function stopPollingRuntime() {
+    if (botStatusInterval) {
+      clearInterval(botStatusInterval);
+      setBotStatusInterval(undefined);
+    }
+  }
+
   async function handlePublishLuis(luisConfig) {
     setBotStatus(BotStatus.publishing);
     dismissDialog();
@@ -124,7 +157,7 @@ export const TestController: React.FC = () => {
   async function handleLoadBot() {
     setBotStatus(BotStatus.reloading);
     const sensitiveSettings = settingsStorage.get(projectId);
-    await publishToTarget(projectId, DefaultPublishConfig, { comment: '' }, sensitiveSettings);
+    await publishToTarget(projectId, defaultPublishConfig, { comment: '' }, sensitiveSettings);
   }
 
   function isLuisConfigComplete(config) {

Composer/packages/client/src/constants.ts

@@ -179,11 +179,6 @@ export enum AppUpdaterStatus {
   UPDATE_SUCCEEDED,
 }
 
-export const DefaultPublishConfig = {
-  name: 'default',
-  type: 'localpublish',
-};
-
 export const EmptyBotTemplateId = 'EmptyBot';
 
 export const nameRegex = /^[a-zA-Z0-9-_]+$/;

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

@@ -8,8 +8,8 @@ import { RouteComponentProps } from '@reach/router';
 import formatMessage from 'format-message';
 import { Dialog, DialogType } from 'office-ui-fabric-react/lib/Dialog';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { useRecoilValue } from 'recoil';
 import { PublishTarget } from '@bfc/shared';
+import { useRecoilValue } from 'recoil';
 
 import settingsStorage from '../../utils/dialogSettingStorage';
 import { projectContainer } from '../design/styles';
@@ -224,7 +224,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
         },
       ]);
     }
-  }, [publishHistory, selectedTargetName]);
+  }, [publishHistory, selectedTargetName, settings.publishTargets]);
 
   // check history to see if a 202 is found
   useEffect(() => {

Composer/packages/client/src/pages/setting/runtime-settings/RuntimeSettings.tsx

@@ -20,6 +20,7 @@ import {
   dispatcherState,
   ejectRuntimeSelector,
   boilerplateVersionState,
+  isEjectRuntimeExistState,
 } from '../../../recoilModel';
 import { OpenConfirmModal } from '../../../components/Modal/ConfirmDialog';
 import { LoadingSpinner } from '../../../components/LoadingSpinner';
@@ -33,17 +34,22 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
   const settings = useRecoilValue(settingsState);
   const projectId = useRecoilValue(projectIdState);
   const boilerplateVersion = useRecoilValue(boilerplateVersionState);
-
-  const { setCustomRuntime, setRuntimeField, getBoilerplateVersion, updateBoilerplate } = useRecoilValue(
-    dispatcherState
-  );
+  const isEjectRuntimeExist = useRecoilValue(isEjectRuntimeExistState);
+  const {
+    setCustomRuntime,
+    setRuntimeField,
+    getBoilerplateVersion,
+    updateBoilerplate,
+    stopPublishBot,
+  } = useRecoilValue(dispatcherState);
   const runtimeEjection = useRecoilValue(ejectRuntimeSelector);
 
   const [formDataErrors, setFormDataErrors] = useState({ command: '', path: '' });
   const [ejectModalVisible, setEjectModalVisible] = useState(false);
   const [working, setWorking] = useState(false);
   const [ejecting, setEjecting] = useState(false);
   const [needsUpdate, setNeedsUpdate] = useState(false);
+  const [templateKey, setTemplateKey] = useState('');
 
   useEffect(() => {
     // check the status of the boilerplate material and see if it requires an update
@@ -54,6 +60,13 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
     setNeedsUpdate(boilerplateVersion.updateRequired || false);
   }, [boilerplateVersion.updateRequired]);
 
+  useEffect(() => {
+    if (isEjectRuntimeExist && templateKey) {
+      confirmReplaceEject(templateKey);
+      setTemplateKey('');
+    }
+  }, [isEjectRuntimeExist, templateKey]);
+
   const handleChangeToggle = (_, isOn = false) => {
     setCustomRuntime(projectId, isOn);
   };
@@ -104,6 +117,7 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
     closeEjectModal();
     await runtimeEjection?.onAction(projectId, templateKey);
     setEjecting(false);
+    setTemplateKey(templateKey);
   };
 
   const callUpdateBoilerplate = async () => {
@@ -125,6 +139,20 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
     }
   };
 
+  const confirmReplaceEject = async (templateKey: string) => {
+    const title = formatMessage('Runtime already exists');
+    const msg = formatMessage('Are you sure you want to stop current runtime and replace them?');
+    const res = await OpenConfirmModal(title, msg);
+    if (res) {
+      setEjecting(true);
+      // stop runtime
+      await stopPublishBot(projectId);
+      // replace the runtime
+      await runtimeEjection?.onAction(projectId, templateKey, true);
+      setEjecting(false);
+    }
+  };
+
   return botName ? (
     <div css={runtimeSettingsStyle}>
       {header()}

Composer/packages/client/src/pages/setting/runtime-settings/ejectModal.tsx

@@ -22,6 +22,7 @@ export interface EjectModalProps {
 
 export const EjectModal: React.FC<EjectModalProps> = (props) => {
   const [selectedTemplate, setSelectedTemplate] = useState<string | undefined>();
+
   const runtimeTemplates = useRecoilValue(runtimeTemplatesState);
   const { fetchRuntimeTemplates } = useRecoilValue(dispatcherState);
 

Composer/packages/client/src/recoilModel/atoms/botState.ts

@@ -17,7 +17,6 @@ import { BotLoadError, DesignPageLocation } from '../../recoilModel/types';
 
 import { PublishType, BreadcrumbItem } from './../../recoilModel/types';
 import { BotStatus } from './../../constants';
-
 const getFullyQualifiedKey = (value: string) => {
   return `Bot_${value}_State`;
 };
@@ -204,3 +203,8 @@ export const onDelLanguageDialogCompleteState = atom<any>({
   key: getFullyQualifiedKey('onDelLanguageDialogComplete'),
   default: { func: undefined },
 });
+
+export const isEjectRuntimeExistState = atom<boolean>({
+  key: getFullyQualifiedKey('isEjectRuntimeExist'),
+  default: false,
+});

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

@@ -120,12 +120,14 @@ describe('setting dispatcher', () => {
 
   it('should update RuntimeSettings', async () => {
     await act(async () => {
-      await dispatcher.setRuntimeSettings('', 'path', 'command');
+      await dispatcher.setRuntimeSettings('', { path: 'path', command: 'command', key: 'key', name: 'name' });
     });
 
     expect(renderedComponent.current.settings.runtime.customRuntime).toBeTruthy();
     expect(renderedComponent.current.settings.runtime.path).toBe('path');
     expect(renderedComponent.current.settings.runtime.command).toBe('command');
+    expect(renderedComponent.current.settings.runtime.key).toBe('key');
+    expect(renderedComponent.current.settings.runtime.name).toBe('name');
   });
 
   it('should update customRuntime', async () => {