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.

Sign up for GitHub

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

Jump to bottom

Bug 1881898: fix Quickstart subtitle block #6692

Merged
merged 1 commit into from Oct 8, 2020
Merged

Bug 1881898: fix Quickstart subtitle block #6692

merged 1 commit into from Oct 8, 2020

Conversation

abhinandan13jan
Copy link
Contributor

@abhinandan13jan abhinandan13jan commented Sep 21, 2020 •
edited

Addresses

https://issues.redhat.com/browse/ODC-4779

Problem

The sub title of the main and step headers are misaligned when the header text is wrapping to another line

Solution

  • Put Step no inside h3 and within inline-block wrapper
  • Put Duration inside Header and within inline-block wrapper

Screenshots

Screenshot from 2020-10-01 13-43-29
Screenshot from 2020-10-01 13-42-57
Screenshot from 2020-10-01 13-42-47
Screenshot from 2020-10-01 13-42-34

Tests

Altered tests QuickStartHeader.spec.scss

Browser conformance

Chrome, Firefox

@openshift-ci-robot openshift-ci-robot added the component/core Related to console core functionality label Sep 21, 2020
@abhinandan13jan abhinandan13jan changed the title fix Quickstart subtitle blocking fix Quickstart subtitle block Sep 22, 2020
rohitkrai03
rohitkrai03 suggested changes Sep 22, 2020
View reviewed changes
Copy link
Contributor

@rohitkrai03 rohitkrai03 left a comment

Choose a reason for hiding this comment

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

The bug also mentions that the duration shown after the quick start title should not wrap around to next line. In your screenshots I only see the issue resolved for task titles.

@abhinandan13jan
Copy link
Contributor Author

The bug also mentions that the duration shown after the quick start title should not wrap around to next line. In your screenshots I only see the issue resolved for task titles.

@rohitkrai03 I've added the Header part changes and also updated the screenshots. However, it looks a little odd in some cases.

@abhinandan13jan abhinandan13jan changed the title fix Quickstart subtitle block Bug 1881898: fix Quickstart subtitle block Sep 23, 2020
@openshift-ci-robot openshift-ci-robot added the bugzilla/severity-medium Referenced Bugzilla bug's severity is medium for the branch this PR is targeting. label Sep 23, 2020
@openshift-ci-robot
Copy link
Contributor

@abhinandan13jan: This pull request references Bugzilla bug 1881898, which is valid. The bug has been moved to the POST state.

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

In response to this:

Bug 1881898: fix Quickstart subtitle block

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 openshift-ci-robot added the bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. label Sep 23, 2020
@abhinandan13jan
Copy link
Contributor Author

/kind bug

@openshift-ci-robot openshift-ci-robot added the kind/bug Categorizes issue or PR as related to a bug. label Sep 23, 2020
@rohitkrai03
Copy link
Contributor

The bug also mentions that the duration shown after the quick start title should not wrap around to next line. In your screenshots I only see the issue resolved for task titles.

@rohitkrai03 I've added the Header part changes and also updated the screenshots. However, it looks a little odd in some cases.

@abhinandan13jan Yeah, looking at the screenshots it seems the text is wrapping at wrong places. Not sure if using <Text> is a good idea here. @christianvogt WDYT?

@christianvogt
Copy link
Contributor

christianvogt commented Sep 30, 2020 •
edited

image

Wrap the duration in an element with display: inline-block

image
Similar solution for this as well.

@openshift-ci-robot openshift-ci-robot removed the bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. label Oct 1, 2020
@openshift-ci-robot
Copy link
Contributor

@abhinandan13jan: This pull request references Bugzilla bug 1881898, which is invalid:

  • expected the bug to target the "4.6.0" release, but it targets "4.7.0" instead

Comment /bugzilla refresh to re-evaluate validity if changes to the Bugzilla bug are made, or edit the title of this pull request to link to a different bug.

In response to this:

Bug 1881898: fix Quickstart subtitle block

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 openshift-ci-robot added the bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. label Oct 1, 2020
christianvogt
christianvogt reviewed Oct 1, 2020
View reviewed changes
frontend/packages/console-app/src/components/quick-starts/QuickStartDrawer.tsx Outdated
Comment on lines 84 to 88
<span className="co-quick-start-drawer__duration">
<Text component={TextVariants.small} className="text-secondary">
{`${quickStart?.spec.duration} minutes`}
</Text>
</span>
Copy link
Contributor

Choose a reason for hiding this comment

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

Why are you using Text ? Fairly certain Text is only useful inside of TextContent.

Suggested change
<span className="co-quick-start-drawer__duration">
<Text component={TextVariants.small} className="text-secondary">
{`${quickStart?.spec.duration} minutes`}
</Text>
</span>
<small className="co-quick-start-drawer__duration text-secondary">
{`${quickStart?.spec.duration} minutes`}
</span>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was using Text as I simply moved a pre-existing block inside the Header without modifying it

frontend/packages/console-app/src/components/quick-starts/controller/QuickStartTaskHeader.tsx Outdated
Comment on lines 75 to 78
<Text component={TextVariants.a} className="text-secondary">
{' '}
{subtitle}
</Text>
Copy link
Contributor

Choose a reason for hiding this comment

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

You created a class name never used it. Also you need to remove the space from the inline-block element.

Suggested change
<Text component={TextVariants.a} className="text-secondary">
{' '}
{subtitle}
</Text>
<>
{' '}
<small className="co-quick-start-task-header__subtitle text-secondary">
{subtitle}
</small>
</>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

updated

@abhinandan13jan
Copy link
Contributor Author

/bugzilla refresh

@openshift-ci-robot openshift-ci-robot added bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. and removed bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. labels Oct 5, 2020
@openshift-ci-robot
Copy link
Contributor

@abhinandan13jan: This pull request references Bugzilla bug 1881898, which is valid.

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

In response to this:

/bugzilla refresh

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.

@christianvogt
Copy link
Contributor

/approve

@openshift-ci-robot openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Oct 7, 2020
rohitkrai03
rohitkrai03 approved these changes Oct 7, 2020
View reviewed changes
Copy link
Contributor

@rohitkrai03 rohitkrai03 left a comment

Choose a reason for hiding this comment

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

/lgtm

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

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: abhinandan13jan, christianvogt, rohitkrai03

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

@rohitkrai03
Copy link
Contributor

/retest

@openshift-bot
Copy link
Contributor

/retest

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

10 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.

@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-merge-robot openshift-merge-robot merged commit 830ee7c into openshift:master Oct 8, 2020
@openshift-ci-robot
Copy link
Contributor

@abhinandan13jan: All pull requests linked via external trackers have merged:

Bugzilla bug 1881898 has been moved to the MODIFIED state.

In response to this:

Bug 1881898: fix Quickstart subtitle block

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.

@spadgett spadgett added this to the v4.7 milestone Oct 13, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@christianvogt christianvogt christianvogt left review comments

@rohitkrai03 rohitkrai03 rohitkrai03 approved these changes

@jeff-phillips-18 jeff-phillips-18 Awaiting requested review from jeff-phillips-18

@jhadvig jhadvig Awaiting requested review from jhadvig

Assignees

@rohitkrai03 rohitkrai03

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/core Related to console core functionality kind/bug Categorizes issue or PR as related to a bug. lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Milestone
v4.7
Development

Successfully merging this pull request may close these issues.

None yet
7 participants
@abhinandan13jan @openshift-ci-robot @rohitkrai03 @christianvogt @openshift-bot @spadgett @openshift-merge-robot