feat(frontend): moved environment form to general tab

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

@@ -2,7 +2,6 @@ import { useMemo, useState } from "react";
 import { Formik } from "formik";
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
-import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
 import { CallbackFunction } from "../../../types";
@@ -26,12 +25,6 @@ const tabs = [
     current: true,
     hidden: false
   },
-  {
-    name: "Environment",
-    href: "#",
-    current: false,
-    hidden: false
-  },
   {
     name: "Volumes",
     href: "#",
@@ -159,7 +152,6 @@ const ModalServiceCreate = (props: IModalServiceProps) => {
 
                     <TabBody className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
-                      {openTab === "Environment" && <Environment />}
                       {openTab === "Volumes" && <Volumes />}
                       {openTab === "Labels" && <Labels />}
                       {openTab === "Build" && <Build />}

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

@@ -3,7 +3,6 @@ import { Formik } from "formik";
 
 import { XIcon } from "@heroicons/react/outline";
 import General from "./General";
-import Environment from "./Environment";
 import Volumes from "./Volumes";
 import Labels from "./Labels";
 import type { CallbackFunction, IServiceNodeItem } from "../../../types";
@@ -26,12 +25,6 @@ const tabs = [
     current: true,
     hidden: false
   },
-  {
-    name: "Environment",
-    href: "#",
-    current: false,
-    hidden: false
-  },
   {
     name: "Volumes",
     href: "#",
@@ -130,7 +123,6 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
 
                     <div className="relative px-4 py-3 flex-auto">
                       {openTab === "General" && <General />}
-                      {openTab === "Environment" && <Environment />}
                       {openTab === "Volumes" && <Volumes />}
                       {openTab === "Labels" && <Labels />}
                     </div>

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

@@ -1,101 +0,0 @@
-import { useCallback } from "react";
-import { PlusIcon } from "@heroicons/react/outline";
-import { Button, styled } from "@mui/joy";
-import { useFormikContext } from "formik";
-import Record from "../../Record";
-import { IEditServiceForm } from "../../../types";
-
-const Root = styled("div")`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Records = styled("div")`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${({ theme }: { theme: any }) => theme.spacing(1)};
-`;
-
-const AddButton = styled(Button)`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-`;
-
-const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(1)};
-  text-align: center;
-  color: #7a7a7a;
-  font-size: 14px;
-`;
-
-const Environment = () => {
-  const formik = useFormikContext<IEditServiceForm>();
-  const { environmentVariables } = formik.values;
-
-  const handleNewEnvironmentVariable = useCallback(() => {
-    formik.setFieldValue(
-      `environmentVariables[${environmentVariables.length}]`,
-      {
-        key: "",
-        value: ""
-      }
-    );
-  }, [formik]);
-
-  const handleRemoveEnvironmentVariable = useCallback(
-    (index: number) => {
-      const newEnvironmentVariables = environmentVariables.filter(
-        (_: unknown, currentIndex: number) => currentIndex != index
-      );
-      formik.setFieldValue("environmentVariables", newEnvironmentVariables);
-    },
-    [formik]
-  );
-
-  const emptyEnvironmentVariables =
-    environmentVariables && environmentVariables.length === 0 ? true : false;
-
-  return (
-    <Root>
-      {!emptyEnvironmentVariables && (
-        <Records>
-          {environmentVariables.map((_: unknown, index: number) => (
-            <Record
-              key={index}
-              index={index}
-              fields={[
-                {
-                  name: `environmentVariables[${index}].key`,
-                  placeholder: "Key",
-                  required: true,
-                  type: "text"
-                },
-                {
-                  name: `environmentVariables[${index}].value`,
-                  placeholder: "Value",
-                  required: false,
-                  type: "text"
-                }
-              ]}
-              onRemove={handleRemoveEnvironmentVariable}
-            />
-          ))}
-        </Records>
-      )}
-
-      {emptyEnvironmentVariables && (
-        <Description>No environment variables.</Description>
-      )}
-
-      <AddButton
-        size="sm"
-        variant="plain"
-        onClick={handleNewEnvironmentVariable}
-      >
-        <PlusIcon className="h-4 w-4 mr-2" />
-        New variable
-      </AddButton>
-    </Root>
-  );
-};
-export default Environment;

services/frontend/src/components/Modal/service/General.tsx

@@ -28,6 +28,30 @@ const General = () => {
       </ImageNameGroup>
       <TextField label="Container name" name="containerName" required={true} />
 
+      <Records
+        name="environmentVariables"
+        title="Environment"
+        fields={(index: number) => [
+          {
+            name: `environmentVariables[${index}].key`,
+            placeholder: "Key",
+            required: true,
+            type: "text"
+          },
+          {
+            name: `environmentVariables[${index}].value`,
+            placeholder: "Value",
+            required: false,
+            type: "text"
+          }
+        ]}
+        newValue={{
+          hostPort: "",
+          containerPort: "",
+          protocol: ""
+        }}
+      />
+
       <Records
         name="ports"
         title="Ports"