From 80d748facbb26ee20efac176ae3d3641d152bab4 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Fri, 17 May 2024 17:38:19 +0800
Subject: [PATCH] Disable restart button if replica is not active healthy
 (#26429)

* Disable restart button if replica is not active healthy

* Prettier
---
 .../InfrastructureConfiguration/InstanceNode.tsx | 16 ++++++++++++----
 .../InfrastructureConfiguration/MapView.tsx      | 12 ++++++++++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
index 9398f4a6cd7..5c0dfeea2b2 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
@@ -332,7 +332,7 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-40" side="bottom" align="end">
             <DropdownMenuItem
-              disabled={status !== PROJECT_STATUS.ACTIVE_HEALTHY}
+              disabled={status !== REPLICA_STATUS.ACTIVE_HEALTHY}
               className="gap-x-2"
             >
               <Link href={`/project/${ref}/settings/database?connectionString=${id}`}>
@@ -340,7 +340,7 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem
-              disabled={status !== PROJECT_STATUS.ACTIVE_HEALTHY}
+              disabled={status !== REPLICA_STATUS.ACTIVE_HEALTHY}
               className="gap-x-2"
             >
               <Link href={`/project/${ref}/reports/database?db=${id}&chart=replication-lag`}>
@@ -348,13 +348,21 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
               </Link>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem className="gap-x-2" onClick={() => onSelectRestartReplica()}>
+            <DropdownMenuItem
+              disabled={status !== REPLICA_STATUS.ACTIVE_HEALTHY}
+              className="gap-x-2"
+              onClick={() => onSelectRestartReplica()}
+            >
               Restart replica
             </DropdownMenuItem>
             {/* <DropdownMenuItem className="gap-x-2" onClick={() => onSelectResizeReplica()}>
                 Resize replica
               </DropdownMenuItem> */}
-            <DropdownMenuItem className="gap-x-2" onClick={() => onSelectDropReplica()}>
+            <DropdownMenuItem
+              disabled={status !== REPLICA_STATUS.ACTIVE_HEALTHY}
+              className="gap-x-2"
+              onClick={() => onSelectDropReplica()}
+            >
               Drop replica
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
index e11b25f62de..749d63a686d 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx
@@ -280,14 +280,20 @@ const MapView = ({
                             <Button type="text" icon={<MoreVertical />} className="px-1" />
                           </DropdownMenuTrigger>
                           <DropdownMenuContent className="w-40" side="bottom" align="end">
-                            <DropdownMenuItem className="gap-x-2">
+                            <DropdownMenuItem
+                              className="gap-x-2"
+                              disabled={database.status !== REPLICA_STATUS.ACTIVE_HEALTHY}
+                            >
                               <Link
                                 href={`/project/${ref}/settings/database?connectionString=${database.identifier}`}
                               >
                                 View connection string
                               </Link>
                             </DropdownMenuItem>
-                            <DropdownMenuItem className="gap-x-2">
+                            <DropdownMenuItem
+                              className="gap-x-2"
+                              disabled={database.status !== REPLICA_STATUS.ACTIVE_HEALTHY}
+                            >
                               <Link
                                 href={`/project/${ref}/reports/database?db=${database.identifier}&chart=replication-lag`}
                               >
@@ -299,12 +305,14 @@ const MapView = ({
 
                             <DropdownMenuItem
                               className="gap-x-2"
+                              disabled={database.status !== REPLICA_STATUS.ACTIVE_HEALTHY}
                               onClick={() => onSelectRestartReplica(database)}
                             >
                               Restart replica
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               className="gap-x-2"
+                              disabled={database.status !== REPLICA_STATUS.ACTIVE_HEALTHY}
                               onClick={() => onSelectDropReplica(database)}
                             >
                               Drop replica