style: replace inclusive/exclusive on DateFilterControl with </≤ (#10420)

* feat: improve filter control tooltips

* add styles

* break out utils into own file

* lint

* add tests

* styled component now working

* lint

* add license headers

* replace shallow with mount due to withTheme

Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/src/explore/components/controls/DateFilterControl.jsx

@@ -37,7 +37,12 @@ import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
 import { t } from '@superset-ui/translation';
+import { styled, withTheme } from '@superset-ui/style';
 
+import {
+  buildTimeRangeString,
+  formatTimeRange,
+} from 'src/explore/dateFilterUtils';
 import './DateFilterControl.less';
 import ControlHeader from '../ControlHeader';
 import PopoverSection from '../../../components/PopoverSection';
@@ -128,12 +133,18 @@ function getStateFromCommonTimeFrame(value) {
     tab: TABS.DEFAULTS,
     type: TYPES.DEFAULTS,
     common: value,
-    since: moment()
-      .utc()
-      .startOf('day')
-      .subtract(1, units)
-      .format(MOMENT_FORMAT),
-    until: moment().utc().startOf('day').format(MOMENT_FORMAT),
+    since:
+      value === 'No filter'
+        ? ''
+        : moment()
+            .utc()
+            .startOf('day')
+            .subtract(1, units)
+            .format(MOMENT_FORMAT),
+    until:
+      value === 'No filter'
+        ? ''
+        : moment().utc().startOf('day').format(MOMENT_FORMAT),
   };
 }
 
@@ -164,7 +175,13 @@ function getStateFromCustomRange(value) {
   };
 }
 
-export default class DateFilterControl extends React.Component {
+const Styles = styled.div`
+  .radio {
+    margin: ${({ theme }) => theme.gridUnit}px 0;
+  }
+`;
+
+class DateFilterControl extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -363,35 +380,38 @@ export default class DateFilterControl extends React.Component {
         key={grain}
         eventKey={grain}
         active={grain === this.state.grain}
+        fullWidth={false}
       >
         {grain}
       </MenuItem>
     ));
     const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => {
       const nextState = getStateFromCommonTimeFrame(timeFrame);
-      const endpoints = this.props.endpoints;
+
+      const timeRange = buildTimeRangeString(nextState.since, nextState.until);
+
       return (
-        <OverlayTrigger
-          key={timeFrame}
-          placement="left"
-          overlay={
-            <Tooltip id={`tooltip-${timeFrame}`}>
-              {nextState.since} {endpoints && `(${endpoints[0]})`}
-              <br />
-              {nextState.until} {endpoints && `(${endpoints[1]})`}
-            </Tooltip>
-          }
-        >
-          <div>
-            <Radio
-              key={timeFrame.replace(' ', '').toLowerCase()}
-              checked={this.state.common === timeFrame}
-              onChange={() => this.setState(nextState)}
-            >
-              {timeFrame}
-            </Radio>
-          </div>
-        </OverlayTrigger>
+        <Styles theme={this.props.theme}>
+          <OverlayTrigger
+            key={timeFrame}
+            placement="right"
+            overlay={
+              <Tooltip id={`tooltip-${timeFrame}`}>
+                {formatTimeRange(timeRange, this.props.endpoints)}
+              </Tooltip>
+            }
+          >
+            <div style={{ display: 'inline-block' }}>
+              <Radio
+                key={timeFrame.replace(' ', '').toLowerCase()}
+                checked={this.state.common === timeFrame}
+                onChange={() => this.setState(nextState)}
+              >
+                {timeFrame}
+              </Radio>
+            </div>
+          </OverlayTrigger>
+        </Styles>
       );
     });
     return (
@@ -556,16 +576,7 @@ export default class DateFilterControl extends React.Component {
     );
   }
   render() {
-    let value = this.props.value || defaultProps.value;
-    const endpoints = this.props.endpoints;
-    value = value
-      .split(SEPARATOR)
-      .map(
-        (v, idx, values) =>
-          (v.replace('T00:00:00', '') || (idx === 0 ? '-∞' : '∞')) +
-          (endpoints && values.length > 1 ? ` (${endpoints[idx]})` : ''),
-      )
-      .join(SEPARATOR);
+    const timeRange = this.props.value || defaultProps.value;
     return (
       <div>
         <ControlHeader {...this.props} />
@@ -580,7 +591,7 @@ export default class DateFilterControl extends React.Component {
           onClick={this.handleClickTrigger}
         >
           <Label name="popover-trigger" style={{ cursor: 'pointer' }}>
-            {value}
+            {formatTimeRange(timeRange, this.props.endpoints)}
           </Label>
         </OverlayTrigger>
       </div>
@@ -588,5 +599,7 @@ export default class DateFilterControl extends React.Component {
   }
 }
 
+export default withTheme(DateFilterControl);
+
 DateFilterControl.propTypes = propTypes;
 DateFilterControl.defaultProps = defaultProps;