LogBox - Fix for buttons forcing refresh on fatals

rickhanlonii · facebook-github-bot · commit 5a943ec235c6 · 2019-11-01T21:42:42.000-07:00
Summary:
Fixes an issue in LogBox that allowed users to try to dismiss warnings/errors when there was a fatal or syntax error up.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D18285678

fbshipit-source-id: 9d137fab63405c28b2bfa94a35c11c2f63b6d085
diff --git a/Libraries/LogBox/UI/LogBoxContainer.js b/Libraries/LogBox/UI/LogBoxContainer.js
@@ -76,7 +76,7 @@ function LogBoxContainer(props: Props): React.Node {
           onMinimize={handleInspectorMinimize}
           onChangeSelectedIndex={setSelectedLog}
           logs={logs}
-          hasFatal={true}
+          fatalType={logs[fatalIndex].level}
           selectedIndex={fatalIndex}
         />
       </View>
@@ -91,7 +91,7 @@ function LogBoxContainer(props: Props): React.Node {
           onMinimize={handleInspectorMinimize}
           onChangeSelectedIndex={setSelectedLog}
           logs={logs}
-          hasFatal={fatalIndex != null}
+          fatalType={fatalIndex != null ? logs[fatalIndex].level : null}
           selectedIndex={selectedLogIndex}
         />
       </View>
diff --git a/Libraries/LogBox/UI/LogBoxInspector.js b/Libraries/LogBox/UI/LogBoxInspector.js
@@ -25,15 +25,15 @@ import LogBoxInspectorMeta from './LogBoxInspectorMeta';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
 import * as LogBoxStyle from './LogBoxStyle';
 
-import type LogBoxLog from '../Data/LogBoxLog';
+import type LogBoxLog, {LogLevel} from '../Data/LogBoxLog';
 
 type Props = $ReadOnly<{|
   onDismiss: () => void,
   onChangeSelectedIndex: (index: number) => void,
   onMinimize: () => void,
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedIndex: number,
-  hasFatal: boolean,
+  fatalType?: ?LogLevel,
 |}>;
 
 function LogBoxInspector(props: Props): React.Node {
@@ -79,7 +79,7 @@ function LogBoxInspector(props: Props): React.Node {
       <LogBoxInspectorFooter
         onDismiss={props.onDismiss}
         onMinimize={props.onMinimize}
-        level={log.level}
+        fatalType={props.fatalType}
       />
     </View>
   );
diff --git a/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/Libraries/LogBox/UI/LogBoxInspectorFooter.js
@@ -23,11 +23,11 @@ import * as LogBoxStyle from './LogBoxStyle';
 type Props = $ReadOnly<{|
   onDismiss: () => void,
   onMinimize: () => void,
-  level: LogLevel,
+  fatalType?: ?LogLevel,
 |}>;
 
 function LogBoxInspectorFooter(props: Props): React.Node {
-  if (props.level === 'fatal' || props.level === 'syntax') {
+  if (props.fatalType === 'fatal' || props.fatalType === 'syntax') {
     return (
       <View style={styles.root}>
         <LogBoxButton
@@ -42,8 +42,8 @@ function LogBoxInspectorFooter(props: Props): React.Node {
           <View style={[fatalStyles.content]}>
             <Text style={fatalStyles.label}>Reload</Text>
             <Text style={fatalStyles.subtextLabel}>
-              {{fatal: 'Fatal', syntax: 'Syntax'}[props.level]} errors require a
-              full reload
+              {{fatal: 'Fatal', syntax: 'Syntax'}[props.fatalType]} errors
+              require a full reload
             </Text>
           </View>
           <SafeAreaView />
diff --git a/Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js b/Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js
@@ -58,7 +58,6 @@ describe('LogBoxContainer', () => {
         onChangeSelectedIndex={() => {}}
         logs={[]}
         selectedIndex={0}
-        hasFatal={false}
       />,
     );
 
@@ -73,7 +72,6 @@ describe('LogBoxContainer', () => {
         onChangeSelectedIndex={() => {}}
         logs={logs}
         selectedIndex={0}
-        hasFatal={false}
       />,
     );
 
@@ -88,7 +86,7 @@ describe('LogBoxContainer', () => {
         onChangeSelectedIndex={() => {}}
         logs={logs}
         selectedIndex={2}
-        hasFatal={true}
+        fatalType="fatal"
       />,
     );
 
diff --git a/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js b/Libraries/LogBox/UI/__tests__/LogBoxInspectorFooter-test.js
@@ -16,12 +16,20 @@ const LogBoxInspectorFooter = require('../LogBoxInspectorFooter').default;
 const render = require('../../../../jest/renderer');
 
 describe('LogBoxInspectorFooter', () => {
-  it('should render two buttons', () => {
+  it('should render two buttons for warning with no fatal', () => {
+    const output = render.shallowRender(
+      <LogBoxInspectorFooter onMinimize={() => {}} onDismiss={() => {}} />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('should render fatal for warning with a fatal', () => {
     const output = render.shallowRender(
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
-        level="warn"
+        fatalType="syntax"
       />,
     );
 
@@ -33,7 +41,7 @@ describe('LogBoxInspectorFooter', () => {
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
-        level="fatal"
+        fatalType="fatal"
       />,
     );
 
@@ -45,7 +53,7 @@ describe('LogBoxInspectorFooter', () => {
       <LogBoxInspectorFooter
         onMinimize={() => {}}
         onDismiss={() => {}}
-        level="syntax"
+        fatalType="syntax"
       />,
     );
 
diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxContainer-test.js.snap
@@ -106,7 +106,7 @@ exports[`LogBoxContainer should render fatal before warn and error 1`] = `
   }
 >
   <LogBoxInspector
-    hasFatal={true}
+    fatalType="fatal"
     logs={
       Array [
         LogBoxLog {
@@ -183,7 +183,7 @@ exports[`LogBoxContainer should render most recent fatal 1`] = `
   }
 >
   <LogBoxInspector
-    hasFatal={true}
+    fatalType="fatal"
     logs={
       Array [
         LogBoxLog {
@@ -243,7 +243,7 @@ exports[`LogBoxContainer should render most recent syntax error 1`] = `
   }
 >
   <LogBoxInspector
-    hasFatal={true}
+    fatalType="syntax"
     logs={
       Array [
         LogBoxLog {
diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspector-test.js.snap
@@ -39,7 +39,7 @@ exports[`LogBoxContainer should render fatal with selectedIndex 2 1`] = `
     onRetry={[Function]}
   />
   <LogBoxInspectorFooter
-    level="fatal"
+    fatalType="fatal"
     onDismiss={[Function]}
     onMinimize={[Function]}
   />
@@ -87,7 +87,6 @@ exports[`LogBoxContainer should render warning with selectedIndex 0 1`] = `
     onRetry={[Function]}
   />
   <LogBoxInspectorFooter
-    level="warn"
     onDismiss={[Function]}
     onMinimize={[Function]}
   />
diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap
@@ -148,7 +148,81 @@ exports[`LogBoxInspectorFooter should render fatal button for syntax erorr 1`] =
 </View>
 `;
 
-exports[`LogBoxInspectorFooter should render two buttons 1`] = `
+exports[`LogBoxInspectorFooter should render fatal for warning with a fatal 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "rgba(51, 51, 51, 1)",
+      "elevation": 1,
+      "flexDirection": "row",
+      "shadowColor": "#000",
+      "shadowOffset": Object {
+        "height": -2,
+        "width": 0,
+      },
+      "shadowOpacity": 0.5,
+      "shadowRadius": 2,
+    }
+  }
+>
+  <LogBoxButton
+    backgroundColor={
+      Object {
+        "default": "rgba(243, 83, 105, 1)",
+        "pressed": "rgba(208, 75, 95, 1)",
+      }
+    }
+    onPress={[Function]}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "height": 60,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "rgba(255, 255, 255, 1)",
+            "fontSize": 14,
+            "fontWeight": "600",
+            "includeFontPadding": false,
+            "lineHeight": 20,
+          }
+        }
+      >
+        Reload
+      </Text>
+      <Text
+        style={
+          Object {
+            "color": "rgba(255, 255, 255, 0.8)",
+            "fontSize": 11,
+            "includeFontPadding": false,
+            "lineHeight": 12,
+          }
+        }
+      >
+        Syntax
+         errors require a full reload
+      </Text>
+    </View>
+    <ForwardRef(SafeAreaView) />
+  </LogBoxButton>
+</View>
+`;
+
+exports[`LogBoxInspectorFooter should render two buttons for warning with no fatal 1`] = `
 <View
   style={
     Object {

Original file line number	Diff line number	Diff line change
@@ -106,7 +106,7 @@ exports[`LogBoxContainer should render fatal before warn and error 1`] = `
`106`	`106`	`}`
`107`	`107`	`>`
`108`	`108`	`<LogBoxInspector`
`109`		`- hasFatal={true}`
	`109`	`+ fatalType="fatal"`
`110`	`110`	`logs={`
`111`	`111`	`Array [`
`112`	`112`	`LogBoxLog {`
@@ -183,7 +183,7 @@ exports[`LogBoxContainer should render most recent fatal 1`] = `
`183`	`183`	`}`
`184`	`184`	`>`
`185`	`185`	`<LogBoxInspector`
`186`		`- hasFatal={true}`
	`186`	`+ fatalType="fatal"`
`187`	`187`	`logs={`
`188`	`188`	`Array [`
`189`	`189`	`LogBoxLog {`
@@ -243,7 +243,7 @@ exports[`LogBoxContainer should render most recent syntax error 1`] = `
`243`	`243`	`}`
`244`	`244`	`>`
`245`	`245`	`<LogBoxInspector`
`246`		`- hasFatal={true}`
	`246`	`+ fatalType="syntax"`
`247`	`247`	`logs={`
`248`	`248`	`Array [`
`249`	`249`	`LogBoxLog {`