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

fix: [M3-8142] - Alignment Regression Of The IP Address Inside Node Pools Table #10599

Merged
merged 7 commits into from
Jul 1, 2024

Conversation

carrillo-erik
Copy link
Contributor

@carrillo-erik carrillo-erik commented Jun 20, 2024

Description 📝

Fixes the the vertical alignment of the IP Address inside of the Node Pools table.

Changes 🔄

List any change relevant to the reviewer.

  • For testing purposes, I disabled the background-color: transparent css property on the copy icon in order to show the cause of the visual bug.
  • Updated the row width percentage values, allowing the IP Address column more room since some addresses will cause the text to wrap. The Status column does not need as much room and the values in these change maintain a similar proportion as before.
  • Pass the noWrap prop set to true on the <TableCell> for the IP Address column to prevent longer addresses from wrapping the copy icon and resulting in vertical alignment discrepancies.

Preview 📷

Before After
before-fix.mov
after-fix.mov

How to test 🧪

  • Open the web browser developer tools and modify the viewport width as shown in the Preview video to ensure consistent results.

Verification steps

(How to verify changes)

  • Verify that as you adjust the viewport width, the IP Address which are wider than normal do not cause the copy icon to wrap to the next line (causing the IP Address to shift vertically).

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@carrillo-erik carrillo-erik added Bug Fixes for regressions or bugs LKE Related to Linode Kubernetes Engine offerings labels Jun 20, 2024
@carrillo-erik carrillo-erik self-assigned this Jun 20, 2024
@carrillo-erik carrillo-erik requested a review from a team as a code owner June 20, 2024 22:22
@carrillo-erik carrillo-erik requested review from hkhalil-akamai and jaalah-akamai and removed request for a team June 20, 2024 22:22
Copy link

github-actions bot commented Jun 20, 2024

Coverage Report:
Base Coverage: 82.24%
Current Coverage: 82.18%

@@ -100,7 +100,7 @@ export const NodeTable = React.memo((props: Props) => {
<TableSortCell
sx={(theme) => ({
...theme.applyTableHeaderStyles,
width: '15%',
Copy link
Contributor

Choose a reason for hiding this comment

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

These changes are an improvement, but I'm still seeing the wrapping at very narrow viewport widths (i.e., mobile screens).

Screen.Recording.2024-06-21.at.11.33.46.AM.mov

Copy link
Contributor

Choose a reason for hiding this comment

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

I was able to fix it by changing lines 114-117 of NodeRow.tsx like so:

          <div style={{ whiteSpace: 'nowrap' }}>
            <CopyTooltip copyableText text={displayIP} />
            <StyledCopyTooltip text={displayIP} />
          </div>

Using whiteSpace: 'no-wrap' ensures these elements will never wrap.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@hkhalil-akamai I believe the viewport width at which you reduced to in your video is somewhere in the 500px range and I was looking at the 600px breakpoint. In any event, I like the change you suggested better. We don't have to introduce a <div> element, we can just pass the noWrap prop set to true on the <TableCell> component.

@dwiley-akamai dwiley-akamai self-requested a review June 25, 2024 15:50
Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

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

IP Address and copy icon do not wrap as the viewport width shrinks ✅

Copy link
Contributor

@hkhalil-akamai hkhalil-akamai left a comment

Choose a reason for hiding this comment

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

Looks good, left some final feedback

@@ -88,7 +88,7 @@ export const NodeTable = React.memo((props: Props) => {
<TableSortCell
sx={(theme) => ({
...theme.applyTableHeaderStyles,
width: '25%',
width: '35%',
Copy link
Contributor

Choose a reason for hiding this comment

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

Even though the noWrap sorts out the alignment problem, I think the new widths you had before better fit the content (status column is wide)

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've replaced the widths again.

@carrillo-erik carrillo-erik merged commit f16aaaa into linode:develop Jul 1, 2024
18 checks passed
nikhagra-akamai pushed a commit to nikhagra-akamai/manager that referenced this pull request Jul 3, 2024
…ools Table (linode#10599)

* Fix alignment issue of the IP Address in Node Pools table

* Add changeset

* Implement PR feedback

* More PR feedback

* Comment out gecko2 mock flags causing clone-linode spec to fail
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Fixes for regressions or bugs LKE Related to Linode Kubernetes Engine offerings
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants