Refactor latest Host components to use useNavigateByRouterEventHandle…

…r hook
elastic · Apr 17, 2020 · 42a0af6 · 42a0af6
1 parent 535b196
commit 42a0af6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/...endpoint/public/applications/endpoint/view/hosts/details/components/flyout_sub_header.tsx b/...endpoint/public/applications/endpoint/view/hosts/details/components/flyout_sub_header.tsx
@@ -4,15 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, MouseEventHandler } from 'react';
 import { EuiFlyoutHeader, CommonProps, EuiButtonEmpty } from '@elastic/eui';
 import styled from 'styled-components';
 
 export type FlyoutSubHeaderProps = CommonProps & {
   children: React.ReactNode;
   backButton?: {
     title: string;
-    onClick: (event: React.MouseEvent) => void;
+    onClick: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     href?: string;
   };
 };

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/host_details.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/host_details.tsx
@@ -16,13 +16,13 @@ import {
 import React, { memo, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { useHistory } from 'react-router-dom';
 import { HostMetadata } from '../../../../../../common/types';
 import { FormattedDateAndTime } from '../../formatted_date_time';
 import { LinkToApp } from '../../components/link_to_app';
 import { useHostListSelector, useHostLogsUrl } from '../hooks';
 import { urlFromQueryParams } from '../url_from_query_params';
 import { uiQueryParams } from '../../../store/hosts/selectors';
+import { useNavigateByRouterEventHandler } from '../../hooks/use_navigate_by_router_event_handler';
 
 const HostIds = styled(EuiListGroupItem)`
   margin-top: 0;
@@ -34,7 +34,6 @@ const HostIds = styled(EuiListGroupItem)`
 export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
   const { appId, appPath, url } = useHostLogsUrl(details.host.id);
   const queryParams = useHostListSelector(uiQueryParams);
-  const history = useHistory();
   const detailsResultsUpper = useMemo(() => {
     return [
       {
@@ -65,6 +64,7 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
       show: 'policy_response',
     });
   }, [details.host.id, queryParams]);
+  const policyStatusClickHandler = useNavigateByRouterEventHandler(policyResponseUri);
 
   const detailsResultsLower = useMemo(() => {
     return [
@@ -84,10 +84,7 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
             <EuiLink
               data-test-subj="policyStatusValue"
               href={'?' + policyResponseUri.search}
-              onClick={(ev: React.MouseEvent) => {
-                ev.preventDefault();
-                history.push(policyResponseUri);
-              }}
+              onClick={policyStatusClickHandler}
             >
               <FormattedMessage
                 id="xpack.endpoint.host.details.policyStatus.success"
@@ -127,8 +124,8 @@ export const HostDetails = memo(({ details }: { details: HostMetadata }) => {
     details.endpoint.policy.id,
     details.host.hostname,
     details.host.ip,
-    history,
-    policyResponseUri,
+    policyResponseUri.search,
+    policyStatusClickHandler,
   ]);
 
   return (

diff --git a/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/index.tsx b/x-pack/plugins/endpoint/public/applications/endpoint/view/hosts/details/index.tsx
@@ -24,6 +24,7 @@ import { HostDetails } from './host_details';
 import { PolicyResponse } from './policy_response';
 import { HostMetadata } from '../../../../../../common/types';
 import { FlyoutSubHeader, FlyoutSubHeaderProps } from './components/flyout_sub_header';
+import { useNavigateByRouterEventHandler } from '../../hooks/use_navigate_by_router_event_handler';
 
 export const HostDetailsFlyout = memo(() => {
   const history = useHistory();
@@ -92,24 +93,25 @@ export const HostDetailsFlyout = memo(() => {
 const PolicyResponseFlyoutPanel = memo<{
   hostMeta: HostMetadata;
 }>(({ hostMeta }) => {
-  const history = useHistory();
   const { show, ...queryParams } = useHostListSelector(uiQueryParams);
+  const detailsUri = useMemo(
+    () =>
+      urlFromQueryParams({
+        ...queryParams,
+        selected_host: hostMeta.host.id,
+      }),
+    [hostMeta.host.id, queryParams]
+  );
+  const backToDetailsClickHandler = useNavigateByRouterEventHandler(detailsUri);
   const backButtonProp = useMemo((): FlyoutSubHeaderProps['backButton'] => {
-    const detailsUri = urlFromQueryParams({
-      ...queryParams,
-      selected_host: hostMeta.host.id,
-    });
     return {
       title: i18n.translate('xpack.endpoint.host.policyResponse.backLinkTitle', {
         defaultMessage: 'Endpoint Details',
       }),
       href: '?' + detailsUri.search,
-      onClick: ev => {
-        ev.preventDefault();
-        history.push(detailsUri);
-      },
+      onClick: backToDetailsClickHandler,
     };
-  }, [history, hostMeta.host.id, queryParams]);
+  }, [backToDetailsClickHandler, detailsUri.search]);
 
   return (
     <>