[menu-bar] Fix undismissable Alerts (#112)

* [menu-bar] Fix undismissable Alerts

* Add changelog entry

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 - Fix installing EAS builds from cold start. ([#108](https://github.com/expo/orbit/pull/108) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 - Fix onboarding command check loading status. ([#110](https://github.com/expo/orbit/pull/110) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Fix undismissable Alerts. ([#112](https://github.com/expo/orbit/pull/112) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 💡 Others
 

apps/menu-bar/src/components/CommandCheckItem.tsx

@@ -3,7 +3,6 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { CliCommands } from 'common-types';
 import {
   ActivityIndicator,
-  Alert,
   AlertButton,
   Image,
   ImageSourcePropType,
@@ -15,6 +14,7 @@ import { Text } from './Text';
 import { View } from './View';
 import AlertIcon from '../assets/icons/AlertTriangle';
 import CheckIcon from '../assets/icons/check-circle.svg';
+import Alert from '../modules/Alert';
 
 type Props = {
   title: string;

apps/menu-bar/src/modules/Alert.ts

@@ -0,0 +1,25 @@
+import { Alert as RNAlert, AlertOptions, AlertButton } from 'react-native';
+
+type MacOSAlertOptions = AlertOptions & {
+  modal?: boolean;
+  critical?: boolean;
+};
+
+/**
+ * A wrapper around RNAlert to override the
+ * default alert and set modal true, that way
+ * users can dismiss it even without an active window
+ **/
+const Alert = {
+  ...RNAlert,
+  alert(
+    title: string,
+    message?: string,
+    buttons?: AlertButton[],
+    options: MacOSAlertOptions = {}
+  ): void {
+    RNAlert.alert(title, message, buttons, { modal: true, ...options });
+  },
+};
+
+export default Alert;

apps/menu-bar/src/popover/Core.tsx

@@ -2,7 +2,7 @@ import { InternalError } from 'common-types';
 import { MultipleAppsInTarballErrorDetails } from 'common-types/build/InternalError';
 import { Device } from 'common-types/build/devices';
 import React, { memo, useCallback, useState } from 'react';
-import { Alert, SectionList } from 'react-native';
+import { SectionList } from 'react-native';
 
 import BuildsSection, { BUILDS_SECTION_HEIGHT } from './BuildsSection';
 import DeviceListSectionHeader from './DeviceListSectionHeader';
@@ -21,6 +21,7 @@ import { useDeviceAudioPreferences } from '../hooks/useDeviceAudioPreferences';
 import { useGetPinnedApps } from '../hooks/useGetPinnedApps';
 import { usePopoverFocusEffect } from '../hooks/usePopoverFocus';
 import { useSafeDisplayDimensions } from '../hooks/useSafeDisplayDimensions';
+import Alert from '../modules/Alert';
 import { useFileHandler } from '../modules/FileHandlerModule';
 import MenuBarModule from '../modules/MenuBarModule';
 import {

apps/menu-bar/src/popover/DeviceListSectionHeader.tsx

@@ -1,8 +1,9 @@
-import { Alert, PlatformColor, TouchableOpacity } from 'react-native';
+import { PlatformColor, TouchableOpacity } from 'react-native';
 
 import SectionHeader from './SectionHeader';
 import AlertIcon from '../assets/icons/AlertTriangle';
 import { View } from '../components/View';
+import Alert from '../modules/Alert';
 import { useCurrentTheme } from '../utils/useExpoTheme';
 
 type Props = {

apps/menu-bar/src/windows/Settings.tsx

@@ -1,6 +1,6 @@
 import { darkTheme, lightTheme } from '@expo/styleguide-native';
 import React, { Fragment, useEffect, useState } from 'react';
-import { Alert, StyleSheet, TouchableOpacity, Switch } from 'react-native';
+import { StyleSheet, TouchableOpacity, Switch } from 'react-native';
 
 import { WindowsNavigator } from './index';
 import { withApolloProvider } from '../api/ApolloClient';
@@ -11,6 +11,7 @@ import Button, { getStylesForColor } from '../components/Button';
 import PathInput from '../components/PathInput';
 import SystemIconView from '../components/SystemIconView';
 import { useGetCurrentUserQuery } from '../generated/graphql';
+import Alert from '../modules/Alert';
 import MenuBarModule from '../modules/MenuBarModule';
 import SparkleModule from '../modules/SparkleModule';
 import {