Allow query title to be multiline

datahub/webapp/components/DataDoc/DataDocCellControl.tsx

@@ -215,6 +215,10 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
                 />
             )
         );
+    } else {
+        // In case center buttons are empty
+        // push an empty span to ensure the width
+        centerButtons.push(<span key="empty" />);
     }
 
     if (leftMenuItems.length) {
@@ -250,6 +254,7 @@ export const DataDocCellControl: React.FunctionComponent<IProps> = ({
                 </div>
             ) : null}
             {centerButtons}
+            <span>&nbsp;</span>
             {rightButtons.length ? (
                 <div className="block-right-buttons-wrapper flex-row">
                     {rightButtons}

datahub/webapp/components/DataDoc/DataDocContentContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+import { useResizeObserver } from 'hooks/useResizeObserver';
 
 const isChrome = /chrome/.test(navigator.userAgent.toLowerCase());
 
@@ -12,27 +13,20 @@ export const DataDocContentContainer: React.FunctionComponent = isChrome
           const [containerWidth, setContainerWidth] = useState(1200);
           const selfRef = React.useRef<HTMLDivElement>(null);
 
-          useEffect(() => {
-              let observer;
-
-              if (selfRef.current) {
-                  setContainerWidth(selfRef.current.offsetWidth);
-                  observer = new ResizeObserver((entries) => {
-                      for (const entry of entries) {
-                          if (entry.contentRect) {
-                              setContainerWidth(entry.contentRect.width);
-                          }
+          useResizeObserver(
+              selfRef.current,
+              useCallback((entries) => {
+                  for (const entry of entries) {
+                      if (entry.contentRect) {
+                          setContainerWidth(entry.contentRect.width);
                       }
-                  });
-                  observer.observe(selfRef.current);
-              }
-
-              return () => {
-                  if (observer) {
-                      observer.disconnect();
                   }
-              };
-          }, [selfRef.current]);
+              }, []),
+              useCallback(
+                  () => setContainerWidth(selfRef.current.offsetWidth),
+                  []
+              )
+          );
 
           return (
               <div ref={selfRef} className="data-doc-content-container">

datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.scss

@@ -50,19 +50,12 @@
     .query-title {
         flex: 1;
 
-        input.Title,
-        span {
+        .Title,
+        p {
             font-weight: bold;
-        }
-        input.Title {
             font-size: var(--large-text-size);
             color: var(--dark-text-color);
-            text-overflow: ellipsis;
-        }
-        span {
-            font-size: var(--med-text-size);
-            color: var(--light-text-color);
-            margin-right: 8px;
+            padding: 8px;
         }
     }
 

datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx

@@ -46,6 +46,7 @@ import { Modal } from 'ui/Modal/Modal';
 import { Title } from 'ui/Title/Title';
 
 import './DataDocQueryCell.scss';
+import { ResizableTextArea } from 'ui/ResizableTextArea/ResizableTextArea';
 
 const ON_CHANGE_DEBOUNCE_MS = 250;
 
@@ -539,17 +540,24 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         const { meta, selectedRange } = this.state;
 
         const queryTitleDOM = isEditable ? (
-            <DebouncedInput
+            <ResizableTextArea
                 value={meta.title}
                 onChange={this.handleMetaTitleChange}
-                inputProps={{
-                    placeholder: this.defaultCellTitle,
-                    className: 'Title',
-                }}
                 transparent
-                flex
+                placeholder={this.defaultCellTitle}
+                className="Title"
             />
         ) : (
+            // <DebouncedInput
+            //     value={meta.title}
+            //     onChange={this.handleMetaTitleChange}
+            //     inputProps={{
+            //         placeholder: this.defaultCellTitle,
+            //         className: 'Title',
+            //     }}
+            //     transparent
+            //     flex
+            // />
             <Title size={4}>{this.dataCellTitle}</Title>
         );
 
@@ -619,7 +627,7 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
         );
 
         const openSnippetDOM =
-            query.trim().length === 0 ? (
+            query.trim().length === 0 && isEditable ? (
                 <div className="add-snippet-wrapper flex-center">
                     <Button
                         title="Add Template"

datahub/webapp/hooks/useResizeObserver.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export function useResizeObserver(
+    element: HTMLElement,
+    onResize: (entries: ResizeObserverEntry[]) => void,
+    onResizeStart?: () => void
+) {
+    useEffect(() => {
+        let observer: ResizeObserver | undefined;
+
+        if (element) {
+            onResizeStart?.();
+            observer = new ResizeObserver(onResize);
+            observer.observe(element);
+        }
+
+        return () => {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, [element, onResize, onResizeStart]);
+}

datahub/webapp/ui/ResizableTextArea/ResizableTextArea.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { bind } from 'lodash-decorators';
+import { throttle } from 'lodash';
 import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
+import { useResizeObserver } from 'hooks/useResizeObserver';
 
 export interface IResizableTextareaProps
     extends Omit<
@@ -57,17 +58,22 @@ export const ResizableTextArea: React.FC<IResizableTextareaProps> = ({
     ...textareaProps
 }) => {
     const textareaRef = useRef<HTMLTextAreaElement>();
+    const autoHeight = useCallback(
+        throttle(() => {
+            if (textareaRef.current && autoResize) {
+                const textarea = textareaRef.current;
+                textarea.style.height = 'auto';
+                textarea.style.height = `${textarea.scrollHeight}px`;
+            }
+        }, 500),
+        [autoResize]
+    );
+
     useEffect(() => {
         autoHeight();
     }, [value, autoResize]);
 
-    const autoHeight = useCallback(() => {
-        if (textareaRef.current && autoResize) {
-            const textarea = textareaRef.current;
-            textarea.style.height = 'auto';
-            textarea.style.height = `${textarea.scrollHeight}px`;
-        }
-    }, [autoResize]);
+    useResizeObserver(textareaRef.current, autoHeight);
 
     const handleChange = useCallback(
         (evt: React.ChangeEvent<HTMLTextAreaElement>) => {