refactor(responsive features, create-robot-context, private-provider)…

…: 🎉 update responsive layouts, rename context and bugfix on keycloak loading module
robolaunch · Aug 11, 2023 · 0bf614f · 0bf614f
1 parent 014d8c3
commit 0bf614f
Show file tree

Hide file tree

Showing 35 changed files with 164 additions and 133 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",
@@ -37,6 +37,7 @@
     "react-contexify": "^6.0.0",
     "react-cool-onclickoutside": "^1.7.0",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.9",
     "react-draggable": "^4.4.5",

diff --git a/public/css/style.css b/public/css/style.css
@@ -662,8 +662,8 @@ video {
   left: 3.5rem;
 }
 
-.left-20{
-  left: 5rem;
+.left-16{
+  left: 4rem;
 }
 
 .left-3{
@@ -742,10 +742,6 @@ video {
   top: 3.6rem;
 }
 
-.-top-\[999999\]{
-  top: -999999;
-}
-
 .-z-10{
   z-index: -10;
 }
@@ -895,12 +891,12 @@ video {
   margin-left: 0.375rem;
 }
 
-.ml-2{
-  margin-left: 0.5rem;
+.ml-16{
+  margin-left: 4rem;
 }
 
-.ml-20{
-  margin-left: 5rem;
+.ml-2{
+  margin-left: 0.5rem;
 }
 
 .mt-0{
@@ -915,6 +911,10 @@ video {
   margin-top: 0.25rem;
 }
 
+.mt-10{
+  margin-top: 2.5rem;
+}
+
 .mt-2{
   margin-top: 0.5rem;
 }
@@ -927,18 +927,10 @@ video {
   margin-top: 1rem;
 }
 
-.mt-8{
-  margin-top: 2rem;
-}
-
 .mt-\[0\.1rem\]{
   margin-top: 0.1rem;
 }
 
-.mt-10{
-  margin-top: 2.5rem;
-}
-
 .block{
   display: block;
 }
@@ -1225,6 +1217,10 @@ video {
   width: 3.5rem;
 }
 
+.w-16{
+  width: 4rem;
+}
+
 .w-2{
   width: 0.5rem;
 }
@@ -1305,10 +1301,6 @@ video {
   width: 30vw;
 }
 
-.w-\[40rem\]{
-  width: 40rem;
-}
-
 .w-\[40vw\]{
   width: 40vw;
 }
@@ -1715,6 +1707,11 @@ video {
   border-bottom-right-radius: 0.5rem;
 }
 
+.rounded-r-xl{
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .rounded-t{
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -1917,11 +1914,6 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
-.\!border-layer-light-500{
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(153 153 153 / var(--tw-border-opacity)) !important;
-}
-
 .\!bg-layer-light-50{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
@@ -2272,10 +2264,6 @@ video {
   padding-bottom: 0.25rem;
 }
 
-.pb-12{
-  padding-bottom: 3rem;
-}
-
 .pb-2{
   padding-bottom: 0.5rem;
 }
@@ -2320,6 +2308,10 @@ video {
   padding-top: 2.5rem;
 }
 
+.pt-2{
+  padding-top: 0.5rem;
+}
+
 .pt-3{
   padding-top: 0.75rem;
 }
@@ -2340,10 +2332,6 @@ video {
   padding-top: 2rem;
 }
 
-.pt-2{
-  padding-top: 0.5rem;
-}
-
 .text-center{
   text-align: center;
 }
@@ -3138,6 +3126,11 @@ td{
   width: 100% !important;
 }
 
+.w-fill-available {
+  width: -webkit-fill-available;
+  width: -moz-fit-content;
+}
+
 .hover\:\!scale-90:hover{
   --tw-scale-x: .9 !important;
   --tw-scale-y: .9 !important;
@@ -3340,11 +3333,6 @@ td{
   border-color: rgb(153 153 153 / var(--tw-border-opacity)) !important;
 }
 
-.disabled\:\!border-layer-light-400:disabled{
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(173 173 173 / var(--tw-border-opacity)) !important;
-}
-
 .disabled\:\!bg-red-400:disabled{
   --tw-bg-opacity: 1 !important;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity)) !important;
@@ -3380,9 +3368,17 @@ td{
   .md\:flex{
     display: flex;
   }
+
+  .md\:w-\[40rem\]{
+    width: 40rem;
+  }
 }
 
 @media (min-width: 1024px){
+  .lg\:left-20{
+    left: 5rem;
+  }
+
   .lg\:col-span-3{
     grid-column: span 3 / span 3;
   }
@@ -3411,6 +3407,10 @@ td{
     grid-column: span 9 / span 9;
   }
 
+  .lg\:ml-20{
+    margin-left: 5rem;
+  }
+
   .lg\:flex{
     display: flex;
   }
@@ -3419,6 +3419,18 @@ td{
     min-height: 20rem;
   }
 
+  .lg\:w-10{
+    width: 2.5rem;
+  }
+
+  .lg\:w-14{
+    width: 3.5rem;
+  }
+
+  .lg\:w-20{
+    width: 5rem;
+  }
+
   .lg\:grid-cols-12{
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }

diff --git a/src/components/BuildManagerStepsTable/BuildManagerStepsTable.tsx b/src/components/BuildManagerStepsTable/BuildManagerStepsTable.tsx
@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 import BasicCell from "../Cells/BasicCell";
 import StateCell from "../Cells/StateCell";
 import LogsCell from "../Cells/LogsCell";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import TickCell from "../TickCell/TickCell";
 
 interface IBuildManagerStepsTable {
@@ -16,7 +16,7 @@ export default function BuildManagerStepsTable({
   responseBuildManager,
 }: IBuildManagerStepsTable): ReactElement {
   const url = useParams();
-  const { robotData } = useRobot();
+  const { robotData } = useCreateRobot();
 
   const data: any = useMemo(
     () =>

diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx
@@ -13,7 +13,7 @@ import InputError from "../InputError/InputError";
 import InputText from "../InputText/InputText";
 import Seperator from "../Seperator/Seperator";
 import { useParams } from "react-router-dom";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
 import Button from "../Button/Button";
@@ -28,7 +28,7 @@ interface ICreateRobotFormStep1 {
 export default function CreateRobotFormStep1({
   isImportRobot,
 }: ICreateRobotFormStep1): ReactElement {
-  const { robotData, setRobotData }: any = useRobot();
+  const { robotData, setRobotData }: any = useCreateRobot();
   const { selectedState, handleCreateRobotNextStep } = useMain();
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
   const dispatch = useAppDispatch();

diff --git a/src/components/CreateForms/CreateRobotFormStep2.tsx b/src/components/CreateForms/CreateRobotFormStep2.tsx
@@ -4,7 +4,7 @@ import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
 import Button from "../Button/Button";
 import CreateRobotFormWorkspaceItem from "../CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem";
 import useMain from "../../hooks/useMain";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import { useAppDispatch } from "../../hooks/redux";
 import { createRobot } from "../../toolkit/RobotSlice";
 import useFunctions from "../../hooks/useFunctions";
@@ -24,7 +24,7 @@ export default function CreateRobotFormStep2({
   const [responseFleet, setResponseFleet] = useState<any>(undefined);
   const { selectedState, handleCreateRobotNextStep, setSidebarState } =
     useMain();
-  const { robotData, setRobotData, handleAddWorkspaceStep } = useRobot();
+  const { robotData, setRobotData, handleAddWorkspaceStep } = useCreateRobot();
   const dispatch = useAppDispatch();
   const [isLoadingImportRobot, setIsLoadingImportRobot] =
     useState<boolean>(true);

diff --git a/src/components/CreateForms/CreateRobotFormStep3.tsx b/src/components/CreateForms/CreateRobotFormStep3.tsx
@@ -5,7 +5,7 @@ import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFor
 import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader";
 import { IRobotBuildSteps } from "../../interfaces/robotInterfaces";
 import { createBuildManager } from "../../toolkit/RobotSlice";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";
 import useFunctions from "../../hooks/useFunctions";
 import { useAppDispatch } from "../../hooks/redux";
@@ -26,7 +26,8 @@ interface ICreateRobotFormStep3 {
 export default function CreateRobotFormStep3({
   isImportRobot,
 }: ICreateRobotFormStep3): ReactElement {
-  const { robotData, setRobotData, handleAddStepToBuildStep } = useRobot();
+  const { robotData, setRobotData, handleAddStepToBuildStep } =
+    useCreateRobot();
   const dispatch = useAppDispatch();
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
   const [responseBuildManager, setResponseBuildManager] =

diff --git a/src/components/CreateForms/CreateRobotFormStep4.tsx b/src/components/CreateForms/CreateRobotFormStep4.tsx
@@ -3,7 +3,7 @@ import {
   IRobotLaunchStep,
   IRobotWorkspace,
 } from "../../interfaces/robotInterfaces";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import { FormikProps, useFormik } from "formik";
 import InputText from "../InputText/InputText";
 import InputError from "../InputError/InputError";
@@ -37,7 +37,8 @@ export default function CreateRobotFormStep4({
   robotDataLaunchIndex,
   robotClusters,
 }: ICreateRobotFormStep4): ReactElement {
-  const { robotData, setRobotData, handleAddENVToLaunchStep } = useRobot();
+  const { robotData, setRobotData, handleAddENVToLaunchStep } =
+    useCreateRobot();
   const { selectedState } = useMain();
   const dispatch = useAppDispatch();
   const [responseBuildManager, setResponseBuildManager] =

diff --git a/src/components/CreateRobotFormBuildStepItem/CreateRobotFormBuildStepItem.tsx b/src/components/CreateRobotFormBuildStepItem/CreateRobotFormBuildStepItem.tsx
@@ -12,7 +12,7 @@ import Accordion from "../Accordion/AccordionV2";
 import { FormikProps } from "formik/dist/types";
 import InputText from "../InputText/InputText";
 import { Editor } from "@monaco-editor/react";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import StateCell from "../Cells/StateCell";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
@@ -36,7 +36,7 @@ export default function CreateRobotFormBuildStepItem({
 }: ICreateRobotFormBuildStepItem): ReactElement {
   const [isShowAccordion, setIsShowAccordion] = useState<boolean>(false);
   const { selectedState } = useMain();
-  const { robotData, handleRemoveStepFromBuildStep } = useRobot();
+  const { robotData, handleRemoveStepFromBuildStep } = useCreateRobot();
 
   return (
     <Accordion

diff --git a/src/components/CreateRobotFormCodeScope/CreateRobotFormCodeScope.tsx b/src/components/CreateRobotFormCodeScope/CreateRobotFormCodeScope.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import InputCheckbox from "../InputCheckbox/InputCheckbox";
 import InputError from "../InputError/InputError";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
 
@@ -26,7 +26,7 @@ export default function CreateRobotFormCodeScope({
   physicalInstanceOnChange,
   error,
 }: ICreateRobotFormCodeScope): ReactElement {
-  const { robotData } = useRobot();
+  const { robotData } = useCreateRobot();
   const { selectedState } = useMain();
 
   return (

diff --git a/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx b/src/components/CreateRobotFormEnvItem/CreateRobotFormEnvItem.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from "react";
 import Accordion from "../Accordion/AccordionV2";
 import InputText from "../InputText/InputText";
 import InputError from "../InputError/InputError";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import InfoTip from "../InfoTip/InfoTip";
 
@@ -19,7 +19,7 @@ export default function CreteRobotFormEnvItem({
 }: ICreateRobotFormEnvItem): ReactElement {
   const [isShowAccordion, setIsShowAccordion] = useState<boolean>(false);
 
-  const { handleRemoveENVFromLaunchStep } = useRobot();
+  const { handleRemoveENVFromLaunchStep } = useCreateRobot();
 
   return (
     <Accordion

diff --git a/src/components/CreateRobotFormLaunchStepItem/CreateRobotFormLaunchStepItem.tsx b/src/components/CreateRobotFormLaunchStepItem/CreateRobotFormLaunchStepItem.tsx
@@ -7,7 +7,7 @@ import { FormikProps } from "formik";
 import Accordion from "../Accordion/AccordionV2";
 import InputError from "../InputError/InputError";
 import InputSelect from "../InputSelect/InputSelect";
-import useRobot from "../../hooks/useRobot";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import CreateRobotFormEnvItem from "../CreateRobotFormEnvItem/CreateRobotFormEnvItem";
 import { BsPlusCircle } from "react-icons/bs";
 import useMain from "../../hooks/useMain";
@@ -32,7 +32,7 @@ export default function CreateRobotFormLaunchStepItem({
     robotData,
     handleAddENVToLaunchStep,
     handleRemoveStepFromLaunchStep,
-  } = useRobot();
+  } = useCreateRobot();
   const { selectedState } = useMain();
 
   return (