From 8cfa379503d8df6cdae6a76c829c3483a09dd858 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@fb.com>
Date: Mon, 28 Oct 2019 10:08:54 -0700
Subject: [PATCH] LogBox - Update header to cycle around to begining

Summary:
This diff updates the header pagination logic so that it circles around to the beginning/end when reaching either end of the log list in the LogBox inspector.

It also changes the header message for a single log from "Logs" to "Log 1 of 1"

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18091621

fbshipit-source-id: 4d7e5e2cb0eb1a1ed09ca8ad318e6715d674648f
---
 Libraries/LogBox/UI/LogBoxInspectorHeader.js  |  15 +--
 .../__tests__/LogBoxInspectorHeader-test.js   |  30 +----
 .../LogBoxInspectorHeader-test.js.snap        | 124 +-----------------
 3 files changed, 16 insertions(+), 153 deletions(-)

diff --git a/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/Libraries/LogBox/UI/LogBoxInspectorHeader.js
index 66f1c05a2fb8ae..9d5ecc49774590 100644
--- a/Libraries/LogBox/UI/LogBoxInspectorHeader.js
+++ b/Libraries/LogBox/UI/LogBoxInspectorHeader.js
@@ -29,19 +29,18 @@ type Props = $ReadOnly<{|
 |}>;
 
 function LogBoxInspectorHeader(props: Props): React.Node {
-  const prevIndex = props.selectedIndex - 1;
-  const nextIndex = props.selectedIndex + 1;
+  const prevIndex =
+    props.selectedIndex - 1 < 0 ? props.total - 1 : props.selectedIndex - 1;
+  const nextIndex =
+    props.selectedIndex + 1 > props.total - 1 ? 0 : props.selectedIndex + 1;
 
-  const titleText =
-    props.total === 1
-      ? 'Log'
-      : `Log ${props.selectedIndex + 1} of ${props.total}`;
+  const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
     <SafeAreaView style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
-          disabled={prevIndex < 0}
+          disabled={props.total <= 1}
           level={props.level}
           image={LogBoxImageSource.chevronLeft}
           onPress={() => props.onSelectIndex(prevIndex)}
@@ -50,7 +49,7 @@ function LogBoxInspectorHeader(props: Props): React.Node {
           <Text style={styles.titleText}>{titleText}</Text>
         </View>
         <LogBoxInspectorHeaderButton
-          disabled={nextIndex >= props.total}
+          disabled={props.total <= 1}
           level={props.level}
           image={LogBoxImageSource.chevronRight}
           onPress={() => props.onSelectIndex(nextIndex)}
diff --git a/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js b/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js
index 5c113f4ea06618..b919f08e48b21d 100644
--- a/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js
+++ b/Libraries/LogBox/UI/__tests__/LogBoxInspectorHeader-test.js
@@ -29,7 +29,7 @@ describe('LogBoxInspectorHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render one left button for two total, right selected', () => {
+  it('should render both buttons for two total', () => {
     const output = render.shallowRender(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
@@ -42,7 +42,7 @@ describe('LogBoxInspectorHeader', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render two buttons for three total, middle selected (warning)', () => {
+  it('should render two buttons for three or more total', () => {
     const output = render.shallowRender(
       <LogBoxInspectorHeader
         onSelectIndex={() => {}}
@@ -54,30 +54,4 @@ describe('LogBoxInspectorHeader', () => {
 
     expect(output).toMatchSnapshot();
   });
-
-  it('should render two buttons for three total, middle selected (error)', () => {
-    const output = render.shallowRender(
-      <LogBoxInspectorHeader
-        onSelectIndex={() => {}}
-        selectedIndex={0}
-        total={1}
-        level="error"
-      />,
-    );
-
-    expect(output).toMatchSnapshot();
-  });
-
-  it('should render one right button for two total, left selected', () => {
-    const output = render.shallowRender(
-      <LogBoxInspectorHeader
-        onSelectIndex={() => {}}
-        selectedIndex={0}
-        total={2}
-        level="warn"
-      />,
-    );
-
-    expect(output).toMatchSnapshot();
-  });
 });
diff --git a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap
index 6dc7cd8287d05a..f18fcfdfddd2ee 100644
--- a/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap
+++ b/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap
@@ -1,61 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
-<ForwardRef(SafeAreaView)
-  style={
-    Object {
-      "backgroundColor": "rgba(250, 186, 48, 1)",
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-        "height": 44,
-      }
-    }
-  >
-    <LogBoxInspectorHeaderButton
-      disabled={true}
-      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
-      level="warn"
-      onPress={[Function]}
-    />
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "rgba(255, 255, 255, 1)",
-            "fontSize": 16,
-            "fontWeight": "600",
-            "includeFontPadding": false,
-            "lineHeight": 20,
-          }
-        }
-      >
-        Log
-      </Text>
-    </View>
-    <LogBoxInspectorHeaderButton
-      disabled={true}
-      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
-      level="warn"
-      onPress={[Function]}
-    />
-  </View>
-</ForwardRef(SafeAreaView)>
-`;
-
-exports[`LogBoxInspectorHeader should render one left button for two total, right selected 1`] = `
+exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
 <ForwardRef(SafeAreaView)
   style={
     Object {
@@ -101,7 +46,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
       </Text>
     </View>
     <LogBoxInspectorHeaderButton
-      disabled={true}
+      disabled={false}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
       level="warn"
       onPress={[Function]}
@@ -110,7 +55,7 @@ exports[`LogBoxInspectorHeader should render one left button for two total, righ
 </ForwardRef(SafeAreaView)>
 `;
 
-exports[`LogBoxInspectorHeader should render one right button for two total, left selected 1`] = `
+exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
 <ForwardRef(SafeAreaView)
   style={
     Object {
@@ -152,75 +97,20 @@ exports[`LogBoxInspectorHeader should render one right button for two total, lef
           }
         }
       >
-        Log 1 of 2
-      </Text>
-    </View>
-    <LogBoxInspectorHeaderButton
-      disabled={false}
-      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
-      level="warn"
-      onPress={[Function]}
-    />
-  </View>
-</ForwardRef(SafeAreaView)>
-`;
-
-exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (error) 1`] = `
-<ForwardRef(SafeAreaView)
-  style={
-    Object {
-      "backgroundColor": "rgba(243, 83, 105, 1)",
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "flexDirection": "row",
-        "height": 44,
-      }
-    }
-  >
-    <LogBoxInspectorHeaderButton
-      disabled={true}
-      image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAaUlEQVRYhe3WsQ2AMAwAwRcs5LEYg3HpYANoQKKgcEEUI/6adM5LbgySfmZsNDeACdiApdEfaQGswH6+Xd1jugc9xYQxxhjz9RhaxwxvDuul3MrAqDyjsozKKnWgXUqdsJcAZgqsTFJ5B7gjUNw0n0HHAAAAAElFTkSuQmCC"
-      level="error"
-      onPress={[Function]}
-    />
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "flex": 1,
-          "justifyContent": "center",
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "rgba(255, 255, 255, 1)",
-            "fontSize": 16,
-            "fontWeight": "600",
-            "includeFontPadding": false,
-            "lineHeight": 20,
-          }
-        }
-      >
-        Log
+        Log 1 of 1
       </Text>
     </View>
     <LogBoxInspectorHeaderButton
       disabled={true}
       image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAZElEQVRYhe3WsQmAQAxA0Y8ulLEcw3HtdANtBNvzCJjD/5pUgQ9pApJ+Zu7YCWABDmDLzemzA+c94+MW4AkqExUY1caoVka1GibqlSm7qJJSJzPGGGMylYqBgi9sACtFYiQN7wKC6VDcJ7tlpQAAAABJRU5ErkJggg=="
-      level="error"
+      level="warn"
       onPress={[Function]}
     />
   </View>
 </ForwardRef(SafeAreaView)>
 `;
 
-exports[`LogBoxInspectorHeader should render two buttons for three total, middle selected (warning) 1`] = `
+exports[`LogBoxInspectorHeader should render two buttons for three or more total 1`] = `
 <ForwardRef(SafeAreaView)
   style={
     Object {
@@ -262,7 +152,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three total, middle
           }
         }
       >
-        Log
+        Log 1 of 1
       </Text>
     </View>
     <LogBoxInspectorHeaderButton