fix addd to case relative (elastic#117487)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
kibanamachine · Nov 10, 2021 · fff6663 · fff6663
1 parent e8b538b
commit fff6663
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/...vability/public/components/shared/exploratory_view/components/action_menu/action_menu.tsx b/...vability/public/components/shared/exploratory_view/components/action_menu/action_menu.tsx
@@ -36,9 +36,11 @@ export function ExpViewActionMenuContent({
         responsive={false}
         style={{ paddingRight: 20 }}
       >
-        <EuiFlexItem grow={false}>
-          <AddToCaseAction lensAttributes={lensAttributes} timeRange={timeRange} />
-        </EuiFlexItem>
+        {timeRange && (
+          <EuiFlexItem grow={false}>
+            <AddToCaseAction lensAttributes={lensAttributes} timeRange={timeRange} />
+          </EuiFlexItem>
+        )}
         <EuiFlexItem grow={false}>
           <EuiButton
             iconType="lensApp"

diff --git a/...bservability/public/components/shared/exploratory_view/header/add_to_case_action.test.tsx b/...bservability/public/components/shared/exploratory_view/header/add_to_case_action.test.tsx
@@ -9,6 +9,9 @@ import React from 'react';
 import { render } from '../rtl_helpers';
 import { fireEvent } from '@testing-library/dom';
 import { AddToCaseAction } from './add_to_case_action';
+import * as useCaseHook from '../hooks/use_add_to_case';
+import * as datePicker from '../components/date_range_picker';
+import moment from 'moment';
 
 describe('AddToCaseAction', function () {
   it('should render properly', async function () {
@@ -21,6 +24,31 @@ describe('AddToCaseAction', function () {
     expect(await findByText('Add to case')).toBeInTheDocument();
   });
 
+  it('should parse relative data to the useAddToCase hook', async function () {
+    const useAddToCaseHook = jest.spyOn(useCaseHook, 'useAddToCase');
+    jest.spyOn(datePicker, 'parseRelativeDate').mockReturnValue(moment('2021-11-10T10:52:06.091Z'));
+
+    const { findByText } = render(
+      <AddToCaseAction
+        lensAttributes={{ title: 'Performance distribution' } as any}
+        timeRange={{ to: 'now', from: 'now-5m' }}
+      />
+    );
+    expect(await findByText('Add to case')).toBeInTheDocument();
+
+    expect(useAddToCaseHook).toHaveBeenCalledWith(
+      expect.objectContaining({
+        lensAttributes: {
+          title: 'Performance distribution',
+        },
+        timeRange: {
+          from: '2021-11-10T10:52:06.091Z',
+          to: '2021-11-10T10:52:06.091Z',
+        },
+      })
+    );
+  });
+
   it('should be able to click add to case button', async function () {
     const initSeries = {
       data: [

diff --git a/...ins/observability/public/components/shared/exploratory_view/header/add_to_case_action.tsx b/...ins/observability/public/components/shared/exploratory_view/header/add_to_case_action.tsx
@@ -15,9 +15,10 @@ import { TypedLensByValueInput } from '../../../../../../lens/public';
 import { useAddToCase } from '../hooks/use_add_to_case';
 import { Case, SubCase } from '../../../../../../cases/common';
 import { observabilityFeatureId } from '../../../../../common';
+import { parseRelativeDate } from '../components/date_range_picker';
 
 export interface AddToCaseProps {
-  timeRange?: { from: string; to: string };
+  timeRange: { from: string; to: string };
   lensAttributes: TypedLensByValueInput['attributes'] | null;
 }
 
@@ -31,11 +32,14 @@ export function AddToCaseAction({ lensAttributes, timeRange }: AddToCaseProps) {
     [http.basePath]
   );
 
+  const absoluteFromDate = parseRelativeDate(timeRange.from);
+  const absoluteToDate = parseRelativeDate(timeRange.to, { roundUp: true });
+
   const { createCaseUrl, goToCreateCase, onCaseClicked, isCasesOpen, setIsCasesOpen, isSaving } =
     useAddToCase({
       lensAttributes,
       getToastText,
-      timeRange,
+      timeRange: { from: absoluteFromDate.toISOString(), to: absoluteToDate.toISOString() },
     });
 
   const getAllCasesSelectorModalProps: AllCasesSelectorModalProps = {