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

chore: [M3-7803] - Clean up Chip component #10223

Merged
merged 5 commits into from
Feb 26, 2024

Conversation

bnussman-akamai
Copy link
Contributor

@bnussman-akamai bnussman-akamai commented Feb 22, 2024

Description πŸ“

After talking about Chips in our cafe meeting, I looked at the Chip component and I couldn't un-see some of this code 😩😀

This PR simplifies our override of MUI's <Chip /> and removes some styled components that went way too far

Preview πŸ“·

Note

The goal of this PR is to clean up Chip related code, but not change to how it looks πŸ‘οΈ

Before After
Screenshot 2024-02-22 at 4 06 20 PM Screenshot 2024-02-22 at 4 06 48 PM
Screenshot 2024-02-22 at 4 07 56 PM Screenshot 2024-02-22 at 4 08 19 PM
Screenshot 2024-02-22 at 4 09 56 PM Screenshot 2024-02-22 at 4 09 33 PM

How to test πŸ§ͺ

  • Check out this PR
  • Check that the Chip works as expected in Storybook
  • Some examples of Chips you could check are:
    • Kubernetes HA chip (visible on Kubernetes landing and details page) πŸ’»
    • Database HA chip (visible on the Database landing page) πŸ’Ύ
    • Verify the Linode Status on a Linode's details page looks and works as expected 🟒 (This use to be a chip, now it is just a status icon and text)
    • Check the VPC subnet IPs chip
  • Check any other instance of Chip you can think of in Cloud Manager

As an Author I have considered πŸ€”

  • πŸ‘€ 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

@bnussman-akamai bnussman-akamai added UX/UI Changes for UI/UX to review Clean Up labels Feb 22, 2024
@bnussman-akamai bnussman-akamai self-assigned this Feb 22, 2024
@bnussman-akamai bnussman-akamai requested a review from a team as a code owner February 22, 2024 21:17
@bnussman-akamai bnussman-akamai requested review from jdamore-linode and jaalah-akamai and removed request for a team February 22, 2024 21:17
Copy link

github-actions bot commented Feb 22, 2024

Coverage Report: ❌
Base Coverage: 81.33%
Current Coverage: 81.29%

Copy link
Contributor

@jaalah-akamai jaalah-akamai left a comment

Choose a reason for hiding this comment

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

Nice cleanup 🧹

@bnussman-akamai bnussman-akamai added the Add'tl Approval Needed Waiting on another approval! label Feb 23, 2024
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.

The cleanup looks good mostly but I noticed a couple of instances where chips were adversely impacted

Comment on lines 127 to 134
{hasUpgrade && (
<Chip
clickable
inTable
label="UPGRADE"
onClick={openUpgradeDialog}
size="small"
/>
) : null}
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

The "Upgrade" chip was adversely impacted by some of the styling changes:

Prod This branch
Screenshot 2024-02-23 at 11 42 11 AM Screenshot 2024-02-23 at 11 42 07 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 63bb02e

Thank you for catching this!

Before Fix Fixed
Screenshot 2024-02-23 at 12 12 27 PM Screenshot 2024-02-23 at 12 12 20 PM

Comment on lines 152 to 171
<Stack
alignItems="center"
aria-label={`Linode status ${linodeStatus}`}
component="span"
data-qa-linode-status
hasSecondaryStatus={hasSecondaryStatus}
isOffline={isOffline}
isOther={isOther}
isRunning={isRunning}
isSummaryView={isSummaryView}
label={formattedStatus}
pill={true}
/>
direction="row"
spacing={1.5}
sx={{ paddingLeft: 2 }}
>
<StatusIcon status={getLinodeIconStatus(linodeStatus)} />
<Typography sx={(theme) => ({ fontFamily: theme.font.bold })}>
{formattedStatus}
</Typography>
</Stack>
{isRebootNeeded && (
<TooltipIcon
status="help"
sxTooltipIcon={{ padding: 0 }}
text={VPC_REBOOT_MESSAGE}
/>
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

Similar to the K8S "Upgrade" chip situation:

Prod This branch
Screenshot 2024-02-23 at 11 45 59 AM Screenshot 2024-02-23 at 11 45 56 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 63bb02e

@bnussman-akamai bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 24, 2024
@bnussman-akamai bnussman-akamai merged commit cdd0fa4 into linode:develop Feb 26, 2024
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! Clean Up UX/UI Changes for UI/UX to review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants