From 4e04907d13e8617dd38ce2f4f6c3c1ff031fed17 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 2 May 2019 10:53:40 -0700
Subject: [PATCH] Added badge for enabled filter count

---
 .../ToggleCommitFilterModalButton.css         |  8 ++++
 .../ToggleComponentFiltersModalButton.js      | 41 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/devtools/views/Components/ToggleCommitFilterModalButton.css

diff --git a/src/devtools/views/Components/ToggleCommitFilterModalButton.css b/src/devtools/views/Components/ToggleCommitFilterModalButton.css
new file mode 100644
index 0000000000..b53991b1e0
--- /dev/null
+++ b/src/devtools/views/Components/ToggleCommitFilterModalButton.css
@@ -0,0 +1,8 @@
+.Wrapper {
+  display: flex;
+}
+
+.Label {
+  font-size: var(--font-size-sans-small);
+  font-family: var(--font-family-sans);
+}
diff --git a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
index 6268492030..e3031b4e60 100644
--- a/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+++ b/src/devtools/views/Components/ToggleComponentFiltersModalButton.js
@@ -8,6 +8,10 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import Store from 'src/devtools/store';
 
+import styles from './ToggleCommitFilterModalButton.css';
+
+import type { ComponentFilter } from 'src/types';
+
 export default function ToggleCommitFilterModalButton() {
   const store = useContext(StoreContext);
 
@@ -29,14 +33,47 @@ export default function ToggleCommitFilterModalButton() {
   );
   const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
 
+  const componentFiltersSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.componentFilters,
+      subscribe: (callback: Function) => {
+        store.addListener('componentFilters', callback);
+        return () => store.removeListener('componentFilters', callback);
+      },
+    }),
+    [store]
+  );
+  const componentFilters = useSubscription<Array<ComponentFilter>, Store>(
+    componentFiltersSubscription
+  );
+
+  const enabledCount = useMemo(
+    () =>
+      componentFilters.reduce(
+        (count, componentFilter) =>
+          componentFilter.isEnabled ? count + 1 : count,
+        0
+      ),
+    [componentFilters]
+  );
+
   return (
     <Toggle
       isChecked={isModalShowing}
       isDisabled={isProfiling}
       onChange={setIsModalShowing}
-      title="Filter preferences"
+      title={
+        enabledCount > 0
+          ? `Filter preferences (${enabledCount} enabled)`
+          : 'Filter preferences'
+      }
     >
-      <ButtonIcon type="filter" />
+      <div className={styles.Wrapper}>
+        <ButtonIcon type="filter" />
+        {enabledCount > 0 && (
+          <span className={styles.Label}>{enabledCount}</span>
+        )}
+      </div>
     </Toggle>
   );
 }