feat: telemetry api (#4968)

* feat: telemetry api

* lint

* persist machine id

* move telemetry settings to user settings

* reverted changes to en-US

* pool telemetry events

* changed batch size

* fix uuid

* add telemetry classes

* requested changes

* shorted interval

* fix integration test

* change parameter type

Co-authored-by: Andy Brown <asbrown002@gmail.com>

Composer/cypress/integration/ToDoBot.spec.ts

@@ -3,6 +3,7 @@
 
 context('ToDo Bot', () => {
   before(() => {
+    window.localStorage.setItem('composer:userSettings', JSON.stringify({ telemetry: { allowDataCollection: false } }));
     cy.visit('/home');
     cy.createBot('TodoSample');
     cy.findByTestId('WelcomeModalCloseIcon').click();

Composer/cypress/support/index.ts

@@ -1,21 +1,13 @@
 // 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:userSettings', JSON.stringify({ telemetry: { allowDataCollection: false } }));
   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/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -30,6 +30,7 @@ describe('<CreationFlow/>', () => {
       setCreationFlowStatus: jest.fn(),
       navTo: jest.fn(),
       saveTemplateId: jest.fn(),
+      setCurrentPageMode: jest.fn(),
     });
     set(creationFlowStatusState, CreationFlowStatus.NEW_FROM_TEMPLATE);
     set(featureFlagsState, getDefaultFeatureFlags());

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

@@ -45,6 +45,7 @@ describe('<AppSettings /> & <ElectronSettings />', () => {
         propertyEditorWidth: 400,
         dialogNavWidth: 180,
         appLocale: 'en-US',
+        telemetry: {},
       });
     });
     getByText('Auto update');

Composer/packages/client/src/App.tsx

@@ -11,12 +11,13 @@ import { MainContainer } from './components/AppComponents/MainContainer';
 import { userSettingsState } from './recoilModel';
 import { loadLocale } from './utils/fileUtil';
 import { dispatcherState } from './recoilModel/DispatcherWrapper';
+import { useInitializeLogger } from './telemetry/useInitializeLogger';
 
 initializeIcons(undefined, { disableWarnings: true });
 
 export const App: React.FC = () => {
   const { appLocale } = useRecoilValue(userSettingsState);
-  const { fetchExtensions, fetchFeatureFlags, fetchServerSettings } = useRecoilValue(dispatcherState);
+  const { fetchExtensions, fetchFeatureFlags } = useRecoilValue(dispatcherState);
 
   useEffect(() => {
     loadLocale(appLocale);
@@ -25,9 +26,10 @@ export const App: React.FC = () => {
   useEffect(() => {
     fetchExtensions();
     fetchFeatureFlags();
-    fetchServerSettings();
   }, []);
 
+  useInitializeLogger();
+
   return (
     <Fragment key={appLocale}>
       <Announcement />

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

@@ -7,18 +7,18 @@ import { Suspense, Fragment } from 'react';
 import React from 'react';
 
 import { isElectron } from './../../utils/electronUtil';
-import { ServerSettingsState, onboardingState } from './../../recoilModel';
+import { userSettingsState, 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 { telemetry } = useRecoilValue(userSettingsState);
   const onboarding = useRecoilValue(onboardingState);
   const renderAppUpdater = isElectron();
 
-  const renderDataCollectionDialog = typeof telemetry?.allowDataCollection === 'undefined';
+  const renderDataCollectionDialog = typeof telemetry.allowDataCollection === 'undefined';
   const renderOnboarding = !renderDataCollectionDialog && !onboarding.complete;
 
   return (

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

@@ -11,10 +11,10 @@ import { useRecoilValue } from 'recoil';
 import { dispatcherState } from '../recoilModel';
 
 const DataCollectionDialog: React.FC = () => {
-  const { updateServerSettings } = useRecoilValue(dispatcherState);
+  const { updateUserSettings } = useRecoilValue(dispatcherState);
 
   const handleDataCollectionChange = (allowDataCollection: boolean) => () => {
-    updateServerSettings({
+    updateUserSettings({
       telemetry: {
         allowDataCollection,
       },

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, ServerSettingsState } from '../../../recoilModel';
+import { onboardingState, userSettingsState, dispatcherState } from '../../../recoilModel';
 
 import { container, section } from './styles';
 import { SettingToggle } from './SettingToggle';
@@ -28,8 +28,7 @@ const ElectronSettings = lazy(() =>
 const AppSettings: React.FC<RouteComponentProps> = () => {
   const [calloutIsShown, showCallout] = useState(false);
 
-  const { onboardingSetComplete, updateUserSettings, updateServerSettings } = useRecoilValue(dispatcherState);
-  const { telemetry } = useRecoilValue(ServerSettingsState);
+  const { onboardingSetComplete, updateUserSettings } = useRecoilValue(dispatcherState);
   const userSettings = useRecoilValue(userSettingsState);
   const { complete } = useRecoilValue(onboardingState);
   const onOnboardingChange = useCallback(
@@ -49,8 +48,8 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
     updateUserSettings({ appLocale });
   };
 
-  const handleDataCollectionChange = (allowDataCollection) => {
-    updateServerSettings({
+  const handleDataCollectionChange = (allowDataCollection: boolean) => {
+    updateUserSettings({
       telemetry: {
         allowDataCollection,
       },
@@ -204,7 +203,7 @@ const AppSettings: React.FC<RouteComponentProps> = () => {
       <section css={section}>
         <h2>{formatMessage('Data Collection')}</h2>
         <SettingToggle
-          checked={!!telemetry?.allowDataCollection}
+          checked={!!userSettings.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.'
           )}

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, ServerSettings } from '@bfc/shared';
+import { FormDialogSchemaTemplate, FeatureFlagMap, BotTemplate, UserSettings } from '@bfc/shared';
 import { ExtensionMetadata } from '@bfc/extension-client';
 import formatMessage from 'format-message';
 
@@ -246,15 +246,6 @@ export const pageElementState = atom<{ [page in PageMode]?: { [key: string]: any
   },
 });
 
-export const ServerSettingsState = atom<ServerSettings>({
-  key: getFullyQualifiedKey('serverSettings'),
-  default: {
-    telemetry: {
-      allowDataCollection: false,
-    },
-  },
-});
-
 export const showCreateDialogModalState = atom<boolean>({
   key: getFullyQualifiedKey('showCreateDialogModal'),
   default: false,

Composer/packages/client/src/recoilModel/dispatchers/__tests__/user.test.ts

@@ -159,6 +159,7 @@ describe('user dispatcher', () => {
       propertyEditorWidth: 400,
       dialogNavWidth: 555,
       appLocale: 'en-US',
+      telemetry: {},
     });
   });
 

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

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

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

@@ -4,13 +4,17 @@
 
 import { CallbackInterface, useRecoilCallback } from 'recoil';
 import jwtDecode from 'jwt-decode';
+import pick from 'lodash/pick';
 
 import { userSettingsState, currentUserState, CurrentUser } from '../atoms/appState';
 import { getUserTokenFromCache, loginPopup, refreshToken } from '../../utils/auth';
 import storage from '../../utils/storage';
 import { loadLocale } from '../../utils/fileUtil';
 import { UserSettingsPayload } from '../types';
 import { isElectron } from '../../utils/electronUtil';
+import httpClient from '../../utils/httpUtil';
+
+import { logMessage } from './shared';
 
 enum ClaimNames {
   upn = 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn',
@@ -72,7 +76,8 @@ export const userDispatcher = () => {
   });
 
   const updateUserSettings = useRecoilCallback(
-    ({ set }: CallbackInterface) => async (settings: Partial<UserSettingsPayload>) => {
+    (callbackHelpers: CallbackInterface) => async (settings: Partial<UserSettingsPayload>) => {
+      const { set } = callbackHelpers;
       if (settings.appLocale != null) {
         await loadLocale(settings.appLocale);
       }
@@ -91,6 +96,11 @@ export const userDispatcher = () => {
         }
         storage.set('userSettings', newSettings);
 
+        // push telemetry settings to the server
+        httpClient.post('/settings', { settings: pick(newSettings, ['telemetry']) }).catch((error) => {
+          logMessage(callbackHelpers, `Error updating server settings: ${error}`);
+        });
+
         if (isElectron()) {
           // push the settings to the electron main process
           window.ipcRenderer.send('update-user-settings', newSettings);