Merge branch 'nightly' into release

5 files changed, 79 insertions, 49 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4474fe0f4..5d7b6b85c 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -87,7 +87,6 @@ class AppLayout extends Component {
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     authRequestFailed: PropTypes.bool.isRequired,
-    reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
     showRequiredRequestsError: PropTypes.bool.isRequired,
     areRequiredRequestsSuccessful: PropTypes.bool.isRequired,
@@ -115,7 +114,6 @@ class AppLayout extends Component {
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
       authRequestFailed,
-      reloadServicesAfterUpdate,
       installAppUpdate,
       settings,
       showRequiredRequestsError,
@@ -175,12 +173,12 @@ class AppLayout extends Component {
                   {intl.formatMessage(messages.authRequestFailed)}
                 </InfoBar>
               )}
-              {showServicesUpdatedInfoBar &&
+              {automaticUpdates && showServicesUpdatedInfoBar &&
                 this.state.shouldShowServicesUpdatedInfoBar && (
                   <InfoBar
                     type="primary"
                     ctaLabel={intl.formatMessage(messages.buttonReloadServices)}
-                    onClick={reloadServicesAfterUpdate}
+                    onClick={() => window.location.reload()}
                     onHide={() => {
                       this.setState({
                         shouldShowServicesUpdatedInfoBar: false,
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 1cbdcfe46..3e24c9230 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -74,6 +74,7 @@ class Sidebar extends Component {
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
     toggleDarkMode: PropTypes.func.isRequired,
+    showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
@@ -234,10 +235,10 @@ class Sidebar extends Component {
         >
           <Icon icon={mdiCog} size={1.5} />
           {
-            (this.props.stores.settings.app.automaticUpdates &&
+            this.props.stores.settings.app.automaticUpdates &&
               (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE ||
-              this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED)
-            ) && (
+              this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED ||
+              this.props.showServicesUpdatedInfoBar) && (
               <span className="update-available">•</span>
             )
           }
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index b58956f51..763f4e8a7 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -137,9 +137,9 @@ class SettingsNavigation extends Component {
           activeClassName="is-active"
         >
           {intl.formatMessage(globalMessages.settings)}
-          {stores.settings.app.automaticUpdates &&
+          {stores.settings.app.automaticUpdates && (stores.ui.showServicesUpdatedInfoBar ||
             (stores.app.updateStatus === stores.app.updateStatusTypes.AVAILABLE ||
-              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED) && (
+              stores.app.updateStatus === stores.app.updateStatusTypes.DOWNLOADED)) && (
             <span className="update-available">•</span>
           )}
         </Link>
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 96207445c..47983bc88 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -30,7 +30,7 @@ const messages = defineMessages({
   },
   mostPopularRecipes: {
     id: 'settings.recipes.mostPopular',
-    defaultMessage: '!!!Most popular',
+    defaultMessage: 'Most popular',
   },
   allRecipes: {
     id: 'settings.recipes.all',
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b358a395f..bdb8484d4 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -5,7 +5,8 @@ import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { mdiGithub, mdiOpenInNew } from '@mdi/js';
+import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
+
 import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
@@ -175,6 +176,14 @@ const messages = defineMessages({
     id: 'settings.app.restartRequired',
     defaultMessage: 'Changes require restart',
   },
+  servicesUpdated: {
+    id: 'infobar.servicesUpdated',
+    defaultMessage: 'Your services have been updated.',
+  },
+  buttonReloadServices: {
+    id: 'infobar.buttonReloadServices',
+    defaultMessage: 'Reload services',
+  },
   numberOfColumns: {
     id: 'settings.app.form.splitColumns',
     defaultMessage: 'Number of columns',
@@ -243,6 +252,7 @@ class EditSettingsForm extends Component {
       noUpdateAvailable,
       updateIsReadyToInstall,
       updateFailed,
+      showServicesUpdatedInfoBar,
       isClearingAllCache,
       onClearAllCache,
       getCacheSize,
@@ -366,7 +376,7 @@ class EditSettingsForm extends Component {
               >
                 {intl.formatMessage(messages.headlineAdvanced)}
               </h2>
-              {(isMac || isWindows || process.env.APPIMAGE) && <h2
+              <h2
                 id="updates"
                 className={
                   this.state.activeSetttingsTab === 'updates'
@@ -378,10 +388,10 @@ class EditSettingsForm extends Component {
                 }}
               >
                 {intl.formatMessage(messages.headlineUpdates)}
-                {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable) && (
+                {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable || showServicesUpdatedInfoBar) && (
                   <span className="update-available">•</span>
                 )}
-              </h2>}
+              </h2>
             </div>
 
             {/* General */}
@@ -768,45 +778,66 @@ class EditSettingsForm extends Component {
               <div>
                 <Toggle field={form.$('automaticUpdates')} />
                 {automaticUpdates && (
-                  <div>
-                    <Toggle field={form.$('beta')} />
-                    {updateIsReadyToInstall ? (
-                      <Button
-                        label={intl.formatMessage(messages.buttonInstallUpdate)}
-                        onClick={installUpdate}
-                      />
+                  <>
+                    {(isMac || isWindows || process.env.APPIMAGE) && (
+                      <>
+                        <div>
+                          <Toggle field={form.$('beta')} />
+                          {updateIsReadyToInstall ? (
+                            <Button
+                              label={intl.formatMessage(messages.buttonInstallUpdate)}
+                              onClick={installUpdate}
+                            />
+                          ) : (
+                            <Button
+                              buttonType="secondary"
+                              label={intl.formatMessage(updateButtonLabelMessage)}
+                              onClick={checkForUpdates}
+                              disabled={
+                                !automaticUpdates ||
+                                isCheckingForUpdates ||
+                                isUpdateAvailable ||
+                                !isOnline
+                              }
+                              loaded={!isCheckingForUpdates || !isUpdateAvailable}
+                            />
+                          )}
+                          <br />
+                        </div>
+                        <p>
+                          {intl.formatMessage(messages.currentVersion)} {ferdiVersion}
+                        </p>
+                        {noUpdateAvailable && (
+                          <p>
+                            {intl.formatMessage(messages.updateStatusUpToDate)}.
+                          </p>
+                        )}
+                        {updateFailed && (
+                          <Infobox type="danger" icon="alert">
+                            An error occured (check the console for more details)
+                          </Infobox>
+                        )}
+                      </>
+                    )}
+                    {showServicesUpdatedInfoBar ? (
+                      <>
+                        <p>
+                          <Icon icon={mdiPowerPlug} />
+                          {intl.formatMessage(messages.servicesUpdated)}
+                        </p>
+                        <Button
+                          label={intl.formatMessage(messages.buttonReloadServices)}
+                          onClick={() => window.location.reload()}
+                        />
+                      </>
                     ) : (
-                      <Button
-                        buttonType="secondary"
-                        label={intl.formatMessage(updateButtonLabelMessage)}
-                        onClick={checkForUpdates}
-                        disabled={
-                          !automaticUpdates ||
-                          isCheckingForUpdates ||
-                          isUpdateAvailable ||
-                          !isOnline
-                        }
-                        loaded={!isCheckingForUpdates || !isUpdateAvailable}
-                      />
+                      <p>
+                        <Icon icon={mdiPowerPlug} />
+                        Your services are up-to-date.
+                      </p>
                     )}
-                    <br />
-                  </div>
-                )}
-                <p>
-                  {intl.formatMessage(messages.currentVersion)} {ferdiVersion}
-                </p>
-                {noUpdateAvailable && (
-                  <>
-                    <br />
-                    <br />
-                    {intl.formatMessage(messages.updateStatusUpToDate)}.
                   </>
                 )}
-                {updateFailed && (
-                  <Infobox type="danger" icon="alert">
-                    An error occured (check the console for more details)
-                  </Infobox>
-                )}
                 <p className="settings__message">
                   <Icon icon={mdiGithub} />
                   Ferdi is based on{' '}