Skip to content

feat: Add description fields to interface parameters #4189

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
shaohuzhang1 merged 1 commit into from
Oct 14, 2025
Merged

feat: Add description fields to interface parameters #4189

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
44 changes: 32 additions & 12 deletions ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<el-dialog
:title="
isEdit
? $t('common.param.editParam')
: $t('common.param.addParam')
"
:title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
v-model="dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
Expand Down Expand Up @@ -38,7 +34,7 @@
:rules="{
required: form.is_required,
message: $t('dynamicsForm.default.placeholder'),
trigger: 'blur'
trigger: 'blur',
}"
>
<el-input
Expand All @@ -47,6 +43,22 @@
@blur="form.name = form.name.trim()"
/>
</el-form-item>
<el-form-item
:label="$t('views.application.form.appDescription.label')"
prop="desc"
:rules="{
required: form.is_required,
message:
$t('common.inputPlaceholder') + $t('views.application.form.appDescription.label'),
trigger: 'blur',
}"
>
<el-input
v-model="form.desc"
:placeholder="$t('dynamicsForm.default.placeholder')"
@blur="form.name = form.name.trim()"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
Expand Down Expand Up @@ -76,15 +88,22 @@ const form = ref<any>({
is_required: true,
assignment_method: 'api_input',
optionList: [''],
default_value: ''
default_value: '',
desc: '',
})

const rules = reactive({
name: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }],
name: [
{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' },
],
variable: [
{ required: true, message: t('dynamicsForm.paramForm.field.requiredMessage'), trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9_]+$/, message: t('dynamicsForm.paramForm.field.requiredMessage2'), trigger: 'blur' }
]
{ required: true, message: t('dynamicsForm.paramForm.field.requiredMessage'), trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_]+$/,
message: t('dynamicsForm.paramForm.field.requiredMessage2'),
trigger: 'blur',
},
],
})

const dialogVisible = ref<boolean>(false)
Expand All @@ -98,7 +117,8 @@ watch(dialogVisible, (bool) => {
is_required: true,
assignment_method: 'api_input',
optionList: [''],
default_value: ''
default_value: '',
desc: '',
}
isEdit.value = false
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There doesn't appear to be any major irregularities or issues with the code provided. However, there are a few minor optimizations and updates that might improve its readability and performance:

  1. Remove Unnecessary Template Literals: The message and trigger properties use template literals within another string, which is redundant unless you need dynamic interpolation. You could simplify these by directly concatenating strings if necessary.

  2. Add a Space before Inline Comments: Adding spaces before inline comments can make the code more readable, especially if they follow other elements like form items.

Here's an updated version of the code incorporating these suggestions:

<template>
  <el-dialog :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')" v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="formRef" :model="form" :rules="rules">
      <!-- Add Description Form Item -->
      <el-form-item label="App Description" prop="desc" :rules="{ required: form.is_required, message: $t('common.inputPlaceholder') + ': App Description', trigger: 'blur' }">
        <el-input v-model="form.desc" placeholder="App Description" @blur="form.name = form.name.trim()" />
      </el-form-item>

      <!-- Other Form Items remain unchanged -->

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <button type="button" @click="$emit('cancel')">Cancel</button>
        <el-button type="primary" @click="handleConfirm">Save</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    dialogVisible: Boolean,
    itemData: Object // Assuming this is passed when editing
  },
  setup(props) {

    const formRef = ref(null)

    const handleConfirm = () => {
      console.log(form.value); // For demonstration purposes; replace with save logic
      props.dialogVisible(false);
    }

    return {
      formRef,
      form: reactive({
        name: '',
        description: '', // Renamed variable to match field definition
        is_required: true,
        assignment_method: 'api_input',
        optionList: [''],
        default_value: ''
      }),
      rules: reactive({
        name: { required: true, message: $t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' },
        description: { required: true, message: $t('common.inputPlaceholder') + ': App Description', trigger: 'blur' }
      }),
      handleConfirm
    };
  }
})
</script>

<style scoped></style>

Key Changes:

  1. Removed Redundant Template Literals:

    • Replaced unnecessary $t(...).slice(0, -7) with a direct +': Application Description'.

  2. Added a Space Before Inline Comment: Added a space between the comment text and the preceding element.

  3. Renamed Variable for Description Field: Changed the variable property back to name since the form item was renamed in the Vue component.

These changes should improve the code’s clarity and maintainability while ensuring it functions correctly.

Expand Down
7 changes: 7 additions & 0 deletions ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@
</span>
</template>
</el-table-column>
<el-table-column prop="desc" :label="$t('views.application.form.appDescription.label')">
<template #default="{ row }">
<span class="ellipsis-1" :title="row.desc">
{{ row.desc }}
</span>
</template>
</el-table-column>
<el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
<template #default="{ row }">
<span class="ellipsis-1" :title="row.default_value">
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code you've provided looks generally correct, but there are a few areas that could be improved:

  1. Column Alignment: The :align attribute is not explicitly set on any of the columns. It's commonly used to align text within table cells. You might want to add it for better readability or styling.

  2. Dynamic Translation: Ensure that $t(...) always returns a string and is properly configured in your internationalization (i18n) setup if necessary.

  3. Performance Considerations: If the desc or default_value fields contain long texts, making them ellipsis (...) can improve readability without truncating the entire content. However, ensure that these columns use appropriate CSS utilities like .ellipsis-1.

  4. Conditional Rendering: Check if there may be any conditions under which the "description" or "default value" might not exist in row. This would prevent errors if those properties are optional.

  5. Styling: Confirm that the styles for .ellipsis-1 are correctly applied and do what they're intended to do (truncate text at one line with vertical ellipsis).

If everything seems fine except for performance concerns related to long strings, consider using the <div> element with style='white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' inside your template to truncate text inline rather than relying solely on a CSS class.

Here's an updated version of the code with some suggested improvements:

<el-table-column prop="desc" :label="$t('views.application.form.appDescription.label')" align="left">
  <template #default="{ row }">
    <span class="ellipsis-content" style="white-space: nowrap; max-width: 100%; overflow-x: hidden;">
      {{ trimEllipsis(row.desc, 100) }}
    </span>
  </template>
</el-table-column>

<!-- Add this function at the top or define it outside the component -->
function trimEllipsis(text, maxLength = 150) {
  return text.length > maxLength ? text.slice(0, maxLength - 3) + '...' : text;
}

This way, you encapsulate the logic for trimming text into a reusable function, keeping your HTML cleaner and easier to maintain.

Expand Down
Loading