refactoring search bar

elastic · Jan 20, 2021 · b35a5a8 · b35a5a8
1 parent b3fd41f
commit b35a5a8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/search_bar.tsx b/x-pack/plugins/apm/public/components/shared/search_bar.tsx
@@ -7,9 +7,11 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import styled from 'styled-components';
+import { px } from '../../style/variables';
 import { DatePicker } from './DatePicker';
 import { KueryBar } from './KueryBar';
 import { TimeComparison } from './time_comparison';
+import { useBreakPoints } from '../app/RumDashboard/hooks/useBreakPoints';
 
 const SearchBarFlexGroup = styled(EuiFlexGroup)`
   margin: ${({ theme }) =>
@@ -21,19 +23,32 @@ interface Props {
   showTimeComparison?: boolean;
 }
 
+function getRowDirection(showColumn: boolean) {
+  return showColumn ? 'column' : 'row';
+}
+
 export function SearchBar({ prepend, showTimeComparison = false }: Props) {
+  const { isMedium, isLarge } = useBreakPoints();
   return (
-    <SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
-      <EuiFlexItem grow={3}>
+    <SearchBarFlexGroup gutterSize="s" direction={getRowDirection(isLarge)}>
+      <EuiFlexItem>
         <KueryBar prepend={prepend} />
       </EuiFlexItem>
-      {showTimeComparison && (
-        <EuiFlexItem>
-          <TimeComparison />
-        </EuiFlexItem>
-      )}
-      <EuiFlexItem grow={1}>
-        <DatePicker />
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup
+          justifyContent="flexEnd"
+          gutterSize="s"
+          direction={getRowDirection(isMedium)}
+        >
+          {showTimeComparison && (
+            <EuiFlexItem style={{ minWidth: px(300) }}>
+              <TimeComparison />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem>
+            <DatePicker />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlexItem>
     </SearchBarFlexGroup>
   );

diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.test.tsx
@@ -102,7 +102,7 @@ describe('TimeComparison', () => {
     });
   });
 
-  describe('Time range is greater than 8 days', () => {
+  describe('Time range is greater than 7 days', () => {
     it('Shows absolute times without year when within the same year', () => {
       const Wrapper = getWrapper({
         start: '2021-01-20T15:00:00.000Z',

diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
@@ -13,6 +13,7 @@ import { getDateDifference } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { px, unit } from '../../../style/variables';
 import * as urlHelpers from '../../shared/Links/url_helpers';
+import { useBreakPoints } from '../../app/RumDashboard/hooks/useBreakPoints';
 
 const PrependContainer = styled.div`
   display: flex;
@@ -73,6 +74,7 @@ function getSelectOptions({ start, end }: { start?: string; end?: string }) {
 
 export function TimeComparison() {
   const history = useHistory();
+  const { isMedium, isLarge } = useBreakPoints();
   const {
     urlParams: { start, end, comparisonEnabled, comparisonType },
   } = useUrlParams();
@@ -109,6 +111,7 @@ export function TimeComparison() {
 
   return (
     <EuiSelect
+      fullWidth={!isMedium && isLarge}
       data-test-subj="comparisonSelect"
       disabled={selectOptions.length <= 1}
       options={selectOptions}