From 6ea9f962839d59966d872ba523b1d2f979edc92a Mon Sep 17 00:00:00 2001 From: gokhangunduz Date: Wed, 25 Oct 2023 12:16:36 +0300 Subject: [PATCH] refactor(create-form-1-2): :tada: update create form functions --- .../CreateFormWorkspaces.tsx | 44 +++++++++++++++ .../CreateForms/CreateRobotFormStep1.tsx | 52 ++++------------- .../CreateForms/CreateRobotFormStep2.tsx | 34 ++++------- .../CreateForms/CreateRobotFormStep3.tsx | 4 +- .../CreateForms/CreateRobotFormStep4.tsx | 7 +-- src/contexts/FunctionsContext.tsx | 56 +++++++++++++++++-- src/interfaces/useFunctionsInterfaces.ts | 2 + 7 files changed, 123 insertions(+), 76 deletions(-) create mode 100644 src/components/CreateFormWorkspaces/CreateFormWorkspaces.tsx diff --git a/src/components/CreateFormWorkspaces/CreateFormWorkspaces.tsx b/src/components/CreateFormWorkspaces/CreateFormWorkspaces.tsx new file mode 100644 index 00000000..21b7e8da --- /dev/null +++ b/src/components/CreateFormWorkspaces/CreateFormWorkspaces.tsx @@ -0,0 +1,44 @@ +import React, { Fragment, ReactElement } from "react"; +import useCreateRobot from "../../hooks/useCreateRobot"; +import CreateRobotFormWorkspaceItem from "../CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem"; +import { FormikProps } from "formik"; +import { + IRobotWorkspace, + IRobotWorkspaces, +} from "../../interfaces/robotInterfaces"; + +interface ICreateFormWorkspaces { + formik: FormikProps; + responseRobot: any; + isImportRobot?: boolean; +} + +export default function CreateFormWorkspaces({ + formik, + responseRobot, + isImportRobot, +}: ICreateFormWorkspaces): ReactElement { + const { robotData } = useCreateRobot(); + + return ( + + {robotData?.step2?.workspaces?.map( + (workspace: IRobotWorkspace, workspaceIndex: number) => { + return ( + cluster.robotStatus, + )} + disabled={formik.isSubmitting || isImportRobot} + isImportRobot={isImportRobot} + /> + ); + }, + )} + + ); +} diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx index 20f71cc9..9e4cd8c7 100644 --- a/src/components/CreateForms/CreateRobotFormStep1.tsx +++ b/src/components/CreateForms/CreateRobotFormStep1.tsx @@ -2,17 +2,15 @@ import React, { Fragment, ReactElement, useEffect, useState } from "react"; import { envOnPremiseRobot } from "../../helpers/envProvider"; import CreateRobotRosDistrobutions from "../CreateRobotRosDistrobutions/CreateRobotRosDistrobutions"; import CreateRobotFormCancelButton from "../CreateRobotFormCancelButton/CreateRobotFormCancelButton"; -import { CreateRobotFormStep1Validations } from "../../validations/RobotsValidations"; import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader"; +import { CreateRobotFormStep1Validations } from "../../validations/RobotsValidations"; import CreateRobotStorage from "../CreateRobotStorage/CreateRobotStorage"; -import { addPhysicalInstanceToFleet } from "../../toolkit/InstanceSlice"; import CreateRobotTypes from "../CreateRobotTypes/CreateRobotTypes"; import { getGuideItem } from "../../functions/handleGuide"; +import FormInputText from "../FormInputText/FormInputText"; import useCreateRobot from "../../hooks/useCreateRobot"; -import { createRobot } from "../../toolkit/RobotSlice"; import InputToggle from "../InputToggle/InputToggle"; import useFunctions from "../../hooks/useFunctions"; -import { useAppDispatch } from "../../hooks/redux"; import TourGuide from "../TourGuide/TourGuide"; import Seperator from "../Seperator/Seperator"; import { useParams } from "react-router-dom"; @@ -21,7 +19,6 @@ import InfoTip from "../InfoTip/InfoTip"; import Button from "../Button/Button"; import { useFormik } from "formik"; import { toast } from "sonner"; -import FormInputText from "../FormInputText/FormInputText"; interface ICreateRobotFormStep1 { isImportRobot?: boolean; @@ -33,8 +30,8 @@ export default function CreateRobotFormStep1({ const { robotData, setRobotData } = useCreateRobot(); const { selectedState, handleCreateRobotNextStep } = useMain(); const [responseRobot, setResponseRobot] = useState(undefined); - const dispatch = useAppDispatch(); - const { getRobot, getEnvironment } = useFunctions(); + const { getRobot, getEnvironment, updateRobot, addPhysicalInstanceToFleet } = + useFunctions(); const url = useParams(); useEffect(() => { @@ -87,29 +84,7 @@ export default function CreateRobotFormStep1({ formik.setSubmitting(true); if (isImportRobot) { - await dispatch( - createRobot({ - organizationId: selectedState?.organization?.organizationId!, - roboticsCloudName: selectedState?.roboticsCloud?.name!, - instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region!, - fleetName: selectedState?.fleet?.name, - robotName: formik.values?.robotName, - physicalInstanceName: robotData?.step1?.isVirtualRobot - ? undefined - : robotData?.step1?.physicalInstanceName, - distributions: formik.values?.rosDistros, - bridgeEnabled: formik.values?.isEnabledROS2Bridge, - vdiEnabled: formik.values?.remoteDesktop?.isEnabled, - vdiSessionCount: formik.values?.remoteDesktop?.sessionCount, - ideEnabled: formik.values?.isEnabledIde, - storageAmount: formik.values?.robotStorage, - gpuEnabledForCloudInstance: - formik.values?.gpuEnabledForCloudInstance, - workspaces: responseRobot?.robotWorkspaces, - }), - ); - + updateRobot(); toast.success( "Robot updated successfully. Redirecting to fleet page...", ); @@ -120,18 +95,11 @@ export default function CreateRobotFormStep1({ ?.name}/${selectedState?.fleet?.name}/${robotData?.step1 ?.robotName}}`; }, 2000); - } else if (!formik.values?.isVirtualRobot) { - await dispatch( - addPhysicalInstanceToFleet({ - organizationId: selectedState?.organization?.organizationId, - roboticsCloudName: selectedState?.roboticsCloud?.name, - instanceId: selectedState?.instance?.instanceId, - region: selectedState?.roboticsCloud?.region, - robolaunchPhysicalInstancesName: - formik.values?.physicalInstanceName, - robolaunchFederatedFleetsName: selectedState?.fleet?.name, - }), - ); + return; + } + + if (!formik.values?.isVirtualRobot) { + addPhysicalInstanceToFleet(); } formik.setSubmitting(false); diff --git a/src/components/CreateForms/CreateRobotFormStep2.tsx b/src/components/CreateForms/CreateRobotFormStep2.tsx index a83f6091..d3d25eeb 100644 --- a/src/components/CreateForms/CreateRobotFormStep2.tsx +++ b/src/components/CreateForms/CreateRobotFormStep2.tsx @@ -3,25 +3,25 @@ import { envOnPremiseFleet, envOnPremiseRobot, } from "../../helpers/envProvider"; -import CreateRobotFormWorkspaceItem from "../CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem"; import CreateRobotFormCancelButton from "../CreateRobotFormCancelButton/CreateRobotFormCancelButton"; import { CreateEnvironmentFormStep2Validations } from "../../validations/EnvironmentsValidations"; import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton"; -import { CreateRobotFormStep2Validations } from "../../validations/RobotsValidations"; import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader"; +import CreateFormWorkspaces from "../CreateFormWorkspaces/CreateFormWorkspaces"; +import { CreateRobotFormStep2Validations } from "../../validations/RobotsValidations"; import { IRobotWorkspaces } from "../../interfaces/robotInterfaces"; import { createEnvironment } from "../../toolkit/EnvironmentSlice"; +import { getGuideItem } from "../../functions/handleGuide"; import useCreateRobot from "../../hooks/useCreateRobot"; import { createRobot } from "../../toolkit/RobotSlice"; import useFunctions from "../../hooks/useFunctions"; import { useAppDispatch } from "../../hooks/redux"; import { FormikProps, useFormik } from "formik"; +import TourGuide from "../TourGuide/TourGuide"; import { useParams } from "react-router-dom"; import useMain from "../../hooks/useMain"; import Button from "../Button/Button"; import { toast } from "sonner"; -import TourGuide from "../TourGuide/TourGuide"; -import { getGuideItem } from "../../functions/handleGuide"; interface ICreateRobotFormStep2 { isImportRobot?: boolean; @@ -31,14 +31,14 @@ export default function CreateRobotFormStep2({ isImportRobot, }: ICreateRobotFormStep2): ReactElement { const [responseFleet, setResponseFleet] = useState(undefined); + const [responseRobot, setResponseRobot] = useState(undefined); const { selectedState, handleCreateRobotNextStep, setSidebarState } = useMain(); const { robotData, setRobotData, handleAddWorkspaceStep } = useCreateRobot(); - const dispatch = useAppDispatch(); const [isLoadingImportRobot, setIsLoadingImportRobot] = useState(true); const { getRobot, getFleet, getEnvironment, getNamespace } = useFunctions(); - const [responseRobot, setResponseRobot] = useState(undefined); + const dispatch = useAppDispatch(); const url = useParams(); const formik: FormikProps = useFormik({ @@ -286,23 +286,11 @@ export default function CreateRobotFormStep2({ data-tut="create-robot-step2-workspaces" className="flex flex-col gap-2" > - {robotData?.step2?.workspaces?.map( - (workspace: any, workspaceIndex: number) => { - return ( - cluster.robotStatus, - )} - disabled={formik.isSubmitting || isImportRobot} - isImportRobot={isImportRobot} - /> - ); - }, - )} +
diff --git a/src/components/CreateForms/CreateRobotFormStep3.tsx b/src/components/CreateForms/CreateRobotFormStep3.tsx index dcfd1317..296c6254 100644 --- a/src/components/CreateForms/CreateRobotFormStep3.tsx +++ b/src/components/CreateForms/CreateRobotFormStep3.tsx @@ -6,6 +6,7 @@ import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFor import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader"; import { IRobotBuildSteps } from "../../interfaces/robotInterfaces"; import { createBuildManager } from "../../toolkit/RobotSlice"; +import { getGuideItem } from "../../functions/handleGuide"; import useCreateRobot from "../../hooks/useCreateRobot"; import SidebarInfo from "../SidebarInfo/SidebarInfo"; import useFunctions from "../../hooks/useFunctions"; @@ -13,13 +14,12 @@ import { useAppDispatch } from "../../hooks/redux"; import InputError from "../InputError/InputError"; import { FormikProps, useFormik } from "formik"; import InputText from "../InputText/InputText"; +import TourGuide from "../TourGuide/TourGuide"; import useMain from "../../hooks/useMain"; import InfoTip from "../InfoTip/InfoTip"; import Button from "../Button/Button"; import { toast } from "sonner"; import * as Yup from "yup"; -import TourGuide from "../TourGuide/TourGuide"; -import { getGuideItem } from "../../functions/handleGuide"; interface ICreateRobotFormStep3 { isImportRobot?: boolean; diff --git a/src/components/CreateForms/CreateRobotFormStep4.tsx b/src/components/CreateForms/CreateRobotFormStep4.tsx index d647a8e7..f16ae845 100644 --- a/src/components/CreateForms/CreateRobotFormStep4.tsx +++ b/src/components/CreateForms/CreateRobotFormStep4.tsx @@ -11,12 +11,14 @@ import CreateRobotFormEnvItem from "../CreateRobotFormEnvItem/CreateRobotFormEnv import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader"; import { organizationNameViewer } from "../../functions/GeneralFunctions"; import { createLaunchManager } from "../../toolkit/RobotSlice"; +import { getGuideItem } from "../../functions/handleGuide"; import useCreateRobot from "../../hooks/useCreateRobot"; import InputSelect from "../InputSelect/InputSelect"; import useFunctions from "../../hooks/useFunctions"; import { useAppDispatch } from "../../hooks/redux"; import InputError from "../InputError/InputError"; import { FormikProps, useFormik } from "formik"; +import TourGuide from "../TourGuide/TourGuide"; import InputText from "../InputText/InputText"; import { Editor } from "@monaco-editor/react"; import { useParams } from "react-router-dom"; @@ -25,8 +27,6 @@ import InfoTip from "../InfoTip/InfoTip"; import Button from "../Button/Button"; import { toast } from "sonner"; import * as Yup from "yup"; -import TourGuide from "../TourGuide/TourGuide"; -import { getGuideItem } from "../../functions/handleGuide"; interface ICreateRobotFormStep4 { isImportRobot?: boolean; @@ -322,9 +322,6 @@ export default function CreateRobotFormStep4({ ], }); }} - isVisiblePhysicalInstanceCheckbox={ - robotData?.step1?.physicalInstanceName - } error={ // @ts-ignore formik?.errors?.instancesName diff --git a/src/contexts/FunctionsContext.tsx b/src/contexts/FunctionsContext.tsx index f5726734..f656c3d4 100644 --- a/src/contexts/FunctionsContext.tsx +++ b/src/contexts/FunctionsContext.tsx @@ -27,6 +27,7 @@ import { getRobots as getRobotsDispatch, getBuildManagers as getBuildManagerDispatch, getLaunchManagers as getLaunchManagerDispatch, + createRobot as createRobotDispatch, } from "../toolkit/RobotSlice"; import { getFederatedFleets, @@ -42,7 +43,10 @@ import { getEnvironment as getEnvironmentDispatch, } from "../toolkit/EnvironmentSlice"; import { getRoboticsClouds as getRoboticsCloudDispatch } from "../toolkit/RoboticsCloudSlice"; -import { getPhysicalInstances as getAllPhysicalInstances } from "../toolkit/InstanceSlice"; +import { + getPhysicalInstances as getAllPhysicalInstances, + addPhysicalInstanceToFleet as addPhysicalInstanceToFleetDispatch, +} from "../toolkit/InstanceSlice"; import { getOrganizations as getAllOrganizations } from "../toolkit/OrganizationSlice"; import { getInstances as getAllInstances } from "../toolkit/InstanceSlice"; import { getIP as getCurrentIP } from "../toolkit/TrialSlice"; @@ -59,10 +63,15 @@ export const FunctionsContext: any = createContext(null); // eslint-disable-next-line export default ({ children }: any) => { const dispatch = useAppDispatch(); - const { setTrialState, setSelectedState, pagesState, setPagesState } = - useMain(); + const { + setTrialState, + selectedState, + setSelectedState, + pagesState, + setPagesState, + } = useMain(); const navigate = useNavigate(); - const { setRobotData } = useCreateRobot(); + const { robotData, setRobotData } = useCreateRobot(); async function getOrganizations(parameters?: ImultipleGetParameters) { await dispatch(getAllOrganizations()).then((organizationsResponse: any) => { @@ -1151,6 +1160,43 @@ export default ({ children }: any) => { }); } + async function addPhysicalInstanceToFleet() { + await dispatch( + addPhysicalInstanceToFleetDispatch({ + organizationId: selectedState?.organization?.organizationId, + roboticsCloudName: selectedState?.roboticsCloud?.name, + instanceId: selectedState?.instance?.instanceId, + region: selectedState?.roboticsCloud?.region, + robolaunchFederatedFleetsName: selectedState?.fleet?.name, + robolaunchPhysicalInstancesName: robotData.step1.physicalInstanceName, + }), + ); + } + + async function updateRobot() { + await dispatch( + createRobotDispatch({ + organizationId: selectedState?.organization?.organizationId!, + roboticsCloudName: selectedState?.roboticsCloud?.name!, + instanceId: selectedState?.instance?.instanceId, + region: selectedState?.roboticsCloud?.region!, + fleetName: selectedState?.fleet?.name, + robotName: robotData.step1.robotName, + physicalInstanceName: robotData?.step1?.isVirtualRobot + ? undefined + : robotData?.step1?.physicalInstanceName, + distributions: robotData.step1.rosDistros, + bridgeEnabled: robotData.step1.isEnabledROS2Bridge, + vdiEnabled: robotData.step1.remoteDesktop.isEnabled, + vdiSessionCount: robotData.step1.remoteDesktop.sessionCount, + ideEnabled: robotData.step1.isEnabledIde, + storageAmount: robotData.step1.robotStorage, + gpuEnabledForCloudInstance: robotData.step1.gpuEnabledForCloudInstance, + workspaces: robotData.step2.workspaces, + }), + ); + } + async function getIP() { await dispatch(getCurrentIP()).then((response: any) => { setTrialState((prevState: any) => { @@ -1188,6 +1234,8 @@ export default ({ children }: any) => { getLaunchManagers, getEnvironments, getEnvironment, + addPhysicalInstanceToFleet, + updateRobot, getIP, }} > diff --git a/src/interfaces/useFunctionsInterfaces.ts b/src/interfaces/useFunctionsInterfaces.ts index abcaeded..cfb2df98 100644 --- a/src/interfaces/useFunctionsInterfaces.ts +++ b/src/interfaces/useFunctionsInterfaces.ts @@ -208,6 +208,8 @@ export interface IuseFunctions { values: IgetEnvironmentRequest, parameters?: IsingleGetEnviromentParameters, ) => void; + addPhysicalInstanceToFleet: () => void; + updateRobot: () => void; getIP: () => void; handleSetterCurrentOrganization: ( urlOrganizationName: string | undefined,