From a6a5f2fcce1139fad7db88bf7d775dccf0231980 Mon Sep 17 00:00:00 2001
From: cchalopin <clement.chalopin@gmail.com>
Date: Mon, 26 Aug 2024 11:29:56 +0200
Subject: [PATCH] feat: display redeploy button only on change append

---
 web/src/components/DeployButtons.tsx  | 11 ++++++++++-
 web/src/components/DeploySettings.tsx |  5 ++++-
 web/src/components/DisplayLogs.tsx    |  2 +-
 web/src/pages/DeployPage.tsx          |  9 ++++++++-
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/src/components/DeployButtons.tsx b/web/src/components/DeployButtons.tsx
index 5203a7c..7fd93e7 100644
--- a/web/src/components/DeployButtons.tsx
+++ b/web/src/components/DeployButtons.tsx
@@ -12,11 +12,15 @@ import ModalDeleteConfirmation from "./modals/ModalDeleteConfirmation";
 
 type DeployButtonsProps = {
   deploy: DeployDto;
+  toReDeploy: boolean;
+  setToReDeploy: (toReDeploy: boolean) => void;
   fetchDeployById: (deployId: string) => void;
 };
 
 export default function DeployButtons({
   deploy,
+  toReDeploy,
+  setToReDeploy,
   fetchDeployById,
 }: DeployButtonsProps) {
   const navigate = useNavigate();
@@ -48,6 +52,7 @@ export default function DeployButtons({
       navigate(`/deploy/${deploy.id}/installation`);
       await reDeployAppApi(deploy.id);
       setReDeployButtonState(ButtonStateEnum.SUCESS);
+      setToReDeploy(false);
       fetchDeployById(deploy.id);
     } catch (e) {
       console.error(e);
@@ -99,7 +104,11 @@ export default function DeployButtons({
           "Start"
         )}
       </Button>
-      <Button variant="secondary" onClick={() => reDeployApplication()}>
+      <Button
+        variant={toReDeploy ? "default" : "ghost"}
+        color="bg-yellow-600"
+        onClick={() => reDeployApplication()}
+      >
         {redeployButtonState === ButtonStateEnum.PENDING ? (
           <SpinnerIcon color="text-black" />
         ) : (
diff --git a/web/src/components/DeploySettings.tsx b/web/src/components/DeploySettings.tsx
index 4bc9762..c7371d3 100644
--- a/web/src/components/DeploySettings.tsx
+++ b/web/src/components/DeploySettings.tsx
@@ -13,11 +13,13 @@ type DeploySettingsProps = {
   deploy: DeployDto;
   serverDomain: string;
   fetchDeployById: (id: string) => void;
+  setToReDeploy: (toReDeploy: boolean) => void;
 };
 
 export default function DeploySettings({
   deploy,
   serverDomain,
+  setToReDeploy,
   fetchDeployById,
 }: DeploySettingsProps) {
   const envs: Env[] =
@@ -33,13 +35,14 @@ export default function DeploySettings({
     try {
       await editDeployementApi(editDeployDto);
       fetchDeployById(deploy.id);
+      setToReDeploy(true);
     } catch (e) {
       console.error(e);
     }
   }
 
   return (
-    <div>
+    <div className="pb-20">
       <div className="font-bold text-xl">Git Hooks</div>
       <div className="mt-4 flex items-center space-x-2">
         <Checkbox
diff --git a/web/src/components/DisplayLogs.tsx b/web/src/components/DisplayLogs.tsx
index 6f82e18..35a8436 100644
--- a/web/src/components/DisplayLogs.tsx
+++ b/web/src/components/DisplayLogs.tsx
@@ -7,7 +7,7 @@ type DisplayLogsProps = {
 
 export default function DisplayLogs({ logs }: DisplayLogsProps) {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col pb-20">
       {logs.map((log, idx) => (
         <code
           key={idx}
diff --git a/web/src/pages/DeployPage.tsx b/web/src/pages/DeployPage.tsx
index 5e10621..2332f70 100644
--- a/web/src/pages/DeployPage.tsx
+++ b/web/src/pages/DeployPage.tsx
@@ -19,6 +19,7 @@ export default function DeployPage() {
   const navigate = useNavigate();
   const [deploy, setDeploy] = useState<DeployDto | null>(null);
   const [server, setServer] = useState<ServerDto | null>(null);
+  const [toReDeploy, setToReDeploy] = useState(false);
 
   async function fetchDeployById(id: string) {
     const res = await getDeployByIdApi(id);
@@ -47,7 +48,12 @@ export default function DeployPage() {
     <div className="mt-40">
       <div className="flex justify-between">
         <div className="text-xl font-bold mb-2">{deploy.name}</div>
-        <DeployButtons deploy={deploy} fetchDeployById={fetchDeployById} />
+        <DeployButtons
+          deploy={deploy}
+          toReDeploy={toReDeploy}
+          setToReDeploy={setToReDeploy}
+          fetchDeployById={fetchDeployById}
+        />
       </div>
       <Status status={deploy.status} />
       <div className="flex items-center mt-2 gap-2">
@@ -81,6 +87,7 @@ export default function DeployPage() {
           <DeploySettings
             serverDomain={server.domain}
             deploy={deploy}
+            setToReDeploy={setToReDeploy}
             fetchDeployById={fetchDeployById}
           />
         </TabsContent>