Grafana-UI: Reverse TimeRangeInput range pickers (#26652)

* Grafana-UI: Reverse TimeRangeInput range pickers

* Grafana-UI: Add comment

* Grafana-UI: Update snapshots

packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx

@@ -93,6 +93,7 @@ export const TimeRangeInput: FC<Props> = ({
             onChangeTimeZone={onChangeTimeZone || noop}
             className={styles.content}
             hideTimeZone={hideTimeZone}
+            isReversed
           />
         </ClickOutsideWrapper>
       )}

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx

@@ -9,15 +9,15 @@ import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
   const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
 
   return {
     container: css`
       top: -1px;
       position: absolute;
-      right: 544px;
-      box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow};
+      ${isReversed ? 'left' : 'right'}: 544px;
+      box-shadow: ${isReversed ? '10px' : '0px'} 0px 20px ${theme.colors.dropdownShadow};
       background-color: ${theme.colors.bodyBg};
       z-index: -1;
       border: 1px solid ${containerBorder};
@@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         background-color: ${theme.colors.bodyBg};
         width: 19px;
         height: 100%;
-        content: ' ';
+        content: ${!isReversed ? ' ' : ''};
         position: absolute;
         top: 0;
         right: -19px;
@@ -193,13 +193,14 @@ interface Props {
   onChange: (from: DateTime, to: DateTime) => void;
   isFullscreen: boolean;
   timeZone?: TimeZone;
+  isReversed?: boolean;
 }
 
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
 
 export const TimePickerCalendar = memo<Props>(props => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, props.isReversed);
   const { isOpen, isFullscreen } = props;
 
   if (!isOpen) {

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx

@@ -11,7 +11,7 @@ import { TimeRangeForm } from './TimeRangeForm';
 import { TimeRangeList } from './TimeRangeList';
 import { TimePickerFooter } from './TimePickerFooter';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme, isReversed) => {
   const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
 
   return {
@@ -24,7 +24,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       top: 116%;
       border-radius: 2px;
       border: 1px solid ${containerBorder};
-      right: 0;
+      right: ${isReversed ? 'unset' : 0};
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
         width: 262px;
@@ -37,9 +37,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     leftSide: css`
       display: flex;
       flex-direction: column;
-      border-right: 1px solid ${theme.colors.border1};
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border1}`};
       width: 60%;
       overflow: hidden;
+      order: ${isReversed ? 1 : 0};
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
         display: none;
@@ -47,6 +48,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     rightSide: css`
       width: 40% !important;
+      border-right: ${isReversed ? `1px solid ${theme.colors.border1}` : 'none'};
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
         width: 100% !important;
@@ -131,6 +133,8 @@ interface Props {
   showHistory?: boolean;
   className?: string;
   hideTimeZone?: boolean;
+  /** Reverse the order of relative and absolute range pickers. Used to left align the picker in forms */
+  isReversed?: boolean;
 }
 
 interface PropsWithScreenSize extends Props {
@@ -144,7 +148,7 @@ interface FormProps extends Omit<Props, 'history'> {
 
 export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = props => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, props.isReversed);
   const historyOptions = mapToHistoryOptions(props.history, props.timeZone);
   const { quickOptions = [], otherOptions = [], isFullscreen } = props;
 
@@ -247,7 +251,13 @@ const FullScreenForm: React.FC<FormProps> = props => {
         <div aria-label="TimePicker absolute time range" className={styles.title}>
           <TimePickerTitle>Absolute time range</TimePickerTitle>
         </div>
-        <TimeRangeForm value={props.value} timeZone={props.timeZone} onApply={props.onChange} isFullscreen={true} />
+        <TimeRangeForm
+          value={props.value}
+          timeZone={props.timeZone}
+          onApply={props.onChange}
+          isFullscreen={true}
+          isReversed={props.isReversed}
+        />
       </div>
       {props.showHistory && (
         <div className={styles.recent}>

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeForm.tsx

@@ -21,6 +21,7 @@ interface Props {
   onApply: (range: TimeRange) => void;
   timeZone?: TimeZone;
   roundup?: boolean;
+  isReversed?: boolean;
 }
 
 interface InputState {
@@ -121,6 +122,7 @@ export const TimeRangeForm: React.FC<Props> = props => {
         onClose={() => setOpen(false)}
         onChange={onChange}
         timeZone={timeZone}
+        isReversed={props.isReversed}
       />
     </>
   );

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/__snapshots__/TimePickerContent.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
     className="css-ooqtr4"
   >
     <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
     >
       <FullScreenForm
         historyOptions={Array []}
@@ -35,7 +35,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
       hideTracksWhenNotNeeded={false}
       setScrollTop={[Function]}
     >
@@ -109,7 +109,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
     className="css-ooqtr4"
   >
     <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
     >
       <FullScreenForm
         historyOptions={Array []}
@@ -136,7 +136,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
       hideTracksWhenNotNeeded={false}
       setScrollTop={[Function]}
     >
@@ -206,7 +206,7 @@ exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
     className="css-ooqtr4"
   >
     <div
-      className="css-dlnzj7"
+      className="css-1f2wc71"
     >
       <FullScreenForm
         history={
@@ -268,7 +268,7 @@ exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
-      className="css-1o1b8dr"
+      className="css-10t714z"
       hideTracksWhenNotNeeded={false}
       setScrollTop={[Function]}
     >