From 0617accecdcb11159ba15c34885f294bc206aa89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= <info@mateoguzman.net>
Date: Wed, 9 Apr 2025 06:36:36 -0700
Subject: [PATCH] RNTester: Fix playground icon & test details button (#50530)

Summary:
Some minor fixes in the RNTester that were bugging me a bit:

- Playground tab icon is not displaying the correct icon when the tab is active.
- The RNTTestDetails button is being displayed when there is nothing to display.
- Export the data for the Playground tab correctly to display the description.

## Changelog:

[INTERNAL] - RNTester: Fix playground icon & test details button

Pull Request resolved: https://github.com/facebook/react-native/pull/50530

Test Plan:
<details>
<summary>Screenshots</summary>

| Before                           | After                          |
|------------------------------------|------------------------------------|
| ![Screenshot_1744044385](https://github.com/user-attachments/assets/d4a08423-531b-49a8-b3c5-314e0bd55b4c) | ![Screenshot_1744044377](https://github.com/user-attachments/assets/c36cde64-d48d-4f80-95db-2e4f9765b350) |

</details>

Reviewed By: NickGerleman

Differential Revision: D72576804

Pulled By: cortinico

fbshipit-source-id: 8555677a5121fe908c18d349e80ce8097d144fe5
---
 .../rn-tester/js/components/RNTTestDetails.js | 49 ++++++++++---------
 .../rn-tester/js/components/RNTesterTheme.js  |  4 +-
 .../examples/Playground/RNTesterPlayground.js |  1 +
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/rn-tester/js/components/RNTTestDetails.js b/packages/rn-tester/js/components/RNTTestDetails.js
index 8cf46bce804..7c3af618c63 100644
--- a/packages/rn-tester/js/components/RNTTestDetails.js
+++ b/packages/rn-tester/js/components/RNTTestDetails.js
@@ -25,30 +25,31 @@ function RNTTestDetails({
 }): React.Node {
   const [collapsed, setCollapsed] = React.useState(true);
 
-  const content = (
-    <>
-      {description == null ? null : (
-        <View style={styles.section}>
-          <Text style={[styles.heading, {color: theme.LabelColor}]}>
-            Description
-          </Text>
-          <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
-            {description}
-          </Text>
-        </View>
-      )}
-      {expect == null ? null : (
-        <View style={styles.section}>
-          <Text style={[styles.heading, {color: theme.LabelColor}]}>
-            Expectation
-          </Text>
-          <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
-            {expect}
-          </Text>
-        </View>
-      )}
-    </>
-  );
+  const content =
+    description == null && expect == null ? null : (
+      <>
+        {description == null ? null : (
+          <View style={styles.section}>
+            <Text style={[styles.heading, {color: theme.LabelColor}]}>
+              Description
+            </Text>
+            <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
+              {description}
+            </Text>
+          </View>
+        )}
+        {expect == null ? null : (
+          <View style={styles.section}>
+            <Text style={[styles.heading, {color: theme.LabelColor}]}>
+              Expectation
+            </Text>
+            <Text style={[styles.paragraph, {color: theme.LabelColor}]}>
+              {expect}
+            </Text>
+          </View>
+        )}
+      </>
+    );
   return (
     <View
       style={StyleSheet.compose(styles.container, {
diff --git a/packages/rn-tester/js/components/RNTesterTheme.js b/packages/rn-tester/js/components/RNTesterTheme.js
index 1421157e0ea..9c2a77ca894 100644
--- a/packages/rn-tester/js/components/RNTesterTheme.js
+++ b/packages/rn-tester/js/components/RNTesterTheme.js
@@ -133,8 +133,8 @@ export const RNTesterDarkTheme = {
   NavBarComponentsInactiveIcon: require('./../assets/bottom-nav-components-icon-dark.png'),
   NavBarAPIsActiveIcon: require('./../assets/bottom-nav-apis-icon-light.png'),
   NavBarAPIsInactiveIcon: require('./../assets/bottom-nav-apis-icon-dark.png'),
-  NavBarPlaygroundActiveIcon: require('./../assets/bottom-nav-playgrounds-icon-dark.png'),
-  NavBarPlaygroundInactiveIcon: require('./../assets/bottom-nav-playgrounds-icon-light.png'),
+  NavBarPlaygroundActiveIcon: require('./../assets/bottom-nav-playgrounds-icon-light.png'),
+  NavBarPlaygroundInactiveIcon: require('./../assets/bottom-nav-playgrounds-icon-dark.png'),
 };
 
 export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme};
diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
index eda3c308ca9..9dbacb99701 100644
--- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
@@ -34,5 +34,6 @@ const styles = StyleSheet.create({
 export default ({
   title: 'Playground',
   name: 'playground',
+  description: 'Test out new features and ideas.',
   render: (): React.Node => <Playground />,
 }: RNTesterModuleExample);