pkg/ui: Don't force tracez tags to uppercase.

[benbardin]

Also, deprecate uses of db-console/.../Badge in favor of the identical version
in cluster-ui.

Release note: None

[cockroach-teamcity]

This change is 

[knz]

thanks

[benbardin]

You're welcome @knz ! CI is passing now, can I get an LGTM? Thank you!

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @adityamaru and @andreimatei)

[knz]

I'm OK with the change, but I'm not technology expert on the front-end.
Do you want to get your code review from someone with front-end expertise? For example @nathanstilwell , @dhartunian or @koorosh

[benbardin]

Can do!

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @adityamaru and @andreimatei)

[nathanstilwell]

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

    styles.push("badge--uppercase");
  }
  const classes = cx(...styles);

So classnames already has the functionality you are creating here (the ability to add a className based on a boolean variable). So I think what you want is something like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": !allowLowerCase,
  });

This actually makes this kind of confusing for me to read since we are applying the badge--uppercase class after negating a variable. It seems like the default for badges should be that they are uppercase and we want the ability to override that. So what if we had a prop called something like uppercase and defaulted it to false? Then the cx call would look like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

giving us something like,

export function Badge(props: BadgeProps) {
  const { size, status, icon, iconPosition, text, uppercase = true } = props;
  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

Anyway, just a thought.

Code quote:

  const { size, status, icon, iconPosition, text, allowLowerCase } = props;
  const styles = ["badge", `badge--size-${size}`, `badge--status-${status}`];
  if (!allowLowerCase) {
    styles.push("badge--uppercase");
  }
  const classes = cx(...styles);

[nathanstilwell]

Thanks for cutting out a duplicate! I think I would prefer that we use Badge from @cockroachlabs/ui-components everywhere, but looking at the implementation it differs slightly from what's in this repo and doesn't support all the features that have been added in Figma for badges (which makes me suspect that this implementation may differ from what's in Managed Service). All that to say, we can worry about migrating to the UI repo another time.

Thank you.

[benbardin]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @adityamaru, @andreimatei, @dhartunian, @koorosh, and @nathanstilwell)

---

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

Previously, nathanstilwell (Nathan Stilwell) wrote…

So classnames already has the functionality you are creating here (the ability to add a className based on a boolean variable). So I think what you want is something like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": !allowLowerCase,
  });

This actually makes this kind of confusing for me to read since we are applying the badge--uppercase class after negating a variable. It seems like the default for badges should be that they are uppercase and we want the ability to override that. So what if we had a prop called something like uppercase and defaulted it to false? Then the cx call would look like,

const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

giving us something like,

export function Badge(props: BadgeProps) {
  const { size, status, icon, iconPosition, text, uppercase = true } = props;
  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`{
    "badge--uppercase": uppercase,
  });

Anyway, just a thought.

Oh, neat trick! Thanks! How's this look?

[nathanstilwell]

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

Previously, benbardin (Ben Bardin) wrote…

Oh, neat trick! Thanks! How's this look?

I still find reviewable very confusing, but I'm not seeing a change yet. Am I missing something?

[benbardin]

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @adityamaru, @andreimatei, @dhartunian, @koorosh, and @nathanstilwell)

---

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

Previously, nathanstilwell (Nathan Stilwell) wrote…

I still find reviewable very confusing, but I'm not seeing a change yet. Am I missing something?

No, I just forgot to commit locally before pushing 🤦 How about now?

[nathanstilwell]

pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx line 35 at r1 (raw file):

Previously, benbardin (Ben Bardin) wrote…

No, I just forgot to commit locally before pushing 🤦 How about now?

Nice.

[nathanstilwell]

Reviewed 10 of 10 files at r1, 1 of 1 files at r2, 2 of 2 files at r3, all commit messages.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @adityamaru, @andreimatei, @dhartunian, and @koorosh)

[benbardin]

bors r+

[craig]

Build succeeded:

• GitHub CI (Cockroach)