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)
Unleash · Nov 24, 2023 · aa8347e · aa8347e
1 parent ffe37ac
commit aa8347e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git 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
@@ -349,7 +349,7 @@ export const ArchiveTable = ({
                         <ArchiveBatchActions
                             selectedIds={Object.keys(selectedRowIds)}
                             projectId={projectId!}
-                            onReviveConfirm={() => toggleAllRowsSelected(false)}
+                            onConfirm={() => toggleAllRowsSelected(false)}
                         />
                     </BatchSelectionActionsBar>
                 }

diff --git a/...e/ArchivedFeatureActionCell/ArchivedFeatureDeleteConfirm/ArchivedFeatureDeleteConfirm.tsx b/...e/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>