feat(lint): Add rule to validate i18next usage

package.json

@@ -80,6 +80,7 @@
     "cypress": "^14.1.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-typescript": "^4.1.1",
+    "eslint-plugin-i18next": "^6.1.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest-dom": "5.5.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

public/locales/en.json

@@ -81,6 +81,7 @@
     "detailsLabel": "Details:"
   },
   "CopyKubeconfigButton": {
+    "kubeconfigButton": "Kubeconfig",
     "copiedMessage": "Copied to Clipboard",
     "failedMessage": "Failed to copy, Error:",
     "menuDownload": "Download",
@@ -97,7 +98,10 @@
     "navigateHome": "Back to Homepage"
   },
   "IntelligentBreadcrumbs": {
-    "homeLabel": "Home"
+    "homeLabel": "Home",
+    "projects": "Projects",
+    "workspaces": "Workspaces",
+    "mcps": "MCPs"
   },
   "MCPContext": {
     "errorMessage": "An unknown error occurred"
@@ -107,6 +111,7 @@
     "subtitleMessage": "Looks like this page is not opened inside of the Hyperspace Portal. Contact admins for help."
   },
   "ShellBar": {
+    "betaButton": "Beta",
     "betaButtonDescription": "This web app is currently in Beta, and may not be ready for productive use. We're actively improving the experience and would love your feedback — your input helps shape the future of the app!",
     "signOutButton": "Sign Out",
     "feedbackMessageLabel": "Message",

src/components/ControlPlanes/CopyKubeconfigButton.tsx

@@ -26,7 +26,7 @@ export default function CopyKubeconfigButton() {
   return (
     <>
       <Button icon="slim-arrow-down" icon-end onClick={handleOpenerClick}>
-        Kubeconfig
+        {t('CopyKubeconfigButton.kubeconfigButton')}
       </Button>
       <Menu
         ref={popoverRef}

src/components/Core/IntelligentBreadcrumbs.tsx

@@ -30,15 +30,19 @@ export default function IntelligentBreadcrumbs() {
         </BreadcrumbsItem>
         {projectName && (
           <>
-            <BreadcrumbsItem href={`${PREFIX}/projects`}>Projects</BreadcrumbsItem>
+            <BreadcrumbsItem href={`${PREFIX}/projects`}>{t('IntelligentBreadcrumbs.projects')}</BreadcrumbsItem>
             <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>{projectName}</BreadcrumbsItem>
             {workspaceName && (
               <>
-                <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>Workspaces</BreadcrumbsItem>
+                <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>
+                  {t('IntelligentBreadcrumbs.workspaces')}
+                </BreadcrumbsItem>
                 <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>{workspaceName}</BreadcrumbsItem>
                 {controlPlaneName && (
                   <>
-                    <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>MCPs</BreadcrumbsItem>
+                    <BreadcrumbsItem href={`${PREFIX}/projects/${projectName}`}>
+                      {t('IntelligentBreadcrumbs.mcps')}
+                    </BreadcrumbsItem>
                     <BreadcrumbsItem
                       href={`${PREFIX}/projects/${projectName}/workspaces/${workspaceName}/mcps/${controlPlaneName}`}
                     >

src/components/Core/ShellBar.tsx

@@ -47,6 +47,7 @@ export function ShellBarComponent() {
   const betaButtonRef = useRef<ButtonDomRef>(null);
 
   const { user } = useAuthOnboarding();
+  const { t } = useTranslation();
 
   const onProfileClick = (e: Ui5CustomEvent<ShellBarDomRef, ShellBarProfileClickEventDetail>) => {
     profilePopoverRef.current!.opener = e.detail.targetRef;
@@ -115,7 +116,7 @@ export function ShellBarComponent() {
             <Button ref={betaButtonRef} className={styles.betaButton} onClick={onBetaClick}>
               <span className={styles.betaContent}>
                 <Icon name="information" className={styles.betaIcon} />
-                <span className={styles.betaText}>Beta</span>
+                <span className={styles.betaText}>{t('ShellBar.betaButton')}</span>
               </span>
             </Button>
           </div>

src/components/Dialogs/KubectlCommandInfo/KubectlBaseDialog.tsx

@@ -84,7 +84,7 @@ export const KubectlBaseDialog = ({
       headerText={title}
       open={open}
       style={{ width: '550px' }}
-      footer={<Bar endContent={<Button onClick={onClose}>Close</Button>} />}
+      footer={<Bar endContent={<Button onClick={onClose}>{t('common.close')}</Button>} />}
       onClose={onClose}
     >
       <FlexBox direction="Column" style={{ gap: '16px' }}>

src/components/Dialogs/KubectlCommandInfo/KubectlTerminal.tsx

@@ -35,6 +35,7 @@ export const KubectlTerminal = ({ command }: KubeCtlTerminalProps) => {
 
       return (
         <>
+          {/* eslint-disable-next-line i18next/no-literal-string */}
           <span>echo &apos;</span>
           <div style={{ marginLeft: '16px' }}>{yamlLines}</div>
           <span>&apos;</span> | <span>{kubectlPart}</span>
@@ -94,6 +95,7 @@ export const KubectlTerminal = ({ command }: KubeCtlTerminalProps) => {
       </FlexBox>
 
       <div style={{ padding: '12px 16px', overflowX: 'auto' }}>
+        {/* eslint-disable-next-line i18next/no-literal-string */}
         <span style={{ marginRight: '8px' }}>❯</span>
         {FormattedCommand()}
       </div>