Add events to disco pane

src/disco/addonManager.js

@@ -1,4 +1,10 @@
-import { installEventList } from 'disco/constants';
+import log from 'core/logger';
+
+import {
+  globalEvents,
+  globalEventStatusMap,
+  installEventList,
+} from 'disco/constants';
 
 
 export function getAddon(guid, {_mozAddonManager = window.navigator.mozAddonManager} = {}) {
@@ -36,3 +42,23 @@ export function uninstall(guid, {_mozAddonManager = window.navigator.mozAddonMan
       return;
     });
 }
+
+export function addChangeListeners(callback, mozAddonManager) {
+  function handleChangeEvent(e) {
+    const { id, type, needsRestart } = e;
+    log.info('Event received', {type, id, needsRestart});
+    if (globalEventStatusMap.hasOwnProperty(type)) {
+      return callback({guid: id, status: globalEventStatusMap[type], needsRestart});
+    }
+    throw new Error(`Unknown global event: ${type}`);
+  }
+
+  if (mozAddonManager && mozAddonManager.addEventListener) {
+    for (const event of globalEvents) {
+      mozAddonManager.addEventListener(event, handleChangeEvent);
+    }
+  } else {
+    log.info('mozAddonManager.addEventListener not available');
+  }
+  return handleChangeEvent;
+}

src/disco/components/Addon.js

@@ -12,20 +12,28 @@ import * as addonManager from 'disco/addonManager';
 
 import InstallButton from 'disco/components/InstallButton';
 import {
-  validAddonTypes,
-  validInstallStates,
   DOWNLOAD_FAILED,
+  DOWNLOAD_PROGRESS,
   ERROR,
   EXTENSION_TYPE,
+  INSTALLED,
   INSTALL_CATEGORY,
+  INSTALL_COMPLETE,
+  INSTALL_ERROR,
   INSTALL_FAILED,
-  INSTALLED,
+  INSTALL_STATE,
+  START_DOWNLOAD,
+  START_INSTALL,
+  START_UNINSTALL,
   THEME_INSTALL,
-  THEME_TYPE,
   THEME_PREVIEW,
   THEME_RESET_PREVIEW,
-  UNINSTALL_CATEGORY,
+  THEME_TYPE,
   UNINSTALLED,
+  UNINSTALL_CATEGORY,
+  UNINSTALL_COMPLETE,
+  validAddonTypes,
+  validInstallStates,
 } from 'disco/constants';
 
 import 'disco/css/Addon.scss';
@@ -196,15 +204,15 @@ export function makeProgressHandler(dispatch, guid) {
     if (addonInstall.state === 'STATE_DOWNLOADING') {
       const downloadProgress = parseInt(
         100 * addonInstall.progress / addonInstall.maxProgress, 10);
-      dispatch({type: 'DOWNLOAD_PROGRESS', payload: {guid, downloadProgress}});
+      dispatch({type: DOWNLOAD_PROGRESS, payload: {guid, downloadProgress}});
     } else if (addonInstall.state === 'STATE_INSTALLING') {
-      dispatch({type: 'START_INSTALL', payload: {guid}});
+      dispatch({type: START_INSTALL, payload: {guid}});
     } else if (addonInstall.state === 'STATE_INSTALLED') {
-      dispatch({type: 'INSTALL_COMPLETE', payload: {guid}});
+      dispatch({type: INSTALL_COMPLETE, payload: {guid}});
     } else if (e.type === 'onDownloadFailed') {
-      dispatch({type: 'INSTALL_ERROR', payload: {guid, error: DOWNLOAD_FAILED}});
+      dispatch({type: INSTALL_ERROR, payload: {guid, error: DOWNLOAD_FAILED}});
     } else if (e.type === 'onInstallFailed') {
-      dispatch({type: 'INSTALL_ERROR', payload: {guid, error: INSTALL_FAILED}});
+      dispatch({type: INSTALL_ERROR, payload: {guid, error: INSTALL_FAILED}});
     }
   };
 }
@@ -221,37 +229,37 @@ export function mapDispatchToProps(dispatch, { _tracking = tracking,
         .then(
           (addon) => {
             const status = addon.type === THEME_TYPE && !addon.isEnabled ? UNINSTALLED : INSTALLED;
-            dispatch({type: 'INSTALL_STATE', payload: {...payload, status}});
+            dispatch({type: INSTALL_STATE, payload: {...payload, status}});
           },
-          () => dispatch({type: 'INSTALL_STATE', payload: {...payload, status: UNINSTALLED}}));
+          () => dispatch({type: INSTALL_STATE, payload: {...payload, status: UNINSTALLED}}));
     },
 
