feat(version): release 0.18.2 version

README.md

@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.18.2-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.18.1-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.18.2-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

docker/Jenkinsfile-private-robolaunch

@@ -0,0 +1,86 @@
+pipeline {
+  agent {
+    kubernetes {
+      yaml '''
+        apiVersion: v1
+        kind: Pod
+        metadata: 
+          name: kube-pod
+        spec:
+          containers:
+          - name: docker
+            image: docker:latest
+            imagePullPolicy: Always
+            command:
+            - cat
+            tty: true
+            securityContext:
+              privileged: true
+              runAsUser: 0
+            volumeMounts:
+            - mountPath: /var/run/docker.sock
+              name: docker-sock
+          - name: ubuntu
+            image: robolaunchio/build-image:1.0
+            imagePullPolicy: Always
+            command:
+            - cat
+            tty: true
+            env:
+            - name: CI
+              value: false
+          volumes:
+          - name: docker-sock
+            hostPath:
+              path: /var/run/docker.sock
+'''
+    }
+  }
+  stages {
+    stage('Install Node') {
+      steps {
+        container('ubuntu') {
+          sh 'npm install -g n'
+          sh 'n latest'
+        }
+      }
+    }
+    stage('Git Clone') {
+      steps {
+        container('ubuntu') {
+          git branch: 'main', credentialsId: '7322b7d8-a45e-4594-9bd8-fa1952a7aaad', url: '[email protected]:robolaunch/ui.git'
+          sh """export VER=`grep '"version":' package.json | awk '{print \$2}' | sed 's/"//g' | sed 's/,//'` && echo \$VER > version.txt"""
+          script {
+            env.VER = readFile('version.txt').trim()
+          }
+        }
+      }
+    }
+    stage('Install Depends && Build') {
+      steps {
+        container('ubuntu') {
+          withCredentials([file(credentialsId: 'frontend-private-robolaunch-env', variable: 'text')]) {
+            writeFile file:'./.env', text: readFile(text)
+          }
+          sh 'npm i --force'
+          sh 'npm run build'
+          sh "tar -zcvf ui-${env.VER}-${env.BUILD_NUMBER}.tar.gz build"
+          withCredentials([usernamePassword(credentialsId: '7fadeb6b-976b-40ed-8c7c-20e157b4f81a', passwordVariable: 'password', usernameVariable: 'username')]) {
+            sh "curl --fail -u $username:$password --upload-file ui-${env.VER}-${env.BUILD_NUMBER}.tar.gz https://nexus.robolaunch.cloud/repository/ui/"
+          }
+        }
+      }
+    }
+    stage('Docker Build && Push') {
+      steps {
+        container('docker') {
+          sh "docker build -t robolaunchio/frontend-private-robolaunch-httpd:${env.VER} ."
+          withCredentials([usernamePassword(credentialsId: 'dockerhub-robolaunchio', passwordVariable: 'password', usernameVariable: 'username')]) {
+            sh 'docker login -u $username -p $password'
+          }
+          sh "docker push robolaunchio/frontend-private-robolaunch-httpd:${env.VER}"
+        }
+      }
+    }
+  }
+}

package.json

