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

\n+ \n+ {enabledCount > 0 && (\n+ {enabledCount}<\/span>\n+ )}\n+ <\/div>\n <\/Toggle>\n );\n }\n","body":"","parents":["ef596be1ef06effddee62d0481a25bca12456839"],"files":[{"path":"src\/devtools\/views\/Components\/ToggleCommitFilterModalButton.css","status":"A"},{"path":"src\/devtools\/views\/Components\/ToggleComponentFiltersModalButton.js","status":"M"}],"commit":{"subject":"Added badge for enabled filter count","authorName":"Brian Vaughn","revision":"4e04907d13e8617dd38ce2f4f6c3c1ff031fed17","shortRevision":"4e04907d13","authorEmail":"bvaughn@fb.com","authoredAt":"2019-05-02T10:53:40-07:00"}}

dillon1000/react

Files changed