ISPN-15081 Patternfly 5 update

infinispan · Aug 4, 2023 · a484cbb · a484cbb
1 parent 764cd71
commit a484cbb
Show file tree

Hide file tree

Showing 69 changed files with 9,606 additions and 7,385 deletions.
diff --git a/.cache_1b2yk2k b/.cache_1b2yk2k
diff --git a/.eslintrc b/.eslintrc
@@ -39,12 +39,12 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/interface-name-prefix": "off",
     "prettier/prettier": "off",
     "import/no-unresolved": "off",
     "import/extensions": "off",
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "@typescript-eslint/no-unused-vars": "off"
   },
   "env": {
     "browser": true,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,21 +81,21 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@patternfly/react-charts": "^6.94.19",
-    "@patternfly/react-code-editor": "^4.82.113",
-    "@patternfly/react-core": "^4.276.8",
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-log-viewer": "^4.87.100",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.113.0",
-    "@patternfly/react-tokens": "^4.94.6",
+    "@patternfly/react-charts": "^7.0.0",
+    "@patternfly/react-code-editor": "^5.0.0",
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-icons": "^5.0.0",
+    "@patternfly/react-log-viewer": "^5.0.0",
+    "@patternfly/react-styles": "^5.0.0",
+    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-tokens": "^5.0.0",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
     "keycloak-js": "^12.0.4",
     "monaco-editor": "^0.34.0",
     "numeral": "^2.0.6",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.18.6",
     "react-monaco-editor": "^0.50.1",

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -2,11 +2,6 @@ import React, { useEffect, useState } from 'react';
 
 import {
   Brand,
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
-  DropdownPosition,
   Flex,
   FlexItem,
   Nav,
@@ -29,8 +24,16 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  Tooltip
+  Tooltip,
+  PageSidebarBody
 } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownToggle,
+  DropdownPosition
+} from '@patternfly/react-core/deprecated';
 import icon from '!!url-loader!@app/assets/images/brand.svg';
 import { Link, NavLink, Redirect } from 'react-router-dom';
 import { routes } from '@app/routes';
@@ -155,11 +158,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
-            <Dropdown data-cy="aboutInfoQuestionMark" id="aboutInfoQuestionMark"
+            <Dropdown
+              data-cy="aboutInfoQuestionMark"
+              id="aboutInfoQuestionMark"
               position={DropdownPosition.right}
               isPlain
               onSelect={() => setIsHelpOpen(!isHelpOpen)}
@@ -186,7 +191,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
         </PageToggleButton>
       </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand component={(props) => Logo}/>
+        <MastheadBrand component={(props) => Logo} />
       </MastheadMain>
       <MastheadContent>{headerToolbar}</MastheadContent>
     </Masthead>
@@ -256,7 +261,13 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
         mainContainerId="primary-app-container"
         header={isWelcomePage ? null : Header}
         skipToContent={PageSkipToContent}
-        sidebar={isWelcomePage ? null : <PageSidebar theme="dark" nav={Navigation} />}
+        sidebar={
+          isWelcomePage ? null : (
+            <PageSidebar theme="dark">
+              <PageSidebarBody>{Navigation}</PageSidebarBody>
+            </PageSidebar>
+          )
+        }
         isManagedSidebar
       >
         <ActionResponseAlert />

