build(deps): upgrade to Patternfly 5 (#1153)

cryostatio · Jul 25, 2024 · d7a928f · d7a928f
1 parent 953645f
commit d7a928f
Show file tree

Hide file tree

Showing 136 changed files with 6,812 additions and 7,545 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,4 @@ coverage
 storybook-static
 .build_cache
 .eslintcache
+.cache*
diff --git a/package.json b/package.json
@@ -89,14 +89,14 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "^2.3.3",
-    "@patternfly/react-catalog-view-extension": "4.93.15",
-    "@patternfly/react-charts": "^6.94.18",
-    "@patternfly/react-core": "4.267.6",
-    "@patternfly/react-icons": "^4.93.6",
-    "@patternfly/react-styles": "^4.92.6",
-    "@patternfly/react-table": "^4.112.39",
-    "@patternfly/react-topology": "4.91.27",
+    "@patternfly/quickstarts": "^5.0.0",
+    "@patternfly/react-catalog-view-extension": "^5.0.0",
+    "@patternfly/react-charts": "^7.1.1",
+    "@patternfly/react-core": "^5.1.1",
+    "@patternfly/react-icons": "^5.1.1",
+    "@patternfly/react-styles": "^5.1.1",
+    "@patternfly/react-table": "^5.1.1",
+    "@patternfly/react-topology": "^5.1.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@types/lodash": "^4.14.202",
     "@types/react": "^17.0.69",

diff --git a/src/app/Agent/AgentLiveProbes.tsx b/src/app/Agent/AgentLiveProbes.tsx
@@ -34,15 +34,15 @@ import {
   StackItem,
   EmptyState,
   EmptyStateIcon,
-  Title,
+  EmptyStateHeader,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
   ISortBy,
   SortByDirection,
   ThProps,
-  TableComposable,
+  Table,
   Tbody,
   Th,
   Thead,
@@ -176,6 +176,8 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
     }
   }, [context.settings, setWarningModalOpen, handleDeleteAllProbes]);
 
+  const handleFilterTextChange = React.useCallback((_, value: string) => setFilterText(value), [setFilterText]);
+
   React.useEffect(() => {
     addSubscription(
       context.target.target().subscribe(() => {
@@ -329,7 +331,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
                       type="search"
                       placeholder="Filter..."
                       aria-label="Active probe filter"
-                      onChange={setFilterText}
+                      onChange={handleFilterTextChange}
                     />
                   </ToolbarItem>
                 </ToolbarGroup>
@@ -355,7 +357,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
               />
             </Toolbar>
             {probeRows.length ? (
-              <TableComposable aria-label="Active probe table" variant={TableVariant.compact}>
+              <Table aria-label="Active probe table" variant={TableVariant.compact}>
                 <Thead>
                   <Tr>
                     {tableColumns.map(({ title, sortable }, index) => (
@@ -366,13 +368,14 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
                   </Tr>
                 </Thead>
                 <Tbody>{probeRows}</Tbody>
-              </TableComposable>
+              </Table>
             ) : (
               <EmptyState>
-                <EmptyStateIcon icon={SearchIcon} />
-                <Title headingLevel="h4" size="lg">
-                  No active probes
-                </Title>
+                <EmptyStateHeader
+                  titleText="No active probes"
+                  icon={<EmptyStateIcon icon={SearchIcon} />}
+                  headingLevel="h4"
+                />
               </EmptyState>
             )}
           </StackItem>

diff --git a/src/app/Agent/AgentProbeTemplates.tsx b/src/app/Agent/AgentProbeTemplates.tsx
@@ -26,30 +26,31 @@ import { TableColumn, portalRoot, sortResources } from '@app/utils/utils';
 import {
   ActionGroup,
   Button,
-  Dropdown,
-  DropdownItem,
-  DropdownPosition,
   EmptyState,
   EmptyStateIcon,
   Form,
   FormGroup,
-  KebabToggle,
   Modal,
   ModalVariant,
   Stack,
   StackItem,
   TextInput,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
+  EmptyStateHeader,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggleElement,
+  MenuToggle,
 } from '@patternfly/react-core';
-import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
+import { SearchIcon, EllipsisVIcon, UploadIcon } from '@patternfly/react-icons';
 import {
   ISortBy,
   SortByDirection,
-  TableComposable,
+  Table,
   TableVariant,
   Tbody,
   Td,
@@ -165,6 +166,8 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
     setUploadModalOpen(false);
   }, [setUploadModalOpen]);
 
+  const handleFilterTextChange = React.useCallback((_, value: string) => setFilterText(value), [setFilterText]);
+
   React.useEffect(() => {
     refreshTemplates();
   }, [refreshTemplates]);
@@ -302,7 +305,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
                       type="search"
                       placeholder="Filter..."
                       aria-label="Probe Template filter"
-                      onChange={setFilterText}
+                      onChange={handleFilterTextChange}
                       value={filterText}
                     />
                   </ToolbarItem>
@@ -323,7 +326,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
               </ToolbarContent>
             </Toolbar>
             {templateRows.length ? (
-              <TableComposable aria-label="Probe Templates table" variant={TableVariant.compact}>
+              <Table aria-label="Probe Templates table" variant={TableVariant.compact}>
                 <Thead>
                   <Tr>
                     {tableColumns.map(({ title, sortable }, index) => (
@@ -334,13 +337,14 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
                   </Tr>
                 </Thead>
                 <Tbody>{...templateRows}</Tbody>
-              </TableComposable>
+              </Table>
             ) : (
               <EmptyState>
-                <EmptyStateIcon icon={SearchIcon} />
-                <Title headingLevel="h4" size="lg">
-                  No Probe Templates
-                </Title>
+                <EmptyStateHeader
+                  titleText="No Probe Templates"
+                  icon={<EmptyStateIcon icon={SearchIcon} />}
+                  headingLevel="h4"
+                />
               </EmptyState>
             )}
             <AgentProbeTemplateUploadModal isOpen={uploadModalOpen} onClose={handleUploadModalClose} />
@@ -458,6 +462,9 @@ export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadMod
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
+            dropZoneAccepts={{
+              'application/xml': ['.xml'],
+            }}
             displayAccepts={['XML']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}
@@ -514,15 +521,11 @@ export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInse
     ];
   }, [onInsert, onDelete, template]);
 
-  return (
-    <Dropdown
-      isPlain
-      isOpen={isOpen}
-      toggle={<KebabToggle id="probe-template-toggle-kebab" onToggle={setIsOpen} />}
-      menuAppendTo={document.body}
-      position={DropdownPosition.right}
-      isFlipEnabled
-      dropdownItems={actionItems.map((action) => (
+  const handleToggle = React.useCallback((_, opened: boolean) => setIsOpen(opened), [setIsOpen]);
+
+  const dropdownItems = React.useMemo(
+    () =>
+      actionItems.map((action) => (
         <DropdownItem
           key={action.key}
           onClick={() => {
@@ -533,7 +536,26 @@ export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInse
         >
           {action.title}
         </DropdownItem>
-      ))}
-    />
+      )),
+    [actionItems, setIsOpen],
+  );
+
+  return (
+    <Dropdown
+      isPlain
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle ref={toggleRef} onClick={(event) => handleToggle(event, !isOpen)}>
+          <EllipsisVIcon />
+        </MenuToggle>
+      )}
+      isOpen={isOpen}
+      popperProps={{
+        appendTo: document.body,
+        position: 'right',
+        enableFlip: true,
+      }}
+    >
+      <DropdownList>{dropdownItems}</DropdownList>
+    </Dropdown>
   );
 };