[menu-bar][cli] Fix Pre-flight checklist UI when a check fails (#33)

* [menu-cli] Fix Pre-flight checklist UI when a check fails * Add changelog entry
expo · Aug 10, 2023 · 1f5a064 · 1f5a064
1 parent 7a05246
commit 1f5a064
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - Fixed listing devices when Android SDK path or `xcrun` is not configured correctly. ([#26](https://github.com/expo/orbit/pull/26) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Fixed menu bar popover height after putting Mac to sleep. ([#28](https://github.com/expo/orbit/pull/28) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Prevent multiple "Launch" clicks, add label when booting. ([#29](https://github.com/expo/orbit/pull/29) by [@Simek](https://github.com/Simek))
+- Fixed Pre-flight checklist UI when a check fails. ([#33](https://github.com/expo/orbit/pull/33) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 💡 Others
 

diff --git a/apps/menu-bar/src/components/CommandCheckItem.tsx b/apps/menu-bar/src/components/CommandCheckItem.tsx
@@ -1,8 +1,10 @@
 import {
   ActivityIndicator,
+  Alert,
   Image,
   ImageSourcePropType,
   StyleSheet,
+  TouchableOpacity,
 } from 'react-native';
 import {spacing} from '@expo/styleguide-native';
 
@@ -26,6 +28,8 @@ const CommandCheckItem = ({
   reason,
   success,
 }: Props) => {
+  const showWarningAlert = () => Alert.alert('Something went wrong', reason);
+
   return (
     <View
       align="centered"
@@ -41,14 +45,22 @@ const CommandCheckItem = ({
         <Text size="tiny" color="secondary">
           {description}
         </Text>
-        {reason ? <Text>{reason}</Text> : null}
+        {reason ? (
+          <TouchableOpacity onPress={showWarningAlert}>
+            <Text size="tiny" color="warning" numberOfLines={2}>
+              {reason}
+            </Text>
+          </TouchableOpacity>
+        ) : null}
       </View>
       {success === undefined ? (
         <ActivityIndicator />
       ) : success ? (
         <CheckIcon />
       ) : (
-        <AlertIcon />
+        <TouchableOpacity onPress={showWarningAlert}>
+          <AlertIcon />
+        </TouchableOpacity>
       )}
     </View>
   );

diff --git a/apps/menu-bar/src/windows/Onboarding.tsx b/apps/menu-bar/src/windows/Onboarding.tsx
@@ -1,7 +1,6 @@
-import {Image, StyleSheet} from 'react-native';
+import {Image, ScrollView, StyleSheet} from 'react-native';
 import {useEffect, useState} from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import {lightTheme} from '@expo/styleguide-native';
 
 import {WindowsNavigator} from './index';
 import CommandCheckItem from '../components/CommandCheckItem';
@@ -22,6 +21,8 @@ type PlatformToolsCheck = {
   ios?: {success: boolean; reason?: string};
 };
 
+const WINDOW_TITLE_HEIGHT = 28;
+
 const Onboarding = () => {
   const theme = useExpoTheme();
   const [platformToolsCheck, setPlatformToolsCheck] =
@@ -42,39 +43,47 @@ const Onboarding = () => {
 
   return (
     <View flex="1" bg="default">
-      <View style={styles.header} pt="2.5">
-        <Image source={Background} style={styles.background} />
-        <Logo />
-        <View mt="medium" mb="2">
-          <ExpoOrbitText />
-        </View>
-        <Text size="small" style={styles.subtitle}>
-          Download and launch builds.
-        </Text>
-      </View>
-      <View
-        padding="large"
-        style={[styles.container, {borderBottomColor: theme.border.default}]}>
-        <View>
-          <Text weight="bold">Pre-flight checklist</Text>
-          <Text size="small" color="secondary">
-            Configure developer tools to get the most out of Orbit.
+      <Image source={Background} style={styles.background} />
+      <ScrollView
+        style={{marginTop: -WINDOW_TITLE_HEIGHT}}
+        alwaysBounceVertical={false}>
+        <View style={styles.header}>
+          <Logo />
+          <View mt="medium" mb="2">
+            <ExpoOrbitText />
+          </View>
+          <Text size="small" style={styles.subtitle}>
+            Download and launch builds.
           </Text>
         </View>
-        <CommandCheckItem
-          title="Android Studio"
-          description="Install Android Studio to manage devices and install apps on Android"
-          icon={AndroidStudio}
-          {...platformToolsCheck?.android}
-        />
-        <CommandCheckItem
-          title="Xcode"
-          description="Install Xcode to manage devices and install apps on iOS"
-          icon={Xcode}
-          {...platformToolsCheck?.ios}
-        />
-      </View>
-      <View px="large" py="medium">
+        <View bg="default">
+          <View px="large" py="large" style={styles.container}>
+            <View>
+              <Text weight="bold">Pre-flight checklist</Text>
+              <Text size="small" color="secondary">
+                Configure developer tools to get the most out of Orbit.
+              </Text>
+            </View>
+            <CommandCheckItem
+              title="Android Studio"
+              description="Install Android Studio to manage devices and install apps on Android"
+              icon={AndroidStudio}
+              {...platformToolsCheck?.android}
+            />
+            <CommandCheckItem
+              title="Xcode"
+              description="Install Xcode to manage devices and install apps on iOS"
+              icon={Xcode}
+              {...platformToolsCheck?.ios}
+            />
+          </View>
+        </View>
+      </ScrollView>
+      <View
+        px="large"
+        py="medium"
+        bg="default"
+        style={[styles.footer, {borderTopColor: theme.border.default}]}>
         <Button title="Get Started" onPress={closeOnboarding} />
       </View>
     </View>
@@ -88,22 +97,24 @@ const styles = StyleSheet.create({
     position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
-    height: 250,
+    height: 230,
     overflow: 'hidden',
-    backgroundColor: 'black',
   },
   container: {
     flex: 1,
-    borderBottomWidth: 1,
-    borderBottomColor: lightTheme.border.default,
     gap: 14,
+    overflow: 'hidden',
   },
   subtitle: {
     color: '#E1EDFF',
   },
   background: {
     position: 'absolute',
+    backgroundColor: 'black',
     top: 0,
     left: 0,
   },
+  footer: {
+    borderTopWidth: 1,
+  },
 });