Clean up discover alerts by zmb3 · Pull Request #51842 · gravitational/teleport

zmb3 · 2025-02-04T19:55:20Z

Discover was using a custom HintBox component instead of the in-page alerts that are part of our design system. As a result, some items rendered without enough contrast. Use the new alert component to ensure consistency across the UI.

Example after/before:

Other changes:

Use unordered lists instead of manually including a - character to emulate a bullet.
Top-align the icon in alerts with large amounts of vertical content.

Before:

After:

kimlisa

thanks for the clean up

ravicious · 2025-02-06T10:52:20Z

  border-radius: 50%;
  line-height: 0;
  margin-right: ${p => p.theme.space[3]}px;
+  align-self: flex-start;


Top-align the icon in alerts with large amounts of vertical content.

I wanted to do the same thing, but I don't think you can just change IconContainer like this, as it'll affect all alerts across the whole app. Those that are supposed to be on a single line are going to look off (e.g. https://localhost:9002/?path=/story/design-alerts--actionable).

This needs to be configurable on a per-alert basis.

My solution keeps the original placement of the icon for other alerts.

Zac's Rafał's

I added alignItems which allows you to align both the icon and the action buttons to the top. I'm going to need it in VNet diagnostics anyway. Would using it work for you in Discover?

I also added a story with controls for Alert so that it's easier to test different variants.

Oops, I didn't know you talked with Bartosz about this. I still think it might be best to change only the Discover alerts for now?

Your solution seems fine, but I am confused at the state of things now that you've pushed to my branch.

Are we good to go now on this issue or are more changes required?

You'd need to add alignItems="flex-start" to relevant alerts in Discover where the icon should be aligned to the top. I suppose every warning that used to use HintBox should now be <Warning alignItems="flex-start">.

ravicious · 2025-02-11T16:20:51Z

+  // By default, <a> within an Alert has white color which has bad contrast on certain kinds of
+  // alerts, like Warning for example. This is an attempt to at least make them visible using the
+  // same color as the text.
+  & ${Link}, & a {
+    color: inherit;


Ugh, I can't do this without risking breaking someone's UI if we ever used something like <ButtonPrimary as="a"> within an alert.

Fixed by specifically checking against <Button>.

I didn't notice that in OuterContainer we hardcode links to theme.colors.light, which is something last touched 6 years ago. I just changed it to color: inherit instead.

Relevant stories:

https://localhost:9002/?path=/story/teleport-discover-connectmycomputer-setupconnect--hint-timeout&globals=theme:Light+Theme

https://localhost:9002/?path=/story/teleporte-accesslists-view--viewing-as-admin&globals=theme:Light+Theme

Click "Delete" in the top right, the modal has a link in an alert and uses linkColor prop of <Alert> to change the color of the link.

I couldn't use the same color as Link, as it looks bad with the BBLP theme.

@kimlisa Could you double check me here?

ravicious · 2025-02-11T17:10:12Z

-Link.displayName = 'Link';
-
-const StyledButtonLink = styled.a.attrs({
+const Link = styled.a.attrs({


This change can stay, <StyledButtonLink> was unnecessarily wrapped in Link instead of being exported directly.

Welp, this caused the inferred type of <Link> change, which broke a couple of other places, most importantly #51698 (comment).

I reverted the change and the type check seems to pass.

ravicious · 2025-02-14T15:59:40Z

I think we can merge it now, no? I need alignItems on Alert in my other PR. 😏

zmb3 · 2025-02-14T16:03:06Z

I think we can merge it now, no? I need alignItems on Alert in my other PR. 😏

Ok, let me rebase and force push.

Discover was using a custom HintBox component instead of the in-page alerts that are part of our design system. As a result, some items rendered without enough contrast. Use the new alert component to ensure consistency across the UI. This also fixes a styling but where links inside alerts were not rendered with the correct text color. Co-Authored-By: Rafał Cieślak <rafal.cieslak@goteleport.com>

public-teleport-github-review-bot · 2025-02-15T19:22:09Z

@zmb3 See the table below for backport results.

Branch	Result
branch/v15	Failed
branch/v16	Failed
branch/v17	Create PR

zmb3 · 2025-02-15T19:43:41Z

Skipping v15 and v16 backports since this is heavily based on the refreshed Alert component that only exists in v17 and up.

Discover was using a custom HintBox component instead of the in-page alerts that are part of our design system. As a result, some items rendered without enough contrast. Use the new alert component to ensure consistency across the UI. This also fixes a styling but where links inside alerts were not rendered with the correct text color. Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>

zmb3 requested a review from kimlisa February 4, 2025 19:56

github-actions Bot requested review from ravicious and rudream February 4, 2025 19:56

github-actions Bot added size/sm ui labels Feb 4, 2025

zmb3 added no-changelog Indicates that a PR does not require a changelog entry backport/branch/v15 backport/branch/v17 labels Feb 4, 2025

zmb3 force-pushed the zmb3/discover-dialogs branch from 4befbfa to ffd17ee Compare February 4, 2025 21:32

kimlisa approved these changes Feb 6, 2025

View reviewed changes

ravicious reviewed Feb 6, 2025

View reviewed changes

zmb3 force-pushed the zmb3/discover-dialogs branch from f153423 to 87f8c0f Compare February 11, 2025 15:36

ravicious approved these changes Feb 11, 2025

View reviewed changes

public-teleport-github-review-bot Bot removed the request for review from rudream February 11, 2025 16:16

ravicious reviewed Feb 11, 2025

View reviewed changes

ravicious mentioned this pull request Feb 14, 2025

Web: make SelectResource.tsx component leaner #51698

Merged

zmb3 force-pushed the zmb3/discover-dialogs branch from df9fcd7 to ed2705d Compare February 14, 2025 16:05

ravicious force-pushed the zmb3/discover-dialogs branch from ed2705d to df9fcd7 Compare February 14, 2025 16:18

zmb3 force-pushed the zmb3/discover-dialogs branch from df9fcd7 to 0c4e31d Compare February 14, 2025 16:19

zmb3 force-pushed the zmb3/discover-dialogs branch from 0c4e31d to be0a9d9 Compare February 15, 2025 19:01

zmb3 added this pull request to the merge queue Feb 15, 2025

Merged via the queue into master with commit 80b7c4a Feb 15, 2025

zmb3 deleted the zmb3/discover-dialogs branch February 15, 2025 19:19

zmb3 mentioned this pull request Feb 15, 2025

[v17] Clean up discover alerts #52204

Merged

Conversation

zmb3 commented Feb 4, 2025

Uh oh!

kimlisa left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ravicious Feb 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ravicious commented Feb 14, 2025

Uh oh!

zmb3 commented Feb 14, 2025

Uh oh!

public-teleport-github-review-bot Bot commented Feb 15, 2025

Uh oh!

zmb3 commented Feb 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ravicious Feb 6, 2025 •

edited

Loading