1 files changed, 35 insertions, 0 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index ff398aa33..4f027638c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -40,6 +40,14 @@ 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 cache',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -77,6 +85,9 @@ export default class EditSettingsForm extends Component {
     isUpdateAvailable: PropTypes.bool.isRequired,
     noUpdateAvailable: PropTypes.bool.isRequired,
     updateIsReadyToInstall: PropTypes.bool.isRequired,
+    isClearingAllCache: PropTypes.bool.isRequired,
+    onClearAllCache: PropTypes.func.isRequired,
+    cacheSize: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
@@ -103,6 +114,9 @@ export default class EditSettingsForm extends Component {
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
+      isClearingAllCache,
+      onClearAllCache,
+      cacheSize,
     } = this.props;
     const { intl } = this.context;
 
@@ -155,6 +169,26 @@ export default class EditSettingsForm extends Component {
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
+            <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>
@@ -165,6 +199,7 @@ export default class EditSettingsForm extends Component {
               />
             ) : (
               <Button
+                buttonType="secondary"
                 label={intl.formatMessage(updateButtonLabelMessage)}
                 onClick={checkForUpdates}
                 disabled={isCheckingForUpdates || isUpdateAvailable}