improve(desktop): minor improvements

1. expand the size of textboxes in Script -> Schema tab 2. use `$tc` instead of `$t` (i18n) to avoid type assertion 3. improve code style
emqx · Sep 14, 2024 · 287be0b · 287be0b
1 parent afe5bcb
commit 287be0b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 39 deletions.
diff --git a/src/components/UseScript.vue b/src/components/UseScript.vue
@@ -123,7 +123,7 @@ export default class UseScript extends Vue {
     this.functions = functions
 
     this.schemas =
-      this.currentSchemaType == null
+      this.currentSchemaType === null
         ? []
         : schemas.filter((s) => s.name.endsWith(this.defaultSchemaTypes[this.currentSchemaType!].extension))
   }

diff --git a/src/utils/scriptTest.ts b/src/utils/scriptTest.ts
@@ -19,6 +19,6 @@ export const scriptTest = (
       const avroResult = checkAvroInput(script, inputValue, inputType)
       return avroResult
     default:
-      return 'Test Error!'
+      return 'Test Error: Unsupported script type.'
   }
 }
diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -1867,13 +1867,12 @@ export default class ConnectionsDetail extends Vue {
       return payload
     }
 
-    // TODO: separate Function and Schema from `ScriptState`
-    if (!this.scriptOption.schema.type || this.scriptOption.schema.type === 'javascript') {
-      this.$message.error('Convertion: Schema type is not defined or is not supported.')
-      return undefined
-    }
-
     try {
+      // TODO: separate Function and Schema from `ScriptState`
+      if (!this.scriptOption.schema.type || this.scriptOption.schema.type === 'javascript') {
+        throw new Error('Conversion: Schema type is not defined or not supported.')
+      }
+
       switch (msgType) {
         case 'publish': {
           return this.serializeWithSchema(

diff --git a/src/views/script/index.vue b/src/views/script/index.vue
@@ -119,7 +119,7 @@
     <div
       class="editor-container script-editor script-test-input"
       :style="{
-        height: '80px',
+        height: '160px',
       }"
     >
       <Editor
@@ -154,7 +154,7 @@
     <el-row class="script-test-row script-test-output" :gutter="20">
       <el-col :span="24">
         <label>{{ $t('script.output') }}</label>
-        <el-input v-model="outputValue" type="textarea" rows="4" disabled></el-input>
+        <el-input v-model="outputValue" type="textarea" rows="16" disabled></el-input>
       </el-col>
     </el-row>
 
@@ -228,16 +228,16 @@ export default class Script extends Vue {
     // function tab or schema tab
     switch (this.activeTab) {
       case 'functionTab':
-        return this.$t('script.uploadJs') as string
+        return this.$tc('script.uploadJs')
 
       case 'schemaTab':
         // protobuf or avro
         switch (this.currentSchema) {
           case 'protobuf':
-            return this.$t('script.uploadProto') as string
+            return this.$tc('script.uploadProto')
 
           case 'avro':
-            return this.$t('script.uploadAvsc') as string
+            return this.$tc('script.uploadAvsc')
         }
     }
   }
@@ -363,33 +363,22 @@ message Person {
           )
         }
       } else {
-        switch (this.currentSchema) {
-          case 'protobuf':
-            if (!this.protoName) {
-              this.$message.warning(this.$tc('script.mustProtoName'))
-              return
-            }
-
-            this.outputValue = scriptTest(
-              this.schemaEditorValue,
-              this.currentSchema,
-              this.schemaInputValue,
-              this.schemaInputType,
-              {
-                name: this.protoName,
-              },
-            )
-            break
-
-          case 'avro':
-            this.outputValue = scriptTest(
-              this.schemaEditorValue,
-              this.currentSchema,
-              this.schemaInputValue,
-              this.schemaInputType,
-            )
-            break
+        // Send a warning message if proto name is not defined when testing protobuf
+        if (this.currentSchema === 'protobuf' && this.protoName === '') {
+          this.$message.warning(this.$tc('script.mustProtoName'))
+          return
         }
+
+        // set the value in the output textbox
+        this.outputValue = scriptTest(
+          this.schemaEditorValue,
+          this.currentSchema,
+          this.schemaInputValue,
+          this.schemaInputType,
+          {
+            name: this.protoName,
+          },
+        )
       }
     } catch (error) {
       this.$message.error((error as Error).toString())