feat(i18n): Add translation wrappers to remaining Vue components #2856

bvisible · 2026-01-01T16:12:12Z

Summary

Adds __() translation wrappers to all remaining Vue components in the frontend
Continuation of feat(i18n): Add translation wrappers to Vue components #2836 to complete i18n coverage across the codebase

Components translated:

Settings components: Canned responses, Email settings, SLA, Teams, Holidays, etc.
Modal components: MergeCategoryModal, TicketSplitModal, CustomerDialog, CallLogDetailModal, etc.
Page components: Contacts, Customers, CallLogs, Articles, KnowledgeBase, Ticket pages
Utility components: Autocomplete, EmptyState, CommunicationArea, TextEditor, EmailEditor
Ticket components: TicketAgentActivities, TicketAgentDetails, TicketAgentFields, TicketBreadcrumbs
View controls: Filter.vue (operators, timespan options), SortBy.vue
Telephony: CallUI, TwilioCallUI, ExotelCallUI

Translation pattern used:

import { __ } from "@/translation";

// Simple strings
__("Filter")

// String interpolation
__("{0} matches", [count])
__("Due in {0}", [formatTime(seconds)])

Test plan

Build passes without errors (yarn build)
Verify translations work correctly with a non-English locale
Check that interpolated strings display correctly

codecov · 2026-01-01T16:19:42Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 39.68%. Comparing base (90c365a) to head (9f87a52).
⚠️ Report is 9 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #2856   +/-   ##
========================================
  Coverage    39.68%   39.68%           
========================================
  Files          121      121           
  Lines         4926     4926           
========================================
  Hits          1955     1955           
  Misses        2971     2971

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

- Assignment Rules: Added __ import and translated ticketRoutingOptions - EmailNotifications: Added __ import to Notification.vue - FieldDependency: Translated all user-facing strings in criteria, fields selection, and value selection components - Holiday: Full translation of calendar, list, table view, modals, and recurring holidays components This is part of the effort to add i18n support across the codebase as requested in PR frappe#2836.

- SLA: Translated all modals (EditResponseResolution, WorkDay), list items, priorities, status, workdays, and assignment conditions - Agents: Translated role labels, dropdown options, toast messages - AgentCard: Translated inactive badge - Email: Translated config fields, labels, descriptions, validation messages, and service info texts - InviteAgents: Translated role labels, toast messages - EmailAccountList: Added __ import

- General: Added __ import to LogoUpload and WorkflowKnowledgebaseSettings - Teams: Translated validation messages in NewTeam, button labels in TeamEdit and RenameTeamModal

- AssignmentModal: Translated title and placeholder - ConfirmDialog: Translated confirm button label - ViewModal: Translated title, placeholder, and button labels - TicketMergeModal: Translated all strings and messages - TicketSplitModal: Translated all strings and messages

- CategoryModal: Translated title and action button labels - NewCustomerDialog: Translated title, labels, and messages

- MergeCategoryModal.vue - MoveToCategoryModal.vue - TicketSubjectModal.vue - AddNewAgentsDialog.vue - CustomerDialog.vue - CallLogDetailModal.vue - SettingsModal.vue (add missing import)

- InvalidPage.vue - Contacts.vue - Customers.vue - CallLogs.vue - Articles.vue - KnowledgeBaseCustomer.vue

- TicketConversation.vue - TicketAgent.vue - TicketCustomerTemplateFields.vue

- TicketTextEditor.vue - TicketBreadcrumbs.vue

- Autocomplete.vue - EmptyState.vue - CommunicationArea.vue - TextEditor.vue - EmailEditor.vue

- UniInput.vue - ListRows.vue

…components

…mponents

RitvikSardana · 2026-01-01T16:33:15Z

@bvisible

are you using AI for it?

if yes can you share the prompt?

bvisible · 2026-01-02T12:32:27Z

Hi @RitvikSardana 👋

