Bug 1828964

Summary:	Align CNV modals with OCP modals
Product:	OpenShift Container Platform	Reporter:	Matt <mcarleto>
Component:	Console Kubevirt Plugin	Assignee:	Yaacov Zamir <yzamir>
Status:	CLOSED ERRATA	QA Contact:	Radim Hrazdil <rhrazdil>
Severity:	medium	Docs Contact:
Priority:	medium
Version:	4.4	CC:	aos-bugs, gouyang, ncredi, rhrazdil, yzamir
Target Milestone:	---
Target Release:	4.5.0
Hardware:	All
OS:	All
Whiteboard:
Fixed In Version:		Doc Type:	No Doc Update
Doc Text:		Story Points:	---
Clone Of:		Environment:
Last Closed:	2020-07-13 17:32:22 UTC	Type:	Bug
Regression:	---	Mount Type:	---
Documentation:	---	CRM:
Verified Versions:		Category:	---
oVirt Team:	---	RHEL 7.3 requirements from Atomic Host:
Cloudforms Team:	---	Target Upstream Version:
Embargoed:

Description Matt 2020-04-28 16:40:42 UTC

Description of problem:
The CNV details view modals do not align with what OCP has. We should adjust them to align them visually. CNV has set out to align better with Patternfly 4 but we should in the short term ensure we have a similar experience to the rest of the console.

Version-Release number of selected component (if applicable):


How reproducible:
very

Steps to Reproduce:
For example look at the annotations modal and look at the CD-ROM modal.


Additional info:
For the short term we should ensure that the following modals:
CD-ROM
Boot Order
Node Selector
Tolerations
Affinity Rules
Flavor
Dedicated Resources

All meet these requirements
Do not include an "X" to close
Align actions to the right
Use the modifier .pf-m-secondary for the cancel action
Use a spacer between the footer actions (32px)
Top align the modal rather then center it in the page

Comment 1 Yaacov Zamir 2020-04-30 12:06:11 UTC

Boot Order modal fix is submitted here (Note: does not fix top align issue because AFAIK PF4 modal does not easily allow this):
https://github.com/openshift/console/pull/5243

Comment 2 Yaacov Zamir 2020-04-30 12:24:06 UTC

Submitted upstream:
https://github.com/openshift/console/pull/5243

(5243 was planned for boot-order only, but I think fixes all the modals listed)

Comment 3 Yaacov Zamir 2020-04-30 12:41:03 UTC

Matt hi,

I want to wait with "Top align the modal rather then center it in the page" for the boot-order modal since I can't find a prop/css that control it for PF4 modal:
https://www.patternfly.org/v4/documentation/react/components/modal

Is it OK by you to wait with the top-align until CNV will align better with PF4 ?

Comment 4 Yaacov Zamir 2020-04-30 12:49:36 UTC

Nelly hi,setting target to 4.5 because IMHO this are small visual adjustments, fill free adjust target if needed.

Comment 5 Yaacov Zamir 2020-04-30 12:50:19 UTC

no docs needed

Comment 6 Matt 2020-04-30 16:41:49 UTC

I think that's acceptable Kobi

Comment 10 Yaacov Zamir 2020-05-14 05:21:30 UTC

Guohua +1, Thanks for noticing that !

Comment 12 Radim Hrazdil 2020-05-20 14:47:48 UTC

Cancel button in Affinity modal doesn't have class .pf-m-secondary
Remove action button in CD ROM modal isn't aligned to the center of the row and is slightly higher.

Comment 13 Radim Hrazdil 2020-05-20 16:14:57 UTC

Correction to the previous comment:
There are two buttons in affinity modal dialog with .pf-m-secondary and I missed to noticed the second one, which is the cancel button.

After discussion with Kobi, moving this to Verified due to difficulties with reproducibility of the remove button misalignment.
We can deal with it in a new BZ.

Moving to verified.
Verified in console release-4.5 branch commit: 5994c64ee529b650bae348ef78ebc23dca8db5c5

Comment 14 errata-xmlrpc 2020-07-13 17:32:22 UTC

Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory, and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHBA-2020:2409