feat(nav): render Preview badges consistently (#721)

qiancai · web-flow · commit 9ddc03feae3e · 2026-07-14T18:43:30.000+08:00
diff --git a/gatsby/__tests__/toc.test.ts b/gatsby/__tests__/toc.test.ts
@@ -0,0 +1,102 @@
+import { mdxAstToToc } from "../toc";
+
+describe("mdxAstToToc tag query parsing", () => {
+  it("does not emit a bogus ?undefined query when the image URL has no query string", () => {
+    const toc = mdxAstToToc(
+      [
+        {
+          type: "list",
+          children: [
+            {
+              type: "listItem",
+              children: [
+                {
+                  type: "paragraph",
+                  children: [
+                    { type: "text", value: "Data Service" },
+                    {
+                      type: "image",
+                      alt: "PREVIEW",
+                      url: "/media/tidb-cloud/blank_transparent_placeholder.png",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ] as any,
+      "en/tidbcloud/master/TOC"
+    );
+
+    expect(toc[0].tag).toEqual({
+      value: "PREVIEW",
+      query: undefined,
+    });
+  });
+
+  it("does not create a tag when the TOC image has no alt text", () => {
+    const toc = mdxAstToToc(
+      [
+        {
+          type: "list",
+          children: [
+            {
+              type: "listItem",
+              children: [
+                {
+                  type: "paragraph",
+                  children: [
+                    { type: "text", value: "Data Service" },
+                    {
+                      type: "image",
+                      alt: null,
+                      url: "/media/tidb-cloud/blank_transparent_placeholder.png",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ] as any,
+      "en/tidbcloud/master/TOC"
+    );
+
+    expect(toc[0].tag).toBeUndefined();
+  });
+
+  it("keeps tag query params when the image URL includes them", () => {
+    const toc = mdxAstToToc(
+      [
+        {
+          type: "list",
+          children: [
+            {
+              type: "listItem",
+              children: [
+                {
+                  type: "paragraph",
+                  children: [
+                    { type: "text", value: "Beta Feature" },
+                    {
+                      type: "image",
+                      alt: "BETA",
+                      url: "/media/tidb-cloud/blank_transparent_placeholder.png?color=%232d9cd2",
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ] as any,
+      "en/tidbcloud/master/TOC"
+    );
+
+    expect(toc[0].tag).toEqual({
+      value: "BETA",
+      query: "?color=%232d9cd2",
+    });
+  });
+});
diff --git a/gatsby/toc.ts b/gatsby/toc.ts
@@ -2,6 +2,7 @@ import {
   ListItem,
   List,
   Link,
+  Image,
   Paragraph,
   Text,
   Content,
@@ -157,11 +158,14 @@ function getContentFromLink(
 
   const child = content.children[0] as Link | Text;
   // use `image` as tag
-  const image = content.children.find((n) => n.type === "image");
-  const tag = image && {
-    value: image.alt!,
-    query: `?${image.url.split("?")[1]}`,
-  };
+  const image = content.children.find((n): n is Image => n.type === "image");
+  const imageQuery = image?.url.split("?")[1];
+  const tag = image?.alt
+    ? {
+        value: image.alt,
+        query: imageQuery ? `?${imageQuery}` : undefined,
+      }
+    : undefined;
 
   if (child.type === "link") {
     if (child.children.length === 0) {
diff --git a/locale/en/translation.json b/locale/en/translation.json
@@ -43,8 +43,7 @@
     "tidbOperatorReleases": "TiDB Operator Releases",
     "tiupReleases": "TiUP Releases",
     "badge": {
-      "preview": "Preview",
-      "beta": "Beta"
+      "preview": "Preview"
     },
     "appdev": "App Dev",
     "asktug": "Forum",
diff --git a/locale/ja/translation.json b/locale/ja/translation.json
@@ -43,8 +43,7 @@
     "tidbOperatorReleases": "TiDB Operator リリース",
     "tiupReleases": "TiUP リリース",
     "badge": {
-      "preview": "Preview",
-      "beta": "Beta"
+      "preview": "Preview"
     },
     "appdev": "アプリ開発",
     "asktug": "Forum",
diff --git a/locale/zh/translation.json b/locale/zh/translation.json
@@ -41,8 +41,7 @@
     "tidbOperatorReleases": "TiDB Operator 版本发布记录",
     "tiupReleases": "TiUP 版本发布记录",
     "badge": {
-      "preview": "Preview",
-      "beta": "Beta"
+      "preview": "Preview"
     },
     "appdev": "开发指南",
     "asktug": "社区",
diff --git a/src/components/Badge/PreviewBadge.tsx b/src/components/Badge/PreviewBadge.tsx
@@ -0,0 +1,32 @@
+import Chip from "@mui/material/Chip";
+import { useTheme } from "@mui/material/styles";
+
+const PreviewBadge = (props: { label: string }) => {
+  const theme = useTheme();
+
+  return (
+    <Chip
+      label={props.label}
+      size="small"
+      variant="outlined"
+      sx={{
+        height: "18px",
+        fontSize: "10px",
+        fontWeight: 500,
+        borderRadius: "1000px",
+        borderColor: theme.palette.carbon[400],
+        pointerEvents: "none",
+        textTransform: "uppercase",
+        letterSpacing: "0.25px",
+        "& .MuiChip-label": {
+          paddingLeft: "8px",
+          paddingRight: "8px",
+          lineHeight: "16px",
+          color: theme.palette.carbon[700],
+        },
+      }}
+    />
+  );
+};
+
+export default PreviewBadge;
diff --git a/src/components/Layout/Header/HeaderNavConfigData.tsx b/src/components/Layout/Header/HeaderNavConfigData.tsx
@@ -2,54 +2,11 @@ import { NavConfig } from "./HeaderNavConfigType";
 import { CLOUD_MODE_KEY } from "shared/useCloudPlan";
 import { CloudPlan, TOCNamespace } from "shared/interface";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import Chip from "@mui/material/Chip";
-import { useTheme } from "@mui/material/styles";
+import PreviewBadge from "components/Badge/PreviewBadge";
 
 import TiDBCloudIcon from "media/icons/cloud-03.svg";
 import TiDBIcon from "media/icons/layers-three-01.svg";
 
-const PreviewBadge = (props: { label: string }) => {
-  const theme = useTheme();
-  return (
-    <Chip
-      label={props.label}
-      size="small"
-      variant="outlined"
-      sx={{
-        height: "20px",
-        fontSize: "12px",
-        fontWeight: 400,
-        borderRadius: "10px",
-        pointerEvents: "none",
-        "& .MuiChip-label": {
-          paddingLeft: "8px",
-          paddingRight: "8px",
-          lineHeight: "20px",
-          color: theme.palette.carbon[700],
-        },
-      }}
-    />
-  );
-};
-
-const BetaTagBadge = (props: { label: string }) => (
-  <Chip
-    label={props.label}
-    variant="outlined"
-    size="small"
-    sx={{
-      flexShrink: 0,
-      textTransform: "uppercase",
-      pointerEvents: "none",
-      fontSize: "10px",
-      height: "20px",
-      borderColor: "#c0e1f1",
-      color: "#2d9cd2",
-      fontWeight: 500,
-    }}
-  />
-);
-
 /**
  * Default navigation configuration
  */
@@ -167,7 +124,7 @@ const getDefaultNavConfig = (
     leftNavLabel: (
       <>
         {t("navbar.tidbForAI")}
-        <BetaTagBadge label={t("navbar.badge.beta")} />
+        <PreviewBadge label={t("navbar.badge.preview")} />
       </>
     ),
     to: "/ai",
diff --git a/src/components/Layout/LeftNav/LeftNavTree.tsx b/src/components/Layout/LeftNav/LeftNavTree.tsx
@@ -7,9 +7,11 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "gatsby-plugin-react-i18next";
 
 import { RepoNavLink, RepoNav } from "shared/interface";
 import LinkComponent from "components/Link";
+import PreviewBadge from "components/Badge/PreviewBadge";
 import { scrollToElementIfInView } from "shared/utils";
 import { alpha, Chip } from "@mui/material";
 
@@ -190,6 +192,8 @@ export default function ControlledTreeView(props: {
   });
 
   const theme = useTheme();
+  const { t } = useTranslation();
+  const previewBadgeLabel = t("navbar.badge.preview");
   const [disableTransition, setDisableTransition] = React.useState(false);
   const previousUrlRef = React.useRef<string | null>(null);
 
@@ -313,7 +317,7 @@ export default function ControlledTreeView(props: {
             ) : (
               <Box sx={{ flexShrink: 0 }} width={16} height={16} />
             )}
-            {generateItemLabel(item)}
+            {generateItemLabel(item, previewBadgeLabel)}
           </Stack>
         );
       };
@@ -389,10 +393,22 @@ export default function ControlledTreeView(props: {
   );
 }
 
-const generateItemLabel = ({ content: contents, tag }: RepoNavLink) => {
-  const tagQuery = new URLSearchParams(tag?.query);
-  const tagColor = tagQuery.get("color");
-  const tagColor02 = tagColor && alpha(tagColor, 0.2);
+const generateItemLabel = (
+  { content: contents, tag }: RepoNavLink,
+  previewBadgeLabel: string
+) => {
+  const normalizedTagValue = tag?.value?.trim().toUpperCase();
+  const isPreviewTag = normalizedTagValue === "PREVIEW";
+  let tagColor: string | null = null;
+  let tagColor02: string | null = null;
+
+  // PREVIEW intentionally ignores source color overrides to match shared badges.
+  if (tag && !isPreviewTag) {
+    const tagQuery = new URLSearchParams(tag.query ?? "");
+    tagColor = tagQuery.get("color");
+    tagColor02 = tagColor ? alpha(tagColor, 0.2) : null;
+  }
+
   return (
     <Stack sx={{ width: "100%" }} direction="row" gap="4px">
       <Box
@@ -422,7 +438,9 @@ const generateItemLabel = ({ content: contents, tag }: RepoNavLink) => {
           );
         })}
       </Box>
-      {tag && (
+      {tag && isPreviewTag ? (
+        <PreviewBadge label={previewBadgeLabel} />
+      ) : tag ? (
         <Chip
           label={tag.value}
           variant="outlined"
@@ -438,7 +456,7 @@ const generateItemLabel = ({ content: contents, tag }: RepoNavLink) => {
             fontWeight: 500,
           }}
         />
-      )}
+      ) : null}
     </Stack>
   );
 };
diff --git a/src/components/Layout/VersionSelect/CloudVersionSelect.tsx b/src/components/Layout/VersionSelect/CloudVersionSelect.tsx
@@ -42,11 +42,20 @@ const CLOUD_VERSIONS = [
         variant="outlined"
         size="small"
         sx={{
-          fontSize: "12px",
-          height: "20px",
+          fontSize: "10px",
+          fontWeight: 500,
+          height: "18px",
+          borderRadius: "1000px",
           pointerEvents: "none",
           borderColor: "#DCE3E5",
           color: "#6F787B",
+          textTransform: "uppercase",
+          letterSpacing: "0.25px",
+          "& .MuiChip-label": {
+            paddingLeft: "8px",
+            paddingRight: "8px",
+            lineHeight: "16px",
+          },
         }}
       />
     ),
