From b78e2af51e2667a0ab980b5b22d376987ba9926a Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Wed, 13 Dec 2023 18:09:37 +0100 Subject: [PATCH 01/10] Add help to code snippets widget --- .../web/docs_js/components/console_widget.jsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 01c7e5fdee2b5..e541ef38e7363 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -73,6 +73,17 @@ export const ConsoleForm = connect((state, props) => // ConsoleWidget isn't quite the right name for this any more.... export const ConsoleWidget = props => { const modalAction = () => props.openModal(ConsoleForm, {setting: props.setting, url_label: props.url_label}); + + // Simple function to display a modal/tooltip + const showHelp = () => { + alert('1. When code examples are available for different programming languages, use the toggle in the lower left-hand corner.\n\n' + + '2. To copy a code snippet: \n\n' + + '- Select "Copy as curl" to copy the code in curl format. \n' + + '- Select "View in Console" to load the example into your Kibana Console.\n\n' + + '3. Use the gear icon in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.\n\nThis ensures the code examples target your Elasticsearch instance.\n\n') +}; + + return
@@ -91,6 +102,11 @@ export const ConsoleWidget = props => { title={props.langStrings(props.view_in_text)} href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } + + + ℹ️ + +  
From 6b13dc8f5da119ec6de4e2384b9fda18fe72e70f Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Wed, 13 Dec 2023 18:50:14 +0100 Subject: [PATCH 02/10] Change class name --- resources/web/docs_js/components/console_widget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index e541ef38e7363..a480b7bbe7862 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -103,7 +103,7 @@ export const ConsoleWidget = props => { href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } - + ℹ️ From 5a874bbed50f833b2290c720be088074da52c981 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Wed, 13 Dec 2023 18:52:06 +0100 Subject: [PATCH 03/10] Increase icon margin --- resources/web/docs_js/components/console_widget.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index a480b7bbe7862..3e67975d1c203 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -103,7 +103,7 @@ export const ConsoleWidget = props => { href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } - + ℹ️ From ffb43b761a25a484edbc4b8c41d5c6474885b60f Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Wed, 13 Dec 2023 19:08:50 +0100 Subject: [PATCH 04/10] Tighten text, use same css as rest of widget --- resources/web/docs_js/components/console_widget.jsx | 6 +++--- resources/web/style/console_widget.pcss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 3e67975d1c203..f0457a19b2696 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -76,11 +76,11 @@ export const ConsoleWidget = props => { // Simple function to display a modal/tooltip const showHelp = () => { - alert('1. When code examples are available for different programming languages, use the toggle in the lower left-hand corner.\n\n' + + alert('1. Use the toggle in the lower left-hand corner to change programming language.\n\n' + '2. To copy a code snippet: \n\n' + '- Select "Copy as curl" to copy the code in curl format. \n' + '- Select "View in Console" to load the example into your Kibana Console.\n\n' + - '3. Use the gear icon in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.\n\nThis ensures the code examples target your Elasticsearch instance.\n\n') + '3. Use the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.\n\nThis ensures the code examples target your Elasticsearch instance.\n\n') }; @@ -103,7 +103,7 @@ export const ConsoleWidget = props => { href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } - + ℹ️ diff --git a/resources/web/style/console_widget.pcss b/resources/web/style/console_widget.pcss index 5a135849b599a..2ca22355fcdcc 100644 --- a/resources/web/style/console_widget.pcss +++ b/resources/web/style/console_widget.pcss @@ -6,7 +6,7 @@ background: #343741; padding: 7px 15px 7px 0; } - .view_in_link, .copy_as_curl { + .view_in_link, .copy_as_curl, .help_info { color: #ffffff; cursor: pointer; font-weight: 500; From 70d9a4aa5cbfef61e5ab812dcf03a8db5a9e2808 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Thu, 14 Dec 2023 12:38:33 +0100 Subject: [PATCH 05/10] Trim text and newlines for cleaner dialog in all browsers --- resources/web/docs_js/components/console_widget.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index f0457a19b2696..ff37beccaf385 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -76,11 +76,10 @@ export const ConsoleWidget = props => { // Simple function to display a modal/tooltip const showHelp = () => { - alert('1. Use the toggle in the lower left-hand corner to change programming language.\n\n' + - '2. To copy a code snippet: \n\n' + - '- Select "Copy as curl" to copy the code in curl format. \n' + - '- Select "View in Console" to load the example into your Kibana Console.\n\n' + - '3. Use the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.\n\nThis ensures the code examples target your Elasticsearch instance.\n\n') + alert('1. Use the toggle in the lower left-hand corner to change client languages.\n' + + '2. - Select "Copy as curl" to copy the code in curl format.\n' + + ' - Select "View in Console" to load example in Kibana Console.\n' + + '3. Use the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.This ensures the code examples target your Elasticsearch instance.\n\n') }; @@ -103,7 +102,7 @@ export const ConsoleWidget = props => { href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } - + ℹ️ From 0a99aa2535ae69c505e11d8121fe25e3b5210a08 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Thu, 14 Dec 2023 12:55:38 +0100 Subject: [PATCH 06/10] Remove unnecessary formatting/style --- resources/web/docs_js/components/console_widget.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index ff37beccaf385..ba6bea41f6c93 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -102,8 +102,8 @@ export const ConsoleWidget = props => { href={`${props[props.setting + "_url"]}?load_from=${props.baseUrl}${props.snippet}`}>{props.langStrings(props.view_in_text)} } - - ℹ️ + + ℹ️   From 79469b65eba17c4988ececda1e4a7fae5b0bffb2 Mon Sep 17 00:00:00 2001 From: Liam Thompson <32779855+leemthompo@users.noreply.github.com> Date: Mon, 18 Dec 2023 09:49:15 +0100 Subject: [PATCH 07/10] Improvements per review Co-authored-by: Kaarina Tungseth --- resources/web/docs_js/components/console_widget.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index ba6bea41f6c93..623e6bcbf4bc7 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -76,10 +76,11 @@ export const ConsoleWidget = props => { // Simple function to display a modal/tooltip const showHelp = () => { - alert('1. Use the toggle in the lower left-hand corner to change client languages.\n' + - '2. - Select "Copy as curl" to copy the code in curl format.\n' + - ' - Select "View in Console" to load example in Kibana Console.\n' + - '3. Use the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username and Kibana Console URL.This ensures the code examples target your Elasticsearch instance.\n\n') + alert('1. To change the client language, use the dropdown.\n' + + '2. To copy the code in curl format, click "Copy as curl".\n' + + '3. To open the example in Kibana Console: + a. Click the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username, and Kibana Console URL. This ensures the code examples target your Elasticsearch instance. + b. Click "View in Console".\n' + }; From 06c9eedcdead2f158eaa4aab1c5bbbc8447010b0 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Mon, 18 Dec 2023 10:13:33 +0100 Subject: [PATCH 08/10] Fix syntax, rationalize instructions --- resources/web/docs_js/components/console_widget.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 623e6bcbf4bc7..3760290cc2076 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -76,14 +76,15 @@ export const ConsoleWidget = props => { // Simple function to display a modal/tooltip const showHelp = () => { - alert('1. To change the client language, use the dropdown.\n' + - '2. To copy the code in curl format, click "Copy as curl".\n' + - '3. To open the example in Kibana Console: - a. Click the gear icon (⚙) in the lower right-hand corner to configure your Elasticsearch host URL, username, and Kibana Console URL. This ensures the code examples target your Elasticsearch instance. - b. Click "View in Console".\n' + + alert('1. To change the client language, use the dropdown.\n\n' + + '2. To copy the code in curl format:\n' + + '- Use the gear icon (⚙) to set Elasticsearch URL and username\n' + + '- Click "Copy as curl".\n\n' + + '3. To open the example in Kibana Console:\n'+ + '- Use the gear icon (⚙) to set Kibana Console URL.\n' + + '- Click "View in Console".') }; - return
From 35d3a737d1aa33c805943d9f11e4d80a460c8da7 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Mon, 18 Dec 2023 10:21:00 +0100 Subject: [PATCH 09/10] Syntax consistency --- resources/web/docs_js/components/console_widget.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 3760290cc2076..3eac41898ea0d 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -81,8 +81,8 @@ export const ConsoleWidget = props => { '- Use the gear icon (⚙) to set Elasticsearch URL and username\n' + '- Click "Copy as curl".\n\n' + '3. To open the example in Kibana Console:\n'+ - '- Use the gear icon (⚙) to set Kibana Console URL.\n' + - '- Click "View in Console".') + '- Use the gear icon (⚙) to set Kibana Console URL.\n' + + '- Click "View in Console".') }; return
From defaf2fb358d56e6c237f841c03f2bfee17329b7 Mon Sep 17 00:00:00 2001 From: Liam Thompson Date: Mon, 18 Dec 2023 15:06:37 +0100 Subject: [PATCH 10/10] Cosmetic tweaks --- resources/web/docs_js/components/console_widget.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/web/docs_js/components/console_widget.jsx b/resources/web/docs_js/components/console_widget.jsx index 3eac41898ea0d..6a01cf0330943 100644 --- a/resources/web/docs_js/components/console_widget.jsx +++ b/resources/web/docs_js/components/console_widget.jsx @@ -78,11 +78,11 @@ export const ConsoleWidget = props => { const showHelp = () => { alert('1. To change the client language, use the dropdown.\n\n' + '2. To copy the code in curl format:\n' + - '- Use the gear icon (⚙) to set Elasticsearch URL and username\n' + - '- Click "Copy as curl".\n\n' + + ' - Use gear icon (⚙) to set Elasticsearch URL + username.\n' + + ' - Click "Copy as curl".\n\n' + '3. To open the example in Kibana Console:\n'+ - '- Use the gear icon (⚙) to set Kibana Console URL.\n' + - '- Click "View in Console".') + ' - Use gear icon (⚙) to set Kibana Console URL.\n' + + ' - Click "View in Console".') }; return