From 522952fa596d1d8b337b32237816cf2b579de758 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 24 Feb 2023 16:22:49 +0530
Subject: [PATCH] chore: cannot have empty state group

---
 apps/app/components/states/single-state.tsx | 31 +++++++++++++--------
 apps/app/components/ui/tooltip.tsx          |  2 +-
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/states/single-state.tsx b/apps/app/components/states/single-state.tsx
index cb0a7d06d..941449536 100644
--- a/apps/app/components/states/single-state.tsx
+++ b/apps/app/components/states/single-state.tsx
@@ -181,20 +181,29 @@ export const SingleState: React.FC<Props> = ({
           </button>
         )}
 
-        <button
-          type="button"
-          className={`${state.default ? "cursor-not-allowed" : ""} grid place-items-center`}
-          onClick={handleDeleteState}
-          disabled={state.default}
-        >
-          <Tooltip tooltipContent="Cannot delete the default state." disabled={!state.default}>
-            <TrashIcon className="h-4 w-4 text-red-400" />
-          </Tooltip>
-        </button>
-
         <button type="button" className="grid place-items-center" onClick={handleEditState}>
           <PencilSquareIcon className="h-4 w-4 text-gray-400" />
         </button>
+        <button
+          type="button"
+          className={`${
+            state.default || groupLength === 1 ? "cursor-not-allowed" : ""
+          } grid place-items-center`}
+          onClick={handleDeleteState}
+          disabled={state.default || groupLength === 1}
+        >
+          {state.default ? (
+            <Tooltip tooltipContent="Cannot delete the default state.">
+              <TrashIcon className="h-4 w-4 text-red-400" />
+            </Tooltip>
+          ) : groupLength === 1 ? (
+            <Tooltip tooltipContent="Cannot have an empty group.">
+              <TrashIcon className="h-4 w-4 text-red-400" />
+            </Tooltip>
+          ) : (
+            <TrashIcon className="h-4 w-4 text-red-400" />
+          )}
+        </button>
       </div>
     </div>
   );
diff --git a/apps/app/components/ui/tooltip.tsx b/apps/app/components/ui/tooltip.tsx
index 1b7f40fea..6651702f5 100644
--- a/apps/app/components/ui/tooltip.tsx
+++ b/apps/app/components/ui/tooltip.tsx
@@ -38,7 +38,7 @@ export const Tooltip: React.FC<Props> = ({
     disabled={disabled}
     content={
       <div
-        className={`flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left ${className}`}
+        className={`flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md text-left ${className}`}
       >
         {tooltipHeading ? (
           <>