feat(TAP-12892): support Mongo filter query in JS mock sampling

packages/dag/src/components/form/js-processor/index.tsx

@@ -67,15 +67,50 @@ export const JsProcessor = observer(
       })
       const tableList = ref([])
 
-      const checkSqlCapability = () => {
+      const checkQueryCapability = () => {
         const sourceNode = findParentNode(form.values.id)
         return dataflowStore.hasCapability(
           sourceNode,
           'run_raw_command_function',
         )
       }
 
-      const hasSqlCapability = ref(checkSqlCapability())
+      const isMongoSource = () => {
+        const sourceNode = findParentNode(form.values.id)
+        const databaseType = sourceNode?.databaseType || ''
+        return /mongo/i.test(databaseType)
+      }
+
+      const hasSqlCapability = ref(checkQueryCapability())
+      const isMongoQuerySource = ref(isMongoSource())
+
+      const getSourceTableName = () => {
+        if (isMigrate) {
+          return params.tableName || ''
+        }
+        const sourceNode = findParentNode(form.values.id)
+        return sourceNode?.tableName || ''
+      }
+
+      const getDefaultQueryText = () => {
+        if (isMongoQuerySource.value) {
+          return ''
+        }
+        const tableName = getSourceTableName()
+        return tableName ? `SELECT * FROM ${tableName}` : 'SELECT * FROM '
+      }
+
+      const isDefaultQueryText = (text: string) => {
+        const trimmed = text?.trim() || ''
+        return (
+          trimmed === '' ||
+          trimmed === '{}' ||
+          trimmed === 'SELECT * FROM' ||
+          /^SELECT \* FROM\s*\w*$/i.test(trimmed)
+        )
+      }
+
+      const sqlText = ref(getDefaultQueryText())
 
       const loadTable = () => {
         if (!formRef.value.values.$inputs.length) return
@@ -93,7 +128,11 @@ export const JsProcessor = observer(
             }))
             params.tableName = tableList.value[0]?.value
             // Update SQL template with the loaded table name
-            if (params.tableName && sqlText.value === 'SELECT * FROM ') {
+            if (
+              !isMongoQuerySource.value &&
+              params.tableName &&
+              isDefaultQueryText(sqlText.value)
+            ) {
               sqlText.value = `SELECT * FROM ${params.tableName}`
             }
           })
@@ -107,7 +146,16 @@ export const JsProcessor = observer(
           loadTable()
         }
 
