Bulk Edit: Add 'clear selection' button + fix search bar focus [MAPS-94] [MAPS-99] (#10267)

* Bulk edit: Do not disable search bar after search

* Bulk edit: Add clear selection button

* Add comment about forcing the re-render of the entry table

Author: joaquincasal

apps/bulk-edit/src/locations/Page/index.tsx

@@ -79,6 +79,8 @@ const Page = () => {
   const [currentContentType, setCurrentContentType] = useState<ContentTypeProps | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [initialTotal, setInitialTotal] = useState(0);
+  // Used to force a re-render of the table when the selection changes
+  const [tableKey, setTableKey] = useState(0);
 
   const hasActiveFilters = () => {
     const hasSearchQuery = searchQuery.trim() !== '';
@@ -94,8 +96,12 @@ const Page = () => {
     setActivePage(0);
   };
 
-  const shouldDisableFilters = () => {
-    return (entries.length === 0 && initialTotal === 0) || !selectedContentType || entriesLoading;
+  const shouldDisableFilters = (disableIfLoading: boolean = true) => {
+    return (
+      (entries.length === 0 && initialTotal === 0) ||
+      !selectedContentType ||
+      (disableIfLoading ? entriesLoading : false)
+    );
   };
 
   const getAllContentTypes = async (): Promise<ContentTypeProps[]> => {
@@ -226,6 +232,13 @@ const Page = () => {
     setInitialTotal(0);
   };
 
+  // Used to clear the selection states and force a re-render of the table
+  const clearSelectionState = () => {
+    setSelectedField(null);
+    setSelectedEntryIds([]);
+    setTableKey((tableKey) => tableKey + 1);
+  };
+
   // Fetch content type and fields when selectedContentTypeId changes
   useEffect(() => {
     const fetchContentTypeAndFields = async (): Promise<void> => {
@@ -521,6 +534,7 @@ const Page = () => {
                 setActivePage(0);
                 setSearchQuery('');
                 setInitialTotal(0);
+                clearSelectionState();
               }}
               disabled={entriesLoading}
             />
@@ -538,8 +552,9 @@ const Page = () => {
                   onSearchChange={(query) => {
                     setSearchQuery(query);
                     setActivePage(0);
+                    clearSelectionState();
                   }}
-                  isDisabled={shouldDisableFilters()}
+                  isDisabled={shouldDisableFilters(false)}
                   debounceDelay={300}
                 />
 
@@ -560,6 +575,7 @@ const Page = () => {
                     setSelectedItems={(statuses) => {
                       setSelectedStatuses(statuses);
                       setActivePage(0);
+                      clearSelectionState();
                     }}
                     disabled={shouldDisableFilters()}
                     placeholderConfig={{
@@ -579,7 +595,6 @@ const Page = () => {
                         return aIndex - bIndex;
                       });
                       setSelectedColumns(sortedSelectedColumns);
-                      setActivePage(0);
                     }}
                     disabled={shouldDisableFilters()}
                     placeholderConfig={{
@@ -600,18 +615,26 @@ const Page = () => {
                   )}
                 </Flex>
                 {!entriesLoading && (
-                  <Flex alignItems="center" gap="spacingS" style={styles.editButton}>
-                    <Button
-                      variant="primary"
-                      onClick={() => setIsModalOpen(true)}
-                      isDisabled={!selectedField || selectedEntryIds.length === 0}>
-                      {selectedEntryIds.length > 1 ? 'Bulk edit' : 'Edit'}
-                    </Button>
+                  <>
+                    <Flex alignItems="center" gap="spacingS" style={styles.editButton}>
+                      <Button
+                        variant="primary"
+                        onClick={() => setIsModalOpen(true)}
+                        isDisabled={!selectedField || selectedEntryIds.length === 0}>
+                        {selectedEntryIds.length > 1 ? 'Bulk edit' : 'Edit'}
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        onClick={() => clearSelectionState()}
+                        isDisabled={!selectedField || selectedEntryIds.length === 0}>
+                        Clear selection
+                      </Button>
+                    </Flex>
                     <Text fontColor="gray600">
                       {selectedEntryIds.length || 'No'} entry field
                       {selectedEntryIds.length === 1 ? '' : 's'} selected
                     </Text>
-                  </Flex>
+                  </>
                 )}
                 {entriesLoading ? (
                   <Table style={styles.loadingTableBorder}>
@@ -637,6 +660,7 @@ const Page = () => {
                           />
                         )}
                         <EntryTable
+                          key={tableKey}
                           entries={entries}
                           fields={selectedColumns.flatMap(
                             (field) => fields.find((f) => f.uniqueId === field.value) || []