[Discover] Add documentation links for Document Explorer (#127971)

* [Discover] add document explorer docs links

* [Discover] fix tests

* [Discover] update translations

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -66,6 +66,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
     discover: {
       guide: `${KIBANA_DOCS}discover.html`,
       fieldStatistics: `${KIBANA_DOCS}show-field-statistics.html`,
+      documentExplorer: `${KIBANA_DOCS}document-explorer.html`,
     },
     filebeat: {
       base: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}`,

src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.test.tsx

@@ -15,6 +15,7 @@ import { DiscoverServices } from '../../../../build_services';
 
 const defaultServices = {
   addBasePath: () => '',
+  docLinks: { links: { discover: { documentExplorer: '' } } },
   capabilities: { advancedSettings: { save: true } },
   storage: new LocalStorageMock({ [CALLOUT_STATE_KEY]: false }),
 } as unknown as DiscoverServices;

src/plugins/discover/public/application/main/components/document_explorer_callout/document_explorer_callout.tsx

@@ -10,7 +10,14 @@ import React, { useCallback, useState } from 'react';
 import './document_explorer_callout.scss';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiButton, EuiButtonIcon, EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+} from '@elastic/eui';
 import { useDiscoverServices } from '../../../../utils/use_discover_services';
 import { DOC_TABLE_LEGACY } from '../../../../../common';
 import { Storage } from '../../../../../../kibana_utils/public';
@@ -26,7 +33,7 @@ const updateStoredCalloutState = (newState: boolean, storage: Storage) => {
 };
 
 export const DocumentExplorerCallout = () => {
-  const { storage, capabilities, addBasePath } = useDiscoverServices();
+  const { storage, capabilities, docLinks, addBasePath } = useDiscoverServices();
   const [calloutClosed, setCalloutClosed] = useState(getStoredCalloutState(storage));
 
   const onCloseCallout = useCallback(() => {
@@ -50,18 +57,33 @@ export const DocumentExplorerCallout = () => {
           defaultMessage="Quickly sort, select, and compare data, resize columns, and view documents in fullscreen with the Document Explorer."
         />
       </p>
-      <p>
-        <EuiButton
-          iconType="tableDensityNormal"
-          size="s"
-          href={addBasePath(`/app/management/kibana/settings?query=${DOC_TABLE_LEGACY}`)}
-        >
-          <FormattedMessage
-            id="discover.docExplorerCallout.tryDocumentExplorer"
-            defaultMessage="Try Document Explorer"
-          />
-        </EuiButton>
-      </p>
+      <EuiFlexGroup
+        justifyContent="flexStart"
+        alignItems="center"
+        responsive={false}
+        gutterSize="s"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            iconType="tableDensityNormal"
+            size="s"
+            href={addBasePath(`/app/management/kibana/settings?query=${DOC_TABLE_LEGACY}`)}
+          >
+            <FormattedMessage
+              id="discover.docExplorerCallout.tryDocumentExplorer"
+              defaultMessage="Try Document Explorer"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiLink href={docLinks.links.discover.documentExplorer}>
+            <FormattedMessage
+              id="discover.docExplorerCallout.learnMore"
+              defaultMessage="Learn more"
+            />
+          </EuiLink>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiCallOut>
   );
 };

src/plugins/discover/server/ui_settings.ts

@@ -167,8 +167,17 @@ export const getUiSettings: (docLinks: DocLinksServiceSetup) => Record<string, U
     value: false,
     description: i18n.translate('discover.advancedSettings.disableDocumentExplorerDescription', {
       defaultMessage:
-        'To use the new Document Explorer instead of the classic view, turn off this option. ' +
+        'To use the new {documentExplorerDocs} instead of the classic view, turn off this option. ' +
         'The Document Explorer offers better data sorting, resizable columns, and a full screen view.',
+      values: {
+        documentExplorerDocs:
+          `<a href=${docLinks.links.discover.documentExplorer}
+            target="_blank" rel="noopener">` +
+          i18n.translate('discover.advancedSettings.documentExplorerLinkText', {
+            defaultMessage: 'Document Explorer',
+          }) +
+          '</a>',
+      },
     }),
     category: ['discover'],
     schema: schema.boolean(),

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

@@ -2655,7 +2655,6 @@
     "discover.advancedSettings.defaultColumnsText": "デフォルトでDiscoverアプリに表示される列。空の場合、ドキュメントの概要が表示されます。",
     "discover.advancedSettings.defaultColumnsTitle": "デフォルトの列",
     "discover.advancedSettings.disableDocumentExplorer": "ドキュメントエクスプローラーまたはクラシックビュー",
-    "discover.advancedSettings.disableDocumentExplorerDescription": "クラシックビューではなく、ドキュメントエクスプローラーを使用するには、このオプションをオフにします。ドキュメントエクスプローラーでは、データの並べ替え、列のサイズ変更、全画面表示といった優れた機能を使用できます。",
     "discover.advancedSettings.discover.fieldStatisticsLinkText": "フィールド統計情報ビュー",
     "discover.advancedSettings.discover.modifyColumnsOnSwitchText": "新しいデータビューで使用できない列を削除します。",
     "discover.advancedSettings.discover.modifyColumnsOnSwitchTitle": "データビューを変更するときに列を修正",

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

@@ -2662,7 +2662,6 @@
     "discover.advancedSettings.defaultColumnsText": "Discover 应用中默认显示的列。如果为空，将显示文档摘要。",
     "discover.advancedSettings.defaultColumnsTitle": "默认列",
     "discover.advancedSettings.disableDocumentExplorer": "Document Explorer 或经典视图",
-    "discover.advancedSettings.disableDocumentExplorerDescription": "要使用新的 Document Explorer，而非经典视图，请关闭此选项。Document Explorer 提供了更合理的数据排序、可调整大小的列和全屏视图。",
     "discover.advancedSettings.discover.fieldStatisticsLinkText": "字段统计信息视图",
     "discover.advancedSettings.discover.modifyColumnsOnSwitchText": "移除新数据视图中不存在的列。",
     "discover.advancedSettings.discover.modifyColumnsOnSwitchTitle": "在更改数据视图时修改列",