feat:-Added a delete all filters action and added title to the add fi…

…lter a… (facebook#27332)

### changes

1. A small action added to delete all filters, it can be useful to
delete when someone has a bunch of them rather than clicking on them
selectively.

2.There was no title on the `add filter` button so added the same


https://github.com/facebook/react/assets/72331432/af6c0725-05b6-4f46-b8c9-8079bd933a8e



review @hoxyq

---------

Co-authored-by: BIKI DAS <[email protected]>
Co-authored-by: Ruslan Lesiutin <[email protected]>

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

@@ -218,6 +218,10 @@ export default function ComponentsSettings(_: {}): React.Node {
     });
   }, []);
 
+  const removeAllFilter = () => {
+    setComponentFilters([]);
+  };
+
   const toggleFilterIsEnabled = useCallback(
     (componentFilter: ComponentFilter, isEnabled: boolean) => {
       setComponentFilters(prevComponentFilters => {
@@ -434,11 +438,16 @@ export default function ComponentsSettings(_: {}): React.Node {
           ))}
         </tbody>
       </table>
-
-      <Button onClick={addFilter}>
+      <Button onClick={addFilter} title="Add filter">
         <ButtonIcon className={styles.ButtonIcon} type="add" />
         Add filter
       </Button>
+      {componentFilters.length > 0 && (
+        <Button onClick={removeAllFilter} title="Delete all filters">
+          <ButtonIcon className={styles.ButtonIcon} type="delete" />
+          Delete all filters
+        </Button>
+      )}
     </div>
   );
 }