Expose "Clear service cache" in the service settings screen and the sidebar context menu for individual services (#1053)

10 files changed, 46 insertions, 6 deletions

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 4eb18485f..fac424477 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -98,6 +98,7 @@ interface IProps extends WrappedComponentProps {
   toggleAudio: (args: { serviceId: string }) => void;
   toggleDarkMode: (args: { serviceId: string }) => void;
   deleteService: (args: { serviceId: string }) => void;
+  clearCache: (args: { serviceId: string }) => void;
   hibernateService: (args: { serviceId: string }) => void;
   wakeUpService: (args: { serviceId: string }) => void;
   updateService: (args: {
@@ -204,6 +205,7 @@ class Sidebar extends Component<IProps, IState> {
           toggleDarkMode={this.props.toggleDarkMode}
           deleteService={this.props.deleteService}
           updateService={this.props.updateService}
+          clearCache={this.props.clearCache}
           hibernateService={this.props.hibernateService}
           wakeUpService={this.props.wakeUpService}
         />
diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
index bb889ebef..5f711c30d 100644
--- a/src/components/services/tabs/TabBarSortableList.tsx
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -17,6 +17,7 @@ interface IProps {
   toggleAudio: (args: { serviceId: string }) => void;
   toggleDarkMode: (args: { serviceId: string }) => void;
   deleteService: (args: { serviceId: string }) => void;
+  clearCache: (args: { serviceId: string }) => void;
   disableService: (args: { serviceId: string }) => void;
   enableService: (args: { serviceId: string }) => void;
   hibernateService: (args: { serviceId: string }) => void;
@@ -34,6 +35,7 @@ class TabBarSortableList extends Component<IProps> {
       toggleAudio,
       toggleDarkMode,
       deleteService,
+      clearCache,
       disableService,
       enableService,
       hibernateService,
@@ -61,6 +63,7 @@ class TabBarSortableList extends Component<IProps> {
             toggleAudio={() => toggleAudio({ serviceId: service.id })}
             toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
+            clearCache={() => clearCache({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
             hibernateService={() => hibernateService({ serviceId: service.id })}
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index 2ed595919..289597db9 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -129,6 +129,7 @@ interface IProps extends WrappedComponentProps, WithStylesProps<typeof styles> {
   toggleDarkMode: () => void;
   openSettings: (args: { path: string }) => void;
   deleteService: () => void;
+  clearCache: () => void;
   disableService: () => void;
   enableService: () => void;
   hibernateService: () => void;
@@ -220,6 +221,7 @@ class TabItem extends Component<IProps, IState> {
       toggleAudio,
       toggleDarkMode,
       deleteService,
+      clearCache,
       disableService,
       enableService,
       hibernateService,
@@ -298,6 +300,11 @@ class TabItem extends Component<IProps, IState> {
         enabled: service.isEnabled && service.canHibernate,
       },
       {
+        label: intl.formatMessage(globalMessages.clearCache),
+        click: () => clearCache(),
+        enabled: service.isEnabled,
+      },
+      {
         type: 'separator',
       },
       {
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx
index e3b5a7ba9..f09877b2f 100644
--- a/src/components/services/tabs/Tabbar.tsx
+++ b/src/components/services/tabs/Tabbar.tsx
@@ -20,6 +20,7 @@ interface IProps {
   toggleAudio: (args: { serviceId: string }) => void;
   toggleDarkMode: (args: { serviceId: string }) => void;
   deleteService: (args: { serviceId: string }) => void;
+  clearCache: (args: { serviceId: string }) => void;
   hibernateService: (args: { serviceId: string }) => void;
   wakeUpService: (args: { serviceId: string }) => void;
   updateService: (args: {
@@ -86,6 +87,7 @@ class TabBar extends Component<IProps> {
       toggleAudio,
       toggleDarkMode,
       deleteService,
+      clearCache,
       useHorizontalStyle,
       showMessageBadgeWhenMutedSetting,
       showServiceNameSetting,
@@ -108,6 +110,7 @@ class TabBar extends Component<IProps> {
           toggleAudio={toggleAudio}
           toggleDarkMode={toggleDarkMode}
           deleteService={deleteService}
+          clearCache={clearCache}
           disableService={args => this.disableService(args)}
           enableService={args => this.enableService(args)}
           hibernateService={args => this.hibernateService(args)}
diff --git a/src/components/settings/services/EditServiceForm.tsx b/src/components/settings/services/EditServiceForm.tsx
index c04a53b50..520cb3c46 100644
--- a/src/components/settings/services/EditServiceForm.tsx
+++ b/src/components/settings/services/EditServiceForm.tsx
@@ -156,6 +156,7 @@ interface IProps extends WrappedComponentProps {
   form: Form;
   onSubmit: (...args: any[]) => void;
   onDelete: () => void;
+  onClearCache: () => void;
   openRecipeFile: (recipeFile: string) => void;
   isSaving: boolean;
   isDeleting: boolean;
@@ -223,6 +224,7 @@ class EditServiceForm extends Component<IProps, IState> {
       isSaving,
       isDeleting,
       onDelete,
+      onClearCache,
       openRecipeFile,
       isProxyFeatureEnabled,
       intl,
@@ -246,6 +248,15 @@ class EditServiceForm extends Component<IProps, IState> {
       />
     );
 
+    const clearCacheButton = (
+      <Button
+        buttonType="secondary"
+        label={intl.formatMessage(globalMessages.clearCache)}
+        className="settings__open-settings-cache-button"
+        onClick={onClearCache}
+      />
+    );
+
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service?.team) {
       activeTabIndex = 1;
@@ -502,6 +513,7 @@ class EditServiceForm extends Component<IProps, IState> {
         <div className="settings__controls">
           {/* Delete Button */}
           <div>{action === 'edit' && deleteButton}</div>
+          <div>{action === 'edit' && clearCacheButton}</div>
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 49798dd92..39c25f529 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -189,10 +189,6 @@ const messages = defineMessages({
     id: 'settings.app.cacheNotCleared',
     defaultMessage: "Couldn't clear all cache",
   },
-  buttonClearAllCache: {
-    id: 'settings.app.buttonClearAllCache',
-    defaultMessage: 'Clear cache',
-  },
   subheadlineFerdiumProfile: {
     id: 'settings.app.subheadlineFerdiumProfile',
     defaultMessage: 'Ferdium Profile',
@@ -974,7 +970,7 @@ class EditSettingsForm extends Component<IProps, IState> {
                     <div className="settings__open-settings-cache-container">
                       <Button
                         buttonType="secondary"
-                        label={intl.formatMessage(messages.buttonClearAllCache)}
+                        label={intl.formatMessage(globalMessages.clearCache)}
                         className="settings__open-settings-cache-button"
                         onClick={() => {
                           onClearAllCache();
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index b077cebd7..1cffc7ad1 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -42,6 +42,7 @@ class AppLayoutContainer extends Component<IProps> {
       toggleDarkMode,
       deleteService,
       updateService,
+      clearCache,
       hibernate,
       awake,
     } = this.props.actions.service;
@@ -97,6 +98,7 @@ class AppLayoutContainer extends Component<IProps> {
         toggleDarkMode={toggleDarkMode}
         deleteService={deleteService}
         updateService={updateService}
+        clearCache={clearCache}
         hibernateService={hibernate}
         wakeUpService={awake}
         toggleMuteApp={toggleMuteApp}
diff --git a/src/containers/settings/EditServiceScreen.tsx b/src/containers/settings/EditServiceScreen.tsx
index 0a079c608..3b9d3ee43 100644
--- a/src/containers/settings/EditServiceScreen.tsx
+++ b/src/containers/settings/EditServiceScreen.tsx
@@ -468,6 +468,16 @@ class EditServiceScreen extends Component<IProps> {
     }
   }
 
+  clearCache(): void {
+    const { action } = this.props.params;
+
+    if (action === 'edit') {
+      const { clearCache } = this.props.actions.service;
+      const { activeSettings: service } = this.props.stores.services;
+      clearCache({ serviceId: service?.id });
+    }
+  }
+
   openRecipeFile(file: any): void {
     const { openRecipeFile } = this.props.actions.service;
     const { action } = this.props.params;
@@ -534,6 +544,7 @@ class EditServiceScreen extends Component<IProps> {
           isDeleting={services.deleteServiceRequest.isExecuting}
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
+          onClearCache={() => this.clearCache()}
           openRecipeFile={file => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
         />
diff --git a/src/i18n/globalMessages.ts b/src/i18n/globalMessages.ts
index 690bad1de..9f55da57a 100644
--- a/src/i18n/globalMessages.ts
+++ b/src/i18n/globalMessages.ts
@@ -74,4 +74,8 @@ export default defineMessages({
     id: 'global.edit',
     defaultMessage: 'Edit',
   },
+  clearCache: {
+    id: 'global.clearCache',
+    defaultMessage: 'Clear cache',
+  },
 });
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 13fec6102..82c0f1b02 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -22,6 +22,7 @@
   "feature.quickSwitch.title": "QuickSwitch",
   "global.api.unhealthy": "Can't connect to {serverNameParse} online services",
   "global.cancel": "Cancel",
+  "global.clearCache": "Clear cache",
   "global.edit": "Edit",
   "global.no": "No",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
@@ -183,7 +184,6 @@
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Ferdium License:",
   "settings.app.accentColorInfo": "Write your color choice in a CSS-compatible format. (Default: {defaultAccentColor} or clear the input field)",
-  "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonOpenFerdiumProfileFolder": "Open Profile folder",
   "settings.app.buttonOpenFerdiumServiceRecipesFolder": "Open Service Recipes folder",