Skip to content

Commit

Permalink
feat(create-robot-form and guide): 🎉 add new guide to robot-create-fo…
Browse files Browse the repository at this point in the history 
…rm steps
  • Loading branch information
@gokhangunduz
gokhangunduz committed Sep 20, 2023
1 parent ce43707 commit 7fb63f8
Show file tree
Hide file tree
Showing 16 changed files with 1,040 additions and 530 deletions.
43 changes: 34 additions & 9 deletions src/components/CreateForms/CreateRobotFormStep1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import InfoTip from "../InfoTip/InfoTip";
import Button from "../Button/Button";
import { useFormik } from "formik";
import { toast } from "sonner";
import TourGuide from "../TourGuide/TourGuide";
import { getGuideItem } from "../../functions/handleGuide";

interface ICreateRobotFormStep1 {
isImportRobot?: boolean;
Expand Down Expand Up @@ -171,7 +173,7 @@ export default function CreateRobotFormStep1({
className="flex flex-col gap-3 animate__animated animate__fadeIn relative"
>
{/* RobotName */}
<div>
<div data-tut="create-robot-step1-name">
<div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700 pb-3">
Robot Name:
<InfoTip content="Type a new robot name." />
Expand Down Expand Up @@ -237,13 +239,13 @@ export default function CreateRobotFormStep1({
{/* Robot Services */}
<div className="flex items-center gap-4">
{/* ROS2 Bridge */}
<div className="flex items-center gap-1">
<div
data-tut="create-robot-step1-ros2-bridge"
className="flex items-center gap-1"
>
<div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
ROS2 (Bridge) :
<InfoTip
content="
The ROS2 Bridge allows you to connect your robot to the ROS2 ecosystem. This allows you to use ROS2 tools to interact with your robot."
/>
<InfoTip content="The ROS2 Bridge allows you to connect your robot to the ecosystem. This allows you to use ROS2 tools to interact with your robot." />
</div>
<InputToggle
checked={formik?.values?.isEnabledROS2Bridge}
Expand All @@ -256,7 +258,10 @@ export default function CreateRobotFormStep1({

{/* Remote Desktop Session Count */}
{formik?.values?.remoteDesktop?.isEnabled && (
<div className="flex gap-2 w-full pl-10">
<div
data-tut="create-robot-step1-vdi-session-count"
className="flex gap-2 w-full pl-10"
>
<div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
VDI: Session Count (
{formik?.values?.remoteDesktop?.sessionCount} User) :
Expand Down Expand Up @@ -289,7 +294,10 @@ export default function CreateRobotFormStep1({
<Seperator />

{/* GPU Resource */}
<div className="flex items-center gap-1">
<div
data-tut="create-robot-step1-gpu-resource"
className="flex items-center gap-1"
>
<div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
GPU Usage Enabled for Cloud Instance:
<InfoTip content="If you want or need to GPU resource on cloud instance set active" />
Expand All @@ -309,7 +317,10 @@ export default function CreateRobotFormStep1({
{/* Development Mode */}
{!isImportRobot && (
<Fragment>
<div className="flex items-center gap-1">
<div
data-tut="create-robot-step1-development-mode"
className="flex items-center gap-1"
>
<div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
Development Mode:
<InfoTip content="Leave this option turned on if you want it to be able to build and launch on the robot you want" />
Expand Down Expand Up @@ -360,6 +371,20 @@ export default function CreateRobotFormStep1({
</form>
</CreateRobotFormLoader>
}
<TourGuide
hiddenButton
type="createRobotStep1"
tourConfig={[
getGuideItem("[data-tut='create-robot-step1-name']"),
getGuideItem("[data-tut='create-robot-step1-type']"),
getGuideItem("[data-tut='create-robot-step1-ros-distrobutions']"),
getGuideItem("[data-tut='create-robot-step1-storage']"),
getGuideItem("[data-tut='create-robot-step1-ros2-bridge']"),
getGuideItem("[data-tut='create-robot-step1-vdi-session-count']"),
getGuideItem("[data-tut='create-robot-step1-gpu-resource']"),
getGuideItem("[data-tut='create-robot-step1-development-mode']"),
]}
/>
</Fragment>
);
}
58 changes: 40 additions & 18 deletions src/components/CreateForms/CreateRobotFormStep2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ 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;
Expand Down Expand Up @@ -223,20 +225,6 @@ export default function CreateRobotFormStep2({
);
}

useEffect(() => {
console.log(
!formik?.isValid,
formik.isSubmitting,
JSON.stringify(formik.initialValues) === JSON.stringify(formik.values),
formik?.initialValues,
formik?.values
);
}, [formik]);

useEffect(() => {
console.log(formik);
}, [formik]);

return (
<CreateRobotFormLoader
isLoading={
Expand Down Expand Up @@ -268,7 +256,10 @@ export default function CreateRobotFormStep2({
onSubmit={formik.handleSubmit}
className="flex flex-col gap-4 animate__animated animate__fadeIn"
>
<div className="flex flex-col gap-2">
<div
data-tut="create-robot-step2-workspaces"
className="flex flex-col gap-2"
>
{robotData?.step2?.workspaces?.map(
(workspace: any, workspaceIndex: number) => {
return (
Expand All @@ -288,9 +279,11 @@ export default function CreateRobotFormStep2({
)}
</div>

<CreateRobotFormAddButton
onClick={() => handleAddWorkspaceStep(formik)}
/>
<div data-tut="create-robot-step2-workspace-add-button">
<CreateRobotFormAddButton
onClick={() => handleAddWorkspaceStep(formik)}
/>
</div>

{!(envOnPremiseRobot && url?.robotName ? true : false) && (
<div className="flex gap-2 mt-10">
Expand Down Expand Up @@ -331,6 +324,35 @@ export default function CreateRobotFormStep2({
</div>
)}
</form>
<TourGuide
hiddenButton
type="createRobotStep2"
tourConfig={[
getGuideItem("[data-tut='create-robot-step2-workspaces']"),
getGuideItem("[data-tut='create-robot-step2-workspace-add-button']"),
getGuideItem("[data-tut='create-robot-step2-workspace-name']"),
getGuideItem("[data-tut='create-robot-step2-workspace-distro']"),
getGuideItem(
"[data-tut='create-robot-step2-workspace-delete-button']"
),
getGuideItem(
"[data-tut='create-robot-step2-workspace-repositories']"
),
getGuideItem("[data-tut='create-robot-step2-repository-add-button']"),
getGuideItem(
"[data-tut='create-robot-step2-workspace-repository-name']"
),
getGuideItem(
"[data-tut='create-robot-step2-workspace-repository-url']"
),
getGuideItem(
"[data-tut='create-robot-step2-workspace-repository-branch']"
),
getGuideItem(
"[data-tut='create-robot-step2-workspace-repository-delete-button']"
),
]}
/>
</CreateRobotFormLoader>
);
}
Loading

0 comments on commit 7fb63f8

Please sign in to comment.