[APM] Move APM feedback link to global Help popover (#30918) (#31627)

* [APM] Closes #29687 by removing the old APM feedback link from the datepicker
section and adding the link as custom content in the global help popover.

* remove noreferrer property for the feedback link

* [APM] updated feedback link text and added help link to migration assistant

* [APM] remove unused translations related to the old feedback link

x-pack/plugins/apm/public/components/app/GlobalHelpExtension/index.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiLink } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import chrome from 'ui/chrome';
+import url from 'url';
+import { px, units } from '../../../style/variables';
+
+const Container = styled.div`
+  margin: ${px(units.minus)} 0;
+`;
+
+export const GlobalHelpExtension: React.SFC = () => {
+  return (
+    <Fragment>
+      <Container>
+        <EuiLink
+          href="https://discuss.elastic.co/c/apm"
+          target="_blank"
+          rel="noopener"
+        >
+          {i18n.translate('xpack.apm.feedbackMenu.provideFeedbackTitle', {
+            defaultMessage: 'Provide feedback for APM'
+          })}
+        </EuiLink>
+      </Container>
+      <Container>
+        <EuiLink
+          href={url.format({
+            pathname: chrome.addBasePath('/app/kibana'),
+            hash: '/management/elasticsearch/upgrade_assistant'
+          })}
+        >
+          {i18n.translate('xpack.apm.helpMenu.migrationAssistantLink', {
+            defaultMessage: 'Migration assistant'
+          })}
+        </EuiLink>
+      </Container>
+    </Fragment>
+  );
+};

x-pack/plugins/apm/public/index.js

@@ -23,11 +23,20 @@ import { initTimepicker } from './utils/timepicker';
 import configureStore from './store/config/configureStore';
 import GlobalProgress from './components/app/Main/GlobalProgress';
 import LicenseChecker from './components/app/Main/LicenseChecker';
+import { GlobalHelpExtension } from './components/app/GlobalHelpExtension';
 
 import { history } from './components/shared/Links/url_helpers';
 
 import { I18nContext } from 'ui/i18n';
 
+// render APM feedback link in global help menu
+chrome.helpExtension.set(domElement => {
+  ReactDOM.render(<GlobalHelpExtension />, domElement);
+  return () => {
+    ReactDOM.unmountComponentAtNode(domElement);
+  };
+});
+
 chrome.setRootTemplate(template);
 const store = configureStore();
 

x-pack/plugins/apm/public/templates/feedback_menu.html

@@ -1,28 +0,0 @@
-<div style="padding: 16px;">
-    <div class="euiText">
-        <h2
-          i18n-id="xpack.apm.feedbackMenu.provideFeedbackTitle"
-          i18n-default-message="Provide APM feedback"
-        ></h2>
-        <p
-          i18n-id="xpack.apm.feedbackMenu.provideFeedbackDescription"
-          i18n-default-message="Please send us feedback by starting a new thread in our forum.{br}Comments and suggestions are much appreciated. Thanks!"
-          i18n-values="{ html_br: '<br>' }"
-        ></p>
-    </div>
-    <br>
-    <a
-      href="https://discuss.elastic.co/c/apm"
-      target="_blank"
-      class="euiLink euiButton euiButton--primary euiButton--small euiButton--fill"
-      rel="noopener noreferrer"
-    >
-        <span class="euiButton__content">
-            <i class="fa fa-external-link" aria-hidden="true" style="margin-right: 5px;"></i>
-            <span
-              i18n-id="xpack.apm.feedbackMenu.submitFeedbackButtonLabel"
-              i18n-default-message="Submit feedback"
-            ></span>
-        </span>
-    </a>
-</div>

x-pack/plugins/apm/public/utils/timepicker/index.js

