feat(frontend): created environment variables form

services/frontend/src/components/Modal/Service/Create.tsx

@@ -24,7 +24,8 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
       },
       serviceConfig: {
         container_name: "",
-        labels: []
+        labels: [],
+        environmentVariables: []
       },
       key: "service",
       type: "SERVICE",

services/frontend/src/components/Modal/Service/Edit.tsx

@@ -30,7 +30,8 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
       },
       serviceConfig: {
         container_name: "",
-        labels: []
+        labels: [],
+        environmentVariables: []
       }
     },
     onSubmit: () => undefined

services/frontend/src/components/Modal/Service/Environment.tsx

@@ -1,6 +1,98 @@
-const Environment = (props: any) => {
+import { PlusIcon } from "@heroicons/react/outline";
+import Record from "../../Record";
+import { Button } from "@mui/joy";
+import { styled } from "@mui/joy";
+import { useCallback } from "react";
+
+const Root = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Records = styled("div")`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const AddButton = styled(Button)`
+  width: 140px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
+const EnvironmentVariables = (props: any) => {
   const { formik } = props;
 
-  return <></>;
+  const { environmentVariables } = formik.values.serviceConfig;
+
+  const handleNewEnvironmentVariable = useCallback(() => {
+    formik.setFieldValue(
+      `serviceConfig.environmentVariables[${environmentVariables.length}]`,
+      {
+        key: "",
+        value: ""
+      }
+    );
+  }, [formik]);
+
+  const handleRemoveEnvironmentVariable = useCallback(
+    (index: number) => {
+      const newEnvironmentVariables = environmentVariables.filter(
+        (_: unknown, currentIndex: number) => currentIndex != index
+      );
+      formik.setFieldValue(
+        `serviceConfig.environmentVariables`,
+        newEnvironmentVariables
+      );
+    },
+    [formik]
+  );
+
+  const emptyEnvironmentVariables = environmentVariables.length === 0;
+
+  return (
+    <Root
+      sx={{ alignItems: emptyEnvironmentVariables ? "center" : "flex-start" }}
+    >
+      {!emptyEnvironmentVariables && (
+        <Records>
+          {environmentVariables.map((_: unknown, index: number) => (
+            <Record
+              key={index}
+              index={index}
+              formik={formik}
+              fields={[
+                {
+                  name: `serviceConfig.environmentVariables[${index}].key`,
+                  placeholder: "Key"
+                },
+                {
+                  name: `serviceConfig.environmentVariables[${index}].value`,
+                  placeholder: "Value"
+                }
+              ]}
+              onRemove={handleRemoveEnvironmentVariable}
+            />
+          ))}
+        </Records>
+      )}
+      {emptyEnvironmentVariables && (
+        <p className="mt-4 text-md text-gray-500 dark:text-gray-400 text-center">
+          The service does not have any environment variables.
+          <br />
+          Click "+ New Variable" to add a new environment variable.
+        </p>
+      )}
+
+      <AddButton
+        size="sm"
+        variant="plain"
+        onClick={handleNewEnvironmentVariable}
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        New Variable
+      </AddButton>
+    </Root>
+  );
 };
-export default Environment;
+export default EnvironmentVariables;

services/frontend/src/components/Modal/Service/Labels.tsx

@@ -3,7 +3,6 @@ import Record from "../../Record";
 import { Button } from "@mui/joy";
 import { styled } from "@mui/joy";
 import { useCallback } from "react";
-import lodash from "lodash";
 
 const Root = styled("div")`
   display: flex;
@@ -49,7 +48,7 @@ const Labels = (props: any) => {
     <Root sx={{ alignItems: emptyLabels ? "center" : "flex-start" }}>
       {!emptyLabels && (
         <Records>
-          {labels.map((label: unknown, index: number) => (
+          {labels.map((_: unknown, index: number) => (
             <Record
               key={index}
               index={index}