-    install({ guid, i18n, installURL, name }) {
-      dispatch({type: 'START_DOWNLOAD', payload: {guid}});
+    install({ guid, installURL, name }) {
+      dispatch({type: START_DOWNLOAD, payload: {guid}});
       _tracking.sendEvent({action: 'addon', category: INSTALL_CATEGORY, label: name});
-      return _addonManager.install(installURL, makeProgressHandler(dispatch, guid, i18n));
+      return _addonManager.install(installURL, makeProgressHandler(dispatch, guid));
     },
 
     installTheme(node, guid, name, _themeAction = themeAction) {
       _themeAction(node, THEME_INSTALL);
       _tracking.sendEvent({action: 'theme', category: INSTALL_CATEGORY, label: name});
       return new Promise((resolve) => {
         setTimeout(() => {
-          dispatch({type: 'INSTALL_STATE', payload: {guid, status: INSTALLED}});
+          dispatch({type: INSTALL_STATE, payload: {guid, status: INSTALLED}});
           resolve();
         }, 250);
       });
     },
 
     uninstall({ guid, name, type }) {
-      dispatch({type: 'START_UNINSTALL', payload: {guid}});
+      dispatch({type: START_UNINSTALL, payload: {guid}});
       const action = {
         [EXTENSION_TYPE]: 'addon',
         [THEME_TYPE]: 'theme',
       }[type] || 'invalid';
       _tracking.sendEvent({action, category: UNINSTALL_CATEGORY, label: name});
       return _addonManager.uninstall(guid)
-        .then(() => dispatch({type: 'UNINSTALL_COMPLETE', payload: {guid}}));
+        .then(() => dispatch({type: UNINSTALL_COMPLETE, payload: {guid}}));
     },
   };
 }

src/disco/components/InstallButton.js

