From 8bb0a9f9c9cafc4b0f67f111917e0f26e2fde46c Mon Sep 17 00:00:00 2001
From: Vincent Riemer <vincentriemer@fb.com>
Date: Fri, 8 Jul 2022 13:33:04 -0700
Subject: [PATCH] Create more mobile-friendly version of the platform test
 results UI

Summary:
Changelog: [RNTester][Internal] - Create more mobile-friendly version of the platform test results UI

The original UI design for displaying the test results was done with only really tablets in mind so in order to better accomidate mobile screen sizes this diff adds a new expanding UI for the test results.

Reviewed By: lunaleaps

Differential Revision: D37701638

fbshipit-source-id: a1789abb15db7ab162fe90afc32d23c435f1bdb5
---
 .../PlatformTest/RNTesterPlatformTest.js      |  30 ++--
 ...RNTesterPlatformTestMinimizedResultView.js |  96 ++++++++++
 .../RNTesterPlatformTestResultView.js         | 167 ++++++++++++------
 3 files changed, 230 insertions(+), 63 deletions(-)
 create mode 100644 packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js

diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js
index 0e90e06987b1b1..92389f36b81288 100644
--- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js
+++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTest.js
@@ -37,14 +37,18 @@ export default function RNTesterPlatformTest(props: Props): React.MixedElement {
 
   return (
     <View style={styles.root}>
-      <Text style={[styles.textBlock, styles.title]}>{title}</Text>
-      <Text style={[styles.textBlock, styles.description]}>{description}</Text>
-      <RNTesterPlatformTestInstructions
-        instructions={instructions}
-        style={[styles.instructions, styles.block]}
-      />
-      <View style={[styles.testContainer, styles.block]}>
-        <UnderTestComponent key={testKey} harness={harness} />
+      <View style={styles.testcaseContainer}>
+        <Text style={[styles.textBlock, styles.title]}>{title}</Text>
+        <Text style={[styles.textBlock, styles.description]}>
+          {description}
+        </Text>
+        <RNTesterPlatformTestInstructions
+          instructions={instructions}
+          style={[styles.instructions, styles.block]}
+        />
+        <View style={[styles.testContainer, styles.block]}>
+          <UnderTestComponent key={testKey} harness={harness} />
+        </View>
       </View>
       <RNTesterPlatformTestResultView
         numPending={numPending}
@@ -73,13 +77,17 @@ const styles = StyleSheet.create({
     flexShrink: 0,
   },
   results: {
-    flex: 1,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    right: 0,
   },
   root: {
-    padding: 8,
-    paddingBottom: 0,
     flex: 1,
   },
+  testcaseContainer: {
+    padding: 8,
+  },
   testContainer: {
     flexGrow: 0,
     flexShrink: 0,
diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js
new file mode 100644
index 00000000000000..275ede2a710588
--- /dev/null
+++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+import * as React from 'react';
+import {View, Text, StyleSheet, TouchableHighlight} from 'react-native';
+
+type Props = $ReadOnly<{|
+  numFail: number,
+  numError: number,
+  numPass: number,
+  numPending: number,
+  onPress?: () => void,
+  style?: ?ViewStyleProp,
+|}>;
+export default function RNTesterPlatformTestMinimizedResultView({
+  numFail,
+  numError,
+  numPass,
+  numPending,
+  onPress,
+  style,
+}: Props): React.MixedElement {
+  return (
+    <TouchableHighlight onPress={onPress} style={[styles.root, style]}>
+      <View style={styles.innerContainer}>
+        <View style={styles.statsContainer}>
+          <Text style={styles.summaryText}>
+            {numPass} <Text style={styles.passText}>Pass</Text>
+          </Text>
+          <Text style={styles.summaryText}>
+            {numFail} <Text style={styles.failText}>Fail</Text>
+          </Text>
+          <Text style={styles.summaryText}>
+            {numError} <Text style={styles.errorText}>Error</Text>
+          </Text>
+          <Text style={styles.summaryText}>
+            {numPending} <Text style={styles.pendingText}>Pending</Text>
+          </Text>
+        </View>
+        <Text style={styles.caret}>⌃</Text>
+      </View>
+    </TouchableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  caret: {
+    fontSize: 24,
+    transform: [{translateY: 4}],
+    marginEnd: 8,
+    opacity: 0.5,
+  },
+  errorText: {
+    color: 'orange',
+  },
+  failText: {
+    color: 'red',
+  },
+  innerContainer: {
+    width: '100%',
+    height: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 8,
+    backgroundColor: 'white',
+  },
+  passText: {
+    color: 'green',
+  },
+  pendingText: {
+    color: 'gray',
+  },
+  root: {
+    borderTopColor: 'rgb(171, 171, 171)',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    minHeight: 60,
+  },
+  statsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  summaryText: {
+    marginStart: 8,
+  },
+});
diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
index 590d49d40caf33..fbe4696c7bb0c9 100644
--- a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
+++ b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
@@ -18,6 +18,8 @@ import type {
   PlatformTestResultStatus,
 } from './RNTesterPlatformTestTypes';
 
+import RNTesterPlatformTestMinimizedResultView from './RNTesterPlatformTestMinimizedResultView';
+
 import * as React from 'react';
 import {useMemo, useState, useCallback} from 'react';
 import {
@@ -31,6 +33,7 @@ import {
   TextInput,
   KeyboardAvoidingView,
   Platform,
+  TouchableOpacity,
 } from 'react-native';
 
 const DISPLAY_STATUS_MAPPING: {[PlatformTestResultStatus]: string} = {
@@ -202,62 +205,96 @@ export default function RNTesterPlatformTestResultView(
     [filteredResults],
   );
 
+  const [resultsExpanded, setResultsExpanded] = useState(false);
+
   const handleReset = useCallback(() => {
     setFilterText('');
     reset();
+    setResultsExpanded(false);
   }, [reset]);
 
+  const handleMinimizedPress = useCallback(() => {
+    setResultsExpanded(true);
+  }, []);
+
+  const handleMaximizedPress = useCallback(() => {
+    setResultsExpanded(false);
+  }, []);
+
   return (
-    <View style={style}>
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>
-          Results
-          {filterText !== '' ? (
-            <>
-              {' '}
-              <Text style={styles.filteredText}>
-                (Filtered: '{filterText}')
+    <>
+      <RNTesterPlatformTestMinimizedResultView
+        numFail={numFail}
+        numError={numError}
+        numPass={numPass}
+        numPending={numPending}
+        onPress={handleMinimizedPress}
+        style={style}
+      />
+      <Modal
+        animationType="slide"
+        onRequestClose={handleMaximizedPress}
+        visible={resultsExpanded}>
+        <SafeAreaView
+          style={{
+            width: '100%',
+            height: '100%',
+            flexDirection: 'column',
+          }}>
+          <View style={styles.resultsHeader}>
+            <View style={styles.titleContainer}>
+              <Text style={styles.title}>Results</Text>
+              {filterText !== '' ? (
+                <Text style={styles.filteredText}>
+                  (Filtered: '{filterText}')
+                </Text>
+              ) : null}
+              <Text style={styles.summaryContainer}>
+                <Text>
+                  {numPass} <Text style={styles.passText}>Pass</Text>
+                </Text>
+                {'  '}
+                <Text>
+                  {numFail} <Text style={styles.failText}>Fail</Text>
+                </Text>
+                {'  '}
+                <Text>
+                  {numError} <Text style={styles.errorText}>Error</Text>
+                </Text>
+                {numPending > 0 ? (
+                  <>
+                    {' '}
+                    <Text>
+                      {numPending}{' '}
+                      <Text style={styles.pendingText}>Pending</Text>
+                    </Text>
+                  </>
+                ) : null}
               </Text>
-            </>
-          ) : null}
-        </Text>
-        <View style={styles.actionsContainer}>
-          <FilterModalButton
-            filterText={filterText}
-            setFilterText={setFilterText}
-          />
-          <View style={styles.buttonSpacer} />
-          <Button title="Reset" onPress={handleReset} />
-        </View>
-      </View>
-
-      <Text style={styles.summaryContainer}>
-        <Text>
-          {numPass} <Text style={styles.passText}>Pass</Text>
-        </Text>
-        {'  '}
-        <Text>
-          {numFail} <Text style={styles.failText}>Fail</Text>
-        </Text>
-        {'  '}
-        <Text>
-          {numError} <Text style={styles.errorText}>Error</Text>
-        </Text>
-        {numPending > 0 ? (
-          <>
-            {' '}
-            <Text>
-              {numPending} <Text style={styles.pendingText}>Pending</Text>
-            </Text>
-          </>
-        ) : null}
-      </Text>
+            </View>
+            <View style={styles.actionsContainer}>
+              <FilterModalButton
+                filterText={filterText}
+                setFilterText={setFilterText}
+              />
+              <View style={styles.buttonSpacer} />
+              <Button title="Reset" onPress={handleReset} />
+            </View>
+            <TouchableOpacity
+              hitSlop={{bottom: 10, left: 10, right: 10, top: 10}}
+              onPress={handleMaximizedPress}
+              style={styles.closeButton}>
+              <Text style={styles.closeButtonIcon}>✕</Text>
+            </TouchableOpacity>
+          </View>
 
-      <View style={styles.table}>
-        <TableHeader />
-        <FlatList data={filteredResults} renderItem={renderTableRow} />
-      </View>
-    </View>
+          <View style={styles.table}>
+            <TableHeader />
+            <FlatList data={filteredResults} renderItem={renderTableRow} />
+          </View>
+        </SafeAreaView>
+      </Modal>
+    </>
   );
 }
 
@@ -268,6 +305,22 @@ const styles = StyleSheet.create({
   buttonSpacer: {
     width: 8,
   },
+  closeButton: {
+    position: 'absolute',
+    top: 0,
+    right: 16,
+    backgroundColor: 'lightgray',
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonIcon: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    opacity: 0.5,
+  },
   errorText: {
     color: 'orange',
   },
@@ -276,6 +329,7 @@ const styles = StyleSheet.create({
   },
   filteredText: {
     fontSize: 18,
+    lineHeight: 18,
     fontWeight: 'normal',
     opacity: 0.5,
   },
@@ -337,6 +391,14 @@ const styles = StyleSheet.create({
   pendingText: {
     color: 'gray',
   },
+  resultsHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    flex: 0,
+  },
   table: {
     flex: 1,
   },
@@ -349,6 +411,7 @@ const styles = StyleSheet.create({
   },
   tableMessageColumn: {
     flex: 2.5,
+    paddingLeft: 8,
     justifyContent: 'center',
   },
   tableRow: {
@@ -358,6 +421,8 @@ const styles = StyleSheet.create({
   },
   tableResultColumn: {
     flex: 0.5,
+    minWidth: 40,
+    paddingLeft: 8,
     justifyContent: 'center',
   },
   tableTestNameColumn: {
@@ -366,16 +431,14 @@ const styles = StyleSheet.create({
   },
   summaryContainer: {
     flexDirection: 'row',
+    paddingBottom: 8,
   },
   title: {
     fontSize: 32,
     fontWeight: '700',
-    marginBottom: 8,
   },
   titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between',
+    flexDirection: 'column',
   },
 });