[ML] Adds documentation links in the help menu for machine learning #85366

lcawl · 2020-12-09T02:25:19Z

Summary

Related to #85088

This PR adds a link to the machine learning guide in the help menu on the "Overview" page in the ML app:

The method for accomplishing this drop-down menu link is copied from how it's done in:

kibana/x-pack/plugins/security_solution/public/common/components/help_menu/index.tsx

Line 24 in aa2525c

href: docLinks.links.siem.guide,
kibana/x-pack/plugins/security_solution/public/app/home/index.tsx

Line 100 in aa2525c

<HelpMenu />

If we like this layout, I think we can add appropriate links for each of the other pages in the app.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

…x.tsx

peteharverson

Took an early test of this one, and great to see the ML content in the Help menu! Left a few comments on the code.

peteharverson · 2020-12-10T11:18:05Z

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

+  useEffect(() => {
+    chrome.setHelpExtension({
+      appName: i18n.translate('xpack.ml.chrome.help.appName', {
+        defaultMessage: 'Machine learning',


Would capitalized Learning be appropriate here, to match the display of the ML plugin in the top and side nav, and also the title on the doc page Machine Learning in the Elastic Stack?

peteharverson · 2020-12-10T11:19:37Z

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

+          content: i18n.translate('xpack.ml.chrome.helpMenu.documentation', {
+            defaultMessage: 'Documentation',
+          }),
+          href: docLinks.links.ml.guide,


Do we always want to link to the top level ML guide from every page in the ML app, or should the href be passed in to the HelpMenu component?

Yes, I was thinking it would be nice to have that functionality, but wasn't sure of the best way to accomplish that. I'll maybe reach out to pick your brain on the right code to accomplish it.

peteharverson · 2020-12-10T11:21:26Z

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

+
+import React, { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';


@jgowdyelastic would it be better to use useMlKibana for access to the docLinks service here?

for consistency with our other components, yes useMlKibana would be better.
but chrome and docLinks are available in either.

elasticmachine · 2020-12-17T00:32:22Z

Pinging @elastic/ml-ui (:ml)

lcawl · 2020-12-17T00:33:19Z

@elasticmachine merge upstream

alvarezmelissa87 · 2020-12-17T17:40:59Z

Great addition, @lcawl! 😄

Might be worth renaming the files so that the HelpText component lives in help_text.tsx in the help_text/ directory and then it is exported in an index.ts file (in the same directory) like export { HelpText } from './help_text
The import statement for HelpText wouldn't have to change as it checks for an index file by default.

This would keep it consistent with the other components in the plugin.

peteharverson · 2020-12-17T17:42:49Z

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

+          href: docLink,
+          iconType: 'documents',
+          linkType: 'custom',
+          target: '_blank',


Despite setting target to _blank, the link opens in the same tab for me. Same thing happens with the links for the Security solution I see. But for Dashboard, it opens in a different tab (which seems a better option). I can't work out why that it is, as the structure of the <a> tag looks identical.

@lcawl Looks like the linkType here needs to be 'documentation'. That should fix the issue.
https://github.com/elastic/kibana/blob/master/src/core/public/chrome/ui/header/header_help_menu.tsx#L287

peteharverson · 2020-12-17T17:45:07Z

x-pack/plugins/ml/public/application/components/help_menu/index.tsx

+  docLink: string;
+}
+
+export const HelpMenu: FC<HelpMenuProps> = React.memo(({ docLink }) => {


To be consistent with the other components in the ml/public/application/components folder, it is probably better to move this content into help_menu.tsx and then create a simple index.tsx which exports out HelpMenu (copy structure of ml/public/application/components/create_job_link_card).

kibanamachine · 2020-12-17T22:16:27Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: d1663e3

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`ml`	1688	1690	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`ml`	7.0MB	7.0MB	+642.0B

Distributable file count

id	before	after	diff
`default`	47287	48047	+760

History

💔 Build #95222 failed 4efb843
💚 Build #95060 succeeded 1a4d0f9
💔 Build #95027 failed f9b0261
💔 Build #95051 failed bfad9e9
💔 Build #94694 failed cdff96a

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

peteharverson

Tested latest edits and LGTM. Thanks for setting this up!

…lastic#85366)

…85366) (#86469)

Added help_menu folder for ML app

c98b1c0

lcawl added :ml v8.0.0 v7.11.0 labels Dec 9, 2020

lcawl commented Dec 9, 2020

View reviewed changes

x-pack/plugins/ml/public/application/components/help_menu/index.tsx Outdated Show resolved Hide resolved

Update x-pack/plugins/ml/public/application/components/help_menu/inde…

9d4c9a8

…x.tsx

peteharverson reviewed Dec 10, 2020

View reviewed changes

Replaces useKibana with useMlKibana

aafde6c

lcawl mentioned this pull request Dec 15, 2020

[ML] Adds href input variable for machine learning help menu lcawl/kibana#1

Merged

lcawl added 7 commits December 15, 2020 10:43

Fixes path to useMLKibana

30c055e

Changes useKibana to useMlKibana

cdff96a

[ML] Adds href input variable for help menu

9819019

Remove unnecessary curly brackets

5f30309

[ML] Adds href input variable for machine learning help menu

f9b0261

Fixes typo

bfad9e9

Adds missing React FC import

d07a88b

lcawl added enhancement New value added to drive a business result v7.12.0 labels Dec 17, 2020

lcawl marked this pull request as ready for review December 17, 2020 00:32

lcawl requested a review from a team as a code owner December 17, 2020 00:32

lcawl added the release_note:enhancement label Dec 17, 2020

Merge branch 'master' into help-menu-ml

1a4d0f9

peteharverson reviewed Dec 17, 2020

View reviewed changes

lcawl added 2 commits December 17, 2020 10:17

Renames file and updates linktype

4efb843

Remove unnecessary link properties

d1663e3

peteharverson approved these changes Dec 18, 2020

View reviewed changes

lcawl merged commit de0aceb into elastic:master Dec 18, 2020

lcawl deleted the help-menu-ml branch December 18, 2020 15:12

lcawl mentioned this pull request Dec 18, 2020

[7.x] [ML] Adds documentation links in the help menu for machine learning (#85366) #86469

Merged

lcawl removed the v7.11.0 label Dec 18, 2020

lcawl added a commit to lcawl/kibana that referenced this pull request Dec 18, 2020

[ML] Adds documentation links in the help menu for machine learning (e…

5eb1a77

…lastic#85366)

lcawl added a commit that referenced this pull request Dec 18, 2020

[ML] Adds documentation links in the help menu for machine learning (#…

f03c58e

…85366) (#86469)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ML] Adds documentation links in the help menu for machine learning #85366

[ML] Adds documentation links in the help menu for machine learning #85366

Uh oh!

lcawl commented Dec 9, 2020 •

edited

Loading

Uh oh!

Uh oh!

peteharverson left a comment

Uh oh!

peteharverson Dec 10, 2020

Uh oh!

peteharverson Dec 10, 2020

Uh oh!

lcawl Dec 15, 2020

Uh oh!

peteharverson Dec 10, 2020

Uh oh!

jgowdyelastic Dec 10, 2020

Uh oh!

elasticmachine commented Dec 17, 2020

Uh oh!

lcawl commented Dec 17, 2020

Uh oh!

alvarezmelissa87 commented Dec 17, 2020

Uh oh!

peteharverson Dec 17, 2020

Uh oh!

alvarezmelissa87 Dec 17, 2020 •

edited

Loading

Uh oh!

peteharverson Dec 17, 2020

Uh oh!

kibanamachine commented Dec 17, 2020

Uh oh!

peteharverson left a comment

Uh oh!

Uh oh!

[ML] Adds documentation links in the help menu for machine learning #85366

[ML] Adds documentation links in the help menu for machine learning #85366

Uh oh!

Conversation

lcawl commented Dec 9, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

Uh oh!

peteharverson left a comment

Choose a reason for hiding this comment

Uh oh!

peteharverson Dec 10, 2020

Choose a reason for hiding this comment

Uh oh!

peteharverson Dec 10, 2020

Choose a reason for hiding this comment

Uh oh!

lcawl Dec 15, 2020

Choose a reason for hiding this comment

Uh oh!

peteharverson Dec 10, 2020

Choose a reason for hiding this comment

Uh oh!

jgowdyelastic Dec 10, 2020

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 17, 2020

Uh oh!

lcawl commented Dec 17, 2020

Uh oh!

alvarezmelissa87 commented Dec 17, 2020

Uh oh!

peteharverson Dec 17, 2020

Choose a reason for hiding this comment

Uh oh!

alvarezmelissa87 Dec 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

peteharverson Dec 17, 2020

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Dec 17, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

History

Uh oh!

peteharverson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lcawl commented Dec 9, 2020 •

edited

Loading

alvarezmelissa87 Dec 17, 2020 •

edited

Loading