[Console] Add links to docs (#121066)

* Add links to docs

Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md

@@ -27,6 +27,9 @@ readonly links: {
         readonly cloud: {
             readonly indexManagement: string;
         };
+        readonly console: {
+            readonly guide: string;
+        };
         readonly dashboard: {
             readonly guide: string;
             readonly drilldowns: string;

src/core/public/doc_links/doc_links_service.ts

@@ -57,6 +57,9 @@ export class DocLinksService {
         cloud: {
           indexManagement: `${ELASTIC_WEBSITE_URL}/guide/en/cloud/current/ec-configure-index-management.html`,
         },
+        console: {
+          guide: `${KIBANA_DOCS}console-kibana.html`,
+        },
         dashboard: {
           guide: `${KIBANA_DOCS}dashboard.html`,
           drilldowns: `${KIBANA_DOCS}drilldowns.html`,
@@ -612,6 +615,9 @@ export interface DocLinksStart {
     readonly cloud: {
       readonly indexManagement: string;
     };
+    readonly console: {
+      readonly guide: string;
+    };
     readonly dashboard: {
       readonly guide: string;
       readonly drilldowns: string;

src/core/public/public.api.md

@@ -510,6 +510,9 @@ export interface DocLinksStart {
         readonly cloud: {
             readonly indexManagement: string;
         };
+        readonly console: {
+            readonly guide: string;
+        };
         readonly dashboard: {
             readonly guide: string;
             readonly drilldowns: string;

src/plugins/console/public/application/components/help_panel.tsx

@@ -15,14 +15,18 @@ import {
   EuiFlyoutBody,
   EuiTitle,
   EuiSpacer,
+  EuiLink,
 } from '@elastic/eui';
 import { EditorExample } from './editor_example';
+import { useServicesContext } from '../contexts';
 
 interface Props {
   onClose: () => void;
 }
 
 export function HelpPanel(props: Props) {
+  const { docLinks } = useServicesContext();
+
   return (
     <EuiFlyout onClose={props.onClose} data-test-subj="helpFlyout" size="s">
       <EuiFlyoutHeader hasBorder>
@@ -43,7 +47,25 @@ export function HelpPanel(props: Props) {
           <p>
             <FormattedMessage
               id="console.helpPage.requestFormatDescription"
-              defaultMessage="You can type one or more requests in the white editor. Console understands requests in a compact format:"
+              defaultMessage="You can type one or more requests in the editor. Console understands requests in a compact format."
+            />
+          </p>
+          <p>
+            <FormattedMessage
+              id="console.helpPage.learnAboutConsoleAndQueryDslText"
+              defaultMessage="Learn about {console} and {queryDsl}"
+              values={{
+                console: (
+                  <EuiLink href={docLinks.console.guide} target="_blank" external>
+                    Console
+                  </EuiLink>
+                ),
+                queryDsl: (
+                  <EuiLink href={docLinks.query.queryDsl} target="_blank" external>
+                    Query DSL
+                  </EuiLink>
+                ),
+              }}
             />
           </p>
           <EditorExample panel="help" />

src/plugins/console/public/application/contexts/services_context.mock.ts

@@ -8,6 +8,7 @@
 
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import { httpServiceMock, themeServiceMock } from '../../../../../core/public/mocks';
+import { docLinksServiceMock } from '../../../../../core/public/mocks';
 
 import type { ObjectStorageClient } from '../../../common/types';
 import { HistoryMock } from '../../services/history.mock';
@@ -36,6 +37,7 @@ export const serviceContextMock = {
       },
       docLinkVersion: 'NA',
       theme$: themeServiceMock.create().start().theme$,
+      docLinks: docLinksServiceMock.createStartContract().links,
     };
   },
 };

src/plugins/console/public/application/contexts/services_context.tsx

@@ -8,7 +8,7 @@
 
 import React, { createContext, useContext, useEffect } from 'react';
 import { Observable } from 'rxjs';
-import { NotificationsSetup, CoreTheme } from 'kibana/public';
+import { NotificationsSetup, CoreTheme, DocLinksStart } from 'kibana/public';
 
 import { History, Settings, Storage } from '../../services';
 import { ObjectStorageClient } from '../../../common/types';
@@ -29,6 +29,7 @@ export interface ContextValue {
   services: ContextServices;
   docLinkVersion: string;
   theme$: Observable<CoreTheme>;
+  docLinks: DocLinksStart['links'];
 }
 
 interface ContextProps {

src/plugins/console/public/application/index.tsx

@@ -9,7 +9,13 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Observable } from 'rxjs';
-import { HttpSetup, NotificationsSetup, I18nStart, CoreTheme } from 'src/core/public';
+import {
+  HttpSetup,
+  NotificationsSetup,
+  I18nStart,
+  CoreTheme,
+  DocLinksStart,
+} from 'src/core/public';
 
 import { UsageCollectionSetup } from '../../../usage_collection/public';
 import { KibanaThemeProvider } from '../shared_imports';
@@ -28,6 +34,7 @@ export interface BootDependencies {
   usageCollection?: UsageCollectionSetup;
   element: HTMLElement;
   theme$: Observable<CoreTheme>;
+  docLinks: DocLinksStart['links'];
 }
 
 export function renderApp({
@@ -38,6 +45,7 @@ export function renderApp({
   element,
   http,
   theme$,
+  docLinks,
 }: BootDependencies) {
   const trackUiMetric = createUsageTracker(usageCollection);
   trackUiMetric.load('opened_app');
@@ -58,6 +66,7 @@ export function renderApp({
         <ServicesContextProvider
           value={{
             docLinkVersion,
+            docLinks,
             services: {
               esHostService,
               storage,

src/plugins/console/public/plugin.ts

@@ -57,7 +57,7 @@ export class ConsoleUIPlugin implements Plugin<void, void, AppSetupUIPluginDepen
 
           const {
             i18n: { Context: I18nContext },
-            docLinks: { DOC_LINK_VERSION },
+            docLinks: { DOC_LINK_VERSION, links },
           } = core;
 
           const { renderApp } = await import('./application');
@@ -65,6 +65,7 @@ export class ConsoleUIPlugin implements Plugin<void, void, AppSetupUIPluginDepen
           return renderApp({
             http,
             docLinkVersion: DOC_LINK_VERSION,
+            docLinks: links,
             I18nContext,
             notifications,
             usageCollection,