Bug 1828964 - Align CNV modals with OCP modals
Summary: Align CNV modals with OCP modals
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Console Kubevirt Plugin
Version: 4.4
Hardware: All
OS: All
medium
medium
Target Milestone: ---
: 4.5.0
Assignee: Yaacov Zamir
QA Contact: Radim Hrazdil
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2020-04-28 16:40 UTC by Matt
Modified: 2020-07-13 17:32 UTC (History)
5 users (show)

Fixed In Version:
Doc Type: No Doc Update
Doc Text:
Clone Of:
Environment:
Last Closed: 2020-07-13 17:32:22 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 5243 0 None closed Bug 1828964: Adjust kubevirt modals footer buttons 2020-06-24 01:27:26 UTC
Github openshift console pull 5435 0 None closed Bug 1828964: Align vm clone modal with OCP modals 2020-06-24 01:27:26 UTC
Red Hat Product Errata RHBA-2020:2409 0 None None None 2020-07-13 17:32:40 UTC

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


Note You need to log in before you can comment on or make changes to this bug.