Merge branch 'main' into feat/1169-semantic-validation

Author: mwojtyczka

app/package.json

@@ -25,12 +25,15 @@
     "axios": "^1.13.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "i18next": "^26.0.8",
+    "i18next-browser-languagedetector": "^8.2.1",
     "js-yaml": "^4.1.1",
     "lucide-react": "^0.548.0",
     "motion": "^12.23.24",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
+    "react-i18next": "^17.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.4.0"

app/src/databricks_labs_dqx_app/ui/CLAUDE.md

@@ -33,7 +33,8 @@ ui/
 │   ├── api.ts                  # ⚠️ AUTO-GENERATED by orval — types + React Query hooks
 │   ├── axios-config.ts         # Axios interceptor (error logging)
 │   ├── utils.ts                # cn() — clsx + tailwind-merge
-│   └── selector.ts             # Extracts .data from React Query responses
+│   ├── selector.ts             # Extracts .data from React Query responses
+│   └── i18n/                   # react-i18next setup + locales/*.json (en, pt-BR, it, es)
 ├── hooks/
 │   └── use-mobile.ts           # Mobile viewport detection
 ├── styles/
@@ -71,6 +72,7 @@ Route tree regenerates automatically when the APX dev server is running (it runs
 - **Lucide React** — icons
 - **Motion** — animations
 - **Sonner** — toast notifications
+- **react-i18next** — internationalization (see [Internationalization (i18n)](#internationalization-i18n))
 - **js-yaml** — YAML parsing for config editing
 
 ## Commands
@@ -124,6 +126,15 @@ npm run preview   # Preview production build
 - Use `cn()` from `@/lib/utils` for conditional class merging
 - Wrap async data components in `Suspense` + error boundaries
 
+### Internationalization (i18n)
+
+The UI is fully localized with **react-i18next**. Locale bundles live in `lib/i18n/locales/*.json`. **Any user-facing string must be translated — never hard-code display text.**
+
+- **Use `t()` for all display text.** Get it from `useTranslation()` (`const { t } = useTranslation()`); reference strings by key (`t("discovery.title")`), never as literals in JSX. This includes `toast` messages, `aria-label`s, placeholders, and error strings.
+- **Add every new key to all four locales** — `en.json`, `pt-BR.json`, `it.json`, `es.json`. `en.json` is the source of truth. A key present in `en` but missing from the others falls back to English at runtime (a silent partial-translation bug), so keep the key sets in sync and translate the value in each file — don't leave the English string behind in a non-English file.
+- **Pluralize with native i18next, not string concatenation.** Use `_one` / `_other` suffix keys with `{{count}}` (e.g. `columnsCount_one` / `columnsCount_other`). Never build plurals with a hard-coded `"s"` suffix or an interpolated `{{somethingPlural}}` placeholder — that bakes English grammar into the translation layer and breaks other locales.
+- **Adding a new language:** add it to `SUPPORTED_LANGUAGES` and register a loader in `localeLoaders` (both in `lib/i18n/index.ts`), then create the matching `locales/<code>.json`. Only `en` ships in the initial JS bundle; other locales lazy-load on demand via `ensureLocaleLoaded`, so don't statically import them.
+
 ## Vite Config Notes
 
 - **APX Dev Proxy Guard**: Validates `x-apx-dev-proxy` header in dev mode

app/src/databricks_labs_dqx_app/ui/components/AIAssistantProvider.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
 import { Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import {
   Sheet,
@@ -32,6 +33,7 @@ export function useAIAssistant() {
 }
 
 export function AIAssistantTrigger() {
+  const { t } = useTranslation();
   const { setOpen } = useAIAssistant();
   return (
     <Button
@@ -41,12 +43,13 @@ export function AIAssistantTrigger() {
       className="gap-2"
     >
       <Sparkles className="h-4 w-4" />
-      <span className="hidden sm:inline">AI Rules Assistant</span>
+      <span className="hidden sm:inline">{t("navbar.aiAssistant")}</span>
     </Button>
   );
 }
 
 export function AIAssistantProvider({ children }: { children: ReactNode }) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [isGenerating, setIsGenerating] = useState(false);
   const [runContext, setRunContext] = useState<RunContext | null>(null);
@@ -71,9 +74,9 @@ export function AIAssistantProvider({ children }: { children: ReactNode }) {
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent side="right" className="sm:max-w-lg w-[500px] p-0">
           <SheetHeader className="sr-only">
-            <SheetTitle>AI Rules Assistant</SheetTitle>
+            <SheetTitle>{t("aiAssistant.title")}</SheetTitle>
             <SheetDescription>
-              Generate data quality rules using AI
+              {t("aiAssistant.description")}
             </SheetDescription>
           </SheetHeader>
           <AICheckGenerator

app/src/databricks_labs_dqx_app/ui/components/AICheckGenerator.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Card } from "@/components/ui/card";
@@ -16,30 +17,31 @@ interface AICheckGeneratorProps {
 }
 
 export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AICheckGeneratorProps) {
+  const { t } = useTranslation();
   const [userInput, setUserInput] = useState("");
   const [generatedYaml, setGeneratedYaml] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
   const handleGenerate = async () => {
     if (!userInput.trim()) {
-      toast.error("Please enter a description of your data quality requirements");
+      toast.error(t("aiCheckGenerator.enterDescriptionFirst"));
       return;
     }
 
     try {
       const result = await onGenerate(userInput, runContext?.yaml);
       setGeneratedYaml(result.yaml_output);
-      toast.success("Checks generated successfully!");
+      toast.success(t("aiCheckGenerator.checksGenerated"));
     } catch (error) {
-      toast.error("Failed to generate checks. Please try again.");
+      toast.error(t("aiCheckGenerator.failedGenerate"));
     }
   };
 
   const handleCopy = () => {
     if (generatedYaml) {
       navigator.clipboard.writeText(generatedYaml);
       setCopied(true);
-      toast.success("YAML copied to clipboard");
+      toast.success(t("aiCheckGenerator.yamlCopied"));
       setTimeout(() => setCopied(false), 2000);
     }
   };
@@ -59,9 +61,9 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
           <Sparkles className="h-5 w-5 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
-          <h2 className="text-lg font-bold">AI-Assisted Rules Generation</h2>
+          <h2 className="text-lg font-bold">{t("aiCheckGenerator.title")}</h2>
           <p className="text-sm text-muted-foreground">
-            Describe your data quality needs
+            {t("aiCheckGenerator.subtitle")}
           </p>
         </div>
       </div>
@@ -71,7 +73,7 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
         <div className="mb-3">
           <Badge variant="secondary" className="gap-1.5 text-xs font-normal">
             <FileCode className="h-3 w-3" />
-            Using context from: {runContext.runName}
+            {t("aiCheckGenerator.usingContextFrom", { name: runContext.runName })}
           </Badge>
         </div>
       )}
@@ -90,7 +92,7 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
             >
               <div className="flex items-center justify-between mb-2">
                 <h3 className="text-sm font-semibold text-muted-foreground">
-                  Generated Checks
+                  {t("aiCheckGenerator.generatedChecks")}
                 </h3>
                 <Button
                   size="sm"
@@ -101,12 +103,12 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
                   {copied ? (
                     <>
                       <Check className="h-3 w-3" />
-                      Copied
+                      {t("aiCheckGenerator.copied")}
                     </>
                   ) : (
                     <>
                       <Copy className="h-3 w-3" />
-                      Copy
+                      {t("aiCheckGenerator.copy")}
                     </>
                   )}
                 </Button>
@@ -129,11 +131,11 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
               <div className="text-center space-y-4 text-muted-foreground">
                 <Sparkles className="h-16 w-16 mx-auto opacity-20" />
                 <div>
-                  <p className="font-medium">No rules generated yet</p>
+                  <p className="font-medium">{t("aiCheckGenerator.noRulesYet")}</p>
                   <p className="text-sm">
                     {runContext
-                      ? `Enter requirements for "${runContext.runName}" to get started`
-                      : "Enter your requirements below to get started"}
+                      ? t("aiCheckGenerator.enterRequirementsContext", { name: runContext.runName })
+                      : t("aiCheckGenerator.enterRequirements")}
                   </p>
                 </div>
               </div>
@@ -151,8 +153,8 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
             onKeyDown={handleKeyDown}
             placeholder={
               runContext
-                ? `Describe rules for "${runContext.runName}"...`
-                : "Example: Sales amount must be positive"
+                ? t("aiCheckGenerator.describeRulesContext", { name: runContext.runName })
+                : t("aiCheckGenerator.examplePlaceholder")
             }
             className="min-h-[100px] resize-none pr-12 bg-card/50 backdrop-blur-sm"
             disabled={isGenerating}
@@ -173,8 +175,8 @@ export function AICheckGenerator({ onGenerate, isGenerating, runContext }: AIChe
           </div>
         </div>
         <p className="text-xs text-muted-foreground">
-          Press <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">Enter</kbd> to generate or{" "}
-          <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">Shift+Enter</kbd> for a new line
+          <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">Enter</kbd> {t("aiCheckGenerator.kbdHint")}{" "}
+          <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">Shift+Enter</kbd> {t("aiCheckGenerator.kbdHintSuffix")}
         </p>
       </div>
     </div>

app/src/databricks_labs_dqx_app/ui/components/AuthGuard.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import axios from "axios";
 import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { currentUser } from "@/lib/api";
 
 interface AuthGuardProps {
@@ -16,10 +17,16 @@ interface AuthGuardProps {
  * with the backend OpenAPI spec.
  */
 export function AuthGuard({ children }: AuthGuardProps) {
+  const { t } = useTranslation();
+  const tRef = useRef(t);
   const [isAuthReady, setIsAuthReady] = useState(false);
   const [retryCount, setRetryCount] = useState(0);
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    tRef.current = t;
+  }, [t]);
+
   useEffect(() => {
     let cancelled = false;
     let timeoutId: NodeJS.Timeout;
@@ -36,7 +43,7 @@ export function AuthGuard({ children }: AuthGuardProps) {
 
         if (retryCount < 15) {
           const delay = Math.min(1000 * Math.pow(1.3, retryCount), 3000);
-          
+
           timeoutId = setTimeout(() => {
             if (!cancelled) {
               setRetryCount((prev) => prev + 1);
@@ -45,14 +52,17 @@ export function AuthGuard({ children }: AuthGuardProps) {
         } else {
           const errorMessage = axios.isAxiosError(err)
             ? err.response?.status === 401
-              ? "Authentication timeout. The authentication flow did not complete."
-              : `Server error (${err.response?.status}): ${err.response?.statusText || err.message}`
+              ? tRef.current("auth.timeoutMessage")
+              : tRef.current("auth.serverErrorMessage", {
+                  status: err.response?.status ?? "",
+                  statusText: err.response?.statusText || err.message,
+                })
             : err instanceof Error
             ? err.message
-            : "Unknown connection error";
-          
+            : tRef.current("auth.unknownError");
+
           setError(
-            `${errorMessage}\n\nPlease refresh the page or contact your administrator if the problem persists.`
+            `${errorMessage}${tRef.current("auth.errorSuffix")}`
           );
         }
       }
@@ -88,14 +98,14 @@ export function AuthGuard({ children }: AuthGuardProps) {
       <div className="flex items-center justify-center min-h-screen bg-background">
         <div className="text-center space-y-4 p-8 max-w-md">
           <div className="text-destructive text-lg font-semibold">
-            Authentication Error
+            {t("auth.errorTitle")}
           </div>
           <p className="text-muted-foreground">{error}</p>
           <button
             onClick={() => window.location.reload()}
             className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
           >
-            Refresh Page
+            {t("auth.refreshPage")}
           </button>
         </div>
       </div>
@@ -108,9 +118,9 @@ export function AuthGuard({ children }: AuthGuardProps) {
       <div className="flex items-center justify-center min-h-screen bg-background">
         <div className="text-center space-y-4">
           <Loader2 className="h-12 w-12 animate-spin text-primary mx-auto" />
-          <div className="text-lg font-medium">Initializing DQX Studio...</div>
+          <div className="text-lg font-medium">{t("auth.loadingMessage")}</div>
           <p className="text-sm text-muted-foreground">
-            Setting up your workspace connection
+            {t("auth.loadingDescription")}
           </p>
         </div>
       </div>