feat: Add create MCP function

[shaohuzhang1]

feat: Add create MCP function

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

Review of Code

1. Imports and Typings:

   • The import statements are correct, but ensure all necessary types and modules are imported to avoid errors.

2. Vue Composition API:

   • Everything is written using Vue 3's composition API (defineProps, reactive, ref, etc.), which is good practice.
   • All components used within the <template> section are correctly referenced.

3. Computed Properties and Reactive Variables:

   • apiType uses route.path.includes(...), which ensures it fetches only the current shared tools' apiType when needed.
   • Other reactive properties like form, rules, visible, and isEdit are defined appropriately using reactive.

4. Event Handling:

   • Event handlers for closing the drawer, refreshing tool data, opening an avatar edit dialog, submitting the form, and navigating away are implemented correctly.
   • Error handling in these event callbacks seems adequate.

5. Validation Rules:

   • Validation rules include required fields and specific messages for certain elements. This helps guide users during input.

6. Function Definitions:

   • Functions such as close(), refreshTool(), openEditAvatar(), and submit() are well-defined and follow proper logic flow.

7. Unused Components:

   • Commented-out imports can be safely removed unless they're re-used later.

Potential Issues

1. Loading Indicator:

   • Loading indicators are currently set to global values (v-loading) without specifying them per component. Ensure that this works according to your application's needs.

2. State Management:

   • Ensure that the store (useStore()) consistently manages state across different contexts (e.g., editing vs. creating).

Optimization Suggestions

1. Component Caching:

   • Use caching mechanisms provided by Element Plus if appropriate for better performance with repeated renderings.

2. Code Formatting:

   • Although you've requested conciseness, ensure consistent formatting across similar sections to improve readability.

3. Error Boundary Handling:

   • Consider adding error boundary handling around AJAX requests or other asynchronous operations to handle unexpected errors more gracefully.

Overall, the code looks clean and functional, adhering to best practices for Vue 3 and TypeScript projects.

[shaohuzhang1]

The provided code is mostly clean but has a few areas that could be improved:

1. Template Tags: There are some unnecessary HTML comments and tags like <template #label> without corresponding content. These should either contain text or conditional rendering logic.

2. Error Handling: The @submit.prevent does not do anything meaningful because there's no form submission in this component. It would work with Vue forms, so ensure you have a valid form set up for handling submissions.

3. Language Translation References ($t) Usage: Ensure all $t references point to existing keys in your translation files. If they don't exist, replace them with suitable placeholders like 'common.someKey'.

4. Conditional Rendering Logic: In the v-if block for mcp_tool_id, you've added required validation rules directly within the template using inline script. This can make it difficult to manage and test changes later. Consider moving these rules into an array of objects or outside the template where it's easier to read and maintain.

Here’s a slightly adjusted version with a focus on improving readability and ensuring proper usage ofVue features:

<template>
  <!-- Form definition goes here -->
</template>

<script setup lang="ts">
// Import statements and other variables defined below...

function submit() {
  paramFormRef.value.validate((valid: boolean) =>
    valid && emit('refresh', form.value)
  ).catch(() => {});
}
</script>

Additional Corrections:

1. Move Conditional Validation Rules Outside Template:

const rules = [
{
  validator: (_, value) => !!value || ($i18n.t("common.inputRequired") + " MCP Tool"),
},
]

<el-form-item label="MCP Tool" prop="mcpToolId" :rules="rules">
  <!-- Select Input Placeholder-->
</el-form-item>

This way, rules remain decoupled from the UI elements. Also, handle errors gracefully during validation.

2. Simplify Form Item Label with Inline Tooltip:

<label>
  MCP Tool Required *
  <Tooltip icon="el-icon-exclamation-circle"></Tooltip>
</label>

For tooltips, include a proper tooltip provider such as Element Plus’s ElTooltip.

By implementing these corrections and enhancements, the code will become more robust, user-friendly, and maintainable while keeping its functionality intact.

[shaohuzhang1]

The provided code seems to be an update from version 2021-09-01 to 2025-08-19, focusing on optimizing UI components within Vue.js. Here’s a concise analysis and suggested improvements:

Improvements

1. Consistent Code Formatting:

   • Ensure consistent indentation and spacing throughout the codebase for readability.

2. Optimized Template Structure:

   • Use semantic tags (<div>, <el-button> etc.) appropriately based on their semantics.
   • Simplify nested divs with classes where possible, e.g., using shorthand inline styles instead of multiple classes.

3. Conditional Rendering Optimization:

   • Replace @refreshForm="refreshParam" with dynamic data binding or methods when necessary to optimize performance and make the code more maintainable.

4. Refactored Method Names:

   • Make method names descriptive and follow naming conventions (e.g., getReasoningParams() -> fetchReasoningParams()).

5. Duplicated Code Removal:

   • The duplicate logic in loading tool select options can be consolidated into one reusable function.

   // Define a generic getSelectModel function
   async function getSelectModel(type: string): Promise<any[] | undefined> {
     const obj: any = type === 'tool' ? {
       scope: 'WORKSPACE',
       tool_type: 'CUSTOM',
       ...(application.value?.workspace_id && { workspace_id: application.value.workspace_id }),
     } : {};
   
     return await loadSharedApi({ type }).getAllToolList(obj);
   }

6. Code Clean-Up:

   • Remove unnecessary comments that don't add value.
   • Optimize variable assignments and declarations, such as initializing constants with default values.

7. Typo Correction:

   • Fix typos like 'app-setting' should likely be 'icon-name='.

By applying these optimizations, you can improve the efficiency, readability, and maintainability of the codebase while adhering to best practices.