@@ -1,9 +1,9 @@
 {
   "name": "ui",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
+    "dev": "react-scripts start",
     "watch": "npx tailwindcss -i ./tailwind.css -o ./public/css/style.css --watch",
     "build": "react-scripts build",
     "test": "react-scripts test",

public/css/style.css

@@ -2411,6 +2411,10 @@ video {
   line-height: 2.25rem;
 }
 
+.text-\[0\.58rem\] {
+  font-size: 0.58rem;
+}
+
 .text-\[0\.60rem\] {
   font-size: 0.60rem;
 }

src/components/ColorLabel/ColorLabel.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from "react";
+import useRobot from "../../hooks/useRobot";
+import { envOnPremiseRobot } from "../../helpers/envProvider";
+import ContentLoader from "react-content-loader";
+
+export default function ColorLabel(): ReactElement {
+  const { responseRobot } = useRobot();
+
+  return (
+    <div className="w-fit rounded-lg bg-layer-primary-100 px-2 py-1 text-[0.58rem] font-medium capitalize text-layer-primary-500">
+      {responseRobot?.robotClusters?.length === 1
+        ? `Virtual ${envOnPremiseRobot ? "Application" : "Robot"}`
+        : (responseRobot?.robotClusters?.length === 2 &&
+            `Physical ${envOnPremiseRobot ? "Application" : "Robot"}`) || (
+            <ContentLoader
+              speed={1}
+              width={64}
+              height={18}
+              backgroundColor="#f5e5ff"
+              foregroundColor="#fbf4ff"
+            >
+              <rect width="64" height="18" />
+            </ContentLoader>
+          )}
+    </div>
+  );
+}

src/components/ConnectionLabel/ConnectionLabel.tsx

@@ -0,0 +1,25 @@
+import { Fragment, ReactElement } from "react";
+import { RxOpenInNewWindow } from "react-icons/rx";
+
+interface IConnectionLabel {
+  label: string;
+  url: string;
+}
+
+export default function ConnectionLabel({
+  label,
+  url,
+}: IConnectionLabel): ReactElement {
+  return (
+    <Fragment>
+      {!url ? (
+        <span className="text-xs font-semibold">{label}:</span>
+      ) : (
+        <a className="flex gap-1" href={url} target="_blank" rel="noreferrer">
+          <RxOpenInNewWindow size={14} />
+          <span className="text-xs font-semibold">{label}:</span>
+        </a>
+      )}
+    </Fragment>
+  );
+}

src/components/Connections/Connections.tsx

@@ -0,0 +1,44 @@
+import React, { ReactElement, useEffect } from "react";
+import useRobot from "../../hooks/useRobot";
+import StateCell from "../TableInformationCells/StateCell";
+import ConnectionLabel from "../ConnectionLabel/ConnectionLabel";
+
+export default function Connections(): ReactElement {
+  const { responseRobot, isSettedCookie } = useRobot();
+
+  useEffect(() => {
+    console.log("isSettedCookie", isSettedCookie);
+  }, [isSettedCookie]);
+
+  return (
+    <div className="flex gap-4">
+      <div className="flex gap-1" id="ide">
+        <ConnectionLabel label="IDE" url={responseRobot?.ideIngressEndpoint} />
+        <StateCell
+          state={
+            isSettedCookie === null
+              ? "Waiting"
+              : isSettedCookie
+              ? "Connected"
+              : "Warning"
+          }
+        />
+      </div>
+      <div className="flex gap-1" id="vdi">
+        <ConnectionLabel
+          label="VDI"
+          url={"https://" + responseRobot?.vdiIngressEndpoint?.split("//")[1]}
+        />
+        <StateCell
+          state={
+            isSettedCookie === null
+              ? "Waiting"
+              : isSettedCookie
+              ? "Connected"
+              : "Warning"
+          }
+        />
+      </div>
+    </div>
+  );
+}

src/components/CreateForms/CreateCloudInstancesForm.tsx → src/components/CreateForms/CFInstance.tsx

@@ -12,7 +12,7 @@ import { useFormik } from "formik";
 import responseProviders from "../../mock/CloudInstanceProviders.json";
 import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 
-export default function CreateCloudInstancesForm(): ReactElement {
+export default function CFInstance(): ReactElement {
   const { sidebarState, setSidebarState, selectedState } = useMain();
   const dispatch = useAppDispatch();
 

src/components/CreateForms/CreateOrganizationForm.tsx → src/components/CreateForms/CFOrganization.tsx

@@ -10,7 +10,7 @@ import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
 import Button from "../Button/Button";
 
-export default function CreateOrganizationForm(): ReactElement {
+export default function CFOrganization(): ReactElement {
   const { sidebarState, setSidebarState }: any = useMain();
 
   const dispatch = useAppDispatch();
@@ -49,7 +49,7 @@ export default function CreateOrganizationForm(): ReactElement {
           className="!text-sm"
           disabled={formik.isSubmitting}
         />
-        <InputError error={formik.errors.name} touched={formik.errors.name} />
+        <InputError error={formik.errors.name} touched={!!formik.errors.name} />
       </div>
 
       <div className="flex gap-2">

src/components/CreateForms/ConnectPhysicalInstanceForm.tsx → src/components/CreateForms/CFPhysical.tsx

@@ -11,7 +11,7 @@ import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
 
-export default function ConnectPhysicalInstanceForm(): ReactElement {
+export default function CFPhysical(): ReactElement {
   const [code, setCode] = React.useState<string>("");
   const { sidebarState, setSidebarState, selectedState } = useMain();
   const dispatch = useAppDispatch();

src/components/CreateForms/CreateRoboticsCloudForm.tsx → src/components/CreateForms/CFRegion.tsx

@@ -12,7 +12,7 @@ import InfoTip from "../InfoTip/InfoTip";
 import responseProviders from "../../mock/CloudInstanceProviders.json";
 import CreateFormCancelButton from "../CreateFormCancelButton/CreateFormCancelButton";
 
-export default function CreateRoboticsCloudForm(): ReactElement {
+export default function CFRegion(): ReactElement {
   const { sidebarState, setSidebarState, selectedState } = useMain();
   const dispatch = useAppDispatch();
 

src/components/CreateForms/CreateRobotFormStep1.tsx → src/components/CreateForms/CFStep1.tsx

@@ -21,13 +21,11 @@ import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
 
-interface ICreateRobotFormStep1 {
+interface ICFStep1 {
   isImportRobot?: boolean;
 }
 
-export default function CreateRobotFormStep1({
-  isImportRobot,
-}: ICreateRobotFormStep1): ReactElement {
+export default function CFStep1({ isImportRobot }: ICFStep1): ReactElement {
   const { robotData, setRobotData } = useCreateRobot();
   const { selectedState, handleCreateRobotNextStep } = useMain();
   const [responseRobot, setResponseRobot] = useState<any>(undefined);

src/components/CreateForms/CreateRobotFormStep2.tsx → src/components/CreateForms/CFStep2.tsx

@@ -22,13 +22,11 @@ import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
 
-interface ICreateRobotFormStep2 {
+interface ICFStep2 {
   isImportRobot?: boolean;
 }
 
-export default function CreateRobotFormStep2({
-  isImportRobot,
-}: ICreateRobotFormStep2): ReactElement {
+export default function CFStep2({ isImportRobot }: ICFStep2): ReactElement {
   const [responseFleet, setResponseFleet] = useState<any>(undefined);
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
   const { selectedState, handleCreateRobotNextStep, setSidebarState } =

src/components/CreateForms/CreateRobotFormStep3.tsx → src/components/CreateForms/CFStep3.tsx

@@ -1,6 +1,6 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import RobotDeleteBuildManagerButton from "../RobotDeleteBuildManagerButton/RobotDeleteBuildManagerButton";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
+import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import CFAddBuildButton from "../CFAddBuildButton/CFAddBuildButton";
 import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { createBuildManager } from "../../toolkit/RobotSlice";
@@ -18,13 +18,11 @@ import Button from "../Button/Button";
 import { toast } from "sonner";
 import * as Yup from "yup";
 
-interface ICreateRobotFormStep3 {
+interface ICFStep3 {
   isImportRobot?: boolean;
 }
 
-export default function CreateRobotFormStep3({
-  isImportRobot,
-}: ICreateRobotFormStep3): ReactElement {
+export default function CFStep3({ isImportRobot }: ICFStep3): ReactElement {
   const { robotData, setRobotData, handleAddStepToBuildStep } =
     useCreateRobot();
   const [responseRobot, setResponseRobot] = useState<any>(undefined);

src/components/CreateForms/CreateRobotFormStep4.tsx → src/components/CreateForms/CFStep4.tsx

@@ -20,17 +20,17 @@ import { useFormik } from "formik";
 import { toast } from "sonner";
 import * as Yup from "yup";
 
-interface ICreateRobotFormStep4 {
+interface ICFStep4 {
   isImportRobot?: boolean;
   robotDataLaunchIndex?: number;
   robotClusters?: any[];
 }
 
-export default function CreateRobotFormStep4({
+export default function CFStep4({
   isImportRobot,
   robotDataLaunchIndex,
   robotClusters,
-}: ICreateRobotFormStep4): ReactElement {
+}: ICFStep4): ReactElement {
   const { robotData, setRobotData } = useCreateRobot();
   const { selectedState } = useMain();
   const dispatch = useAppDispatch();