w

infinispan · Nov 21, 2024 · 914038f · 914038f
1 parent e9801b0
commit 914038f
Show file tree

Hide file tree

Showing 41 changed files with 1,384 additions and 2,475 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
   },
   "dependencies": {
     "@patternfly/react-charts": "^8.0.0",
+    "@patternfly/react-component-groups": "^6.0.0",
     "@patternfly/react-code-editor": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",

diff --git a/src/__tests__/services/displayUtils.test.ts b/src/__tests__/services/displayUtils.test.ts
@@ -15,8 +15,7 @@ import displayUtils, {
   TERMINATED_STATUS,
   UNKNOWN_STATUS
 } from '@services/displayUtils';
-import {
-} from '@patternfly/react-tokens';
+import {} from '@patternfly/react-tokens';
 import { AlertVariant } from '@patternfly/react-core';
 import { CacheType, ComponentHealth } from '@services/infinispanRefData';
 
@@ -77,7 +76,6 @@ describe('Display Utils tests', () => {
     // expect(displayUtils.healthColor(ComponentHealth.DEGRADED, false)).toBe(global_danger_color_100.value);
     // expect(displayUtils.healthColor(ComponentHealth.HEALTHY_REBALANCING, false)).toBe(chart_global_label_Fill.value);
     // expect(displayUtils.healthColor(ComponentHealth.FAILED, false)).toBe(global_danger_color_100.value);
-
     // expect(displayUtils.healthColor(ComponentHealth.HEALTHY, true)).toBe(global_success_color_100.value);
     // expect(displayUtils.healthColor(ComponentHealth.DEGRADED, true)).toBe(global_danger_color_100.value);
     // expect(displayUtils.healthColor(ComponentHealth.HEALTHY_REBALANCING, true)).toBe(global_warning_color_100.value);

diff --git a/src/app/About/About.tsx b/src/app/About/About.tsx
@@ -12,15 +12,15 @@ import {
   Icon,
   Spinner,
   Stack,
-  StackItem,
+  StackItem
 } from '@patternfly/react-core';
 import icon from '!!url-loader!@app/assets/favicons/ms-icon-310x310.png';
 import {
   FacebookIcon,
   GithubIcon,
   OutlinedCommentsIcon,
   StackOverflowIcon,
-  TwitterIcon,
+  TwitterIcon
 } from '@patternfly/react-icons';
 import { t_global_spacer_lg } from '@patternfly/react-tokens';
 import { useFetchVersion } from '@app/services/serverHook';
@@ -35,8 +35,7 @@ const About = (props: { isModalOpen: boolean; closeModal: () => void }) => {
 
   const infinispanGithubLink = 'https://github.com/infinispan/';
   const infinispanZulipLink = 'https://infinispan.zulipchat.com/';
-  const infinispanStackOverflowLink =
-    'https://stackoverflow.com/questions/tagged/?tagnames=infinispan&sort=newest';
+  const infinispanStackOverflowLink = 'https://stackoverflow.com/questions/tagged/?tagnames=infinispan&sort=newest';
   const infinispanTwitterLink = 'https://twitter.com/infinispan/';
   const infinispanFacebookLink = 'https://www.facebook.com/infinispan/';
   const description1 = t('welcome-page.description1', { brandname: brandname });
@@ -75,10 +74,7 @@ const About = (props: { isModalOpen: boolean; closeModal: () => void }) => {
         <StackItem style={{ paddingBottom: t_global_spacer_lg.value }}>
           <Content component={ContentVariants.dl}>
             <Content component={ContentVariants.dt}>Version</Content>
-            <Content component={ContentVariants.dd}>
-              {' '}
-              {loading ? <Spinner size={'sm'} /> : version}
-            </Content>
+            <Content component={ContentVariants.dd}> {loading ? <Spinner size={'sm'} /> : version}</Content>
           </Content>
         </StackItem>
         <StackItem style={{ paddingBottom: t_global_spacer_lg.value }}>

diff --git a/src/app/AccessManagement/AccessManager.tsx b/src/app/AccessManagement/AccessManager.tsx
@@ -14,7 +14,7 @@ import {
   NavItem,
   NavList,
   PageSection,
-  PageSectionVariants,
+  PageSectionVariants, Tab, Tabs, TabTitleText,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -25,11 +25,12 @@ import { RoleTableDisplay } from '@app/AccessManagement/RoleTableDisplay';
 import { FlushRoleCacheModal } from '@app/AccessManagement/FlushRoleCacheModal';
 import { PrincipalTableDisplay } from '@app/AccessManagement/PrincipalTableDisplay';
 import { UsersTableDisplay } from '@app/AccessManagement/UsersTableDisplay';
+import { PageHeader } from '@patternfly/react-component-groups';
 
 const AccessManager = () => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
-  const [activeTabKey, setActiveTabKey] = useState<'roles' | 'users' | 'principals'>('roles');
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
   const [showRoles, setShowRoles] = useState(true);
   const [showUsers, setShowUsers] = useState(false);
   const [showAccessControl, setShowAccessControl] = useState(false);
@@ -39,44 +40,42 @@ const AccessManager = () => {
   interface AccessTab {
     key: string;
     name: string;
+    eventKey: number;
   }
 
-  const handleTabClick = (ev, nav) => {
-    const tabIndex = nav.itemId;
-    setActiveTabKey(tabIndex);
-    setShowRoles(tabIndex == 'roles');
-    setShowAccessControl(tabIndex == 'principals');
-    setShowUsers(tabIndex == 'users');
+  const handleTabClick = (index:number) => {
+    setActiveTabKey(index);
+    setShowRoles(index == 0);
+    setShowAccessControl(index == 1);
+    setShowUsers(index == 2);
   };
 
   const buildTabs = () => {
     const tabs: AccessTab[] = [
-      { name: t('access-management.tab-roles'), key: 'roles' },
-      { name: t('access-management.tab-users'), key: 'users' },
-      { name: t('access-management.tab-access-control'), key: 'principals' }
+      { name: t('access-management.tab-roles'), key: 'roles', eventKey: 0 },
+      { name: t('access-management.tab-users'), key: 'users', eventKey: 1 },
+      { name: t('access-management.tab-access-control'), key: 'principals', eventKey: 2}
     ];
 
     return (
-      <Nav onSelect={handleTabClick} variant={'horizontal'}>
-        <NavList>
+      <Tabs  data-cy="navigationTabs"
+             activeKey={activeTabKey}
+             onSelect={(_event, tab) => handleTabClick(tab as number)}>
           {tabs.map((tab) => (
-            <NavItem
-              data-cy={'nav-item-' + tab.key}
+            <Tab
+              data-cy={'nav-item-' + tab.name}
               aria-label={'nav-item-' + tab.key}
               key={'nav-item-' + tab.key}
-              itemId={tab.key}
-              isActive={activeTabKey === tab.key}
-            >
-              {tab.name}
-            </NavItem>
+              eventKey={tab.eventKey}
+              title={<TabTitleText>{tab.name}</TabTitleText>}
+            />
           ))}
-        </NavList>
-      </Nav>
+      </Tabs>
     );
   };
 
   const buildSelectedContent = (
-    <Card>
+    <Card isFullHeight isPlain>
       <CardBody>
         {showRoles && <RoleTableDisplay />}
         {showAccessControl && <PrincipalTableDisplay />}
@@ -117,23 +116,13 @@ const AccessManager = () => {
 
   return (
     <React.Fragment>
-      <PageSection style={{ paddingBottom: 0 }}>
-        <Toolbar id="access-management-toolbar">
-          <ToolbarContent>
-            <ToolbarGroup>
-              <ToolbarItem>
-                <Content component={ContentVariants.h1}>{t('access-management.title')}</Content>
-                <Content component={ContentVariants.p}>
-                  {t('access-management.description', { brandname: brandname })}
-                </Content>
-              </ToolbarItem>
-            </ToolbarGroup>
-            {displayActions}
-          </ToolbarContent>
-        </Toolbar>
-        {buildTabs()}
-      </PageSection>
+      <PageHeader
+        title={t('access-management.title')}
+        subtitle={t('access-management.description', { brandname: brandname })}
+        actionMenu={displayActions}
+      />
       <PageSection variant={PageSectionVariants.default}>
+        {buildTabs()}
         {buildSelectedContent}
         <FlushRoleCacheModal
           isModalOpen={isFlushCache}