fix(webapp): tag selector overflow (#1055)

* fix(webapp): query input overflow * fix(webapp): snapshots * chore: ChangeEvent<HTMLTextAreaElement> * chore: query form ctrl+enter submit * fix: deleted uncontrolled operations
grafana · Apr 27, 2022 · f7c7917 · f7c7917
1 parent a4dd7f6
commit f7c7917
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -230,6 +230,7 @@
     "react-svg-loader": "^3.0.3",
     "react-svg-spinner": "^1.0.4",
     "react-tabs": "^3.2.3",
+    "react-textarea-autosize": "8.3.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-localstorage": "^0.4.1",

diff --git a/webapp/javascript/components/TagsBar.tsx b/webapp/javascript/components/TagsBar.tsx
@@ -1,13 +1,15 @@
 import React, { useState, useEffect, useRef } from 'react';
 import Button from '@webapp/ui/Button';
 import 'react-dom';
+import { useWindowWidth } from '@react-hook/window-size';
 import { TagsState } from '@webapp/redux/reducers/continuous';
 import Dropdown, {
   SubMenu,
   MenuItem,
   FocusableItem,
   MenuGroup,
 } from '@webapp/ui/Dropdown';
+import TextareaAutosize from 'react-textarea-autosize';
 import { Prism } from '@webapp/util/prism';
 import { Query, brandQuery } from '@webapp/models/query';
 import styles from './TagsBar.module.css';
@@ -87,8 +89,11 @@ interface QueryInputProps {
 }
 
 function QueryInput({ initialQuery, onSubmit }: QueryInputProps) {
+  const windowWidth = useWindowWidth();
   const [query, setQuery] = useState(initialQuery);
   const codeRef = useRef<HTMLElement>(null);
+  const textareaRef = useRef<any>(null);
+  const [textAreaSize, setTextAreaSize] = useState({ width: 0, height: 0 });
 
   // If query updated upstream, most likely the application changed
   // So we prefer to use it
@@ -102,28 +107,49 @@ function QueryInput({ initialQuery, onSubmit }: QueryInputProps) {
     }
   }, [query]);
 
+  useEffect(() => {
+    setTextAreaSize({
+      width: textareaRef?.current?.['offsetWidth'] || 0,
+      height: textareaRef?.current?.['offsetHeight'] || 0,
+    });
+  }, [query, windowWidth, onSubmit]);
+
+  const onFormSubmit = (
+    e:
+      | React.FormEvent<HTMLFormElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    e.preventDefault();
+    onSubmit(query);
+  };
+
+  const handleTextareaKeyDown = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey) {
+      onFormSubmit(e);
+    }
+  };
+
   return (
-    <form
-      className="tags-query"
-      onSubmit={(e) => {
-        e.preventDefault();
-        onSubmit(query);
-      }}
-    >
+    <form className="tags-query" onSubmit={onFormSubmit}>
       <pre className="tags-highlighted language-promql" aria-hidden="true">
         <code
           className="language-promql"
           id="highlighting-content"
           ref={codeRef}
+          style={textAreaSize}
         >
           {query}
         </code>
       </pre>
-      <input
+      <TextareaAutosize
         className="tags-input"
-        type="text"
+        ref={textareaRef}
         value={query}
+        spellCheck="false"
         onChange={(e) => setQuery(brandQuery(e.target.value))}
+        onKeyDown={handleTextareaKeyDown}
       />
       <Button
         type="submit"

diff --git a/webapp/sass/components/tagsbar.scss b/webapp/sass/components/tagsbar.scss
@@ -4,13 +4,14 @@
 
 .tags-bar {
   display: flex;
-
+  align-items: flex-start;
   padding: 5px 0 15px;
 
   .tags-query {
     flex-grow: 1;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    position: relative;
   }
   .tags-app-name {
     position: relative;
@@ -31,10 +32,21 @@
     border-right: none;
     caret-color: var(--ps-c-white);
     color: var(--ps-c-gray-light-3);
-    // color: red;
-    letter-spacing: 0;
-    font-family: arial;
+    letter-spacing: 0px;
+    font-family: monospace;
     font-size: 16px;
+    border: 1px solid #4d4d4d;
+    padding: 0.25em 0.375em;
+    resize: none;
+    word-break: break-all;
+    box-sizing: border-box;
+    line-height: 27px;
+    white-space: break-spaces;
+    overflow: hidden;
+
+    &:focus {
+      outline: none;
+    }
   }
   .tags-query-execute {
     flex-grow: 1;
@@ -56,22 +68,31 @@
   .tags-highlighted {
     height: 0;
     width: 0;
-    margin-top: -17px;
-    margin-right: -7px;
     z-index: 1;
-    margin-left: 5px;
     pointer-events: none;
     overflow: inherit;
     background: none;
     padding: 0;
+    position: absolute;
+    margin: 0;
+    top: 0;
+
     code {
       font-size: 16px;
-      font-family: arial;
+      font-family: monospace;
       background: none;
-      border: none;
+      border: 1px solid transparent;
       box-shadow: none;
-      padding: 0;
+      padding: 0.25em 0.375em;
       margin: 0;
+      line-height: 27px;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      word-break: break-all;
+      white-space: break-spaces;
+      letter-spacing: 0px;
+      border-right: none;
     }
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -18624,6 +18624,15 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
+[email protected]:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.0.tgz#e6e2fd186d9f61bb80ac6e2dcb4c55504f93c2fa"
+  integrity sha512-3GLWFAan2pbwBeoeNDoqGmSbrShORtgWfaWX0RJDivsUrpShh01saRM5RU/i4Zmf+whpBVEY5cA90Eq8Ub1N3w==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.0.0"
+    use-latest "^1.0.0"
+
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"