Install PF5 libraries

[carma12]

The project has been migrated to use the PatternFly 5 library. The code has been adapted by following the suggested steps mentioned in the guidelines.

Steps followed

1. Upgrade the libraries to their latest version:

   $ npm install @patternfly/patternfly@latest @patternfly/react-core@latest @patternfly/react-table@latest

Affected libraries and its current version (as per the promoted package versions):

• "@patternfly/patternfly": "^5.1.0"
• "@patternfly/react-core": "^5.1.2"
• "@patternfly/react-table": "^5.1.2"

2. Run the codemods. This will auto-fix some simple errors and throw an error/warning on the ones that can't be handled.

   $ npx @patternfly/pf-codemods@latest <path-to-source-code> [--fix]

3. Fix problems that arise when building the project via npm run start.
4. Adapt the code to the new components.

How do I apply these changes?

To adapt these changes to your local project you just need to install and build the project via NodeJS.

   $ npm install
   $ npm run start

[carma12]

It seems that the integration tests are not passing. Moving this into WIP to investigate what is happening

[carma12]

The Cypress tests have been adapted to the new version as well. Removing the 'WIP' tag and the code is ready to review.

[carma12]

@pvoborni - Code updated and fixed.

[pvoborni]

I speed read through the changes. I didn't see anything concerning. But that doesn't mean that everything is correct :).

Was also testing a bit manually seems to behave the same as before but I didn't test certificate workflows on user page.

I noticed the following weird behavior, but it might be present even in current code:

• In IpaCalendar component, first setting of time tends to reset date.
• In user add dialog, I cannot unset GID when I selected some, also the GID field should allow to enter arbitrary integer.

Overall, I'd be OK with merging this. Maybe even before merging all the "actions" PRs so that the actions PRs can be also modified to PF5 if needed (seems easier than modifying this after they are merged).

There will probably be some regressions but it might be easier to fix them in smaller separate PRs when they are found.

Will wait for yours and @mreynolds389 thoughts before adding the approval.

[pvoborni]

Not sure, but shouldn't these two lines be swapped? It's a bit weird to modify something which was set a line before. It probably works because the reference to the object is the same, but still...

[carma12]

You are right - Actually, line 97 can be removed as the addition of the empty element is being managed directly from the other useEffect (lines 85-90). I will create a new PR to amend that.

[mreynolds389]

@carma12 are you sure this is "sizes" and not "size", I can not not find "sizes" anywhere in the PF5 icon code

[carma12]

@ mreynolds389 - I think the IDE suggested the sizes property, but I can't find this in the PF documentation either. It seems that the icons are based on the createIcon component (available under node_modules/@patternfly/react-icons/src/createIcon.tsx).

In any case, I will check this with the PF team via slack to gather further information.

[carma12]

Update: I got a response from the PF team and it seems that the sizes prop is not necessary. The size of any icon should be set from the Icon wrapper component. E.g.:

const MyIconComponent = () => {
  return (
    <Icon status="warning" size="xl" className="pf-v5-u-mt-4xl">
      <ExclamationTriangleIcon />
    </Icon>
  );
}

I have created a new issue to track and remove the sizes bit: #238

[mreynolds389]

Overall this looks fine to me (besides the current comments). If something else is missing/wrong I'm sure we will spot it soon enough. So I think this is good to go, as current and future PRs will need this merged.

[carma12]

@pvoborni and @mreynolds389 - Thanks for reviewing the code :)

Some clarifications:

I noticed the following weird behavior, but it might be present even in current code:

* In IpaCalendar component, first setting of time tends to reset date.

I checked this and this behavior only happens when the first value set is the time (when the date and time values are set the first time and those are empty). This behavior is expected and was present in the code (not affected by the PF5 migration).

* In user add dialog, I cannot unset GID when I selected some, also the GID field should allow to enter arbitrary integer.

This is the behavior that can be found in the current WebUI as well (not directly related to the PF5 migration). The numbers correspond with the GID identification numbers that are assigned when those are selected. I agree with you with the fact that it would be nice to have the No selection option. I have created this issue to track it.