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

upcoming: [M3-7612] Placement Group Linodes List #10123

Merged
merged 10 commits into from
Feb 7, 2024

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Jan 29, 2024

Description πŸ“

PR to implement the linode list on the Placement Group detail, using existing UI/UX patterns.

Changes πŸ”„

  • Implement the table and its components, including filtering and pagination patterns
  • Implement create button (not functional yet)
  • Implement unit tests for all components
  • fix a console error with ErrorState
  • modify mock data

Preview πŸ“·

localhost_3000_placement-groups_3_linodes

How to test πŸ§ͺ

Prerequisites

  • Turn on the "Placement Groups" feature flag and MSW

Verification steps

  • Navigate to http://localhost:3000/placement-groups/1/linodes
  • Confirm Table and its components
  • Confirm filtering and column sorting
  • Modify PG factory data as needed (>=25 to see pagination)

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

marginLeft: 0,
padding: props.compact ? theme.spacing(5) : theme.spacing(10),
width: '100%',
}));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this was creating test console errors

@abailly-akamai abailly-akamai marked this pull request as ready for review January 31, 2024 20:45
@abailly-akamai abailly-akamai requested a review from a team as a code owner January 31, 2024 20:45
@abailly-akamai abailly-akamai requested review from mjac0bs, bnussman-akamai and carrillo-erik and removed request for a team January 31, 2024 20:45
@abailly-akamai abailly-akamai changed the title upcoming: [M3-7612] Placement Groups Linodes List upcoming: [M3-7612] Placement Group Linodes List Jan 31, 2024
Copy link

github-actions bot commented Jan 31, 2024

Coverage Report: βœ…
Base Coverage: 81.18%
Current Coverage: 81.18%

Comment on lines 27 to 31
const {
data: allLinodes,
error: linodesError,
isLoading: linodesLoading,
} = useAllLinodesQuery();
Copy link
Contributor

Choose a reason for hiding this comment

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

This isn't a big deal right now because sadly useAllLinodesQuery is used in a ton of places, but we might want to consider loading only the necessary Linodes using a filter. We could also paginate and search with the API filter if we want to be extra.

Suggested change
const {
data: allLinodes,
error: linodesError,
isLoading: linodesLoading,
} = useAllLinodesQuery();
const {
data: allLinodes,
error: linodesError,
isLoading: linodesLoading,
} = useAllLinodesQuery(
{},
{
'+or': placementGroup?.linode_ids.map((id) => ({
id,
})),
}
);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sweet! Thx for suggesting those improvements - I made this change and updated the MSW linode/instances response to handle it. Hopefully helpful for other devs in the future πŸ‘

Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

Thanks for all the test coverage to compliment these changes. Approving pending a couple small styling adjustments and some minor clean up.

Confirmed:

  • Table and data looks good at all screen sizes.
  • Table columns are sortable.
  • Table is paginated when there are >25 PGs.
  • Search bar filters table items.

@mjac0bs mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Feb 6, 2024
@carrillo-erik
Copy link
Contributor

Found a small regression in mobile view. When screen size falls below 960px, the Docs link gets cut off. See images below.

Tablet & Desktop View Mobile View
tablet-desktop-view mobile-view

@@ -132,7 +136,7 @@ export const PlacementGroupsLanding = React.memo(() => {
onButtonClick={handleCreatePlacementGroup}
title="Placement Groups"
/>
<Typography sx={{ mb: 4, mt: 2 }}>
<Typography sx={{ mb: 4, mt: 2, px: matchesSmDown ? 1 : 0 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a neat way to style the component.

@bnussman-akamai bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 7, 2024
@abailly-akamai
Copy link
Contributor Author

@carrillo-erik am not able to reproduce what you are seeing, but it may have to be with OSX scrollbar and not related to this PR, rather the LandingHeader. If you find it to be a consistent issue across entities, please make a ticket so it can be handled globally

@abailly-akamai abailly-akamai merged commit 3bb8475 into linode:develop Feb 7, 2024
17 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! Placement Groups
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants