Merge pull request #2873 from matrix-org/travis/breadcrumbs/telemetry

Add telemetry for breadcrumbs and have the setting apply without refresh

src/Analytics.js

@@ -84,6 +84,11 @@ const customVariables = {
         expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
         example: 'off',
     },
+    'Breadcrumbs': {
+        id: 9,
+        expl: _td("Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)"),
+        example: 'disabled',
+    },
     'Homeserver URL': {
         id: 7,
         expl: _td('Your homeserver\'s URL'),
@@ -234,6 +239,11 @@ class Analytics {
         this._setVisitVariable('RTE: Uses Richtext Mode', state ? 'on' : 'off');
     }
 
+    setBreadcrumbs(state) {
+        if (this.disabled) return;
+        this._setVisitVariable('Breadcrumbs', state ? 'enabled' : 'disabled');
+    }
+
     showDetailsModal() {
         let rows = [];
         if (window.Piwik) {

src/components/structures/LeftPanel.js

@@ -27,6 +27,7 @@ import VectorConferenceHandler from '../../VectorConferenceHandler';
 import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
 import {_t} from "../../languageHandler";
+import Analytics from "../../Analytics";
 
 
 const LeftPanel = React.createClass({
@@ -45,11 +46,23 @@ const LeftPanel = React.createClass({
     getInitialState: function() {
         return {
             searchFilter: '',
+            breadcrumbs: false,
         };
     },
 
     componentWillMount: function() {
         this.focusedElement = null;
+
+        this._settingWatchRef = SettingsStore.watchSetting(
+            "feature_room_breadcrumbs", null, this._onBreadcrumbsChanged);
+
+        const useBreadcrumbs = SettingsStore.isFeatureEnabled("feature_room_breadcrumbs");
+        Analytics.setBreadcrumbs(useBreadcrumbs);
+        this.setState({breadcrumbs: useBreadcrumbs});
+    },
+
+    componentWillUnmount: function() {
+        SettingsStore.unwatchSetting(this._settingWatchRef);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -73,6 +86,22 @@ const LeftPanel = React.createClass({
         return false;
     },
 
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.breadcrumbs !== this.state.breadcrumbs) {
+            Analytics.setBreadcrumbs(this.state.breadcrumbs);
+        }
+    },
+
+    _onBreadcrumbsChanged: function(settingName, roomId, level, valueAtLevel, value) {
+        // Features are only possible at a single level, so we can get away with using valueAtLevel.
+        // The SettingsStore runs on the same tick as the update, so `value` will be wrong.
+        this.setState({breadcrumbs: valueAtLevel});
+
+        // For some reason the setState doesn't trigger a render of the component, so force one.
+        // Probably has to do with the change happening outside of a change detector cycle.
+        this.forceUpdate();
+    },
+
     _onFocus: function(ev) {
         this.focusedElement = ev.target;
     },
@@ -220,7 +249,7 @@ const LeftPanel = React.createClass({
             collapsed={this.props.collapsed} />);
 
         let breadcrumbs;
-        if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+        if (this.state.breadcrumbs) {
             breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
         }
 

src/components/views/rooms/RoomBreadcrumbs.js

@@ -22,6 +22,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import RoomAvatar from '../avatars/RoomAvatar';
 import classNames from 'classnames';
 import sdk from "../../../index";
+import Analytics from "../../../Analytics";
 import * as RoomNotifs from '../../../RoomNotifs';
 import * as FormattingUtils from "../../../utils/FormattingUtils";
 import DMRoomMap from "../../../utils/DMRoomMap";
@@ -247,7 +248,8 @@ export default class RoomBreadcrumbs extends React.Component {
         }
     }
 
-    _viewRoom(room) {
+    _viewRoom(room, index) {
+        Analytics.trackEvent("Breadcrumbs", "click_node", index);
         dis.dispatch({action: "view_room", room_id: room.roomId});
     }
 
@@ -321,7 +323,7 @@ export default class RoomBreadcrumbs extends React.Component {
             }
 
             return (
-                <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room)}
+                <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room, i)}
                     onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
                     <RoomAvatar room={r.room} width={32} height={32} />
                     {badge}

src/i18n/strings/en_EN.json

@@ -8,6 +8,7 @@
     "Your language of choice": "Your language of choice",
     "Which officially provided instance you are using, if any": "Which officially provided instance you are using, if any",
     "Whether or not you're using the Richtext mode of the Rich Text Editor": "Whether or not you're using the Richtext mode of the Rich Text Editor",
+    "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)": "Whether or not you're using the 'breadcrumbs' feature (avatars above the room list)",
     "Your homeserver's URL": "Your homeserver's URL",
     "Your identity server's URL": "Your identity server's URL",
     "e.g. %(exampleValue)s": "e.g. %(exampleValue)s",
@@ -291,7 +292,7 @@
     "Failed to join room": "Failed to join room",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",
-    "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)",
+    "Show recent room avatars above the room list": "Show recent room avatars above the room list",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
@@ -729,8 +730,8 @@
     "Send a reply (unencrypted)…": "Send a reply (unencrypted)…",
     "Send an encrypted message…": "Send an encrypted message…",
     "Send a message (unencrypted)…": "Send a message (unencrypted)…",
-    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "The conversation continues here.": "The conversation continues here.",
+    "This room has been replaced and is no longer active.": "This room has been replaced and is no longer active.",
     "You do not have permission to post to this room": "You do not have permission to post to this room",
     "Markdown is disabled": "Markdown is disabled",
     "Hide Text Formatting Toolbar": "Hide Text Formatting Toolbar",

src/settings/Settings.js

@@ -102,7 +102,7 @@ export const SETTINGS = {
     },
     "feature_room_breadcrumbs": {
         isFeature: true,
-        displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"),
+        displayName: _td("Show recent room avatars above the room list"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },

src/settings/handlers/DeviceSettingsHandler.js

@@ -127,6 +127,6 @@ export default class DeviceSettingsHandler extends SettingsHandler {
 
     _writeFeature(featureName, enabled) {
         localStorage.setItem("mx_labs_feature_" + featureName, enabled);
-        this._watchers.notifyUpdate(featureName, null, enabled);
+        this._watchers.notifyUpdate(featureName, null, SettingLevel.DEVICE, enabled);
     }
 }