Make sure important errors are always shown to the user

Summary:
This diff makes sure that important errors are always shown to the user, such as an xcode version mismatch.

Also made some small styling improvements

Reviewed By: jknoxville

Differential Revision: D19660337

fbshipit-source-id: 24dfb4d98bfdd1666164403f87b6a4e1dc915ddb

src/chrome/ErrorBar.tsx

@@ -37,10 +37,13 @@ const ErrorBar = memo(function ErrorBar(props: Props) {
     0,
   );
 
+  const urgentErrors = props.errors.filter(e => e.urgent);
+
   return (
     <ErrorBarContainer>
-      <ErrorRows className={collapsed ? 'collapsed' : ''}>
+      <ErrorRows
-        {props.errors.map((error, index) => (
+        className={collapsed && urgentErrors.length === 0 ? 'collapsed' : ''}>
+        {(collapsed ? urgentErrors : props.errors).map((error, index) => (
           <ErrorTile
             onDismiss={() => props.dismissError(index)}
             key={index}
@@ -81,16 +84,18 @@ function ErrorTile({
 }) {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <ErrorRow>
+    <ErrorRow className={`${error.urgent ? 'urgent' : ''}`}>
       <FlexRow style={{flexDirection: 'row-reverse'}}>
         <ButtonSection>
           <ButtonGroup>
             {(error.details || error.error) && (
-              <Button onClick={() => setCollapsed(s => !s)}>
+              <Button
-                {collapsed ? `▼ ` : '▲ '} Details
+                onClick={() => setCollapsed(s => !s)}
-              </Button>
+                icon={collapsed ? `chevron-down` : 'chevron-up'}
+                iconSize={12}
+              />
             )}
-            <Button onClick={onDismiss}>Dismiss</Button>
+            <Button onClick={onDismiss} icon="cross-circle" iconSize={12} />
           </ButtonGroup>
         </ButtonSection>
         {error.occurrences! > 1 && (
@@ -149,22 +154,28 @@ const ErrorDetails = styled.div({
 });
 
 const ErrorRows = styled.div({
-  backgroundColor: colors.cherry,
   color: '#fff',
   maxHeight: '600px',
   overflowY: 'auto',
   overflowX: 'hidden',
   transition: 'max-height 0.3s ease',
+  borderBottom: '1px solid #b3b3b3',
   '&.collapsed': {
     maxHeight: '0px',
+    borderBottom: 'none',
   },
 });
 
 const ErrorRow = styled.div({
   padding: '4px 12px',
-  borderBottom: '1px solid ' + colors.cherryDark3,
   verticalAlign: 'middle',
   lineHeight: '28px',
+  backgroundColor: colors.yellowTint,
+  color: colors.yellow,
+  '&.urgent': {
+    backgroundColor: colors.redTint,
+    color: colors.red,
+  },
 });
 
 const ButtonSection = styled(FlexColumn)({
@@ -174,15 +185,16 @@ const ButtonSection = styled(FlexColumn)({
 });
 
 const ErrorCounter = styled(FlexColumn)({
-  backgroundColor: colors.cherryDark3,
+  border: `1px solid ${colors.light20}`,
-  color: colors.cherry,
+  color: colors.light20,
-  width: 24,
+  width: 20,
-  height: 24,
+  height: 20,
-  borderRadius: 24,
+  borderRadius: 20,
-  marginTop: 2,
+  marginTop: 4,
-  lineHeight: '24px',
+  lineHeight: '18px',
   textAlign: 'center',
   flexShrink: 0,
   flexGrow: 0,
   marginLeft: '8px',
+  fontSize: '10px',
 });

src/dispatcher/iOSDevice.tsx

@@ -191,6 +191,7 @@ async function checkXcodeVersionMismatch(store: Store) {
             message: errorMessage,
             details:
               "You might want to run 'sudo xcode-select -s /Applications/Xcode.app/Contents/Developer'",
+            urgent: true,
           },
         });
         // Fire a console.error as well, so that it gets reported to the backend.

src/dispatcher/server.tsx

@@ -46,10 +46,12 @@ export default (store: Store, logger: Logger) => {
       err.code === 'EADDRINUSE'
         ? "Couldn't start websocket server. Looks like you have multiple copies of Flipper running."
         : err.message || 'Unknown error';
+    const urgent = err.code === 'EADDRINUSE';
 
     store.dispatch({
       type: 'SERVER_ERROR',
       payload: {message},
+      urgent,
     });
   });
 

src/reducers/connections.tsx

@@ -43,6 +43,7 @@ export type FlipperError = {
   message: string;
   details?: string;
   error?: Error | string;
+  urgent?: boolean; // if true this error should always popup up
 };
 
 export type State = {

src/utils/argvUtils.tsx

@@ -7,7 +7,6 @@
  * @format
  */
 
-import electron from 'electron';
 import isProduction from './isProduction';
 import processConfig from './processConfig';