Display and change backend url from onboarding (#341)

src/assets/css/system-check.css

@@ -7,12 +7,20 @@
   @apply text-sm;
 }
 
-.system-check__requirements p:last-child,
-.system-check__requirements button {
-  @apply min-w-[120px];
-}
-
 .system-check__container {
   min-height: calc(100vh - 172px);
   @apply flex mb-[70px] items-center;
 }
+
+@keyframes rotateCheckIcon {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.system-check img.is-rotating {
+  animation: rotateCheckIcon 1.5s linear infinite;
+}

src/modules/onboarding/components/BackendUrl.tsx

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { useState } from "react";
+
+import info from "../../../assets/images/comment-info.svg";
+import useSettingStore from "../../../shared/store/setting";
+
+interface BackendUrlProps {
+  isRunning: boolean;
+  name: string;
+}
+
+const BackendUrl = ({ isRunning, name }: BackendUrlProps) => {
+  const backendUrl = useSettingStore((state) => state.backendUrl);
+  const setBackendUrl = useSettingStore((state) => state.setBackendUrl);
+  const [isEditing, setIsEditing] = useState(false);
+  const [backendUrlState, setBackendUrlState] = useState(backendUrl);
+
+  const handleApply = () => {
+    setBackendUrl(backendUrlState);
+    setIsEditing(false);
+  };
+
+  const handleChange = () => {
+    setIsEditing(true);
+  };
+
+  // This is a hacky way to calculate the width of the input field, with a minimum of 10ch
+  const inputWidth = backendUrlState.length - 2 > 10 ? `${backendUrlState.length - 2}ch` : "10ch";
+
+  return (
+    <div className="flex justify-between items-baseline mt-3">
+      <p className="text-[#CFCFCF] text-base flex w-2/3">{name}</p>
+      <div className="flex max-sm:flex-wrap flex-1 items-center w-1/3">
+        {isRunning ? (
+          <span className="text-ok text-sm">&#10003;</span>
+        ) : (
+          <img src={info} alt="info" />
+        )}
+        <input
+          autoComplete="off"
+          autoCapitalize="off"
+          type="text"
+          style={{ width: inputWidth }}
+          className={clsx("text-sm py-1 mr-2 pl-2 outline-none", {
+            "text-warning": !isRunning,
+            "text-ok": isRunning,
+            "bg-[#4D4D4F58] rounded-lg": isEditing,
+            "bg-transparent opacity-80": !isEditing,
+          })}
+          value={backendUrlState}
+          disabled={!isEditing}
+          onChange={(e) => setBackendUrlState(e.target.value)}
+        />
+        {!isEditing ? (
+          <button type="button" onClick={handleChange} className="text-white opacity-70">
+            Change
+          </button>
+        ) : (
+          <button type="button" onClick={handleApply} className="text-white opacity-70">
+            Apply
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BackendUrl;

src/modules/onboarding/components/Dependency.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "react-tooltip";
 import Spinner from "shared/components/Spinner";
 
+import info from "../../../assets/images/comment-info.svg";
 import type { DependencyProps } from "../types";
 
 const Dependency = ({
@@ -13,35 +14,22 @@ const Dependency = ({
 }: DependencyProps) => {
   return (
     <div className="flex justify-between mt-4">
-      <p className="text-[#CFCFCF] text-base">{name}</p>
-      {isRunning && <p className="text-[#2ED291] text-base">&#10003;&nbsp;{status}</p>}
+      <p className="text-[#CFCFCF] text-base flex w-2/3">{name}</p>
+      {isRunning && (
+        <div className="flex w-1/3">
+          <span className="text-ok text-sm mr-2">&#10003;</span>
+          <p className="text-ok text-base">{status}</p>
+        </div>
+      )}
       {isLoading && (
         <p>
           <Spinner className="w-5 h-5" />
         </p>
       )}
       {!isRunning && !isLoading && (
         <>
-          <button className="text-[#F9B96D] flex gap-3 not_found" id={`${id}`}>
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <g clipPath="url(#clip0_1084_304)">
-                <path
-                  d="M9 4.33334C9 4.53112 8.94136 4.72446 8.83147 4.88891C8.72159 5.05336 8.56541 5.18153 8.38269 5.25722C8.19996 5.3329 7.9989 5.35271 7.80491 5.31412C7.61093 5.27554 7.43275 5.1803 7.2929 5.04044C7.15305 4.90059 7.0578 4.72241 7.01922 4.52843C6.98063 4.33445 7.00044 4.13338 7.07613 3.95065C7.15181 3.76793 7.27999 3.61175 7.44443 3.50187C7.60888 3.39199 7.80222 3.33334 8 3.33334C8.26522 3.33334 8.51958 3.43869 8.70711 3.62623C8.89465 3.81377 9 4.06812 9 4.33334ZM16 8C16 6.41775 15.5308 4.87104 14.6518 3.55544C13.7727 2.23985 12.5233 1.21447 11.0615 0.608967C9.59966 0.00346629 7.99113 -0.15496 6.43928 0.153721C4.88743 0.462403 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346629 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87104 15.5308 6.41775 16 8 16H16V8ZM14.6667 8V14.6667H8C6.68146 14.6667 5.39253 14.2757 4.2962 13.5431C3.19987 12.8106 2.34539 11.7694 1.84081 10.5512C1.33622 9.33305 1.2042 7.99261 1.46144 6.6994C1.71867 5.4062 2.35361 4.21831 3.28596 3.28596C4.21831 2.35361 5.4062 1.71867 6.6994 1.46144C7.99261 1.2042 9.33305 1.33622 10.5512 1.84081C11.7694 2.34539 12.8106 3.19987 13.5431 4.2962C14.2757 5.39253 14.6667 6.68146 14.6667 8ZM9.33334 8C9.33334 7.64638 9.19286 7.30724 8.94281 7.0572C8.69277 6.80715 8.35363 6.66667 8 6.66667H6.66667V8H8V12.6667H9.33334V8Z"
-                  fill="#F9B96D"
-                />
-              </g>
-              <defs>
-                <clipPath id="clip0_1084_304">
-                  <rect width="16" height="16" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
+          <button className="text-warning flex gap-2 flex-1 justify-start" id={`${id}`}>
+            <img src={info} alt="info" />
             {status}
           </button>
           <Tooltip anchorSelect={`#${id}`} place="right" className="tooltip !left-[450px]">

src/modules/onboarding/components/SystemCheck.tsx

@@ -3,12 +3,15 @@ import arrow from "assets/images/arrow.svg";
 import Logo from "assets/images/brand-logo.svg";
 import computerLogo from "assets/images/computer.svg";
 import regenerate from "assets/images/regenerate.svg";
+import clsx from "clsx";
+import { useState } from "react";
 import PrimaryButton from "shared/components/PrimaryButton";
 import { SYSTEM_MEMORY_LIMIT } from "shared/helpers/utils";
 import useSystemStats from "shared/hooks/useSystemStats";
 
 import type { SystemCheckProps } from "../types";
 
+import BackendUrl from "./BackendUrl";
 import Dependency from "./Dependency";
 
 const SystemCheck = ({
@@ -19,13 +22,17 @@ const SystemCheck = ({
   next,
 }: SystemCheckProps) => {
   const { data: response, isLoading, refetch } = useSystemStats();
-
+  const [isCheckingDocker, setIsCheckingDocker] = useState(false);
   const memoryLimit = response?.data?.memory_limit;
   const isMemorySufficient = memoryLimit! > SYSTEM_MEMORY_LIMIT;
 
   const onCheckAgainClick = () => {
-    handleCheckIsDockerRunning();
-    refetch();
+    (async () => {
+      setIsCheckingDocker(true);
+      await handleCheckIsDockerRunning();
+      await refetch();
+      setIsCheckingDocker(false);
+    })();
   };
 
   return (
@@ -52,8 +59,8 @@ const SystemCheck = ({
       </div>
       <div className="relative z-[1] mx-auto max-md:w-full system-check__container">
         <div className="mx-auto md:max-w-[600px] max-md:px-6 w-full rounded-xl">
-          <div className="">
-            <div className="md:max-w-[450px] mx-auto relative z-10">
+          <div>
+            <div className="mx-auto relative z-10">
               <img
                 className="mx-auto w-[85px] h-[60px] my-[30px]"
                 src={computerLogo}
@@ -99,6 +106,7 @@ const SystemCheck = ({
                     </div>
                   }
                 />
+                <BackendUrl isRunning={isServerRunning} name="Backend URL" />
               </div>
               <div className="text-center mt-6 mb-14">
                 <button
@@ -110,7 +118,9 @@ const SystemCheck = ({
                     height={18}
                     src={regenerate}
                     alt="regenerate-logo"
-                    className="mr-2"
+                    className={clsx("mr-2", {
+                      "is-rotating": isCheckingDocker,
+                    })}
                   />
                   <span className="border-b">Check Again</span>
                 </button>

src/modules/onboarding/types.ts

@@ -5,7 +5,7 @@ export type WelcomeScreenProps = {
 };
 
 export type SystemCheckProps = {
-  handleCheckIsDockerRunning: () => void;
+  handleCheckIsDockerRunning: () => Promise<void>;
   isDockerRunning: boolean;
   isServerRunning: boolean;
   back: () => void;

src/shared/helpers/utils.ts

@@ -18,9 +18,14 @@ export const checkIsContainerRunning = async () => {
 };
 
 export const checkIsServerRunning = async () => {
-  const url = useSettingStore.getState().backendUrl;
-  const response = await fetch(`${url}/v1/`, { method: "GET" });
-  return Boolean(response.ok);
+  try {
+    const url = useSettingStore.getState().backendUrl;
+    const response = await fetch(`${url}/v1/`, { method: "GET" });
+    return Boolean(response.ok);
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
 };
 
 export const runDockerContainer = async () => {

tailwind.config.js

@@ -29,6 +29,8 @@ module.exports = {
         800: "#28292D",
         900: "#1D1E24",
       },
+      ok: "#2ED291",
+      warning: "#F9B96D",
     },
     extend: {
       fontFamily: {