Remove language specific features from core and into runtime plugin

Composer/cypress/integration/NotificationPage.spec.ts

@@ -44,9 +44,6 @@ context('Notification Page', () => {
   it('can show dialog expression error ', () => {
     cy.visitPage('Design');
 
-    // click the logo to clear any stray tooltips from page navigation
-    cy.findByAltText('Composer Logo').click();
-
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('WelcomeUser').click();
     });

Composer/cypress/support/commands.ts

@@ -26,6 +26,9 @@ Cypress.Commands.add('withinEditor', (editorName, cb) => {
 Cypress.Commands.add('visitPage', (page) => {
   cy.findByTestId(`LeftNav-CommandBarButton${page}`).click();
   cy.findByTestId('ActiveLeftNavItem').should('contain', page);
+
+  // click the logo to clear any stray tooltips from page navigation
+  cy.findByAltText('Composer Logo').click({ force: true });
 });
 
 Cypress.Commands.add('enterTextAndSubmit', (textElement: string, text: string, submitBtn?: string) => {

Composer/package.json

@@ -40,11 +40,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": "yarn build:plugins:localpublish && yarn build:plugins:samples && yarn build:plugins:azurePublish && yarn build:plugins:azureFunctionsPublish",
+    "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:azureFunctionsPublish": "cd plugins/azureFunctionsPublish && 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\"",
@@ -120,4 +120,4 @@
   "dependencies": {
     "cross-env": "^6.0.3"
   }
-}
+}

Composer/packages/client/__tests__/components/CreationFlow/LocationBrowser/FileSelector.test.tsx

@@ -82,14 +82,18 @@ describe('<FileSelector/>', () => {
     expect(await component.findByText('You do not have permission to save bots here')).toBeInTheDocument();
   });
 
-  it('should update folder name', async () => {
+  it('should create a new folder', async () => {
     const component = renderComponent();
     const createFolderBtn = await component.findByText('create new folder');
     fireEvent.click(createFolderBtn);
     const textField = await component.findByTestId('newFolderTextField');
     fireEvent.change(textField, { target: { value: 'newFolder' } });
     fireEvent.keyDown(textField, { key: 'Enter' });
-    //locally this should be 'C:\\test-folder\\Desktop', but it should be 'C:/test-folder/Desktop' online
-    expect(createFolder).toBeCalledWith('C:/test-folder/Desktop', 'newFolder');
+    //locally this should be 'C:\\test-folder\\Desktop', but online it should be 'C:/test-folder/Desktop'
+    expect(
+      createFolder.mock.calls[0][0] === 'C:/test-folder/Desktop' ||
+        createFolder.mock.calls[0][0] === 'C:\\test-folder\\Desktop'
+    ).toBeTruthy();
+    expect(createFolder.mock.calls[0][1]).toBe('newFolder');
   });
 });

Composer/packages/client/config/webpack.config.js

@@ -17,6 +17,7 @@ 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 BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
@@ -492,6 +493,11 @@ module.exports = function (webpackEnv) {
             new RegExp('/[^/]+\\.[^/]+$'),
           ],
         }),
+      // Generate static visualization of the bundle
+      new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        openAnalyzer: false,
+      }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell Webpack to provide empty mocks for them so importing them works.

Composer/packages/client/package.json

@@ -53,7 +53,8 @@
     "react-dom": "16.13.0",
     "react-frame-component": "^4.0.2",
     "react-timeago": "^4.4.0",
-    "styled-components": "^4.1.3"
+    "styled-components": "^4.1.3",
+    "webpack-bundle-analyzer": "^3.8.0"
   },
   "browserslist": [
     ">0.2%",

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

@@ -30,7 +30,15 @@ export const TestController: React.FC = () => {
   const botActionRef = useRef(null);
   const notifications = useNotifications();
   const { botEndpoints, botName, botStatus, dialogs, luFiles, settings, projectId, botLoadErrorMsg } = state;
-  const { publishToTarget, onboardingAddCoachMarkRef, publishLuis, getPublishStatus, setBotStatus } = actions;
+  const {
+    publishToTarget,
+    onboardingAddCoachMarkRef,
+    publishLuis,
+    getPublishStatus,
+    setBotStatus,
+    startPollingRuntime,
+    stopPollingRuntime,
+  } = actions;
   const connected = botStatus === BotStatus.connected;
   const publishing = botStatus === BotStatus.publishing;
   const reloading = botStatus === BotStatus.reloading;
@@ -48,12 +56,26 @@ export const TestController: React.FC = () => {
     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() {

Composer/packages/client/src/constants.ts

@@ -102,6 +102,11 @@ export enum ActionTypes {
   REMOVE_SKILL_MANIFEST = 'REMOVE_SKILL_MANIFEST',
   DISPLAY_SKILL_MANIFEST_MODAL = 'DISPLAY_SKILL_MANIFEST_MODAL',
   DISMISS_SKILL_MANIFEST_MODAL = 'DISMISS_SKILL_MANIFEST_MODAL',
+  RUNTIME_POLLING_UPDATE = 'RUNTIME_POLLING_UPDATE',
+  SET_PUBLISH_TARGETS = 'SET_PUBLISH_TARGETS',
+  SET_RUNTIME_SETTINGS = 'SET_RUNTIME_SETTINGS',
+  SET_CUSTOM_RUNTIME_TOGGLE = 'SET_CUSTOM_RUNTIME_TOGGLE',
+  SET_RUNTIME_FIELD = 'SET_RUNTIME_FIELD',
 }
 
 export const Tips = {

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

@@ -221,14 +221,14 @@ const Publish: React.FC<PublishPageProps> = (props) => {
 
   const savePublishTarget = useCallback(
     async (name: string, type: string, configuration: string) => {
-      const target = (settings.publishTargets || []).concat([
+      const targets = (settings.publishTargets || []).concat([
         {
           name,
           type,
           configuration,
         },
       ]);
-      await actions.setSettings(projectId, { ...settings, publishTargets: target });
+      await actions.setPublishTargets(targets);
       onSelectTarget(name);
     },
     [settings.publishTargets, projectId, botName]
@@ -248,7 +248,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
         configuration,
       };
 
-      await actions.setSettings(projectId, { ...settings, publishTargets: targets });
+      await actions.setPublishTargets(targets);
 
       onSelectTarget(name);
     },
@@ -314,7 +314,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
           }
         });
 
-        await actions.setSettings(projectId, { ...settings, publishTargets: updatedPublishTargets });
+        await actions.setPublishTargets(updatedPublishTargets);
       }
     },
     [projectId, selectedTarget, settings.publishTargets]
@@ -339,8 +339,8 @@ const Publish: React.FC<PublishPageProps> = (props) => {
 
       if (result) {
         if (settings.publishTargets && settings.publishTargets.length > index) {
-          const target = settings.publishTargets.slice(0, index).concat(settings.publishTargets.slice(index + 1));
-          await actions.setSettings(projectId, { ...settings, publishTargets: target });
+          const targets = settings.publishTargets.slice(0, index).concat(settings.publishTargets.slice(index + 1));
+          await actions.setPublishTargets(targets);
           // redirect to all profiles
           setSelectedTarget(undefined);
           onSelectTarget('all');

Composer/packages/client/src/pages/setting/dialog-settings/index.tsx

@@ -30,8 +30,7 @@ export const DialogSettings: React.FC<RouteComponentProps> = () => {
 
   const saveChangeResult = (result) => {
     try {
-      const mergedResult = result;
-      actions.setSettings(projectId, mergedResult);
+      actions.setSettings(projectId, result);
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err.message);

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

@@ -18,12 +18,13 @@ import { breathingSpace, runtimeSettingsStyle, runtimeControls, runtimeToggle, c
 
 export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
   const { state, actions } = useContext(StoreContext);
+  const { setCustomRuntime, setRuntimeField } = actions;
   const { botName, settings, projectId } = state;
   const [formDataErrors, setFormDataErrors] = useState({ command: '', path: '' });
   const [ejectModalVisible, setEjectModalVisible] = useState(false);
 
-  const changeEnabled = (_, on) => {
-    actions.setSettings(projectId, { ...settings, runtime: { ...settings.runtime, customRuntime: on } });
+  const handleChangeToggle = (_, isOn = false) => {
+    setCustomRuntime(projectId, isOn);
   };
 
   const updateSetting = (field) => (e, newValue) => {
@@ -34,7 +35,7 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
       error = 'This is a required field.';
     }
 
-    actions.setSettings(projectId, { ...settings, runtime: { ...settings.runtime, [field]: newValue } });
+    setRuntimeField(projectId, field, newValue);
 
     if (valid) {
       setFormDataErrors({ ...formDataErrors, [field]: '' });
@@ -53,9 +54,9 @@ export const RuntimeSettings: React.FC<RouteComponentProps> = () => {
     <div css={runtimeToggle}>
       <Toggle
         inlineLabel
-        checked={settings.runtime && settings.runtime.customRuntime === true}
+        checked={settings.runtime?.customRuntime}
         label={formatMessage('Use custom runtime')}
-        onChange={changeEnabled}
+        onChange={handleChangeToggle}
       />
     </div>
   );

Composer/packages/client/src/store/action/eject.ts

@@ -5,7 +5,7 @@ import { ActionCreator } from '../types';
 import { ActionTypes } from '../../constants';
 
 import httpClient from './../../utils/httpUtil';
-import { setSettings } from './setting';
+import { setRuntimeSettings } from './setting';
 
 export const getRuntimeTemplates: ActionCreator = async ({ dispatch }) => {
   try {
@@ -23,26 +23,15 @@ export const getRuntimeTemplates: ActionCreator = async ({ dispatch }) => {
 };
 
 export const ejectRuntime: ActionCreator = async (store, projectId, name) => {
-  const { dispatch, getState } = store;
+  const { dispatch } = store;
   try {
     const response = await httpClient.post(`/runtime/eject/${projectId}/${name}`);
     dispatch({
       type: ActionTypes.EJECT_SUCCESS,
       payload: response.data,
     });
-    if (response.data.settings && response.data.settings.path) {
-      const { settings: oldsettings } = getState();
-      setSettings(store, projectId, {
-        ...oldsettings,
-        runtime: {
-          ...oldsettings.runtime,
-          customRuntime: true,
-          key: response.data.settings.key,
-          name: response.data.settings.name,
-          path: response.data.settings.path,
-          command: response.data.settings.startCommand,
-        },
-      });
+    if (response.data.settings?.path) {
+      setRuntimeSettings(store, projectId, response.data.settings.path, response.data.settings.startCommand);
     }
   } catch (err) {
     dispatch({

Composer/packages/client/src/store/action/publisher.ts

@@ -5,9 +5,38 @@ import formatMessage from 'format-message';
 
 import { ActionCreator } from '../types';
 import filePersistence from '../persistence/FilePersistence';
-import { ActionTypes } from '../../constants';
+import { ActionTypes, DefaultPublishConfig } from '../../constants';
 
 import httpClient from './../../utils/httpUtil';
+
+// this is the interval at which the runtime manager will be polled
+const POLLING_INTERVAL = 2500;
+
+export const stopPollingRuntime: ActionCreator = ({ getState, dispatch }) => {
+  const botStatusInterval = getState().botStatusInterval;
+  if (botStatusInterval) {
+    clearInterval(botStatusInterval);
+  }
+  dispatch({
+    type: ActionTypes.RUNTIME_POLLING_UPDATE,
+    payload: null,
+  });
+};
+
+export const startPollingRuntime: ActionCreator = (store) => {
+  const botStatusInterval = store.getState().botStatusInterval;
+  const projectId = store.getState().projectId;
+  if (!botStatusInterval) {
+    const cancelInterval = setInterval(function () {
+      getPublishStatus(store, projectId, DefaultPublishConfig);
+    }, POLLING_INTERVAL);
+    store.dispatch({
+      type: ActionTypes.RUNTIME_POLLING_UPDATE,
+      payload: cancelInterval,
+    });
+  }
+};
+
 export const getPublishTargetTypes: ActionCreator = async ({ dispatch }) => {
   try {
     const response = await httpClient.get(`/publish/types`);

Composer/packages/client/src/store/action/setting.ts

@@ -13,3 +13,42 @@ export const setSettings: ActionCreator = async ({ dispatch }, projectId: string
     },
   });
 };
+
+export const setPublishTarget: ActionCreator = async ({ dispatch }, _, publishTarget) => {
+  dispatch({
+    type: ActionTypes.SET_PUBLISH_TARGETS,
+    payload: {
+      publishTarget,
+    },
+  });
+};
+
+export const setRuntimeSettings: ActionCreator = async ({ dispatch }, projectId: string, path, command) => {
+  dispatch({
+    type: ActionTypes.SET_RUNTIME_SETTINGS,
+    payload: {
+      projectId,
+      path,
+      command,
+    },
+  });
+};
+
+export const setCustomRuntime: ActionCreator = async ({ dispatch }, _, isOn) => {
+  dispatch({
+    type: ActionTypes.SET_CUSTOM_RUNTIME_TOGGLE,
+    payload: {
+      isOn,
+    },
+  });
+};
+
+export const setRuntimeField: ActionCreator = async ({ dispatch }, _, field, newValue) => {
+  dispatch({
+    type: ActionTypes.SET_RUNTIME_FIELD,
+    payload: {
+      field,
+      newValue,
+    },
+  });
+};

Composer/packages/client/src/store/index.tsx

@@ -67,6 +67,7 @@ export const initialBotState: BotState = {
   diagnostics: [],
   remoteEndpoints: {},
   botStatus: BotStatus.unConnected,
+  botStatusInterval: undefined,
   botLoadErrorMsg: { title: '', message: '' },
   lgFiles: [],
   schemas: {},

Composer/packages/client/src/store/persistence/FilePersistence.ts

@@ -25,6 +25,8 @@ const actionType2ChangeType = {
   [ActionTypes.REMOVE_SKILL_MANIFEST]: { changeType: ChangeType.DELETE, fileExtension: FileExtensions.Manifest },
   [ActionTypes.UPDATE_SKILL_MANIFEST]: { changeType: ChangeType.UPDATE, fileExtension: FileExtensions.Manifest },
   [ActionTypes.SYNC_ENV_SETTING]: { changeType: ChangeType.UPDATE, fileExtension: FileExtensions.Setting },
+  [ActionTypes.SET_PUBLISH_TARGETS]: { changeType: ChangeType.UPDATE, fileExtension: FileExtensions.Setting },
+  [ActionTypes.SET_RUNTIME_SETTINGS]: { changeType: ChangeType.UPDATE, fileExtension: FileExtensions.Setting },
 };
 
 class FilePersistence {