fix: Prevent crashes when accessing cluster details (#911)

- Added optional chaining to safely access cluster details in `AddClusterDialog`.

This fix addresses the issue where the page crashes when trying to load details for an inaccessible cluster.

Signed-off-by: am6737 <1359816810@qq.com>

.github/workflows/commit-lint.yml

@@ -11,9 +11,11 @@ on:
 jobs:
   check:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
       - uses: thehanimo/pr-title-checker@v1.4.2
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           pass_on_octokit_error: true
-          configuration_path: ".github/pr-title-checker-config.json"
+          configuration_path: '.github/pr-title-checker-config.json'

.github/workflows/server-test.yml

@@ -54,7 +54,7 @@ jobs:
           submodules: true
 
       - name: Cache Go Dependencies
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9
+        uses: actions/cache@v4
         with:
           path: .work/pkg
           key: ${{ runner.os }}-pkg-${{ hashFiles('**/go.sum') }}

packages/velaux-ui/src/components/HelmValueShow/index.tsx

@@ -14,6 +14,8 @@ const HelmValueShow: React.FC<Props> = (props: Props) => {
   const [valueFile, setValueFile] = React.useState<string>('values.yaml');
   return (
     <Dialog
+      style={{ width: '60vw' }}
+      closeMode={["close", "mask"]}
       className={'helmValueDialog'}
       overflowScroll={true}
       visible={true}

packages/velaux-ui/src/layout/Header/components/EditPlatFormUserDialog/index.tsx

@@ -109,7 +109,7 @@ class EditPlatFormUserDialog extends Component<Props, State> {
                         {
                           required: true,
                           pattern: checkName,
-                          message: <Translation>You must input a valid name</Translation>,
+                          message: <Translation>You must input a valid name with alphanumeric character only</Translation>,
                         },
                       ],
                     })}
@@ -139,7 +139,7 @@ class EditPlatFormUserDialog extends Component<Props, State> {
                           pattern: checkUserPassword,
                           message: (
                             <Translation>
-                              Password should be 8-16 bits and contain at least one number and one letter
+                                Password must be alphanumeric, contain at least one letter and one number, and be 8-16 characters long
                             </Translation>
                           ),
                         },

packages/velaux-ui/src/locals/Zh/zh.json

@@ -329,6 +329,7 @@
   "Only support github repo url（master branch）": "仅支持 GitHub repo（主分支） 链接",
   "Are you sure to delete?": "确认要删除吗？",
   "Please enter a valid name": "请输入一个有效的名称",
+  "Please enter a valid name having alphanumeric characters only": "请输入仅包含字母数字字符的有效名称",
   "This addon is experimental, please don't use it in production": "本插件是试用性，请不要在生产环境中使用",
   "Dependencies": "依赖",
   "Enable the addon to obtain the following extension capabilities": "启用插件以使用如下扩展能力",
@@ -534,6 +535,7 @@
   "Environment binding deleted successfully": "成功移除环境绑定",
   "Retry": "重试",
   "Password should be 8-16 bits and contain at least one number and one letter": "密码应为8-16位, 并至少包含一个数字和一个字母",
+  "Password must be alphanumeric, contain at least one letter and one number, and be 8-16 characters long": "密码必须是字母数字，至少包含一个字母和一个数字，长度为 8-16 个字符",
   "Please input a valid email": "请输入有效的电子邮件地址",
   "Please input a email": "请输入电子邮箱地址",
   "User updated successfully": "用户更新成功",
@@ -652,4 +654,4 @@
   "Click me to open the dex login page": "点击我打开 Dex 登录页面",
   "Setting the default projects for the dex login user": "设置 Dex 登录用户的默认项目",
   "Join Time": "加入时间"
-}
+}

packages/velaux-ui/src/pages/Addons/components/detail/index.tsx

