feat: New time range label

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -20,7 +20,6 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { css, styled, t, useTheme, NO_TIME_RANGE } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import ControlHeader from 'src/explore/components/ControlHeader';
-import Label from 'src/components/Label';
 import Modal from 'src/components/Modal';
 import { Divider } from 'src/components';
 import Icons from 'src/components/Icons';
@@ -29,6 +28,7 @@ import { Tooltip } from 'src/components/Tooltip';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { noOp } from 'src/utils/common';
+import { useCSSTextTruncation } from 'src/hooks/useTruncation';
 import ControlPopover from '../ControlPopover/ControlPopover';
 
 import { DateFilterControlProps, FrameType } from './types';
@@ -45,6 +45,7 @@ import {
   CustomFrame,
   AdvancedFrame,
 } from './components';
+import { DateLabel } from './components/DateLabel';
 
 const StyledRangeType = styled(Select)`
   width: 272px;
@@ -139,21 +140,22 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
-  const [tooltipTitle, setTooltipTitle] = useState<string>(value);
+  const [tooltipTitle, setTooltipTitle] = useState<string | null>(value);
   const theme = useTheme();
+  const [labelRef, labelIsTruncated] = useCSSTextTruncation<HTMLSpanElement>();
 
   useEffect(() => {
     if (value === NO_TIME_RANGE) {
       setActualTimeRange(NO_TIME_RANGE);
-      setTooltipTitle(NO_TIME_RANGE);
+      setTooltipTitle(null);
       setValidTimeRange(true);
       return;
     }
     fetchTimeRange(value).then(({ value: actualRange, error }) => {
       if (error) {
         setEvalResponse(error || '');
         setValidTimeRange(false);
-        setTooltipTitle(value || '');
+        setTooltipTitle(value || null);
       } else {
         /*
           HRT == human readable text
@@ -172,16 +174,27 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
           guessedFrame === 'No filter'
         ) {
           setActualTimeRange(value);
+          setTooltipTitle(labelIsTruncated ? value : null);
         } else {
+          const tooltipTitle = labelIsTruncated ? (
+            <>
+              <div>
+                <strong>{actualRange}</strong>
+                {value && <div>{value}</div>}
+              </div>
+            </>
+          ) : (
+            value || null
+          );
           setActualTimeRange(actualRange || '');
-          setTooltipTitle(value || '');
+          setTooltipTitle(tooltipTitle);
         }
         setValidTimeRange(true);
       }
       setLastFetchedTimeRange(value);
       setEvalResponse(actualRange || value);
     });
-  }, [value]);
+  }, [guessedFrame, labelIsTruncated, labelRef, value]);
 
   useDebouncedEffect(
     () => {
@@ -322,26 +335,28 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
       overlayStyle={{ width: '600px' }}
     >
       <Tooltip placement="top" title={tooltipTitle}>
-        <Label
-          className="pointer"
+        <DateLabel
+          label={actualTimeRange}
+          isActive={show}
+          isPlaceholder={actualTimeRange === NO_TIME_RANGE}
           data-test={DATE_FILTER_TEST_KEY.popoverOverlay}
-        >
-          {actualTimeRange}
-        </Label>
+          ref={labelRef}
+        />
       </Tooltip>
     </ControlPopover>
   );
 
   const modalContent = (
     <>
       <Tooltip placement="top" title={tooltipTitle}>
-        <Label
-          className="pointer"
+        <DateLabel
           onClick={toggleOverlay}
+          label={actualTimeRange}
+          isActive={show}
+          isPlaceholder={actualTimeRange === NO_TIME_RANGE}
           data-test={DATE_FILTER_TEST_KEY.modalOverlay}
-        >
-          {actualTimeRange}
-        </Label>
+          ref={labelRef}
+        />
       </Tooltip>
       {/* the zIndex value is from trying so that the Modal doesn't overlay the AdhocFilter when GENERIC_CHART_AXES is enabled */}
       <Modal

superset-frontend/src/explore/components/controls/DateFilterControl/components/DateLabel.tsx

@@ -0,0 +1,97 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { forwardRef, ReactNode, RefObject } from 'react';
+import { css, styled, useTheme } from '@superset-ui/core';
+import Icons from 'src/components/Icons';
+
+export type DateLabelProps = {
+  label: ReactNode;
+  isActive?: boolean;
+  isPlaceholder?: boolean;
+  onClick?: (event: React.MouseEvent) => void;
+};
+
+// This is the color that antd components (such as Select or Input) use on hover
+// TODO: use theme.colors.primary.base here and in antd components
+const ACTIVE_BORDER_COLOR = '#45BED6';
+
+const LabelContainer = styled.div<{
+  isActive?: boolean;
+  isPlaceholder?: boolean;
+}>`
+  ${({ theme, isActive, isPlaceholder }) => css`
+    width: 100%;
+    height: ${theme.gridUnit * 8}px;
+
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    padding: 0 ${theme.gridUnit * 3}px;
+
+    background-color: ${theme.colors.grayscale.light5};
+
+    border: 1px solid
+      ${isActive ? ACTIVE_BORDER_COLOR : theme.colors.grayscale.light2};
+    border-radius: ${theme.borderRadius}px;
+
+    transition: border-color 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
+    :hover {
+      border-color: ${ACTIVE_BORDER_COLOR};
+    }
+
+    .date-label-content {
+      color: ${isPlaceholder
+        ? theme.colors.grayscale.light1
+        : theme.colors.grayscale.dark1};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      flex-shrink: 1;
+      white-space: nowrap;
+    }
+
+    span[role='img'] {
+      margin-left: auto;
+      padding-left: ${theme.gridUnit}px;
+
+      & > span[role='img'] {
+        line-height: 0;
+      }
+    }
+  `}
+`;
+
+export const DateLabel = forwardRef(
+  (props: DateLabelProps, ref: RefObject<HTMLSpanElement>) => {
+    const theme = useTheme();
+    return (
+      <LabelContainer {...props}>
+        <span className="date-label-content" ref={ref}>
+          {props.label}
+        </span>
+        <Icons.CalendarOutlined
+          iconSize="s"
+          iconColor={theme.colors.grayscale.base}
+        />
+      </LabelContainer>
+    );
+  },
+);

superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx

@@ -38,6 +38,7 @@ const ControlContainer = styled.div<{
   display: flex;
   height: 100%;
   max-width: 100%;
+  width: 100%;
   padding: 2px;
   & > span,
   & > span:hover {