Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug 1828964: Adjust kubevirt modals footer buttons #5243

Merged

Conversation

yaacov
Copy link
Member

@yaacov yaacov commented Apr 30, 2020

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.

This BZ align kubevirt plugin modal:

  • 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)

Note: In the case of boot-order modal we also need to top align the modal, this is not easily done for PF4 modal, IMHO we can wait until reset of the console will migrate to PF4, or find a fix that is PF4 ready, before fixing that.

Screenshots:
Before
screenshot-console-openshift-console apps ostest test metalkube org-2020 04 30-14_27_01
After:
screenshot-localhost_9000-2020 04 30-14_27_40

screenshot-localhost_9000-2020 04 30-15_54_44

screenshot-localhost_9000-2020 04 30-15_54_09

@openshift-ci-robot openshift-ci-robot added component/kubevirt Related to kubevirt-plugin approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Apr 30, 2020
@yaacov
Copy link
Member Author

yaacov commented Apr 30, 2020

@suomiy @glekner @pcbailey @irosenzw please review

@yaacov
Copy link
Member Author

yaacov commented Apr 30, 2020

@matthewcarleton please review

@yaacov yaacov changed the title Adjust boot order modal footer buttons Adjust kubevirt modals footer buttons Apr 30, 2020
@yaacov yaacov changed the title Adjust kubevirt modals footer buttons Bug 1828964: Adjust kubevirt modals footer buttons Apr 30, 2020
@openshift-ci-robot openshift-ci-robot added bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. labels Apr 30, 2020
@openshift-ci-robot
Copy link
Contributor

@yaacov: This pull request references Bugzilla bug 1828964, which is valid. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug
  • bug is open, matching expected state (open)
  • bug target release (4.5.0) matches configured target release for branch (4.5.0)
  • bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1828964: Adjust kubevirt modals footer buttons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@openshift-ci-robot
Copy link
Contributor

@yaacov: This pull request references Bugzilla bug 1828964, which is valid.

3 validation(s) were run on this bug
  • bug is open, matching expected state (open)
  • bug target release (4.5.0) matches configured target release for branch (4.5.0)
  • bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1828964: Adjust kubevirt modals footer buttons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@matthewcarleton
Copy link
Contributor

@yaacov so for the cd-rom, boot order modals it looks like they are aligned to the middle of the viewport still. Is this a difficult thing to fix?

@yaacov
Copy link
Member Author

yaacov commented Apr 30, 2020

@matthewcarleton hi,

for the cd-rom, boot order modals it looks like they are aligned to the middle of the viewport still

only boot-order is in the middle of the screen [1].

Is this a difficult thing to fix?

Yes, boot-order modal is based on PF4 , I did not find prop or css that can easily move the modal to top
https://www.patternfly.org/v4/documentation/react/components/modal

[1] screenshot of whole screen with modal:
screenshot-localhost_9000-2020 04 30-16_01_27

@yaacov
Copy link
Member Author

yaacov commented Apr 30, 2020

/test e2e-gcp-console

Copy link
Member

@atiratree atiratree left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we are aligning with the console, until they decide to move every layout to PF4?

<ActionGroup className="pf-c-form pf-c-form__actions--right pf-c-form__group--no-top-margin">
<Button
type="button"
variant="secondary"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please use the typed version of variant

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 fiexd

>
{cancelButtonText}
</Button>
<Button variant="primary" isDisabled={isDisabled} id="confirm-action" onClick={onSubmit}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 fiexd

@matthewcarleton
Copy link
Contributor

@matthewcarleton hi,

for the cd-rom, boot order modals it looks like they are aligned to the middle of the viewport still

only boot-order is in the middle of the screen [1].

Is this a difficult thing to fix?

Yes, boot-order modal is based on PF4 , I did not find prop or css that can easily move the modal to top
https://www.patternfly.org/v4/documentation/react/components/modal

[1] screenshot of whole screen with modal:
screenshot-localhost_9000-2020 04 30-16_01_27

ah ya it's the bullseye layout that's being used so it would require some custom CSS to adjust it.

@yaacov
Copy link
Member Author

yaacov commented Apr 30, 2020

/retest

@atiratree
Copy link
Member

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label May 4, 2020
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: suomiy, yaacov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

5 similar comments
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

2 similar comments
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-merge-robot openshift-merge-robot merged commit 17db6db into openshift:master May 5, 2020
@openshift-ci-robot
Copy link
Contributor

@yaacov: All pull requests linked via external trackers have merged: openshift/console#5243. Bugzilla bug 1828964 has been moved to the MODIFIED state.

In response to this:

Bug 1828964: Adjust kubevirt modals footer buttons

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. component/kubevirt Related to kubevirt-plugin lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants