[8.19] [Sharing URLs] Add the ability to switch between relative and absolute time range (#218056)

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

@@ -19,6 +19,7 @@ import { i18n } from '@kbn/i18n';
 import { getStateFromKbnUrl, setStateToKbnUrl, unhashUrl } from '@kbn/kibana-utils-plugin/public';
 
 import { FormattedMessage } from '@kbn/i18n-react';
+import { LocatorPublic } from '@kbn/share-plugin/common';
 import { convertPanelMapToPanelsArray } from '../../../../common/lib/dashboard_panel_converters';
 import { DashboardPanelMap } from '../../../../common';
 import {
@@ -272,5 +273,11 @@ export function ShowShareModal({
       ? shareModalStrings.getSnapshotShareWarning()
       : undefined,
     toasts: coreServices.notifications.toasts,
+    shareableUrlLocatorParams: {
+      locator: shareService.url.locators.get(
+        DASHBOARD_APP_LOCATOR
+      ) as LocatorPublic<DashboardLocatorParams>,
+      params: locatorParams,
+    },
   });
 }

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

@@ -108,7 +108,7 @@ const LinkTabContent: ILinkTab['content'] = ({ state, dispatch }) => {
 export const linkTab: ILinkTab = {
   id: 'link',
   name: i18n.translate('share.contextMenu.permalinksTab', {
-    defaultMessage: 'Links',
+    defaultMessage: 'Link',
   }),
   description: i18n.translate('share.dashboard.link.description', {
     defaultMessage: 'Share a direct link to this search.',

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

@@ -14,12 +14,13 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiSpacer,
-  EuiText,
+  EuiSwitchEvent,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useCallback, useState, useRef, useEffect } from 'react';
+import { TimeTypeSection } from './time_type_section';
 import type { IShareContext, ShareContextObjectTypeConfig } from '../../context';
 
 type LinkProps = Pick<
@@ -53,9 +54,11 @@ export const LinkContent = ({
   const [snapshotUrl, setSnapshotUrl] = useState<string>('');
   const [isTextCopied, setTextCopied] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isAbsoluteTime, setIsAbsoluteTime] = useState(true);
   const urlParamsRef = useRef<UrlParams | undefined>(undefined);
   const urlToCopy = useRef<string | undefined>(undefined);
   const copiedTextToolTipCleanupIdRef = useRef<ReturnType<typeof setTimeout>>();
+  const timeRange = shareableUrlLocatorParams?.params?.timeRange;
 
   const getUrlWithUpdatedParams = useCallback((tempUrl: string): string => {
     const urlWithUpdatedParams = urlParamsRef.current
@@ -83,12 +86,15 @@ export const LinkContent = ({
     const shortUrlService = urlService.shortUrls.get(null);
 
     if (shareableUrlLocatorParams) {
-      const shortUrl = await shortUrlService.createWithLocator(shareableUrlLocatorParams);
+      const shortUrl = await shortUrlService.createWithLocator(
+        shareableUrlLocatorParams,
+        isAbsoluteTime
+      );
       return shortUrl.locator.getUrl(shortUrl.params, { absolute: true });
     } else {
-      return (await shortUrlService.createFromLongUrl(snapshotUrl)).url;
+      return (await shortUrlService.createFromLongUrl(snapshotUrl, isAbsoluteTime)).url;
     }
-  }, [shareableUrlLocatorParams, urlService.shortUrls, snapshotUrl]);
+  }, [shareableUrlLocatorParams, urlService, snapshotUrl, isAbsoluteTime]);
 
   const copyUrlHelper = useCallback(async () => {
     setIsLoading(true);
@@ -117,17 +123,21 @@ export const LinkContent = ({
   }, [snapshotUrl, delegatedShareUrlHandler, allowShortUrl, createShortUrl]);
 
   const { draftModeCallOut: DraftModeCallout } = objectConfig;
+  const changeTimeType = (e: EuiSwitchEvent) => {
+    setIsAbsoluteTime(e.target.checked);
+    if (urlToCopy?.current && e.target.checked !== isAbsoluteTime) {
+      urlToCopy.current = undefined;
+    }
+  };
 
   return (
     <>
       <EuiForm>
-        <EuiText size="s">
-          <FormattedMessage
-            id="share.link.helpText"
-            defaultMessage="Share a direct link to this {objectType}."
-            values={{ objectType }}
-          />
-        </EuiText>
+        <TimeTypeSection
+          timeRange={timeRange}
+          isAbsoluteTime={isAbsoluteTime}
+          changeTimeType={changeTimeType}
+        />
         {isDirty && DraftModeCallout && (
           <>
             <EuiSpacer size="m" />

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

@@ -0,0 +1,146 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { ComponentProps } 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(
+    <IntlProvider locale="en">
+      <TimeTypeSection {...props} />
+    </IntlProvider>
+  );
+};
+
+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();
+
+    renderComponent({
+      isAbsoluteTime: false,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.queryByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeInTheDocument();
+  });
+
+  it('renders with absolute time range', () => {
+    const timeRange = { from: '2022-01-01T00:00:00.000Z', to: '2022-01-02T00:00:00.000Z' };
+    const changeTimeType = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTime: true,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.getByRole('switch');
+
+    expect(timeRangeSwitch).toBeChecked();
+
+    const absoluteTimeInfoText = screen.getByTestId('absoluteTimeInfoText');
+
+    expect(absoluteTimeInfoText).toBeInTheDocument();
+  });
+
+  it('renders with relative time range (from now to specific time)', () => {
+    const timeRange = { from: 'now', to: 'now+15m' };
+    const changeTimeType = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTime: false,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.getByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeChecked();
+
+    const relativeTimeFromNowInfoText = screen.getByTestId('relativeTimeInfoTextFromNow');
+
+    expect(relativeTimeFromNowInfoText).toBeInTheDocument();
+  });
+
+  it('renders with relative time range (from specific time to now)', () => {
+    const timeRange = { from: 'now-30m', to: 'now' };
+    const changeTimeType = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTime: false,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.getByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeChecked();
+
+    const relativeTimeToNowInfoText = screen.getByTestId('relativeTimeInfoTextToNow');
+
+    expect(relativeTimeToNowInfoText).toBeInTheDocument();
+  });
+
+  it('renders with relative time range (between two relative times)', () => {
+    const timeRange = { from: 'now-30m', to: 'now-1m' };
+    const changeTimeType = jest.fn();
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTime: false,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.getByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeChecked();
+
+    const relativeTimeInfoText = screen.getByTestId('relativeTimeInfoTextDefault');
+
+    expect(relativeTimeInfoText).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);
+
+    renderComponent({
+      timeRange,
+      isAbsoluteTime: false,
+      changeTimeType,
+    });
+
+    const timeRangeSwitch = screen.queryByRole('switch');
+
+    expect(timeRangeSwitch).not.toBeInTheDocument();
+  });
+});