Env Variable Fixes (codesandbox#3520)

* small fixes on the env form

* fix frozen

* fix connected forms

Author: SaraVieira

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx

@@ -46,6 +46,7 @@ export const LiveNow = () => {
       live: {
         notificationsHidden,
         isOwner,
+        reconnecting,
         roomInfo: {
           startTime,
           roomId,
@@ -76,8 +77,14 @@ export const LiveNow = () => {
           <Stack justify="space-between" align="center" marginBottom={2}>
             <Text variant="danger">
               <Stack align="center" gap={2}>
-                <LiveIcon />
-                <span>You&apos;re live!</span>
+                {reconnecting ? (
+                  'Reconnecting...'
+                ) : (
+                  <>
+                    <LiveIcon />
+                    <span>You&apos;re live!</span>
+                  </>
+                )}
               </Stack>
             </Text>
             <Timer startTime={startTime} />

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Summary.tsx

@@ -60,7 +60,8 @@ export const Summary = () => {
     }
   }, [customTemplate, frozenUpdated]);
 
-  const updateFrozenState = () => {
+  const updateFrozenState = e => {
+    e.preventDefault();
     if (customTemplate) {
       return sessionFreezeOverride({ frozen: !sessionFrozen });
     }

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/EnvVars.tsx

@@ -13,7 +13,7 @@ import { DeleteIcon, EditIcon } from './Icons';
 import { VarForm } from './VarForm';
 
 export const EnvVars = () => {
-  const [editMode, setEditMode] = useState(false);
+  const [editMode, setEditMode] = useState(null);
   const {
     actions: { editor },
     state: {
@@ -39,35 +39,34 @@ export const EnvVars = () => {
         </Text>
       </Element>
       {envVars ? (
-        <List marginTop={4}>
+        <List paddingTop={4}>
           {Object.keys(envVars).map(keyName => (
             <>
-              {editMode ? (
+              {editMode === keyName || !envVars[keyName] ? (
                 <VarForm
                   name={keyName}
                   value={envVars[keyName]}
-                  onCancel={() => setEditMode(false)}
+                  onCancel={() => setEditMode(null)}
                   onSubmit={({ name, value }) => {
                     editor.updateEnvironmentVariables({ name, value });
-                    setEditMode(false);
+                    setEditMode(null);
                   }}
                 />
-              ) : null}
-              <ListItem justify="space-between" marginTop={editMode ? 4 : 0}>
-                <Text>{keyName}</Text>
-                {!editMode ? (
+              ) : (
+                <ListItem justify="space-between" marginTop={editMode ? 4 : 0}>
+                  <Text>{keyName}</Text>
                   <Stack gap={2}>
                     <EditIcon
                       style={{ cursor: 'pointer' }}
-                      onClick={() => setEditMode(true)}
+                      onClick={() => setEditMode(keyName)}
                     />
                     <DeleteIcon
                       style={{ cursor: 'pointer' }}
                       onClick={() => deleteEnv(keyName)}
                     />
                   </Stack>
-                ) : null}
-              </ListItem>
+                </ListItem>
+              )}
             </>
           ))}
         </List>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Server/VarForm.tsx

@@ -63,11 +63,11 @@ export const VarForm = props => {
       </FormField>
       <Stack paddingX={2} marginTop={2}>
         {props.name && props.value ? (
-          <Button variant="link" onClick={onCancel}>
+          <Button variant="link" onClick={() => props.onCancel()}>
             Cancel
           </Button>
         ) : null}
-        <Button variant="secondary">
+        <Button variant="secondary" type="submit" disabled={!name || !value}>
           {props.name && props.value ? 'Save' : 'Add Secret'}
         </Button>
       </Stack>