From df12be881ede1837fbd1e9e44dd46cfc5442bf15 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Thu, 30 Jul 2020 19:01:46 -0700
Subject: [PATCH] [Metrics UI] Fix alert management to open without refresh
 (#73739)

* [Metrics UI] Fix alert management to open without refresh

* removing unecessary code

* Deleting unused imports

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../inventory/components/alert_dropdown.tsx   | 31 +++++--------------
 .../manage_alerts_context_menu_item.tsx       | 22 +++++++++++++
 .../components/alert_dropdown.tsx             | 31 +++++--------------
 3 files changed, 38 insertions(+), 46 deletions(-)
 create mode 100644 x-pack/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx

diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx
index 04642a01c15b4..ce0911666f0db 100644
--- a/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/inventory/components/alert_dropdown.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useAlertPrefillContext } from '../../../alerting/use_alert_prefill';
 import { AlertFlyout } from './alert_flyout';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { ManageAlertsContextMenuItem } from './manage_alerts_context_menu_item';
 
 export const InventoryAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
-  const kibana = useKibana();
 
   const { inventoryPrefill } = useAlertPrefillContext();
   const { nodeType, metric, filterQuery } = inventoryPrefill;
@@ -27,26 +26,12 @@ export const InventoryAlertDropdown = () => {
     setPopoverOpen(true);
   }, [setPopoverOpen]);
 
-  const menuItems = useMemo(() => {
-    return [
-      <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
-        <FormattedMessage
-          id="xpack.infra.alerting.createAlertButton"
-          defaultMessage="Create alert"
-        />
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        icon="tableOfContents"
-        key="manageLink"
-        href={kibana.services?.application?.getUrlForApp(
-          'management/insightsAndAlerting/triggersActions/alerts'
-        )}
-      >
-        <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
-      </EuiContextMenuItem>,
-    ];
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [kibana.services]);
+  const menuItems = [
+    <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
+      <FormattedMessage id="xpack.infra.alerting.createAlertButton" defaultMessage="Create alert" />
+    </EuiContextMenuItem>,
+    <ManageAlertsContextMenuItem />,
+  ];
 
   return (
     <>
diff --git a/x-pack/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx b/x-pack/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx
new file mode 100644
index 0000000000000..fc565aee37ff4
--- /dev/null
+++ b/x-pack/plugins/infra/public/alerting/inventory/components/manage_alerts_context_menu_item.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiContextMenuItem } from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useLinkProps } from '../../../hooks/use_link_props';
+
+export const ManageAlertsContextMenuItem = () => {
+  const manageAlertsLinkProps = useLinkProps({
+    app: 'management',
+    pathname: '/insightsAndAlerting/triggersActions/alerts',
+  });
+  return (
+    <EuiContextMenuItem icon="tableOfContents" key="manageLink" {...manageAlertsLinkProps}>
+      <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
+    </EuiContextMenuItem>
+  );
+};
diff --git a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
index 384a93e796dbe..dd61be0eee362 100644
--- a/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_threshold/components/alert_dropdown.tsx
@@ -4,17 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback } from 'react';
 import { EuiPopover, EuiButtonEmpty, EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { useAlertPrefillContext } from '../../use_alert_prefill';
 import { AlertFlyout } from './alert_flyout';
+import { ManageAlertsContextMenuItem } from '../../inventory/components/manage_alerts_context_menu_item';
 
 export const MetricsAlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
-  const kibana = useKibana();
 
   const { metricThresholdPrefill } = useAlertPrefillContext();
   const { groupBy, filterQuery, metrics } = metricThresholdPrefill;
@@ -27,26 +26,12 @@ export const MetricsAlertDropdown = () => {
     setPopoverOpen(true);
   }, [setPopoverOpen]);
 
-  const menuItems = useMemo(() => {
-    return [
-      <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
-        <FormattedMessage
-          id="xpack.infra.alerting.createAlertButton"
-          defaultMessage="Create alert"
-        />
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        icon="tableOfContents"
-        key="manageLink"
-        href={kibana.services?.application?.getUrlForApp(
-          'management/insightsAndAlerting/triggersActions/alerts'
-        )}
-      >
-        <FormattedMessage id="xpack.infra.alerting.manageAlerts" defaultMessage="Manage alerts" />
-      </EuiContextMenuItem>,
-    ];
-    /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  }, [kibana.services]);
+  const menuItems = [
+    <EuiContextMenuItem icon="bell" key="createLink" onClick={() => setFlyoutVisible(true)}>
+      <FormattedMessage id="xpack.infra.alerting.createAlertButton" defaultMessage="Create alert" />
+    </EuiContextMenuItem>,
+    <ManageAlertsContextMenuItem />,
+  ];
 
   return (
     <>