From 5cb68f2c7191c730355b6692adf75ca33668da6f Mon Sep 17 00:00:00 2001
From: cgu <cgu@pinterest.com>
Date: Mon, 4 Jan 2021 12:38:14 -0500
Subject: [PATCH 1/3] Allow query title to be multiline

---
 .../webapp/components/DataDoc/DataDoc.scss    |  2 +-
 .../components/DataDoc/DataDocCellControl.tsx |  5 +++
 .../DataDoc/DataDocContentContainer.tsx       | 34 ++++++++-----------
 .../DataDocQueryCell/DataDocQueryCell.scss    | 13 ++-----
 .../DataDocQueryCell/DataDocQueryCell.tsx     | 22 ++++++++----
 datahub/webapp/hooks/useResizeObserver.ts     | 23 +++++++++++++
 .../ResizableTextArea/ResizableTextArea.tsx   | 22 +++++++-----
 7 files changed, 75 insertions(+), 46 deletions(-)
 create mode 100644 datahub/webapp/hooks/useResizeObserver.ts

diff --git a/datahub/webapp/components/DataDoc/DataDoc.scss b/datahub/webapp/components/DataDoc/DataDoc.scss
index 00a5b63df..e1af0e8a7 100644
--- a/datahub/webapp/components/DataDoc/DataDoc.scss
+++ b/datahub/webapp/components/DataDoc/DataDoc.scss
@@ -149,7 +149,7 @@
                     }
 
                     .block-crud-buttons {
-                        opacity: 0;
+                        opacity: 1;
                         top: -17px;
                         position: relative;
                         text-align: center;
diff --git a/datahub/webapp/components/DataDoc/DataDocCellControl.tsx b/datahub/webapp/components/DataDoc/DataDocCellControl.tsx
index 718a8e834..8038d4617 100644
--- a/datahub/webapp/components/DataDoc/DataDocCellControl.tsx
+++ b/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}
diff --git a/datahub/webapp/components/DataDoc/DataDocContentContainer.tsx b/datahub/webapp/components/DataDoc/DataDocContentContainer.tsx
index 3359265bf..335fe224e 100644
--- a/datahub/webapp/components/DataDoc/DataDocContentContainer.tsx
+++ b/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">
diff --git a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.scss b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.scss
index bb7025c32..63c9e91e3 100644
--- a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.scss
+++ b/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;
         }
     }
 
diff --git a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
index c1a7f7be3..7e10fac48 100644
--- a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
+++ b/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"
diff --git a/datahub/webapp/hooks/useResizeObserver.ts b/datahub/webapp/hooks/useResizeObserver.ts
new file mode 100644
index 000000000..10e38e24e
--- /dev/null
+++ b/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]);
+}
diff --git a/datahub/webapp/ui/ResizableTextArea/ResizableTextArea.tsx b/datahub/webapp/ui/ResizableTextArea/ResizableTextArea.tsx
index 3d93a1717..d27fb16fb 100644
--- a/datahub/webapp/ui/ResizableTextArea/ResizableTextArea.tsx
+++ b/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>) => {

From c44f2e25a309a07dd644c636465a6970357a8536 Mon Sep 17 00:00:00 2001
From: cgu <cgu@pinterest.com>
Date: Mon, 4 Jan 2021 14:33:32 -0500
Subject: [PATCH 2/3] remove debug

---
 datahub/webapp/components/DataDoc/DataDoc.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/datahub/webapp/components/DataDoc/DataDoc.scss b/datahub/webapp/components/DataDoc/DataDoc.scss
index e1af0e8a7..00a5b63df 100644
--- a/datahub/webapp/components/DataDoc/DataDoc.scss
+++ b/datahub/webapp/components/DataDoc/DataDoc.scss
@@ -149,7 +149,7 @@
                     }
 
                     .block-crud-buttons {
-                        opacity: 1;
+                        opacity: 0;
                         top: -17px;
                         position: relative;
                         text-align: center;

From 89fa1486d187fac067fa671f247970a9ecfa14f4 Mon Sep 17 00:00:00 2001
From: cgu <cgu@pinterest.com>
Date: Mon, 4 Jan 2021 15:04:37 -0500
Subject: [PATCH 3/3] Removed commented out

---
 .../components/DataDocQueryCell/DataDocQueryCell.tsx   | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
index 7e10fac48..b152cf246 100644
--- a/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
+++ b/datahub/webapp/components/DataDocQueryCell/DataDocQueryCell.tsx
@@ -548,16 +548,6 @@ class DataDocQueryCellComponent extends React.Component<IProps, IState> {
                 className="Title"
             />
         ) : (
-            // <DebouncedInput
-            //     value={meta.title}
-            //     onChange={this.handleMetaTitleChange}
-            //     inputProps={{
-            //         placeholder: this.defaultCellTitle,
-            //         className: 'Title',
-            //     }}
-            //     transparent
-            //     flex
-            // />
             <Title size={4}>{this.dataCellTitle}</Title>
         );