feat(frontend): i18n MITRE components (matrix modal, picker, field, tag)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-21 23:41:32 +02:00
parent 284494cee8
commit bdda02b07a
8 changed files with 69 additions and 60 deletions
--- a/frontend/src/components/MitreMatrixModal.tsx
+++ b/frontend/src/components/MitreMatrixModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { LoadingState } from './LoadingState';
 import { ErrorState } from './ErrorState';
 import { extractApiError } from '@/api/client';
@@ -41,6 +42,7 @@ export function MitreMatrixModal({
  onApply,
  onCancel,
 }: MitreMatrixModalProps): JSX.Element | null {
+  const { t } = useTranslation();
  const { data: matrix, isLoading, isError, error } = useMitreMatrix(isOpen);

  const [selectedTechMap, setSelectedTechMap] = useState<Map<string, { id: string; name: string }>>(
@@ -177,24 +179,24 @@ export function MitreMatrixModal({
        {/* Header */}
        <div className="flex items-center justify-between px-xl py-md border-b border-hairline flex-shrink-0">
          <h2 id="matrix-modal-title" className="text-[18px] font-medium text-ink">
-            MITRE ATT&amp;CK Matrix
+            {t('mitre.matrix.title')}
          </h2>
          <input
            ref={searchInputRef}
            type="text"
-            placeholder="Filter techniques…"
+            placeholder={t('mitre.matrix.filter')}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="text-input w-56 h-9 text-[14px]"
-            aria-label="Filter techniques"
+            aria-label={t('mitre.matrix.filter')}
          />
        </div>

        {/* Body — overflow-y-auto, NO overflow-x */}
        <div className="flex-1 overflow-y-auto overflow-x-hidden px-md py-md">
-          {isLoading && <LoadingState label="Loading MITRE matrix…" />}
+          {isLoading && <LoadingState label={t('mitre.matrix.loading')} />}
          {isError && (
-            <ErrorState message={extractApiError(error, 'Could not load MITRE matrix')} />
+            <ErrorState message={extractApiError(error, t('mitre.matrix.error'))} />
          )}
          {!isLoading && !isError && matrix && (
            <div
@@ -340,7 +342,7 @@ export function MitreMatrixModal({
        {/* Footer */}
        <div className="flex items-center justify-end gap-md px-xl py-md border-t border-hairline flex-shrink-0">
          <button type="button" className="btn-outline-ink" onClick={onCancel}>
-            Cancel
+            {t('mitre.matrix.close')}
          </button>
          <button
            type="button"
@@ -349,8 +351,8 @@ export function MitreMatrixModal({
            disabled={isLoading || isError || (totalSelected === 0 && !hasInitial)}
          >
            {totalSelected === 0
-              ? 'Clear all'
-              : `Apply ${totalSelected} item${totalSelected !== 1 ? 's' : ''}`}
+              ? t('mitre.matrix.clearAll')
+              : t(totalSelected === 1 ? 'mitre.matrix.applyItem_one' : 'mitre.matrix.applyItem_other', { count: totalSelected })}
          </button>
        </div>
      </div>
--- a/frontend/src/components/MitreTechniquePicker.tsx
+++ b/frontend/src/components/MitreTechniquePicker.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import { extractApiError } from '@/api/client';
 import type { MitreTechnique } from '@/api/types';
 import { useMitreSearch } from '@/hooks/useMitre';
@@ -14,6 +15,7 @@ export function MitreTechniquePicker({
  onSelect,
  disabled = false,
 }: MitreTechniquePickerProps): JSX.Element {
+  const { t } = useTranslation();
  const [inputValue, setInputValue] = useState('');
  const [query, setQuery] = useState('');
  const [open, setOpen] = useState(false);
@@ -95,31 +97,31 @@ export function MitreTechniquePicker({
        aria-expanded={open}
        aria-controls={listboxId}
        aria-activedescendant={activeIndex >= 0 ? `mitre-option-${activeIndex}` : undefined}
-        aria-label="Search MITRE technique"
+        aria-label={t('mitre.field.search')}
        className="text-input"
        value={inputValue}
        onChange={(e) => handleInputChange(e.target.value)}
        onFocus={() => setOpen(true)}
        onKeyDown={handleKeyDown}
        disabled={disabled}
-        placeholder="Search by ID or name (e.g. T1059)"
+        placeholder={t('mitre.field.search')}
        autoComplete="off"
      />

      {open && (
        <div className="absolute z-20 w-full mt-xxs bg-paper border border-steel rounded-none overflow-hidden">
          {isFetching && (
-            <div className="px-md py-sm text-[14px] text-graphite">Searching…</div>
+            <div className="px-md py-sm text-[14px] text-graphite">{t('state.loading')}</div>
          )}

          {isError && !isFetching && (
            <div className="px-md py-sm text-[14px] text-bloom-deep" role="alert">
-              {extractApiError(error, 'MITRE search unavailable')}
+              {extractApiError(error, t('mitre.matrix.error'))}
            </div>
          )}

          {!isFetching && !isError && items.length === 0 && query.trim().length > 0 && (
-            <div className="px-md py-sm text-[14px] text-graphite">No results</div>
+            <div className="px-md py-sm text-[14px] text-graphite">{t('state.empty.default')}</div>
          )}

          {!isFetching && items.length > 0 && (
--- a/frontend/src/components/MitreTechniqueTag.tsx
+++ b/frontend/src/components/MitreTechniqueTag.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import type { MitreTechnique, MitreTacticRef } from '@/api/types';

 interface TechniqueTagProps {
@@ -18,6 +19,7 @@ export function MitreTechniqueTag({
  onRemove,
  disabled = false,
 }: TechniqueTagProps): JSX.Element {
+  const { t } = useTranslation();
  return (
    <span
      data-testid="mitre-technique-tag"
@@ -28,7 +30,7 @@ export function MitreTechniqueTag({
      {!disabled && (
        <button
          type="button"
-          aria-label={`Remove ${technique.id}`}
+          aria-label={`${t('mitre.tag.remove')} ${technique.id}`}
          onClick={onRemove}
          className="text-primary-deep opacity-60 hover:opacity-100 leading-none"
        >
@@ -45,6 +47,7 @@ export function MitreTacticTag({
  onRemove,
  disabled = false,
 }: TacticTagProps): JSX.Element {
+  const { t } = useTranslation();
  return (
    <span
      data-testid="mitre-tactic-tag"
@@ -55,7 +58,7 @@ export function MitreTacticTag({
      {!disabled && (
        <button
          type="button"
-          aria-label={`Remove ${tactic.id}`}
+          aria-label={`${t('mitre.tag.remove')} ${tactic.id}`}
          onClick={onRemove}
          className="text-white opacity-60 hover:opacity-100 leading-none"
        >
--- a/frontend/src/components/MitreTechniquesField.tsx
+++ b/frontend/src/components/MitreTechniquesField.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Grid2x2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { extractApiError } from '@/api/client';
 import type { MitreTechnique, MitreTacticRef } from '@/api/types';
 import { useUpdateSimulation } from '@/hooks/useSimulations';
@@ -24,6 +25,7 @@ export function MitreTechniquesField({
  engagementId,
  disabled = false,
 }: MitreTechniquesFieldProps): JSX.Element {
+  const { t } = useTranslation();
  const [showMatrix, setShowMatrix] = useState(false);
  const [showPicker, setShowPicker] = useState(false);

@@ -33,34 +35,34 @@ export function MitreTechniquesField({
  const save = async (techniques: MitreTechnique[], nextTactics: MitreTacticRef[]) => {
    try {
      await updateMutation.mutateAsync({
-        technique_ids: techniques.map((t) => t.id),
-        tactic_ids: nextTactics.map((t) => t.id),
+        technique_ids: techniques.map((tech) => tech.id),
+        tactic_ids: nextTactics.map((tac) => tac.id),
      });
-      push('Techniques updated', 'success');
+      push(t('mitre.field.savedToast'), 'success');
    } catch (err) {
-      push(extractApiError(err, 'Could not update techniques'), 'error');
+      push(extractApiError(err, t('mitre.field.errorToast')), 'error');
    }
  };

  const handleRemoveTechnique = (id: string) => {
-    void save(value.filter((t) => t.id !== id), tactics);
+    void save(value.filter((tech) => tech.id !== id), tactics);
  };

  const handleRemoveTactic = (id: string) => {
-    void save(value, tactics.filter((t) => t.id !== id));
+    void save(value, tactics.filter((tac) => tac.id !== id));
  };

  const handleSelect = (technique: MitreTechnique) => {
-    if (value.some((t) => t.id === technique.id)) return;
+    if (value.some((tech) => tech.id === technique.id)) return;
    void save([...value, technique], tactics);
    setShowPicker(false);
  };

  const handleMatrixApply = ({ techniques, tactics: newTactics }: MatrixSelection) => {
    setShowMatrix(false);
-    const merged = techniques.map((s) => {
-      const existing = value.find((v) => v.id === s.id);
-      return existing ?? s;
+    const merged = techniques.map((sel) => {
+      const existing = value.find((v) => v.id === sel.id);
+      return existing ?? sel;
    });
    void save(merged, newTactics);
  };
@@ -72,22 +74,22 @@ export function MitreTechniquesField({
    <div className="flex flex-col gap-sm">
      {/* Chips area */}
      {isEmpty ? (
-        <p className="text-[13px] text-graphite">No techniques selected</p>
+        <p className="text-[13px] text-graphite">{t('mitre.field.empty')}</p>
      ) : (
        <div className="flex flex-wrap gap-xs" data-testid="techniques-tag-list">
-          {tactics.map((t) => (
+          {tactics.map((tac) => (
            <MitreTacticTag
-              key={t.id}
-              tactic={t}
-              onRemove={() => handleRemoveTactic(t.id)}
+              key={tac.id}
+              tactic={tac}
+              onRemove={() => handleRemoveTactic(tac.id)}
              disabled={disabled || isPending}
            />
          ))}
-          {value.map((t) => (
+          {value.map((tech) => (
            <MitreTechniqueTag
-              key={t.id}
-              technique={t}
-              onRemove={() => handleRemoveTechnique(t.id)}
+              key={tech.id}
+              technique={tech}
+              onRemove={() => handleRemoveTechnique(tech.id)}
              disabled={disabled || isPending}
            />
          ))}
@@ -107,20 +109,20 @@ export function MitreTechniquesField({
                onClick={() => setShowPicker(true)}
                disabled={isPending}
              >
-                Search technique (e.g. T1059)…
+                {t('mitre.field.search')}
              </button>
            )}
          </div>
          <button
            type="button"
-            aria-label="Open MITRE matrix"
+            aria-label={t('mitre.field.openMatrix')}
            onClick={() => { setShowPicker(false); setShowMatrix(true); }}
            disabled={isPending}
            className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-none border border-steel text-graphite hover:text-ink hover:border-ink"
          >
            <Grid2x2 size={16} />
          </button>
-          {isPending && <span className="text-[12px] text-graphite">Saving…</span>}
+          {isPending && <span className="text-[12px] text-graphite">{t('common.saving')}</span>}
        </div>
      )}