From e09b839ac073df4ccd9743e70a7447a9ddba2f04 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 15 May 2025 13:55:56 +0200
Subject: [PATCH] chore: disable delete button if a context field has usage
 (#10002)

Blocks deletion of context fields from the UI if the context field has
any usage.

<img width="1399" alt="image"
src="https://github.com/user-attachments/assets/e6c26671-761b-4e54-9850-c505ba7b42f3"
/>
---
 .../src/component/context/ContextList/ContextActionsCell.tsx   | 3 +++
 .../component/context/ContextList/ContextList/ContextList.tsx  | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/context/ContextList/ContextActionsCell.tsx b/frontend/src/component/context/ContextList/ContextActionsCell.tsx
index 3aee67a8a1..ef43714558 100644
--- a/frontend/src/component/context/ContextList/ContextActionsCell.tsx
+++ b/frontend/src/component/context/ContextList/ContextActionsCell.tsx
@@ -12,11 +12,13 @@ import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
 interface IContextActionsCellProps {
     name: string;
     onDelete: () => void;
+    allowDelete: boolean;
 }
 
 export const ContextActionsCell: VFC<IContextActionsCellProps> = ({
     name,
     onDelete,
+    allowDelete,
 }) => {
     const navigate = useNavigate();
 
@@ -37,6 +39,7 @@ export const ContextActionsCell: VFC<IContextActionsCellProps> = ({
                 permission={DELETE_CONTEXT_FIELD}
                 onClick={onDelete}
                 data-loading
+                disabled={!allowDelete}
                 aria-label='delete'
                 tooltipProps={{
                     title: 'Delete context field',
diff --git a/frontend/src/component/context/ContextList/ContextList/ContextList.tsx b/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
index e35224fa84..997e019bcd 100644
--- a/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList/ContextList.tsx
@@ -97,7 +97,7 @@ const ContextList: VFC = () => {
                 align: 'center',
                 Cell: ({
                     row: {
-                        original: { name },
+                        original: { name, usedInFeatures },
                     },
                 }: any) => (
                     <ContextActionsCell
@@ -106,6 +106,7 @@ const ContextList: VFC = () => {
                             setName(name);
                             setShowDelDialogue(true);
                         }}
+                        allowDelete={usedInFeatures === 0}
                     />
                 ),
                 width: 150,