-        hasSqlCapability.value = checkSqlCapability()
+        hasSqlCapability.value = checkQueryCapability()
+        const nextIsMongo = isMongoSource()
+        if (nextIsMongo !== isMongoQuerySource.value) {
+          isMongoQuerySource.value = nextIsMongo
+          if (isDefaultQueryText(sqlText.value)) {
+            sqlText.value = getDefaultQueryText()
+          }
+        } else {
+          isMongoQuerySource.value = nextIsMongo
+        }
       })
 
       onBeforeUnmount(() => {
@@ -147,14 +195,6 @@ export const JsProcessor = observer(
       })
       const gettingSample = ref(false)
       const sqlDialogVisible = ref(false)
-      const getSourceTableName = () => {
-        if (isMigrate) {
-          return params.tableName || ''
-        }
-        const sourceNode = findParentNode(form.values.id)
-        return sourceNode?.tableName || ''
-      }
-      const sqlText = ref(`SELECT * FROM ${getSourceTableName()}`)
       const sqlPreviewData = ref<any[]>([])
       const sqlPreviewLoading = ref(false)
 
@@ -424,7 +464,11 @@ export const JsProcessor = observer(
         } catch (error: any) {
           ElMessage.error(
             error?.message ||
-              t('packages_form_js_processor_mock_sql_query_fail'),
+              t(
+                isMongoQuerySource.value
+                  ? 'packages_form_js_processor_mock_filter_query_fail'
+                  : 'packages_form_js_processor_mock_sql_query_fail',
+              ),
           )
           sqlPreviewData.value = []
         } finally {
@@ -437,9 +481,14 @@ export const JsProcessor = observer(
           fillSampleToEditor(sqlPreviewData.value)
           addMockLog(
             'info',
-            t('packages_form_js_processor_mock_log_sql_import', {
-              val1: sqlPreviewData.value.length,
-            }),
+            t(
+              isMongoQuerySource.value
+                ? 'packages_form_js_processor_mock_log_filter_import'
+                : 'packages_form_js_processor_mock_log_sql_import',
+              {
+                val1: sqlPreviewData.value.length,
+              },
+            ),
           )
         }
         sqlDialogVisible.value = false
@@ -758,10 +807,17 @@ export const JsProcessor = observer(
                               text
                               type="primary"
                               onClick={() => {
+                                if (isDefaultQueryText(sqlText.value)) {
+                                  sqlText.value = getDefaultQueryText()
+                                }
                                 sqlDialogVisible.value = true
                               }}
                             >
-                              {t('packages_form_js_processor_mock_sql_query')}
+                              {t(
+                                isMongoQuerySource.value
+                                  ? 'packages_form_js_processor_mock_filter_query'
+                                  : 'packages_form_js_processor_mock_sql_query',
+                              )}
                             </ElButton>
                           )}
                           <ElButton
@@ -1142,26 +1198,37 @@ export const JsProcessor = observer(
                   </div>
                 </div>
 
-                {/* SQL Query Dialog */}
+                {/* SQL / Mongo filter Query Dialog */}
                 <ElDialog
                   v-model={sqlDialogVisible.value}
-                  title={t('packages_form_js_processor_mock_sql_dialog_title')}
+                  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: () => (
                       <>
+                        {isMongoQuerySource.value && (
+                          <pre class="mb-2 font-color-light text-sm whitespace-pre-wrap">
+                            {t(
+                              'packages_form_js_processor_mock_filter_placeholder',
+                            )}
+                          </pre>
+                        )}
                         <VCodeEditor
                           class="border rounded-lg py-0"
                           value={sqlText.value}
                           onChange={(val) => {
                             sqlText.value = val
                           }}
-                          lang="sql"
+                          lang={isMongoQuerySource.value ? 'json' : 'sql'}
                           theme="chrome"
-                          height={120}
+                          height={isMongoQuerySource.value ? 180 : 120}
                           options={{ highlightActiveLine: true }}
                         />
                         {sqlPreviewData.value.length > 0 && (

packages/form/src/locale/lang/en.js

@@ -166,8 +166,12 @@ export default {
   packages_form_js_processor_mock_log: 'Log',
   packages_form_js_processor_mock_log_clear: 'Clear',
   packages_form_js_processor_mock_sql_query: 'SQL Query',
+  packages_form_js_processor_mock_filter_query: 'Filter Query',
   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_sql_preview: 'Preview',
   packages_form_js_processor_mock_sql_use_data: 'Use This Data',
   packages_form_js_processor_mock_json_valid: 'Valid',
@@ -199,7 +203,10 @@ export default {
   packages_form_js_processor_mock_log_no_more: 'No more logs',
   packages_form_js_processor_mock_log_sql_import:
     'Imported {val1} records from SQL query',
+  packages_form_js_processor_mock_log_filter_import:
+    'Imported {val1} records from filter query',
   packages_form_js_processor_mock_sql_query_fail: 'SQL query failed',
+  packages_form_js_processor_mock_filter_query_fail: 'Filter query failed',
   packages_form_js_processor_mock_unknown_error: 'Unknown error',
   packages_form_js_processor_mock_event_insert: 'Insert',
   packages_form_js_processor_mock_event_update: 'Update',

packages/form/src/locale/lang/zh-CN.js

@@ -144,8 +144,12 @@ export default {
   packages_form_js_processor_mock_log: '日志',
   packages_form_js_processor_mock_log_clear: '清空',
   packages_form_js_processor_mock_sql_query: 'SQL 查询',
+  packages_form_js_processor_mock_filter_query: '条件查询',
   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_sql_preview: '执行预览',
   packages_form_js_processor_mock_sql_use_data: '使用此数据',
   packages_form_js_processor_mock_json_valid: '格式正确',
@@ -173,7 +177,10 @@ export default {
   packages_form_js_processor_mock_log_no_more: '没有更多日志了',
   packages_form_js_processor_mock_log_sql_import:
     '从 SQL 查询导入 {val1} 条数据',
+  packages_form_js_processor_mock_log_filter_import:
+    '从条件查询导入 {val1} 条数据',
   packages_form_js_processor_mock_sql_query_fail: 'SQL 查询失败',
+  packages_form_js_processor_mock_filter_query_fail: '条件查询失败',
   packages_form_js_processor_mock_unknown_error: '未知错误',
   packages_form_js_processor_mock_event_insert: '插入',
   packages_form_js_processor_mock_event_update: '更新',

packages/form/src/locale/lang/zh-TW.js

@@ -144,8 +144,12 @@ export default {
   packages_form_js_processor_mock_log: '日誌',
   packages_form_js_processor_mock_log_clear: '清空',
   packages_form_js_processor_mock_sql_query: 'SQL 查詢',
+  packages_form_js_processor_mock_filter_query: '條件查詢',
   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_sql_preview: '執行預覽',
   packages_form_js_processor_mock_sql_use_data: '使用此數據',
   packages_form_js_processor_mock_json_valid: '格式正確',
@@ -173,7 +177,10 @@ export default {
   packages_form_js_processor_mock_log_no_more: '沒有更多日誌了',
   packages_form_js_processor_mock_log_sql_import:
     '從 SQL 查詢導入 {val1} 條數據',
+  packages_form_js_processor_mock_log_filter_import:
+    '從條件查詢導入 {val1} 條數據',
   packages_form_js_processor_mock_sql_query_fail: 'SQL 查詢失敗',
+  packages_form_js_processor_mock_filter_query_fail: '條件查詢失敗',
   packages_form_js_processor_mock_unknown_error: '未知錯誤',
   packages_form_js_processor_mock_event_insert: '插入',
   packages_form_js_processor_mock_event_update: '更新',