@@ -37,48 +37,28 @@ export function initTimepicker(history, dispatch) {
 
     uiModules
       .get('app/apm', [])
-      .controller(
-        'TimePickerController',
-        ($scope, globalState, $rootScope, i18n) => {
-          // Add APM feedback menu
-          // TODO: move this somewhere else
-          $scope.topNavMenu = [];
-          $scope.topNavMenu.push({
-            key: 'APM feedback',
-            label: i18n('xpack.apm.topNav.apmFeedbackLabel', {
-              defaultMessage: 'APM feedback'
-            }),
-            description: i18n('xpack.apm.topNav.apmFeedbackDescription', {
-              defaultMessage: 'APM feedback'
-            }),
-            tooltip: i18n('xpack.apm.topNav.apmFeedbackTooltip', {
-              defaultMessage: 'Provide feedback on APM'
-            }),
-            template: require('../../templates/feedback_menu.html')
-          });
-
-          history.listen(() => {
-            updateRefreshRate(dispatch);
-            globalState.fetch(); // ensure global state is updated when url changes
-          });
-
-          // ensure that redux is notified after timefilter has updated
-          $scope.$listen(timefilter, 'timeUpdate', () =>
-            dispatch(updateTimePickerAction())
-          );
-
-          // ensure that timepicker updates when global state changes
-          registerTimefilterWithGlobalState(globalState, $rootScope);
-
-          timefilter.enableTimeRangeSelector();
-          timefilter.enableAutoRefreshSelector();
-
-          dispatch(updateTimePickerAction());
+      .controller('TimePickerController', ($scope, globalState, $rootScope) => {
+        history.listen(() => {
           updateRefreshRate(dispatch);
+          globalState.fetch(); // ensure global state is updated when url changes
+        });
 
-          Promise.all([waitForAngularReady]).then(resolve);
-        }
-      );
+        // ensure that redux is notified after timefilter has updated
+        $scope.$listen(timefilter, 'timeUpdate', () =>
+          dispatch(updateTimePickerAction())
+        );
+
+        // ensure that timepicker updates when global state changes
+        registerTimefilterWithGlobalState(globalState, $rootScope);
+
+        timefilter.enableTimeRangeSelector();
+        timefilter.enableAutoRefreshSelector();
+
+        dispatch(updateTimePickerAction());
+        updateRefreshRate(dispatch);
+
+        Promise.all([waitForAngularReady]).then(resolve);
+      });
   });
 }
 

x-pack/plugins/translations/translations/zh-CN.json

@@ -3356,9 +3356,7 @@
     "xpack.apm.errorsTable.noErrorsLabel": "未找到任何错误",
     "xpack.apm.errorsTable.occurrencesColumnLabel": "发生次数",
     "xpack.apm.errorsTable.unhandledLabel": "未处理",
-    "xpack.apm.feedbackMenu.provideFeedbackDescription": "请通过在我们论坛中开始新的线程来向我们反馈。{br}欢迎您的评论和建议。谢谢！",
     "xpack.apm.feedbackMenu.provideFeedbackTitle": "提供 APM 反馈",
-    "xpack.apm.feedbackMenu.submitFeedbackButtonLabel": "提交反馈",
     "xpack.apm.formatters.microsTimeUnitLabel": "μs",
     "xpack.apm.formatters.millisTimeUnitLabel": "ms",
     "xpack.apm.formatters.requestsPerMinLabel": "rpm",
@@ -3469,9 +3467,6 @@
     "xpack.apm.stacktraceTab.libraryFramesToogleButtonLabel": "{stackframesLength} 库框架",
     "xpack.apm.stacktraceTab.localVariablesToogleButtonLabel": "本地变量",
     "xpack.apm.stacktraceTab.noStacktraceAvailableLabel": "没有可用的堆栈追溯信息。",
-    "xpack.apm.topNav.apmFeedbackDescription": "APM 反馈",
-    "xpack.apm.topNav.apmFeedbackLabel": "APM 反馈",
-    "xpack.apm.topNav.apmFeedbackTooltip": "提供有关 APM 的反馈",
     "xpack.apm.tracesTable.avgResponseTimeColumnLabel": "平均响应时间",
     "xpack.apm.tracesTable.impactColumnLabel": "影响",
     "xpack.apm.tracesTable.nameColumnLabel": "名称",