From cebc8853f23b2b39d947d88a19b048f516623fb5 Mon Sep 17 00:00:00 2001
From: Reem Tariq <reem.tariq@grafana.com>
Date: Fri, 26 May 2023 10:59:02 +0200
Subject: [PATCH] grafana/ui: add icon as a prefix in time range input
 component (#66084)

---
 .../src/components/DateTimePickers/TimeRangeInput.tsx       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
index b9d85df07d4..09b732a6d7b 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
@@ -31,6 +31,7 @@ export interface TimeRangeInputProps {
   /** Controls visibility of the preset time ranges (e.g. **Last 5 minutes**) in the picker menu */
   hideQuickRanges?: boolean;
   disabled?: boolean;
+  showIcon?: boolean;
 }
 
 const noop = () => {};
@@ -46,6 +47,7 @@ export const TimeRangeInput = ({
   isReversed = true,
   hideQuickRanges = false,
   disabled = false,
+  showIcon = false,
 }: TimeRangeInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme2();
@@ -84,6 +86,7 @@ export const TimeRangeInput = ({
         aria-label={selectors.components.TimePicker.openButton}
         onClick={onOpen}
       >
+        {showIcon && <Icon name="clock-nine" size={'sm'} className={styles.icon} />}
         {isValidTimeRange(value) ? (
           <TimePickerButtonLabel value={value} timeZone={timeZone} />
         ) : (
@@ -162,5 +165,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
       color: ${theme.colors.text.disabled};
       opacity: 1;
     `,
+    icon: css`
+      margin-right: ${theme.spacing(0.5)};
+    `,
   };
 });