Feat plan render (#641)

* feat: integrate cloud plan support into MDXContent and CustomContent components

- Updated MDXContent to accept cloudPlan as a prop and pass it to useCustomContent.
- Enhanced useCustomContent to handle cloudPlan logic for conditional rendering.
- Modified CustomContent to include cloudPlan checks for display logic.
- Refactored useCloudPlan to ensure consistent type handling for cloudPlan across components.

* fix: enhance cloud plan display logic in CustomContent component

- Updated the logic in CustomContent to handle cloudPlan as an array, allowing for more flexible checks against the cloudPlanFromURL.
- Improved the readability and maintainability of the cloud plan display conditions.

* refactor: simplify conditional checks in CustomContent component

- Streamlined the logic for determining display conditions by removing unnecessary double negations in the checks for pageType, language, and cloudPlan.

Author: shhdgit

src/components/MDXComponents/CustomContent.tsx

@@ -1,15 +1,19 @@
 import { PropsWithChildren } from "react";
 import { PageType } from "shared/utils";
+import { CloudPlan } from "shared/useCloudPlan";
 
 interface CustomContentProps {
   platform?: "tidb" | "tidb-cloud";
   language?: string;
+  cloudPlan?: CloudPlan;
   pageTypeFromURL?: PageType;
   languageFromURL?: string;
+  cloudPlanFromURL?: CloudPlan | null;
 }
 
 export const useCustomContent = (
   pageTypeFromURL: PageType,
+  cloudPlanFromURL?: CloudPlan | null,
   languageFromURL?: string
 ) => {
   return (props: PropsWithChildren<CustomContentProps>) => {
@@ -18,6 +22,7 @@ export const useCustomContent = (
         {...props}
         pageTypeFromURL={pageTypeFromURL}
         languageFromURL={languageFromURL}
+        cloudPlanFromURL={cloudPlanFromURL}
       />
     );
   };
@@ -32,25 +37,27 @@ export const CustomContent: React.FC<PropsWithChildren<CustomContentProps>> = (
     children,
     languageFromURL,
     language,
+    cloudPlanFromURL,
+    cloudPlan,
   } = props;
   const pageType = _pageType?.replace("-", "") || "";
   const shouldDisplayByPageType = pageTypeFromURL === pageType;
 
+  const cloudPlanArray = cloudPlan?.split(",").map((plan) => plan.trim()) || [];
+  const shouldDisplayByCloudPlan = cloudPlanArray.includes(
+    cloudPlanFromURL || ""
+  );
+
   const languageArray = language
     ? language.split(",").map((lang) => lang.trim())
     : [];
   const shouldDisplayByLanguage = languageArray.includes(languageFromURL || "");
 
-  const onlyPageType = !!pageType && !language;
-  const onlyLanguage = !pageType && !!language;
-  const showOnlyPageType = onlyPageType && shouldDisplayByPageType;
-  const showOnlyLanguage = onlyLanguage && shouldDisplayByLanguage;
-  const showAll =
-    !!pageType &&
-    !!languageFromURL &&
-    shouldDisplayByPageType &&
-    shouldDisplayByLanguage;
-  const shouldDisplay = showOnlyPageType || showOnlyLanguage || showAll;
+  const isPageTypeMatch = !pageType || shouldDisplayByPageType;
+  const isLanguageMatch = !language || shouldDisplayByLanguage;
+  const isCloudPlanMatch = !cloudPlan || shouldDisplayByCloudPlan;
+
+  const shouldDisplay = isPageTypeMatch && isLanguageMatch && isCloudPlanMatch;
 
   return <>{shouldDisplay ? children : <></>}</>;
 };

src/components/MDXContent.tsx

@@ -14,6 +14,7 @@ import replaceInternalHref from "shared/utils/anchor";
 import { Pre } from "components/MDXComponents/Pre";
 import { useCustomContent } from "components/MDXComponents/CustomContent";
 import { getPageType } from "shared/utils";
+import { CloudPlan } from "shared/useCloudPlan";
 
 export default function MDXContent(props: {
   data: any;
@@ -26,6 +27,7 @@ export default function MDXContent(props: {
   language: string;
   buildType: BuildType;
   pageUrl: string;
+  cloudPlan: CloudPlan | null;
 }) {
   const {
     data,
@@ -38,10 +40,11 @@ export default function MDXContent(props: {
     language,
     buildType,
     pageUrl,
+    cloudPlan,
   } = props;
 
   const pageType = getPageType(language, pageUrl);
-  const CustomContent = useCustomContent(pageType, language);
+  const CustomContent = useCustomContent(pageType, cloudPlan, language);
   // const isAutoTranslation = useIsAutoTranslation(pageUrl || "");
 
   React.useEffect(() => {

src/shared/useCloudPlan.ts

@@ -13,10 +13,12 @@ export const CLOUD_MODE_KEY = "plan";
 export const CLOUD_MODE_VALUE_STARTER = "starter";
 export const CLOUD_MODE_VALUE_ESSENTIAL = "essential";
 
+export type CloudPlan = "dedicated" | "starter" | "essential";
+
 const CloudPlanContext = createContext<{
   repo: Repo;
-  cloudPlan: string | null;
-  setCloudPlan: Dispatch<SetStateAction<string | null>>;
+  cloudPlan: CloudPlan | null;
+  setCloudPlan: Dispatch<SetStateAction<CloudPlan | null>>;
 }>({
   repo: Repo.tidb,
   cloudPlan: null,
@@ -35,16 +37,17 @@ export const useCloudPlan = () => {
   const [isEssential, setIsEssential] = useState<boolean>(false);
   const [isClassic, setIsClassic] = useState<boolean>(true);
 
-  const setCloudPlan = (cloudPlan: string) => {
+  const setCloudPlan = (cloudPlan: CloudPlan) => {
     _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 || _cloudPlan;
+    const cloudPlan = (searchParams.get(CLOUD_MODE_KEY) ||
+      cloudPlanFromSession ||
+      _cloudPlan) as CloudPlan;
     const isStarter = isTidbcloud && cloudPlan === CLOUD_MODE_VALUE_STARTER;
     const isEssential = isTidbcloud && cloudPlan === CLOUD_MODE_VALUE_ESSENTIAL;
     const isClassic =

src/templates/DocTemplate.tsx

@@ -32,6 +32,7 @@ import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";
 import { DOC_HOME_URL } from "shared/resources";
 import { useReportReadingRate } from "shared/useReportReadingRate";
 import {
+  CloudPlan,
   CloudPlanProvider,
   useCloudPlan,
   useCloudPlanNavigate,
@@ -74,8 +75,8 @@ interface DocTemplateProps {
 }
 
 const DocTemplateWithProvider = (props: DocTemplateProps) => {
-  const [cloudPlan, setCloudPlan] = React.useState<string | null>(
-    props.pageContext.inDefaultPlan
+  const [cloudPlan, setCloudPlan] = React.useState<CloudPlan | null>(
+    props.pageContext.inDefaultPlan as CloudPlan | null
   );
   return (
     <CloudPlanProvider
@@ -112,7 +113,7 @@ function DocTemplate({
     essentialNavigation: essentialNav,
   } = data;
 
-  const { isStarter, isEssential } = useCloudPlan();
+  const { cloudPlan, isStarter, isEssential } = useCloudPlan();
   useCloudPlanNavigate(pathConfig.repo, inDefaultPlan);
   useReportReadingRate(timeToRead);
 
@@ -285,6 +286,7 @@ function DocTemplate({
                     language={language}
                     buildType={buildType}
                     pageUrl={pageUrl}
+                    cloudPlan={cloudPlan}
                   />
                   {!frontmatter?.hide_commit && buildType !== "archive" && (
                     <GitCommitInfoCard