improved env list

akash-network · Nov 3, 2023 · d5f0694 · d5f0694
1 parent a716986
commit d5f0694
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 78 deletions.
diff --git a/deploy-web/src/components/sdl/AdvancedConfig.tsx b/deploy-web/src/components/sdl/AdvancedConfig.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useImperativeHandle, forwardRef, useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import { Control } from "react-hook-form";
-import { Box, Collapse, Paper, Typography, useTheme } from "@mui/material";
+import { Box, Button, Collapse, Paper, Typography, useTheme } from "@mui/material";
 import { RentGpusFormValues, Service } from "@src/types";
 import { ExpandMore } from "../shared/ExpandMore";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -68,7 +68,14 @@ export const AdvancedConfig = forwardRef<AdvancedConfigRefType, Props>(({ contro
   return (
     <Paper elevation={2} sx={{ marginTop: "1rem" }}>
       {/** Edit Environment Variables */}
-      <EnvFormModal control={control as any} onClose={() => setIsEditingEnv(null)} open={isEditingEnv} serviceIndex={0} envs={currentService.env} />
+      <EnvFormModal
+        control={control as any}
+        onClose={() => setIsEditingEnv(null)}
+        open={isEditingEnv}
+        serviceIndex={0}
+        envs={currentService.env}
+        hasSecretOption={false}
+      />
       {/** Edit Commands */}
       <CommandFormModal control={control as any} onClose={() => setIsEditingCommands(null)} open={isEditingCommands} serviceIndex={0} />
       {/** Edit Expose */}
@@ -82,29 +89,26 @@ export const AdvancedConfig = forwardRef<AdvancedConfigRefType, Props>(({ contro
         providerAttributesSchema={providerAttributesSchema}
       />
 
-      <Box
+      <Button
         sx={{
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
           padding: ".5rem 1rem",
-          borderBottom: expanded ? `1px solid ${theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200]}` : "none"
+          borderBottom: expanded ? `1px solid ${theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[200]}` : "none",
+          textTransform: "none"
         }}
+        fullWidth
+        onClick={() => setIsAdvancedOpen(prev => !prev)}
       >
         <Box>
           <Typography variant="body2">Advanced Configuration</Typography>
         </Box>
 
-        <ExpandMore
-          expand={expanded}
-          onClick={() => setIsAdvancedOpen(prev => !prev)}
-          aria-expanded={expanded}
-          aria-label="show more"
-          sx={{ marginLeft: ".5rem" }}
-        >
+        <ExpandMore expand={expanded} aria-expanded={expanded} aria-label="show more" sx={{ marginLeft: ".5rem" }}>
           <ExpandMoreIcon />
         </ExpandMore>
-      </Box>
+      </Button>
       <Collapse in={expanded}>
         <Box sx={{ padding: "1rem" }}>
           <Box sx={{ marginBottom: "1rem" }}>

diff --git a/deploy-web/src/components/sdl/EnvFormModal.tsx b/deploy-web/src/components/sdl/EnvFormModal.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useEffect } from "react";
 import { makeStyles } from "tss-react/mui";
 import { Popup } from "../shared/Popup";
 import { Control, Controller, useFieldArray } from "react-hook-form";
-import { Box, IconButton, Paper, Switch, TextField, useTheme } from "@mui/material";
+import { Box, IconButton, Paper, Switch, TextField, Typography, useTheme } from "@mui/material";
 import { EnvironmentVariable, RentGpusFormValues, SdlBuilderFormValues } from "@src/types";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { nanoid } from "nanoid";
@@ -14,6 +14,7 @@ type Props = {
   onClose: () => void;
   envs: EnvironmentVariable[];
   control: Control<SdlBuilderFormValues | RentGpusFormValues, any>;
+  hasSecretOption?: boolean;
   children?: ReactNode;
 };
 
@@ -26,7 +27,7 @@ const useStyles = makeStyles()(theme => ({
   }
 }));
 
-export const EnvFormModal: React.FunctionComponent<Props> = ({ open, control, serviceIndex, envs: _envs, onClose }) => {
+export const EnvFormModal: React.FunctionComponent<Props> = ({ open, control, serviceIndex, envs: _envs, onClose, hasSecretOption = true }) => {
   const { classes } = useStyles();
   const theme = useTheme();
   const {
@@ -89,74 +90,90 @@ export const EnvFormModal: React.FunctionComponent<Props> = ({ open, control, se
       maxWidth="sm"
       enableCloseOnBackdropClick
     >
-      {envs.map((env, envIndex) => {
-        return (
-          <Paper key={env.id} elevation={2} sx={{ display: "flex", padding: "1rem", marginBottom: envIndex + 1 === envs.length ? 0 : "1rem" }}>
-            <Box sx={{ flexGrow: 1 }}>
-              <Controller
-                control={control}
-                name={`services.${serviceIndex}.env.${envIndex}.key`}
-                render={({ field }) => (
-                  <TextField
-                    type="text"
-                    variant="outlined"
-                    label="Key"
-                    color="secondary"
-                    fullWidth
-                    value={field.value}
-                    size="small"
-                    onChange={event => field.onChange(event.target.value)}
-                  />
-                )}
-              />
+      <Box sx={{ paddingTop: "1rem" }}>
+        {envs.map((env, envIndex) => {
+          return (
+            <Paper key={env.id} elevation={2} sx={{ display: "flex", marginBottom: envIndex + 1 === envs.length ? 0 : ".5rem" }}>
+              <Box sx={{ flexGrow: 1, display: "flex", alignItems: "center", flexDirection: { xs: "column", sm: "row" } }}>
+                <Controller
+                  control={control}
+                  name={`services.${serviceIndex}.env.${envIndex}.key`}
+                  render={({ field }) => (
+                    <TextField
+                      type="text"
+                      variant="outlined"
+                      label="Key"
+                      color="secondary"
+                      fullWidth
+                      value={field.value}
+                      size="small"
+                      onChange={event => field.onChange(event.target.value)}
+                    />
+                  )}
+                />
 
-              <Controller
-                control={control}
-                name={`services.${serviceIndex}.env.${envIndex}.value`}
-                render={({ field }) => (
-                  <TextField
-                    sx={{ marginTop: ".5rem" }}
-                    type="text"
-                    variant="outlined"
-                    label="Value"
-                    color="secondary"
-                    fullWidth
-                    value={field.value}
-                    size="small"
-                    onChange={event => field.onChange(event.target.value)}
-                  />
-                )}
-              />
-            </Box>
+                <Controller
+                  control={control}
+                  name={`services.${serviceIndex}.env.${envIndex}.value`}
+                  render={({ field }) => (
+                    <TextField
+                      sx={{ marginLeft: ".5rem" }}
+                      type="text"
+                      variant="outlined"
+                      label="Value"
+                      color="secondary"
+                      fullWidth
+                      value={field.value}
+                      size="small"
+                      onChange={event => field.onChange(event.target.value)}
+                    />
+                  )}
+                />
+              </Box>
 
-            <Box
-              sx={{
-                paddingLeft: ".5rem",
-                display: "flex",
-                alignItems: "center",
-                flexDirection: "column",
-                justifyContent: envIndex > 0 ? "space-around" : "flex-end"
-              }}
-            >
-              {envIndex > 0 && (
-                <IconButton onClick={() => removeEnv(envIndex)} size="small">
-                  <DeleteIcon />
-                </IconButton>
-              )}
+              <Box
+                sx={{
+                  paddingLeft: ".5rem",
+                  display: "flex",
+                  alignItems: "center",
+                  flexDirection: "column",
+                  justifyContent: envIndex > 0 ? "space-around" : "flex-end",
+                  width: "45px"
+                }}
+              >
+                {envIndex > 0 && (
+                  <IconButton onClick={() => removeEnv(envIndex)} size="small">
+                    <DeleteIcon />
+                  </IconButton>
+                )}
 
-              <Controller
-                control={control}
-                name={`services.${serviceIndex}.env.${envIndex}.isSecret`}
-                render={({ field }) => (
-                  <CustomTooltip title="Secret">
-                    <Switch checked={field.value || false} onChange={field.onChange} color="secondary" size="small" sx={{ margin: 0 }} />
-                  </CustomTooltip>
+                {hasSecretOption && (
+                  <Controller
+                    control={control}
+                    name={`services.${serviceIndex}.env.${envIndex}.isSecret`}
+                    render={({ field }) => (
+                      <CustomTooltip
+                        title={
+                          <>
+                            <Typography variant="body1">
+                              <strong>Secret</strong>
+                            </Typography>
+                            <Typography variant="body2">
+                              This is for secret variables containing sensitive information you don't want to be saved in your template.
+                            </Typography>
+                          </>
+                        }
+                      >
+                        <Switch checked={field.value || false} onChange={field.onChange} color="secondary" size="small" sx={{ margin: 0 }} />
+                      </CustomTooltip>
+                    )}
+                  />
                 )}
-              />
-            </Box>
-          </Paper>
-        );
-      })}
+              </Box>
+            </Paper>
+          );
+        })}
+      </Box>
     </Popup>
   );
 };