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

This reverts commit ce0ac3f.
cryostatio · Jul 15, 2024 · 029af68 · 029af68
1 parent ce0ac3f
commit 029af68
Show file tree

Hide file tree

Showing 136 changed files with 7,545 additions and 6,812 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,3 @@ 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": "^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",
+    "@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",
     "@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,
-  EmptyStateHeader,
+  Title,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import {
   TableVariant,
   ISortBy,
   SortByDirection,
   ThProps,
-  Table,
+  TableComposable,
   Tbody,
   Th,
   Thead,
@@ -176,8 +176,6 @@ 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(() => {
@@ -331,7 +329,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
                       type="search"
                       placeholder="Filter..."
                       aria-label="Active probe filter"
-                      onChange={handleFilterTextChange}
+                      onChange={setFilterText}
                     />
                   </ToolbarItem>
                 </ToolbarGroup>
@@ -357,7 +355,7 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
               />
             </Toolbar>
             {probeRows.length ? (
-              <Table aria-label="Active probe table" variant={TableVariant.compact}>
+              <TableComposable aria-label="Active probe table" variant={TableVariant.compact}>
                 <Thead>
                   <Tr>
                     {tableColumns.map(({ title, sortable }, index) => (
@@ -368,14 +366,13 @@ export const AgentLiveProbes: React.FC<AgentLiveProbesProps> = (_) => {
                   </Tr>
                 </Thead>
                 <Tbody>{probeRows}</Tbody>
-              </Table>
+              </TableComposable>
             ) : (
               <EmptyState>
-                <EmptyStateHeader
-                  titleText="No active probes"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                  headingLevel="h4"
-                />
+                <EmptyStateIcon icon={SearchIcon} />
+                <Title headingLevel="h4" size="lg">
+                  No active probes
+                </Title>
               </EmptyState>
             )}
           </StackItem>

diff --git a/src/app/Agent/AgentProbeTemplates.tsx b/src/app/Agent/AgentProbeTemplates.tsx
@@ -26,31 +26,30 @@ 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, EllipsisVIcon, UploadIcon } from '@patternfly/react-icons';
+import { SearchIcon, UploadIcon } from '@patternfly/react-icons';
 import {
   ISortBy,
   SortByDirection,
-  Table,
+  TableComposable,
   TableVariant,
   Tbody,
   Td,
@@ -166,8 +165,6 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
     setUploadModalOpen(false);
   }, [setUploadModalOpen]);
 
-  const handleFilterTextChange = React.useCallback((_, value: string) => setFilterText(value), [setFilterText]);
-
   React.useEffect(() => {
     refreshTemplates();
   }, [refreshTemplates]);
@@ -305,7 +302,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
                       type="search"
                       placeholder="Filter..."
                       aria-label="Probe Template filter"
-                      onChange={handleFilterTextChange}
+                      onChange={setFilterText}
                       value={filterText}
                     />
                   </ToolbarItem>
@@ -326,7 +323,7 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
               </ToolbarContent>
             </Toolbar>
             {templateRows.length ? (
-              <Table aria-label="Probe Templates table" variant={TableVariant.compact}>
+              <TableComposable aria-label="Probe Templates table" variant={TableVariant.compact}>
                 <Thead>
                   <Tr>
                     {tableColumns.map(({ title, sortable }, index) => (
@@ -337,14 +334,13 @@ export const AgentProbeTemplates: React.FC<AgentProbeTemplatesProps> = ({ agentD
                   </Tr>
                 </Thead>
                 <Tbody>{...templateRows}</Tbody>
-              </Table>
+              </TableComposable>
             ) : (
               <EmptyState>
-                <EmptyStateHeader
-                  titleText="No Probe Templates"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                  headingLevel="h4"
-                />
+                <EmptyStateIcon icon={SearchIcon} />
+                <Title headingLevel="h4" size="lg">
+                  No Probe Templates
+                </Title>
               </EmptyState>
             )}
             <AgentProbeTemplateUploadModal isOpen={uploadModalOpen} onClose={handleUploadModalClose} />
@@ -462,9 +458,6 @@ export const AgentProbeTemplateUploadModal: React.FC<AgentProbeTemplateUploadMod
             submitRef={submitRef}
             abortRef={abortRef}
             uploading={uploading}
-            dropZoneAccepts={{
-              'application/xml': ['.xml'],
-            }}
             displayAccepts={['XML']}
             onFileSubmit={onFileSubmit}
             onFilesChange={onFilesChange}
@@ -521,11 +514,15 @@ export const AgentTemplateAction: React.FC<AgentTemplateActionProps> = ({ onInse
     ];
   }, [onInsert, onDelete, template]);
 
-  const handleToggle = React.useCallback((_, opened: boolean) => setIsOpen(opened), [setIsOpen]);
-
-  const dropdownItems = React.useMemo(
-    () =>
-      actionItems.map((action) => (
+  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) => (
         <DropdownItem
           key={action.key}
           onClick={() => {
@@ -536,26 +533,7 @@ 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>
+      ))}
+    />
   );
 };