feat(nav): mark TiDB for AI as beta (#708)

Author: qiancai

locale/en/translation.json

@@ -24,6 +24,7 @@
     "ai": "AI",
     "tidbForAI": "TiDB for AI",
     "developer": "Developer",
+    "developerGuide": "Developer Guide",
     "bestPractices": "Best Practices",
     "api": "API",
     "releases": "Releases",
@@ -41,7 +42,8 @@
     "tidbOperatorReleases": "TiDB Operator Releases",
     "tiupReleases": "TiUP Releases",
     "badge": {
-      "preview": "Preview"
+      "preview": "Preview",
+      "beta": "Beta"
     },
     "appdev": "App Dev",
     "asktug": "Forum",

locale/ja/translation.json

@@ -23,7 +23,8 @@
     "product": "製品",
     "ai": "AI",
     "tidbForAI": "TiDB for AI",
-    "developer": "開発者向け",
+    "developer": "開発者",
+    "developerGuide": "開発者ガイド",
     "bestPractices": "ベストプラクティス",
     "api": "API",
     "releases": "リリース",
@@ -41,7 +42,8 @@
     "tidbOperatorReleases": "TiDB Operator リリース",
     "tiupReleases": "TiUP リリース",
     "badge": {
-      "preview": "Preview"
+      "preview": "Preview",
+      "beta": "Beta"
     },
     "appdev": "アプリ開発",
     "asktug": "Forum",

locale/zh/translation.json

@@ -22,6 +22,7 @@
     "ai": "AI",
     "tidbForAI": "TiDB for AI",
     "developer": "应用开发",
+    "developerGuide": "应用开发",
     "bestPractices": "最佳实践",
     "api": "API",
     "releases": "发布记录",
@@ -39,7 +40,8 @@
     "tidbOperatorReleases": "TiDB Operator 版本发布记录",
     "tiupReleases": "TiUP 版本发布记录",
     "badge": {
-      "preview": "Preview"
+      "preview": "Preview",
+      "beta": "Beta"
     },
     "appdev": "开发指南",
     "asktug": "社区",

src/components/Layout/Header/HeaderNavConfigData.tsx

@@ -32,6 +32,24 @@ const PreviewBadge = (props: { label: string }) => {
   );
 };
 
+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
  */
@@ -134,13 +152,19 @@ const getDefaultNavConfig = (
   {
     type: "item",
     label: t("navbar.ai"),
-    leftNavLabel: t("navbar.tidbForAI"),
+    leftNavLabel: (
+      <>
+        {t("navbar.tidbForAI")}
+        <BetaTagBadge label={t("navbar.badge.beta")} />
+      </>
+    ),
     to: "/ai",
     selected: (namespace) => namespace === TOCNamespace.AI,
   },
   {
     type: "item",
     label: t("navbar.developer"),
+    leftNavLabel: t("navbar.developerGuide"),
     to: "/developer",
     selected: (namespace) => namespace === TOCNamespace.Develop,
   },

src/components/Layout/LeftNav/LeftNav.tsx

@@ -56,6 +56,59 @@ function shouldShowVersionSelect(
   );
 }
 
+function LeftNavTitle({ selectedNavItem }: { selectedNavItem: NavItemConfig }) {
+  const theme = useTheme();
+  const hasEndIcon =
+    selectedNavItem.endIcon !== null && selectedNavItem.endIcon !== undefined;
+
+  return (
+    <Box
+      sx={{
+        borderRadius: "4px",
+        "&:hover": {
+          backgroundColor: theme.palette.carbon[200],
+        },
+      }}
+    >
+      <LinkComponent
+        isI18n={selectedNavItem.isI18n ?? true}
+        to={selectedNavItem.to}
+        style={{ textDecoration: "none", display: "block" }}
+        onClick={() => {
+          clearAllNavStates();
+        }}
+      >
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{
+            fontSize: "18px",
+            fontWeight: 700,
+            color: theme.palette.carbon[900],
+            padding: "8px",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 1,
+          }}
+        >
+          {selectedNavItem.leftNavLabel ?? selectedNavItem.label}
+          {hasEndIcon && (
+            <Box
+              component="span"
+              sx={{
+                display: "inline-flex",
+                alignItems: "center",
+              }}
+            >
+              {selectedNavItem.endIcon}
+            </Box>
+          )}
+        </Typography>
+      </LinkComponent>
+    </Box>
+  );
+}
+
 export function LeftNavDesktop(props: LeftNavProps) {
   const {
     data,
@@ -67,7 +120,6 @@ export function LeftNavDesktop(props: LeftNavProps) {
     selectedNavItem,
     namespace,
   } = props;
-  const theme = useTheme();
 
   return (
     <Box
@@ -96,50 +148,7 @@ export function LeftNavDesktop(props: LeftNavProps) {
       >
         <LeftNavStickyContainer top={0} paddingTop="20px">
           {selectedNavItem && (
-            <Box
-              sx={{
-                borderRadius: "4px",
-                "&:hover": {
-                  backgroundColor: theme.palette.carbon[200],
-                },
-              }}
-            >
-              <LinkComponent
-                isI18n={selectedNavItem.isI18n ?? true}
-                to={selectedNavItem.to}
-                style={{ textDecoration: "none", display: "block" }}
-                onClick={() => {
-                  clearAllNavStates();
-                }}
-              >
-                <Typography
-                  variant="h6"
-                  component="div"
-                  sx={{
-                    fontSize: "18px",
-                    fontWeight: 700,
-                    color: theme.palette.carbon[900],
-                    padding: "8px",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 1,
-                  }}
-                >
-                  {selectedNavItem.leftNavLabel ?? selectedNavItem.label}
-                  {selectedNavItem.endIcon && (
-                    <Box
-                      component="span"
-                      sx={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                      }}
-                    >
-                      {selectedNavItem.endIcon}
-                    </Box>
-                  )}
-                </Typography>
-              </LinkComponent>
-            </Box>
+            <LeftNavTitle selectedNavItem={selectedNavItem} />
           )}
 
           {shouldShowVersionSelect(namespace, pathConfig.repo, buildType) && (
@@ -162,8 +171,16 @@ export function LeftNavDesktop(props: LeftNavProps) {
 }
 
 export function LeftNavMobile(props: LeftNavProps) {
-  const { data, current, name, pathConfig, availIn, buildType, namespace } =
-    props;
+  const {
+    data,
+    current,
+    name,
+    pathConfig,
+    availIn,
+    buildType,
+    namespace,
+    selectedNavItem,
+  } = props;
 
   const [open, setOpen] = React.useState(false);
 
@@ -224,6 +241,11 @@ export function LeftNavMobile(props: LeftNavProps) {
 
         <Divider />
         <Box sx={{ width: "17.125rem", padding: "1rem" }}>
+          {selectedNavItem && (
+            <Box sx={{ marginBottom: 1 }}>
+              <LeftNavTitle selectedNavItem={selectedNavItem} />
+            </Box>
+          )}
           <LeftNavTree data={data} current={current} />
         </Box>
       </Drawer>

src/templates/DocTemplate.tsx

@@ -215,6 +215,8 @@ function DocTemplate({
             pathConfig={pathConfig}
             availIn={availIn.version}
             availablePlans={availablePlans}
+            buildType={buildType}
+            selectedNavItem={selectedNavItem}
             namespace={namespace}
           />
         )