Upgrading patternfly and angular-patternfly

[a2batic]

The current version is: "angular-patternfly": "~3.23.3", "patternfly": "~3.25.0"

The version to be upgraded to: "angular-patternfly": "~4.11.0", "patternfly": "~3.29.13"

[cloudbehl]

linking : #638

[a2batic]

Changes made in patternfly from 3.25.0 to 3.29.13

3.25.1

• Expand the message to full width when notification drawer is expanded.

3.26.0

• Bell icon in navigation
• Implement Notification Drawer Updates
• vertical nav: fix second level nav to close on item click
• Replaces the blue border on listview expansion to grey and adds a shadow
• bumps up zindex to put toast notifications on top of a modal

3.26.1

• Return a handle to allow js to toggle the collapsed state of the vertical navigation bar
• Add css generated icon for drawer-pf-toggle-expand

3.27.1

• updates notification drawer to support mobile
• Update the info icon to patternfly icon

3.27.3

• pfVerticalNavigation: fix close-on-click hover bug

3.27.4

• toast notifications: Updates toast notification to offer a variable for position

3.27.6

• drawer-pf-notifications: increase horizontal padding around drawer-pf-toggle-expand and drawer

3.27.7

• list-pf: stop horizontal shift when list item is expanded

3.28.1

• dropdown-toggle: Adds focus ring back to dropdown toggle

3.29.1

• navbar: href on

3.29.2

• notification drawer: fix inconsistency with close and expand

3.29.3

• list-view: changes list-view hover color

3.29.4

• toast notifications: updates bottom margin

3.29.5

• drawer: Make bottom border color of drawer-pf-action consistent

3.29.6

• notification drawer: Improve alignment of pficon-close

3.29.11

• login: alert style update

3.29.13

• notification drawer: variables for notification drawer position

Changes affecting Tendrl:-

3.26.0

• Replaces the blue border on listview expansion to grey and adds a shadow
• bumps up zindex to put toast notifications on top of a modal

3.26.1

• Return a handle to allow js to toggle the collapsed state of the vertical navigation bar

3.27.1

• Update the info icon to patternfly icon

3.27.4

• toast notifications: Updates toast notification to offer a variable for position

3.28.1

• dropdown-toggle: Adds focus ring back to dropdown toggle

3.29.1

• navbar: href on

3.29.3

• list-view: changes list-view hover color

3.29.4

• toast notifications: updates bottom margin

3.29.11

• login: alert style update

[a2batic]

Components/services that are breaking or need to be upgraded due to angular-patternfly 4 upgrade.

• Notification/alert drawer
• Toast Notification
• Sort
• Filter
• Datepicker

[a2batic]

Components upgraded in Milestone 1

• Toast Notification ( PR #782 )
• Sort ( PR #781 )
• Datepicker (PR #786 )

[a2batic]

@TimothyAsirJeyasing @gnehapk Following is the list of the npm packages being added in UI as per milestone 1-

• "browser-sync": "^2.18.13" Latest Downstream Package and version: https://www.npmjs.com/package/browser-sync ( 2.23.6 )
• "http-proxy": "^1.16.2" Latest Downstream Package and version: https://www.npmjs.com/package/http-proxy ( 1.16.2 )
• "minimist": "^1.2.0" Latest Downstream Package and version: https://www.npmjs.com/package/minimist ( 1.2.0 )
• "datatables": "^1.10.13" Latest Downstream Package and version: https://www.npmjs.com/package/datatables ( 1.10.13 )

Following is the list of npm packages which are upgraded to the newer version -

• "angular-patternfly": "~3.23.3" -> "^4.0.0" Latest Downstream Package and version: https://www.npmjs.com/package/angular-patternfly ( 4.14.9 )
• "patternfly": "~3.25.0" -> "~3.29.13" Latest Downstream Package and version: https://www.npmjs.com/package/patternfly ( 3.38.0 )

[cloudbehl]

@julienlim @mcarrano upgrading to the patternfly Filter component is creating some design changes.

The count of items in the list is coming with the Filter component itself. So the horizontal bar on top the counter is not there in the component itself which is making some design differences.

Please see the horizontal bar above the counter in both the images below.

• Before upgrading to Filter component
• After upgrading to Filter component

[mcarrano]

I looked at the demo page for this component and there is a horizontal rule between the filter and the results. See https://www.patternfly.org/angular-patternfly/#/api/patternfly.filters.component:pfFilter

@cloudbehl if you are still having issues we can try to put you in touch with one of the PF-Angular developers.

[cloudbehl]

@mcarrano Thanks.

But still, the Horizontal line is just covering the 25% because on another half there is a sorting button.

[dtaylor113]

Hi, it seems like you are perhaps overriding/replacing pf-filter-results and setting the border to none?

https://github.com/Tendrl/ui/commit/f2b8c2aeb76b612f94e4631a56a4363b3734bc36#diff-164c88137bef42eed133aa0f83a01b2cR37

https://github.com/Tendrl/ui/commit/f2b8c2aeb76b612f94e4631a56a4363b3734bc36#diff-3158ebc1ae6f694cc4bf1142ffd0364fL2

If this is not the case, please include a link to the filter HTML and JS in question.

A link to a running UI would be ideal! :-)

-thanks

[cloudbehl]

@dtaylor113 Thanks. yes, I found there is a class which is overriding the other CSS Class. Will fix it.

[gnehapk]

@a2batic Are all the components upgraded to angular-patternfly 4?

[a2batic]

@gnehapk, we have not upgraded Notification/alert drawer component, all other components are upgraded,