feat: Add a link to the stats dashboard for add-on owners

src/amo/components/AddonMeta.js

@@ -1,22 +1,29 @@
+/* @flow */
 import React from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { compose } from 'redux';
 
+import Link from 'amo/components/Link';
 import translate from 'core/i18n/translate';
+import { isAddonAuthor } from 'core/utils';
+import type { AddonType } from 'core/types/addons';
 import LoadingText from 'ui/components/LoadingText';
 import Rating from 'ui/components/Rating';
 
 import 'amo/css/AddonMeta.scss';
 
 
+type PropTypes = {
+  addon: AddonType | null,
+  i18n: Object,
+  userId: number | null,
+}
+
 export class AddonMetaBase extends React.Component {
-  static propTypes = {
-    addon: PropTypes.object.isRequired,
-    i18n: PropTypes.object.isRequired,
-  }
+  props: PropTypes;
 
   render() {
-    const { addon, i18n } = this.props;
+    const { addon, i18n, userId } = this.props;
     const averageRating = addon ? addon.ratings.average : null;
     const addonRatingCount = addon ? addon.ratings.count : null;
 
@@ -49,7 +56,14 @@ export class AddonMetaBase extends React.Component {
         <div className="AddonMeta-item AddonMeta-users">
           <h3 className="visually-hidden">{i18n.gettext('Used by')}</h3>
           <p className="AddonMeta-text AddonMeta-user-count">
-            {userCount}
+            {addon && isAddonAuthor({ addon, userId }) ? (
+              <Link
+                href={`/addon/${addon.slug}/statistics/`}
+                title={i18n.gettext('Click to view statistics')}
+              >
+                {userCount}
+              </Link>
+            ) : userCount}
           </p>
           <p className="AddonMeta-text AddonMeta-review-count">
             {reviewCount}
@@ -66,6 +80,13 @@ export class AddonMetaBase extends React.Component {
   }
 }
 
+export const mapStateToProps = (state: Object) => {
+  return {
+    userId: state.user.id,
+  };
+};
+
 export default compose(
-  translate({ withRef: true }),
+  connect(mapStateToProps),
+  translate(),
 )(AddonMetaBase);

src/amo/components/AddonMoreInfo/index.js

@@ -1,25 +1,30 @@
+/* @flow */
 import React from 'react';
-import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { compose } from 'redux';
 
 import Link from 'amo/components/Link';
 import ReportAbuseButton from 'amo/components/ReportAbuseButton';
 import translate from 'core/i18n/translate';
-import { trimAndAddProtocolToUrl } from 'core/utils';
+import type { AddonType } from 'core/types/addons';
+import { isAddonAuthor, trimAndAddProtocolToUrl } from 'core/utils';
 import Card from 'ui/components/Card';
 import LoadingText from 'ui/components/LoadingText';
 
 import './styles.scss';
 
 
+type PropTypes = {
+  addon: AddonType | null,
+  i18n: Object,
+  userId: number | null,
+}
+
 export class AddonMoreInfoBase extends React.Component {
-  static propTypes = {
-    addon: PropTypes.object.isRequired,
-    i18n: PropTypes.object.isRequired,
-  }
+  props: PropTypes;
 
   listContent() {
-    const { addon, i18n } = this.props;
+    const { addon, i18n, userId } = this.props;
 
     if (!addon) {
       return this.renderDefinitions({
@@ -52,6 +57,14 @@ export class AddonMoreInfoBase extends React.Component {
     return this.renderDefinitions({
       homepage,
       supportUrl,
+      statsLink: addon && isAddonAuthor({ addon, userId }) ? (
+        <Link
+          className="AddonMoreInfo-stats-link"
+          href={`/addon/${addon.slug}/statistics/`}
+        >
+          {i18n.gettext('Visit stats dashboard')}
+        </Link>
+      ) : null,
       version: addon.current_version.version,
       versionLastUpdated: i18n.sprintf(
         // translators: This will output, in English:
@@ -62,12 +75,12 @@ export class AddonMoreInfoBase extends React.Component {
         }
       ),
       versionLicenseLink: addon.current_version.license ? (
-        <a
+        <Link
           className="AddonMoreInfo-license-link"
           href={addon.current_version.license.url}
         >
           {addon.current_version.license.name}
-        </a>
+        </Link>
       ) : null,
       privacyPolicyLink: addon.has_privacy_policy ? (
         <Link
@@ -87,29 +100,30 @@ export class AddonMoreInfoBase extends React.Component {
       ) : null,
       addonId: addon.id,
       versionHistoryLink: (
-        <a
+        <Link
           className="AddonMoreInfo-version-history-link"
           href={`/addon/${addon.slug}/versions/`}
         >
           {i18n.gettext('See all versions')}
-        </a>
+        </Link>
       ),
       // Since current_beta_version is just an alias to the latest beta,
       // we can assume that no betas exist at all if it is null.
       betaVersionsLink: addon.current_beta_version ? (
-        <a
+        <Link
           className="AddonMoreInfo-beta-versions-link"
           href={`/addon/${addon.slug}/versions/beta`}
         >
           {i18n.gettext('See all beta versions')}
-        </a>
+        </Link>
       ) : null,
     });
   }
 
   renderDefinitions({
     homepage = null,
     supportUrl = null,
+    statsLink = null,
     privacyPolicyLink = null,
     eulaLink = null,
     version,
@@ -118,7 +132,7 @@ export class AddonMoreInfoBase extends React.Component {
     versionHistoryLink,
     betaVersionsLink = null,
     addonId,
-  }) {
+  }: Object) {
     const { i18n } = this.props;
     return (
       <dl className="AddonMoreInfo-contents">
@@ -171,6 +185,12 @@ export class AddonMoreInfoBase extends React.Component {
           </dt>
         ) : null}
         {betaVersionsLink ? <dd>{betaVersionsLink}</dd> : null}
+        {statsLink ? (
+          <dt className="AddonMoreInfo-stats-title">
+            {i18n.gettext('Usage Statistics')}
+          </dt>
+        ) : null}
+        {statsLink ? <dd>{statsLink}</dd> : null}
         <dt
           className="AddonMoreInfo-database-id-title"
           title={i18n.gettext(`This ID is useful for debugging and
@@ -201,6 +221,13 @@ export class AddonMoreInfoBase extends React.Component {
   }
 }
 
+export const mapStateToProps = (state: Object) => {
+  return {
+    userId: state.user.id,
+  };
+};
+
 export default compose(
+  connect(mapStateToProps),
   translate(),
 )(AddonMoreInfoBase);

src/amo/components/App/styles.scss

@@ -77,7 +77,6 @@ a:link {
   @include font-medium();
 
   color: $link-color;
-  font-size: 14px;
 }
 
 em {

src/core/utils.js

@@ -154,6 +154,16 @@ export function loadAddonIfNeeded(
   return _refreshAddon({ addonSlug: slug, apiState: state.api, dispatch });
 }
 
+export function isAddonAuthor({ addon, userId }) {
+  if (!addon || !addon.authors || !addon.authors.length || !userId) {
+    return false;
+  }
+
+  return addon.authors.some((author) => {
+    return author.id === userId;
+  });
+}
+
 export function isAllowedOrigin(urlString, {
   allowedOrigins = [config.get('amoCDN')],
 } = {}) {

tests/unit/amo/components/TestAddonMeta.js

@@ -1,22 +1,35 @@
-import { shallow } from 'enzyme';
 import React from 'react';
 
-import { AddonMetaBase } from 'amo/components/AddonMeta';
-import { fakeAddon } from 'tests/unit/amo/helpers';
-import { getFakeI18nInst } from 'tests/unit/helpers';
+import AddonMeta, { AddonMetaBase } from 'amo/components/AddonMeta';
+import Link from 'amo/components/Link';
+import { createInternalAddon } from 'core/reducers/addons';
+import {
+  dispatchClientMetadata,
+  dispatchSignInActions,
+  fakeAddon,
+} from 'tests/unit/amo/helpers';
+import { getFakeI18nInst, shallowUntilTarget } from 'tests/unit/helpers';
 import LoadingText from 'ui/components/LoadingText';
 import Rating from 'ui/components/Rating';
 
-function render({ ...customProps } = {}) {
-  const props = {
-    addon: fakeAddon,
-    i18n: getFakeI18nInst(),
-    ...customProps,
-  };
-  return shallow(<AddonMetaBase {...props} />);
-}
 
-describe('<AddonMeta>', () => {
+describe(__filename, () => {
+  function render({
+    addon = createInternalAddon(fakeAddon),
+    store = dispatchClientMetadata().store,
+    ...props
+  } = {}) {
+    return shallowUntilTarget(
+      <AddonMeta
+        addon={addon}
+        i18n={getFakeI18nInst()}
+        store={store}
+        {...props}
+      />,
+      AddonMetaBase
+    );
+  }
+
   it('can render without an addon', () => {
     const root = render({ addon: null });
     expect(root.find('.AddonMeta-user-count').find(LoadingText))
@@ -33,38 +46,93 @@ describe('<AddonMeta>', () => {
 
     it('renders the user count', () => {
       const root = render({
-        addon: { ...fakeAddon, average_daily_users: 2 },
+        addon: createInternalAddon({ ...fakeAddon, average_daily_users: 2 }),
       });
       expect(getUserCount(root)).toEqual('2 users');
     });
 
     it('renders one user', () => {
       const root = render({
-        addon: { ...fakeAddon, average_daily_users: 1 },
+        addon: createInternalAddon({ ...fakeAddon, average_daily_users: 1 }),
       });
       expect(getUserCount(root)).toEqual('1 user');
     });
 
     it('localizes the user count', () => {
       const i18n = getFakeI18nInst({ lang: 'de' });
       const root = render({
-        addon: { ...fakeAddon, average_daily_users: 1000 },
+        addon: createInternalAddon({
+          ...fakeAddon,
+          average_daily_users: 1000,
+        }),
         i18n,
       });
       expect(getUserCount(root)).toMatch(/^1\.000/);
     });
+
+    it('does not link to stats if user is not author of the add-on', () => {
+      const authorUserId = 11;
+      const addon = createInternalAddon({
+        ...fakeAddon,
+        slug: 'coolio',
+        authors: [
+          {
+            ...fakeAddon.authors[0],
+            id: authorUserId,
+            name: 'tofumatt',
+            picture_url: 'http://cdn.a.m.o/myphoto.jpg',
+            url: 'http://a.m.o/en-GB/firefox/user/tofumatt/',
+            username: 'tofumatt',
+          },
+        ],
+      });
+      const root = render({
+        addon,
+        store: dispatchSignInActions({ userId: 5 }).store,
+      });
+
+      const statsLink = root.find('.AddonMeta-user-count').find(Link);
+      expect(statsLink).toHaveLength(0);
+    });
+
+    it('links to stats if add-on author is viewing the page', () => {
+      const authorUserId = 11;
+      const addon = createInternalAddon({
+        ...fakeAddon,
+        slug: 'coolio',
+        authors: [
+          {
+            ...fakeAddon.authors[0],
+            id: authorUserId,
+            name: 'tofumatt',
+            picture_url: 'http://cdn.a.m.o/myphoto.jpg',
+            url: 'http://a.m.o/en-GB/firefox/user/tofumatt/',
+            username: 'tofumatt',
+          },
+        ],
+      });
+      const root = render({
+        addon,
+        store: dispatchSignInActions({ userId: authorUserId }).store,
+      });
+
+      const statsLink = root.find('.AddonMeta-user-count').find(Link);
+      expect(statsLink).toHaveLength(1);
+      expect(statsLink).toHaveProp('title', 'Click to view statistics');
+      expect(statsLink).toHaveProp('href', '/addon/coolio/statistics/');
+    });
   });
 
   describe('ratings', () => {
     function renderRatings(ratings = {}, otherProps = {}) {
       return render({
-        addon: {
+        addon: createInternalAddon({
           ...fakeAddon,
           ratings: {
             ...fakeAddon.ratings,
             ...ratings,
           },
-        },
+        }),
         ...otherProps,
       });
     }