diff --git a/src/app/CacheManagers/CacheManagers.tsx b/src/app/CacheManagers/CacheManagers.tsx
@@ -82,7 +82,7 @@ const CacheManagers = () => {
     return (
       <Nav
         data-cy="navigationTabs"
-        onSelect={handleTabClick}
+        onSelect={(_event, nav) => handleTabClick(nav)}
         variant={'tertiary'}
         style={{ marginTop: global_spacer_md.value }}
       >
@@ -142,7 +142,7 @@ const CacheManagers = () => {
 
     return (
       <React.Fragment>
-        <Divider isVertical />
+        <Divider orientation={{ default: 'vertical' }} />
         <FlexItem>{'Site: ' + siteName}</FlexItem>
       </React.Fragment>
     );

diff --git a/src/app/CacheManagers/CacheTableDisplay.tsx b/src/app/CacheManagers/CacheTableDisplay.tsx
@@ -10,7 +10,6 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  EmptyStateSecondaryActions,
   Label,
   LabelGroup,
   Menu,
@@ -25,16 +24,18 @@ import {
   Text,
   TextContent,
   TextVariants,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarFilter,
   ToolbarToggleGroup,
   ToolbarItem,
   ToolbarItemVariant,
-  ButtonProps
+  ButtonProps,
+  EmptyStateActions,
+  EmptyStateHeader,
+  EmptyStateFooter
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table';
+import { Table /* data-codemods */, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import { useCaches, useDataContainer } from '@app/services/dataContainerHooks';
 import { FilterIcon, SearchIcon } from '@patternfly/react-icons';
@@ -470,16 +471,17 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
   );
 
   const emptyPage = (
-    <EmptyState variant={EmptyStateVariant.large}>
-      <EmptyStateIcon icon={DatabaseIcon} />
-      <Title headingLevel="h4" size="lg">
-        {t('cache-managers.no-caches-status')}
-      </Title>
+    <EmptyState variant={EmptyStateVariant.lg}>
+      <EmptyStateHeader
+        titleText={t('cache-managers.no-caches-status')}
+        icon={<EmptyStateIcon icon={DatabaseIcon} />}
+        headingLevel="h4"
+      />
       <EmptyStateBody>{t('cache-managers.no-caches-body')}</EmptyStateBody>
-      {createCacheButtonHelper(true)}
-      <EmptyStateSecondaryActions style={{ marginTop: global_spacer_sm.value }}>
-        {cacheTemplateButton}
-      </EmptyStateSecondaryActions>
+      <EmptyStateFooter>
+        {createCacheButtonHelper(true)}
+        <EmptyStateActions style={{ marginTop: global_spacer_sm.value }}>{cacheTemplateButton}</EmptyStateActions>
+      </EmptyStateFooter>
     </EmptyState>
   );
 
@@ -510,31 +512,31 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
         <MenuList>
           <MenuGroup label={t('cache-managers.cache-filter-type-label')}>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheType.includes(CacheType.Local)}
               itemId="Local"
               data-cy="localType"
             >
               {t('cache-managers.mode-local')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheType.includes(CacheType.Replicated)}
               itemId="Replicated"
               data-cy="replicatedType"
             >
               {t('cache-managers.mode-repl')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheType.includes(CacheType.Distributed)}
               itemId="Distributed"
               data-cy="distributedType"
             >
               {t('cache-managers.mode-dist')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheType.includes(CacheType.Invalidated)}
               itemId="Invalidated"
               data-cy="invalidatedType"
@@ -544,47 +546,47 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
           </MenuGroup>
           <MenuGroup label={t('cache-managers.cache-filter-feature-label')}>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.BOUNDED)}
               itemId="Bounded"
               data-cy="boundedFeature"
             >
               {t('cache-managers.cache-filter-feature-bounded')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.INDEXED)}
               itemId="Indexed"
               data-cy="indexedFeature"
             >
               {t('cache-managers.cache-filter-feature-indexed')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.PERSISTENCE)}
               itemId="Persistence"
               data-cy="persistenceFeature"
             >
               {t('cache-managers.cache-filter-feature-persistent')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.TRANSACTIONAL)}
               itemId="Transactional"
               data-cy="transactionalFeature"
             >
               {t('cache-managers.cache-filter-feature-trans')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.SECURED)}
               itemId="Authorization"
               data-cy="authorizationFeature"
             >
               {t('cache-managers.cache-filter-feature-secure')}
             </MenuItem>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheFeature.includes(CacheFeature.BACKUPS)}
               itemId="Backups"
               data-cy="backupsFeature"
@@ -594,7 +596,7 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
           </MenuGroup>
           <MenuGroup label={t('cache-managers.cache-filter-status-label')}>
             <MenuItem
-              hasCheck
+              hasCheckbox
               isSelected={selectedCacheStatus.includes(CacheStatus.IGNORED)}
               itemId="Hidden"
               data-cy="hiddenStatus"
@@ -706,12 +708,7 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
         <Card>
           <CardBody>
             {toolbar}
-            <TableComposable
-              data-cy="cachesTable"
-              className={'cache-table'}
-              aria-label={'cache-table-label'}
-              variant="compact"
-            >
+            <Table data-cy="cachesTable" className={'cache-table'} aria-label={'cache-table-label'} variant="compact">
               <Thead>
                 <Tr>
                   <Th colSpan={1}>{columnNames.name}</Th>
@@ -726,11 +723,12 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
                   <Tr>
                     <Td colSpan={6}>
                       <Bullseye>
-                        <EmptyState variant={EmptyStateVariant.small}>
-                          <EmptyStateIcon icon={SearchIcon} />
-                          <Title headingLevel="h2" size="lg">
-                            {t('cache-managers.no-filter-cache')}
-                          </Title>
+                        <EmptyState variant={EmptyStateVariant.sm}>
+                          <EmptyStateHeader
+                            titleText={<>{t('cache-managers.no-filter-cache')}</>}
+                            icon={<EmptyStateIcon icon={SearchIcon} />}
+                            headingLevel="h2"
+                          />
                           <EmptyStateBody>{t('cache-managers.no-caches-body')}</EmptyStateBody>
                         </EmptyState>
                       </Bullseye>
@@ -755,7 +753,7 @@ const CacheTableDisplay = (props: { cmName: string; setCachesCount: (count: numb
                   })
                 )}
               </Tbody>
-            </TableComposable>
+            </Table>
             <Toolbar id="role-table-toolbar" className={'role-table-display'}>
               <ToolbarItem variant="pagination">{toolbarPagination('up')}</ToolbarItem>
             </Toolbar>