Merge pull request #2742 from emqx/dev/1.9.1

Sync code from refs/heads/dev/1.9.1 to enterprise
emqx · Jun 12, 2024 · fff225b · fff225b
2 parents 59ddecf + c8a17e7
commit fff225b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/src/components/InputWithPlaceholderSelect.vue b/src/components/InputWithPlaceholderSelect.vue
@@ -26,7 +26,8 @@ import useSQLAvailablePlaceholder from '@/hooks/Rule/useSQLAvailablePlaceholder'
 import { escapeRegExp } from 'lodash'
 import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 
-const props = defineProps<{ modelValue?: string; [key: string]: any }>()
+const props =
+  defineProps<{ modelValue?: string; [key: string]: any; customPlaceholders?: Array<string> }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', v: string): void
   (e: 'input', v: any): void
@@ -50,7 +51,8 @@ const fetchSuggestions = (queryString: string, cb: any) => {
   let ret: Array<{ value: string }> = []
   if (matchPart) {
     const filterReg = new RegExp(escapeRegExp(matchPart), 'i')
-    ret = availablePlaceholders.value.reduce((arr, value) => {
+    const availableList = props.customPlaceholders || availablePlaceholders.value
+    ret = availableList.reduce((arr: Array<{ value: string }>, value: string) => {
       if (filterReg.test(value)) {
         arr.push({ value })
       }

diff --git a/src/components/SelectAllowInput.vue b/src/components/SelectAllowInput.vue
@@ -1,15 +1,20 @@
 <!-- Only one can be selected -->
 <template>
-  <el-autocomplete v-model="inputValue" clearable :fetch-suggestions="querySearch" />
+  <el-autocomplete
+    v-model="inputValue"
+    clearable
+    :fetch-suggestions="querySearch"
+    v-bind="$attrs"
+  />
 </template>
 
 <script setup lang="ts">
-import { isObject, isUndefined } from 'lodash'
+import { escapeRegExp, isObject, isUndefined } from 'lodash'
 import { computed, defineEmits, defineProps, withDefaults } from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
+    modelValue?: string | boolean | number
     options: Array<Record<string, any>> | Array<string> | Array<number>
     valueKey?: string
     labelKey?: string
@@ -21,11 +26,11 @@ const props = withDefaults(
   },
 )
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: string | number | boolean): void
 }>()
 
 const inputValue = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue?.toString?.(),
   set: (val) => emit('update:modelValue', val),
 })
 
@@ -45,6 +50,20 @@ const opts = computed(() => {
 })
 
 const querySearch = (queryString: string, cb: (arg0: Array<Record<string, any>>) => void) => {
-  cb(opts.value)
+  if (!queryString) {
+    cb(opts.value)
+  } else {
+    const filterReg = new RegExp(escapeRegExp(queryString), 'i')
+    const ret = opts.value.reduce(
+      (arr: Array<{ value: string }>, { value }: { value: string; item: string }) => {
+        if (filterReg.test(value)) {
+          arr.push({ value })
+        }
+        return arr
+      },
+      [] as Array<{ value: string }>,
+    )
+    cb(ret)
+  }
 }
 </script>
diff --git a/src/hooks/Rule/bridge/useComponentsHandlers.ts b/src/hooks/Rule/bridge/useComponentsHandlers.ts
@@ -75,6 +75,11 @@ export default (
     }, [])
   }
 
+  const setComponentProps = (prop: Property, componentProps: Record<string, any>) => {
+    prop.componentProps = Object.assign(prop.componentProps || {}, componentProps)
+  }
+
+  const { availablePlaceholders } = useSQLAvailablePlaceholder()
   const { completionProvider } = useAvailableProviders()
   const { availableFields } = useSQLAvailablePlaceholder()
 
@@ -89,15 +94,9 @@ export default (
         prop.format === 'sql' &&
         prop.is_template
       ) {
-        if (!prop.componentProps) {
-          prop.componentProps = {}
-        }
-        prop.componentProps.completionProvider = completionProvider
+        setComponentProps(prop, { completionProvider })
       } else if (prop.type === 'object' && !prop.properties && prop.is_template) {
-        if (!prop.componentProps) {
-          prop.componentProps = {}
-        }
-        prop.componentProps.supportPlaceholder = ['key', 'value']
+        setComponentProps(prop, { supportPlaceholder: ['key', 'value'] })
       }
     }
 
@@ -133,13 +132,17 @@ export default (
     const { qos, retain, payload, topic } = components?.parameters?.properties || {}
     if (qos?.type === 'oneof') {
       qos.type = 'enum'
-      qos.symbols = [...(getSymbolsFromOneOfArr(qos.oneOf) || []), '${qos}']
-      qos.componentProps = { filterable: true, allowCreate: true }
+      qos.symbols = [
+        ...(getSymbolsFromOneOfArr(qos.oneOf) || []),
+        '${qos}',
+        ...availablePlaceholders.value,
+      ]
+      setComponentProps(qos, { filterable: true, allowCreate: true })
     }
     if (retain?.type === 'oneof') {
       retain.type = 'enum'
-      retain.symbols = [true, false, '${flags.retain}']
-      retain.componentProps = { filterable: true, allowCreate: true }
+      retain.symbols = [true, false, '${flags.retain}', ...availablePlaceholders.value]
+      setComponentProps(retain, { filterable: true, allowCreate: true })
     }
     // for detect whether it is source or action
     if (topic && !payload) {

diff --git a/src/views/RuleEngine/components/RePubForm.vue b/src/views/RuleEngine/components/RePubForm.vue
@@ -44,6 +44,7 @@
               json-without-validate
               :disabled="readonly"
               :id="createRandomString()"
+              :completion-provider="completionProvider"
             />
           </div>
         </CustomFormItem>
@@ -137,8 +138,9 @@ import { QoSOptions as defaultQoSOptions } from '@/common/constants'
 import { createRandomString } from '@/common/tools'
 import CustomFormItem from '@/components/CustomFormItem.vue'
 import FormItemLabel from '@/components/FormItemLabel.vue'
-import Monaco from '@/components/Monaco.vue'
 import SelectAllowInput from '@/components/SelectAllowInput.vue'
+import Monaco from '@/components/Monaco.vue'
+import { useAvailableProviders } from '@/hooks/Rule/useProvidersForMonaco'
 import useSQLAvailablePlaceholder from '@/hooks/Rule/useSQLAvailablePlaceholder'
 import useFormRules from '@/hooks/useFormRules'
 import useI18nTl from '@/hooks/useI18nTl'
@@ -188,6 +190,7 @@ const togglePubPropsEnabled = (val: string | number | boolean) => {
 }
 
 const { availablePlaceholders } = useSQLAvailablePlaceholder()
+const { completionProvider } = useAvailableProviders()
 
 const QoSOptions = [...defaultQoSOptions, '${qos}', ...availablePlaceholders.value]