PF4v4 Upgrade

[Hyperkid123]

PF4v4 Upgrade

[bastilian]

I'm updating the inventory-compliance to PFv4

[karelhala]

@carlosthe19916 no worries, it's a good place to ask! If you want to upgrade to new version of PF4 you can either alias it npm alias or use beta version of FEC @redhat-cloud-services/frontend-components/v/2.1.0-beta.6

[josejulio]

I created a pull request that solves the issue: #568

@karelhala I see that you are working on inventory. This file also has the same issue (using data-toolbar instead of toolbar in the css)

frontend-components/packages/inventory/src/InventoryList.scss

Lines 12 to 13 in 41d66f3

	.pf-c-data-toolbar__content {
	.pf-c-data-toolbar__item:last-child { @include rem('min-width', 200px); }

[rvsia]

@carlosthe19916 You have to use 2.1.0-beta.6 of @redhat-cloud-services/frontend-components. The beta version is updated for PF4 4+.

[Hyperkid123]

cc @RedHatInsights/ui-reviewers

[rvsia]

I will convert Sources after data-driven-forms/react-forms#549 is done

[rvsia]

Translation does not use PF

[josejulio]

Tried the PF4-update branch and I have one problem with the PrimaryToolbar, the first action button does not appear:

Before:

After:

Looking at the html code I can see that the button is indeed there, but with display: none

Note that is not in the kebab

but on an iphone 6/7/8 both are there:

So i think it might be a wrong if/else in the component (or css rule).

[carlosthe19916]

My apologies if this is not the correct place where to add an issue I'm having after upgrading to Patternfly 4 In Migration Analytics application:

If I use these versions:

• @patternfly/react-core: 4.22.2
• @redhat-cloud-services/frontend-components: 2.0.7

Then I'm not able to use the component TableToolbar anymore. The component TableToolbar is imported using:

import {
    TableToolbar
} from '@redhat-cloud-services/frontend-components/components/TableToolbar';

The error appears not when I import the component but when I try to use it. The error I see is:

ERROR in ./node_modules/@redhat-cloud-services/frontend-components/components/TableToolbar.js
Module not found: Error: Can't resolve '@patternfly/react-core/dist/js/layouts/Toolbar/Toolbar.js' in '/home/cferiavi/git/project-xavier/xavier-ui/node_modules/@redhat-cloud-services/frontend-components/components'
 @ ./node_modules/@redhat-cloud-services/frontend-components/components/TableToolbar.js 1:117-185

It seems to me that @redhat-cloud-services/frontend-components/components/TableToolbar' is trying to resolve @patternfly/react-core/dist/js/layouts/Toolbar/Toolbar.js from the wrong location. In @patternfly/react-core V3 the component Toolbar.js used to be inside the folder layouts/Toolbar but in the new version @patternfly/react-core V4 the location layouts/Toolbar does not exists anymore because it was moved to the folder components/Toolbar.

Is this something that should be fixed in @redhat-cloud-services/frontend-components/components/TableToolbar? or maybe there is a workaround I can use in my application?

[carlosthe19916]

@rvsia @karelhala just to let you know that your proposed solutions worked fine. Thank you very much!