ISPN-14716 flush cache

cypress/e2e/1_acess_management.cy.js

@@ -9,6 +9,19 @@ describe('Global stats', () => {
     cy.contains('Superuser');
   });
 
+  it('successfully flushes the ACL cache', () => {
+    cy.get('[data-cy=aclActions]').click();
+    cy.get('[data-cy="flushCacheAction"]').click();
+    cy.get('[aria-label="Cancel"]').click();
+    cy.contains('flushed').should('not.exist');
+
+    cy.get('[data-cy=aclActions]').click();
+    cy.get('[data-cy="flushCacheAction"]').click();
+    cy.get('[aria-label="Flush"]').click();
+    cy.contains('Access control list cache successfully flushed across the cluster');
+
+  });
+
   it('successfully creates and removes a role', () => {
     // create
     cy.get('button[data-cy="createRoleButton"]').click();
@@ -28,5 +41,4 @@ describe('Global stats', () => {
     cy.contains('aRole description').should('not.exist');
   });
 
-
 });

src/app/AccessManagement/AccessManager.tsx

@@ -3,30 +3,51 @@ import { useState } from 'react';
 import {
   Card,
   CardBody,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
   Nav,
   NavItem,
   NavList,
   PageSection,
   PageSectionVariants,
   Text,
   TextContent,
-  TextVariants
+  TextVariants,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { RoleTableDisplay } from '@app/AccessManagement/RoleTableDisplay';
+import { FlushRoleCacheModal } from '@app/AccessManagement/FlushRoleCacheModal';
 
 const AccessManager = () => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
   const [activeTabKey, setActiveTabKey] = useState('0');
   const [showRoles, setShowRoles] = useState(true);
   const [showAccessControl, setShowAccessControl] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFlushCache, setIsFlushCache] = useState(false);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    setIsOpen(false);
+  };
 
   interface AccessTab {
     key: string;
     name: string;
   }
-  const handleTabClick = (nav) => {
+
+  const handleTabClick = (ev, nav) => {
     const tabIndex = nav.itemId;
     setActiveTabKey(tabIndex);
     setShowRoles(tabIndex == '0');
@@ -62,17 +83,61 @@ const AccessManager = () => {
     </Card>
   );
 
+  const displayActions = (
+    <ToolbarGroup align={{ default: 'alignRight' }}>
+      <ToolbarItem>
+        <Dropdown
+          isOpen={isOpen}
+          onSelect={onSelect}
+          onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle ref={toggleRef} data-cy="aclActions" onClick={onToggleClick} isExpanded={isOpen}>
+              {t('common.actions.actions')}
+            </MenuToggle>
+          )}
+          ouiaId="accessManagementDropdown"
+          shouldFocusToggleOnSelect
+        >
+          <DropdownList>
+            <DropdownItem value={0}
+                          key="flushCacheAction"
+                          data-cy="flushCacheAction"
+                          onClick={() => setIsFlushCache(true)}>
+              {t('access-management.flush-cache-action')}
+            </DropdownItem>
+          </DropdownList>
+        </Dropdown>
+      </ToolbarItem>
+    </ToolbarGroup>
+  );
+
   return (
-    <>
+    <React.Fragment>
       <PageSection variant={PageSectionVariants.light} style={{ paddingBottom: 0 }}>
-        <TextContent style={{ marginBottom: '1rem' }}>
-          <Text component={TextVariants.h1}>{t('access-management.title')}</Text>
-          <Text component={TextVariants.p}>{t('access-management.description', { brandname: brandname })}</Text>
-        </TextContent>
+        <Toolbar id="access-management-toolbar">
+          <ToolbarContent>
+            <ToolbarGroup>
+              <ToolbarItem>
+                <TextContent>
+                  <Text component={TextVariants.h1}>{t('access-management.title')}</Text>
+                  <Text component={TextVariants.p}>{t('access-management.description', { brandname: brandname })}</Text>
+                </TextContent>
+              </ToolbarItem>
+            </ToolbarGroup>
+            {displayActions}
+          </ToolbarContent>
+        </Toolbar>
         {buildTabs()}
       </PageSection>
-      <PageSection variant={PageSectionVariants.default}>{buildSelectedContent}</PageSection>
-    </>
+      <PageSection variant={PageSectionVariants.default}>
+        {buildSelectedContent}
+        <FlushRoleCacheModal isModalOpen={isFlushCache}
+                             closeModal={() => setIsFlushCache(false)}
+                             submitModal={() => {
+                               setIsFlushCache(false);
+                             }}/>
+      </PageSection>
+    </React.Fragment>
   );
 };
 

