Merge pull request #1926 from matrix-org/luke/cookie-bar-anayltics-modal

Add usage data link to cookie bar

src/Analytics.js

@@ -49,34 +49,42 @@ const customVariables = {
     'App Platform': {
         id: 1,
         expl: _td('The platform you\'re on'),
+        example: 'Electron Platform',
     },
     'App Version': {
         id: 2,
         expl: _td('The version of Riot.im'),
+        example: '15.0.0',
     },
     'User Type': {
         id: 3,
         expl: _td('Whether or not you\'re logged in (we don\'t record your user name)'),
+        example: 'Logged In',
     },
     'Chosen Language': {
         id: 4,
         expl: _td('Your language of choice'),
+        example: 'en',
     },
     'Instance': {
         id: 5,
         expl: _td('Which officially provided instance you are using, if any'),
+        example: 'app',
     },
     'RTE: Uses Richtext Mode': {
         id: 6,
         expl: _td('Whether or not you\'re using the Richtext mode of the Rich Text Editor'),
+        example: 'off',
     },
     'Homeserver URL': {
         id: 7,
         expl: _td('Your homeserver\'s URL'),
+        example: 'https://matrix.org',
     },
     'Identity Server URL': {
         id: 8,
         expl: _td('Your identity server\'s URL'),
+        example: 'https://vector.im',
     },
 };
 
@@ -218,8 +226,19 @@ class Analytics {
     }
 
     showDetailsModal() {
+        let rows = [];
+        if (window.Piwik) {
             const Tracker = window.Piwik.getAsyncTracker();
-        const rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+            rows = Object.values(customVariables).map((v) => Tracker.getCustomVariable(v.id)).filter(Boolean);
+        } else {
+            // Piwik may not have been enabled, so show example values
+            rows = Object.keys(customVariables).map(
+                (k) => [
+                    k,
+                    _t('e.g. %(exampleValue)s', { exampleValue: customVariables[k].example }),
+                ],
+            );
+        }
 
         const resolution = `${window.screen.width}x${window.screen.height}`;
         const otherVariables = [
@@ -247,7 +266,7 @@ class Analytics {
                 <table>
                     { rows.map((row) => <tr key={row[0]}>
                         <td>{ _t(customVariables[row[0]].expl) }</td>
-                        <td><code>{ row[1] }</code></td>
+                        { row[1] !== undefined && <td><code>{ row[1] }</code></td> }
                     </tr>) }
                     { otherVariables.map((item, index) =>
                         <tr key={index}>

src/components/views/globals/CookieBar.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
+import Analytics from '../../../Analytics';
 
 export default class CookieBar extends React.Component {
     static propTypes = {
@@ -29,6 +30,10 @@ export default class CookieBar extends React.Component {
         super();
     }
 
+    onUsageDataClicked() {
+        Analytics.showDetailsModal();
+    }
+
     onAccept() {
         dis.dispatch({
             action: 'accept_cookies',
@@ -49,11 +54,18 @@ export default class CookieBar extends React.Component {
                 <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning" />
                 <div className="mx_MatrixToolbar_content">
                     { this.props.policyUrl ? _t(
-                        "Help improve Riot by sending usage data? " +
+                        "Help improve Riot by sending <UsageDataLink>usage data</UsageDataLink>? " +
                         "This will use a cookie. " +
                         "(See our <PolicyLink>cookie and privacy policies</PolicyLink>).",
                         {},
                         {
+                            'UsageDataLink': (sub) => <a
+                                className="mx_MatrixToolbar_link"
+                                href="javascript:;"
+                                onClick={this.onUsageDataClicked}
+                            >
+                                { sub }
+                            </a>,
                             // XXX: We need to link to the page that explains our cookies
                             'PolicyLink': (sub) => <a
                                     className="mx_MatrixToolbar_link"

src/i18n/strings/en_EN.json

@@ -10,6 +10,7 @@
     "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",
     "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",
     "Every page you use in the app": "Every page you use in the app",
     "e.g. <CurrentPageURL>": "e.g. <CurrentPageURL>",
     "Your User Agent": "Your User Agent",
@@ -635,7 +636,7 @@
     "Something went wrong when trying to get your communities.": "Something went wrong when trying to get your communities.",
     "Display your community flair in rooms configured to show it.": "Display your community flair in rooms configured to show it.",
     "You're not currently a member of any communities.": "You're not currently a member of any communities.",
-    "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Help improve Riot by sending usage data? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).",
+    "Help improve Riot by sending <UsageDataLink>usage data</UsageDataLink>? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).": "Help improve Riot by sending <UsageDataLink>usage data</UsageDataLink>? This will use a cookie. (See our <PolicyLink>cookie and privacy policies</PolicyLink>).",
     "Help improve Riot by sending usage data? This will use a cookie.": "Help improve Riot by sending usage data? This will use a cookie.",
     "Yes please": "Yes please",
     "You are not receiving desktop notifications": "You are not receiving desktop notifications",