Fix "now" and mixed format date handling in share modal (#245539)

## Summary

This PR fixes a bug where mixed dates (e.g one absolute and one
relative) wouldn't work properly and "now" was rendering as 0 seconds in
share modal date switcher.

<img width="494" height="432" alt="Screenshot 2025-12-09 at 13 13 05"
src="https://github.com/user-attachments/assets/4d5eb332-7329-40be-b725-97cf5020b73a"
/>


It also makes `ShareableUrlLocatorParams` strongly typed, requiring
`timeRange` to be always present even if it has an undefined value, in
response to a regression where dashboard time range parameter name was
renamed to be snake_case, which broke the functionality as
`TimeTypeSection` would always expect `timeRange`.

Closes: #241084

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: kowalczyk-krzysztof

src/platform/plugins/shared/dashboard/public/dashboard_app/top_nav/share/show_share_modal.tsx

@@ -215,7 +215,7 @@ export function ShowShareModal({
       locator: shareService.url.locators.get(
         DASHBOARD_APP_LOCATOR
       ) as LocatorPublic<DashboardLocatorParams>,
-      params: locatorParams,
+      params: { ...locatorParams, timeRange: locatorParams.time_range },
     },
   });
 }

src/platform/plugins/shared/discover/public/application/main/components/top_nav/app_menu_actions/get_share.tsx

@@ -12,6 +12,7 @@ import { AppMenuActionId, AppMenuActionType } from '@kbn/discover-utils';
 import { omit } from 'lodash';
 import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import { i18n } from '@kbn/i18n';
+import type { TimeRange } from '@kbn/es-query';
 import type { DiscoverSession } from '@kbn/saved-search-plugin/common';
 import type { DiscoverStateContainer } from '../../../state_management/discover_state';
 import { getSharingData, showPublicUrlSwitch } from '../../../../../utils/get_sharing_data';
