resolve app env comments (#4257)

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvGroupRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useHistory } from "react-router";
@@ -15,25 +15,31 @@ import EnvGroupArray from "main/home/env-dashboard/EnvGroupArray";
 
 type Props = {
   onRemove: (name: string) => void;
-  envGroup: any;
+  envGroup: {
+    name: string;
+    id: number;
+    type: string;
+    isActive: boolean;
+    variables: Record<string, string>;
+    secret_variables: Record<string, string>;
+  };
 };
 
 // TODO: support footer for consolidation w/ app services
 const EnvGroupRow: React.FC<Props> = ({ envGroup, onRemove }) => {
   const history = useHistory();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [envVariables, setEnvVariables] = useState([]);
 
-  useEffect(() => {
+  const variables = useMemo(() => {
     const normalVariables = Object.entries(
       envGroup.variables || {}
     ).map(([key, value]) => ({
       key,
       value,
-      hidden: (value as string).includes("PORTERSECRET"),
-      locked: (value as string).includes("PORTERSECRET"),
+      hidden: value.includes("PORTERSECRET"),
+      locked: value.includes("PORTERSECRET"),
       deleted: false,
     }));
+  
     const secretVariables = Object.entries(
       envGroup.secret_variables || {}
     ).map(([key, value]) => ({
@@ -43,8 +49,8 @@ const EnvGroupRow: React.FC<Props> = ({ envGroup, onRemove }) => {
       locked: true,
       deleted: false,
     }));
-    const variables = [...normalVariables, ...secretVariables];
-    setEnvVariables(variables);
+  
+    return [...normalVariables, ...secretVariables];
   }, [envGroup]);
 
   return (
@@ -77,7 +83,7 @@ const EnvGroupRow: React.FC<Props> = ({ envGroup, onRemove }) => {
       )}
     >
       <EnvGroupArray
-        values={envVariables}
+        values={variables}
         disabled={true}
       />
     </Expandable>

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvVarRow.tsx

@@ -100,19 +100,6 @@ const EnvVarRow: React.FC<Props> = ({
           )}
         />
       )}
-      {isKeyOverriding(entry.key) && (
-        <>
-          <Spacer width="10px" inline />
-          <Tooltip
-            content="This key overrides a value in a synced environment group"
-            position="left"
-            width="220px"
-          >
-            <Image src={warning} size={14} />
-          </Tooltip>
-          <Spacer width="2px" inline />
-        </>
-      )}
       {hidden ? (
         <Controller
           name={`app.env.${index}.hidden`}
@@ -151,6 +138,20 @@ const EnvVarRow: React.FC<Props> = ({
       >
         <i className="material-icons">cancel</i>
       </DeleteButton>
+      {isKeyOverriding(entry.key) && (
+        <>
+          <Spacer width="10px" inline />
+          <Tooltip
+            content="This key overrides a value in a synced environment group"
+            position="left"
+            width="220px"
+          >
+            <Image src={warning} size={14} />
+          </Tooltip>
+          <Spacer width="2px" inline />
+        </>
+      )}
+      {!isKeyOverriding(entry.key) && <Spacer width="27px" inline />}
     </InputWrapper>
   );
 };
@@ -159,7 +160,6 @@ export default EnvVarRow;
 const InputWrapper = styled.div`
   display: flex;
   align-items: center;
-  margin-bottom: 5px;
 `;
 
 type InputProps = {
@@ -173,7 +173,6 @@ const Input = styled.input<{ flex?: boolean; override?: boolean }>`
   display: ${(props) => (props.flex ? "flex" : "block")};
   ${(props) => (props.flex && 'flex: 1;')}
   border: none;
-  margin-bottom: 5px;
   font-size: 13px;
   background: ${(props) => props.theme.fg};
   border: ${(props) => (props.override ? '2px solid #f4cb42' : ' 1px solid #494b4f')};
@@ -189,7 +188,6 @@ export const MultiLineInputer = styled.textarea<InputProps>`
   border: none;
   display: flex;
   flex: 1;
-  margin-bottom: 5px;
   font-size: 13px;
   background: ${(props) => props.theme.fg};
   border: ${(props) => (props.override ? '2px solid #f4cb42' : ' 1px solid #494b4f')};

dashboard/src/main/home/app-dashboard/validate-apply/app-settings/EnvVariables.tsx

@@ -46,7 +46,7 @@ const EnvVariables = ({ syncedEnvGroups }: PropsType) => {
     if (!syncedEnvGroups) return false;
     return syncedEnvGroups.some(
       (envGroup) =>
-        key in envGroup.variables || key in envGroup.secret_variables
+        key in (envGroup.variables || []) || key in (envGroup.secret_variables || [])
     );
   };
 
@@ -71,20 +71,21 @@ const EnvVariables = ({ syncedEnvGroups }: PropsType) => {
 
   return (
     <>
-      {environmentVariables.map((entry, i) => (
-        <EnvVarRow
-          key={entry.id}
-          entry={entry}
-          index={i}
-          remove={() => {
-            remove(i);
-          }}
-          isKeyOverriding={isKeyOverriding}
-        />
-      ))}
       {environmentVariables.length > 0 && (
-        <Spacer y={.5} />
-      )} 
+        <List>
+          {environmentVariables.map((entry, i) => (
+            <EnvVarRow
+              key={entry.id}
+              entry={entry}
+              index={i}
+              remove={() => {
+                remove(i);
+              }}
+              isKeyOverriding={isKeyOverriding}
+            />
+          ))}
+        </List>
+      )}
       <InputWrapper>
         <Button
           alt
@@ -136,6 +137,13 @@ const EnvVariables = ({ syncedEnvGroups }: PropsType) => {
 
 export default EnvVariables;
 
+const List = styled.div`
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 25px;
+`;
+
 const I = styled.i`
   font-size: 16px;
   margin-right: 7px;

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

@@ -21,7 +21,7 @@ export type KeyValueType = {
 type PropsType = {
   label?: string;
   values: KeyValueType[];
-  setValues?: (x: KeyValueType[]) => void;
+  setValues: (x: KeyValueType[]) => void;
   disabled?: boolean;
   fileUpload?: boolean;
   secretOption?: boolean;
@@ -31,12 +31,12 @@ type PropsType = {
 const EnvGroupArray = ({
   label,
   values,
-  setValues,
+  setValues=()=>{},
   disabled,
   fileUpload,
   secretOption,
   setButtonDisabled,
-}: PropsType) => {
+}: PropsType): React.ReactNode => {
   const [showEditorModal, setShowEditorModal] = useState(false);
   const blankValues = (): void => {
     const isAnyEnvVariableBlank = values.some(