feat: Add data collection dialog and settings

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 = telemetry?.allowDataCollection === null;
+  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/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 { setAllowDataCollection } = useRecoilValue(dispatcherState);
+
+  const handleDismiss = () => {
+    setAllowDataCollection(false);
+  };
+
+  const handleAgree = () => {
+    setAllowDataCollection(true);
+  };
+
+  return (
+    <Dialog
+      hidden={false}
+      modalProps={{
+        isBlocking: true,
+      }}
+      title={formatMessage('Help us improve?')}
+      onDismiss={handleDismiss}
+    >
+      <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={handleDismiss} />
+        <PrimaryButton text={formatMessage('Yes, collect data')} onClick={handleAgree} />
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default DataCollectionDialog;
+export { DataCollectionDialog };

Composer/packages/client/src/pages/setting/app-settings/AppSettings.tsx

@@ -13,7 +13,7 @@ import { RouteComponentProps } from '@reach/router';
 import { useRecoilValue } from 'recoil';
 
 import { isElectron } from '../../../utils/electronUtil';
-import { onboardingState, userSettingsState, dispatcherState } from '../../../recoilModel';
+import { onboardingState, userSettingsState, dispatcherState, ServerSettingsState } from '../../../recoilModel';
 
 import { container, section } from './styles';
 import { SettingToggle } from './SettingToggle';
@@ -28,7 +28,8 @@ const ElectronSettings = lazy(() =>
 const AppSettings: React.FC<RouteComponentProps> = () => {
   const [calloutIsShown, showCallout] = useState(false);
 
-  const { onboardingSetComplete, updateUserSettings } = useRecoilValue(dispatcherState);
+  const { onboardingSetComplete, updateUserSettings, setAllowDataCollection } = useRecoilValue(dispatcherState);
+  const { telemetry } = useRecoilValue(ServerSettingsState);
   const userSettings = useRecoilValue(userSettingsState);
   const { complete } = useRecoilValue(onboardingState);
   const onOnboardingChange = useCallback(
@@ -48,6 +49,10 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
     updateUserSettings({ appLocale });
   };
 
+  const handleDataCollectionChange = () => {
+    setAllowDataCollection(!telemetry?.allowDataCollection);
+  };
+
   const renderElectronSettings = isElectron();
 
   // temporarily commented out until some translation issues are resolved post  Composer 1.2
@@ -184,6 +189,18 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
         <Suspense fallback={<div />}>{renderElectronSettings && <ElectronSettings />}</Suspense>
         <PreviewFeatureToggle />
       </section>
+      <section css={section}>
+        <h2>{formatMessage('Data Collection')}</h2>
+        <SettingToggle
+          checked={!!telemetry?.allowDataCollection}
+          description={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.'
+          )}
+          id="dataCollectionToggle"
+          title={formatMessage('Data collection')}
+          onToggle={handleDataCollectionChange}
+        />
+      </section>
     </div>
   );
 };

Composer/packages/client/src/pages/setting/app-settings/SettingToggle.tsx

@@ -16,7 +16,7 @@ interface ISettingToggleProps {
   checked?: boolean;
   description: React.ReactChild;
   id?: string;
-  image: string;
+  image?: string;
   onToggle: (checked: boolean) => void;
   title: string;
   hideToggle?: boolean;

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { atom, atomFamily } from 'recoil';
-import { FormDialogSchemaTemplate, FeatureFlagMap, BotTemplate, UserSettings } from '@bfc/shared';
+import { FormDialogSchemaTemplate, FeatureFlagMap, BotTemplate, UserSettings, ServerSettings } from '@bfc/shared';
 import { ExtensionMetadata } from '@bfc/extension-client';
 import formatMessage from 'format-message';
 
@@ -237,3 +237,8 @@ export const pageElementState = atom<{ [page in PageMode]?: { [key: string]: any
     qna: {},
   },
 });
+
+export const ServerSettingsState = atom<ServerSettings>({
+  key: getFullyQualifiedKey('serverSettings'),
+  default: {},
+});

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

