refactor: integrate cloud plan logic into language switch component

- Added useCloudPlan to LangSwitch for enhanced language handling based on cloud plan status.
- Updated language button disabling logic to account for essential cloud plan, improving user experience.

Author: shhdgit

src/components/Layout/HeaderAction.tsx

@@ -21,6 +21,7 @@ import { Locale, BuildType } from "shared/interface";
 import { ActionButton } from "components/Card/FeedbackSection/components";
 import { Link } from "gatsby";
 import { useIsAutoTranslation } from "shared/useIsAutoTranslation";
+import { useCloudPlan } from "shared/useCloudPlan";
 
 const useTiDBAIStatus = () => {
   const [showTiDBAIButton, setShowTiDBAIButton] = React.useState(true);
@@ -123,6 +124,7 @@ const LangSwitch = (props: {
   supportedLocales: Locale[];
 }) => {
   const { supportedLocales } = props;
+  const { isEssential } = useCloudPlan();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -223,7 +225,7 @@ const LangSwitch = (props: {
           onClick={toggleLanguage(Locale.ja)}
           disableRipple
           selected={language === Locale.ja}
-          disabled={!supportedLocales.includes(Locale.ja)}
+          disabled={!supportedLocales.includes(Locale.ja) || isEssential}
         >
           <Typography component="span" color={theme.palette.carbon[900]}>
             <Trans i18nKey="lang.ja" />