multicluster load fix

dashboard/src/main/home/cluster-dashboard/env-groups/CreateEnvGroup.tsx

@@ -56,30 +56,36 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
     let apiEnvVariables: Record<string, string> = {};
     let secretEnvVariables: Record<string, string> = {};
 
-    let envVariables = this.state.envVariables
-
-    envVariables.filter((envVar: KeyValueType, index : number, self : KeyValueType[]) => {
-      // remove any collisions that are marked as deleted and are duplicates
-      let numCollisions = self.reduce((n, _envVar : KeyValueType) => {
-        return n + (_envVar.key === envVar.key ? 1 : 0);
-      }, 0)
-
-      if (numCollisions == 1) {
-        return true
-      } else {
-        return index === self.findIndex((_envVar : KeyValueType) => (
-          _envVar.key === envVar.key && !_envVar.deleted
-        ))
-      }
-    }).forEach((envVar: KeyValueType) => {
-      if (!envVar.deleted) {
-        if (envVar.hidden) {
-          secretEnvVariables[envVar.key] = envVar.value
+    let envVariables = this.state.envVariables;
+
+    envVariables
+      .filter((envVar: KeyValueType, index: number, self: KeyValueType[]) => {
+        // remove any collisions that are marked as deleted and are duplicates
+        let numCollisions = self.reduce((n, _envVar: KeyValueType) => {
+          return n + (_envVar.key === envVar.key ? 1 : 0);
+        }, 0);
+
+        if (numCollisions == 1) {
+          return true;
         } else {
-          apiEnvVariables[envVar.key] = envVar.value
+          return (
+            index ===
+            self.findIndex(
+              (_envVar: KeyValueType) =>
+                _envVar.key === envVar.key && !_envVar.deleted
+            )
+          );
         }
-      }
-    });
+      })
+      .forEach((envVar: KeyValueType) => {
+        if (!envVar.deleted) {
+          if (envVar.hidden) {
+            secretEnvVariables[envVar.key] = envVar.value;
+          } else {
+            apiEnvVariables[envVar.key] = envVar.value;
+          }
+        }
+      });
 
     api
       .createConfigMap(

dashboard/src/main/home/cluster-dashboard/env-groups/EnvGroupArray.tsx

@@ -91,40 +91,40 @@ export default class EnvGroupArray extends Component<PropsType, StateType> {
     return (
       <>
         {this.props.values.map((entry: KeyValueType, i: number) => {
-            if (!entry.deleted) {
-                return (
-                    <InputWrapper key={i}>
-                      <Input
-                        placeholder="ex: key"
-                        width="270px"
-                        value={entry.key}
-                        onChange={(e: any) => {
-                          let _values = this.props.values
-                          _values[i].key = e.target.value;
-                          this.props.setValues(_values);
-                        }}
-                        disabled={this.props.disabled || entry.locked}
-                        spellCheck={false}
-                      />
-                      <Spacer />
-                      <Input
-                        placeholder="ex: value"
-                        width="270px"
-                        value={entry.value}
-                        onChange={(e: any) => {
-                          let _values = this.props.values
-                          _values[i].value = e.target.value;
-                          this.props.setValues(_values);
-                        }}
-                        disabled={this.props.disabled || entry.locked}
-                        type={entry.hidden ? "password" : "text"}
-                        spellCheck={false}
-                      />
-                      {this.renderHiddenOption(entry.hidden, entry.locked, i)}
-                      {this.renderDeleteButton(i)}
-                    </InputWrapper>
-                  );
-            }
+          if (!entry.deleted) {
+            return (
+              <InputWrapper key={i}>
+                <Input
+                  placeholder="ex: key"
+                  width="270px"
+                  value={entry.key}
+                  onChange={(e: any) => {
+                    let _values = this.props.values;
+                    _values[i].key = e.target.value;
+                    this.props.setValues(_values);
+                  }}
+                  disabled={this.props.disabled || entry.locked}
+                  spellCheck={false}
+                />
+                <Spacer />
+                <Input
+                  placeholder="ex: value"
+                  width="270px"
+                  value={entry.value}
+                  onChange={(e: any) => {
+                    let _values = this.props.values;
+                    _values[i].value = e.target.value;
+                    this.props.setValues(_values);
+                  }}
+                  disabled={this.props.disabled || entry.locked}
+                  type={entry.hidden ? "password" : "text"}
+                  spellCheck={false}
+                />
+                {this.renderHiddenOption(entry.hidden, entry.locked, i)}
+                {this.renderDeleteButton(i)}
+              </InputWrapper>
+            );
+          }
         })}
       </>
     );

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -74,49 +74,58 @@ export default class ExpandedEnvGroup extends Component<PropsType, StateType> {
     let apiEnvVariables: Record<string, string> = {};
     let secretEnvVariables: Record<string, string> = {};
 
-    let envVariables = this.state.envVariables
-
-    envVariables.filter((envVar: KeyValueType, index : number, self : KeyValueType[]) => {
-      // remove any collisions that are marked as deleted and are duplicates, unless they are 
-      // all delete collisions
-      let numDeleteCollisions = self.reduce((n, _envVar : KeyValueType) => {
-        return n + (_envVar.key === envVar.key && envVar.deleted ? 1 : 0);
-      }, 0)
-
-      let numCollisions = self.reduce((n, _envVar : KeyValueType) => {
-        return n + (_envVar.key === envVar.key ? 1 : 0);
-      }, 0)
-
-      if (numCollisions == numDeleteCollisions) {
-        // if all collisions are delete collisions, just remove duplicates
-        return index === self.findIndex((_envVar : KeyValueType) => (
-          _envVar.key === envVar.key
-        ))
-      } else if (numCollisions == 1) {
-        // if there's just one collision (self), keep the object
-        return true
-      } else {
-        // if there are more collisions than delete collisions, remove all duplicates that
-        // are deletions
-        return index === self.findIndex((_envVar : KeyValueType) => (
-          _envVar.key === envVar.key && !_envVar.deleted
-        ))
-      }
-    }).forEach((envVar: KeyValueType) => {
-      if (envVar.hidden) {
-        if (envVar.deleted) {
-          secretEnvVariables[envVar.key] = null
-        } else if (!envVar.value.includes("PORTERSECRET")) {
-          secretEnvVariables[envVar.key] = envVar.value
+    let envVariables = this.state.envVariables;
+
+    envVariables
+      .filter((envVar: KeyValueType, index: number, self: KeyValueType[]) => {
+        // remove any collisions that are marked as deleted and are duplicates, unless they are
+        // all delete collisions
+        let numDeleteCollisions = self.reduce((n, _envVar: KeyValueType) => {
+          return n + (_envVar.key === envVar.key && envVar.deleted ? 1 : 0);
+        }, 0);
+
+        let numCollisions = self.reduce((n, _envVar: KeyValueType) => {
+          return n + (_envVar.key === envVar.key ? 1 : 0);
+        }, 0);
+
+        if (numCollisions == numDeleteCollisions) {
+          // if all collisions are delete collisions, just remove duplicates
+          return (
+            index ===
+            self.findIndex(
+              (_envVar: KeyValueType) => _envVar.key === envVar.key
+            )
+          );
+        } else if (numCollisions == 1) {
+          // if there's just one collision (self), keep the object
+          return true;
+        } else {
+          // if there are more collisions than delete collisions, remove all duplicates that
+          // are deletions
+          return (
+            index ===
+            self.findIndex(
+              (_envVar: KeyValueType) =>
+                _envVar.key === envVar.key && !_envVar.deleted
+            )
+          );
         }
-      } else {
-        if (envVar.deleted) {
-          apiEnvVariables[envVar.key] = null;
+      })
+      .forEach((envVar: KeyValueType) => {
+        if (envVar.hidden) {
+          if (envVar.deleted) {
+            secretEnvVariables[envVar.key] = null;
+          } else if (!envVar.value.includes("PORTERSECRET")) {
+            secretEnvVariables[envVar.key] = envVar.value;
+          }
         } else {
-          apiEnvVariables[envVar.key] = envVar.value;
+          if (envVar.deleted) {
+            apiEnvVariables[envVar.key] = null;
+          } else {
+            apiEnvVariables[envVar.key] = envVar.value;
+          }
         }
-      }
-    });
+      });
 
     this.setState({ saveValuesStatus: "loading" });
     api

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -60,17 +60,22 @@ class ClusterSection extends Component<PropsType, StateType> {
               localStorage.getItem(currentProject.id + "-cluster")
             );
             if (saved !== "null") {
-              setCurrentCluster(clusters[0]);
+              // Ensures currentCluster isn't prematurely set (causes issues downstream)
+              let loaded = false;
               for (let i = 0; i < clusters.length; i++) {
                 if (
                   clusters[i].id === saved.id &&
                   clusters[i].project_id === saved.project_id &&
                   clusters[i].name === saved.name
                 ) {
+                  loaded = true;
                   setCurrentCluster(clusters[i]);
                   break;
                 }
               }
+              if (!loaded) {
+                setCurrentCluster(clusters[0]);
+              }
             } else {
               setCurrentCluster(clusters[0]);
             }
@@ -173,10 +178,10 @@ class ClusterSection extends Component<PropsType, StateType> {
 
   render() {
     return (
-      <div>
+      <>
         {this.renderDrawer()}
         {this.renderContents()}
-      </div>
+      </>
     );
   }
 }