Merge pull request #3664 from influxdata/flux/minor-ui-polish

Minor Flux Editor Polish

ui/src/flux/components/TimeMachine.tsx

@@ -25,7 +25,7 @@ interface Props {
   onSubmitScript: OnSubmitScript
   onAppendFrom: () => void
   onAppendJoin: () => void
-  onAnalyze: () => void
+  onValidate: () => void
 }
 
 interface Body extends FlatBody {
@@ -87,7 +87,7 @@ class TimeMachine extends PureComponent<Props> {
       script,
       status,
       service,
-      onAnalyze,
+      onValidate,
       suggestions,
       onChangeScript,
       onSubmitScript,
@@ -96,14 +96,15 @@ class TimeMachine extends PureComponent<Props> {
     return [
       {
         name: 'Script',
+        handlePixels: 44,
         headerOrientation: HANDLE_VERTICAL,
         headerButtons: [
           <div
-            key="analyze"
-            className="btn btn-default btn-xs analyze--button"
-            onClick={onAnalyze}
+            key="validate"
+            className="btn btn-default btn-xs validate--button"
+            onClick={onValidate}
           >
-            Analyze
+            Validate
           </div>,
         ],
         menuOptions: [],
@@ -120,6 +121,7 @@ class TimeMachine extends PureComponent<Props> {
       },
       {
         name: 'Explore',
+        handlePixels: 44,
         headerButtons: [],
         menuOptions: [],
         render: () => <SchemaExplorer service={service} />,

ui/src/flux/components/TimeMachineVis.tsx

@@ -54,7 +54,7 @@ class TimeMachineVis extends PureComponent<Props, State> {
             currentView={visType}
             onToggleView={this.selectVisType}
           />
-          <span>{yieldName}</span>
+          <div className="yield-node--name">{`"${yieldName}"`}</div>
         </div>
         <div className="yield-node--visualization">{this.vis}</div>
       </>

ui/src/flux/containers/FluxPage.tsx

@@ -7,7 +7,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import KeyboardShortcuts from 'src/shared/components/KeyboardShortcuts'
 
 import {
-  analyzeSuccess,
+  validateSuccess,
   fluxTimeSeriesError,
   fluxResponseTruncatedError,
 } from 'src/shared/copy/notifications'
@@ -109,7 +109,7 @@ export class FluxPage extends PureComponent<Props, State> {
               status={status}
               service={this.service}
               suggestions={suggestions}
-              onAnalyze={this.handleAnalyze}
+              onValidate={this.handleValidate}
               onAppendFrom={this.handleAppendFrom}
               onAppendJoin={this.handleAppendJoin}
               onChangeScript={this.handleChangeScript}
@@ -581,14 +581,14 @@ export class FluxPage extends PureComponent<Props, State> {
     }, '')
   }
 
-  private handleAnalyze = async () => {
+  private handleValidate = async () => {
     const {links, notify, script} = this.props
 
     try {
       const ast = await getAST({url: links.ast, body: script})
       const body = bodyNodes(ast, this.state.suggestions)
       const status = {type: 'success', text: ''}
-      notify(analyzeSuccess)
+      notify(validateSuccess())
 
       this.setState({ast, body, status})
     } catch (error) {

ui/src/shared/components/threesizer/Division.tsx

@@ -8,7 +8,11 @@ import classnames from 'classnames'
 import calculateSize from 'calculate-size'
 
 import DivisionHeader from 'src/shared/components/threesizer/DivisionHeader'
-import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
+import {
+  HANDLE_VERTICAL,
+  HANDLE_HORIZONTAL,
+  MIN_HANDLE_PIXELS,
+} from 'src/shared/constants/index'
 import {MenuItem} from 'src/shared/components/threesizer/DivisionMenu'
 
 const NOOP = () => {}
@@ -67,38 +71,41 @@ class Division extends PureComponent<Props> {
   }
 
   public render() {
-    const {name, render, draggable, menuOptions, headerButtons} = this.props
+    const {render} = this.props
     return (
       <div
         className={this.containerClass}
         style={this.containerStyle}
         ref={this.ref}
       >
-        <div
-          style={this.handleStyle}
-          title={this.title}
-          draggable={draggable}
-          onDragStart={this.drag}
-          className={this.handleClass}
-          onDoubleClick={this.handleDoubleClick}
-        >
-          <div className={this.titleClass}>{name}</div>
-        </div>
+        {this.renderDragHandle}
         <div className={this.contentsClass} style={this.contentStyle}>
-          {name && (
-            <DivisionHeader
-              buttons={headerButtons}
-              menuOptions={menuOptions}
-              onMinimize={this.handleMinimize}
-              onMaximize={this.handleMaximize}
-            />
-          )}
+          {this.renderHeader}
           <div className="threesizer--body">{render(this.visibility)}</div>
         </div>
       </div>
     )
   }
 
+  private get renderHeader(): JSX.Element {
+    const {name, headerButtons, menuOptions, orientation} = this.props
+
+    if (!name) {
+      return null
+    }
+
+    if (orientation === HANDLE_VERTICAL) {
+      return (
+        <DivisionHeader
+          buttons={headerButtons}
+          menuOptions={menuOptions}
+          onMinimize={this.handleMinimize}
+          onMaximize={this.handleMaximize}
+        />
+      )
+    }
+  }
+
   private get visibility(): string {
     if (this.props.size === 0) {
       return 'hidden'
@@ -123,6 +130,56 @@ class Division extends PureComponent<Props> {
     }
   }
 
+  private get renderDragHandle(): JSX.Element {
+    const {draggable} = this.props
+
+    return (
+      <div
+        style={this.handleStyle}
+        title={this.title}
+        draggable={draggable}
+        onDragStart={this.drag}
+        className={this.handleClass}
+        onDoubleClick={this.handleDoubleClick}
+      >
+        {this.renderDragHandleContents}
+      </div>
+    )
+  }
+
+  private get renderDragHandleContents(): JSX.Element {
+    const {
+      name,
+      handlePixels,
+      orientation,
+      headerButtons,
+      menuOptions,
+    } = this.props
+
+    if (!name) {
+      return
+    }
+
+    if (
+      orientation === HANDLE_HORIZONTAL &&
+      handlePixels >= MIN_HANDLE_PIXELS
+    ) {
+      return (
+        <DivisionHeader
+          buttons={headerButtons}
+          menuOptions={menuOptions}
+          onMinimize={this.handleMinimize}
+          onMaximize={this.handleMaximize}
+          name={name}
+        />
+      )
+    }
+
+    if (handlePixels >= MIN_HANDLE_PIXELS) {
+      return <div className={this.titleClass}>{name}</div>
+    }
+  }
+
   private get handleStyle(): CSSProperties {
     const {handleDisplay: display, orientation, handlePixels} = this.props
 
@@ -178,7 +235,7 @@ class Division extends PureComponent<Props> {
   }
 
   private get handleClass(): string {
-    const {draggable, orientation} = this.props
+    const {draggable, orientation, name} = this.props
 
     const collapsed = orientation === HANDLE_VERTICAL && this.isTitleObscured
 
@@ -188,6 +245,7 @@ class Division extends PureComponent<Props> {
       dragging: this.isDragging,
       vertical: orientation === HANDLE_VERTICAL,
       horizontal: orientation === HANDLE_HORIZONTAL,
+      named: name,
     })
   }
 

ui/src/shared/components/threesizer/DivisionHeader.tsx

@@ -8,18 +8,32 @@ interface Props {
   onMaximize: () => void
   buttons: JSX.Element[]
   menuOptions?: MenuItem[]
+  name?: string
 }
 
 class DivisionHeader extends PureComponent<Props> {
   public render() {
     return (
       <div className="threesizer--header">
-        {this.props.buttons.map(b => b)}
-        <DivisionMenu menuItems={this.menuItems} />
+        {this.renderName}
+        <div className="threesizer--header-controls">
+          {this.props.buttons.map(b => b)}
+          <DivisionMenu menuItems={this.menuItems} />
+        </div>
       </div>
     )
   }
 
+  private get renderName(): JSX.Element {
+    const {name} = this.props
+
+    if (!name) {
+      return
+    }
+
+    return <div className="threesizer--header-name">{name}</div>
+  }
+
   private get menuItems(): MenuItem[] {
     const {onMaximize, onMinimize, menuOptions} = this.props
     return [

ui/src/shared/constants/index.tsx

@@ -481,6 +481,7 @@ export const HANDLE_VERTICAL = 'vertical'
 export const HANDLE_HORIZONTAL = 'horizontal'
 export const HANDLE_NONE = 'none'
 export const HANDLE_PIXELS = 20
+export const MIN_HANDLE_PIXELS = 20
 export const MAX_SIZE = 1
 export const MIN_SIZE = 0
 

ui/src/shared/copy/notifications.ts

@@ -660,10 +660,10 @@ export const notifyKapacitorNotFound = () => ({
 })
 
 // Flux notifications
-export const analyzeSuccess = {
+export const validateSuccess = () => ({
   ...defaultSuccessNotification,
   message: 'No errors found. Happy Happy Joy Joy!',
-}
+})
 
 export const notifyCopyToClipboardSuccess = text => ({
   ...defaultSuccessNotification,

ui/src/style/components/code-mirror/_time-machine.scss

@@ -5,6 +5,7 @@
 */
 
 .cm-s-time-machine {
+  background-color: $g1-raven;
   color: $g11-sidewalk;
 
   .cm-variable {
@@ -46,4 +47,13 @@
   .cm-comment {
     color: $g8-storm;
   }
+
+  .CodeMirror-scrollbar-filler {
+    background-color: transparent;
+  }
+
+  .CodeMirror-vscrollbar,
+  .CodeMirror-hscrollbar {
+    @include custom-scrollbar-round($g1-raven, $g6-smoke);
+  }
 }

ui/src/style/components/threesizer.scss

@@ -149,6 +149,27 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   }
 }
 
+.threesizer--header-name {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $g11-sidewalk;
+  padding-left: 4px;
+  padding-right: 2px;
+}
+
+.threesizer--header-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+
+  > * {
+    margin-left: 4px;
+  }
+}
+
 .threesizer--body {
   .horizontal>&:only-child {
     width: 100%;
@@ -168,10 +189,6 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   margin-top: 10px;
 }
 
-.analyze--button {
-  margin-right: 3px
-}
-
 .dash-graph-context--button {
   width: 24px;
   height: 24px;
@@ -307,4 +324,25 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
 // Hide Header children when collapsed
 .threesizer--handle.vertical.threesizer--collapsed+.threesizer--contents>.threesizer--header>* {
   display: none;
-}
+}
+
+// When threesizer has horizontal handles, division headers appear inside
+// the drag handle and styles must adapt
+.threesizer--handle.horizontal.named {
+  background-color: transparent;
+  border: 0;
+
+  .threesizer--header {
+    border-right: 0;
+    border-bottom: 2px solid $g4-onyx;
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    transition: background-color 0.25s ease;
+  } 
+
+  &:hover .threesizer--header,
+  &.dragging .threesizer--header {
+    background-color: $g3-castle;
+  }
+}

ui/src/style/components/time-machine/flux-explorer.scss

@@ -14,6 +14,7 @@ $flux-tree-gutter: 11px;
   height: 100%;
   background-color: $g2-kevlar;
   min-width: $flux-tree-min-width;
+  padding-left: 30px;
 }
 
 .flux-schema-tree {

ui/src/style/components/time-machine/visualization.scss

@@ -27,6 +27,17 @@ $flux-builder-yield-tabs-max-width: 400px;
   background-color: $g3-castle;
   padding: $flux-node-padding;
   border-radius: $radius $radius 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.yield-node--name {
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 6px;
+  @include no-user-select();
+  color: $c-honeydew;
 }
 
 .yield-node--visualization {
@@ -56,8 +67,8 @@ $flux-builder-yield-tabs-max-width: 400px;
 }
 
 .yield-node--sidebar-filter.form-control.input-xs {
-    font-size: 12px;
-  }
+  font-size: 12px;
+}
 
 // Tabs
 .yield-node--tabs {
@@ -124,7 +135,11 @@ $flux-builder-yield-tabs-max-width: 400px;
   flex: 1 0 0;
   background-color: $g3-castle;
   overflow: hidden;
-  border-radius: 0 $radius $radius 0;
+  border-radius: 0 0 $radius $radius;
+
+  &:only-child {
+    border: 0;
+  }
 }
 
 // Line Graph

ui/test/flux/components/TimeMachine.test.tsx

@@ -12,7 +12,7 @@ const setup = () => {
     suggestions: [],
     onSubmitScript: () => {},
     onChangeScript: () => {},
-    onAnalyze: () => {},
+    onValidate: () => {},
     onAppendFrom: () => {},
     onAppendJoin: () => {},
     status: {type: '', text: ''},