@@ -0,0 +1,95 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useRecoilValue } from 'recoil';
+import { act } from '@botframework-composer/test-utils/lib/hooks';
+
+import { renderRecoilHook } from '../../../../__tests__/testUtils';
+import { ServerSettingsState } from '../../atoms';
+import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
+import { Dispatcher } from '..';
+import { serverSettingsDispatcher } from '../serverSettings';
+import httpClient from '../../../utils/httpUtil';
+
+jest.mock('../../../utils/httpUtil');
+
+describe('server setting dispatcher', () => {
+  let renderedComponent, dispatcher: Dispatcher;
+  beforeEach(() => {
+    const useRecoilTestHook = () => {
+      const serverSettings = useRecoilValue(ServerSettingsState);
+      const currentDispatcher = useRecoilValue(dispatcherState);
+
+      return {
+        serverSettings,
+        currentDispatcher,
+      };
+    };
+
+    const { result } = renderRecoilHook(useRecoilTestHook, {
+      states: [{ recoilState: ServerSettingsState, initialValue: {} }],
+      dispatcher: {
+        recoilState: dispatcherState,
+        initialValue: {
+          serverSettingsDispatcher,
+        },
+      },
+    });
+    renderedComponent = result;
+    dispatcher = renderedComponent.current.currentDispatcher;
+  });
+
+  it('should set allowDataCollection to false', async () => {
+    await act(async () => {
+      await dispatcher.setAllowDataCollection(false);
+    });
+
+    expect(renderedComponent.current.serverSettings.telemetry.allowDataCollection).toBe(false);
+    expect(httpClient.post).toBeCalledWith(
+      '/settings',
+      expect.objectContaining({
+        settings: {
+          telemetry: {
+            allowDataCollection: false,
+          },
+        },
+      })
+    );
+  });
+
+  it('should set allowDataCollection to true', async () => {
+    (httpClient.post as jest.Mock).mockResolvedValue({});
+
+    await act(async () => {
+      await dispatcher.setAllowDataCollection(true);
+    });
+
+    expect(renderedComponent.current.serverSettings.telemetry.allowDataCollection).toBe(true);
+    expect(httpClient.post).toBeCalledWith(
+      '/settings',
+      expect.objectContaining({
+        settings: {
+          telemetry: {
+            allowDataCollection: true,
+          },
+        },
+      })
+    );
+  });
+
+  it('should fetch settings from server', async () => {
+    (httpClient.get as jest.Mock).mockResolvedValue({
+      data: {
+        telemetry: {
+          allowDataCollection: null,
+        },
+      },
+    });
+
+    await act(async () => {
+      await dispatcher.fetchServerSettings();
+    });
+
+    expect(renderedComponent.current.serverSettings.telemetry.allowDataCollection).toBe(null);
+  });
+});

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

@@ -24,6 +24,7 @@ import { formDialogsDispatcher } from './formDialogs';
 import { botProjectFileDispatcher } from './botProjectFile';
 import { zoomDispatcher } from './zoom';
 import { recognizerDispatcher } from './recognizers';
+import { serverSettingsDispatcher } from './serverSettings';
 
 const createDispatchers = () => {
   return {
@@ -50,6 +51,7 @@ const createDispatchers = () => {
     ...botProjectFileDispatcher(),
     ...zoomDispatcher(),
     ...recognizerDispatcher(),
+    ...serverSettingsDispatcher(),
   };
 };
 

Composer/packages/client/src/recoilModel/dispatchers/serverSettings.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { CallbackInterface, useRecoilCallback } from 'recoil';
+import { produce } from 'immer';
+
+import httpClient from '../../utils/httpUtil';
+import { ServerSettingsState } from '../atoms/appState';
+
+import { logMessage } from './shared';
+
+export const serverSettingsDispatcher = () => {
+  const setAllowDataCollection = useRecoilCallback(
+    (callbackHelpers: CallbackInterface) => async (allowDataCollection: boolean) => {
+      const { set, snapshot } = callbackHelpers;
+      try {
+        const currentSettings = await snapshot.getPromise(ServerSettingsState);
+
+        const settings = produce(currentSettings, (current) => ({
+          ...current,
+          telemetry: {
+            ...current.telemetry,
+            allowDataCollection,
+          },
+        }));
+
+        await httpClient.post('/settings', { settings });
+        set(ServerSettingsState, settings);
+      } catch (error) {
+        logMessage(callbackHelpers, `Error fetching data collection settings: ${error}`);
+      }
+    }
+  );
+
+  const fetchServerSettings = useRecoilCallback((callbackHelpers: CallbackInterface) => async () => {
+    const { set } = callbackHelpers;
+    try {
+      const { data: settings } = await httpClient.get('/settings');
+
+      set(ServerSettingsState, settings);
+    } catch (error) {
+      logMessage(callbackHelpers, `Error fetching data collection settings: ${error}`);
+    }
+  });
+
+  return {
+    fetchServerSettings,
+    setAllowDataCollection,
+  };
+};