From dca6eddd5f3583ee5bcc920c530fb261a845f38b Mon Sep 17 00:00:00 2001
From: anti <samuel@securejump.cl>
Date: Wed, 22 Apr 2026 17:14:17 -0400
Subject: [PATCH] feat(web/topology): hide DELETE on running topologies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The DELETE path on a topology whose containers are still up is a
footgun — even if the backend rejects the delete, surfacing the
button invites mistakes. Gate it so DELETE only shows for pending,
failed, and torn-down topologies. Active/degraded/deploying topologies
must be torn down first, which then reveals DELETE again.
---
 .../components/TopologyList/TopologyList.tsx  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/decnet_web/src/components/TopologyList/TopologyList.tsx b/decnet_web/src/components/TopologyList/TopologyList.tsx
index 626b48ec..ba9c8d59 100644
--- a/decnet_web/src/components/TopologyList/TopologyList.tsx
+++ b/decnet_web/src/components/TopologyList/TopologyList.tsx
@@ -222,15 +222,17 @@ const TopologyList: React.FC = () => {
                   <Power size={10} /> {armed === `td:${r.id}` ? 'CONFIRM?' : 'TEARDOWN'}
                 </button>
               )}
-              <button
-                type="button"
-                className={`tlist-btn small danger ${armed === r.id ? 'armed' : ''}`}
-                disabled={busy === r.id}
-                onClick={() => armed === r.id ? onDelete(r.id) : arm(r.id)}
-                title={armed === r.id ? 'Click again to confirm' : 'Delete'}
-              >
-                <Trash2 size={10} /> {armed === r.id ? 'CONFIRM?' : 'DELETE'}
-              </button>
+              {!['active', 'degraded', 'deploying'].includes(r.status) && (
+                <button
+                  type="button"
+                  className={`tlist-btn small danger ${armed === r.id ? 'armed' : ''}`}
+                  disabled={busy === r.id}
+                  onClick={() => armed === r.id ? onDelete(r.id) : arm(r.id)}
+                  title={armed === r.id ? 'Click again to confirm' : 'Delete'}
+                >
+                  <Trash2 size={10} /> {armed === r.id ? 'CONFIRM?' : 'DELETE'}
+                </button>
+              )}
             </div>
           </div>
         ))}