Refs #37752 - Patternfly 5 review fix

Katello · Jan 10, 2025 · 369b2c1 · 369b2c1
1 parent 439a75c
commit 369b2c1
Show file tree

Hide file tree

Showing 28 changed files with 125 additions and 96 deletions.
diff --git a/webpack/ForemanColumnExtensions/index.js b/webpack/ForemanColumnExtensions/index.js
@@ -18,6 +18,7 @@ import {
   DescriptionListTerm as Dt,
   Text,
   TextVariants,
+  Icon,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import RelativeDateTime from 'foremanReact/components/common/dates/RelativeDateTime';
@@ -71,7 +72,7 @@ const hostsIndexColumnExtensions = [
             >
               <FontAwesomeImageModeIcon title={__('Image mode')} />
             </Popover>
-            : <span style={{ color: 'var(--pf-global--palette--black-600)' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
+            : <span style={{ color: 'var(--pf-v5-global--palette--black-600)' }}><RepoIcon type="yum" customTooltip={__('Package mode')} /></span>
           }
         </span>
       );
@@ -104,19 +105,26 @@ const hostsIndexColumnExtensions = [
         <Flex alignContent={{ default: 'alignContentSpaceBetween' }}>
           {security !== undefined &&
             <FlexItem>
-              <SecurityIcon color="#0066cc" />
+              <Icon color="#0066cc" >
+                <SecurityIcon />
+              </Icon>
               <Link to={hostErrataUrl('security')}>{security}</Link>
             </FlexItem>
           }
           {bugfix !== undefined &&
             <FlexItem>
-              <BugIcon color="#8bc1f7" />
+              <Icon color="#8bc1f7" >
+                <BugIcon />
+              </Icon>
               <Link to={hostErrataUrl('bugfix')}>{bugfix}</Link>
             </FlexItem>
           }
           {enhancement !== undefined &&
             <FlexItem>
-              <EnhancementIcon color="#002f5d" />
+
+              <Icon color="#002f5d" >
+                <EnhancementIcon color="#002f5d" />
+              </Icon>
               <Link to={hostErrataUrl('enhancement')}>{enhancement}</Link>
             </FlexItem>
           }

diff --git a/webpack/components/EditableTextInput/editableTextInput.scss b/webpack/components/EditableTextInput/editableTextInput.scss
@@ -14,5 +14,5 @@
 }
 
 .textInput-placeholder {
-  color: var(--pf-global--disabled-color--100);
+  color: var(--pf-v5-global--disabled-color--100);
 }
diff --git a/webpack/components/SelectableDropdown/SelectableDropdown.js b/webpack/components/SelectableDropdown/SelectableDropdown.js
@@ -4,6 +4,7 @@ import {
   Spinner,
   Level,
   LevelItem,
+  Icon,
 } from '@patternfly/react-core';
 import {
   Select,
@@ -18,7 +19,15 @@ const SelectableDropdown = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const icon = () => {
-    if (error) return <span aria-label={`${title} error`}><ErrorCircleOIcon color="red" /></span>;
+    if (error) {
+      return (
+        <span aria-label={`${title} error`}>
+          <Icon color="red">
+            <ErrorCircleOIcon />
+          </Icon>
+        </span>
+      );
+    }
     if (loading) return <span aria-label={`${title} spinner`}><Spinner size="sm" /></span>;
     return null;
   };

diff --git a/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss b/webpack/components/extensions/HostDetails/Cards/HostCollectionsCard/HostCollectionsCard.scss
@@ -1,5 +1,5 @@
 .host-collection-card-body {
-  .pf-l-bullseye {
+  .pf-v5-l-bullseye {
     position: relative;
     top: -20px;
   }

diff --git a/...s/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsModal.test.js b/...s/extensions/HostDetails/Cards/HostCollectionsCard/__tests__/hostCollectionsModal.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent,act } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import mockAvailableHostCollections from './availableHostCollections.fixtures.json';
 import mockRemovableHostCollections from './removableHostCollections.fixtures.json';
 import { REMOVABLE_HOST_COLLECTIONS_KEY } from '../HostCollectionsConstants';
@@ -66,7 +66,7 @@ describe('HostCollectionsAddModal', () => {
       expect(getAllByText(firstHostCollection.name)[0]).toBeInTheDocument());
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
-  done(); // Pass jest callback to confirm test is done
+    done(); // Pass jest callback to confirm test is done
   });
 
   test('Calls alterHostCollections with combined list of existing and new host collections', async (done) => {
@@ -113,7 +113,7 @@ describe('HostCollectionsAddModal', () => {
     assertNockRequest(scope);
     assertNockRequest(alterScope);
     assertNockRequest(hostDetailsScope);
-  done();
+    done();
   });
   test('Host collections whose host limit is exceeded are disabled', async (done) => {
     const autocompleteScope = mockAutocomplete(nockInstance, autocompleteUrl);
@@ -143,7 +143,7 @@ describe('HostCollectionsAddModal', () => {
 
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
-  done(); // Pass jest callback to confirm test is done
+    done(); // Pass jest callback to confirm test is done
   });
 });
 
@@ -176,7 +176,7 @@ describe('HostCollectionsRemoveModal', () => {
     // Assert request was made and completed, see helper function
     assertNockRequest(autocompleteScope);
     assertNockRequest(scope);
-  done(); // Pass jest callback to confirm test is done
+    done(); // Pass jest callback to confirm test is done
   });
 
   test('Calls alterHostCollections with host collections being removed filtered out from the list', async (done) => {
@@ -225,7 +225,7 @@ describe('HostCollectionsRemoveModal', () => {
     assertNockRequest(scope);
     assertNockRequest(alterScope);
     assertNockRequest(hostDetailsScope);
-  done();
+    done();
   });
 });
 
diff --git a/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js b/webpack/components/extensions/HostDetails/Cards/SystemPurposeCard/SystemPurposeEditModal.js
@@ -12,11 +12,6 @@ import {
   FormSelectOption,
 } from '@patternfly/react-core';
 
-import {
-  Select,
-  SelectOption,
-  SelectVariant,
-} from '@patternfly/react-core/deprecated';
 import { FormattedMessage } from 'react-intl';
 import { translate as __ } from 'foremanReact/common/I18n';
 import {

diff --git a/...s/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeEditModal.test.js b/...s/extensions/HostDetails/Cards/SystemPurposeCard/__tests__/SystemPurposeEditModal.test.js
@@ -88,7 +88,7 @@ describe('SystemPurposeEditModal', () => {
 
     assertNockRequest(orgScope);
     assertNockRequest(availableReleaseVersionsScope);
-  done();
+    done();
   });
 
   test('Shows blank options as (unset)', () => {
@@ -171,7 +171,7 @@ describe('SystemPurposeEditModal', () => {
       assertNockRequest(scope);
     });
     assertNockRequest(hostDetailsScope);
-  done();
+    done();
   });
   test('Calls API and changes syspurpose values for activation key', async (done) => {
     const orgScope = nockInstance
@@ -226,7 +226,7 @@ describe('SystemPurposeEditModal', () => {
       assertNockRequest(scope);
     });
     assertNockRequest(akDetailsScope);
-  done();
+    done();
   });
   test('Retrieves available release versions for host', async (done) => {
     const orgScope = nockInstance

diff --git a/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js b/webpack/components/extensions/HostDetails/Tabs/ErrataTab/ErrataTab.js
@@ -503,7 +503,7 @@ export const ErrataTab = () => {
                 pfSortParams={pfSortParams}
                 columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
               />
-              <Th key="action-menu" aria-label="action menu table header"/>
+              <Th key="action-menu" aria-label="action menu table header" />
             </Tr>
           </Thead>
           <>

diff --git a/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.js b/webpack/components/extensions/HostDetails/Tabs/PackagesTab/PackagesTab.js
@@ -18,7 +18,7 @@ import {
   SelectOption,
   SelectVariant,
 } from '@patternfly/react-core/deprecated';
-import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText, ActionsColumn} from '@patternfly/react-table';
+import { TableVariant, Thead, Tbody, Tr, Th, Td, TableText, ActionsColumn } from '@patternfly/react-table';
 import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { HOST_DETAILS_KEY } from 'foremanReact/components/HostDetails/consts';
@@ -552,13 +552,19 @@ export const PackagesTab = () => {
                     isDisabled: actionInProgress,
                   },
                   {
-                    title: <a href={katelloPackageUpdateUrl({
-                      hostname,
-                      packageName: selectedPackageUpgradeVersion({
-                        packageName,
-                        upgradableVersions,
-                      }),
-                    })}>{__('Upgrade via customized remote execution')}</a>,
+                    title: (
+                      <a
+                        href={katelloPackageUpdateUrl({
+                          hostname,
+                          packageName: selectedPackageUpgradeVersion({
+                            packageName,
+                            upgradableVersions,
+                          }),
+                        })}
+                      >
+                        {__('Upgrade via customized remote execution')}
+                      </a>
+                    ),
                   },
                 );
               }
@@ -603,7 +609,8 @@ export const PackagesTab = () => {
                         items: rowActions,
                       }}
                     ><ActionsColumn
-                      actions={rowActions} />
+                      actions={rowActions}
+                    />
                     </Td>
                   ) : null}
                 </Tr>

diff --git a/webpack/components/extensions/HostDetails/Tabs/TracesTab/TracesTab.js b/webpack/components/extensions/HostDetails/Tabs/TracesTab/TracesTab.js
@@ -249,7 +249,7 @@ const TracesTab = () => {
               pfSortParams={pfSortParams}
               columnsToSortParams={COLUMNS_TO_SORT_PARAMS}
             />
-            <Th key="action_menu"  aria-label="action menu table header" />
+            <Th key="action_menu" aria-label="action menu table header" />
           </Tr>
         </Thead>
         <Tbody>

diff --git a/webpack/components/extensions/HostDetails/Tabs/__tests__/errataTab.test.js b/webpack/components/extensions/HostDetails/Tabs/__tests__/errataTab.test.js
@@ -1013,7 +1013,7 @@ test('Can apply a single erratum to the host via remote execution', async (done)
   await act(async () => {
     erratumActionMenu.click();
   });
-  
+
   let viaRexAction;
   await patientlyWaitFor(() => {
     viaRexAction = getByText('Apply via remote execution');

diff --git a/webpack/components/extensions/HostDetails/Tabs/__tests__/packagesTab.test.js b/webpack/components/extensions/HostDetails/Tabs/__tests__/packagesTab.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderWithRedux, patientlyWaitFor, fireEvent, act, screen } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import * as hooks from 'foremanReact/components/PF4/TableIndexPage/Table/TableHooks';
 import { nockInstance, assertNockRequest, mockForemanAutocomplete } from '../../../../../test-utils/nockWrapper';
 import { foremanApi } from '../../../../../services/api';
@@ -201,7 +201,7 @@ test('Can upgrade a package via remote execution', async (done) => {
   await patientlyWaitFor(() => {
     expect(getByText('coreutils')).toBeInTheDocument();
   });
-  
+
   const kebabDropdown = getByLabelText('Kebab toggle');
   await act(async () => {
     kebabDropdown.click();