UI fixes

Summary:
This is a collection of small UI fixes for the network plugin:

- image maxWidth is set to 100% to not cause vertical scrolling
- Panels now have horizontal scrollbars, if their content overflows
- fixing missing icon for failed network requests
- removing position sticky from table headers as it was not used and causing some rendering issues and performance problems
- Adding a `label` and `grow` option to the `Select`-component which is used in the sidebar of the network plugin.

Reviewed By: passy

Differential Revision: D12956336

fbshipit-source-id: 6e7e9cf97c058a2ff626576d4afdc6df65007ea1

src/plugins/network/RequestDetails.js

@@ -12,7 +12,6 @@ import type {Request, Response, Header} from './index.js';
 import {
   Component,
   FlexColumn,
-  FlexRow,
   ManagedTable,
   ManagedDataInspector,
   Text,
@@ -223,14 +222,13 @@ export default class RequestDetails extends Component<
             ]
           : null}
         <Panel heading={'Options'} floating={false} collapsed={true}>
-          <FlexRow>
-            <Text>Body: </Text>
-            <Select
-              selected={bodyFormat}
-              onChange={this.onSelectFormat}
-              options={RequestDetails.BodyOptions}
-            />
-          </FlexRow>
+          <Select
+            grow
+            label="Body"
+            selected={bodyFormat}
+            onChange={this.onSelectFormat}
+            options={RequestDetails.BodyOptions}
+          />
         </Panel>
       </RequestDetails.Container>
     );
@@ -403,8 +401,7 @@ type ImageWithSizeState = {
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
   static Image = styled('img')({
     objectFit: 'scale-down',
-    maxWidth: 500,
-    maxHeight: 500,
+    maxWidth: '100%',
     marginBottom: 10,
   });
 

src/plugins/network/index.js

@@ -207,7 +207,7 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
             this.state.selectedIds ? new Set(this.state.selectedIds) : null
           }
         />
-        <DetailSidebar>{this.renderSidebar()}</DetailSidebar>
+        <DetailSidebar width={500}>{this.renderSidebar()}</DetailSidebar>
       </FlexColumn>
     );
   }
@@ -384,7 +384,7 @@ class StatusColumn extends PureComponent<{
     let glyph;
 
     if (children != null && children >= 400 && children < 600) {
-      glyph = <Icon name="stop-solid" color={colors.red} />;
+      glyph = <Icon name="stop" color={colors.red} />;
     }
 
     return (

src/ui/components/Panel.js

@@ -156,6 +156,7 @@ export default class Panel extends React.Component<
 
         {children == null || (collapsable && collapsed) ? null : (
           <Panel.PanelBody
+            scrollable
             grow={grow}
             padded={padded == null ? true : padded}
             floating={floating}>

src/ui/components/Select.js

@@ -6,6 +6,22 @@
  */
 
 import {Component} from 'react';
+import Text from './Text';
+import styled from '../styled';
+
+const Label = styled('label')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const LabelText = styled(Text)({
+  fontWeight: '500',
+  marginRight: 5,
+});
+
+const SelectMenu = styled('select')(({grow}) => ({
+  flexGrow: grow ? 1 : null,
+}));
 
 /**
  * Dropdown to select from a list of options
@@ -21,20 +37,41 @@ export default class Select extends Component<{
   onChange: (key: string) => void,
   /** Selected key */
   selected?: ?string,
+  /** Label shown next to the dropdown */
+  label?: string,
+  /** Select box should take all available space */
+  grow?: boolean,
 }> {
+  selectID: string = Math.random().toString(36);
+
   onChange = (event: Object) => {
     this.props.onChange(event.target.value);
   };
 
   render() {
-    const {className, options, selected} = this.props;
+    const {className, options, selected, label, grow} = this.props;
 
-    return (
-      <select onChange={this.onChange} className={className}>
+    let select = (
+      <SelectMenu
+        grow={grow}
+        id={this.selectID}
+        onChange={this.onChange}
+        className={className}>
         {Object.keys(options).map(key => (
           <option selected={key === selected}>{options[key]}</option>
         ))}
-      </select>
+      </SelectMenu>
     );
+
+    if (label) {
+      select = (
+        <Label for={this.selectID}>
+          <LabelText>{label}</LabelText>
+          {select}
+        </Label>
+      );
+    }
+
+    return select;
   }
 }

src/ui/components/table/TableHead.js

@@ -49,7 +49,6 @@ const TableHeadContainer = styled(FlexRow)({
   flexShrink: 0,
   left: 0,
   overflow: 'hidden',
-  position: 'sticky',
   right: 0,
   textAlign: 'left',
   top: 0,