-
Notifications
You must be signed in to change notification settings - Fork 367
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-7611] - Placement Groups Detail Summary #10164
upcoming: [M3-7611] - Placement Groups Detail Summary #10164
Conversation
Coverage Report: ✅ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@carrillo-erik looks good - you need to:
- add a changeset
- fix the unit failing
- add a test for the PlacementGroupsSummary.tsx
- The spacing is off for the non-compliance banner.
- The learn more link in the banner is probably not accessible
|
@carrillo-erik no, I wonder what we do for those dark blue links in dark mode (the "Learn more" in this case). Cause there is not enough contrast for it to be accessible and legible |
Oh sorry, I misunderstood your comment. Indeed, our a11y does suffer quite a bit in dark mode. One suggestion, for the links in particular, could be that we adopt the same guidelines as GitHub. Recently they made the change to show the underline for links by default. The contrast ratio would still require some work, however, I believe they would be more legible. |
@carrillo-erik can you check with UX and/or what we do in those situations through the rest of the UI? |
...PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.test.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost there. just a few fixes for cleanup and consistency
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.tsx
Outdated
Show resolved
Hide resolved
Learn more. | ||
</Link> | ||
</Typography> | ||
</Notice> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The Notice should live inside the PlacementGroupSummary
component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@abailly-akamai I had originally done this, however, having the <Notice />
inside the <PlacementGroupSummary />
was the reason why the unit test was failing. This led me to rethink about the component composition and I feel the <Notice />
should live outside of the <PlacementGroupSummary />
as this component is only meant to display the config details. It's a personal preference but if you believe otherwise I can make the change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think that test failure should warrant this change. The notice only pertains to the summary so it should be there. You put it in the SafeTabPanel
which isn't right. Let's put it back inside the summary and fix the test. I can help if you can't find the source of the failure
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Made the changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't use a constant and instead incorporated the string right in the component, this seems to have solved the issue I was encountering with the unit test.
...ures/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
...ures/PlacementGroups/PlacementGroupsDetail/PlacementGroupsSummary/PlacementGroupsSummary.tsx
Outdated
Show resolved
Hide resolved
import { PlacementGroupsSummary } from './PlacementGroupsSummary'; | ||
|
||
describe('PlacementGroups Summary', () => { | ||
it('renders the placement group detail summary panel', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Optional: we could also check if the tooltip exists.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I included this check in the unit test.
Description 📝
This PR introduces the
PlacementGroupsSummary
component.Changes 🔄
Preview 📷
Placement Group Summary View
Tooltip
Non-compliant Placement Group Notice
How to test 🧪
Prerequisites
(How to setup test environment)
Verification steps
(How to verify changes)
http://localhost:3000/placement-groups
yarn test PlacementGroupsSummary
As an Author I have considered 🤔
Check all that apply