src/app/AccessManagement/FlushRoleCacheModal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button, ButtonVariant, Modal, Text, TextContent } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
+import { useFlushCache } from '@app/services/rolesHook';
+
+const FlushRoleCacheModal = (props: { isModalOpen: boolean; submitModal: () => void; closeModal: () => void }) => {
+  const { t } = useTranslation();
+  const { onFlushCache } = useFlushCache(props.submitModal);
+
+  return (
+    <Modal
+      titleIconVariant={'warning'}
+      id={'flush-cache-modal'}
+      className="pf-m-redhat-font"
+      width={'50%'}
+      isOpen={props.isModalOpen}
+      title={t('access-management.modal-flush-cache-title')}
+      onClose={props.closeModal}
+      aria-label="modal-flush-cache"
+      disableFocusTrap={true}
+      actions={[
+        <Button
+          key={'Flush'}
+          aria-label={'Flush'}
+          variant={ButtonVariant.warning}
+          onClick={() => {
+            onFlushCache();
+          }}
+        >
+          {t('access-management.flush-cache-action')}
+        </Button>,
+        <Button
+          key={'Cancel'}
+          aria-label={'Cancel'}
+          variant={ButtonVariant.link}
+          onClick={props.closeModal}
+        >
+          {t('common.actions.cancel')}
+        </Button>
+      ]}
+    >
+      <TextContent>
+        <Text>
+          {t('access-management.modal-flush-cache-description')}
+        </Text>
+      </TextContent>
+    </Modal>
+  );
+};
+
+export { FlushRoleCacheModal };

src/app/CacheManagers/CacheManagers.tsx

@@ -14,7 +14,11 @@ import {
   Spinner,
   Text,
   TextContent,
-  TextVariants
+  TextVariants,
+  Title,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
 } from '@patternfly/react-core';
 import displayUtils from '@services/displayUtils';
 import { CacheTableDisplay } from '@app/CacheManagers/CacheTableDisplay';
@@ -169,22 +173,23 @@ const CacheManagers = () => {
     title = displayUtils.capitalize(cm.name);
     return (
       <PageSection variant={PageSectionVariants.light} style={{ paddingBottom: 0 }}>
-        <Flex id="cluster-manager-header" direction={{ default: 'column' }}>
-          <Flex>
-            <FlexItem>
-              <TextContent>
-                <Text component={TextVariants.h1}>{title}</Text>
-              </TextContent>
-            </FlexItem>
-          </Flex>
-          <Flex>
-            <FlexItem>
+        <Toolbar id="cluster-manager-header">
+          <ToolbarContent>
+            <ToolbarItem>
+              <Title headingLevel={'h1'}>{title}</Title>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+        <Toolbar id="cluster-manager-sub-header">
+          <ToolbarContent>
+            <ToolbarItem>
               <Status status={cm.cache_manager_status} />
-            </FlexItem>
-            {buildSiteDisplay(cm.local_site)}
-            <RebalancingCacheManager />
-          </Flex>
-        </Flex>
+            </ToolbarItem>
+            <ToolbarItem>
+              <RebalancingCacheManager />
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
         {buildTabs()}
       </PageSection>
     );