@@ -64,14 +65,14 @@ export const getShareAppMenuItem = ({
     const filters = services.filterManager.getFilters();
 
     // Share -> Get links -> Snapshot
-    const params: DiscoverAppLocatorParams = {
+    const params: DiscoverAppLocatorParams & { timeRange: TimeRange | undefined } = {
       ...omit(currentTab.appState, 'dataSource'),
       ...(persistedDiscoverSession?.id ? { savedSearchId: persistedDiscoverSession.id } : {}),
       ...(dataView?.isPersisted()
         ? { dataViewId: dataView?.id }
         : { dataViewSpec: dataView?.toMinimalSpec() }),
       filters,
-      timeRange,
+      timeRange: timeRange ?? undefined,
       refreshInterval,
     };
 

src/platform/plugins/shared/share/moon.yml

@@ -44,6 +44,7 @@ dependsOn:
   - '@kbn/core-logging-server-mocks'
   - '@kbn/core-http-router-server-mocks'
   - '@kbn/licensing-types'
+  - '@kbn/es-query'
 tags:
   - plugin
   - prod

src/platform/plugins/shared/share/public/components/share_context_menu.tsx

@@ -18,7 +18,12 @@ import type { Capabilities } from '@kbn/core/public';
 
 import type { LocatorPublic } from '../../common';
 import { UrlPanelContent } from './url_panel_content';
-import type { ShareMenuItemLegacy, ShareContextMenuPanelItem, UrlParamExtension } from '../types';
+import type {
+  ShareMenuItemLegacy,
+  ShareContextMenuPanelItem,
+  UrlParamExtension,
+  ShareableUrlLocatorParams,
+} from '../types';
 import type { AnonymousAccessServiceContract } from '../../common/anonymous_access';
 import type { BrowserUrlService } from '../types';
 
@@ -31,7 +36,7 @@ export interface ShareContextMenuProps {
   shareableUrlForSavedObject?: string;
   shareableUrlLocatorParams?: {
     locator: LocatorPublic<any>;
-    params: any;
+    params: ShareableUrlLocatorParams;
   };
   shareMenuItems: ShareMenuItemLegacy[];
   sharingData: any;

src/platform/plugins/shared/share/public/components/tabs/link/link_content.tsx

@@ -7,7 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { EuiSwitchEvent } from '@elastic/eui';
 import {
   copyToClipboard,
   EuiButton,
@@ -126,20 +125,23 @@ export const LinkContent = ({
     setIsLoading(false);
   }, [snapshotUrl, delegatedShareUrlHandler, allowShortUrl, createShortUrl]);
 
-  const changeTimeType = (e: EuiSwitchEvent) => {
-    setIsAbsoluteTime(e.target.checked);
-    if (urlToCopy?.current && e.target.checked !== isAbsoluteTime) {
-      urlToCopy.current = undefined;
-    }
-  };
+  const handleTimeTypeChange = useCallback(
+    (isAbsolute: boolean) => {
+      if (urlToCopy?.current && isAbsolute !== isAbsoluteTime) {
+        urlToCopy.current = undefined;
+      }
+      setIsAbsoluteTime(isAbsolute);
+    },
+    [isAbsoluteTime]
+  );
 
   return (
     <>
       <EuiForm>
         <TimeTypeSection
           timeRange={timeRange}
-          isAbsoluteTime={isAbsoluteTime}
-          changeTimeType={changeTimeType}
+          onTimeTypeChange={handleTimeTypeChange}
+          isAbsoluteTimeByDefault={isAbsoluteTime}
         />
         {isDirty && draftModeCallOut && (
           <>

src/platform/plugins/shared/share/public/components/tabs/link/time_type_section.test.tsx

@@ -12,7 +12,6 @@ import React from 'react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { render, screen } from '@testing-library/react';
 import { TimeTypeSection } from './time_type_section';
-import * as timeUtils from '../../../lib/time_utils';
 
 const renderComponent = (props: ComponentProps<typeof TimeTypeSection>) => {
   render(
@@ -25,123 +24,132 @@ const renderComponent = (props: ComponentProps<typeof TimeTypeSection>) => {
 describe('TimeTypeSection', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest
-      .spyOn(timeUtils, 'convertRelativeTimeStringToAbsoluteTimeDate')
-      .mockReturnValue(new Date());
-    jest
-      .spyOn(timeUtils, 'getRelativeTimeValueAndUnitFromTimeString')
-      .mockImplementation((time) => {
-        if (time === 'now') return { value: 0, unit: 'second', roundingUnit: undefined };
-        if (time === 'now-1m') return { value: -1, unit: 'minute', roundingUnit: undefined };
-        if (time === 'now-30m') return { value: -30, unit: 'minute', roundingUnit: undefined };
-        return { value: 0, unit: 'second', roundingUnit: undefined };
-      });
-    jest.spyOn(timeUtils, 'isTimeRangeAbsoluteTime').mockReturnValue(false);
   });
 
-  it('renders null when timeRange is not provided', () => {
-    const changeTimeType = jest.fn();
+  it('should render null when timeRange is not provided', () => {
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
-      isAbsoluteTime: false,
-      changeTimeType,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
     });
 
     const timeRangeSwitch = screen.queryByRole('switch');
 
     expect(timeRangeSwitch).not.toBeInTheDocument();
   });
 
-  it('renders with absolute time range', () => {
+  it('should render absolute time range', () => {
     const timeRange = { from: '2022-01-01T00:00:00.000Z', to: '2022-01-02T00:00:00.000Z' };
-    const changeTimeType = jest.fn();
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
       timeRange,
-      isAbsoluteTime: true,
-      changeTimeType,
+      isAbsoluteTimeByDefault: true,
+      onTimeTypeChange,
     });
 
-    const timeRangeSwitch = screen.getByRole('switch');
-
-    expect(timeRangeSwitch).toBeChecked();
-
     const absoluteTimeInfoText = screen.getByTestId('absoluteTimeInfoText');
 
     expect(absoluteTimeInfoText).toBeInTheDocument();
+    expect(screen.getByText(/January 01, 2022/)).toBeInTheDocument();
+    expect(screen.getByText(/January 02, 2022/)).toBeInTheDocument();
   });
 
-  it('renders with relative time range (from now to specific time)', () => {
+  it('should render relative time range', () => {
     const timeRange = { from: 'now', to: 'now+15m' };
-    const changeTimeType = jest.fn();
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
       timeRange,
-      isAbsoluteTime: false,
-      changeTimeType,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
     });
 
     const timeRangeSwitch = screen.getByRole('switch');
 
     expect(timeRangeSwitch).not.toBeChecked();
 
-    const relativeTimeFromNowInfoText = screen.getByTestId('relativeTimeInfoTextFromNow');
+    expect(screen.getByText('now')).toBeInTheDocument();
+    expect(screen.getByText('in 15 minutes')).toBeInTheDocument();
+  });
+
+  it('should hide switch when timeRange is already absolute', () => {
+    const timeRange = { from: '2022-01-01T00:00:00.000Z', to: '2022-01-02T00:00:00.000Z' };
+    const onTimeTypeChange = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTimeByDefault: true,
+      onTimeTypeChange,
+    });
 
-    expect(relativeTimeFromNowInfoText).toBeInTheDocument();
+    const timeRangeSwitch = screen.queryByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeInTheDocument();
   });
 
-  it('renders with relative time range (from specific time to now)', () => {
-    const timeRange = { from: 'now-30m', to: 'now' };
-    const changeTimeType = jest.fn();
+  it('should render with mixed time range (absolute from, relative to)', () => {
+    const timeRange = { from: '2022-01-01T00:00:00.000Z', to: 'now' };
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
       timeRange,
-      isAbsoluteTime: false,
-      changeTimeType,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
     });
 
     const timeRangeSwitch = screen.getByRole('switch');
 
     expect(timeRangeSwitch).not.toBeChecked();
 
-    const relativeTimeToNowInfoText = screen.getByTestId('relativeTimeInfoTextToNow');
-
-    expect(relativeTimeToNowInfoText).toBeInTheDocument();
+    expect(screen.getByText(/January 01, 2022/)).toBeInTheDocument();
+    expect(screen.getByText('now')).toBeInTheDocument();
   });
 
-  it('renders with relative time range (between two relative times)', () => {
-    const timeRange = { from: 'now-30m', to: 'now-1m' };
-    const changeTimeType = jest.fn();
+  it('should render with mixed time range (relative from, absolute to)', () => {
+    const timeRange = { from: 'now-30m', to: '2022-01-01T00:00:00.000Z' };
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
       timeRange,
-      isAbsoluteTime: false,
-      changeTimeType,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
     });
 
     const timeRangeSwitch = screen.getByRole('switch');
 
     expect(timeRangeSwitch).not.toBeChecked();
 
-    const relativeTimeInfoText = screen.getByTestId('relativeTimeInfoTextDefault');
-
-    expect(relativeTimeInfoText).toBeInTheDocument();
+    expect(screen.getByText('30 minutes ago')).toBeInTheDocument();
+    expect(screen.getByText(/January 01, 2022/)).toBeInTheDocument();
   });
 
-  it('disables switch when timeRange is already absolute', () => {
-    const timeRange = { from: '2022-01-01T00:00:00.000Z', to: '2022-01-02T00:00:00.000Z' };
-    const changeTimeType = jest.fn();
-
-    jest.spyOn(timeUtils, 'isTimeRangeAbsoluteTime').mockReturnValue(true);
+  it('should render "now"', () => {
+    const timeRange = { from: 'now-30m', to: 'now' };
+    const onTimeTypeChange = jest.fn();
 
     renderComponent({
       timeRange,
-      isAbsoluteTime: false,
-      changeTimeType,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
     });
 
-    const timeRangeSwitch = screen.queryByRole('switch');
+    expect(screen.getByText('30 minutes ago')).toBeInTheDocument();
+    expect(screen.getByText('now')).toBeInTheDocument();
+  });
 
-    expect(timeRangeSwitch).not.toBeInTheDocument();
+  it('should handle plain "now" value correctly in mixed ranges', () => {
+    const timeRange = { from: '2025-11-10T14:17:51.794Z', to: 'now' };
+    const onTimeTypeChange = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTimeByDefault: false,
+      onTimeTypeChange,
+    });
+
+    expect(screen.getByText(/November 10, 2025/)).toBeInTheDocument();
+    expect(screen.getByText('now')).toBeInTheDocument();
   });
 });