@@ -517,7 +517,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
                   schema
                     ? [
                         <Button
-                          style={{ marginTop: '-12px', alignItems: 'center', display: 'flex' }}
+                          style={{ alignItems: 'center', display: 'flex' }}
                           onClick={() => {
                             if (propertiesMode === 'native') {
                               this.setState({ propertiesMode: 'code' });

packages/velaux-ui/src/pages/ApplicationConfig/components/TraitDialog/index.tsx

@@ -195,14 +195,28 @@ class TraitDialog extends React.Component<Props, State> {
       .then((re) => {
         if (re) {
           this.setState({ definitionDetail: re, definitionLoading: false });
-          if (callback) {
+          this.setDefaultProperties(re)
-            callback();
+            if (callback) {
-          }
+              callback();
+            }
         }
       })
       .catch(() => this.setState({ definitionLoading: false }));
   };
 
+  setDefaultProperties = (definitionDetail: any) => {
+    const properties = definitionDetail.schema?.properties;
+    if (properties) {
+        const defaultValues: Record<string, any> = {};
+        for (const key in properties) {
+            if (properties[key].default !== undefined) {
+                defaultValues[key] = properties[key].default;
+            }
+        }
+        this.field.setValues({ properties: defaultValues });
+    }
+  };
+
   handleTypeChange = (value: string) => {
     this.removeProperties();
     this.field.setValues({ type: value });

packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx

@@ -55,7 +55,7 @@ class AddClusterDialog extends React.Component<Props, State> {
       });
     }
   };
-
+  
   onClose = () => {
     this.props.onClose();
     this.resetField();
@@ -69,13 +69,13 @@ class AddClusterDialog extends React.Component<Props, State> {
       }
       if (editMode) {
         updateCluster({
-          name: cluster.name,
+          name: cluster?.name,
           alias: values.alias,
-          icon: cluster.icon,
+          icon: cluster?.icon,
           description: values.description,
           dashboardURL: values.dashboardURL,
           kubeConfig: values.kubeConfig,
-          labels: cluster.labels,
+          labels: cluster?.labels,
         }).then((re: any) => {
           if (re) {
             Message.success(<Translation>cluster update success</Translation>);
@@ -140,7 +140,7 @@ class AddClusterDialog extends React.Component<Props, State> {
     };
     const init = this.field.init;
     const values: { kubeConfig: string } = this.field.getValues();
-    const valueInfo = cluster.kubeConfig || values.kubeConfig || '';
+    const valueInfo = cluster?.kubeConfig || values.kubeConfig || '';
     return (
       <Dialog
         locale={locale().Dialog}
@@ -170,7 +170,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                     name="name"
                     disabled={editMode}
                     {...init('name', {
-                      initValue: cluster.name,
+                      initValue: cluster?.name || editClusterName,
                       rules: [
                         {
                           required: true,
@@ -187,7 +187,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                   <Input
                     name="alias"
                     {...init('alias', {
-                      initValue: cluster.alias,
+                      initValue: cluster?.alias,
                       rules: [
                         {
                           minLength: 2,
@@ -204,10 +204,10 @@ class AddClusterDialog extends React.Component<Props, State> {
               <Col span={12} style={{ padding: '0 8px' }}>
                 <FormItem label={<Translation>Description</Translation>}>
                   <Input
-                    defaultValue={cluster.description}
+                    defaultValue={cluster?.description}
                     name="description"
                     {...init('description', {
-                      initValue: cluster.description,
+                      initValue: cluster?.description,
                       rules: [
                         {
                           maxLength: 256,
@@ -223,7 +223,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                   <Input
                     name="dashboardURL"
                     {...init('dashboardURL', {
-                      initValue: cluster.dashboardURL,
+                      initValue: cluster?.dashboardURL,
                       rules: [
                         {
                           required: false,
@@ -252,7 +252,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                       language={'yaml'}
                       readOnly={false}
                       {...init('kubeConfig', {
-                        initValue: cluster.kubeConfig,
+                        initValue: cluster?.kubeConfig,
                         rules: [
                           {
                             required: true,

packages/velaux-ui/src/pages/Users/components/CreateUser/index.tsx

@@ -168,7 +168,7 @@ class CreateUser extends React.Component<Props, State> {
                         {
                           required: true,
                           pattern: checkName,
-                          message: <Translation>Please enter a valid name</Translation>,
+                          message: <Translation>Please enter a valid name having alphanumeric characters only</Translation>,
                         },
                       ],
                     })}
@@ -209,7 +209,7 @@ class CreateUser extends React.Component<Props, State> {
                             pattern: checkUserPassword,
                             message: (
                               <Translation>
-                                Password should be 8-16 bits and contain at least one number and one letter
+                                Password must be alphanumeric, contain at least one letter and one number, and be 8-16 characters long
                               </Translation>
                             ),
                           },

packages/velaux-ui/src/pages/Users/components/ResetPassword/index.tsx

@@ -117,7 +117,7 @@ class ResetPassword extends React.Component<Props, State> {
                           pattern: checkUserPassword,
                           message: (
                             <Translation>
-                              Password should be 8-16 bits and contain at least one number and one letter
+                              Password must be alphanumeric, contain at least one letter and one number, and be 8-16 characters long
                             </Translation>
                           ),
                         },