[#629] Add cache delete in cache detail

Author: karesti

cypress/e2e/2_cache-detail.cy.js

@@ -326,6 +326,12 @@ describe('Cache Detail Overview', () => {
     cy.contains('Rebalancing is on');
   });
 
+  it('successfully displays delete cache modal', () => {
+    cy.get('[data-cy=detailCacheActions]').click();
+    cy.get("[data-cy=manageDeleteLink]").click();
+    cy.get('#deleteCacheModal').should('exist');
+  })
+
   function verifyGet(keyType, key, value) {
     // Going back to cache entries page
     cy.get('[data-cy=cacheEntriesTab]').click();

src/app/Caches/DetailCache.tsx

@@ -44,7 +44,8 @@ import {
   ExclamationCircleIcon,
   InfoCircleIcon,
   PencilAltIcon,
-  RedoIcon
+  RedoIcon,
+  TrashIcon
 } from '@patternfly/react-icons';
 import { QueryEntries } from '@app/Caches/Query/QueryEntries';
 import { Link } from 'react-router-dom';
@@ -60,6 +61,7 @@ import { TracingEnabled } from '@app/Common/TracingEnabled';
 import { InfinispanComponentStatus } from '@app/Common/InfinispanComponentStatus';
 import { PageHeader } from '@patternfly/react-component-groups';
 import { UpdateAliasCache } from '@app/Caches/UpdateAliasCache';
+import { DeleteCache } from '@app/Caches/DeleteCache';
 
 const DetailCache = (props: { cacheName: string }) => {
   const cacheName = props.cacheName;
@@ -71,6 +73,7 @@ const DetailCache = (props: { cacheName: string }) => {
   const [activeTabKey1, setActiveTabKey1] = useState<number | string>('');
   const [activeTabKey2, setActiveTabKey2] = useState<number | string>(10);
   const [isOpen, setIsOpen] = useState(false);
+  const [isOpenDelete, setIsOpenDelete] = useState(false);
   const [cacheAction, setCacheAction] = useState<string>('');
   const isAdmin = ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser);
   const isCacheReader = ConsoleServices.security().hasCacheConsoleACL(ConsoleACL.READ, cacheName, connectedUser);
@@ -209,6 +212,10 @@ const DetailCache = (props: { cacheName: string }) => {
     return cache && cache?.features?.indexed;
   };
 
+  const displayDelete = () => {
+    return isAdmin && cache;
+  };
+
   const displayEditConfigManage = () => {
     return isAdmin && cache;
   };
@@ -296,6 +303,25 @@ const DetailCache = (props: { cacheName: string }) => {
     );
   };
 
+  const buildDelete = () => {
+    if (!displayDelete()) return;
+
+    return (
+      <DropdownItem
+        value={'deleteCache'}
+        key="manageDeleteLink"
+        data-cy="manageDeleteLink"
+        icon={<TrashIcon />}
+        onClick={(ev) => {
+          setIsOpenDelete(true);
+          setIsOpen(false);
+        }}
+      >
+        {t('caches.actions.action-delete')}
+      </DropdownItem>
+    );
+  };
+
   const buildRefresh = () => {
     return (
       <React.Fragment>
@@ -460,6 +486,7 @@ const DetailCache = (props: { cacheName: string }) => {
             {buildIndexManage()}
             {buildBackupsManage()}
             {buildRefresh()}
+            {buildDelete()}
           </DropdownList>
         </Dropdown>
       </ToolbarItem>
@@ -513,6 +540,20 @@ const DetailCache = (props: { cacheName: string }) => {
         )}
         {buildDetailContent()}
       </PageSection>
+      <DeleteCache
+        cacheName={cacheName}
+        isModalOpen={isOpenDelete}
+        closeModal={(deleteDone: boolean) => {
+          if (deleteDone) {
+            navigate({
+              pathname: '/',
+              search: location.search
+            });
+          } else {
+            setIsOpenDelete(false);
+          }
+        }}
+      />
       <UpdateAliasCache
         cacheName={cacheName}
         isModalOpen={cacheAction == 'aliases'}

src/app/Common/SelectMultiWithChips.tsx

@@ -213,7 +213,8 @@ const SelectMultiWithChips = (props: {
                 props.onClear();
                 textInputRef?.current?.focus();
               }}
-              aria-label="Clear input value" id="clearInput"
+              aria-label="Clear input value"
+              id="clearInput"
             >
               <TimesIcon aria-hidden />
             </Button>

src/app/assets/languages/en.json

@@ -589,6 +589,7 @@
       "action-manage-tracing": "Manage tracing",
       "action-manage-backups": "Manage backups",
       "action-manage-config": "Edit configuration",
+      "action-delete": "Delete",
       "refresh": "Refresh",
       "back": "Back"
     },

src/app/index.tsx

@@ -25,9 +25,7 @@ const App = () => {
     ConsoleServices.init();
   }
   // Base is coming from index.html, and can dynamically change in prod with a reverse proxy
-  const base =
-    document.querySelector('base')?.getAttribute('href')?.replace(/\/$/, '') || '/';
-
+  const base = document.querySelector('base')?.getAttribute('href')?.replace(/\/$/, '') || '/';
 
   return (
     <Router basename={base == '{{INFINISPAN_BASE_PATH}}' ? '/console' : base}>

src/services/ConsoleServices.ts

@@ -50,8 +50,8 @@ export class ConsoleServices {
         return process.env.INFINISPAN_SERVER_URL + '/rest/v2';
       }
     } else {
-      const x = (window as any);
-      return window.location.origin.toString() + (x.INFINISPAN_CONFIG?.restContextPath || '/rest')  + '/v2';
+      const x = window as any;
+      return window.location.origin.toString() + (x.INFINISPAN_CONFIG?.restContextPath || '/rest') + '/v2';
     }
   }