[Unified search] Not fail in wrong custom timerange (#154643)

## Summary

Fixes https://github.com/elastic/kibana/issues/152536

In unified search timepicker you can set your own custom timeranges for
reusability. It is very easy to make a mistake such as the one described
in the issue. This fails on the usePrettyDuration function of eui. I
wrapped the function on a try catch to not fail (it will instead default
to the default timerange 15 minutes).


![2](https://user-images.githubusercontent.com/17003240/230848628-b3930455-d8a8-40b0-b699-d604454859cb.gif)

### 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

@@ -13,7 +13,7 @@ import { mount, shallow } from 'enzyme';
 import { render } from '@testing-library/react';
 import { EMPTY } from 'rxjs';
 
-import QueryBarTopRow from './query_bar_top_row';
+import QueryBarTopRow, { SharingMetaFields } from './query_bar_top_row';
 import { coreMock } from '@kbn/core/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -309,3 +309,30 @@ describe('QueryBarTopRowTopRow', () => {
     expect(component.find(QUERY_INPUT_SELECTOR).length).toBe(0);
   });
 });
+
+describe('SharingMetaFields', () => {
+  it('Should render the component with data-shared-timefilter-duration if time is set correctly', () => {
+    const from = '2023-04-07';
+    const to = '2023-04-08';
+    const component = <SharingMetaFields from={from} to={to} dateFormat="MMM D, YYYY" />;
+
+    expect(shallow(component)).toMatchInlineSnapshot(`
+      <div
+        data-shared-timefilter-duration="Apr 7, 2023 to Apr 8, 2023"
+        data-test-subj="dataSharedTimefilterDuration"
+      />
+    `);
+  });
+
+  it('Should render the component without data-shared-timefilter-duration if time is not set correctly', () => {
+    const component = (
+      <SharingMetaFields from="boom" to="now" dateFormat="MMM D, YYYY @ HH:mm:ss.SSS" />
+    );
+
+    expect(shallow(component)).toMatchInlineSnapshot(`
+      <div
+        data-test-subj="dataSharedTimefilterDuration"
+      />
+    `);
+  });
+});

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

@@ -122,7 +122,7 @@ export interface QueryBarTopRowProps<QT extends Query | AggregateQuery = Query>
   onTextLangQueryChange: (query: AggregateQuery) => void;
 }
 
-const SharingMetaFields = React.memo(function SharingMetaFields({
+export const SharingMetaFields = React.memo(function SharingMetaFields({
   from,
   to,
   dateFormat,
@@ -139,19 +139,22 @@ const SharingMetaFields = React.memo(function SharingMetaFields({
     return valueAsMoment.toISOString();
   }
 
-  const dateRangePretty = usePrettyDuration({
-    timeFrom: toAbsoluteString(from),
-    timeTo: toAbsoluteString(to),
-    quickRanges: [],
-    dateFormat,
-  });
-
-  return (
-    <div
-      data-shared-timefilter-duration={dateRangePretty}
-      data-test-subj="dataSharedTimefilterDuration"
-    />
-  );
+  try {
+    const dateRangePretty = usePrettyDuration({
+      timeFrom: toAbsoluteString(from),
+      timeTo: toAbsoluteString(to),
+      quickRanges: [],
+      dateFormat,
+    });
+    return (
+      <div
+        data-shared-timefilter-duration={dateRangePretty}
+        data-test-subj="dataSharedTimefilterDuration"
+      />
+    );
+  } catch (e) {
+    return <div data-test-subj="dataSharedTimefilterDuration" />;
+  }
 });
 
 type GenericQueryBarTopRow = <QT extends AggregateQuery | Query = Query>(