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-7937] - Update Placement Groups detail and summaries #10325

Merged
merged 11 commits into from
Apr 9, 2024

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Mar 28, 2024

Description πŸ“

This PR achieves two main goals:

  • Consolidate summaries styles and their data (drawers, PG detail)
  • Consolidate PG detail (summary + linodes list, no tabs)
  • Remove "(Affinity Type)" appendages

Changes πŸ”„

  • Introduce new DescriptionList component for summaries (only used for PG, meant to be expanded)
    • component, test, storybook
  • Implement DescriptionList in PG drawers and PG detail
  • Remove tabs on Placement Group Details page
  • Remove (Affinity Type)" appendages in
    • drawers
    • breadcrumb
  • Update tests

Preview πŸ“·

PG Detail Create Drawer Assign Drawer Edit Drawer Storybook
Screenshot 2024-04-05 at 09 08 17 Screen Shot 2024-04-05 at 09 09 37 Screen Shot 2024-04-05 at 09 40 32 Screen Shot 2024-04-05 at 09 41 55 localhost_6006__path=_docs_components-descriptionlist--documentation (1)

How to test πŸ§ͺ

⚠️ Note: Copy is still WIP (main copy, errors, notices)

Prerequisites

  • Switch your environment to ALHPA and pull code locally
  • Login with user pg-user-1 (1Password)

Verification steps

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

@abailly-akamai abailly-akamai self-assigned this Apr 5, 2024
@abailly-akamai abailly-akamai marked this pull request as ready for review April 5, 2024 13:52
@abailly-akamai abailly-akamai requested a review from a team as a code owner April 5, 2024 13:52
@abailly-akamai abailly-akamai requested review from hana-linode and cpathipa and removed request for a team April 5, 2024 13:52
@abailly-akamai abailly-akamai changed the title upcoming: [M3-7937] upcoming: [M3-7937] - Update Placement Groups detail and summaries Apr 5, 2024

export type DescriptionListProps =
| DescriptionListBaseProps
| DescriptionListGridProps;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Using TypeScript's discriminated unions here to make sure gridProps is required when "grid" displayMode is selected

</StyledDL>
</Box>
);
};
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 is a pretty simple component that is only being used in placement groups right now, but could be used in other areas. It uses the dl > dt, dd for the markup, which - while not being semantically handled perfectly by all browsers - is still better than using paragraphs or divs like we've been doing in other places. Up to team members to implement it or not in their features.

@@ -15,15 +15,15 @@ import { TextField, TextFieldProps } from '../TextField';
const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
(theme: Theme, _params, classes) => ({
button: {
'&:first-of-type': {
'&[aria-label="Save"]': {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

tiny fix to tighten the edit breadcrumb button which had been given an extra let margin in a regression

Copy link

github-actions bot commented Apr 5, 2024

Coverage Report: βœ…
Base Coverage: 81.71%
Current Coverage: 81.81%

@carrillo-erik
Copy link
Contributor

Looks good on first-appearance review. I like the addition of the DescriptionList component. The UI looks better without the tabs, the summary view was too bland on its own. Great job!

Copy link
Contributor

@cpathipa cpathipa left a comment

Choose a reason for hiding this comment

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

Functionality and code LGTM!

  • Confirming create and edit drawers
  • Confirming detail page with summary
  • Confirming assign drawer
  • Confirming DescriptionList component.

UX - Observations:
1.Redundant configuration data in multiple spots.
Pasted Graphic 7

  1. Can we change the column name to Status instead of Linode status to maintain consistency with the Linode's table and VPC subnets table?
    image

@abailly-akamai
Copy link
Contributor Author

Thanks @cpathipa, good observations

I will take the redundant info to UX, meanwhile I did update the status column header πŸ‘

@abailly-akamai abailly-akamai merged commit a55ca05 into linode:develop Apr 9, 2024
17 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants