fix: reset selected toggle after archive or revive (#4606)

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes
When archiving or reviving feature toggles, when toggles disappear from
table, actions bar should also disappear.

<!-- Does it close an issue? Multiple? -->
Closes
https://linear.app/unleash/issue/1-1293/bulk-revive-modal-doesnt-go-away

frontend/package.json

@@ -54,7 +54,7 @@
     "@types/react-dom": "17.0.20",
     "@types/react-linkify": "1.0.1",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-table": "7.7.14",
+    "@types/react-table": "7.7.15",
     "@types/react-test-renderer": "17.0.2",
     "@types/react-timeago": "4.1.3",
     "@types/semver": "7.5.0",

frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx

@@ -16,11 +16,13 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 interface IArchiveBatchActionsProps {
     selectedIds: string[];
     projectId: string;
+    onReviveConfirm?: () => void;
 }
 
 export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
     selectedIds,
     projectId,
+    onReviveConfirm,
 }) => {
     const { reviveFeatures } = useProjectApi();
     const { setToastData, setToastApiError } = useToast();
@@ -31,6 +33,7 @@ export const ArchiveBatchActions: FC<IArchiveBatchActionsProps> = ({
     const onRevive = async () => {
         try {
             await reviveFeatures(projectId, selectedIds);
+            onReviveConfirm?.();
             await refetchArchived();
             setToastData({
                 type: 'success',

frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx

@@ -243,6 +243,8 @@ export const ArchiveTable = ({
         state: { sortBy, selectedRowIds },
         prepareRow,
         setHiddenColumns,
+        toggleAllRowsSelected,
+        toggleRowSelected,
     } = useTable(
         {
             columns: columns as any[], // TODO: fix after `react-table` v8 update
@@ -360,6 +362,7 @@ export const ArchiveTable = ({
                         <ArchiveBatchActions
                             selectedIds={Object.keys(selectedRowIds)}
                             projectId={projectId!}
+                            onReviveConfirm={() => toggleAllRowsSelected(false)}
                         />
                     </BatchSelectionActionsBar>
                 }

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -462,6 +462,7 @@ export const ProjectFeatureToggles = ({
         state: { selectedRowIds, sortBy, hiddenColumns },
         prepareRow,
         setHiddenColumns,
+        toggleAllRowsSelected,
     } = useTable(
         {
             columns: columns as any[], // TODO: fix after `react-table` v8 update
@@ -705,6 +706,7 @@ export const ProjectFeatureToggles = ({
                     selectedIds={Object.keys(selectedRowIds)}
                     data={features}
                     projectId={projectId}
+                    onResetSelection={() => toggleAllRowsSelected(false)}
                 />
             </BatchSelectionActionsBar>
         </>

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ArchiveButton.tsx

@@ -12,6 +12,7 @@ interface IArchiveButtonProps {
     projectId: string;
     featureIds: string[];
     features: FeatureSchema[];
+    onConfirm?: () => void;
 }
 
 const DEFAULT_USAGE_THRESHOLD_DAYS = 7;
@@ -29,6 +30,7 @@ export const ArchiveButton: VFC<IArchiveButtonProps> = ({
     projectId,
     featureIds,
     features,
+    onConfirm,
 }) => {
     const { refetch } = useProject(projectId);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -41,8 +43,9 @@ export const ArchiveButton: VFC<IArchiveButtonProps> = ({
         });
     }, [JSON.stringify(features), featureIds]);
 
-    const onConfirm = async () => {
+    const onArchive = async () => {
         setIsDialogOpen(false);
+        onConfirm?.();
         await refetch();
         trackEvent('batch_operations', {
             props: {
@@ -69,7 +72,7 @@ export const ArchiveButton: VFC<IArchiveButtonProps> = ({
                 projectId={projectId}
                 featureIds={featureIds}
                 featuresWithUsage={featuresWithUsage}
-                onConfirm={onConfirm}
+                onConfirm={onArchive}
                 isOpen={isDialogOpen}
                 onClose={() => setIsDialogOpen(false)}
             />

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeaturesBatchActions/ProjectFeaturesBatchActions.tsx

@@ -15,11 +15,12 @@ interface IProjectFeaturesBatchActionsProps {
     selectedIds: string[];
     data: FeatureSchema[];
     projectId: string;
+    onResetSelection: () => void;
 }
 
 export const ProjectFeaturesBatchActions: FC<
     IProjectFeaturesBatchActionsProps
-> = ({ selectedIds, data, projectId }) => {
+> = ({ selectedIds, data, projectId, onResetSelection }) => {
     const { uiConfig } = useUiConfig();
     const [showExportDialog, setShowExportDialog] = useState(false);
     const [showBulkEnableDialog, setShowBulkEnableDialog] = useState(false);
@@ -92,6 +93,7 @@ export const ProjectFeaturesBatchActions: FC<
                 projectId={projectId}
                 featureIds={selectedIds}
                 features={data}
+                onConfirm={onResetSelection}
             />
             <Button
                 variant="outlined"

frontend/yarn.lock

@@ -3016,10 +3016,10 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/[email protected].14":
-  version "7.7.14"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.14.tgz#b880f1ae140ed065bca2e21b3008ca1ebe71595a"
-  integrity sha512-TYrv7onCiakaG1uAu/UpQ9FojNEt/4/ht87EgJQaEGFoWV606ZLWUZAcUHzMxgc3v1mywP1cDyz3qB4ho3hWOw==
+"@types/[email protected].15":
+  version "7.7.15"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.15.tgz#e9a093a5f2be4fff5ccb41f1aec9516b520ed9b3"
+  integrity sha512-tlXKCeq4gk2xT2lB+Hbp/dO5yYZ899HwQOAp/3o3hKw8wp7ngNpdB90BNWE6kWCm5K2KzmEsHnYoJheSS5SVjg==
   dependencies:
     "@types/react" "*"