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

6 files changed, 28 insertions, 5 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();