[Text based] Use disabled All time text on the date picker (#159093)

## Summary

Add a disabled text to date picker when the text based languages is on
disabled state.

<img width="1742" alt="image"
src="e5c544bf-ccac-46c7-a76c-88e877fdb37b">


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

src/plugins/unified_search/public/query_string_input/query_bar_top_row.test.tsx

@@ -301,7 +301,7 @@ describe('QueryBarTopRowTopRow', () => {
         screenTitle: 'SQL Screen',
         timeHistory: mockTimeHistory,
         indexPatterns: [stubIndexPattern],
-        showDatePicker: false,
+        showDatePicker: true,
         dateRangeFrom: 'now-7d',
         dateRangeTo: 'now',
       })
@@ -310,6 +310,40 @@ describe('QueryBarTopRowTopRow', () => {
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
     expect(component.find(TEXT_BASED_EDITOR).length).toBe(1);
     expect(component.find(TEXT_BASED_EDITOR).prop('detectTimestamp')).toBe(true);
+    expect(component.find(TIMEPICKER_SELECTOR).prop('isDisabled')).toBe(false);
+  });
+
+  it('Should render disabled date picker if on text based languages mode and no timeFieldName', () => {
+    const dataView = {
+      ...stubIndexPattern,
+      timeFieldName: undefined,
+      isPersisted: () => false,
+    };
+    const component = mount(
+      wrapQueryBarTopRowInContext({
+        query: sqlQuery,
+        isDirty: false,
+        screenTitle: 'SQL Screen',
+        timeHistory: mockTimeHistory,
+        indexPatterns: [dataView],
+        showDatePicker: true,
+        dateRangeFrom: 'now-7d',
+        dateRangeTo: 'now',
+      })
+    );
+
+    expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
+    expect(component.find(TEXT_BASED_EDITOR).length).toBe(1);
+    expect(component.find(TEXT_BASED_EDITOR).prop('detectTimestamp')).toBe(false);
+    expect(component.find(TIMEPICKER_SELECTOR).prop('isDisabled')).toMatchInlineSnapshot(`
+      Object {
+        "display": <span
+          data-test-subj="kbnQueryBar-datePicker-disabled"
+        >
+          All time
+        </span>,
+      }
+    `);
   });
 });
 

src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx

@@ -63,6 +63,10 @@ export const strings = {
     i18n.translate('unifiedSearch.queryBarTopRow.submitButton.run', {
       defaultMessage: 'Run query',
     }),
+  getDisabledDatePickerLabel: () =>
+    i18n.translate('unifiedSearch.queryBarTopRow.datePicker.disabledLabel', {
+      defaultMessage: 'All time',
+    }),
 };
 
 const getWrapperWithTooltip = (
@@ -419,14 +423,22 @@ export const QueryBarTopRow = React.memo(
       if (!shouldRenderDatePicker()) {
         return null;
       }
-      let isDisabled = props.isDisabled;
+      let isDisabled: boolean | { display: React.ReactNode } = Boolean(props.isDisabled);
       let enableTooltip = false;
       // On text based mode the datepicker is always on when the user has unsaved changes.
       // When the user doesn't have any changes it should be disabled if dataview doesn't have @timestamp field
       if (Boolean(isQueryLangSelected) && !props.isDirty) {
         const adHocDataview = props.indexPatterns?.[0];
         if (adHocDataview && typeof adHocDataview !== 'string') {
-          isDisabled = !Boolean(adHocDataview.timeFieldName);
+          if (!adHocDataview.timeFieldName) {
+            isDisabled = {
+              display: (
+                <span data-test-subj="kbnQueryBar-datePicker-disabled">
+                  {strings.getDisabledDatePickerLabel()}
+                </span>
+              ),
+            };
+          }
           enableTooltip = !Boolean(adHocDataview.timeFieldName);
         }
       }