IIIF #78 - Adds button to Resource edit page to allow clearing item f…

…rom IIIF cache

client/src/i18n/en.json

@@ -115,6 +115,7 @@
   },
   "Resource": {
     "buttons": {
+      "clearCache": "Clear cache",
       "convert": "Convert",
       "exif": "View Info"
     },
@@ -126,6 +127,10 @@
       "uuid": "Unique identifier"
     },
     "messages": {
+      "cache": {
+        "content": "Successfully removed the {{tab}} from IIIF cache.",
+        "header": "Cache Cleared"
+      },
       "convert": {
         "content": "A request to convert the resource to a PTIF has been submitted. Please refresh the page to view the results.",
         "header": "Convert Resource"

client/src/pages/Resource.js

@@ -37,6 +37,7 @@ const Tabs = {
 };
 
 const ResourceForm = withTranslation()((props) => {
+  const [cacheCleared, setCacheCleared] = useState(false);
   const [converted, setConverted] = useState(false);
   const [errors, setErrors] = useState([]);
   const [info, setInfo] = useState(false);
@@ -74,6 +75,18 @@ const ResourceForm = withTranslation()((props) => {
     return value;
   }, [props.item.exif]);
 
+  /**
+   * Calls the `/api/resources/:id/clear_cache API endpoint and sets any errors on the state.
+   *
+   * @type {function(): Promise<*>}
+   */
+  const onClearCache = useCallback(() => (
+    ResourcesService
+      .clearCache(props.item.id, tab)
+      .then(() => setCacheCleared(true))
+      .catch(({ response: { data } }) => setErrors(data.errors))
+  ), [tab, props.item.id]);
+
   /**
    * Calls the `/api/resources/:id/convert API endpoint and sets any errors on the state.
    *
@@ -172,6 +185,7 @@ const ResourceForm = withTranslation()((props) => {
         />
         <Segment
           padded
+          secondary
         >
           <Menu
             className={cx(styles.ui, styles.menu)}
@@ -206,19 +220,28 @@ const ResourceForm = withTranslation()((props) => {
               >
                 <Menu.Item
                   as={Button}
-                >
-                  <Button
-                    content={props.t('Resource.buttons.convert')}
-                    icon='exchange'
-                    onClick={onConvert}
-                  />
-                </Menu.Item>
+                  content={props.t('Resource.buttons.convert')}
+                  icon='exchange'
+                  onClick={onConvert}
+                />
               </Menu.Menu>
             )}
           </Menu>
           <AttachmentDetails
             attachment={attachment}
           />
+          { AuthenticationService.isAdmin() && attachment && (
+            <div
+              className={styles.actions}
+            >
+              <Button
+                color='red'
+                content={props.t('Resource.buttons.clearCache')}
+                icon='trash'
+                onClick={onClearCache}
+              />
+            </div>
+          )}
           { converted && (
             <Toaster
               onDismiss={() => setConverted(false)}
@@ -232,6 +255,19 @@ const ResourceForm = withTranslation()((props) => {
               />
             </Toaster>
           )}
+          { cacheCleared && (
+            <Toaster
+              onDismiss={() => setCacheCleared(false)}
+              type={Toaster.MessageTypes.positive}
+            >
+              <Message.Header
+                content={props.t('Resource.messages.cache.header')}
+              />
+              <Message.Content
+                content={props.t('Resource.messages.cache.content', { tab })}
+              />
+            </Toaster>
+          )}
         </Segment>
       </SimpleEditPage.Tab>
     </SimpleEditPage>

client/src/pages/Resource.module.css

@@ -1,3 +1,9 @@
 .resource .ui.menu i.icon.attachmentStatus {
   margin-left: 0.5em;
+}
+
+.resource .actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2em;
 }

client/src/services/Resources.js

@@ -8,6 +8,18 @@ import type { Resource as ResourceType } from '../types/Resource';
  * Class responsible for handling all resource API requests.
  */
 class Resources extends BaseService {
+  /**
+   * Calls the `/api/resources/:id/clear_cache` API endpoint.
+   *
+   * @param id
+   * @param attribute
+   *
+   * @returns {*}
+   */
+  clearCache(id: number, attribute: string): Promise<any> {
+    return this.getAxios().post(`${this.getBaseUrl()}/${id}/clear_cache`, { attribute }, this.getConfig());
+  }
+
   /**
    * Calls the `/api/resources/:id/convert` API endpoint.
    *