Merge pull request #455 from RedisInsight/feature/RI-2568_dedicated-editor-position

#RI-2568 - improve dedicated editor positioning

Author: rsergeenko

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

@@ -34,9 +34,14 @@ export interface Props {
   onSubmit: (query?: string) => void
   onCancel: () => void
   onKeyDown?: (e: React.KeyboardEvent, script: string) => void
-  width: number
+  height: number
+  initialHeight: number
 }
 
+// paddings of main editor
+const WRAPPER_PADDINGS_HEIGHT = 18
+const BOTTOM_INDENT_PADDING = 6
+
 const langs: MonacoSyntaxLang = {
   [DSL.cypher]: {
     name: DSLNaming[DSL.cypher],
@@ -50,12 +55,13 @@ let decorations: string[] = []
 const notCommandRegEx = /^\s|\/\//
 
 const DedicatedEditor = (props: Props) => {
-  const { width, query = '', lang, onCancel, onSubmit } = props
+  const { height, initialHeight, query = '', lang, onCancel, onSubmit } = props
   const selectedLang = langs[lang]
   let contribution: Nullable<ISnippetController> = null
 
   const [value, setValue] = useState<string>(query)
   const monacoObjects = useRef<Nullable<IEditorMount>>(null)
+  const rndRef = useRef<Nullable<any>>(null)
   let disposeCompletionItemProvider = () => {}
 
   useEffect(() =>
@@ -66,6 +72,16 @@ const DedicatedEditor = (props: Props) => {
     },
   [])
 
+  useEffect(() => {
+    if (height === 0) return
+
+    const rndHeight = rndRef?.current.resizableElement.current.offsetHeight || 0
+    const rndTop = rndRef?.current.draggable.state.y
+    if (height < rndTop + rndHeight + WRAPPER_PADDINGS_HEIGHT) {
+      rndRef?.current.updatePosition({ x: 0, y: height - rndHeight - WRAPPER_PADDINGS_HEIGHT })
+    }
+  }, [height])
+
   useEffect(() => {
     if (!monacoObjects.current) return
     const commands = value.split('\n')
@@ -182,14 +198,28 @@ const DedicatedEditor = (props: Props) => {
 
   return (
     <Rnd
+      ref={rndRef}
       default={{
-        x: 17,
-        y: 80,
-        width,
-        height: 176
+        x: 0,
+        y: initialHeight * 0.4 - BOTTOM_INDENT_PADDING,
+        width: '100%',
+        height: '60%'
       }}
-      className={styles.rnd}
+      minHeight="80px"
+      enableResizing={{
+        top: true,
+        right: false,
+        bottom: true,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false
+      }}
+      dragAxis="y"
+      bounds=".editorBounder"
       dragHandleClassName="draggable-area"
+      className={styles.rnd}
     >
       <div className={styles.container} onKeyDown={handleKeyDown} role="textbox" tabIndex={0}>
         <div className="draggable-area" />

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

@@ -1,5 +1,5 @@
 .rnd {
-  position: fixed !important;
+  width: 100% !important;
   z-index: 100;
 }
 .container {

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

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
+import AutoSizer from 'react-virtualized-auto-sizer'
 import { useSelector } from 'react-redux'
 import { compact, findIndex } from 'lodash'
 import cx from 'classnames'
@@ -416,8 +417,13 @@ const Query = (props: Props) => {
   }
 
   return (
-    <>
-      <div className={styles.container} onKeyDown={handleKeyDown} role="textbox" tabIndex={0}>
+    <div className={styles.wrapper}>
+      <div
+        className={cx(styles.container, { [styles.disabled]: isDedicatedEditorOpen })}
+        onKeyDown={handleKeyDown}
+        role="textbox"
+        tabIndex={0}
+      >
         <div className={styles.input} data-testid="query-input-container" ref={input}>
           <MonacoEditor
             language={MonacoLanguage.Redis}
@@ -455,15 +461,22 @@ const Query = (props: Props) => {
         </div>
       </div>
       {isDedicatedEditorOpen && (
-        <DedicatedEditor
-          lang={syntaxCommand.current.lang}
-          query={selectedArg.current.replace(aroundQuotesRegExp, '')}
-          onSubmit={updateArgFromDedicatedEditor}
-          onCancel={onCancelDedicatedEditor}
-          width={input?.current?.scrollWidth || 300}
-        />
+        <AutoSizer>
+          {({ height }) => (
+            <div className="editorBounder">
+                <DedicatedEditor
+                  initialHeight={input?.current?.scrollHeight || 0}
+                  height={height}
+                  lang={syntaxCommand.current.lang}
+                  query={selectedArg.current.replace(aroundQuotesRegExp, '')}
+                  onSubmit={updateArgFromDedicatedEditor}
+                  onCancel={onCancelDedicatedEditor}
+                />
+            </div>
+          )}
+        </AutoSizer>
       )}
-    </>
+    </div>
   )
 }
 

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

@@ -1,3 +1,16 @@
+:global {
+  .editorBounder {
+    position: absolute;
+    top: 12px;
+    bottom: 6px;
+    left: 18px;
+    right: 46px;
+  }
+}
+.wrapper {
+  position: relative;
+  height: 100%;
+}
 .container {
   display: flex;
   padding: 8px 0 8px 16px;
@@ -11,6 +24,10 @@
   border: 1px solid var(--euiColorLightShade);
 }
 
+.disabled {
+  opacity: 0.8;
+}
+
 .containerPlaceholder {
   display: flex;
   padding: 8px 16px 8px 16px;

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

@@ -58,6 +58,11 @@
   font-size: 12px;
   cursor: pointer;
 
+  &:hover {
+    background: var(--hoverInListColorDarken);
+    border-color: var(--hoverInListColorLight);
+  }
+
   &__title {
     color: var(--euiTextSubduedColor);
   }