Add casing to prevent crash on empty env group

dashboard/src/components/porter-form/field-components/KeyValueArray.tsx

@@ -13,7 +13,7 @@ import Modal from "../../../main/home/modals/Modal";
 import LoadEnvGroupModal from "../../../main/home/modals/LoadEnvGroupModal";
 import EnvEditorModal from "../../../main/home/modals/EnvEditorModal";
 import { hasSetValue } from "../utils";
-import _, { omit } from "lodash";
+import _, { isObject, omit } from "lodash";
 import Helper from "components/form-components/Helper";
 import Heading from "components/form-components/Heading";
 import Loading from "components/Loading";
@@ -595,37 +595,46 @@ const ExpandableEnvGroup: React.FC<{
         {isExpanded && (
           <>
             <Buffer />
-            {Object.entries(envGroup.variables || {})?.map(
-              ([key, value], i: number) => {
-                // Preprocess non-string env values set via raw Helm values
-                if (typeof value === "object") {
-                  value = JSON.stringify(value);
-                } else {
-                  value = String(value);
-                }
-
-                return (
-                  <InputWrapper key={i}>
-                    <Input
-                      placeholder="ex: key"
-                      width="270px"
-                      value={key}
-                      disabled
-                    />
-                    <Spacer />
-                    <Input
-                      placeholder="ex: value"
-                      width="270px"
-                      value={value}
-                      disabled
-                      type={
-                        value.includes("PORTERSECRET") ? "password" : "text"
-                      }
-                    />
-                  </InputWrapper>
-                );
-              }
+            {isObject(envGroup.variables) ? (
+              <>
+                {Object.entries(envGroup.variables || {})?.map(
+                  ([key, value], i: number) => {
+                    // Preprocess non-string env values set via raw Helm values
+                    if (typeof value === "object") {
+                      value = JSON.stringify(value);
+                    } else {
+                      value = String(value);
+                    }
+
+                    return (
+                      <InputWrapper key={i}>
+                        <Input
+                          placeholder="ex: key"
+                          width="270px"
+                          value={key}
+                          disabled
+                        />
+                        <Spacer />
+                        <Input
+                          placeholder="ex: value"
+                          width="270px"
+                          value={value}
+                          disabled
+                          type={
+                            value.includes("PORTERSECRET") ? "password" : "text"
+                          }
+                        />
+                      </InputWrapper>
+                    );
+                  }
+                )}
+              </>
+            ) : (
+              <NoVariablesTextWrapper>
+                This env group has no variables yet
+              </NoVariablesTextWrapper>
             )}
+
             <Br />
           </>
         )}
@@ -873,3 +882,10 @@ const ActionButton = styled.button`
     font-size: 20px;
   }
 `;
+
+const NoVariablesTextWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff99;
+`;

dashboard/src/main/home/modals/LoadEnvGroupModal.tsx

@@ -20,6 +20,7 @@ import {
 } from "components/porter-form/types";
 import Helper from "components/form-components/Helper";
 import DocsHelper from "components/DocsHelper";
+import { isObject } from "lodash";
 
 type PropsType = {
   namespace: string;
@@ -157,6 +158,9 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
   };
 
   potentiallyOverriddenKeys(incoming: Record<string, string>): KeyValue[] {
+    if (!incoming) {
+      return [];
+    }
     // console.log(incoming, this.props.existingValues);
     return Object.entries(incoming)
       .filter(([key]) => this.props.existingValues[key])
@@ -227,12 +231,18 @@ export default class LoadEnvGroupModal extends Component<PropsType, StateType> {
           {this.state.selectedEnvGroup && (
             <SidebarSection>
               <GroupEnvPreview>
-                {Object.entries(this.state.selectedEnvGroup.variables)
-                  .map(
-                    ([key, value]) =>
-                      `${key}=${formattedEnvironmentValue(value)}`
-                  )
-                  .join("\n")}
+                {isObject(this.state.selectedEnvGroup.variables) ? (
+                  <>
+                    {Object.entries(this.state.selectedEnvGroup.variables || {})
+                      .map(
+                        ([key, value]) =>
+                          `${key}=${formattedEnvironmentValue(value)}`
+                      )
+                      .join("\n")}
+                  </>
+                ) : (
+                  <>This environment group has no variables</>
+                )}
               </GroupEnvPreview>
               {clashingKeys?.length > 0 && (
                 <>