From 2d7ceb5d31c07eeedf31fcb6d698fa7c2ac70995 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 17 Oct 2024 22:39:17 +1100
Subject: [PATCH] [8.x] [Drilldowns] Fix drilldown add variable adding
 additional brackets (#196539) (#196655)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Drilldowns] Fix drilldown add variable adding additional brackets
(#196539)](https://github.com/elastic/kibana/pull/196539)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2024-10-17T09:46:53Z","message":"[Drilldowns]
Fix drilldown add variable adding additional brackets (#196539)\n\n##
Summary\r\n\r\nThis PR adds a check to create/edit drilldown template
editor for\r\nwhether the cursor (where variable would be inserted) is
already between\r\ndouble brackets.\r\n\r\nFixes:
#121421","sha":"3c3b7c8ecb97961d98f7760cb90f25e2937c623d","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Feature:Drilldowns","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"[Drilldowns]
Fix drilldown add variable adding additional
brackets","number":196539,"url":"https://github.com/elastic/kibana/pull/196539","mergeCommit":{"message":"[Drilldowns]
Fix drilldown add variable adding additional brackets (#196539)\n\n##
Summary\r\n\r\nThis PR adds a check to create/edit drilldown template
editor for\r\nwhether the cursor (where variable would be inserted) is
already between\r\ndouble brackets.\r\n\r\nFixes:
#121421","sha":"3c3b7c8ecb97961d98f7760cb90f25e2937c623d"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196539","number":196539,"mergeCommit":{"message":"[Drilldowns]
Fix drilldown add variable adding additional brackets (#196539)\n\n##
Summary\r\n\r\nThis PR adds a check to create/edit drilldown template
editor for\r\nwhether the cursor (where variable would be inserted) is
already between\r\ndouble brackets.\r\n\r\nFixes:
#121421","sha":"3c3b7c8ecb97961d98f7760cb90f25e2937c623d"}}]}]
BACKPORT-->

Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
---
 .../url_drilldown_collect_config.tsx             | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
index bf9d965f945cf..60b8cc33c178f 100644
--- a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
+++ b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
@@ -31,6 +31,19 @@ export interface UrlDrilldownCollectConfigProps {
   variablesHelpDocsLink?: string;
 }
 
+const isCursorBetweenDoubleCurlyBrackets = (editor: monaco.editor.IStandaloneCodeEditor) => {
+  const model = editor.getModel();
+  const position = editor.getPosition();
+  if (!model || !position) return false;
+
+  const offset = model.getOffsetAt(position);
+  const text = model.getValue();
+  const twoCharactersBeforeOffset = text.slice(offset - 2, offset);
+  const twoCharactersAfterOffset = text.slice(offset, offset + 2);
+
+  return twoCharactersBeforeOffset === '{{' && twoCharactersAfterOffset === '}}';
+};
+
 export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps> = ({
   config,
   variables,
@@ -64,9 +77,10 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps>
       onSelect={(variable: string) => {
         const editor = editorRef.current;
         if (!editor) return;
+        const text = isCursorBetweenDoubleCurlyBrackets(editor) ? variable : `{{${variable}}}`;
 
         editor.trigger('keyboard', 'type', {
-          text: '{{' + variable + '}}',
+          text,
         });
       }}
     />