Merge branch 'main' into refactor/openDialog

.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/cypress/support/index.ts

@@ -1,12 +1,22 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import axios from 'axios';
+
 import './commands';
 
 beforeEach(() => {
+
   cy.exec('yarn test:integration:clean');
   window.localStorage.setItem('composer:OnboardingState', JSON.stringify({ complete: true }));
   window.sessionStorage.setItem('composer:ProjectIdCache', '');
+  cy.request('post', '/api/settings', {
+    settings: {
+      telemetry: {
+        allowDataCollection: false
+      }
+    }
+  });
 });
 
 after(() => {

Composer/package.json

@@ -70,7 +70,7 @@
     "l10n:extractJson": "node scripts/l10n-extractJson.js",
     "l10n:transform": "node scripts/l10n-transform.js",
     "l10n:babel": "babel --config-file ./babel.l10n.config.js --extensions \"ts,.tsx,.jsx,.js\" --out-dir l10ntemp ./packages",
-    "l10n": "yarn l10n:babel && yarn l10n:extract && yarn l10n:transform packages/server/src/locales/en-US.json && yarn l10n:extractJson packages/server/schemas"
+    "l10n": "yarn l10n:babel && yarn l10n:extract && yarn l10n:transform packages/server/src/locales/en-US.json && yarn l10n:extractJson packages/server/schemas && rimraf l10ntemp"
   },
   "husky": {
     "hooks": {

Composer/packages/adaptive-flow/package.json

@@ -29,7 +29,7 @@
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "adaptive-expressions": "^4.11.0-dev.20201013.d5458bf",
-    "botbuilder-lg": "4.11.0-dev.20201010.6e4a99e",
+    "botbuilder-lg": "4.12.0-dev-20201119.9afa93623c3e",
     "create-react-class": "^15.6.3",
     "d3": "^5.9.1",
     "dagre": "^0.8.4",

Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx

@@ -180,7 +180,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
                         ElementWrapper: VisualEditorElementWrapper,
                       }}
                       sdkschema={schema?.definitions as SchemaDefinitions}
-                      uischema={{ ...schemaFromPlugins, ...customFlowSchema }}
+                      uischema={{ ...customFlowSchema, ...schemaFromPlugins }}
                       widgets={widgetsFromPlugins}
                       onEvent={(eventName, eventData) => {
                         divRef.current?.focus({ preventScroll: true });

Composer/packages/adaptive-form/src/components/fields/RecognizerField/RecognizerField.tsx

@@ -20,7 +20,9 @@ export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = (prop
 
   useMigrationEffect(value, onChange);
   const { recognizers: recognizerConfigs, currentRecognizer } = useRecognizerConfig();
-  const dropdownOptions = useMemo(() => getDropdownOptions(recognizerConfigs), [recognizerConfigs]);
+  const dropdownOptions = useMemo(() => getDropdownOptions(recognizerConfigs, shellData, shellApi), [
+    recognizerConfigs,
+  ]);
 
   const RecognizerEditor = currentRecognizer?.recognizerEditor;
   const widget = RecognizerEditor ? <RecognizerEditor {...props} /> : null;

Composer/packages/adaptive-form/src/components/fields/RecognizerField/getDropdownOptions.ts

@@ -1,26 +1,26 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { RecognizerSchema, FallbackRecognizerKey } from '@bfc/extension-client';
+import { RecognizerSchema, FallbackRecognizerKey, ShellApi, ShellData } from '@bfc/extension-client';
 
 import { recognizerOrderMap } from './defaultRecognizerOrder';
 import { mapRecognizerSchemaToDropdownOption } from './mappers';
 
-const getRankScore = (r: RecognizerSchema) => {
+const getRankScore = (r: RecognizerSchema, shellData: ShellData, shellApi: ShellApi) => {
   // Always put disabled recognizer behind. Handle 'disabled' before 'default'.
-  if (r.disabled) return Number.MAX_VALUE;
+  if ((typeof r.disabled === 'function' && r.disabled(shellData, shellApi)) || r.disabled) return Number.MAX_VALUE;
   // Always put default recognzier ahead.
   if (r.default) return -1;
   // Put fallback recognizer behind.
   if (r.id === FallbackRecognizerKey) return Number.MAX_VALUE - 1;
   return recognizerOrderMap[r.id] ?? Number.MAX_VALUE - 1;
 };
 
-export const getDropdownOptions = (recognizerConfigs: RecognizerSchema[]) => {
+export const getDropdownOptions = (recognizerConfigs: RecognizerSchema[], shellData: ShellData, shellApi: ShellApi) => {
   return recognizerConfigs
-    .filter((r) => !r.disabled)
+    .filter((r) => (typeof r.disabled === 'function' && !r.disabled(shellData, shellApi)) || !r.disabled)
     .sort((r1, r2) => {
-      return getRankScore(r1) - getRankScore(r2);
+      return getRankScore(r1, shellData, shellApi) - getRankScore(r2, shellData, shellApi);
     })
     .map(mapRecognizerSchemaToDropdownOption);
 };

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

@@ -31,6 +31,7 @@
     "@bfc/ui-plugin-dialog-schema-editor": "*",
     "@bfc/ui-plugin-lg": "*",
     "@bfc/ui-plugin-luis": "*",
+    "@bfc/ui-plugin-orchestrator": "*",
     "@bfc/ui-plugin-prompts": "*",
     "@bfc/ui-plugin-select-dialog": "*",
     "@bfc/ui-plugin-select-skill-dialog": "*",
@@ -42,7 +43,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/App.tsx

@@ -16,19 +16,16 @@ initializeIcons(undefined, { disableWarnings: true });
 
 export const App: React.FC = () => {
   const { appLocale } = useRecoilValue(userSettingsState);
-  const { fetchFeatureFlags } = useRecoilValue(dispatcherState);
+  const { fetchExtensions, fetchFeatureFlags, fetchServerSettings } = useRecoilValue(dispatcherState);
+
   useEffect(() => {
     loadLocale(appLocale);
   }, [appLocale]);
 
-  useEffect(() => {
-    fetchFeatureFlags();
-  }, []);
-
-  const { fetchExtensions } = useRecoilValue(dispatcherState);
-
   useEffect(() => {
     fetchExtensions();
+    fetchFeatureFlags();
+    fetchServerSettings();
   }, []);
 
   return (

Composer/packages/client/src/components/AppComponents/Assistant.tsx

@@ -7,17 +7,24 @@ import { Suspense, Fragment } from 'react';
 import React from 'react';
 
 import { isElectron } from './../../utils/electronUtil';
-import { onboardingState } from './../../recoilModel';
+import { ServerSettingsState, onboardingState } from './../../recoilModel';
 
 const Onboarding = React.lazy(() => import('./../../Onboarding/Onboarding'));
 const AppUpdater = React.lazy(() => import('./../AppUpdater').then((module) => ({ default: module.AppUpdater })));
+const DataCollectionDialog = React.lazy(() => import('./../DataCollectionDialog'));
 
 export const Assistant = () => {
+  const { telemetry } = useRecoilValue(ServerSettingsState);
   const onboarding = useRecoilValue(onboardingState);
   const renderAppUpdater = isElectron();
+
+  const renderDataCollectionDialog = typeof telemetry?.allowDataCollection === 'undefined';
+  const renderOnboarding = !renderDataCollectionDialog && !onboarding.complete;
+
   return (
     <Fragment>
-      <Suspense fallback={<div />}>{!onboarding.complete && <Onboarding />}</Suspense>
+      <Suspense fallback={<div />}>{renderDataCollectionDialog && <DataCollectionDialog />}</Suspense>
+      <Suspense fallback={<div />}>{renderOnboarding && <Onboarding />}</Suspense>
       <Suspense fallback={<div />}>{renderAppUpdater && <AppUpdater />}</Suspense>
     </Fragment>
   );

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { FeatureFlagKey } from '@bfc/shared';
+import { FeatureFlagKey } from '@botframework-composer/types';
 import React, { Fragment } from 'react';
 
 import { useFeatureFlag } from '../utils/hooks';

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

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import formatMessage from 'format-message';
+import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import React from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { dispatcherState } from '../recoilModel';
+
+const DataCollectionDialog: React.FC = () => {
+  const { updateServerSettings } = useRecoilValue(dispatcherState);
+
+  const handleDataCollectionChange = (allowDataCollection: boolean) => () => {
+    updateServerSettings({
+      telemetry: {
+        allowDataCollection,
+      },
+    });
+  };
+
+  return (
+    <Dialog
+      hidden={false}
+      modalProps={{
+        isBlocking: true,
+      }}
+      title={formatMessage('Help us improve?')}
+      onDismiss={handleDataCollectionChange(false)}
+    >
+      <p>
+        {formatMessage(
+          'Composer includes a telemetry feature that collects usage information. It is important that the Composer team understands how the tool is being used so that it can be improved.'
+        )}
+      </p>
+      <p>{formatMessage('You can turn data collection on or off at any time in the Application Settings.')}</p>
+      <p>
+        <Link
+          aria-label={formatMessage('Privacy statement')}
+          href={'https://privacy.microsoft.com/privacystatement'}
+          target={'_blank'}
+        >
+          {formatMessage('Privacy statement')}
+        </Link>
+      </p>
+      <DialogFooter>
+        <DefaultButton text={formatMessage('Not now')} onClick={handleDataCollectionChange(false)} />
+        <PrimaryButton text={formatMessage('Yes, collect data')} onClick={handleDataCollectionChange(true)} />
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default DataCollectionDialog;
+export { DataCollectionDialog };

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/ProjectTree/ProjectTree.tsx

@@ -443,7 +443,7 @@ export const ProjectTree: React.FC<Props> = ({
         `}
         role="grid"
       >
-        <TreeItem showProps isSubItemActive={false} link={link} textWidth={leftSplitWidth - TREE_PADDING} />
+        <TreeItem hasChildren showProps isSubItemActive={false} link={link} textWidth={leftSplitWidth - TREE_PADDING} />
       </span>
     );
   };