feat: implement cloud plan management and update related components

- Introduced a new useCloudPlan hook and context for managing cloud plan state across the application.
- Replaced useCloudMode with useCloudPlan in various components, including HeaderAction, CloudVersionSelect, and DocTemplate, to streamline cloud plan handling.
- Added scripts in gatsby-ssr.js to manage cloud plan state based on URL parameters and update UI elements accordingly.
- Removed the deprecated useCloudMode hook and updated related imports to enhance code clarity and maintainability.

Author: shhdgit

gatsby-ssr.js

@@ -1,5 +1,7 @@
 export { default as wrapRootElement } from "./src/state/wrap-with-provider";
+import { CLOUD_PLAN_LABEL_ELEMENT_ID } from "components/Layout/VersionSelect/CloudVersionSelect";
 import docsJson from "./docs/docs.json";
+import { GLOBAL_STATE_CLOUD_PLAN_KEY } from "./src/shared/useCloudPlan";
 
 // https://github.com/gatsbyjs/gatsby/issues/1526
 export const onPreRenderHTML = ({ getHeadComponents }) => {
@@ -79,6 +81,25 @@ const redirectScript = `
 })();
 `;
 
+const cloudPlanScript = `
+(function() {
+  const searchParams = new URLSearchParams(location.search);
+  const cloudMode = searchParams.get("plan");
+  if (cloudMode) {
+    window["${GLOBAL_STATE_CLOUD_PLAN_KEY}"] = cloudMode;
+  }
+})();
+`;
+
+const fulfillCloudPlanScript = `
+(function() {
+  const cloudPlanLabel = document.getElementById("${CLOUD_PLAN_LABEL_ELEMENT_ID}");
+  if (cloudPlanLabel) {
+    cloudPlanLabel.textContent = cloudMode;
+  }
+})();
+`;
+
 export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
   setHeadComponents([
     <link
@@ -113,6 +134,10 @@ export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
       type="font/woff2"
       crossOrigin="anonymous"
     />,
+    <script
+      key="cloud-plan"
+      dangerouslySetInnerHTML={{ __html: cloudPlanScript }}
+    />,
   ]);
   setPostBodyComponents([
     <script key="deprecated" dangerouslySetInnerHTML={{ __html: script }} />,
@@ -128,5 +153,9 @@ export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
       data-chat-engine="pingcap-doc"
       data-measurement-id="G-GRPCMS37RV"
     />,
+    <script
+      key="fulfill-cloud-plan"
+      dangerouslySetInnerHTML={{ __html: fulfillCloudPlanScript }}
+    />,
   ]);
 };

src/components/Layout/Header.tsx

