[Unified search] Allows rendering the datepicker without the refresh …

…button (#137941) * [Unified search] Allows rendering the datepicker without the refresh button * Add another story * fixes
elastic · Aug 4, 2022 · bfe35cc · bfe35cc
1 parent 4c690bb
commit bfe35cc
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx b/src/plugins/unified_search/public/__stories__/search_bar.stories.tsx
@@ -430,6 +430,24 @@ storiesOf('SearchBar', module)
       showSubmitButton: false,
     } as SearchBarProps)
   )
+  .add('show only datepicker without submit', () =>
+    wrapSearchBarInContext({
+      showDatePicker: true,
+      showFilterBar: false,
+      showAutoRefreshOnly: false,
+      showQueryInput: false,
+      showSubmitButton: false,
+    } as SearchBarProps)
+  )
+  .add('show only query bar and timepicker without submit', () =>
+    wrapSearchBarInContext({
+      showDatePicker: true,
+      showFilterBar: false,
+      showAutoRefreshOnly: false,
+      showQueryInput: true,
+      showSubmitButton: false,
+    } as SearchBarProps)
+  )
   .add('with filter bar on but pinning option is hidden from menus', () =>
     wrapSearchBarInContext({
       showDatePicker: false,

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.test.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.test.tsx
@@ -113,6 +113,7 @@ function wrapQueryBarTopRowInContext(testProps: any) {
 describe('QueryBarTopRowTopRow', () => {
   const QUERY_INPUT_SELECTOR = 'QueryStringInputUI';
   const TIMEPICKER_SELECTOR = 'Memo(EuiSuperDatePicker)';
+  const REFRESH_BUTTON_SELECTOR = 'EuiSuperUpdateButton';
   const TIMEPICKER_DURATION = '[data-shared-timefilter-duration]';
 
   beforeEach(() => {
@@ -195,6 +196,23 @@ describe('QueryBarTopRowTopRow', () => {
     expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1);
   });
 
+  it('Should render timepicker without the submit button if showSubmitButton is false', () => {
+    const component = mount(
+      wrapQueryBarTopRowInContext({
+        isDirty: false,
+        screenTitle: 'Another Screen',
+        showDatePicker: true,
+        showSubmitButton: false,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+        timeHistory: mockTimeHistory,
+      })
+    );
+
+    expect(component.find(REFRESH_BUTTON_SELECTOR).length).toBe(0);
+    expect(component.find(TIMEPICKER_SELECTOR).length).toBe(1);
+  });
+
   it('Should render the timefilter duration container for sharing', () => {
     const component = mount(
       wrapQueryBarTopRowInContext({

diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx
@@ -375,10 +375,9 @@ export const QueryBarTopRow = React.memo(
     }
 
     function renderUpdateButton() {
-      if (!shouldRenderUpdatebutton()) {
+      if (!shouldRenderUpdatebutton() && !shouldRenderDatePicker()) {
         return null;
       }
-
       const buttonLabelUpdate = i18n.translate('unifiedSearch.queryBarTopRow.submitButton.update', {
         defaultMessage: 'Needs updating',
       });
@@ -421,16 +420,17 @@ export const QueryBarTopRow = React.memo(
         </EuiFlexItem>
       );
 
-      if (!shouldRenderDatePicker()) {
+      // allows to render the button without the datepicker
+      if (!shouldRenderDatePicker() && shouldRenderUpdatebutton()) {
         return button;
       }
 
       return (
         <EuiFlexItem grow={false}>
           <NoDataPopover storage={storage} showNoDataPopover={props.indicateNoData}>
             <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
-              {renderDatePicker()}
-              {button}
+              {shouldRenderDatePicker() ? renderDatePicker() : null}
+              {shouldRenderUpdatebutton() ? button : null}
             </EuiFlexGroup>
           </NoDataPopover>
         </EuiFlexItem>