Merge pull request #380 from RedisInsight/feature/bugfix_wb

[bugfix] - cypher, wb, enablement area

Author: rsergeenko

redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx

@@ -123,7 +123,7 @@ const DedicatedEditor = (props: Props) => {
     // https://github.com/microsoft/monaco-editor/issues/2756
     contribution = editor.getContribution<ISnippetController>('snippetController2')
 
-    editor.focus()
+    setTimeout(() => editor.focus(), 0)
 
     editor.onKeyDown(onKeyDownMonaco)
 
@@ -183,7 +183,7 @@ const DedicatedEditor = (props: Props) => {
         x: 17,
         y: 80,
         width,
-        height: 240
+        height: 176
       }}
       className={styles.rnd}
       dragHandleClassName="draggable-area"

redisinsight/ui/src/components/query/DedicatedEditor/styles.module.scss

@@ -1,5 +1,5 @@
 .rnd {
-  position: fixed;
+  position: fixed !important;
   z-index: 100;
 }
 .container {
@@ -34,7 +34,6 @@
 .input {
   height: calc(100% - 46px);
   width: 100%;
-  background-color: var(--rsInputColor);
 }
 
 #script {

redisinsight/ui/src/components/query/Query/Query.tsx

@@ -50,7 +50,11 @@ export interface Props {
 }
 
 const SYNTAX_CONTEXT_ID = 'syntaxWidgetContext'
+const SYNTAX_WIDGET_ID = 'syntax.content.widget'
+
 const argInQuotesRegExp = /^['"](.|[\r\n])*['"]$/
+const aroundQuotesRegExp = /(^["']|["']$)/g
+
 let decorations: string[] = []
 let execHistoryPos: number = 0
 let execHistory: CommandExecutionUI[] = []
@@ -75,14 +79,15 @@ const Query = (props: Props) => {
   let disposeCompletionItemProvider = () => {}
   let disposeSignatureHelpProvider = () => {}
 
-  useEffect(() =>
-  // componentWillUnmount
-    () => {
+  useEffect(() => {
+    // componentWillUnmount
+    return () => {
       contribution?.dispose?.()
       disposeCompletionItemProvider()
       disposeSignatureHelpProvider()
-    },
-  [])
+    }
+  }, [])
+
 
   useEffect(() => {
     // HACK: The Monaco editor memoize the state and ignores updates to it
@@ -116,6 +121,23 @@ const Query = (props: Props) => {
     isDedicatedEditorOpenRef.current = isDedicatedEditorOpen
   }, [isDedicatedEditorOpen])
 
+  const triggerUpdateCursorPosition = (editor: monacoEditor.editor.IStandaloneCodeEditor) => {
+    const position = editor.getPosition()
+    isDedicatedEditorOpenRef.current = false
+    editor.trigger('mouse', '_moveTo', { position: { lineNumber: 1, column: 1 }})
+    editor.trigger('mouse', '_moveTo', { position })
+    editor.focus()
+  }
+
+  const onPressWidget = () => {
+    if (!monacoObjects.current) return
+    const { editor } = monacoObjects?.current
+
+    setIsDedicatedEditorOpen(true)
+    editor.updateOptions({ readOnly: true })
+    hideSyntaxWidget(editor)
+  }
+
   const onChange = (value: string = '') => {
     setQuery(value)
 
@@ -151,7 +173,7 @@ const Query = (props: Props) => {
   }
 
   const onTriggerContentWidget = (position: Nullable<monacoEditor.Position>, language: string = ''): monaco.editor.IContentWidget => ({
-    getId: () => 'syntax.content.widget',
+    getId: () => SYNTAX_WIDGET_ID,
     getDomNode: () => createSyntaxWidget(`Use ${language} Editor`, 'Shift+Space'),
     getPosition: () => ({
       position,
@@ -166,8 +188,12 @@ const Query = (props: Props) => {
     const { editor } = monacoObjects?.current
 
     const position = editor.getPosition()
-    // @ts-ignore
-    if (position?.lineNumber !== 1 || editor.getContribution('editor.contrib.suggestController')?.model?.state) return
+    if (
+      position?.column !== 1 ||
+      position?.lineNumber !== 1 ||
+      // @ts-ignore
+      editor.getContribution('editor.contrib.suggestController')?.model?.state
+    ) return
 
     if (execHistory[execHistoryPos]) {
       const command = execHistory[execHistoryPos].command || ''
@@ -230,10 +256,6 @@ const Query = (props: Props) => {
 
     const queryArg = command.args[argIndex]
     const argDSL = command.info?.arguments?.[argIndex]?.dsl || ''
-    if (!argIndex) {
-      isWidgetEscaped.current = false
-      return
-    }
 
     if (queryArgIndex === argIndex && argInQuotesRegExp.test(queryArg)) {
       if (isWidgetEscaped.current) return
@@ -281,35 +303,35 @@ const Query = (props: Props) => {
     const { editor } = monacoObjects?.current
 
     editor.updateOptions({ readOnly: false })
+    triggerUpdateCursorPosition(editor)
   }
 
   const updateArgFromDedicatedEditor = (value: string = '') => {
-    if (syntaxCommand.current) {
-      if (!monacoObjects.current) return
-      const { editor } = monacoObjects?.current
+    if (!syntaxCommand.current || !monacoObjects.current) return
+    const { editor } = monacoObjects?.current
 
-      const model = editor.getModel()
-      if (!model) return
+    const model = editor.getModel()
+    if (!model) return
 
-      const wrapQuote = syntaxCommand.current.argToReplace[0]
-      const replaceCommand = syntaxCommand.current.fullQuery.replace(
-        syntaxCommand.current.argToReplace,
-        `${wrapQuote}${value}${wrapQuote}`
-      )
-      editor.updateOptions({ readOnly: false })
-      editor.executeEdits(null, [
-        {
-          range: new monaco.Range(
-            syntaxCommand.current.commandPosition.startLine,
-            0,
-            syntaxCommand.current.commandPosition.endLine,
-            model.getLineLength(syntaxCommand.current.commandPosition.endLine) + 1
-          ),
-          text: replaceCommand
-        }
-      ])
-      setIsDedicatedEditorOpen(false)
-    }
+    const wrapQuote = syntaxCommand.current.argToReplace[0]
+    const replaceCommand = syntaxCommand.current.fullQuery.replace(
+      syntaxCommand.current.argToReplace,
+      `${wrapQuote}${value}${wrapQuote}`
+    )
+    editor.updateOptions({ readOnly: false })
+    editor.executeEdits(null, [
+      {
+        range: new monaco.Range(
+          syntaxCommand.current.commandPosition.startLine,
+          0,
+          syntaxCommand.current.commandPosition.endLine,
+          model.getLineLength(syntaxCommand.current.commandPosition.endLine) + 1
+        ),
+        text: replaceCommand
+      }
+    ])
+    setIsDedicatedEditorOpen(false)
+    triggerUpdateCursorPosition(editor)
   }
 
   const editorDidMount = (
@@ -335,11 +357,15 @@ const Query = (props: Props) => {
     )
 
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Space, () => {
-      setIsDedicatedEditorOpen(true)
-      editor.updateOptions({ readOnly: true })
-      hideSyntaxWidget(editor)
+      onPressWidget()
     }, SYNTAX_CONTEXT_ID)
 
+    editor.onMouseDown((e: monaco.editor.IEditorMouseEvent) => {
+      if (e.target.detail === SYNTAX_WIDGET_ID) {
+        onPressWidget()
+      }
+    })
+
     editor.addCommand(monaco.KeyCode.Escape, () => {
       hideSyntaxWidget(editor)
       isWidgetEscaped.current = true
@@ -431,7 +457,7 @@ const Query = (props: Props) => {
       {isDedicatedEditorOpen && (
         <DedicatedEditor
           lang={syntaxCommand.current.lang}
-          value={selectedArg.current.replace(/(^["']|["']$)/g, '')}
+          value={selectedArg.current.replace(aroundQuotesRegExp, '')}
           onSubmit={updateArgFromDedicatedEditor}
           onCancel={onCancelDedicatedEditor}
           width={input?.current?.scrollWidth || 300}

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/formatter/MarkdownToJsxString.ts

@@ -7,6 +7,7 @@ import { visit } from 'unist-util-visit'
 
 import { rehypeLinks } from '../rehypeLinks'
 import { remarkRedisCode } from '../remarkRedisCode'
+import { remarkImage } from '../remarkImage'
 import { IFormatter, IFormatterConfig } from './formatter.interfaces'
 
 class MarkdownToJsxString implements IFormatter {
@@ -16,6 +17,7 @@ class MarkdownToJsxString implements IFormatter {
         .use(remarkParse)
         .use(remarkGfm) // support GitHub Flavored Markdown
         .use(remarkRedisCode) // Add custom component for Redis code block
+        .use(remarkImage) // Add custom component for Redis code block
         .use(remarkRehype, { allowDangerousHtml: true }) // Pass raw HTML strings through.
         .use(rehypeLinks, config ? { history: config.history } : undefined) // Customise links
         .use(MarkdownToJsxString.rehypeWrapSymbols) // Wrap special symbols inside curly braces for JSX parse

redisinsight/ui/src/pages/workbench/components/enablement-area/EnablementArea/utils/remarkImage.ts

@@ -0,0 +1,10 @@
+import { visit } from 'unist-util-visit'
+import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
+import { RESOURCES_BASE_URL } from 'uiSrc/services/resourcesService'
+
+export const remarkImage = (): (tree: Node) => void => (tree: any) => {
+  // Find img node in syntax tree
+  visit(tree, 'image', (node) => {
+    node.url = IS_ABSOLUTE_PATH.test(node.url || '') ? node.url : `${RESOURCES_BASE_URL}${node.url.replace(/^\//, '')}`
+  })
+}

redisinsight/ui/src/pages/workbench/components/enablement-area/styles.module.scss

@@ -33,3 +33,9 @@
     height: 0;
   }
 }
+
+:global {
+  img {
+    max-width: 100%;
+  }
+}

redisinsight/ui/src/styles/base/_monaco.scss

@@ -56,6 +56,7 @@
   height: 30px;
   padding: 5px;
   font-size: 12px;
+  cursor: pointer;
 
   &__title {
     color: var(--euiTextSubduedColor);