feat(ui): Enhance time range selector (#9521)

Add basic styling to time range selector, auto close on update.
This matches the behavior of the multiple project selector.

Author: lynnagara

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/absoluteSelector.jsx

@@ -31,20 +31,24 @@ export default class AbsoluteSelector extends React.Component {
     const {className, start, end, onChange} = this.props;
 
     return (
-      <Box p={2} className={className}>
-        update time range (UTC)
-        <DateTimeField
-          name="start"
-          label={t('From')}
-          value={start}
-          onChange={val => onChange('start', val)}
-        />
-        <DateTimeField
-          name="end"
-          label={t('To')}
-          value={end}
-          onChange={val => onChange('end', val)}
-        />
+      <Box className={className}>
+        <Box mb={1}>{t('Update time range (UTC)')}</Box>
+        <Box mb={1}>
+          <DateTimeField
+            name="start"
+            label={t('From')}
+            value={start}
+            onChange={val => onChange('start', val)}
+          />
+        </Box>
+        <Box mb={1}>
+          <DateTimeField
+            name="end"
+            label={t('To')}
+            value={end}
+            onChange={val => onChange('end', val)}
+          />
+        </Box>
       </Box>
     );
   }

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/index.jsx

@@ -60,10 +60,27 @@ class TimeRangeSelector extends React.Component {
     showRelative: false,
   };
 
+  constructor() {
+    super();
+    this.state = {
+      isOpen: false,
+    };
+  }
+
   formatDate(date) {
     return moment(date).format('MMMM D, h:mm a');
   }
 
+  handleUpdate = () => {
+    const {onUpdate} = this.props;
+    if (typeof onUpdate === 'function') {
+      onUpdate();
+    }
+    this.setState({
+      isOpen: false,
+    });
+  };
+
   render() {
     const {
       className,
@@ -73,7 +90,6 @@ class TimeRangeSelector extends React.Component {
       showAbsolute,
       showRelative,
       onChange,
-      onUpdate,
     } = this.props;
     // Currently we will only show either absolute or relative selector, with "absolute" taking precedence
     // Maybe an ideal selector would allow the user to choose between the two if both types of dates were allowed
@@ -88,10 +104,13 @@ class TimeRangeSelector extends React.Component {
       <HeaderItem className={className} label={t('Time Range')}>
         <DropdownLink
           title={<DynamicWrapper value={summary} fixed="start to end" />}
-          keepMenuOpen={true}
           anchorRight={true}
+          keepMenuOpen={true}
+          isOpen={this.state.isOpen}
+          onOpen={() => this.setState({isOpen: true})}
+          onClose={() => this.setState({isOpen: false})}
         >
-          <Flex direction="column">
+          <Flex direction="column" p={2}>
             {shouldShowAbsolute && (
               <AbsoluteSelector onChange={onChange} start={start} end={end} />
             )}
@@ -104,7 +123,7 @@ class TimeRangeSelector extends React.Component {
             )}
 
             <div>
-              <Button onClick={onUpdate}>{t('Update')}</Button>
+              <Button onClick={this.handleUpdate}>{t('Update')}</Button>
             </div>
           </Flex>
         </DropdownLink>

src/sentry/static/sentry/app/components/organizations/timeRangeSelector/relativeSelector.jsx

@@ -33,7 +33,7 @@ export default class RelativeSelector extends React.Component {
     const {className, choices, value} = this.props;
 
     return (
-      <Box p={2} className={className}>
+      <Box mb={1} className={className}>
         <SelectControl value={value} choices={choices} onChange={this.handleChange} />
       </Box>
     );