Localize shared blocker guidance

webui/src/components/ActionBlockerHint.tsx

@@ -11,17 +11,30 @@ export type ActionBlockerReason = {
   technicalDetails?: ReactNode;
 };
 
+export type ActionBlockerLabels = {
+  requiredAction?: ReactNode;
+  actor?: ReactNode;
+  target?: ReactNode;
+  technicalDetails?: ReactNode;
+};
+
 type ActionBlockerHintProps = {
   reason: ActionBlockerReason;
   tone?: "info" | "warning" | "danger";
   className?: string;
+  labels?: ActionBlockerLabels;
 };
 
 function joinClasses(...classes: Array<string | undefined | false>) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function ActionBlockerHint({ reason, tone = "warning", className = "" }: ActionBlockerHintProps) {
+export default function ActionBlockerHint({
+  reason,
+  tone = "warning",
+  className = "",
+  labels = {}
+}: ActionBlockerHintProps) {
   const Icon = tone === "info" ? Info : AlertTriangle;
   const hasActionRows = Boolean(reason.requiredAction || reason.actor || reason.target);
 
@@ -35,26 +48,26 @@ export default function ActionBlockerHint({ reason, tone = "warning", className
           <dl>
             {reason.requiredAction && (
               <>
-                <dt>Required action</dt>
+                <dt>{labels.requiredAction ?? "Required action"}</dt>
                 <dd>{reason.requiredAction}</dd>
               </>
             )}
             {reason.actor && (
               <>
-                <dt>Who can fix it</dt>
+                <dt>{labels.actor ?? "Who can fix it"}</dt>
                 <dd>{reason.actor}</dd>
               </>
             )}
             {reason.target && (
               <>
-                <dt>Where to go</dt>
+                <dt>{labels.target ?? "Where to go"}</dt>
                 <dd>{reason.target}</dd>
               </>
             )}
           </dl>
         )}
         {reason.technicalDetails && (
-          <AdvancedOptionsPanel title="Technical details" className="action-blocker-technical">
+          <AdvancedOptionsPanel title={labels.technicalDetails ?? "Technical details"} className="action-blocker-technical">
             <div>{reason.technicalDetails}</div>
           </AdvancedOptionsPanel>
         )}

webui/src/index.ts

@@ -46,7 +46,7 @@ export * from "./i18n/LanguageContext";
 
 export { PermissionBoundary, ResourceAccessBoundary } from "./components/AccessBoundary";
 export { default as ActionBlockerHint } from "./components/ActionBlockerHint";
-export type { ActionBlockerReason } from "./components/ActionBlockerHint";
+export type { ActionBlockerLabels, ActionBlockerReason } from "./components/ActionBlockerHint";
 export { default as AdvancedOptionsPanel } from "./components/AdvancedOptionsPanel";
 export { default as AdminIconButton } from "./components/admin/AdminIconButton";
 export type { AdminIconButtonProps } from "./components/admin/AdminIconButton";