Yes! For tedious and repetitive tasks like wrapping 500+ strings across 100+ files with translation functions, AI is a huge time saver.

I'm using Claude Code (Anthropic's CLI tool) with a multi-agent workflow:

3-Agent Workflow:

Scanner Agent - Analyzes the codebase to find all hardcoded strings that need translation, generates a detailed markdown plan listing each file, line numbers, and strings to wrap with __()
Modifier Agent - Takes the plan and systematically applies the translations using the __() function from @/translation, handling string interpolation patterns like __("{0} items", [count])
Verifier Agent - Reviews all modifications to ensure:
- Import statement import { __ } from "@/translation" is present
- All user-facing strings are wrapped
- No syntax errors introduced
- Prettier formatting is correct

This approach ensures consistency and catches edge cases like template literals, computed properties, and nested strings.

📋 Click to see the full Claude Code prompt

Vue i18n Translation Workflow

You will perform internationalization (i18n) on Vue.js files using a 3-phase approach.

Phase 1: Scanner Agent

Scan the codebase to identify all Vue files with hardcoded user-facing strings.

Task:

Search all .vue files in src/ directory
Identify hardcoded strings in:
- Template: labels, placeholders, titles, messages, button text
- Script: toast messages, error messages, dialog titles/messages
Generate a markdown report with:
- File path
- Line numbers
- Current hardcoded string
- Suggested translation wrapper

Output format:

## Files to translate

### src/components/Example.vue
- Line 15: `label="Submit"` → `:label="__('Submit')"` 
- Line 42: `toast.success("Saved!")` → `toast.success(__("Saved!"))`

Phase 2: Modifier Agent

Apply translations systematically based on the scan report.

Rules:

Add import if missing: import { __ } from "@/translation";
Wrap strings with __() function
For interpolation use: __("{0} items found", [count])
For template literals: __("Hello {0}", [name])
Skip: technical strings, CSS classes, event names, prop names
Preserve existing formatting

Examples:

// Before
<Button label="Save" />
toast.error("Failed to load data");
const title = `Hello ${name}`;

// After  
<Button :label="__('Save')" />
toast.error(__("Failed to load data"));
const title = __("Hello {0}", [name]);

Phase 3: Verifier Agent

Verify all modifications are correct.

Checklist:

Import statement present in each modified file
All user-facing strings wrapped
No duplicate imports
Syntax is valid (run yarn build)
Prettier formatting applied (npx [email protected] --write)
No technical strings accidentally wrapped

Run build to verify: yarn build
Run prettier: npx [email protected] --write "src/**/*.vue"

RitvikSardana · 2026-01-13T09:53:30Z

Hello seems like a few translations are pending @bvisible

- Tickets.vue: Translate 'Create' button - Sidebar.vue: Translate 'Frappe Helpdesk' title - CallLogModal.vue: Translate phone placeholders - CommunicationArea.vue: Translate email/comment placeholders - NewCustomerDialog.vue: Translate example placeholders - CustomerDialog.vue: Translate domain placeholder - ContactDialog.vue: Translate email/phone placeholders - SearchComplete.vue: Translate 'Select an option' placeholder

RitvikSardana · 2026-01-13T10:20:59Z

desk/src/components/Settings/emailConfig.ts

+    label: __("Default Incoming"),
    name: "default_incoming",
    type: "checkbox",
-    description:
-      "If enabled, all replies to your company (eg: [email protected]) will come to this account. Note: Only one account can be default incoming.",
+    description: __(
+      "If enabled, all replies to your company (eg: [email protected]) will come to this account. Note: Only one account can be default incoming."
+    ),
  },
  {
-    label: "Default Outgoing",
+    label: __("Default Outgoing"),
    name: "default_outgoing",
    type: "checkbox",
-    description:
-      "If enabled, all outgoing emails will be sent from this account. Note: Only one account can be default outgoing.",
+    description: __(
+      "If enabled, all outgoing emails will be sent from this account. Note: Only one account can be default outgoing."
+    ),
  },


