Repository: frappe/frappe
Pull request: fix: make UI elements translatable
<!--

Some key notes before you open a PR:

 1. Select which branch should this PR be merged in?
 2. PR name follows [convention](http://karma-runner.github.io/4.0/dev/git-commit-msg.html)
 3. All tests pass locally, UI and Unit tests
 4. All business logic and validations must be on the server-side
 5. Update necessary Documentation
 6. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes


Also, if you're new here

- Documentation Guidelines => https://github.com/frappe/erpnext/wiki/Updating-Documentation

- Contribution Guide => https://github.com/frappe/frappe/blob/develop/.github/CONTRIBUTING.md

- Pull Request Checklist => https://github.com/frappe/erpnext/wiki/Pull-Request-Checklist

-->

> Please provide enough information so that others can review your pull request:

<!-- You can skip this if you're fixing a typo or updating existing documentation -->

> Explain the **details** for making this change. What existing problem does the pull request solve?

<!-- Example: When "Adding a function to do X", explain why it is necessary to have a way to do X. -->

> Screenshots/GIFs

<!-- Add images/recordings to better visualize the change: expected/current behviour -->
refer to issue https://github.com/frappe/frappe/issues/12376


Problem statement:
[bug] v13 develop make grid row Edit button, View List Select and global search result doctype translatable
version: V13 develop

__() not called for the following label which makes them not translatable.

1. The recently changed Edit button in Grid Row 
  grid_row.js line 232
this.open_form_button = $(`
					<div class="btn-open-row">
						<a>${frappe.utils.icon('edit', 'xs')}</a>
						<div class="hidden-xs edit-grid-row">` + __("Edit") + `</div>
					</div>
				`)

2. The View List Select
 list_view_select.js line 13

add_view_to_menu(view, action) {
		let $el = this.page.add_custom_menu_item(
			this.parent,
			__(view),
			action,
			true,
			null,
			this.icon_map[view] || "list"
		);
3. DocType in Global Search result list  
 search.js

line 306 result-title
let $results_list = $(`<div class="results-summary">
			<div class="result-section full-list ${type}-section col-sm-12">
				<div class="result-title"> ` + __(type) + `</div>
				<div class="result-body">
				</div>
			</div>
		</div>`);

line 343
<div class="result-title">${__(type)}</div>

4. breadcrumbs
breadcrumbs.js line 140
$(`<li><a href="/app/${route}">${__(doctype)}</a></li>`)

5. form_sidebar.js
line 213 this.follow_button.text(follow ? __("Unfollow") : __("Follow"));

Hints from issue discussion:

Commit message: Update list_sidebar.html

make placeholder search translatable

Patch to review:
diff --git a/frappe/public/js/frappe/form/grid_row.js b/frappe/public/js/frappe/form/grid_row.js
index 675cb6f77cab..2786ff1619a5 100644
--- a/frappe/public/js/frappe/form/grid_row.js
+++ b/frappe/public/js/frappe/form/grid_row.js
@@ -229,7 +229,7 @@ export default class GridRow {
 				this.open_form_button = $(`
 					<div class="btn-open-row">
 						<a>${frappe.utils.icon('edit', 'xs')}</a>
-						<div class="hidden-xs edit-grid-row">Edit</div>
+						<div class="hidden-xs edit-grid-row">` + __("Edit") + `</div>
 					</div>
 				`)
 					.appendTo($('<div class="col col-xs-1"></div>').appendTo(this.row))
diff --git a/frappe/public/js/frappe/form/sidebar/form_sidebar.js b/frappe/public/js/frappe/form/sidebar/form_sidebar.js
index 40f9e65bb0a3..d6a9d9580180 100644
--- a/frappe/public/js/frappe/form/sidebar/form_sidebar.js
+++ b/frappe/public/js/frappe/form/sidebar/form_sidebar.js
@@ -210,7 +210,7 @@ frappe.ui.form.Sidebar = class {
 		if (follow == null) {
 			follow = this.frm.get_docinfo().is_document_followed;
 		}
-		this.follow_button.text(follow ? "Unfollow" : "Follow");
+		this.follow_button.text(follow ? __("Unfollow") : __("Follow"));
 	}
 
 	refresh_like() {
diff --git a/frappe/public/js/frappe/list/list_sidebar.html b/frappe/public/js/frappe/list/list_sidebar.html
index cd80280d7b50..0428f32e6068 100644
--- a/frappe/public/js/frappe/list/list_sidebar.html
+++ b/frappe/public/js/frappe/list/list_sidebar.html
@@ -56,7 +56,7 @@
 				</a>
 				<ul class="dropdown-menu list-stats-dropdown" role="menu">
 					<div class="dropdown-search">
-						<input type="text" placeholder="Search" data-element="search" class="form-control input-xs">
+						<input type="text" placeholder={{__("Search") }} data-element="search" class="form-control input-xs">
 					</div>
 					<div class="stat-result">
 					</div>
diff --git a/frappe/public/js/frappe/list/list_view_select.js b/frappe/public/js/frappe/list/list_view_select.js
index 646efcfbfe05..f34e670618c6 100644
--- a/frappe/public/js/frappe/list/list_view_select.js
+++ b/frappe/public/js/frappe/list/list_view_select.js
@@ -10,7 +10,7 @@ frappe.views.ListViewSelect = class ListViewSelect {
 	add_view_to_menu(view, action) {
 		let $el = this.page.add_custom_menu_item(
 			this.parent,
-			view,
+			__(view),
 			action,
 			true,
 			null,
diff --git a/frappe/public/js/frappe/request.js b/frappe/public/js/frappe/request.js
index 7f0d883983ad..88912e12da1a 100644
--- a/frappe/public/js/frappe/request.js
+++ b/frappe/public/js/frappe/request.js
@@ -492,7 +492,7 @@ frappe.request.report_error = function(xhr, request_opts) {
 
 		if (!frappe.error_dialog) {
 			frappe.error_dialog = new frappe.ui.Dialog({
-				title: 'Server Error',
+				title: __('Server Error'),
 				primary_action_label: __('Report'),
 				primary_action: () => {
 					if (error_report_email) {
diff --git a/frappe/public/js/frappe/ui/toolbar/search.js b/frappe/public/js/frappe/ui/toolbar/search.js
index ebd1936bbe12..9f03d56ed277 100644
--- a/frappe/public/js/frappe/ui/toolbar/search.js
+++ b/frappe/public/js/frappe/ui/toolbar/search.js
@@ -303,7 +303,7 @@ frappe.search.SearchDialog = class {
 
 		let $results_list = $(`<div class="results-summary">
 			<div class="result-section full-list ${type}-section col-sm-12">
-				<div class="result-title">${type}</div>
+				<div class="result-title"> ` + __(type) + `</div>
 				<div class="result-body">
 				</div>
 			</div>
@@ -340,7 +340,7 @@ frappe.search.SearchDialog = class {
 		}
 
 		let $result_section = $(`<div class="col-sm-12 result-section" data-type="${type}">
-			<div class="result-title">${type}</div>
+			<div class="result-title">${__(type)}</div>
 			<div class="result-body">
 				${more_html}
 			</div>
diff --git a/frappe/public/js/frappe/views/breadcrumbs.js b/frappe/public/js/frappe/views/breadcrumbs.js
index 7bd6ee5d94f5..8ffd80dcb297 100644
--- a/frappe/public/js/frappe/views/breadcrumbs.js
+++ b/frappe/public/js/frappe/views/breadcrumbs.js
@@ -138,7 +138,7 @@ frappe.breadcrumbs = {
 			} else {
 				route = doctype_route;
 			}
-			$(`<li><a href="/app/${route}">${doctype}</a></li>`)
+			$(`<li><a href="/app/${route}">${__(doctype)}</a></li>`)
 				.appendTo(this.$breadcrumbs);
 		}
 	},
@@ -147,7 +147,7 @@ frappe.breadcrumbs = {
 		const doctype = breadcrumbs.doctype;
 		const docname = frappe.get_route()[2];
 		let form_route = `/app/${frappe.router.slug(doctype)}/${docname}`;
-		$(`<li><a href="${form_route}">${docname}</a></li>`)
+		$(`<li><a href="${form_route}">${__(docname)}</a></li>`)
 			.appendTo(this.$breadcrumbs);
 
 		if (view === "form") {


Code review comments:
diff_hunk: @@ -303,7 +303,7 @@ frappe.search.SearchDialog = class {
 
 		let $results_list = $(`<div class="results-summary">
 			<div class="result-section full-list ${type}-section col-sm-12">
-				<div class="result-title">${type}</div>
+				<div class="result-title"> ` + __(type) + `</div>
path: frappe/public/js/frappe/ui/toolbar/search.js
text: @user1:
```suggestion
				<div class="result-title"> ${ __(type) }</div>
```

diff_hunk: @@ -229,7 +229,7 @@ export default class GridRow {
 				this.open_form_button = $(`
 					<div class="btn-open-row">
 						<a>${frappe.utils.icon('edit', 'xs')}</a>
-						<div class="hidden-xs edit-grid-row">Edit</div>
+						<div class="hidden-xs edit-grid-row">` + __("Edit") + `</div>
path: frappe/public/js/frappe/form/grid_row.js
text: @user1:
```suggestion
						<div class="hidden-xs edit-grid-row">${ __("Edit") }</div>
```

Like in the line above, the translate function can be called within `${ }`. See https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings and https://discuss.erpnext.com/t/dos-and-don-ts-2-translation-in-javascript/68505