From af220ad7c409d2c0caec36c8d5a57f7cc073380c Mon Sep 17 00:00:00 2001
From: gokhangunduz <me@gokhangunduz.dev>
Date: Thu, 8 Feb 2024 15:19:48 +0300
Subject: [PATCH] refactor(robot-context): :tada: update all form handler

---
 .../CFAddBuildButton/CFAddBuildButton.tsx     |  10 +-
 .../CFAddEnvButton/CFAddEnvButton.tsx         |  11 +-
 .../CFAddRepositoryButton.tsx                 |  10 +-
 .../CFAddWorkspaceButton.tsx                  |   6 +-
 .../CFDeleteBuildButton.tsx                   |   6 +-
 .../CFDeleteRepositoryButton.tsx              |  10 +-
 .../CFDeleteWorkspaceButton.tsx               |   8 +-
 src/components/CFEnvMapper/CFEnvMapper.tsx    |   4 +-
 .../CFHostDirectories/CFHostDirectories.tsx   |  11 +-
 .../CFHostDirectoriesInputGroup.tsx           |  12 +-
 src/components/CFLaunchCode/CFLaunchCode.tsx  |   4 +-
 src/components/CFLaunchName/CFLaunchName.tsx  |   4 +-
 .../CFLaunchScope/CFLaunchScope.tsx           |   4 +-
 .../CFLaunchWorkspace/CFLaunchWorkspace.tsx   |   5 +-
 src/components/CFPortInput/CFPortInput.tsx    |  24 +---
 src/components/CFPortSetter/CFPortSetter.tsx  |  88 ++++--------
 src/components/CreateForms/CFStep3.tsx        |   5 +-
 src/components/CreateForms/CFStep4.tsx        |   4 +-
 .../CreateRobotFormEnvItem.tsx                |  12 +-
 src/components/SidebarLists/AppsList.tsx      |   2 -
 src/contexts/CreateRobotContext.tsx           | 134 +-----------------
 src/contexts/FunctionsContext.tsx             |   6 +-
 src/functions/form.build.function.ts          |  28 ++++
 src/functions/form.directory.host.function.ts |  24 ++++
 src/functions/form.env.function.ts            |  24 ++++
 src/functions/form.port.function.ts           |  32 +++++
 src/functions/form.repository.function.ts     |  31 ++++
 src/functions/form.workspace.function.ts      |  25 ++++
 src/interfaces/robotInterfaces.ts             |  22 +--
 29 files changed, 246 insertions(+), 320 deletions(-)
 create mode 100644 src/functions/form.build.function.ts
 create mode 100644 src/functions/form.directory.host.function.ts
 create mode 100644 src/functions/form.env.function.ts
 create mode 100644 src/functions/form.port.function.ts
 create mode 100644 src/functions/form.repository.function.ts
 create mode 100644 src/functions/form.workspace.function.ts

