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
facebook · Jul 8, 2022 · 8bb0a9f · 8bb0a9f
1 parent fba485a
commit 8bb0a9f
Show file tree

Hide file tree

Showing 3 changed files with 230 additions and 63 deletions.
diff --git 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/...n-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js b/...n-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
@@ -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',
   },
 });