fix: Prevent crashes when accessing cluster details

- 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>
kubevela · Oct 4, 2024 · 5703b22 · 5703b22
1 parent 5704854
commit 5703b22
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx b/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx
@@ -55,27 +55,28 @@ class AddClusterDialog extends React.Component<Props, State> {
       });
     }
   };
-
+  
   onClose = () => {
     this.props.onClose();
     this.resetField();
   };
 
   onOk = () => {
     const { editMode, cluster } = this.state;
+    const { editClusterName } = this.props;
     this.field.validate((error: any, values: any) => {
       if (error) {
         return;
       }
       if (editMode) {
         updateCluster({
-          name: cluster.name,
+          name: cluster?.name || editClusterName,
           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 +141,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 +171,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 +188,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                   <Input
                     name="alias"
                     {...init('alias', {
-                      initValue: cluster.alias,
+                      initValue: cluster?.alias,
                       rules: [
                         {
                           minLength: 2,
@@ -204,10 +205,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 +224,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                   <Input
                     name="dashboardURL"
                     {...init('dashboardURL', {
-                      initValue: cluster.dashboardURL,
+                      initValue: cluster?.dashboardURL,
                       rules: [
                         {
                           required: false,
@@ -252,7 +253,7 @@ class AddClusterDialog extends React.Component<Props, State> {
                       language={'yaml'}
                       readOnly={false}
                       {...init('kubeConfig', {
-                        initValue: cluster.kubeConfig,
+                        initValue: cluster?.kubeConfig,
                         rules: [
                           {
                             required: true,