@@ -60,7 +60,7 @@ export class InstallButton extends React.Component {
     const isInstalled = status === INSTALLED;
     const isDisabled = status === UNKNOWN;
     const isDownloading = status === DOWNLOADING;
-    const switchClasses = `switch ${status}`;
+    const switchClasses = `switch ${status.toLowerCase()}`;
     const identifier = `install-button-${slug}`;
 
     return (

src/disco/constants.js

@@ -1,13 +1,20 @@
 // Addon States.
-export const DOWNLOADING = 'downloading';
-export const ERROR = 'error';
-export const INSTALLED = 'installed';
-export const INSTALLING = 'installing';
-export const UNINSTALLED = 'uninstalled';
-export const UNINSTALLING = 'uninstalling';
-export const UNKNOWN = 'unknown';
+export const DOWNLOADING = 'DOWNLOADING';
+export const ERROR = 'ERROR';
+export const INSTALLED = 'INSTALLED';
+export const INSTALLING = 'INSTALLING';
+export const UNINSTALLED = 'UNINSTALLED';
+export const UNINSTALLING = 'UNINSTALLING';
+export const UNKNOWN = 'UNKNOWN';
+// Theme states
+export const DISABLED = 'DISABLED';
+export const ENABLED = 'ENABLED';
+
 export const validInstallStates = [
+  DISABLED,
+  ENABLED,
   DOWNLOADING,
+  ENABLED,
   ERROR,
   INSTALLED,
   INSTALLING,
@@ -16,8 +23,8 @@ export const validInstallStates = [
   UNKNOWN,
 ];
 
-export const DOWNLOAD_FAILED = 'download-failed';
-export const INSTALL_FAILED = 'install-failed';
+export const DOWNLOAD_FAILED = 'DOWNLOAD_FAILED';
+export const INSTALL_FAILED = 'INSTALL_FAILED';
 
 // Add-on types.
 export const API_THEME_TYPE = 'persona';
@@ -58,3 +65,39 @@ export const installEventList = [
 
 export const INSTALL_CATEGORY = 'AMO Addon / Theme Installs';
 export const UNINSTALL_CATEGORY = 'AMO Addon / Theme Uninstalls';
+
+
+// Install Types
+export const INSTALL_STATE = 'INSTALL_STATE';
+export const START_DOWNLOAD = 'START_DOWNLOAD';
+export const DOWNLOAD_PROGRESS = 'DOWNLOAD_PROGRESS';
+export const START_INSTALL = 'START_INSTALL';
+export const INSTALL_COMPLETE = 'INSTALL_COMPLETE';
+export const START_UNINSTALL = 'START_UNINSTALL';
+export const UNINSTALL_COMPLETE = 'UNINSTALL_COMPLETE';
+export const INSTALL_ERROR = 'INSTALL_ERROR';
+
+export const acceptedInstallTypes = [
+  INSTALL_STATE,
+  START_DOWNLOAD,
+  DOWNLOAD_PROGRESS,
+  START_INSTALL,
+  INSTALL_COMPLETE,
+  START_UNINSTALL,
+  UNINSTALL_COMPLETE,
+  INSTALL_ERROR,
+];
+
+export const globalEventStatusMap = {
+  onDisabled: DISABLED,
+  onEnabled: ENABLED,
+  onInstalling: INSTALLING,
+  onInstalled: INSTALLED,
+  onUninstalling: UNINSTALLING,
+  onUninstalled: UNINSTALLED,
+};
+
+// The events here are set directly on mozAddonManager
+// they will be fired by addons and themes that aren't
+// necessarily in the disco pane.
+export const globalEvents = Object.keys(globalEventStatusMap);

src/disco/containers/DiscoPane.js

@@ -5,9 +5,12 @@ import { connect } from 'react-redux';
 import { asyncConnect } from 'redux-async-connect';
 import { camelCaseProps } from 'core/utils';
 
+import config from 'config';
 import { getDiscoveryAddons } from 'disco/api';
 import { discoResults } from 'disco/actions';
 import { loadEntities } from 'core/actions';
+import { addChangeListeners } from 'disco/addonManager';
+import { INSTALL_STATE } from 'disco/constants';
 
 import Addon from 'disco/components/Addon';
 import translate from 'core/i18n/translate';
@@ -19,20 +22,31 @@ import videoWebm from 'disco/video/AddOns.webm';
 
 export class DiscoPane extends React.Component {
   static propTypes = {
+    handleGlobalEvent: PropTypes.func.isRequired,
     i18n: PropTypes.object.isRequired,
     results: PropTypes.arrayOf(PropTypes.object),
-    AddonComponent: PropTypes.object.isRequred,
+    AddonComponent: PropTypes.func.isRequred,
+    _addChangeListeners: PropTypes.func,
+    mozAddonManager: PropTypes.object,
   }
 
   static defaultProps = {
     AddonComponent: Addon,
+    mozAddonManager: config.get('server') ? {} : navigator.mozAddonManager,
+    _addChangeListeners: addChangeListeners,
   }
 
   constructor() {
     super();
     this.state = {showVideo: false};
   }
 
+  componentDidMount() {
+    const { _addChangeListeners, handleGlobalEvent, mozAddonManager } = this.props;
+    // Use addonManager.addChangeListener to setup and filter events.
+    _addChangeListeners(handleGlobalEvent, mozAddonManager);
+  }
+
   showVideo = (e) => {
     e.preventDefault();
     this.setState({showVideo: true});
@@ -109,7 +123,18 @@ export function mapStateToProps(state) {
   };
 }
 
+export function mapDispatchToProps(dispatch, { _config = config } = {}) {
+  if (_config.get('server')) {
+    return {};
+  }
+  return {
+    handleGlobalEvent(payload) {
+      dispatch({type: INSTALL_STATE, payload});
+    },
+  };
+}
+
 export default asyncConnect([{
   deferred: true,
   promise: loadDataIfNeeded,
-}])(connect(mapStateToProps)(translate()(DiscoPane)));
+}])(connect(mapStateToProps, mapDispatchToProps)(translate()(DiscoPane)));

src/disco/reducers/installations.js

@@ -1,54 +1,53 @@
 import {
   DOWNLOADING,
+  DOWNLOAD_PROGRESS,
   ERROR,
   INSTALLED,
   INSTALLING,
+  INSTALL_COMPLETE,
+  INSTALL_ERROR,
+  INSTALL_STATE,
+  START_DOWNLOAD,
+  START_INSTALL,
+  START_UNINSTALL,
   UNINSTALLED,
   UNINSTALLING,
+  UNINSTALL_COMPLETE,
+  acceptedInstallTypes,
 } from 'disco/constants';
 
-const acceptedTypes = [
-  'INSTALL_STATE',
-  'START_DOWNLOAD',
-  'DOWNLOAD_PROGRESS',
-  'START_INSTALL',
-  'INSTALL_COMPLETE',
-  'START_UNINSTALL',
-  'UNINSTALL_COMPLETE',
-  'INSTALL_ERROR',
-];
 
 export default function installations(state = {}, { type, payload }) {
-  if (!acceptedTypes.includes(type)) {
+  if (!acceptedInstallTypes.includes(type)) {
     return state;
   }
   let addon;
   if (state[payload.guid]) {
     addon = {...state[payload.guid]};
   }
-  if (type === 'INSTALL_STATE') {
+  if (type === INSTALL_STATE) {
     addon = {
       guid: payload.guid,
       url: payload.url,
       downloadProgress: 0,
       status: payload.status,
     };
-  } else if (type === 'START_DOWNLOAD') {
+  } else if (type === START_DOWNLOAD) {
     addon.status = DOWNLOADING;
-  } else if (type === 'DOWNLOAD_PROGRESS') {
+  } else if (type === DOWNLOAD_PROGRESS) {
     addon.downloadProgress = payload.downloadProgress;
-  } else if (type === 'START_INSTALL') {
+  } else if (type === START_INSTALL) {
     addon.downloadProgress = 100;
     addon.status = INSTALLING;
-  } else if (type === 'INSTALL_COMPLETE') {
+  } else if (type === INSTALL_COMPLETE) {
     addon.status = INSTALLED;
-  } else if (type === 'START_UNINSTALL') {
+  } else if (type === START_UNINSTALL) {
     addon.downloadProgress = 0;
     addon.status = UNINSTALLING;
-  } else if (type === 'UNINSTALL_COMPLETE') {
+  } else if (type === UNINSTALL_COMPLETE) {
     addon.status = UNINSTALLED;
   /* istanbul ignore else */
-  } else if (type === 'INSTALL_ERROR') {
+  } else if (type === INSTALL_ERROR) {
     addon.downloadProgress = 0;
     addon.status = ERROR;
     addon.error = payload.error;