@@ -85,7 +85,6 @@ export default function Header(props: HeaderProps) {
           docInfo={props.docInfo}
           buildType={props.buildType}
           pageUrl={props.pageUrl}
-          pathConfig={props.pathConfig}
         />
       </Toolbar>
     </AppBar>

src/components/Layout/HeaderAction.tsx

@@ -21,7 +21,7 @@ import { Locale, BuildType, PathConfig, Repo } from "shared/interface";
 import { ActionButton } from "components/Card/FeedbackSection/components";
 import { Link } from "gatsby";
 import { useIsAutoTranslation } from "shared/useIsAutoTranslation";
-import { useCloudMode } from "shared/useCloudMode";
+import { useCloudPlan } from "shared/useCloudPlan";
 
 const useTiDBAIStatus = () => {
   const [showTiDBAIButton, setShowTiDBAIButton] = React.useState(true);
@@ -63,9 +63,8 @@ export default function HeaderAction(props: {
   docInfo?: { type: string; version: string };
   buildType?: BuildType;
   pageUrl?: string;
-  pathConfig?: PathConfig;
 }) {
-  const { supportedLocales, docInfo, buildType, pageUrl, pathConfig } = props;
+  const { supportedLocales, docInfo, buildType, pageUrl } = props;
   const { language, t } = useI18next();
   const { showTiDBAIButton, initializingTiDBAI } = useTiDBAIStatus();
   const isAutoTranslation = useIsAutoTranslation(pageUrl || "");
@@ -80,10 +79,7 @@ export default function HeaderAction(props: {
       sx={{ marginLeft: "auto", alignItems: "center" }}
     >
       {supportedLocales.length > 0 && (
-        <LangSwitch
-          supportedLocales={supportedLocales}
-          pathConfig={pathConfig}
-        />
+        <LangSwitch supportedLocales={supportedLocales} />
       )}
       {docInfo && !isAutoTranslation && buildType !== "archive" && (
         <>
@@ -126,15 +122,14 @@ const LangSwitch = (props: {
   language?: string;
   changeLanguage?: () => void;
   supportedLocales: Locale[];
-  pathConfig?: PathConfig;
 }) => {
-  const { supportedLocales, pathConfig } = props;
+  const { supportedLocales } = props;
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const theme = useTheme();
   const { language, changeLanguage } = useI18next();
-  const { isClassic } = useCloudMode(pathConfig?.repo || Repo.tidb);
+  const { isClassic } = useCloudPlan();
 
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {

src/components/Layout/VersionSelect/CloudVersionSelect.tsx

@@ -8,9 +8,11 @@ import { AllVersion } from "shared/utils";
 import LinkComponent from "components/Link";
 import { Box, Typography } from "@mui/material";
 import { Chip } from "@mui/material";
-import { CLOUD_MODE_KEY, useCloudMode } from "shared/useCloudMode";
+import { CLOUD_MODE_KEY, useCloudPlan } from "shared/useCloudPlan";
 import { VersionSelectButton, VersionSelectMenu } from "./SharedSelect";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
+
+export const CLOUD_PLAN_LABEL_ELEMENT_ID = "cloud-plan-label";
 
 const CLOUD_VERSIONS = [
   {
@@ -54,9 +56,9 @@ const VersionItems = (props: {
   availablePlans: string[];
 }) => {
   const { pathConfig } = props;
-  const { cloudMode } = useCloudMode(pathConfig.repo);
+  const { cloudPlan, setCloudPlan } = useCloudPlan();
   const currentCloudVersion =
-    CLOUD_VERSIONS.find((version) => version.value === cloudMode) ||
+    CLOUD_VERSIONS.find((version) => version.value === cloudPlan) ||
     CLOUD_VERSIONS[0];
 
   const getToUrl = (version: string) => {
@@ -67,7 +69,7 @@ const VersionItems = (props: {
       : `/${pathConfig.repo}/${version}/?${searchParams.toString()}`;
   };
   const onClick = (version: string) => {
-    sessionStorage.setItem(CLOUD_MODE_KEY, version);
+    setCloudPlan(version);
     props.onClick();
   };
 
@@ -121,14 +123,21 @@ interface VersionSelectProps {
 
 export default function CloudVersionSelect(props: VersionSelectProps) {
   const { name, pathConfig, availIn, availablePlans } = props;
-  const { cloudMode } = useCloudMode(pathConfig.repo);
+  const { cloudPlan } = useCloudPlan();
   const currentCloudVersion =
-    CLOUD_VERSIONS.find((version) => version.value === cloudMode) ||
+    CLOUD_VERSIONS.find((version) => version.value === cloudPlan) ||
     CLOUD_VERSIONS[0];
   const anchorEl = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = React.useState<boolean>(false);
   const handleClick = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const labelRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (labelRef.current && currentCloudVersion.label) {
+      labelRef.current.textContent = currentCloudVersion.label as string;
+    }
+  }, [currentCloudVersion]);
 
   return (
     <>
@@ -142,7 +151,7 @@ export default function CloudVersionSelect(props: VersionSelectProps) {
               lineHeight: "1.25rem",
             }}
           >
-            {currentCloudVersion?.label}
+            <span id={CLOUD_PLAN_LABEL_ELEMENT_ID} ref={labelRef}></span>
           </Typography>
           {currentCloudVersion?.icon}
         </Box>

src/shared/useCloudMode.ts

@@ -0,0 +1,83 @@
+import { navigate } from "gatsby";
+import {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { Repo } from "./interface";
+
+export const CLOUD_MODE_KEY = "plan";
+export const CLOUD_MODE_VALUE_STARTER = "starter";
+export const CLOUD_MODE_VALUE_ESSENTIAL = "essential";
+export const GLOBAL_STATE_CLOUD_PLAN_KEY =
+  "__TIDB_DOCS_GLOBAL_STATE_CLOUD_PLAN__";
+
+const CloudPlanContext = createContext<{
+  repo: Repo;
+  cloudPlan: string | null;
+  setCloudPlan: Dispatch<SetStateAction<string | null>>;
+}>({
+  repo: Repo.tidb,
+  cloudPlan: null,
+  setCloudPlan: () => {},
+});
+export const CloudPlanProvider = CloudPlanContext.Provider;
+
+export const useCloudPlan = () => {
+  const {
+    cloudPlan,
+    setCloudPlan: _setCloudPlan,
+    repo,
+  } = useContext(CloudPlanContext);
+  const isTidbcloud = repo === Repo.tidbcloud;
+  const [isStarter, setIsStarter] = useState<boolean>(false);
+  const [isEssential, setIsEssential] = useState<boolean>(false);
+  const [isClassic, setIsClassic] = useState<boolean>(true);
+
+  const setCloudPlan = (cloudPlan: string) => {
+    _setCloudPlan(cloudPlan);
+    sessionStorage.setItem(CLOUD_MODE_KEY, cloudPlan);
+  };
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const cloudPlanFromSession = sessionStorage.getItem(CLOUD_MODE_KEY);
+    const cloudPlan = searchParams.get(CLOUD_MODE_KEY) || cloudPlanFromSession;
+    const isStarter = isTidbcloud && cloudPlan === CLOUD_MODE_VALUE_STARTER;
+    const isEssential = isTidbcloud && cloudPlan === CLOUD_MODE_VALUE_ESSENTIAL;
+    const isClassic =
+      !isTidbcloud || !cloudPlan || (!isStarter && !isEssential);
+
+    _setCloudPlan(cloudPlan);
+    setIsStarter(isStarter);
+    setIsEssential(isEssential);
+    setIsClassic(isClassic);
+  }, []);
+
+  return {
+    cloudPlan,
+    setCloudPlan,
+    isStarter,
+    isEssential,
+    isClassic,
+  };
+};
+
+export const useCloudPlanNavigate = () => {
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const cloudModeFromSession = sessionStorage.getItem(CLOUD_MODE_KEY);
+    const cloudMode = searchParams.get(CLOUD_MODE_KEY) || cloudModeFromSession;
+
+    if (!!cloudMode && cloudMode !== "dedicated") {
+      navigate(
+        `${location.pathname}?${CLOUD_MODE_KEY}=${cloudMode}${
+          location.hash ? location.hash : ""
+        }`
+      );
+    }
+  }, []);
+};

src/shared/useCloudPlan.ts

@@ -31,7 +31,11 @@ import { FeedbackSection } from "components/Card/FeedbackSection";
 import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";
 import { DOC_HOME_URL } from "shared/resources";
 import { useReportReadingRate } from "shared/useReportReadingRate";
-import { useCloudMode } from "shared/useCloudMode";
+import {
+  CloudPlanProvider,
+  useCloudPlan,
+  useCloudPlanNavigate,
+} from "shared/useCloudPlan";
 
 interface DocTemplateProps {
   pageContext: PageContext & {
@@ -67,7 +71,24 @@ interface DocTemplateProps {
   };
 }
 
-export default function DocTemplate({
+const DocTemplateWithProvider = (props: DocTemplateProps) => {
+  const [cloudPlan, setCloudPlan] = React.useState<string | null>(null);
+  return (
+    <CloudPlanProvider
+      value={{
+        cloudPlan,
+        setCloudPlan,
+        repo: props.pageContext.pathConfig.repo,
+      }}
+    >
+      <DocTemplate {...props} />
+    </CloudPlanProvider>
+  );
+};
+
+export default DocTemplateWithProvider;
+
+function DocTemplate({
   pageContext: {
     name,
     availIn,
@@ -86,8 +107,8 @@ export default function DocTemplate({
     essentialNavigation: essentialNav,
   } = data;
 
-  const { isStarter, isEssential } = useCloudMode(pathConfig.repo);
-
+  const { isStarter, isEssential } = useCloudPlan();
+  useCloudPlanNavigate();
   useReportReadingRate(timeToRead);
 
   const classicNavigation = originNav ? originNav.navigation : [];