refactor(forms): 🎉 update forms and buttons

public/css/style.css

@@ -886,10 +886,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -942,6 +938,10 @@ video {
   margin-top: 0.1rem;
 }
 
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -2405,8 +2405,8 @@ video {
   padding-top: 2rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
+.pr-5 {
+  padding-right: 1.25rem;
 }
 
 .text-center {

src/components/CFAdvancedSettings/CFAdvancedSettings.tsx

@@ -1,13 +1,13 @@
+import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
+import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
+import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import CFPortSetter from "../CFPortSetter/CFPortSetter";
+import Accordion from "../Accordion/AccordionV2";
+import { FormikProps } from "formik/dist/types";
 import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
 import Seperator from "../Seperator/Seperator";
-import { FormikProps } from "formik/dist/types";
-import Accordion from "../Accordion/AccordionV2";
-import CFPortSetter from "../CFPortSetter/CFPortSetter";
-import { IDetails } from "../../interfaces/robotInterfaces";
-import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
-import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
-import CFHostDirectories from "../CFHostDirectories/CFHostDirectories";
 
 interface ICFAdvancedSettings {
   formik: FormikProps<IDetails>;

src/components/CFButtons/CFButtons.tsx

@@ -1,9 +1,10 @@
 import { ReactElement } from "react";
 import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 import Button from "../Button/Button";
+import { FormikProps } from "formik";
 
 interface ICFButtons {
-  formik: any;
+  formik: FormikProps<any>;
   text: string;
 }
 

src/components/CFCode/CFCode.tsx

@@ -1,11 +1,11 @@
-import { IRobotBuildSteps } from "../../interfaces/robotInterfaces";
+import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { Editor } from "@monaco-editor/react";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import { FormikProps } from "formik";
 
 interface ICFCode {
-  formik: FormikProps<IRobotBuildSteps>;
+  formik: FormikProps<IBuildSteps>;
   buildStepIndex: number;
 }
 

src/components/CFForm/CFForm.tsx

@@ -0,0 +1,20 @@
+import { FormikProps } from "formik";
+import { ReactElement } from "react";
+import CFButtons from "../CFButtons/CFButtons";
+
+interface ICFForm {
+  formik: FormikProps<any>;
+  children: ReactElement | ReactElement[];
+}
+
+export default function CFForm({ formik, children }: ICFForm): ReactElement {
+  return (
+    <form
+      onSubmit={formik.handleSubmit}
+      className="animate__animated animate__fadeIn flex flex-col gap-4"
+    >
+      {children}
+      <CFButtons formik={formik} text="Connect Physical Instance" />
+    </form>
+  );
+}

src/components/CFRobotButtons/CFRobotButtons.tsx

@@ -1,6 +1,6 @@
 import CFCancelButton from "../CFCancelButton/CFCancelButton";
-import useCreateRobot from "../../hooks/useCreateRobot";
 import { envApplication } from "../../helpers/envProvider";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import { useParams } from "react-router-dom";
 import Button from "../Button/Button";
 import { ReactElement } from "react";

src/components/CodeEditor/CodeEditor.tsx

@@ -5,7 +5,8 @@ import { useAppSelector } from "../../hooks/redux";
 import useRobot from "../../hooks/useRobot";
 import RestartService from "../RestartServiceButton/RestartServiceButton";
 import FullScreenButton from "../FullScreenButton/FullScreenButton";
-import ServiceLogsButton from "../ServiceLogs/ServiceLogs";
+import ServiceLogs from "../ServiceLogs/ServiceLogs";
+import ServiceJobs from "../ServiceJobs/ServiceJobs";
 
 export default function CodeEditor(): ReactElement {
   const [ideKey, setIdeKey] = useState<number>(0);
@@ -101,7 +102,8 @@ export default function CodeEditor(): ReactElement {
           />
 
           <div className="absolute bottom-1 right-4 flex scale-[0.88] flex-col gap-4">
-            <ServiceLogsButton type="ide" />
+            <ServiceJobs type="ide" />
+            <ServiceLogs type="ide" />
             <RestartService type="ide" />
             <FullScreenButton
               isFullScreen={handleFullScreen.active}

src/components/ConnectionLabel/ConnectionLabel.tsx

@@ -3,7 +3,7 @@ import { RxOpenInNewWindow } from "react-icons/rx";
 
 interface IConnectionLabel {
   label: string;
-  url: string;
+  url?: string;
 }
 
 export default function ConnectionLabel({

src/components/Connections/Connections.tsx

@@ -1,16 +1,27 @@
-import React, { ReactElement } from "react";
-import useRobot from "../../hooks/useRobot";
-import StateCell from "../TableInformationCells/StateCell";
 import ConnectionLabel from "../ConnectionLabel/ConnectionLabel";
-
+import StateCell from "../TableInformationCells/StateCell";
 import { useKeycloak } from "@react-keycloak/web";
+import useRobot from "../../hooks/useRobot";
+import { ReactElement } from "react";
 
 export default function Connections(): ReactElement {
   const { responseRobot, isSettedCookie } = useRobot();
   const { keycloak } = useKeycloak();
 
   return (
     <div className="flex gap-4">
+      <div className="flex gap-1" id="ros">
+        <ConnectionLabel label="ROS" />
+        <StateCell
+          state={
+            isSettedCookie === undefined
+              ? "Waiting"
+              : isSettedCookie
+              ? "Connected"
+              : "Warning"
+          }
+        />
+      </div>
       <div className="flex gap-1" id="ide">
         <ConnectionLabel label="IDE" url={responseRobot?.ideIngressEndpoint} />
         <StateCell

src/components/CreateFormCancelButton/CreateFormCancelButton.tsx

@@ -2,13 +2,13 @@ import React, { ReactElement } from "react";
 import useMain from "../../hooks/useMain";
 import Button from "../Button/Button";
 
-interface ICreateFormCancelButton {
+interface ICFCancelButton {
   disabled?: boolean;
 }
 
-export default function CreateFormCancelButton({
+export default function CFCancelButton({
   disabled,
-}: ICreateFormCancelButton): ReactElement {
+}: ICFCancelButton): ReactElement {
   const { setSidebarState } = useMain();
 
   return (

src/components/CreateForms/CFPhysical.tsx

@@ -1,18 +1,19 @@
-import React, { ReactElement } from "react";
 import { addPhysicalInstance } from "../../toolkit/InstanceSlice";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useAppDispatch } from "../../hooks/redux";
 import { useKeycloak } from "@react-keycloak/web";
-import InputError from "../InputError/InputError";
-import InputText from "../InputText/InputText";
+import { ReactElement, useState } from "react";
 import { Editor } from "@monaco-editor/react";
 import useMain from "../../hooks/useMain";
 import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
+import CFSection from "../CFSection/CFSection";
+import FormInputText from "../FormInputText/FormInputText";
+import CFForm from "../CFForm/CFForm";
 
 export default function CFPhysical(): ReactElement {
-  const [code, setCode] = React.useState<string>("");
+  const [code, setCode] = useState<string>("");
   const { sidebarState, setSidebarState, selectedState } = useMain();
   const dispatch = useAppDispatch();
   const { keycloak } = useKeycloak();
@@ -92,27 +93,18 @@ export default function CFPhysical(): ReactElement {
   }
 
   return (
-    <form
-      onSubmit={formik.handleSubmit}
-      className="animate__animated animate__fadeIn flex flex-col gap-8 pt-6"
-    >
-      <div>
-        <InputText
-          {...formik.getFieldProps("name")}
-          placeholder="Physical Instance Name"
+    <CFForm formik={formik}>
+      <CFSection>
+        <FormInputText
+          labelName="Physical Instance Name"
+          labelInfoTip="Type a new physical instance name."
+          inputProps={formik.getFieldProps("name")}
           disabled={formik.isSubmitting}
+          inputHoverText="You can't change physical instance name because this physical instance is created before."
+          inputError={formik.errors.name}
+          inputTouched={formik.touched.name}
         />
-        <InputError error={formik.errors.name} touched={formik.touched.name} />
-      </div>
-      <div>
-        <Button
-          type="submit"
-          text="Connect Physical Instance"
-          disabled={formik.isSubmitting || !formik.isValid}
-          loading={formik.isSubmitting}
-          className="!h-11"
-        />
-      </div>
-    </form>
+      </CFSection>
+    </CFForm>
   );
 }

src/components/CreateForms/CFStep1.tsx

@@ -1,8 +1,10 @@
 import { CFRobotStep1Validations } from "../../validations/RobotsValidations";
+import CFAdvancedSettings from "../CFAdvancedSettings/CFAdvancedSettings";
 import { Fragment, ReactElement, useEffect, useState } from "react";
 import CreateRobotTypes from "../CreateRobotTypes/CreateRobotTypes";
 import CreateRobotStorage from "../CFStorageRange/CFStorageRange";
 import CFBridgeToggle from "../CFBridgeToggle/CFBridgeToggle";
+import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import { envApplication } from "../../helpers/envProvider";
 import CreateRobotFormLoader from "../CFLoader/CFLoader";
@@ -19,8 +21,6 @@ import { useParams } from "react-router-dom";
 import useMain from "../../hooks/useMain";
 import { useFormik } from "formik";
 import { toast } from "sonner";
-import CFAdvancedSettings from "../CFAdvancedSettings/CFAdvancedSettings";
-import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 
 interface ICFStep1 {
   isImportRobot?: boolean;

src/components/CreateForms/CFStep2.tsx

@@ -4,6 +4,7 @@ import CFWorkspacesMapper from "../CFWorkspacesMapper/CFWorkspacesMapper";
 import { CFAppStep2Validations } from "../../validations/AppsValidations";
 import { Fragment, ReactElement, useEffect, useState } from "react";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
+import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 import { envApplication } from "../../helpers/envProvider";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";
@@ -13,7 +14,6 @@ import CFLoader from "../CFLoader/CFLoader";
 import useMain from "../../hooks/useMain";
 import { useFormik } from "formik";
 import { toast } from "sonner";
-import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 
 interface ICFStep2 {
   isImportRobot?: boolean;

src/components/CreateForms/CFStep3.tsx

@@ -1,8 +1,9 @@
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import CFAddBuildButton from "../CFAddBuildButton/CFAddBuildButton";
-import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { Fragment, ReactElement, useEffect, useState } from "react";
+import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { createBuildManager } from "../../toolkit/RobotSlice";
+import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 import CFBuildMapper from "../CFBuildMapper/CFBuildMapper";
 import CreateRobotFormLoader from "../CFLoader/CFLoader";
 import useCreateRobot from "../../hooks/useCreateRobot";
@@ -14,7 +15,6 @@ import { FormikProps, useFormik } from "formik";
 import useMain from "../../hooks/useMain";
 import { toast } from "sonner";
 import * as Yup from "yup";
-import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 
 interface ICFStep3 {
   isImportRobot?: boolean;

src/components/CreateForms/CFStep4.tsx

@@ -4,6 +4,7 @@ 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";
 import CreateRobotFormLoader from "../CFLoader/CFLoader";
 import useCreateRobot from "../../hooks/useCreateRobot";
@@ -16,7 +17,6 @@ import useMain from "../../hooks/useMain";
 import { useFormik } from "formik";
 import { toast } from "sonner";
 import * as Yup from "yup";
-import CFRobotButtons from "../CFRobotButtons/CFRobotButtons";
 
 interface ICFStep4 {
   isImportRobot?: boolean;

src/components/FloatMenu/FloatMenu.tsx

@@ -1,17 +1,17 @@
-import { useState } from "react";
-import { CircleMenu, CircleMenuItem } from "react-circular-menu";
-import { AiOutlineCode, AiOutlinePlus } from "react-icons/ai";
-import { handleAddWidget } from "../../helpers/gridStack";
 import {
   BsBatteryFull,
   BsCameraVideo,
   BsJoystick,
   BsPinMap,
 } from "react-icons/bs";
+import { CircleMenu, CircleMenuItem } from "react-circular-menu";
+import { AiOutlineCode, AiOutlinePlus } from "react-icons/ai";
+import { handleAddWidget } from "../../helpers/gridStack";
 import { AiOutlineUnorderedList } from "react-icons/ai";
 import { IoMdCodeWorking } from "react-icons/io";
-import { GoGraph } from "react-icons/go";
 import { BiErrorCircle } from "react-icons/bi";
+import { GoGraph } from "react-icons/go";
+import { useState } from "react";
 
 interface IFloatMenu {
   grid: any;
@@ -41,6 +41,7 @@ export function FloatMenu({
         rotationAngle={180}
         itemSize={2}
         radius={12}
+        open={isOpenMenu}
         rotationAngleInclusive={true}
         menuToggleElement={
           <div className="flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-layer-light-200 bg-layer-light-50 transition-all duration-500 hover:scale-90 hover:bg-layer-light-100">

src/components/ProfileOverview/ProfileOverview.tsx

@@ -1,22 +1,19 @@
 import React, { Fragment, ReactElement } from "react";
 import ProfileInfo from "../ProfileInfo/ProfileInfo";
 import ProfileChangePassword from "../ProfileChangePassword/ProfileChangePassword";
-import ProfileEmailPreferances from "../ProfileEmailPreferances/ProfileEmailPreferances";
-import ProfileConnectedApps from "../ProfileConnectedApps/ProfileConnectedApps";
-import ProfileNotifications from "../ProfileNotifications/ProfileNotifications";
 import ProfileDeactive from "../ProfileDeactivate/ProfileDeactivate";
 
 export default function ProfileOverview(): ReactElement {
   return (
     <Fragment>
       <div className="col-span-1 flex flex-col gap-6">
         <ProfileInfo className="col-span-1" />
-        <ProfileChangePassword className="col-span-1" />
-        <ProfileEmailPreferances className="col-span-1" />
+        {/* <ProfileEmailPreferances className="col-span-1" /> */}
       </div>
       <div className="col-span-1 flex flex-col gap-6">
-        <ProfileConnectedApps className="col-span-1" />
-        <ProfileNotifications className="col-span-1" />
+        {/* <ProfileConnectedApps className="col-span-1" /> */}
+        {/* <ProfileNotifications className="col-span-1" /> */}
+        <ProfileChangePassword className="col-span-1" />
         <ProfileDeactive className="col-span-1" />
       </div>
     </Fragment>

src/components/RobotHeaderTabs/RobotHeaderTabs.tsx

@@ -30,7 +30,8 @@ export default function RobotHeaderTabs(): ReactElement {
           isSettedCookie
         ),
       isHidden:
-        envApplication || (responseRobot && !responseRobot?.bridgeEnabled),
+        // envApplication || (responseRobot && !responseRobot?.bridgeEnabled),
+        true,
     },
     {
       name: "Teleoperation",