Instead of editing the label here, better to translate it in EmailAdd or EmailEdit component

Done - reverted in 663bc51

RitvikSardana · 2026-01-13T10:21:25Z

desk/src/components/Settings/emailConfig.ts

+    label: __("Account Name"),
    name: "email_account_name",
    type: "text",
    placeholder: "Support / Sales",
  },
  {
-    label: "Email ID",
+    label: __("Email ID"),


Translate the message inside the UI only, not here

Done - reverted in 663bc51

RitvikSardana · 2026-01-13T10:24:41Z

desk/src/components/Settings/Sla/SlaPriorityList.vue

  });
 };

 const columns = computed(() => [


Better to do it in UI

{{ __(column.label) }} => line 21

Done - moved translation to template line 21 in 663bc51

RitvikSardana · 2026-01-13T10:36:10Z

desk/src/components/ListRows.vue

  });
-  if (group.group.label == "General") {
-    _actions = _actions.filter((action) => action.label === "Add New Article");
+  if (group.group.label == __("General")) {


never do this, comparing with translated string is always wrong

Done - removed translated string comparison in 663bc51

RitvikSardana · 2026-01-13T10:36:26Z

desk/src/components/ListRows.vue

@@ -14,9 +14,9 @@
              <span>{{ group.group.label }}</span>


add translations here

Done - added translation in 663bc51

RitvikSardana · 2026-01-13T10:36:40Z

desk/src/components/IconPicker.vue

  }
  if (!Object.keys(groups).length) {
-    groups["No results"] = [];
+    groups[__("No results")] = [];


Done - reverted in 663bc51

RitvikSardana · 2026-01-13T10:37:00Z

desk/src/components/EmptyState.vue


 withDefaults(defineProps<Props>(), {
-  title: "No Data Found",
+  title: "",


why?
can revert it

Done - reverted in 663bc51

RitvikSardana · 2026-01-13T10:38:22Z

desk/src/components/DiscardButton.vue

-const {
-  label = "Discard",
-  hideDialog = false,
-  title = "Discard?",
-  message = "Are you sure you want to discard this?",
-} = defineProps<{
-  label?: string;
-  hideDialog?: boolean;
-  title?: string;
-  message?: string;
-}>();


why have you removed these defaults?

Please revert this

Done - reverted in 663bc51

RitvikSardana · 2026-01-13T10:39:36Z

Please add translations in

Column Settings

and other components

@bvisible

- Revert emailConfig.ts: translate in UI, not config - Revert IconPicker.vue: don't use translated string as object key - Revert EmptyState.vue: keep original default handling - Revert DiscardButton.vue: keep original defaults - Fix ListRows.vue: don't compare against translated strings - Fix SlaPriorityList.vue: translate in template, not data - Fix savedReplies.ts: remove translations from config - Add translations to ColumnSettings.vue

- Reload.vue: Translate 'Refresh' - MobileSidebar.vue: Translate 'Notifications', 'Dashboard' - CommentTextEditor.vue: Translate 'Discard'

bvisible · 2026-01-13T11:12:04Z

Added translations to ColumnSettings.vue in 663bc51 and more components (Reload, MobileSidebar, CommentTextEditor) in da5cd69.

- Telephony.vue: translate form labels and section headers - AssignmentRuleView.vue: translate button labels, toast messages and dialog - CFCondition.vue and CFConditions.vue: translate button labels - MultiSelectCombobox.vue: translate Select All and Clear buttons - EmptyState.vue: translate Create and No Data Found

bvisible force-pushed the feat/i18n-vue-translations branch from eca5eb6 to 30a4390 Compare January 1, 2026 16:14

bvisible mentioned this pull request Jan 1, 2026

feat(i18n): Add translation wrappers to Vue components #2836

Merged

bvisible added 15 commits January 1, 2026 17:21

feat(i18n): Add translation wrappers to Settings components

7520d54

- General: Added __ import to LogoUpload and WorkflowKnowledgebaseSettings - Teams: Translated validation messages in NewTeam, button labels in TeamEdit and RenameTeamModal

feat(i18n): Add translation wrappers to more modal components

68ee4e1

- CategoryModal: Translated title and action button labels - NewCustomerDialog: Translated title, labels, and messages

feat(i18n): Add translation wrappers to remaining modal components

ea9986e

- MergeCategoryModal.vue - MoveToCategoryModal.vue - TicketSubjectModal.vue - AddNewAgentsDialog.vue - CustomerDialog.vue - CallLogDetailModal.vue - SettingsModal.vue (add missing import)

feat(i18n): Add translation wrappers to page components

5bde5f4

- InvalidPage.vue - Contacts.vue - Customers.vue - CallLogs.vue - Articles.vue - KnowledgeBaseCustomer.vue

feat(i18n): Add translation wrappers to ticket page components

461975f

- TicketConversation.vue - TicketAgent.vue - TicketCustomerTemplateFields.vue

feat(i18n): Add translation wrappers to more ticket page components

bcad57c

- TicketTextEditor.vue - TicketBreadcrumbs.vue

feat(i18n): Add translation wrappers to utility components

1ebf179

- Autocomplete.vue - EmptyState.vue - CommunicationArea.vue - TextEditor.vue - EmailEditor.vue

feat(i18n): Add translation wrappers to more utility components

441351e

- UniInput.vue - ListRows.vue

feat(i18n): Add translations to CommentBox, DiscardButton, EmailArea …

762fef2

…components

feat(i18n): Add translations to remaining Vue components

4d4d8ce

feat(i18n): Add translations to Filter, EmailEditor, and telephony co…

bc1cf54

…mponents

style: Format Vue files with prettier

b5ae086

bvisible force-pushed the feat/i18n-vue-translations branch from d39943b to 848eec1 Compare January 1, 2026 16:22

style: Format all Vue files with prettier

610b3c6

bvisible force-pushed the feat/i18n-vue-translations branch from 848eec1 to 610b3c6 Compare January 1, 2026 16:31

This was referenced Jan 11, 2026

Feat/i18n vue translations Frespresso/helpdesk#2

Closed

feat: added missing i18n on strings in vue components #2870

Closed

feat: added missing i18n on string in vue components Frespresso/helpdesk#3

Merged

bvisible and others added 3 commits January 13, 2026 10:59

fix: Add missing :mentions prop to CommentBox TextEditor

87ddcb2

Merge branch 'develop' into feat/i18n-vue-translations

5933258

RitvikSardana reviewed Jan 13, 2026

View reviewed changes

bvisible added 2 commits January 13, 2026 11:59

feat(i18n): Add more missing translations

da5cd69

- Reload.vue: Translate 'Refresh' - MobileSidebar.vue: Translate 'Notifications', 'Dashboard' - CommentTextEditor.vue: Translate 'Discard'

feat(i18n): Add translation wrappers to remaining Vue components #2856

Are you sure you want to change the base?

feat(i18n): Add translation wrappers to remaining Vue components #2856

Uh oh!

Conversation

bvisible commented Jan 1, 2026

Summary

Components translated:

Translation pattern used:

Test plan

Uh oh!

codecov bot commented Jan 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

RitvikSardana commented Jan 1, 2026

Uh oh!

bvisible commented Jan 2, 2026

Vue i18n Translation Workflow

Phase 1: Scanner Agent

Phase 2: Modifier Agent

Phase 3: Verifier Agent

Uh oh!

RitvikSardana commented Jan 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RitvikSardana commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bvisible commented Jan 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Jan 1, 2026 •

edited

Loading

RitvikSardana commented Jan 13, 2026 •

edited

Loading