2 files changed, 28 insertions, 53 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index b5300f605..4458c4c5a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -71,14 +71,6 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
-  buttonClearCache: {
-    id: 'settings.service.form.buttonClearCache',
-    defaultMessage: '!!!Clear cache',
-  },
-  buttonClearingCache: {
-    id: 'settings.service.form.buttonClearingCache',
-    defaultMessage: '!!!Clearing cache',
-  },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
     defaultMessage: '!!!Notifications',
@@ -110,10 +102,8 @@ export default class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    onClearCache: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
-    isClearingCache: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -168,9 +158,7 @@ export default class EditServiceForm extends Component {
       form,
       isSaving,
       isDeleting,
-      isClearingCache,
       onDelete,
-      onClearCache,
     } = this.props;
     const { intl } = this.context;
 
@@ -193,23 +181,6 @@ export default class EditServiceForm extends Component {
       />
     );
 
-    const clearCacheButton = isClearingCache ? (
-      <Button
-        buttonType="secondary"
-        className="settings__clear-cache-button"
-        loaded={false}
-        label={intl.formatMessage(messages.buttonClearingCache)}
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="warning"
-        className="settings__clear-cache-button"
-        label={intl.formatMessage(messages.buttonClearCache)}
-        onClick={onClearCache}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -316,7 +287,6 @@ export default class EditServiceForm extends Component {
               <div className="settings__settings-group">
                 <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
                 <Toggle field={form.$('isEnabled')} />
-                {clearCacheButton}
               </div>
             </div>
             {recipe.message && (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 074a4b731..4f027638c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,13 +40,13 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Franz into your language.',
   },
+  cacheInfo: {
+    id: 'settings.app.cacheInfo',
+    defaultMessage: '!!!Franz cache is currently using {size} of disk space.',
+  },
   buttonClearAllCache: {
     id: 'settings.app.buttonClearAllCache',
-    defaultMessage: '!!!Clear global cache for Franz and all services',
-  },
-  buttonClearingAllCache: {
-    id: 'settings.app.buttonClearingAllCache',
-    defaultMessage: '!!!Clearing global cache...',
+    defaultMessage: '!!!Clear cache',
   },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
@@ -87,6 +87,7 @@ export default class EditSettingsForm extends Component {
     updateIsReadyToInstall: PropTypes.bool.isRequired,
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -115,6 +116,7 @@ export default class EditSettingsForm extends Component {
       updateIsReadyToInstall,
       isClearingAllCache,
       onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -127,23 +129,6 @@ export default class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
-    const clearAllCacheButton = isClearingAllCache ? (
-      <Button
-        buttonType="secondary"
-        className="settings__clear-all-cache-button"
-        loaded={false}
-        label={intl.formatMessage(messages.buttonClearingAllCache)}
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="warning"
-        className="settings__clear-all-cache-button"
-        label={intl.formatMessage(messages.buttonClearAllCache)}
-        onClick={onClearAllCache}
-      />
-    );
-
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -184,7 +169,26 @@ export default class EditSettingsForm extends Component {
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
-            {clearAllCacheButton}
+            <div className="settings__settings-group">
+              <h3>
+                {/* {intl.formatMessage(messages.headlineGeneral)} */}
+                Service cache
+              </h3>
+              <p>
+                {intl.formatMessage(messages.cacheInfo, {
+                  size: cacheSize,
+                })}
+              </p>
+              <p>
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.buttonClearAllCache)}
+                  onClick={onClearAllCache}
+                  disabled={isClearingAllCache}
+                  loaded={!isClearingAllCache}
+                />
+              </p>
+            </div>
 
             {/* Updates */}
             <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
@@ -195,6 +199,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}