Add "Get Help" and "Kibana Feedback" links to the help popover (#49797) (#50234)

* Initial work

* Move links to constants

* Update UI based on design and copy

* Apply PR feedback

* Remove unused translations

* Apply requested changes

* Remove some icons

src/core/public/chrome/chrome_service.tsx

@@ -125,6 +125,7 @@ export class ChromeService {
           <LoadingIndicator loadingCount$={http.getLoadingCount$()} />
 
           <Header
+            isCloudEnabled={injectedMetadata.getInjectedVar('isCloudEnabled') as boolean}
             application={application}
             appTitle$={appTitle$.pipe(takeUntil(this.stop$))}
             badge$={badge$.pipe(takeUntil(this.stop$))}

src/core/public/chrome/constants.ts

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const ELASTIC_SUPPORT_LINK = 'https://support.elastic.co/';
+export const KIBANA_FEEDBACK_LINK = 'https://www.elastic.co/kibana/feedback';
+export const KIBANA_ASK_ELASTIC_LINK = 'https://www.elastic.co/kibana/ask-elastic';
+export const GITHUB_CREATE_ISSUE_LINK = 'https://github.com/elastic/kibana/issues/new/choose';

src/core/public/chrome/ui/header/header.tsx

@@ -179,6 +179,7 @@ interface Props {
   basePath: HttpStart['basePath'];
   isLocked?: boolean;
   onIsLockedUpdate?: (isLocked: boolean) => void;
+  isCloudEnabled: boolean;
 }
 
 interface State {
@@ -296,6 +297,7 @@ class HeaderUI extends Component<Props, State> {
       kibanaVersion,
       onIsLockedUpdate,
       legacyMode,
+      isCloudEnabled,
     } = this.props;
     const {
       appTitle,
@@ -394,7 +396,9 @@ class HeaderUI extends Component<Props, State> {
 
           <EuiHeaderSection side="right">
             <EuiHeaderSectionItem>
-              <HeaderHelpMenu {...{ helpExtension$, kibanaDocLink, kibanaVersion }} />
+              <HeaderHelpMenu
+                {...{ isCloudEnabled, helpExtension$, kibanaDocLink, kibanaVersion }}
+              />
             </EuiHeaderSectionItem>
 
             <HeaderNavControls side="right" navControls={navControlsRight} />

src/core/public/chrome/ui/header/header_help_menu.tsx

@@ -17,30 +17,29 @@
  * under the License.
  */
 
+import * as Rx from 'rxjs';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Component, Fragment } from 'react';
-import * as Rx from 'rxjs';
-
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import {
-  // TODO: add type annotations
-  // @ts-ignore
-  EuiButton,
-  // @ts-ignore
+  EuiButtonEmpty,
   EuiFlexGroup,
-  // @ts-ignore
   EuiFlexItem,
-  // @ts-ignore
   EuiHeaderSectionItemButton,
   EuiIcon,
   EuiPopover,
   EuiPopoverTitle,
   EuiSpacer,
-  EuiText,
 } from '@elastic/eui';
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 
 import { HeaderExtension } from './header_extension';
 import { ChromeHelpExtension } from '../../chrome_service';
+import {
+  ELASTIC_SUPPORT_LINK,
+  GITHUB_CREATE_ISSUE_LINK,
+  KIBANA_ASK_ELASTIC_LINK,
+  KIBANA_FEEDBACK_LINK,
+} from '../../constants';
 
 interface Props {
   helpExtension$: Rx.Observable<ChromeHelpExtension>;
@@ -48,6 +47,7 @@ interface Props {
   kibanaVersion: string;
   useDefaultContent?: boolean;
   kibanaDocLink: string;
+  isCloudEnabled: boolean;
 }
 
 interface State {
@@ -90,23 +90,50 @@ class HeaderHelpMenuUI extends Component<Props, State> {
 
     const defaultContent = useDefaultContent ? (
       <Fragment>
-        <EuiText size="s">
-          <p>
-            <FormattedMessage
-              id="core.ui.chrome.headerGlobalNav.helpMenuHelpDescription"
-              defaultMessage="Get updates, information, and answers in our documentation."
-            />
-          </p>
-        </EuiText>
-
-        <EuiSpacer />
-
-        <EuiButton iconType="popout" href={kibanaDocLink} target="_blank">
+        <EuiButtonEmpty href={kibanaDocLink} target="_blank" size="xs" flush="left">
           <FormattedMessage
-            id="core.ui.chrome.headerGlobalNav.helpMenuGoToDocumentation"
-            defaultMessage="Go to documentation"
+            id="core.ui.chrome.headerGlobalNav.helpMenuKibanaDocumentationTitle"
+            defaultMessage="Kibana documentation"
           />
-        </EuiButton>
+        </EuiButtonEmpty>
+
+        <EuiSpacer size="xs" />
+
+        <EuiButtonEmpty
+          href={this.props.isCloudEnabled ? ELASTIC_SUPPORT_LINK : KIBANA_ASK_ELASTIC_LINK}
+          target="_blank"
+          size="xs"
+          flush="left"
+        >
+          <FormattedMessage
+            id="core.ui.chrome.headerGlobalNav.helpMenuAskElasticTitle"
+            defaultMessage="Ask Elastic"
+          />
+        </EuiButtonEmpty>
+
+        <EuiSpacer size="xs" />
+
+        <EuiButtonEmpty href={KIBANA_FEEDBACK_LINK} target="_blank" size="xs" flush="left">
+          <FormattedMessage
+            id="core.ui.chrome.headerGlobalNav.helpMenuGiveFeedbackTitle"
+            defaultMessage="Give feedback"
+          />
+        </EuiButtonEmpty>
+
+        <EuiSpacer size="xs" />
+
+        <EuiButtonEmpty
+          href={GITHUB_CREATE_ISSUE_LINK}
+          target="_blank"
+          size="xs"
+          iconType="logoGithub"
+          flush="left"
+        >
+          <FormattedMessage
+            id="core.ui.chrome.headerGlobalNav.helpMenuOpenGitHubIssueTitle"
+            defaultMessage="Open an issue in GitHub"
+          />
+        </EuiButtonEmpty>
       </Fragment>
     ) : null;
 

x-pack/plugins/translations/translations/ja-JP.json

@@ -601,8 +601,6 @@
     "core.ui.overlays.banner.closeButtonLabel": "閉じる",
     "core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel": "ホームページに移動",
     "core.ui.chrome.headerGlobalNav.helpMenuButtonAriaLabel": "ヘルプメニュー",
-    "core.ui.chrome.headerGlobalNav.helpMenuGoToDocumentation": "ドキュメントに移動",
-    "core.ui.chrome.headerGlobalNav.helpMenuHelpDescription": "不明な点、アップデートなどの情報はドキュメントをご覧ください。",
     "core.ui.chrome.headerGlobalNav.helpMenuTitle": "ヘルプ",
     "core.ui.chrome.headerGlobalNav.helpMenuVersion": "v {version}",
     "core.ui.chrome.sideGlobalNav.viewRecentItemsFlyoutTitle": "最近のアイテム",

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

@@ -602,8 +602,6 @@
     "core.ui.overlays.banner.closeButtonLabel": "关闭",
     "core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel": "前往主页",
     "core.ui.chrome.headerGlobalNav.helpMenuButtonAriaLabel": "帮助菜单",
-    "core.ui.chrome.headerGlobalNav.helpMenuGoToDocumentation": "前往文档",
-    "core.ui.chrome.headerGlobalNav.helpMenuHelpDescription": "在我们的文档中获取更新、信息以及答案。",
     "core.ui.chrome.headerGlobalNav.helpMenuTitle": "帮助",
     "core.ui.chrome.headerGlobalNav.helpMenuVersion": "v {version}",
     "core.ui.chrome.sideGlobalNav.viewRecentItemsFlyoutTitle": "最近项",