From aa8347eb7a2a64287d99919b91daee8b412eb798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 24 Nov 2023 09:35:13 +0000
Subject: [PATCH] fix: delete archived feature toggles in the UI (#5411)

This PR addresses 2 tasks that aim to fix and improve the UI/UX on
archived feature toggle deletion:

-
https://linear.app/unleash/issue/UNL-260/delete-feature-toggle-dialog-update-word-toggles-to-singular-toggle
-
https://linear.app/unleash/issue/UNL-282/deleting-multiple-toggles-in-the-project-archive-the-batch-selector

Essentially:

- Makes it clearer that we're deleting a single feature toggle by
changing the text to singular toggle
- Improves clarity further by adding a list of feature toggles about to
be deleted
- Fixes a bug where the batch selector would not be cleared after
deleting multiple feature toggles

## Deleting one feature toggle (singular)

![image](https://github.com/Unleash/unleash/assets/14320932/c956f459-ef18-4153-97f7-ffdd6b11613c)

## Deleting multiple feature toggles (plural)

![image](https://github.com/Unleash/unleash/assets/14320932/14f875a4-7f56-4db9-81db-cd06526e5bd5)
---
 .../ArchiveTable/ArchiveBatchActions.tsx      |  7 +++---
 .../archive/ArchiveTable/ArchiveTable.tsx     |  2 +-
 .../ArchivedFeatureDeleteConfirm.tsx          | 23 ++++++++++++++-----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx
index 1352306c4d..6d7f99de6e 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx
@@ -17,13 +17,13 @@ import { ArchivedFeatureReviveConfirm } from './ArchivedFeatureActionCell/Archiv
 interface IArchiveBatchActionsProps {
     selectedIds: string[];
     projectId: string;
-    onReviveConfirm?: () => void;
+    onConfirm?: () => void;
 }
 
 export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
     selectedIds,
     projectId,
-    onReviveConfirm,
+    onConfirm,
 }) => {
     const { refetchArchived } = useFeaturesArchive(projectId);
     const [deleteModalOpen, setDeleteModalOpen] = useState(false);
@@ -73,6 +73,7 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
                 setOpen={setDeleteModalOpen}
                 refetch={() => {
                     refetchArchived();
+                    onConfirm?.();
                     trackEvent('batch_operations', {
                         props: {
                             eventType: 'features deleted',
@@ -87,7 +88,7 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
                 setOpen={setReviveModalOpen}
                 refetch={() => {
                     refetchArchived();
-                    onReviveConfirm?.();
+                    onConfirm?.();
                     trackEvent('batch_operations', {
                         props: {
                             eventType: 'features revived',
diff --git a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
index fa05953b52..df8d4d696f 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx
@@ -349,7 +349,7 @@ export const ArchiveTable = ({
                         <ArchiveBatchActions
                             selectedIds={Object.keys(selectedRowIds)}
                             projectId={projectId!}
-                            onReviveConfirm={() => toggleAllRowsSelected(false)}
+                            onConfirm={() => toggleAllRowsSelected(false)}
                         />
                     </BatchSelectionActionsBar>
                 }
diff --git a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
index da31864edf..7955a5bdc1 100644
--- a/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
+++ b/frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx
@@ -36,6 +36,9 @@ export const ArchivedFeatureDeleteConfirm = ({
     const { setToastData, setToastApiError } = useToast();
     const { deleteFeatures } = useProjectApi();
 
+    const singularOrPluralToggles =
+        deletedFeatures.length > 1 ? 'toggles' : 'toggle';
+
     const onDeleteFeatureToggle = async () => {
         try {
             if (deletedFeatures.length === 0) {
@@ -46,8 +49,8 @@ export const ArchivedFeatureDeleteConfirm = ({
             await refetch();
             setToastData({
                 type: 'success',
-                title: 'Feature toggles deleted',
-                text: `You have successfully deleted following features toggles: ${deletedFeatures.join(
+                title: `Feature ${singularOrPluralToggles} deleted`,
+                text: `You have successfully deleted the following feature ${singularOrPluralToggles}: ${deletedFeatures.join(
                     ', ',
                 )}.`,
             });
@@ -67,9 +70,9 @@ export const ArchivedFeatureDeleteConfirm = ({
 
     return (
         <Dialogue
-            title='Delete feature toggles?'
+            title={`Delete feature ${singularOrPluralToggles}?`}
             open={open}
-            primaryButtonText='Delete feature toggles'
+            primaryButtonText={`Delete feature ${singularOrPluralToggles}`}
             secondaryButtonText='Cancel'
             onClick={onDeleteFeatureToggle}
             onClose={clearModal}
@@ -84,8 +87,16 @@ export const ArchivedFeatureDeleteConfirm = ({
             </Alert>
 
             <StyledDeleteParagraph>
-                In order to delete feature toggles, please enter the following
-                confirmation text in the text field below:{' '}
+                You are about to delete the following feature{' '}
+                {singularOrPluralToggles}:{' '}
+                <strong>{deletedFeatures.join(', ')}</strong>.
+            </StyledDeleteParagraph>
+
+            <StyledDeleteParagraph
+                sx={(theme) => ({ marginTop: theme.spacing(2) })}
+            >
+                In order to delete the feature {singularOrPluralToggles}, please
+                enter the following confirmation text in the text field below:{' '}
                 <strong>I want to delete</strong>
             </StyledDeleteParagraph>