refactor(ui): misc polish on flows UI (influxdata#18378)

* refactor: allow spaces in cell names * refactor: make markdown cells easier to modify * refactor: make visualization cells look more like other cells
jspenc72 · Jun 5, 2020 · 074b955 · 074b955
1 parent ba14b4a
commit 074b955
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 30 deletions.
diff --git a/ui/src/notebooks/components/panel/NotebookPanelTitle.tsx b/ui/src/notebooks/components/panel/NotebookPanelTitle.tsx
@@ -19,8 +19,7 @@ const NotebookPanelTitle: FC<Props> = ({index}) => {
   let titleElement = <div className="notebook-panel--title">{title}</div>
 
   const onChange = (e: ChangeEvent<HTMLInputElement>): void => {
-    const trimmedValue = e.target.value.replace(' ', '_')
-    onTitleChange(trimmedValue)
+    onTitleChange(e.target.value)
   }
 
   titleElement = (

diff --git a/ui/src/notebooks/pipes/Visualization/style.scss b/ui/src/notebooks/pipes/Visualization/style.scss
@@ -1,10 +1,29 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
 .notebook-visualization {
-    min-height: 250px;
-
-    .empty-graph-error {
-        height: 200px;
-    }
-    .time-machine-tables {
-        height: 200px;
-    }
+  background-color: $g2-kevlar;
+  border-radius: $cf-radius;
+  border: $cf-border solid $g2-kevlar;
+  display: flex;
+  align-items: stretch;
+}
+
+.notebook-visualization--header {
+  width: 47px;
+  flex: 0 0 47px;
+}
+
+.notebook-visualization--view {
+  flex: 1 0 0;
+  border-radius: $cf-radius - 1px;
+  background-color: $g0-obsidian;
+  min-height: 200px;
+  padding: $cf-marg-b + $cf-marg-a;
+
+  .empty-graph-error {
+    height: 200px;
+  }
+  .time-machine-tables {
+    height: 200px;
+  }
 }
diff --git a/ui/src/notebooks/pipes/Visualization/view.tsx b/ui/src/notebooks/pipes/Visualization/view.tsx
@@ -90,21 +90,24 @@ const Visualization: FC<PipeProp> = ({
   return (
     <Context controls={controls}>
       <div className="notebook-visualization">
-        <EmptyQueryView
-          loading={loading}
-          errorMessage={results.error}
-          errorFormat={ErrorFormat.Scroll}
-          hasResults={checkResultsLength(results.parsed)}
-        >
-          <ViewSwitcher
-            giraffeResult={results.parsed}
-            files={[results.raw]}
+        <div className="notebook-visualization--header" />
+        <div className="notebook-visualization--view">
+          <EmptyQueryView
             loading={loading}
-            properties={data.properties}
-            timeZone={timeZone}
-            theme="dark"
-          />
-        </EmptyQueryView>
+            errorMessage={results.error}
+            errorFormat={ErrorFormat.Scroll}
+            hasResults={checkResultsLength(results.parsed)}
+          >
+            <ViewSwitcher
+              giraffeResult={results.parsed}
+              files={[results.raw]}
+              loading={loading}
+              properties={data.properties}
+              timeZone={timeZone}
+              theme="dark"
+            />
+          </EmptyQueryView>
+        </div>
       </div>
     </Context>
   )

diff --git a/ui/src/notebooks/pipes/markdown/MarkdownPanel.tsx b/ui/src/notebooks/pipes/markdown/MarkdownPanel.tsx
@@ -9,12 +9,21 @@ import {MarkdownMode} from './'
 import MarkdownModeToggle from './MarkdownModeToggle'
 import MarkdownMonacoEditor from 'src/shared/components/MarkdownMonacoEditor'
 import {MarkdownRenderer} from 'src/shared/components/views/MarkdownRenderer'
+import {ClickOutside} from '@influxdata/clockface'
 
 const MarkdownPanel: FC<PipeProp> = ({data, Context, onUpdate}) => {
   const handleToggleMode = (mode: MarkdownMode): void => {
     onUpdate({mode})
   }
 
+  const handleClickOutside = (): void => {
+    onUpdate({mode: 'preview'})
+  }
+
+  const handlePreviewClick = (): void => {
+    onUpdate({mode: 'edit'})
+  }
+
   const controls = (
     <MarkdownModeToggle mode={data.mode} onToggleMode={handleToggleMode} />
   )
@@ -24,16 +33,21 @@ const MarkdownPanel: FC<PipeProp> = ({data, Context, onUpdate}) => {
   }
 
   let panelContents = (
-    <MarkdownMonacoEditor
-      script={data.text}
-      onChangeScript={handleChange}
-      autogrow
-    />
+    <ClickOutside onClickOutside={handleClickOutside}>
+      <MarkdownMonacoEditor
+        script={data.text}
+        onChangeScript={handleChange}
+        autogrow
+      />
+    </ClickOutside>
   )
 
   if (data.mode === 'preview') {
     panelContents = (
-      <div className="notebook-panel--markdown markdown-format">
+      <div
+        className="notebook-panel--markdown markdown-format"
+        onClick={handlePreviewClick}
+      >
         <MarkdownRenderer text={data.text} />
       </div>
     )