[Uptime] Add link to Uptime documentation from header help menu (#40645) (#40991)

* Add link to Uptime documentation from header help menu.

* Use parameterized docs URL generation.
This commit is contained in:
Justin Kambic 2019-07-12 18:09:45 -04:00 committed by GitHub
parent d453b7858f
commit 00e68eab64
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 92 additions and 16 deletions

View file

@ -0,0 +1,40 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renderUptimeKibanaGlobalHelp renders links with expected urls 1`] = `
<EuiFlexGroup
direction="column"
>
<EuiFlexItem>
<EuiLink
aria-label="Go to Uptime documentation"
color="primary"
href="https://elastic.co/guide/en/kibana/master/xpack-uptime.html"
target="_blank"
type="button"
>
<FormattedMessage
defaultMessage="Uptime Docs"
description="The link will navigate users to the Uptime UI documentation pages."
id="xpack.uptime.header.documentationLinkText"
values={Object {}}
/>
</EuiLink>
</EuiFlexItem>
<EuiFlexItem>
<EuiLink
aria-label="Go to our discuss page"
color="primary"
href="https://discuss.elastic.co/c/uptime"
target="_blank"
type="button"
>
<FormattedMessage
defaultMessage="Give Uptime feedback"
description="The link is to a support form called 'Discuss', where users can submit feedback."
id="xpack.uptime.header.helpLinkText"
values={Object {}}
/>
</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
`;

View file

@ -0,0 +1,13 @@
/*
* 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 { renderUptimeKibanaGlobalHelp } from '../kibana_global_help';
describe('renderUptimeKibanaGlobalHelp', () => {
it('renders links with expected urls', () => {
expect(renderUptimeKibanaGlobalHelp('https://elastic.co/', 'master')).toMatchSnapshot();
});
});

View file

@ -7,6 +7,7 @@
import ReactDOM from 'react-dom';
import { unmountComponentAtNode } from 'react-dom';
import chrome from 'ui/chrome';
import { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } from 'ui/documentation_links';
import { PLUGIN, INTEGRATED_SOLUTIONS } from '../../../../common/constants';
import { UMBreadcrumb } from '../../../breadcrumbs';
import { BootstrapUptimeApp, UMFrameworkAdapter } from '../../lib';
@ -83,7 +84,10 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
const renderGlobalHelpControls = () =>
// render Uptime feedback link in global help menu
chrome.helpExtension.set((element: HTMLDivElement) => {
ReactDOM.render(renderUptimeKibanaGlobalHelp(), element);
ReactDOM.render(
renderUptimeKibanaGlobalHelp(ELASTIC_WEBSITE_URL, DOC_LINK_VERSION),
element
);
return () => ReactDOM.unmountComponentAtNode(element);
});

View file

@ -4,23 +4,42 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiLink } from '@elastic/eui';
import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
export const renderUptimeKibanaGlobalHelp = () => (
<EuiLink
aria-label={i18n.translate('xpack.uptime.header.helpLinkAriaLabel', {
defaultMessage: 'Go to our discuss page',
})}
href="https://discuss.elastic.co/c/uptime"
target="_blank"
>
<FormattedMessage
id="xpack.uptime.header.helpLinkText"
defaultMessage="Give Uptime feedback"
description="The link is to a support form called 'Discuss', where users can submit feedback."
/>
</EuiLink>
export const renderUptimeKibanaGlobalHelp = (docsSiteUrl: string, docLinkVersion: string) => (
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiLink
aria-label={i18n.translate('xpack.uptime.header.docsLinkAriaLabel', {
defaultMessage: 'Go to Uptime documentation',
})}
href={`${docsSiteUrl}guide/en/kibana/${docLinkVersion}/xpack-uptime.html`}
target="_blank"
>
<FormattedMessage
id="xpack.uptime.header.documentationLinkText"
defaultMessage="Uptime Docs"
description="The link will navigate users to the Uptime UI documentation pages."
/>
</EuiLink>
</EuiFlexItem>
<EuiFlexItem>
<EuiLink
aria-label={i18n.translate('xpack.uptime.header.helpLinkAriaLabel', {
defaultMessage: 'Go to our discuss page',
})}
href="https://discuss.elastic.co/c/uptime"
target="_blank"
>
<FormattedMessage
id="xpack.uptime.header.helpLinkText"
defaultMessage="Give Uptime feedback"
description="The link is to a support form called 'Discuss', where users can submit feedback."
/>
</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
);