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

Also, deprecate uses of db-console/.../Badge in favor of the identical version in cluster-ui. Release note: None
cockroachdb · Jul 11, 2022 · e145082 · e145082
1 parent 672f201
commit e145082
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 161 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss b/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss
@@ -5,12 +5,15 @@
   display: flex;
   flex-direction: row;
   border-radius: 3px;
-  text-transform: uppercase;
   width: max-content;
   padding: $spacing-xx-small $spacing-x-small;
   cursor: default;
 }
 
+.badge--uppercase {
+  text-transform: uppercase;
+}
+
 .badge--size-small,
 .badge--size-large,
 .badge--size-medium {

diff --git a/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx b/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx
@@ -21,13 +21,18 @@ export interface BadgeProps {
   status?: BadgeStatus;
   icon?: React.ReactNode;
   iconPosition?: "left" | "right";
+  allowLowerCase?: boolean;
 }
 
 const cx = classNames.bind(styles);
 
 export function Badge(props: BadgeProps) {
-  const { size, status, icon, iconPosition, text } = props;
-  const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`);
+  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);
   const iconClasses = cx(
     "badge__icon",
     `badge__icon--position-${iconPosition || "left"}`,

diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl b/pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx b/pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.tsx b/pkg/ui/workspaces/db-console/src/components/badge/badge.tsx
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/index.ts b/pkg/ui/workspaces/db-console/src/components/badge/index.ts
diff --git a/pkg/ui/workspaces/db-console/src/components/index.ts b/pkg/ui/workspaces/db-console/src/components/index.ts
@@ -8,7 +8,6 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-export * from "./badge";
 export * from "./button";
 export * from "./icon";
 export * from "./inlineAlert/inlineAlert";

diff --git a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx
@@ -34,8 +34,8 @@ import {
   PageHeader,
   Text,
   TextTypes,
-  Badge,
 } from "src/components";
+import { Badge } from "@cockroachlabs/cluster-ui";
 
 import "./layout.styl";
 import "./layoutPanel.styl";

diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx
@@ -26,8 +26,10 @@ import { AdminUIState } from "src/redux/state";
 import { refreshNodes, refreshLiveness } from "src/redux/apiReducers";
 import { LocalSetting } from "src/redux/localsettings";
 import { INodeStatus, MetricConstants } from "src/util/proto";
-import { Text, TextTypes, Tooltip, Badge, BadgeProps } from "src/components";
+import { Text, TextTypes, Tooltip } from "src/components";
 import {
+  Badge,
+  BadgeProps,
   ColumnsConfig,
   Table,
   SortSetting,

diff --git a/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx b/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx
@@ -188,6 +188,7 @@ const TagBadge = ({
         size="small"
         status={badgeStatus}
         icon={icon}
+        allowLowerCase={true}
       />
     </Button>
   );