From b78e2af51e2667a0ab980b5b22d376987ba9926a Mon Sep 17 00:00:00 2001
From: Liam Thompson <leemthompo@gmail.com>
Date: Wed, 13 Dec 2023 18:09:37 +0100
Subject: [PATCH] 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 <div className="u-space-between">
     <AlternativePicker langs={props.langs} />
     <div className="u-space-between">
@@ -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)}</a>
       }
+      
+<a className="sense_widget copy_as_curl" onClick={showHelp} style={{ textDecoration: 'none' }}>
+  <strong>ℹ️</strong>
+</a>
+
       <a className="console_settings" onClick={modalAction} title={props.langStrings(props.configure_text)}>&nbsp;</a>
     </div>
   </div>