LogBox - Dismiss errors and warnings independently

Summary:
This diff makes the warning and error notifications independently dismissible

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18218937

fbshipit-source-id: 198b18d7f177fcb59506a4adfed5b1ce0a331aba

Libraries/LogBox/Data/LogBoxData.js

@@ -32,7 +32,7 @@ export type Subscription = $ReadOnly<{|
 
 const observers: Set<{observer: Observer}> = new Set();
 const ignorePatterns: Set<IgnorePattern> = new Set();
-const logs: LogBoxLogs = new Set();
+let logs: LogBoxLogs = new Set();
 let updateTimeout = null;
 let _isDisabled = false;
 
@@ -156,6 +156,16 @@ export function clear(): void {
   }
 }
 
+export function clearWarnings(): void {
+  logs = new Set(Array.from(logs).filter(log => log.level !== 'warn'));
+  handleUpdate();
+}
+
+export function clearErrors(): void {
+  logs = new Set(Array.from(logs).filter(log => log.level !== 'error'));
+  handleUpdate();
+}
+
 export function dismiss(log: LogBoxLog): void {
   if (logs.has(log)) {
     logs.delete(log);

Libraries/LogBox/Data/__tests__/LogBoxData-test.js

@@ -86,8 +86,8 @@ describe('LogBoxData', () => {
   });
 
   it('clears all logs', () => {
-    addLogs(['A', 'B', 'C']);
-    addExceptions(['D']);
+    addLogs(['A', 'B']);
+    addExceptions(['C', 'D']);
     jest.runAllImmediates();
 
     expect(registry().length).toBe(4);
@@ -96,6 +96,40 @@ describe('LogBoxData', () => {
     expect(registry().length).toBe(0);
   });
 
+  it('clears only warnings', () => {
+    addLogs(['A', 'B']);
+    addExceptions(['C', 'D', 'E']);
+    jest.runAllImmediates();
+
+    expect(registry().length).toBe(5);
+
+    LogBoxData.clearWarnings();
+    expect(registry().length).toBe(3);
+  });
+
+  it('clears only errors', () => {
+    addLogs(['A', 'B']);
+    addExceptions(['C', 'D', 'E']);
+    jest.runAllImmediates();
+
+    expect(registry().length).toBe(5);
+
+    LogBoxData.clearErrors();
+    expect(registry().length).toBe(2);
+  });
+
+  it('clears both errors and warnings', () => {
+    addLogs(['A', 'B']);
+    addExceptions(['C', 'D', 'E']);
+    jest.runAllImmediates();
+
+    expect(registry().length).toBe(5);
+
+    LogBoxData.clearErrors();
+    LogBoxData.clearWarnings();
+    expect(registry().length).toBe(0);
+  });
+
   it('keeps logs in chronological order', () => {
     addLogs(['A']);
     addExceptions(['B']);

Libraries/LogBox/LogBox.js

@@ -103,7 +103,8 @@ if (__DEV__) {
       return this.state.logs == null ? null : (
         <LogBoxContainer
           onDismiss={this._handleDismiss}
-          onDismissAll={this._handleDismissAll}
+          onDismissWarns={LogBoxData.clearWarnings}
+          onDismissErrors={LogBoxData.clearErrors}
           logs={this.state.logs}
         />
       );
@@ -121,10 +122,6 @@ if (__DEV__) {
       }
     }
 
-    _handleDismissAll(): void {
-      LogBoxData.clear();
-    }
-
     _handleDismiss(log: LogBoxLog): void {
       LogBoxData.dismiss(log);
     }

Libraries/LogBox/UI/LogBoxContainer.js

@@ -21,7 +21,8 @@ import type {LogBoxLogs} from '../Data/LogBoxData';
 
 type Props = $ReadOnly<{|
   onDismiss: (log: LogBoxLog) => void,
-  onDismissAll: () => void,
+  onDismissWarns: () => void,
+  onDismissErrors: () => void,
   logs: LogBoxLogs,
 |}>;
 
@@ -30,10 +31,6 @@ function LogBoxContainer(props: Props): React.Node {
 
   const logs = Array.from(props.logs);
 
-  function handleInspectorDismissAll() {
-    props.onDismissAll();
-  }
-
   function handleInspectorDismiss() {
     // Here we handle the cases when the log is dismissed and it
     // was either the last log, or when the current index
@@ -92,7 +89,7 @@ function LogBoxContainer(props: Props): React.Node {
             onPressList={() => {
               /* TODO: open log list */
             }}
-            onPressDismiss={handleInspectorDismissAll}
+            onPressDismiss={props.onDismissWarns}
           />
         </View>
       )}
@@ -106,7 +103,7 @@ function LogBoxContainer(props: Props): React.Node {
             onPressList={() => {
               /* TODO: open log list */
             }}
-            onPressDismiss={handleInspectorDismissAll}
+            onPressDismiss={props.onDismissErrors}
           />
         </View>
       )}

Libraries/LogBox/UI/__tests__/LogBoxContainer-test.js

@@ -21,7 +21,8 @@ describe('LogBoxContainer', () => {
     const output = render.shallowRender(
       <LogBoxContainer
         onDismiss={() => {}}
-        onDismissAll={() => {}}
+        onDismissWarns={() => {}}
+        onDismissErrors={() => {}}
         logs={new Set()}
       />,
     );
@@ -33,7 +34,8 @@ describe('LogBoxContainer', () => {
     const output = render.shallowRender(
       <LogBoxContainer
         onDismiss={() => {}}
-        onDismissAll={() => {}}
+        onDismissWarns={() => {}}
+        onDismissErrors={() => {}}
         logs={
           new Set([
             new LogBoxLog(
@@ -68,7 +70,8 @@ describe('LogBoxContainer', () => {
     const output = render.shallowRender(
       <LogBoxContainer
         onDismiss={() => {}}
-        onDismissAll={() => {}}
+        onDismissWarns={() => {}}
+        onDismissErrors={() => {}}
         logs={
           new Set([
             new LogBoxLog(
@@ -103,7 +106,8 @@ describe('LogBoxContainer', () => {
     const output = render.shallowRender(
       <LogBoxContainer
         onDismiss={() => {}}
-        onDismissAll={() => {}}
+        onDismissWarns={() => {}}
+        onDismissErrors={() => {}}
         logs={
           new Set([
             new LogBoxLog(