update edit link

elastic · Apr 4, 2023 · 7c70a98 · 7c70a98
1 parent 4d2a572
commit 7c70a98
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 53 deletions.
diff --git a/x-pack/plugins/security_solution/public/dashboards/components/edit_dashboard_button.tsx b/x-pack/plugins/security_solution/public/dashboards/components/edit_dashboard_button.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 import type { Query, Filter } from '@kbn/es-query';
+import { EuiButton } from '@elastic/eui';
 import { useDashboardAppLink } from '../hooks/use_dashboard_app_link';
 import { EDIT_DASHBOARD_BUTTON_TITLE } from '../pages/details/translations';
-import { useKibana } from '../../common/lib/kibana/kibana_react';
-import { LinkButton } from '../../common/components/links';
+import { useKibana } from '../../common/lib/kibana';
 
 export interface EditDashboardButtonComponentProps {
   dashboardExists: boolean;
@@ -38,7 +38,7 @@ const EditDashboardButtonComponent: React.FC<EditDashboardButtonComponentProps>
     services: { uiSettings },
   } = useKibana();
 
-  const editDashboardUrl = useDashboardAppLink({
+  const { onClick } = useDashboardAppLink({
     query,
     filters,
     timeRange,
@@ -47,15 +47,15 @@ const EditDashboardButtonComponent: React.FC<EditDashboardButtonComponentProps>
   });
 
   return showWriteControls && dashboardExists ? (
-    <LinkButton
+    <EuiButton
       color="primary"
       fill
       iconType="pencil"
-      href={editDashboardUrl}
+      onClick={onClick}
       data-test-subj="dashboardEditButton"
     >
       {EDIT_DASHBOARD_BUTTON_TITLE}
-    </LinkButton>
+    </EuiButton>
   ) : null;
 };
 

diff --git a/x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_app_link.test.tsx b/x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_app_link.test.tsx
@@ -6,20 +6,17 @@
  */
 
 import { renderHook } from '@testing-library/react-hooks';
+import { useNavigation } from '../../common/lib/kibana';
 import { TestProviders } from '../../common/mock';
 import type { UseDashboardAppLinkProps } from './use_dashboard_app_link';
 import { useDashboardAppLink } from './use_dashboard_app_link';
 
 jest.mock('../../common/lib/kibana', () => ({
-  useAppUrl: jest.fn().mockReturnValue({
-    getAppUrl: jest
-      .fn()
-      .mockReturnValue('/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb'),
-  }),
+  useNavigation: jest.fn(),
 }));
 
 describe('useDashboardAppLink', () => {
-  const mockGetKbnUrlStateStorage = jest.fn();
+  const mockNavigateTo = jest.fn();
   const filters = [
     {
       meta: {
@@ -59,32 +56,24 @@ describe('useDashboardAppLink', () => {
       get: jest.fn(),
     },
     savedObjectId: 'e2937420-c8ba-11ed-a7eb-3d08ee4d53cb',
-    kbnUrlStateStorage: {
-      get: mockGetKbnUrlStateStorage,
-      set: jest.fn(),
-    },
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    (useNavigation as jest.Mock).mockReturnValue({
+      getAppUrl: jest
+        .fn()
+        .mockReturnValue('/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb'),
+      navigateTo: mockNavigateTo,
+    });
   });
   it('create links to Dashboard app - with filters', () => {
     const testProps = { ...props, filters } as unknown as UseDashboardAppLinkProps;
-    mockGetKbnUrlStateStorage.mockReturnValue({
-      filters,
-      query: {
-        language: 'kuery',
-        query: '',
-      },
-      time: {
-        from: 'now/d',
-        to: 'now/d',
-      },
-    });
+
     const { result } = renderHook(() => useDashboardAppLink(testProps), {
       wrapper: TestProviders,
     });
-    expect(result.current).toMatchInlineSnapshot(
+    expect(result.current.href).toMatchInlineSnapshot(
       `"/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb?_g=(filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:security-solution-default,key:event.action,negate:!f,params:(query:host),type:phrase),query:(match_phrase:(event.action:host)))),query:(language:kuery,query:''),time:(from:now%2Fd,to:now%2Fd))"`
     );
   });
@@ -97,19 +86,9 @@ describe('useDashboardAppLink', () => {
         query: '@timestamp : *',
       },
     } as unknown as UseDashboardAppLinkProps;
-    mockGetKbnUrlStateStorage.mockReturnValue({
-      filters: [],
-      query: {
-        language: 'kuery',
-        query: '@timestamp: *',
-      },
-      time: {
-        from: 'now/d',
-        to: 'now/d',
-      },
-    });
+
     const { result } = renderHook(() => useDashboardAppLink(testProps), { wrapper: TestProviders });
-    expect(result.current).toMatchInlineSnapshot(
+    expect(result.current.href).toMatchInlineSnapshot(
       `"/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb?_g=(filters:!(),query:(language:kuery,query:'@timestamp%20:%20*'),time:(from:now%2Fd,to:now%2Fd))"`
     );
   });
@@ -122,20 +101,33 @@ describe('useDashboardAppLink', () => {
         to: '2023-03-24T23:59:59.999Z',
       },
     } as unknown as UseDashboardAppLinkProps;
-    mockGetKbnUrlStateStorage.mockReturnValue({
-      filters: [],
-      query: {
-        language: 'kuery',
-        query: '',
-      },
-      time: {
+
+    const { result } = renderHook(() => useDashboardAppLink(testProps), { wrapper: TestProviders });
+    expect(result.current.href).toMatchInlineSnapshot(
+      `"/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb?_g=(filters:!(),query:(language:kuery,query:''),time:(from:'2023-03-24T00:00:00.000Z',to:'2023-03-24T23:59:59.999Z'))"`
+    );
+  });
+
+  it('navigate to dashboard app with preserved states', () => {
+    const testProps = {
+      ...props,
+      timeRange: {
         from: '2023-03-24T00:00:00.000Z',
         to: '2023-03-24T23:59:59.999Z',
       },
+    } as unknown as UseDashboardAppLinkProps;
+
+    const { result } = renderHook(() => useDashboardAppLink(testProps), {
+      wrapper: TestProviders,
     });
-    const { result } = renderHook(() => useDashboardAppLink(testProps), { wrapper: TestProviders });
-    expect(result.current).toMatchInlineSnapshot(
-      `"/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb?_g=(filters:!(),query:(language:kuery,query:''),time:(from:'2023-03-24T00:00:00.000Z',to:'2023-03-24T23:59:59.999Z'))"`
+    result.current.onClick({
+      preventDefault: jest.fn(),
+    } as unknown as React.MouseEvent<HTMLButtonElement>);
+
+    expect(mockNavigateTo).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: "/app/dashboards#/view/e2937420-c8ba-11ed-a7eb-3d08ee4d53cb?_g=(filters:!(),query:(language:kuery,query:''),time:(from:'2023-03-24T00:00:00.000Z',to:'2023-03-24T23:59:59.999Z'))",
+      })
     );
   });
 });
diff --git a/x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_app_link.tsx b/x-pack/plugins/security_solution/public/dashboards/hooks/use_dashboard_app_link.tsx
@@ -10,7 +10,7 @@ import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import type { IUiSettingsClient } from '@kbn/core/public';
 import { useMemo } from 'react';
 import type { Filter, Query } from '@kbn/es-query';
-import { useAppUrl } from '../../common/lib/kibana';
+import { useNavigation } from '../../common/lib/kibana';
 
 const GLOBAL_STATE_STORAGE_KEY = '_g';
 
@@ -34,7 +34,7 @@ export const useDashboardAppLink = ({
   uiSettings,
   savedObjectId,
 }: UseDashboardAppLinkProps) => {
-  const { getAppUrl } = useAppUrl();
+  const { navigateTo, getAppUrl } = useNavigation();
   const useHash = uiSettings.get('state:storeInSessionStorage');
 
   let editDashboardUrl = useMemo(
@@ -56,5 +56,16 @@ export const useDashboardAppLink = ({
     { useHash, storeInHashQuery: true },
     editDashboardUrl
   );
-  return editDashboardUrl;
+
+  const editDashboardLinkProps = useMemo(
+    () => ({
+      onClick: (ev: React.MouseEvent<HTMLButtonElement>) => {
+        ev.preventDefault();
+        navigateTo({ url: editDashboardUrl });
+      },
+      href: editDashboardUrl,
+    }),
+    [editDashboardUrl, navigateTo]
+  );
+  return editDashboardLinkProps;
 };