diff --git a/src/assets/css/system-check.css b/src/assets/css/system-check.css index 1407908f..928f3612 100644 --- a/src/assets/css/system-check.css +++ b/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; +} diff --git a/src/modules/onboarding/components/BackendUrl.tsx b/src/modules/onboarding/components/BackendUrl.tsx new file mode 100644 index 00000000..1722c28a --- /dev/null +++ b/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 ( +
+

{name}

+
+ {isRunning ? ( + ✓ + ) : ( + info + )} + setBackendUrlState(e.target.value)} + /> + {!isEditing ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default BackendUrl; diff --git a/src/modules/onboarding/components/Dependency.tsx b/src/modules/onboarding/components/Dependency.tsx index f8790f6a..be79a08d 100644 --- a/src/modules/onboarding/components/Dependency.tsx +++ b/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,8 +14,13 @@ const Dependency = ({ }: DependencyProps) => { return (
-

{name}

- {isRunning &&

✓ {status}

} +

{name}

+ {isRunning && ( +
+ ✓ +

{status}

+
+ )} {isLoading && (

@@ -22,26 +28,8 @@ const Dependency = ({ )} {!isRunning && !isLoading && ( <> - diff --git a/src/modules/onboarding/components/SystemCheck.tsx b/src/modules/onboarding/components/SystemCheck.tsx index b4f8d7e4..2e51c1fd 100644 --- a/src/modules/onboarding/components/SystemCheck.tsx +++ b/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 = ({

-
-
+
+
} /> +
diff --git a/src/modules/onboarding/types.ts b/src/modules/onboarding/types.ts index b48adf2a..19e5bc2a 100644 --- a/src/modules/onboarding/types.ts +++ b/src/modules/onboarding/types.ts @@ -5,7 +5,7 @@ export type WelcomeScreenProps = { }; export type SystemCheckProps = { - handleCheckIsDockerRunning: () => void; + handleCheckIsDockerRunning: () => Promise; isDockerRunning: boolean; isServerRunning: boolean; back: () => void; diff --git a/src/shared/helpers/utils.ts b/src/shared/helpers/utils.ts index 5a834093..12d29397 100644 --- a/src/shared/helpers/utils.ts +++ b/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 () => { diff --git a/tailwind.config.js b/tailwind.config.js index 715c532c..01287e22 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -29,6 +29,8 @@ module.exports = { 800: "#28292D", 900: "#1D1E24", }, + ok: "#2ED291", + warning: "#F9B96D", }, extend: { fontFamily: {