diff --git a/src/components/CFAddBuildButton/CFAddBuildButton.tsx b/src/components/CFAddBuildButton/CFAddBuildButton.tsx
index 27c88f8e..10296c9b 100644
--- a/src/components/CFAddBuildButton/CFAddBuildButton.tsx
+++ b/src/components/CFAddBuildButton/CFAddBuildButton.tsx
@@ -1,22 +1,20 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleAddBuild } from "../../functions/form.build.function";
+import { IEnvironmentStep3 } from "../../interfaces/environment/environment.step3.interface";
 
 interface ICFAddBuildButton {
-  formik?: FormikProps<IBuildSteps>;
+  formik: FormikProps<IEnvironmentStep3>;
 }
 
 export default function CFAddBuildButton({
   formik,
 }: ICFAddBuildButton): ReactElement {
-  const { handleAddBuildStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step3-build-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddBuildStep(formik)}
+        onClick={() => handleAddBuild(formik)}
         disabled={formik?.isSubmitting}
       />
     </div>
diff --git a/src/components/CFAddEnvButton/CFAddEnvButton.tsx b/src/components/CFAddEnvButton/CFAddEnvButton.tsx
index d0e232eb..ca341896 100644
--- a/src/components/CFAddEnvButton/CFAddEnvButton.tsx
+++ b/src/components/CFAddEnvButton/CFAddEnvButton.tsx
@@ -1,11 +1,11 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleAddEnv } from "../../functions/form.env.function";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFAddEnvButton {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
@@ -13,12 +13,11 @@ export default function CFAddEnvButton({
   formik,
   disabled,
 }: ICFAddEnvButton): ReactElement {
-  const { handleAddENVToLaunchStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step4-environments-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddENVToLaunchStep(formik)}
+        // @ts-ignore
+        onClick={() => handleAddEnv(formik)}
         disabled={disabled || formik?.isSubmitting}
       />
     </div>
diff --git a/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx b/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx
index 88bc98fd..cc548dd7 100644
--- a/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx
+++ b/src/components/CFAddRepositoryButton/CFAddRepositoryButton.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleAddRepository } from "../../functions/form.repository.function";
 
 interface ICFAddRepositoryButton {
   formik: FormikProps<IWorkspaces>;
@@ -15,14 +15,10 @@ export default function CFAddRepositoryButton({
   workspaceIndex,
   disabled,
 }: ICFAddRepositoryButton): ReactElement {
-  const { handleAddRepositoryToWorkspaceStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step2-repository-add-button">
       <CreateRobotFormAddButton
-        onClick={() =>
-          handleAddRepositoryToWorkspaceStep(formik, workspaceIndex)
-        }
+        onClick={() => handleAddRepository(formik, workspaceIndex)}
         disabled={formik.isSubmitting || disabled}
       />
     </div>
diff --git a/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx b/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
index ffa9cbc5..86d7096b 100644
--- a/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
+++ b/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleAddWorkspace } from "../../functions/form.workspace.function";
 
 interface ICFAddWorkspaceButton {
   formik: FormikProps<IWorkspaces>;
@@ -13,12 +13,10 @@ export default function CFAddWorkspaceButton({
   formik,
   disabled,
 }: ICFAddWorkspaceButton): ReactElement {
-  const { handleAddWorkspaceStep } = useCreateRobot();
-
   return (
     <div data-tut="create-robot-step2-workspace-add-button">
       <CreateRobotFormAddButton
-        onClick={() => handleAddWorkspaceStep(formik)}
+        onClick={() => handleAddWorkspace(formik)}
         disabled={formik.isSubmitting || disabled}
       />
     </div>
diff --git a/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx b/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx
index 6e23d6ea..ce4f6334 100644
--- a/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx
+++ b/src/components/CFDeleteBuildButton/CFDeleteBuildButton.tsx
@@ -1,8 +1,8 @@
 import { Fragment, ReactElement } from "react";
 import { FormikProps } from "formik/dist/types";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { IEnvironmentStep3 } from "../../interfaces/environment/environment.step3.interface";
+import { handleRemoveBuild } from "../../functions/form.build.function";
 
 interface ICFDeleteBuildButton {
   formik: FormikProps<IEnvironmentStep3>;
@@ -13,14 +13,12 @@ export default function CFDeleteBuildButton({
   formik,
   buildStepIndex,
 }: ICFDeleteBuildButton): ReactElement {
-  const { handleRemoveStepFromBuildStep } = useCreateRobot();
-
   return (
     <Fragment>
       {formik.values?.steps?.length > 1 && (
         <CreateRobotFormDeleteButton
           onClick={() => {
-            handleRemoveStepFromBuildStep(formik, buildStepIndex);
+            handleRemoveBuild(formik, buildStepIndex);
           }}
           text={`Delete ${
             formik.values.steps?.[buildStepIndex]?.name || "this"
diff --git a/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx b/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx
index a4b343bb..50be2d2f 100644
--- a/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx
+++ b/src/components/CFDeleteRepositoryButton/CFDeleteRepositoryButton.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { FormikProps } from "formik/dist/types";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { handleRemoveRepository } from "../../functions/form.repository.function";
 
 interface ICFDeleteRepositoryButton {
   formik: FormikProps<IWorkspaces>;
@@ -17,8 +17,6 @@ export default function CFDeleteRepositoryButton({
   repositoryIndex,
   disabled,
 }: ICFDeleteRepositoryButton): ReactElement {
-  const { handleRemoveRepositoryFromWorkspaceStep } = useCreateRobot();
-
   return (
     <div
       data-tut="create-robot-step2-workspace-repository-delete-button"
@@ -33,11 +31,7 @@ export default function CFDeleteRepositoryButton({
             : true
         }
         onClick={() => {
-          handleRemoveRepositoryFromWorkspaceStep(
-            formik,
-            workspaceIndex,
-            repositoryIndex,
-          );
+          handleRemoveRepository(formik, workspaceIndex, repositoryIndex);
         }}
         text={`Delete ${
           formik.values?.workspaces?.[workspaceIndex]?.robotRepositories[
diff --git a/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx b/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx
index 36d00e34..8d6b982e 100644
--- a/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx
+++ b/src/components/CFDeleteWorkspaceButton/CFDeleteWorkspaceButton.tsx
@@ -1,8 +1,8 @@
-import React, { ReactElement } from "react";
-import useCreateRobot from "../../hooks/useCreateRobot";
+import { ReactElement } from "react";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { handleRemoveWorkspace } from "../../functions/form.workspace.function";
 
 interface ICFDeleteWorkspaceButton {
   formik: FormikProps<IWorkspaces>;
@@ -15,8 +15,6 @@ export default function CFDeleteWorkspaceButton({
   workspaceIndex,
   disabled,
 }: ICFDeleteWorkspaceButton): ReactElement {
-  const { handleRemoveWorkspaceStep } = useCreateRobot();
-
   return (
     <div
       className="flex items-center"
@@ -25,7 +23,7 @@ export default function CFDeleteWorkspaceButton({
       <CreateRobotFormDeleteButton
         disabled={formik.values.workspaces.length > 1 ? false : true}
         onClick={() => {
-          handleRemoveWorkspaceStep(formik, workspaceIndex);
+          handleRemoveWorkspace(formik, workspaceIndex);
         }}
         text={`Delete ${
           formik.values.workspaces[workspaceIndex]?.name || "this"
diff --git a/src/components/CFEnvMapper/CFEnvMapper.tsx b/src/components/CFEnvMapper/CFEnvMapper.tsx
index 2e4e58cd..1aa199e5 100644
--- a/src/components/CFEnvMapper/CFEnvMapper.tsx
+++ b/src/components/CFEnvMapper/CFEnvMapper.tsx
@@ -2,11 +2,11 @@ import { Fragment, ReactElement } from "react";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import CreateRobotFormEnvItem from "../CreateRobotFormEnvItem/CreateRobotFormEnvItem";
 import CFAddEnvButton from "../CFAddEnvButton/CFAddEnvButton";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFEnvMapper {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
diff --git a/src/components/CFHostDirectories/CFHostDirectories.tsx b/src/components/CFHostDirectories/CFHostDirectories.tsx
index 38ebbf47..bc753612 100644
--- a/src/components/CFHostDirectories/CFHostDirectories.tsx
+++ b/src/components/CFHostDirectories/CFHostDirectories.tsx
@@ -5,6 +5,7 @@ import { FormikProps } from "formik";
 import { ReactElement } from "react";
 import HostDirectoriesSearchIframe from "../HostDirectoriesSearchIframe/HostDirectoriesSearchIframe";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleAddHostDirectory } from "../../functions/form.directory.host.function";
 
 interface ICFDirectories {
   formik: FormikProps<IEnvironmentStep1>;
@@ -42,15 +43,7 @@ export default function CFDirectories({
       </CFInfoBar>
 
       <CreateRobotFormAddButton
-        onClick={() => {
-          formik.setFieldValue("directories.hostDirectories", [
-            ...formik.values.directories.hostDirectories,
-            {
-              hostDirectory: "",
-              mountPath: "",
-            },
-          ]);
-        }}
+        onClick={() => handleAddHostDirectory(formik)}
         disabled={disabled}
       />
     </div>
diff --git a/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx b/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
index e3a468f6..ab18bdf6 100644
--- a/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
+++ b/src/components/CFHostDirectoriesInputGroup/CFHostDirectoriesInputGroup.tsx
@@ -6,6 +6,7 @@ import FormInputText from "../FormInputText/FormInputText";
 import useFunctions from "../../hooks/useFunctions";
 import useMain from "../../hooks/useMain";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleRemoveHostDirectory } from "../../functions/form.directory.host.function";
 
 interface ICFDirectoriesInputGroup {
   formik: FormikProps<IEnvironmentStep1>;
@@ -94,16 +95,7 @@ export default function CFDirectoriesInputGroup({
       <div className="flex items-center justify-center pt-3 text-sm text-light-800">
         <CFDellButton
           disabled={disabled}
-          onClick={() => {
-            const hostDirectories = [
-              ...formik.values.directories.hostDirectories,
-            ];
-            hostDirectories.splice(index, 1);
-            formik.setFieldValue(
-              "directories.hostDirectories",
-              hostDirectories,
-            );
-          }}
+          onClick={() => handleRemoveHostDirectory(formik, index)}
         />
       </div>
     </div>
diff --git a/src/components/CFLaunchCode/CFLaunchCode.tsx b/src/components/CFLaunchCode/CFLaunchCode.tsx
index 406d5acc..1deaf063 100644
--- a/src/components/CFLaunchCode/CFLaunchCode.tsx
+++ b/src/components/CFLaunchCode/CFLaunchCode.tsx
@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { Editor } from "@monaco-editor/react";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFLaunchCode {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
diff --git a/src/components/CFLaunchName/CFLaunchName.tsx b/src/components/CFLaunchName/CFLaunchName.tsx
index a2d0f59a..5dddce48 100644
--- a/src/components/CFLaunchName/CFLaunchName.tsx
+++ b/src/components/CFLaunchName/CFLaunchName.tsx
@@ -1,10 +1,10 @@
 import { ReactElement } from "react";
 import FormInputText from "../FormInputText/FormInputText";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFBuildName {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
diff --git a/src/components/CFLaunchScope/CFLaunchScope.tsx b/src/components/CFLaunchScope/CFLaunchScope.tsx
index 5c685351..3a2d9a4f 100644
--- a/src/components/CFLaunchScope/CFLaunchScope.tsx
+++ b/src/components/CFLaunchScope/CFLaunchScope.tsx
@@ -1,12 +1,12 @@
 import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { FormikProps } from "formik/dist/types";
 import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFLaunchScope {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
diff --git a/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx b/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx
index 70353a8c..3eb57953 100644
--- a/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx
+++ b/src/components/CFLaunchWorkspace/CFLaunchWorkspace.tsx
@@ -1,11 +1,12 @@
 import { Fragment, ReactElement } from "react";
 import FormInputSelect from "../FormInputSelect/FormInputSelect";
-import { ILaunchStep, IWorkspace } from "../../interfaces/robotInterfaces";
+import { IWorkspace } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFBuildWorkspace {
-  formik: FormikProps<ILaunchStep>;
+  formik: FormikProps<IEnvironmentStep4LaunchStep>;
   disabled?: boolean;
 }
 
diff --git a/src/components/CFPortInput/CFPortInput.tsx b/src/components/CFPortInput/CFPortInput.tsx
index 39804ba8..6b02b79f 100644
--- a/src/components/CFPortInput/CFPortInput.tsx
+++ b/src/components/CFPortInput/CFPortInput.tsx
@@ -4,6 +4,7 @@ import { FormikProps } from "formik/dist/types";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { ReactElement } from "react";
 import { IEnvironmentStep1 } from "../../interfaces/environment/environment.step1.interface";
+import { handleRemovePortForService } from "../../functions/form.port.function";
 
 interface ICFPortInput {
   formik: FormikProps<IEnvironmentStep1>;
@@ -145,28 +146,7 @@ export default function CFPortInput({
 
       <div className="flex items-center justify-center pt-2.5 text-sm text-light-800">
         <CFDellButton
-          onClick={() => {
-            switch (type) {
-              case "jupyterNotebook":
-                formik.setFieldValue(
-                  `services.jupyterNotebook.customPorts`,
-                  // @ts-ignore
-                  formik.values?.services.jupyterNotebook?.customPorts.filter(
-                    (port: any, index: number) => index !== portIndex,
-                  ),
-                );
-                break;
-              default:
-                formik.setFieldValue(
-                  `services.${type}.customPorts`,
-                  // @ts-ignore
-                  formik.values?.services?.[type].customPorts.filter(
-                    (port: any, index: number) => index !== portIndex,
-                  ),
-                );
-                break;
-            }
-          }}
+          onClick={() => handleRemovePortForService(formik, type, portIndex)}
           disabled={disabled}
         />
       </div>
diff --git a/src/components/CFPortSetter/CFPortSetter.tsx b/src/components/CFPortSetter/CFPortSetter.tsx
index 5735af2b..a6e5ae74 100644
--- a/src/components/CFPortSetter/CFPortSetter.tsx
+++ b/src/components/CFPortSetter/CFPortSetter.tsx
@@ -4,6 +4,7 @@ import CFPortInput from "../CFPortInput/CFPortInput";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { ReactElement } from "react";
 import { FormikProps } from "formik";
+import { handleAddPortForService } from "../../functions/form.port.function";
 import useFunctions from "../../hooks/useFunctions";
 
 interface ICFPortSetter {
@@ -31,66 +32,33 @@ export default function CFPortSetter({
   }
 
   return (
-    <div>
-      <CFInfoBar
-        label={`Custom Port Exposure From ${handleGetNameFromType()}:`}
-        tip={`Here you can specify the custom ports you want your application running in the ${handleGetNameFromType()} service to expose.`}
-        vertical
-      >
-        <div className="flex flex-col gap-2">
-          {(() => {
-            switch (type) {
-              case "jupyterNotebook":
-                return formik.values?.services.jupyterNotebook?.customPorts?.map(
-                  (_: any, index: number) => {
-                    return (
-                      <CFPortInput
-                        key={index}
-                        formik={formik}
-                        portIndex={index}
-                        type={type}
-                        disabled={formik.isSubmitting}
-                      />
-                    );
-                  },
-                );
-
-              default:
-                return formik.values?.services?.[`${type}`]?.customPorts?.map(
-                  (_: any, index: number) => {
-                    return (
-                      <CFPortInput
-                        key={index}
-                        formik={formik}
-                        portIndex={index}
-                        type={type}
-                        disabled={formik.isSubmitting}
-                      />
-                    );
-                  },
-                );
-            }
-          })()}
-        </div>
-      </CFInfoBar>
-
-      <CreateRobotFormAddButton
-        onClick={async () => {
-          const backendPort = await getFreePort();
-
-          if (typeof backendPort === "number") {
-            await formik.setFieldValue(
-              `services.${type}.customPorts`,
-              (formik.values?.services?.[`${type}`]?.customPorts || []).concat({
-                name: "",
-                port: "",
-                backendPort: backendPort,
-              }),
+    <CFInfoBar
+      label={`Custom Port Exposure From ${handleGetNameFromType()}:`}
+      tip={`Here you can specify the custom ports you want your application running in the ${handleGetNameFromType()} service to expose.`}
+      vertical
+    >
+      <div className="flex flex-col gap-2">
+        {formik.values?.services?.[`${type}`]?.customPorts?.map(
+          (_: any, index: number) => {
+            return (
+              <CFPortInput
+                key={index}
+                formik={formik}
+                portIndex={index}
+                type={type}
+                disabled={formik.isSubmitting}
+              />
             );
-          }
-        }}
-        className="!mt-1"
-      />
-    </div>
+          },
+        )}
+        <CreateRobotFormAddButton
+          onClick={async () => {
+            const portBE = await getFreePort();
+            handleAddPortForService(formik, type, portBE);
+          }}
+          className="!mt-1"
+        />
+      </div>
+    </CFInfoBar>
   );
 }
diff --git a/src/components/CreateForms/CFStep3.tsx b/src/components/CreateForms/CFStep3.tsx
index 3dc9d09f..c623d1c4 100644
--- a/src/components/CreateForms/CFStep3.tsx
+++ b/src/components/CreateForms/CFStep3.tsx
@@ -13,6 +13,7 @@ import { FormikProps, useFormik } from "formik";
 import useMain from "../../hooks/useMain";
 import { toast } from "sonner";
 import * as Yup from "yup";
+import { handleAddBuild } from "../../functions/form.build.function";
 
 interface ICFStep3 {
   isImportRobot?: boolean;
@@ -23,7 +24,7 @@ export default function CFStep3({
   isImportRobot,
   disabledLoading,
 }: ICFStep3): ReactElement {
-  const { robotData, setRobotData, handleAddBuildStep } = useCreateRobot();
+  const { robotData, setRobotData } = useCreateRobot();
   const { handleCreateRobotNextStep, selectedState } = useMain();
   const { getRobot, getBuildManager, createBuildManager } = useFunctions();
 
@@ -269,7 +270,7 @@ export default function CFStep3({
               button below."
               component={
                 <CreateRobotFormAddButton
-                  onClick={() => handleAddBuildStep(formik)}
+                  onClick={() => handleAddBuild(formik)}
                   disabled={formik?.isSubmitting}
                 />
               }
diff --git a/src/components/CreateForms/CFStep4.tsx b/src/components/CreateForms/CFStep4.tsx
index f1ca2fc1..00583129 100644
--- a/src/components/CreateForms/CFStep4.tsx
+++ b/src/components/CreateForms/CFStep4.tsx
@@ -2,7 +2,6 @@ import RobotDeleteLaunchManagerButton from "../RobotDeleteLaunchManagerButton/Ro
 import { organizationNameViewer } from "../../functions/GeneralFunctions";
 import CFLaunchWorkspace from "../CFLaunchWorkspace/CFLaunchWorkspace";
 import { Fragment, ReactElement, useEffect, useState } from "react";
-import { ILaunchStep } from "../../interfaces/robotInterfaces";
 import { createLaunchManager } from "../../toolkit/RobotSlice";
 import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 import CFLaunchScope from "../CFLaunchScope/CFLaunchScope";
@@ -17,6 +16,7 @@ import useMain from "../../hooks/useMain";
 import { useFormik } from "formik";
 import { toast } from "sonner";
 import * as Yup from "yup";
+import { IEnvironmentStep4LaunchStep } from "../../interfaces/environment/environment.step4.interface";
 
 interface ICFStep4 {
   isImportRobot?: boolean;
@@ -36,7 +36,7 @@ export default function CFStep4({
     useState<any>(undefined);
   const { getBuildManager } = useFunctions();
 
-  const formik = useFormik<ILaunchStep>({
+  const formik = useFormik<IEnvironmentStep4LaunchStep>({
     initialValues:
       robotData?.step4?.robotLaunchSteps[
         robotDataLaunchIndex ? robotDataLaunchIndex : 0
diff --git a/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx b/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx
index b4f7fa88..f63a8396 100644
--- a/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx
+++ b/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement, useState } from "react";
+import { ReactElement, useState } from "react";
 import Accordion from "../Accordion/AccordionV2";
 import InputText from "../InputText/InputText";
 import InputError from "../InputError/InputError";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import InfoTip from "../InfoTip/InfoTip";
+import { handleRemoveEnv } from "../../functions/form.env.function";
 
 interface ICreateRobotFormEnvItem {
   formik: any;
@@ -19,8 +19,6 @@ export default function CreteRobotFormEnvItem({
 }: ICreateRobotFormEnvItem): ReactElement {
   const [isShowAccordion, setIsShowAccordion] = useState<boolean>(false);
 
-  const { handleRemoveENVFromLaunchStep } = useCreateRobot();
-
   return (
     <Accordion
       key={envIndex}
@@ -32,7 +30,7 @@ export default function CreteRobotFormEnvItem({
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center gap-3">
           <div>
-            <div className="text-light-700 flex min-w-fit gap-1 pb-3 text-xs font-medium">
+            <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-light-700">
               Env Name:
               <InfoTip content="Type a new env name." />
             </div>
@@ -51,7 +49,7 @@ export default function CreteRobotFormEnvItem({
           <span className="mt-4">=</span>
 
           <div>
-            <div className="text-light-700 flex min-w-fit gap-1 pb-3 text-xs font-medium">
+            <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-light-700">
               Env Value:
               <InfoTip content="Type a new env value." />
             </div>
@@ -70,7 +68,7 @@ export default function CreteRobotFormEnvItem({
 
         <CreateRobotFormDeleteButton
           onClick={() => {
-            handleRemoveENVFromLaunchStep(formik, envIndex);
+            handleRemoveEnv(formik, envIndex);
           }}
           text="Delete this Env"
           disabled={disabled}
diff --git a/src/components/SidebarLists/AppsList.tsx b/src/components/SidebarLists/AppsList.tsx
index fca1af8d..0ebad662 100644
--- a/src/components/SidebarLists/AppsList.tsx
+++ b/src/components/SidebarLists/AppsList.tsx
@@ -79,8 +79,6 @@ export default function AppsList({ reload }: IAppsList): ReactElement {
       ) : (
         <Fragment>
           {apps?.map((environment, index: number) => {
-            console.log("environment", environment);
-
             return (
               <SidebarListItem
                 key={index}
diff --git a/src/contexts/CreateRobotContext.tsx b/src/contexts/CreateRobotContext.tsx
index 1e496944..7c8f8d21 100644
--- a/src/contexts/CreateRobotContext.tsx
+++ b/src/contexts/CreateRobotContext.tsx
@@ -1,8 +1,6 @@
-import { IBuildSteps, IWorkspace } from "../interfaces/robotInterfaces";
 import { createContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import useMain from "../hooks/useMain";
-import { FormikProps } from "formik";
 import { IEnvironment } from "../interfaces/environment/environment.interface";
 import { environmentInitialConfig } from "../configs/environment.initial.config";
 
@@ -37,70 +35,6 @@ export default ({ children }: any) => {
     setRobotData(initialRobotData);
   }
 
-  function handleAddWorkspaceStep(formik: any) {
-    formik.setFieldValue("workspaces", [
-      ...formik.values.workspaces,
-      {
-        name: "",
-        workspaceDistro: "",
-        robotRepositories: [{ name: "", url: "", branch: "" }],
-      },
-    ]);
-  }
-
-  function handleRemoveWorkspaceStep(formik: any, workspaceIndex: number) {
-    formik.setFieldValue("workspaces", [
-      ...formik.values.workspaces.slice(0, workspaceIndex),
-      ...formik.values.workspaces.slice(workspaceIndex + 1),
-    ]);
-  }
-
-  function handleAddRepositoryToWorkspaceStep(
-    formik: any,
-    workspaceIndex: number,
-  ): void {
-    formik.setFieldValue(
-      "workspaces",
-      formik.values.workspaces.map((workspace: IWorkspace, index: number) => {
-        if (index === workspaceIndex) {
-          return {
-            ...workspace,
-            robotRepositories: [
-              ...workspace.robotRepositories,
-              { name: "", url: "", branch: "" },
-            ],
-          };
-        }
-        return workspace;
-      }),
-    );
-  }
-
-  function handleAddBuildStep(formik: FormikProps<IBuildSteps>) {
-    formik.setFieldValue("steps", [
-      ...formik.values.steps,
-      {
-        workspace: "",
-        name: "",
-        command: "",
-        script: "",
-        isCommandCode: true,
-        status: "",
-        log: "",
-        instanceScope: [],
-      },
-    ]);
-  }
-
-  function handleRemoveStepFromBuildStep(formik: any, buildStepIndex: number) {
-    formik.setFieldValue(
-      "steps",
-      formik.values.steps.filter(
-        (_: any, index: number) => index !== buildStepIndex,
-      ),
-    );
-  }
-
   function handleAddLaunchManager() {
     setRobotData((prev: any) => ({
       ...prev,
@@ -120,80 +54,14 @@ export default ({ children }: any) => {
     }));
   }
 
-  function handleAddStepToLaunchStep(formik: any) {
-    formik.setFieldValue("robotLaunchSteps", [
-      ...formik.values.robotLaunchSteps,
-      {
-        workspace: "",
-        entryPointType: "custom",
-        entryPointCmd: "",
-        instancesName: [],
-        robotLmEnvs: [],
-      },
-    ]);
-  }
-
-  function handleAddENVToLaunchStep(formik: any) {
-    formik.setFieldValue("robotLmEnvs", [
-      ...formik.values.robotLmEnvs,
-      {
-        name: "",
-        value: "",
-      },
-    ]);
-  }
-
-  function handleRemoveRepositoryFromWorkspaceStep(
-    formik: any,
-    workspaceIndex: number,
-    repositoryIndex: number,
-  ) {
-    const updatedWorkspaces = [...formik.values.workspaces];
-    updatedWorkspaces[workspaceIndex].robotRepositories.splice(
-      repositoryIndex,
-      1,
-    );
-    formik.setFieldValue(`workspaces`, updatedWorkspaces);
-  }
-
-  function handleRemoveStepFromLaunchStep(
-    formik: any,
-    launchStepIndex: number,
-  ) {
-    formik.setFieldValue(
-      "robotLaunchSteps",
-      formik.values.robotLaunchSteps.filter(
-        (_: any, index: number) => index !== launchStepIndex,
-      ),
-    );
-  }
-
-  function handleRemoveENVFromLaunchStep(formik: any, index: number) {
-    formik.setFieldValue(
-      "robotLmEnvs",
-      formik.values.robotLmEnvs.filter(
-        (_: any, envIndex: number) => envIndex !== index,
-      ),
-    );
-  }
-
   return (
     <CreateRobotContext.Provider
       value={{
         robotData,
         setRobotData,
         handleResetRobotForm,
-        handleAddWorkspaceStep,
-        handleRemoveWorkspaceStep,
         handleAddLaunchManager,
-        handleAddRepositoryToWorkspaceStep,
-        handleRemoveRepositoryFromWorkspaceStep,
-        handleAddBuildStep,
-        handleRemoveStepFromBuildStep,
-        handleAddENVToLaunchStep,
-        handleRemoveENVFromLaunchStep,
-        handleAddStepToLaunchStep,
-        handleRemoveStepFromLaunchStep,
+        /////
       }}
     >
       {children}
diff --git a/src/contexts/FunctionsContext.tsx b/src/contexts/FunctionsContext.tsx
index dbd54c48..8df2788f 100644
--- a/src/contexts/FunctionsContext.tsx
+++ b/src/contexts/FunctionsContext.tsx
@@ -1394,8 +1394,6 @@ export default ({ children }: any) => {
           }),
         );
 
-        console.log("port", port, typeof port);
-
         if (typeof port !== "number") {
           return reject();
         } else if (
@@ -1414,7 +1412,9 @@ export default ({ children }: any) => {
 
         resolve(port);
       } catch (error) {
-        toast.error("Error getting port. Please remove a port and try again.");
+        toast.error(
+          "Error getting port. If Please remove a port and try again.",
+        );
         reject(error);
       }
     });
diff --git a/src/functions/form.build.function.ts b/src/functions/form.build.function.ts
new file mode 100644
index 00000000..63ce46ab
--- /dev/null
+++ b/src/functions/form.build.function.ts
@@ -0,0 +1,28 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep3 } from "../interfaces/environment/environment.step3.interface";
+
+export function handleAddBuild(formik: FormikProps<IEnvironmentStep3>) {
+  formik.setFieldValue(
+    "steps",
+    formik.values.steps.concat({
+      workspace: "",
+      name: "",
+      command: "",
+      script: "",
+      isCommandCode: true,
+      status: "",
+      log: "",
+      instanceScope: [],
+    }),
+  );
+}
+
+export function handleRemoveBuild(
+  formik: FormikProps<IEnvironmentStep3>,
+  buildIndex: number,
+) {
+  formik.setFieldValue(
+    "steps",
+    formik.values.steps.filter((_: any, index: number) => index !== buildIndex),
+  );
+}
diff --git a/src/functions/form.directory.host.function.ts b/src/functions/form.directory.host.function.ts
new file mode 100644
index 00000000..1ea71bcd
--- /dev/null
+++ b/src/functions/form.directory.host.function.ts
@@ -0,0 +1,24 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep1 } from "../interfaces/environment/environment.step1.interface";
+
+export function handleAddHostDirectory(formik: FormikProps<IEnvironmentStep1>) {
+  formik.setFieldValue(
+    `directories.hostDirectories`,
+    (formik.values?.directories?.hostDirectories || []).concat({
+      hostDirectory: "",
+      mountPath: "",
+    }),
+  );
+}
+
+export function handleRemoveHostDirectory(
+  formik: FormikProps<IEnvironmentStep1>,
+  directoryIndex: number,
+) {
+  formik.setFieldValue(
+    `directories.hostDirectories`,
+    formik.values?.directories?.hostDirectories?.filter(
+      (_: any, index: number) => index !== directoryIndex,
+    ),
+  );
+}
diff --git a/src/functions/form.env.function.ts b/src/functions/form.env.function.ts
new file mode 100644
index 00000000..5021a917
--- /dev/null
+++ b/src/functions/form.env.function.ts
@@ -0,0 +1,24 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep4 } from "../interfaces/environment/environment.step4.interface";
+
+export function handleAddEnv(formik: FormikProps<IEnvironmentStep4>) {
+  formik.setFieldValue(
+    "robotLaunchSteps.[0].robotLmEnvs",
+    formik.values.robotLaunchSteps?.[0].robotLmEnvs.concat({
+      name: "",
+      value: "",
+    }),
+  );
+}
+
+export function handleRemoveEnv(
+  formik: FormikProps<IEnvironmentStep4>,
+  envIndex: number,
+) {
+  formik.setFieldValue(
+    "robotLaunchSteps.[0].robotLmEnvs",
+    formik.values.robotLaunchSteps?.[0].robotLmEnvs.filter(
+      (_: any, index: number) => index !== envIndex,
+    ),
+  );
+}
diff --git a/src/functions/form.port.function.ts b/src/functions/form.port.function.ts
new file mode 100644
index 00000000..eac087d5
--- /dev/null
+++ b/src/functions/form.port.function.ts
@@ -0,0 +1,32 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep1 } from "../interfaces/environment/environment.step1.interface";
+
+export function handleAddPortForService(
+  formik: FormikProps<IEnvironmentStep1>,
+  type: "vdi" | "ide" | "jupyterNotebook",
+  backendPort: number | undefined,
+) {
+  if (typeof backendPort === "number") {
+    formik.setFieldValue(
+      `services.${type}.customPorts`,
+      (formik.values?.services?.[`${type}`]?.customPorts || []).concat({
+        name: "",
+        port: "",
+        backendPort: backendPort,
+      }),
+    );
+  }
+}
+
+export function handleRemovePortForService(
+  formik: FormikProps<IEnvironmentStep1>,
+  type: "vdi" | "ide" | "jupyterNotebook",
+  portIndex: number,
+) {
+  formik.setFieldValue(
+    `services.${type}.customPorts`,
+    formik.values?.services?.[`${type}`]?.customPorts?.filter(
+      (_: any, index: number) => index !== portIndex,
+    ),
+  );
+}
diff --git a/src/functions/form.repository.function.ts b/src/functions/form.repository.function.ts
new file mode 100644
index 00000000..d10d5367
--- /dev/null
+++ b/src/functions/form.repository.function.ts
@@ -0,0 +1,31 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep2 } from "../interfaces/environment/environment.step2.interface";
+
+export function handleAddRepository(
+  formik: FormikProps<IEnvironmentStep2>,
+  workspaceIndex: number,
+) {
+  formik.setFieldValue(
+    `workspaces.[${workspaceIndex}].robotRepositories`,
+    (formik.values?.workspaces[workspaceIndex]?.robotRepositories || []).concat(
+      {
+        name: "",
+        url: "",
+        branch: "",
+      },
+    ),
+  );
+}
+
+export function handleRemoveRepository(
+  formik: FormikProps<IEnvironmentStep2>,
+  workspaceIndex: number,
+  repositoryIndex: number,
+) {
+  formik.setFieldValue(
+    `workspaces.[${workspaceIndex}].robotRepositories`,
+    formik.values?.workspaces[workspaceIndex]?.robotRepositories?.filter(
+      (_: any, index: number) => index !== repositoryIndex,
+    ),
+  );
+}
diff --git a/src/functions/form.workspace.function.ts b/src/functions/form.workspace.function.ts
new file mode 100644
index 00000000..e4b3f7a3
--- /dev/null
+++ b/src/functions/form.workspace.function.ts
@@ -0,0 +1,25 @@
+import { FormikProps } from "formik";
+import { IEnvironmentStep2 } from "../interfaces/environment/environment.step2.interface";
+
+export function handleAddWorkspace(formik: FormikProps<IEnvironmentStep2>) {
+  formik.setFieldValue(
+    `workspaces`,
+    (formik.values?.workspaces || []).concat({
+      name: "",
+      workspaceDistro: "",
+      robotRepositories: [{ name: "", url: "", branch: "" }],
+    }),
+  );
+}
+
+export function handleRemoveWorkspace(
+  formik: FormikProps<IEnvironmentStep2>,
+  workspaceIndex: number,
+) {
+  formik.setFieldValue(
+    `workspaces`,
+    formik.values?.workspaces?.filter(
+      (_: any, index: number) => index !== workspaceIndex,
+    ),
+  );
+}
diff --git a/src/interfaces/robotInterfaces.ts b/src/interfaces/robotInterfaces.ts
index e9234c2d..80b63d1b 100644
--- a/src/interfaces/robotInterfaces.ts
+++ b/src/interfaces/robotInterfaces.ts
@@ -214,25 +214,7 @@ export interface IuseCreateRobot {
   robotData: IEnvironment;
   setRobotData: React.Dispatch<React.SetStateAction<IEnvironment>>;
   handleResetRobotForm: () => void;
-  handleAddWorkspaceStep: (formik: any) => void;
-  handleRemoveWorkspaceStep: (formik: any, workspaceIndex: number) => void;
-  handleAddRepositoryToWorkspaceStep: (
-    formik: any,
-    workspaceIndex: number,
-  ) => void;
   handleAddLaunchManager: () => void;
-  handleRemoveRepositoryFromWorkspaceStep: (
-    formik: any,
-    workspaceIndex: number,
-    repositoryIndex: number,
-  ) => void;
-  handleAddBuildStep: (formik: any) => void;
-  handleRemoveStepFromBuildStep: (formik: any, buildStepIndex: number) => void;
-  handleAddENVToLaunchStep: (formik: any) => void;
-  handleRemoveENVFromLaunchStep: (formik: any, index: number) => void;
-  handleAddStepToLaunchStep: (formik: any) => void;
-  handleRemoveStepFromLaunchStep: (
-    formik: any,
-    launchStepIndex: number,
-  ) => void;
+
+  /////
 }