From fcc0dd93fdd50802845e73af07e9468011872273 Mon Sep 17 00:00:00 2001
From: elvis liao <1219585136@qq.com>
Date: Fri, 27 Sep 2024 13:42:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(DeployProgress):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/certimate/DeployProgress.tsx   | 162 ++++++------------
 1 file changed, 55 insertions(+), 107 deletions(-)

diff --git a/ui/src/components/certimate/DeployProgress.tsx b/ui/src/components/certimate/DeployProgress.tsx
index b96dc2b9..caed3f2a 100644
--- a/ui/src/components/certimate/DeployProgress.tsx
+++ b/ui/src/components/certimate/DeployProgress.tsx
@@ -1,5 +1,8 @@
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils"
+
+
 import { Separator } from "../ui/separator";
 
 type DeployProgressProps = {
@@ -10,116 +13,61 @@ type DeployProgressProps = {
 const DeployProgress = ({ phase, phaseSuccess }: DeployProgressProps) => {
   const { t } = useTranslation();
 
-  let rs = <> </>;
+  let step = 0;
+
   if (phase === "check") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap  text-muted-foreground">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-red-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap  text-muted-foreground">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
+    step = 1
+  } else if (phase === "apply") {
+    step = 2
+  } else if (phase === "deploy") {
+    step = 3
   }
 
-  if (phase === "apply") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-red-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow" />
-          <div className="text-xs text-nowrap text-muted-foreground">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
-  }
-
-  if (phase === "deploy") {
-    if (phaseSuccess) {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    } else {
-      rs = (
-        <div className="flex items-center">
-          <div className="text-xs text-nowrap text-green-600">
-            {t('deploy.progress.check')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap  text-green-600">
-            {t('deploy.progress.apply')}
-          </div>
-          <Separator className="h-1 grow bg-green-600" />
-          <div className="text-xs text-nowrap text-red-600">
-            {t('deploy.progress.deploy')}
-          </div>
-        </div>
-      );
-    }
-  }
-
-  return rs;
+  return (
+    <div className="flex items-center">
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step === 1 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 1 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.check')}
+      </div>
+      <Separator className={
+        cn(
+          "h-1 grow max-w-[60px]",
+          step > 1 ? "bg-green-600" : "",
+        )
+      } />
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step < 2 ? "text-muted-foreground" : "",
+          step === 2 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 2 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.apply')}
+      </div>
+      <Separator className={
+        cn(
+          "h-1 grow max-w-[60px]",
+          step > 2 ? "bg-green-600" : "",
+        )
+      } />
+      <div className={
+        cn(
+          "text-xs text-nowrap",
+          step < 3 ? "text-muted-foreground" : "",
+          step === 3 ? phaseSuccess ? "text-green-600" : "text-red-600" : "",
+          step > 3 ? "text-green-600" : "",
+        )
+      }>
+        {t('deploy.progress.deploy')}
+      </div>
+    </div>
+  )
 };
 
 export default DeployProgress;