MM-30087 Remove direct dependency between Client4 and Rudder

components/root/root.jsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {rudderAnalytics, Client4} from 'mattermost-redux/client';
+import {Client4} from 'mattermost-redux/client';
+import {rudderAnalytics, RudderTelemetryHandler} from 'mattermost-redux/client/rudder';
 import PropTypes from 'prop-types';
 import React from 'react';
 import FastClick from 'fastclick';
@@ -148,7 +149,8 @@ export default class Root extends React.PureComponent {
         }
 
         if (rudderKey != null && rudderKey !== '' && this.props.telemetryEnabled) {
-            Client4.enableRudderEvents();
+            Client4.setTelemetryHandler(new RudderTelemetryHandler());
+
             rudderAnalytics.load(rudderKey, rudderUrl);
 
             rudderAnalytics.identify(telemetryId, {}, {

components/root/root.test.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 import {Client4} from 'mattermost-redux/client';
+import {rudderAnalytics} from 'mattermost-redux/client/rudder';
 
 import Root from 'components/root/root';
 import * as GlobalActions from 'actions/global_actions.jsx';
@@ -15,6 +16,13 @@ jest.mock('fastclick', () => ({
     attach: () => {}, // eslint-disable-line no-empty-function
 }));
 
+jest.mock('rudder-sdk-js', () => ({
+    identify: jest.fn(),
+    load: jest.fn(),
+    page: jest.fn(),
+    track: jest.fn(),
+}));
+
 jest.mock('actions/telemetry_actions', () => ({
     trackLoadTime: () => {}, // eslint-disable-line no-empty-function
 }));
@@ -32,18 +40,6 @@ jest.mock('utils/utils', () => ({
 jest.mock('mattermost-redux/actions/general', () => ({
     setUrl: () => {},
 }));
-jest.mock('mattermost-redux/client', () => {
-    const original = jest.requireActual('mattermost-redux/client');
-
-    return {
-        ...original,
-        Client4: {
-            ...original.Client4,
-            setUrl: jest.fn(),
-            enableRudderEvents: jest.fn(),
-        },
-    };
-});
 
 describe('components/Root', () => {
     const baseProps = {
@@ -193,21 +189,44 @@ describe('components/Root', () => {
         wrapper.unmount();
     });
 
-    test('should not call enableRudderEvents on call of onConfigLoaded if url and key for rudder is not set', () => {
-        const wrapper = shallow(<Root {...baseProps}/>);
-        wrapper.instance().onConfigLoaded();
-        expect(Client4.enableRudderEvents).not.toHaveBeenCalled();
-        wrapper.unmount();
-    });
+    describe('onConfigLoaded', () => {
+        // Replace loadMeAndConfig with an action that never resolves so we can control exactly when onConfigLoaded is called
+        const props = {
+            ...baseProps,
+            actions: {
+                ...baseProps.actions,
+                loadMeAndConfig: () => new Promise(() => {}),
+            },
+        };
 
-    test('should call for enableRudderEvents on call of onConfigLoaded if url and key for rudder is set', () => {
-        Constants.TELEMETRY_RUDDER_KEY = 'testKey';
-        Constants.TELEMETRY_RUDDER_DATAPLANE_URL = 'url';
+        test('should not send events to telemetry after onConfigLoaded is called if Rudder is not configured', () => {
+            const wrapper = shallow(<Root {...props}/>);
 
-        const wrapper = shallow(<Root {...baseProps}/>);
-        wrapper.instance().onConfigLoaded();
-        expect(Client4.enableRudderEvents).toHaveBeenCalled();
-        wrapper.unmount();
+            wrapper.instance().onConfigLoaded();
+
+            Client4.trackEvent('category', 'event');
+
+            expect(Client4.telemetryHandler).not.toBeDefined();
+            expect(rudderAnalytics.track).not.toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
+
+        test('should send events to telemetry after onConfigLoaded is called if Rudder is configured', () => {
+            Constants.TELEMETRY_RUDDER_KEY = 'testKey';
+            Constants.TELEMETRY_RUDDER_DATAPLANE_URL = 'url';
+
+            const wrapper = shallow(<Root {...props}/>);
+
+            wrapper.instance().onConfigLoaded();
+
+            Client4.trackEvent('category', 'event');
+
+            expect(Client4.telemetryHandler).toBeDefined();
+            expect(rudderAnalytics.track).toHaveBeenCalled();
+
+            wrapper.unmount();
+        });
     });
 
     test('should reload on focus after getting signal login event from another tab', () => {

package.json

@@ -37,7 +37,7 @@
     "localforage-observable": "2.0.1",
     "mark.js": "8.11.1",
     "marked": "github:mattermost/marked#87769262aa02e1784570f61f4f962050e07cc335",
-    "mattermost-redux": "github:mattermost/mattermost-redux#40368bb807b8b5a3dc0f4ce4a5a76eabc5c9de54",
+    "mattermost-redux": "github:mattermost/mattermost-redux#bd63f65b85d3ec8c2636ed0365aad2ab6c246df2",
     "moment-timezone": "0.5.31",
     "p-queue": "6.6.1",
     "pdfjs-dist": "2.1.266",