Add Infrastructure and Logs Help content (#32118)

Remove old Feedback link component (removed with K7)

Add a HelpCenterContent component

Add HelpCenterContent to Infrastructure

Add HelpCenterContent to Logs

x-pack/plugins/infra/public/components/header_feedback_link.tsx

@@ -1,31 +0,0 @@
-/*
- * 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 { EuiHeaderSection, EuiLink } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import React from 'react';
-import styled from 'styled-components';
-
-interface InfraHeaderFeedbackLinkProps {
-  url: string;
-}
-
-export const InfraHeaderFeedbackLink: React.SFC<InfraHeaderFeedbackLinkProps> = ({ url }) => (
-  <VerticallyCenteredHeaderSection side="right">
-    <EuiLink href={url} target="_blank" rel="noopener">
-      <FormattedMessage
-        id="xpack.infra.headerFeedbackLink.feedbackText"
-        defaultMessage="Feedback"
-      />
-    </EuiLink>
-  </VerticallyCenteredHeaderSection>
-);
-
-const VerticallyCenteredHeaderSection = styled(EuiHeaderSection)`
-  padding-left: ${props => props.theme.eui.euiSizeS};
-  padding-right: ${props => props.theme.eui.euiSizeS};
-  align-items: center;
-`;

x-pack/plugins/infra/public/components/help_center_content.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 React from 'react';
+import ReactDOM from 'react-dom';
+import chrome from 'ui/chrome';
+
+interface HelpCenterContentProps {
+  feedbackLink: string;
+  feedbackLinkText: string;
+}
+
+const Content: React.FC<HelpCenterContentProps> = ({ feedbackLink, feedbackLinkText }) => (
+  <EuiLink href={feedbackLink} target="_blank" rel="noopener">
+    {feedbackLinkText}
+  </EuiLink>
+);
+
+export class HelpCenterContent extends React.Component<HelpCenterContentProps> {
+  public componentDidMount = () => {
+    chrome.helpExtension.set(domElement => {
+      ReactDOM.render(<Content {...this.props} />, domElement);
+      return () => {
+        ReactDOM.unmountComponentAtNode(domElement);
+      };
+    });
+  };
+
+  public render = () => {
+    return null;
+  };
+}

x-pack/plugins/infra/public/pages/home/index.tsx

@@ -14,6 +14,7 @@ import { HomeToolbar } from './toolbar';
 import { DocumentTitle } from '../../components/document_title';
 import { NoIndices } from '../../components/empty_states/no_indices';
 import { Header } from '../../components/header';
+import { HelpCenterContent } from '../../components/help_center_content';
 import { ColumnarPage } from '../../components/page';
 
 import { SourceConfigurationFlyout } from '../../components/source_configuration';
@@ -43,6 +44,13 @@ export const HomePage = injectI18n(
               defaultMessage: 'Infrastructure',
             })}
           />
+          <HelpCenterContent
+            feedbackLink="https://discuss.elastic.co/c/infrastructure"
+            feedbackLinkText={intl.formatMessage({
+              id: 'xpack.infra.infrastructure.infrastructureHelpContent.feedbackLinkText',
+              defaultMessage: 'Provide feedback for Infrastructure',
+            })}
+          />
           <Header
             breadcrumbs={[
               {

x-pack/plugins/infra/public/pages/logs/logs.tsx

@@ -15,6 +15,7 @@ import { DocumentTitle } from '../../components/document_title';
 import { NoIndices } from '../../components/empty_states/no_indices';
 
 import { Header } from '../../components/header';
+import { HelpCenterContent } from '../../components/help_center_content';
 import { LogFlyout } from '../../components/logging/log_flyout';
 import { ColumnarPage } from '../../components/page';
 
@@ -70,6 +71,13 @@ export const LogsPage = injectI18n(
                     defaultMessage: 'Logs',
                   })}
                 />
+                <HelpCenterContent
+                  feedbackLink="https://discuss.elastic.co/c/logs"
+                  feedbackLinkText={intl.formatMessage({
+                    id: 'xpack.infra.logsPage.logsHelpContent.feedbackLinkText',
+                    defaultMessage: 'Provide feedback for Logs',
+                  })}
+                />
                 <SourceConfigurationFlyout />
                 {isLoading ? (
                   <SourceLoadingPage />