Skip to content

fix(js-processor): keep JSON braces out of Mongo filter i18n message #659

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
weiliang110100 merged 1 commit into from
Oct 19, 2026
Merged

fix(js-processor): keep JSON braces out of Mongo filter i18n message #659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 43 additions & 12 deletions packages/dag/src/components/form/js-processor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ import AiCodeDialog from './AiCodeDialog.vue'
import { useVirtualLogScroller } from './useVirtualLogScroller'
import './style.scss'

// Kept out of i18n messages: vue-i18n treats `{}` as interpolation and throws in production
const MONGO_FILTER_EXAMPLE = `{
"$find": {
"filter": {"age": {"$gt": 10}},
"sort": {"age": -1},
"limit": 10
}
}`

export const JsProcessor = observer(
defineComponent({
props: ['value', 'disabled', 'isStandard'],
Expand Down Expand Up @@ -1201,25 +1210,47 @@ export const JsProcessor = observer(
{/* SQL / Mongo filter Query Dialog */}
<ElDialog
v-model={sqlDialogVisible.value}
title={t(
isMongoQuerySource.value
? 'packages_form_js_processor_mock_filter_dialog_title'
: 'packages_form_js_processor_mock_sql_dialog_title',
)}
width="80vw"
class="mock-sql-dialog"
append-to-body
>
{{
default: () => (
<>
header: ({ titleId, titleClass }: any) => (
<div class="flex align-center">
<span id={titleId} class={[titleClass, 'mr-1']}>
{t(
isMongoQuerySource.value
? 'packages_form_js_processor_mock_filter_dialog_title'
: 'packages_form_js_processor_mock_sql_dialog_title',
)}
</span>
{isMongoQuerySource.value && (
<pre class="mb-2 font-color-light text-sm whitespace-pre-wrap">
{t(
'packages_form_js_processor_mock_filter_placeholder',
)}
</pre>
<ElTooltip placement="bottom-start">
{{
default: () => (
<VIcon size="14" class="color-primary">
info
</VIcon>
),
content: () => (
<div>
<div>
{t(
'packages_form_js_processor_mock_filter_tip',
)}
</div>
<pre class="mt-1 mb-0">
{MONGO_FILTER_EXAMPLE}
</pre>
</div>
),
}}
</ElTooltip>
)}
</div>
),
default: () => (
<>
<VCodeEditor
class="border rounded-lg py-0"
value={sqlText.value}
Expand Down
6 changes: 2 additions & 4 deletions packages/form/src/locale/lang/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,8 @@ export default {
packages_form_js_processor_mock_get_sample: 'Get Sample',
packages_form_js_processor_mock_sql_dialog_title: 'SQL Query Data',
packages_form_js_processor_mock_filter_dialog_title: 'Filter Query Data',
packages_form_js_processor_mock_filter_placeholder:
'Enter a MongoDB filter, for example {"status": "PAID"}. To also sort or limit, wrap it in $find (at most 100 rows):\n{\n "$find": {\n "filter": {"age": {"$gt": 10}},\n "sort": {"age": -1},\n "limit": 10\n }\n}',
packages_form_js_processor_mock_filter_tip:
'Enter a MongoDB filter object. To also sort or limit, wrap it in $find (at most 100 rows), for example:',
packages_form_js_processor_mock_sql_preview: 'Preview',
packages_form_js_processor_mock_sql_use_data: 'Use This Data',
packages_form_js_processor_mock_json_valid: 'Valid',
Expand All @@ -183,8 +183,6 @@ export default {
'Click "Test Run" to see log output',
packages_form_js_processor_mock_items: '{val1} items',
packages_form_js_processor_mock_run_time: '{val1}ms',
packages_form_js_processor_mock_json_placeholder:
'Enter test data in JSON array format, e.g.:\n[\n {\n "id": 1,\n "name": "John"\n }\n]',
packages_form_js_processor_mock_js_editor: 'JS Node Editor',
packages_form_js_processor_mock_js_code: 'JS Code',
packages_form_js_processor_mock_log_start: 'Start executing JS code...',
Expand Down
6 changes: 2 additions & 4 deletions packages/form/src/locale/lang/zh-CN.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ export default {
packages_form_js_processor_mock_get_sample: '获取样本',
packages_form_js_processor_mock_sql_dialog_title: 'SQL 查询获取数据',
packages_form_js_processor_mock_filter_dialog_title: '条件查询获取数据',
packages_form_js_processor_mock_filter_placeholder:
'请输入 MongoDB 查询条件，例如 {"status": "PAID"}。如需排序或限制条数，请用 $find 包装（最多返回 100 条）：\n{\n "$find": {\n "filter": {"age": {"$gt": 10}},\n "sort": {"age": -1},\n "limit": 10\n }\n}',
packages_form_js_processor_mock_filter_tip:
'请输入 MongoDB 查询条件（filter 对象）。如需排序或限制条数，请用 $find 包装（最多返回 100 条），示例：',
packages_form_js_processor_mock_sql_preview: '执行预览',
packages_form_js_processor_mock_sql_use_data: '使用此数据',
packages_form_js_processor_mock_json_valid: '格式正确',
Expand All @@ -161,8 +161,6 @@ export default {
'点击「试运行」执行代码后查看日志输出',
packages_form_js_processor_mock_items: '{val1} 条',
packages_form_js_processor_mock_run_time: '{val1}ms',
packages_form_js_processor_mock_json_placeholder:
'请输入 JSON 数组格式的测试数据，例如：\n[\n {\n "id": 1,\n "name": "张三"\n }\n]',
packages_form_js_processor_mock_js_editor: 'JS 节点编辑器',
packages_form_js_processor_mock_js_code: 'JS 代码',
packages_form_js_processor_mock_log_start: '开始执行 JS 代码...',
Expand Down
6 changes: 2 additions & 4 deletions packages/form/src/locale/lang/zh-TW.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ export default {
packages_form_js_processor_mock_get_sample: '獲取樣本',
packages_form_js_processor_mock_sql_dialog_title: 'SQL 查詢獲取數據',
packages_form_js_processor_mock_filter_dialog_title: '條件查詢獲取數據',
packages_form_js_processor_mock_filter_placeholder:
'請輸入 MongoDB 查詢條件，例如 {"status": "PAID"}。如需排序或限制條數，請用 $find 包裝（最多返回 100 條）：\n{\n "$find": {\n "filter": {"age": {"$gt": 10}},\n "sort": {"age": -1},\n "limit": 10\n }\n}',
packages_form_js_processor_mock_filter_tip:
'請輸入 MongoDB 查詢條件（filter 物件）。如需排序或限制條數，請用 $find 包裝（最多返回 100 條），範例：',
packages_form_js_processor_mock_sql_preview: '執行預覽',
packages_form_js_processor_mock_sql_use_data: '使用此數據',
packages_form_js_processor_mock_json_valid: '格式正確',
Expand All @@ -161,8 +161,6 @@ export default {
'點擊「試運行」執行代碼後查看日誌輸出',
packages_form_js_processor_mock_items: '{val1} 條',
packages_form_js_processor_mock_run_time: '{val1}ms',
packages_form_js_processor_mock_json_placeholder:
'請輸入 JSON 陣列格式的測試數據，例如：\n[\n {\n "id": 1,\n "name": "張三"\n }\n]',
packages_form_js_processor_mock_js_editor: 'JS 節點編輯器',
packages_form_js_processor_mock_js_code: 'JS 代碼',
packages_form_js_processor_mock_log_start: '開始執行 JS 代碼...',
Expand Down