[8.x] [Drilldowns] Fix drilldown add variable adding additional brackets (#196539) (#196655)

kibanamachine · kowalczyk-krzysztof · web-flow · commit 2d7ceb5d31c0 · 2024-10-17T06:39:17.000-05:00
# Backport This will backport the following commits from `main` to `8.x`: - [[Drilldowns] Fix drilldown add variable adding additional brackets (#196539)](#196539)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
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
@@ -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,
         });
       }}
     />
