feat(on-premise case and form buttons): 🎉 add on-premise case, update…

…d form buttons and add robot type label on robot header
robolaunch · Aug 9, 2023 · 8429473 · 8429473
1 parent 6571fce
commit 8429473
Show file tree

Hide file tree

Showing 28 changed files with 438 additions and 229 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -931,6 +931,10 @@ video {
   margin-top: 0.1rem;
 }
 
+.mt-10{
+  margin-top: 2.5rem;
+}
+
 .block{
   display: block;
 }
@@ -1297,10 +1301,6 @@ video {
   width: 30vw;
 }
 
-.w-\[36vw\]{
-  width: 36vw;
-}
-
 .w-\[40rem\]{
   width: 40rem;
 }
@@ -1913,6 +1913,11 @@ 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;
@@ -3322,6 +3327,16 @@ td{
   border-color: rgb(194 194 194 / var(--tw-border-opacity)) !important;
 }
 
+.disabled\:\!border-layer-light-500:disabled{
+  --tw-border-opacity: 1 !important;
+  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;

diff --git a/src/components/ActionCells/InstanceActionCells.tsx b/src/components/ActionCells/InstanceActionCells.tsx
@@ -3,6 +3,7 @@ import Button from "../Button/Button";
 import { BiTrash, BiStopCircle, BiPlayCircle } from "react-icons/bi";
 import ChangeStateInstanceModal from "../../modals/ChangeStateInstanceModal";
 import TerminateInstanceModal from "../../modals/TerminateInstanceModal";
+import { envOnPremise } from "../../helpers/envProvider";
 
 interface IInstanceActionCells {
   data: any;
@@ -22,24 +23,39 @@ export default function InstanceActionCells({
     <Fragment>
       <div className="card flex gap-4 float-right">
         <Button
-          className={`!w-8 !h-8 !bg-transparent !border ${
+          className={`!w-8 !h-8 !bg-transparent !border disabled:!border-layer-light-500 ${
             data?.state === "running" || data?.state === "stopped"
               ? "!border-layer-primary-500"
               : "!border-layer-dark-100"
           }`}
           text={
             data?.state === "running" ? (
-              <BiStopCircle size={20} className="text-layer-primary-500" />
+              <BiStopCircle
+                size={20}
+                className={`${
+                  envOnPremise
+                    ? "text-layer-light-500"
+                    : "text-layer-primary-500"
+                }`}
+              />
             ) : data?.state === "stopped" ? (
-              <BiPlayCircle size={20} className="text-layer-primary-500" />
+              <BiPlayCircle
+                size={20}
+                className={`${
+                  envOnPremise
+                    ? "text-layer-light-500"
+                    : "text-layer-primary-500"
+                }`}
+              />
             ) : (
               <img src="/svg/general/loading.svg" alt="loading" />
             )
           }
           disabled={
-            data?.state === "running" || data?.state === "stopped"
+            envOnPremise ||
+            (data?.state === "running" || data?.state === "stopped"
               ? false
-              : true
+              : true)
           }
           onClick={
             data?.state === "running" || data?.state === "stopped"
@@ -48,18 +64,23 @@ export default function InstanceActionCells({
           }
         />
         <Button
-          className={`!w-8 !h-8 !bg-transparent !border  ${
+          className={`!w-8 !h-8 !bg-transparent !border disabled:!border-layer-light-500 ${
             data?.state === "running" || data?.state === "stopped"
               ? "!border-red-600"
               : "!border-layer-dark-100"
           }`}
           text={
             data?.state === "running" || data?.state === "stopped" ? (
-              <BiTrash className="text-red-600" />
+              <BiTrash
+                className={`${
+                  envOnPremise ? "text-layer-light-500" : "text-red-600"
+                }`}
+              />
             ) : (
               <img src="/svg/general/loading.svg" alt="loading" />
             )
           }
+          disabled={envOnPremise}
           onClick={() => setIsTerminateModalVisible(true)}
         />
       </div>

diff --git a/src/components/ActionCells/OrganizationActionCells.tsx b/src/components/ActionCells/OrganizationActionCells.tsx
@@ -4,6 +4,7 @@ import { BiTrash, BiPencil } from "react-icons/bi";
 import { HiOutlineEye } from "react-icons/hi";
 import DeleteOrganizationModal from "../../modals/DeleteOrganizationModal";
 import RenameOrganizationModal from "../../modals/RenameOrganizationModal";
+import { envOnPremise } from "../../helpers/envProvider";
 interface IOrganizationActionCells {
   data: any;
   reload: () => void;
@@ -34,14 +35,28 @@ export default function OrganizationActionCells({
           />
         )}
         <Button
-          className="!w-8 !h-8 !bg-transparent !border !border-layer-primary-500"
-          text={<BiPencil className="text-layer-primary-500" />}
+          className="!w-8 !h-8 !bg-transparent !border !border-layer-primary-500 disabled:!border-layer-light-500"
+          text={
+            <BiPencil
+              className={`${
+                envOnPremise ? "text-layer-light-500" : "text-red-600"
+              }`}
+            />
+          }
           onClick={() => setVisibleRenameModal(true)}
+          disabled={envOnPremise}
         />
         <Button
-          className="!w-8 !h-8 !bg-transparent !border !border-red-600"
-          text={<BiTrash className="text-red-600" />}
+          className="!w-8 !h-8 !bg-transparent !border !border-red-600 disabled:!border-layer-light-500"
+          text={
+            <BiTrash
+              className={`${
+                envOnPremise ? "text-layer-light-500" : "text-red-600"
+              }`}
+            />
+          }
           onClick={() => setVisibleDeleteModal(true)}
+          disabled={envOnPremise}
         />
       </div>
       {visibleRenameModal && (

diff --git a/src/components/ActionCells/RoboticsCloudActionCells.tsx b/src/components/ActionCells/RoboticsCloudActionCells.tsx
@@ -2,6 +2,7 @@ import React, { Fragment, ReactElement, useState } from "react";
 import Button from "../Button/Button";
 import { BiTrash } from "react-icons/bi";
 import DeleteRoboticsCloudModal from "../../modals/DeleteRoboticsCloudModal";
+import { envOnPremise } from "../../helpers/envProvider";
 
 interface IRoboticsCloudActionCells {
   data: any;
@@ -19,9 +20,16 @@ export default function RoboticsCloudActionCells({
     <Fragment>
       <div className="card flex gap-4 float-right">
         <Button
-          className="!w-8 !h-8 !bg-transparent !border  !border-red-600"
-          text={<BiTrash className="text-red-600" />}
+          className="!w-8 !h-8 !bg-transparent !border !border-red-600 disabled:!border-layer-light-500"
+          text={
+            <BiTrash
+              className={`${
+                envOnPremise ? "text-layer-light-500" : "text-red-600"
+              }`}
+            />
+          }
           onClick={() => setIsDeleteModalVisible(true)}
+          disabled={envOnPremise}
         />
       </div>
       {isDeleteModalVisible && (

diff --git a/src/components/BuildManagerStepsTable/BuildManagerStepsTable.tsx b/src/components/BuildManagerStepsTable/BuildManagerStepsTable.tsx
@@ -41,6 +41,8 @@ export default function BuildManagerStepsTable({
     ]
   );
 
+  console.log(responseBuildManager);
+
   const columns: any = useMemo(
     () => [
       {
@@ -74,7 +76,8 @@ export default function BuildManagerStepsTable({
           return <TickCell tick={rowData?.isRanCloud} />;
         },
       },
-      {
+
+      responseBuildManager?.robotClusters?.length > 1 && {
         key: "isRanPhysical",
         header: "Process Scope (Physical Instance)",
         align: "center",
@@ -106,13 +109,13 @@ export default function BuildManagerStepsTable({
         },
       },
     ],
-    [url?.instanceName]
+    [responseBuildManager, url?.instanceName]
   );
 
   return (
     <GeneralTable
       type="buildsmanager"
-      title="Build Manager Steps"
+      title="Build Managers"
       data={data}
       columns={columns}
       loading={!responseBuildManager}

diff --git a/src/components/CreateFormCancelButton/CreateFormCancelButton.tsx b/src/components/CreateFormCancelButton/CreateFormCancelButton.tsx
@@ -0,0 +1,30 @@
+import React, { ReactElement } from "react";
+import useMain from "../../hooks/useMain";
+import Button from "../Button/Button";
+
+interface ICreateFormCancelButton {
+  disabled?: boolean;
+}
+
+export default function CreateFormCancelButton({
+  disabled,
+}: ICreateFormCancelButton): ReactElement {
+  const { setSidebarState } = useMain();
+
+  return (
+    <Button
+      onClick={() => {
+        setSidebarState((prev: any) => {
+          return {
+            ...prev,
+            isCreateMode: false,
+          };
+        });
+      }}
+      disabled={disabled}
+      type="button"
+      className="!h-11 text-xs !bg-layer-light-50 !text-layer-primary-700 hover:!bg-layer-primary-100 border border-layer-primary-700 transition-all duration-500"
+      text="Cancel"
+    />
+  );
+}
diff --git a/src/components/CreateForms/CreateCloudInstancesForm.tsx b/src/components/CreateForms/CreateCloudInstancesForm.tsx
@@ -10,6 +10,7 @@ import { BsCpu } from "react-icons/bs";
 import Button from "../Button/Button";
 import { useFormik } from "formik";
 import responseProviders from "../../mock/CloudInstanceProviders.json";
+import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 
 export default function CreateCloudInstancesForm(): ReactElement {
   const { sidebarState, setSidebarState, selectedState } = useMain();
@@ -109,7 +110,8 @@ export default function CreateCloudInstancesForm(): ReactElement {
         <InputError error={formik?.errors?.instanceType} touched={true} />
       </div>
 
-      <div>
+      <div className="flex gap-2">
+        <CreateFormCancelButton disabled={formik.isSubmitting} />
         <Button
           type="submit"
           text="Create a new Cloud Instance"

diff --git a/src/components/CreateForms/CreateFleetForm.tsx b/src/components/CreateForms/CreateFleetForm.tsx
@@ -8,6 +8,7 @@ import useMain from "../../hooks/useMain";
 import { useAppDispatch } from "../../hooks/redux";
 import { createFederatedFleet } from "../../toolkit/FleetSlice";
 import InfoTip from "../InfoTip/InfoTip";
+import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 
 export default function CreateFleetForm(): ReactElement {
   const { sidebarState, setSidebarState, selectedState } = useMain();
@@ -53,13 +54,16 @@ export default function CreateFleetForm(): ReactElement {
         <InputError error={formik.errors.name} touched={formik.errors.name} />
       </div>
 
-      <Button
-        type="submit"
-        text="Create a new fleet"
-        disabled={formik.isSubmitting || !formik.isValid}
-        loading={formik.isSubmitting}
-        className="!h-11"
-      />
+      <div className="flex gap-2">
+        <CreateFormCancelButton disabled={formik.isSubmitting} />
+        <Button
+          type="submit"
+          text="Create a new fleet"
+          disabled={formik.isSubmitting || !formik.isValid}
+          loading={formik.isSubmitting}
+          className="!h-11"
+        />
+      </div>
     </form>
   );
 }
diff --git a/src/components/CreateForms/CreateOrganizationForm.tsx b/src/components/CreateForms/CreateOrganizationForm.tsx
@@ -8,6 +8,7 @@ import { useAppDispatch } from "../../hooks/redux";
 import { createOrganization } from "../../toolkit/OrganizationSlice";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
+import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 
 export default function CreateOrganizationForm(): ReactElement {
   const { sidebarState, setSidebarState }: any = useMain();
@@ -51,13 +52,16 @@ export default function CreateOrganizationForm(): ReactElement {
         <InputError error={formik.errors.name} touched={formik.errors.name} />
       </div>
 
-      <Button
-        type="submit"
-        text="Create a new organization"
-        disabled={formik.isSubmitting || !formik.isValid}
-        loading={formik.isSubmitting}
-        className="!h-11"
-      />
+      <div className="flex gap-2">
+        <CreateFormCancelButton disabled={formik.isSubmitting} />
+        <Button
+          type="submit"
+          text="Create a new organization"
+          disabled={formik.isSubmitting || !formik.isValid}
+          loading={formik.isSubmitting}
+          className="!h-11"
+        />
+      </div>
     </form>
   );
 }