Fixed: App command status not showing in UI (No Spin)

frontend/src/Settings/Applications/ApplicationSettings.js

@@ -13,7 +13,9 @@ class ApplicationSettings extends Component {
   render() {
     const {
       isTestingAll,
-      dispatchTestAllApplications
+      isSyncingIndexers,
+      onTestAllPress,
+      onAppIndexerSyncPress
     } = this.props;
 
     return (
@@ -27,13 +29,15 @@ class ApplicationSettings extends Component {
               <PageToolbarButton
                 label={translate('SyncAppIndexers')}
                 iconName={icons.REFRESH}
+                isSpinning={isSyncingIndexers}
+                onPress={onAppIndexerSyncPress}
               />
 
               <PageToolbarButton
                 label={translate('TestAllApps')}
                 iconName={icons.TEST}
                 isSpinning={isTestingAll}
-                onPress={dispatchTestAllApplications}
+                onPress={onTestAllPress}
               />
             </Fragment>
           }
@@ -49,7 +53,9 @@ class ApplicationSettings extends Component {
 
 ApplicationSettings.propTypes = {
   isTestingAll: PropTypes.bool.isRequired,
-  dispatchTestAllApplications: PropTypes.func.isRequired
+  isSyncingIndexers: PropTypes.bool.isRequired,
+  onTestAllPress: PropTypes.func.isRequired,
+  onAppIndexerSyncPress: PropTypes.func.isRequired
 };
 
 export default ApplicationSettings;

frontend/src/Settings/Applications/ApplicationSettingsConnector.js

@@ -1,21 +1,35 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
 import { testAllApplications } from 'Store/Actions/settingsActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import ApplicationSettings from './ApplicationSettings';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.applications.isTestingAll,
-    (isTestingAll) => {
+    createCommandExecutingSelector(commandNames.APP_INDEXER_SYNC),
+    (isTestingAll, isSyncingIndexers) => {
       return {
-        isTestingAll
+        isTestingAll,
+        isSyncingIndexers
       };
     }
   );
 }
 
-const mapDispatchToProps = {
-  dispatchTestAllApplications: testAllApplications
-};
+function mapDispatchToProps(dispatch, props) {
+  return {
+    onTestAllPress() {
+      dispatch(testAllApplications());
+    },
+    onAppIndexerSyncPress() {
+      dispatch(executeCommand({
+        name: commandNames.APP_INDEXER_SYNC
+      }));
+    }
+  };
+}
 
 export default connect(createMapStateToProps, mapDispatchToProps)(ApplicationSettings);