Merge branch 'dev/1.10.4' into enterprise

src/components/InputWithPlaceholderSelect.vue

@@ -26,8 +26,18 @@ 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; customPlaceholders?: Array<string> }>()
+const props = defineProps<{
+  modelValue?: string
+  [key: string]: any
+  customPlaceholders?: Array<string>
+  /**
+   * The provided options are available when the input has no value.
+   * If there are suggestions,
+   * the options are added at the end of the list.
+   */
+  options?: Array<string | number>
+}>()
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: string): void
   (e: 'input', v: any): void
@@ -46,20 +56,32 @@ const getMatchPart = () => {
   return matchRet && matchRet[0]
 }
 const { availablePlaceholders } = useSQLAvailablePlaceholder()
-const fetchSuggestions = (queryString: string, cb: any) => {
+
+const convertStrArrToOptArr = (arr: Array<string>): Array<{ value: string }> =>
+  arr.map((item: string) => ({ value: item.toString() }))
+
+const effectivePlaceholders = computed(
+  () => props.customPlaceholders || availablePlaceholders.value,
+)
+
+const getMatchedPlaceholders = () => {
   const matchPart = getMatchPart()
-  let ret: Array<{ value: string }> = []
+  let ret: Array<string> = []
   if (matchPart) {
     const filterReg = new RegExp(escapeRegExp(matchPart), 'i')
-    const availableList = props.customPlaceholders || availablePlaceholders.value
-    ret = availableList.reduce((arr: Array<{ value: string }>, value: string) => {
+    ret = effectivePlaceholders.value.reduce((arr: Array<string>, value: string) => {
       if (filterReg.test(value)) {
-        arr.push({ value })
+        arr.push(value)
       }
       return arr
-    }, [] as Array<{ value: string }>)
+    }, [] as Array<string>)
   }
-  cb(ret)
+  return ret
+}
+
+const fetchSuggestions = (queryString: string, cb: any) => {
+  const ret = [...getMatchedPlaceholders(), ...(props.options ?? [])]
+  cb(convertStrArrToOptArr(ret))
 }
 
 const handleSelect = ({ value: selected }: { value: string }) => {

src/components/SchemaForm.tsx

@@ -29,7 +29,6 @@ import ObjectArrayEditor from './ObjectArrayEditor.vue'
 import Oneof from './Oneof.vue'
 import OneofRefs from './OneofRefs.vue'
 import OneofRefsSelect from './OneofRefsSelect.vue'
-import SelectAllowInput from './SelectAllowInput.vue'
 import TimeInputWithUnitSelect from './TimeInputWithUnitSelect.vue'
 import CertFileInput from './TLSConfig/CertFileInput.vue'
 import CustomInputPassword from './CustomInputPassword.vue'
@@ -69,7 +68,6 @@ const SchemaForm = defineComponent({
     AdvancedSettingContainer,
     CertFileInput,
     InputWithPlaceholderSelect,
-    SelectAllowInput,
     BatchSettings,
   },
   props: {
@@ -411,9 +409,9 @@ const SchemaForm = defineComponent({
           )
         }
         case 'enum':
-          if (customProps.allowCreate && !customProps.multiple) {
+          if (isTemplate) {
             return (
-              <SelectAllowInput
+              <InputWithPlaceholderSelect
                 disabled={isPropertyDisabled}
                 placeholder={property.default?.toString()}
                 modelValue={modelValue}

src/components/SchemaFormItem.tsx

@@ -173,6 +173,18 @@ export default defineComponent({
             />
           )
         case 'enum':
+          if (isTemplate) {
+            return (
+              <InputWithPlaceholderSelect
+                v-model={formItemValue.value}
+                disabled={isDisabled}
+                type={inputType}
+                clearable
+                {...customProps}
+                options={props.symbols}
+              />
+            )
+          }
           return (
             <el-select
               disabled={isDisabled}

src/hooks/Rule/bridge/useComponentsHandlers.ts

@@ -91,7 +91,6 @@ export default (
     })
   }
 
-  const { availablePlaceholders } = useSQLAvailablePlaceholder()
   const { completionProvider } = useAvailableProviders()
   const { availableFields } = useSQLAvailablePlaceholder()
 
@@ -144,17 +143,11 @@ export default (
     const { qos, retain, payload, topic } = components?.parameters?.properties || {}
     if (qos?.type === 'oneof') {
       qos.type = 'enum'
-      qos.symbols = [
-        ...(getSymbolsFromOneOfArr(qos.oneOf) || []),
-        '${qos}',
-        ...availablePlaceholders.value,
-      ]
-      setComponentProps(qos, { filterable: true, allowCreate: true })
+      qos.symbols = [...(getSymbolsFromOneOfArr(qos.oneOf) || []), '${qos}']
     }
     if (retain?.type === 'oneof') {
       retain.type = 'enum'
-      retain.symbols = [true, false, '${flags.retain}', ...availablePlaceholders.value]
-      setComponentProps(retain, { filterable: true, allowCreate: true })
+      retain.symbols = [true, false, '${flags.retain}']
     }
     // for detect whether it is source or action
     if (topic && !payload) {

src/hooks/Schema/useSchemaForm.ts

@@ -89,6 +89,13 @@ export default function useSchemaForm(
   const getComponentByRef = (data: Schema, ref: string | Array<string>): Component =>
     get(data, filter(ref), {})
 
+  const getIsTemplateFromOneOfArr = (oneof: Property['oneOf']): boolean => {
+    if (!oneof) {
+      return false
+    }
+    return oneof.some((item) => item.is_template)
+  }
+
   /**
    * Calling it before components are assigned as much as possible will reduce the number of re-renders,
    * but because sometimes data such as `format` may be custom modified by the parent component
@@ -202,6 +209,8 @@ export default function useSchemaForm(
               }
               return item
             }) as Property[]
+            property.is_template = getIsTemplateFromOneOfArr(property.oneOf)
+            console.log(property.path)
           }
           if (!label) {
             property.label = lastLabel

src/views/RuleEngine/components/RePubForm.vue

@@ -17,12 +17,12 @@
       </el-col>
       <el-col :span="getColSpan(6)">
         <CustomFormItem label="QoS" :readonly="readonly">
-          <SelectAllowInput v-model="record.args.qos" :options="QoSOptions" />
+          <InputWithPlaceholderSelect v-model="record.args.qos" :options="QoSOptions" />
         </CustomFormItem>
       </el-col>
       <el-col :span="getColSpan(6)">
         <CustomFormItem label="Retain" :readonly="readonly">
-          <SelectAllowInput v-model="record.args.retain" :options="retainOptions" />
+          <InputWithPlaceholderSelect v-model="record.args.retain" :options="retainOptions" />
         </CustomFormItem>
       </el-col>
       <el-col :span="24">
@@ -89,17 +89,17 @@ 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 SelectAllowInput from '@/components/SelectAllowInput.vue'
+import InputWithPlaceholderSelect from '@/components/InputWithPlaceholderSelect.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'
 import { RuleEngineBuiltinActionRepublish } from '@/types/schemas/rules.schemas'
 import { FormProps } from 'element-plus'
 import PubProps from './PubProps.vue'
 import type { ComputedRef, PropType } from 'vue'
 import { computed, defineEmits, defineExpose, defineProps, ref } from 'vue'
+import PubProps from './PubProps.vue'
 
 type RePubForm = RuleEngineBuiltinActionRepublish | any
 
@@ -142,12 +142,11 @@ const togglePubPropsEnabled = (val: string | number | boolean) => {
   }
 }
 
-const { availablePlaceholders } = useSQLAvailablePlaceholder()
 const { completionProvider } = useAvailableProviders()
 
-const QoSOptions = [...defaultQoSOptions, '${qos}', ...availablePlaceholders.value]
+const QoSOptions = [...defaultQoSOptions, '${qos}']
 
-const retainOptions = [true, false, '${flags.retain}', ...availablePlaceholders.value]
+const retainOptions = [true, false, '${flags.retain}']
 
 const record = computed({
   get() {

yarn.lock

@@ -1196,9 +1196,9 @@
   integrity sha512-okdrwiVeKBmW41Hkl0eMrXDjzJwhQMuKiBOu17rOszqM+LS/yBYpNQNV5Jvoh06Wc+89fMmb/uhzf8NZuDuUaQ==
 
 "@emqx/shared-ui-i18n@~0.0.25":
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/@emqx/shared-ui-i18n/-/shared-ui-i18n-0.0.30.tgz#d68bbf9a2ea5f7b8469cc07ef81c3ebde76ff0ce"
-  integrity sha512-7eaCgptuGtTp1PwLSXzksyOdnUnH3bN6p6XCo/gWW4RqStVBW9dDIp1JeTT0RDrzKU3ucobbIiejVBW2ZX9Vcg==
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/@emqx/shared-ui-i18n/-/shared-ui-i18n-0.0.33.tgz#0c5aff82615f28dce2d7f2ec216e4dcee63e78eb"
+  integrity sha512-qR6w8nKWrpokjEnqHlXwhcbHmNSlPoKXue6t6r0mWqW8nYDfhfKKt+g54ZXuCnhhThZn5yykGP6Acu2uqaF2SQ==
 
 "@emqx/shared-ui-utils@^0.0.14":
   version "0.0.14"