fix(ui): add label from resource labels editor

ui/src/clockface/components/label/LabelSelector.scss

@@ -27,31 +27,14 @@
 
 .label-selector--menu {
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  min-height: 50px;
+  margin: $ix-marg-b;
 }
 
 .label-selector--menu-item {
-  display: flex;
-  align-items: center;
-  padding: $ix-marg-a $ix-marg-b;
-  color: $g13-mist;
-  transition: color 0.25s ease, background-color 0.25s ease;
-
-  &.active,
-  &.active:hover {
-    cursor: pointer;
-    color: $g18-cloud;
-    background-color: $g6-smoke;
-  }
+  margin: 1px;
 }
 
-.label-selector--label {
-  flex: 4 0 0
-}
-
-.label-selector--description,
 .label-selector--empty {
   font-size: 13px;
   font-weight: 500;
@@ -69,15 +52,10 @@
   line-height: 30px;
 }
 
-.label-selector--description {
-  margin-left: 6px;
-  color: $g13-mist;
-  flex: 2 0 50%;
-}
-
-.label-selector--bottom {
+.label-selector--selection {
   display: flex;
   flex-wrap: nowrap;
+  margin-bottom: $ix-marg-c;
 }
 
 .label-selector--remove-all {

ui/src/clockface/components/label/LabelSelector.tsx

@@ -2,6 +2,9 @@
 import React, {Component, ChangeEvent, KeyboardEvent} from 'react'
 import _ from 'lodash'
 
+// APIs
+import {client} from 'src/utils/api'
+
 // Components
 import {Button} from '@influxdata/clockface'
 import Input from 'src/clockface/components/inputs/Input'
@@ -12,7 +15,7 @@ import {ClickOutside} from 'src/shared/components/ClickOutside'
 
 // Types
 import {ComponentSize} from 'src/clockface/types'
-import {Label as LabelAPI} from '@influxdata/influx'
+import {Label as APILabel} from 'src/types/v2/labels'
 
 // Styles
 import './LabelSelector.scss'
@@ -25,18 +28,19 @@ enum ArrowDirection {
 }
 
 interface Props {
-  selectedLabels: LabelAPI[]
-  allLabels: LabelAPI[]
-  onAddLabel: (label: LabelAPI) => void
-  onRemoveLabel: (label: LabelAPI) => void
+  selectedLabels: APILabel[]
+  allLabels: APILabel[]
+  onAddLabel: (label: APILabel) => void
+  onRemoveLabel: (label: APILabel) => void
   onRemoveAllLabels: () => void
+  onCreateLabel: (label: APILabel) => void
   resourceType: string
   inputSize?: ComponentSize
 }
 
 interface State {
   filterValue: string
-  filteredLabels: LabelAPI[]
+  filteredLabels: APILabel[]
   isSuggesting: boolean
   highlightedID: string
 }
@@ -64,31 +68,21 @@ class LabelSelector extends Component<Props, State> {
     }
   }
 
-  public render() {
-    const {resourceType, inputSize} = this.props
-    const {filterValue} = this.state
+  public componentDidMount() {
+    this.handleStartSuggesting()
+  }
 
+  public render() {
     return (
-      <div className="label-selector">
-        <ClickOutside onClickOutside={this.handleStopSuggesting}>
-          <div className="label-selector--input">
-            <Input
-              placeholder={`Add labels to ${resourceType}`}
-              value={filterValue}
-              onFocus={this.handleStartSuggesting}
-              onKeyDown={this.handleKeyDown}
-              onChange={this.handleInputChange}
-              size={inputSize}
-              autoFocus={true}
-            />
-            {this.suggestionMenu}
+      <ClickOutside onClickOutside={this.handleStopSuggesting}>
+        <div className="label-selector">
+          <div className="label-selector--selection">
+            {this.selectedLabels}
+            {this.clearSelectedButton}
           </div>
-        </ClickOutside>
-        <div className="label-selector--bottom">
-          {this.selectedLabels}
-          {this.clearSelectedButton}
+          {this.input}
         </div>
-      </div>
+      </ClickOutside>
     )
   }
 
@@ -121,23 +115,45 @@ class LabelSelector extends Component<Props, State> {
 
   private get suggestionMenu(): JSX.Element {
     const {allLabels, selectedLabels} = this.props
-    const {isSuggesting, highlightedID} = this.state
+    const {isSuggesting, highlightedID, filterValue} = this.state
 
     const allLabelsUsed = allLabels.length === selectedLabels.length
 
     if (isSuggesting) {
       return (
         <LabelSelectorMenu
+          filterValue={filterValue}
           allLabelsUsed={allLabelsUsed}
           filteredLabels={this.availableLabels}
           highlightItemID={highlightedID}
           onItemClick={this.handleAddLabel}
           onItemHighlight={this.handleItemHighlight}
+          onCreateLabel={this.handleCreateLabel}
         />
       )
     }
   }
 
+  private get input(): JSX.Element {
+    const {resourceType, inputSize} = this.props
+    const {filterValue} = this.state
+
+    return (
+      <div className="label-selector--input">
+        <Input
+          placeholder={`Add labels to ${resourceType}`}
+          value={filterValue}
+          onFocus={this.handleStartSuggesting}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleInputChange}
+          size={inputSize}
+          autoFocus={true}
+        />
+        {this.suggestionMenu}
+      </div>
+    )
+  }
+
   private handleAddLabel = (labelID: string): void => {
     const {onAddLabel, allLabels} = this.props
 
@@ -184,20 +200,7 @@ class LabelSelector extends Component<Props, State> {
     )
 
     const filteredLabels = availableLabels.filter(label => {
-      const filterChars = _.lowerCase(filterValue)
-        .replace(/\s/g, '')
-        .split('')
-      const labelChars = _.lowerCase(label.name)
-        .replace(/\s/g, '')
-        .split('')
-
-      const overlap = _.difference(filterChars, labelChars)
-
-      if (overlap.length) {
-        return false
-      }
-
-      return true
+      return label.name.includes(filterValue)
     })
 
     const highlightedIDAvailable = filteredLabels.find(
@@ -208,10 +211,19 @@ class LabelSelector extends Component<Props, State> {
       highlightedID = filteredLabels[0].name
     }
 
+    if (filterValue.length === 0) {
+      return this.setState({
+        isSuggesting: true,
+        filteredLabels: this.props.allLabels,
+        highlightedID: null,
+        filterValue: '',
+      })
+    }
+
     this.setState({filterValue, filteredLabels, highlightedID})
   }
 
-  private get availableLabels(): LabelAPI[] {
+  private get availableLabels(): APILabel[] {
     const {selectedLabels} = this.props
     const {filteredLabels} = this.state
 
@@ -288,6 +300,12 @@ class LabelSelector extends Component<Props, State> {
       />
     )
   }
+
+  private handleCreateLabel = async (label: APILabel) => {
+    const newLabel = await client.labels.create(label.name, label.properties)
+    this.props.onAddLabel(newLabel)
+    this.handleStopSuggesting()
+  }
 }
 
 export default LabelSelector

ui/src/clockface/components/label/LabelSelectorMenu.tsx

@@ -5,19 +5,22 @@ import _ from 'lodash'
 // Components
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import LabelSelectorMenuItem from 'src/clockface/components/label/LabelSelectorMenuItem'
+import ResourceLabelForm from 'src/shared/components/ResourceLabelForm'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Label} from '@influxdata/influx'
+import {Label} from 'src/types/v2/labels'
 
 interface Props {
+  filterValue: string
   highlightItemID: string
   filteredLabels: Label[]
   onItemClick: (labelID: string) => void
   onItemHighlight: (labelID: string) => void
   allLabelsUsed: boolean
+  onCreateLabel: (label: Label) => Promise<void>
 }
 
 @ErrorHandling
@@ -26,7 +29,10 @@ class LabelSelectorMenu extends Component<Props> {
     return (
       <div className="label-selector--menu-container">
         <FancyScrollbar autoHide={false} autoHeight={true} maxHeight={250}>
-          <div className="label-selector--menu">{this.menuItems}</div>
+          <div className="label-selector--menu">
+            {this.resourceLabelForm}
+            {this.menuItems}
+          </div>
         </FancyScrollbar>
       </div>
     )
@@ -67,6 +73,18 @@ class LabelSelectorMenu extends Component<Props> {
 
     return 'No labels match your query'
   }
+
+  private get resourceLabelForm(): JSX.Element {
+    const {filterValue, onCreateLabel, filteredLabels} = this.props
+
+    if (!filterValue || filteredLabels.find(l => l.name === filterValue)) {
+      return
+    }
+
+    return (
+      <ResourceLabelForm labelName={filterValue} onSubmit={onCreateLabel} />
+    )
+  }
 }
 
 export default LabelSelectorMenu

ui/src/clockface/components/label/LabelSelectorMenuItem.tsx

@@ -1,6 +1,5 @@
 // Libraries
 import React, {Component} from 'react'
-import classnames from 'classnames'
 import _ from 'lodash'
 
 // Components
@@ -24,30 +23,21 @@ class LabelSelectorMenuItem extends Component<Props> {
     const {name, colorHex, description, id} = this.props
 
     return (
-      <div
-        className={this.className}
+      <span
+        className="label-selector--menu-item"
         onMouseOver={this.handleMouseOver}
         onClick={this.handleClick}
       >
-        <div className="label-selector--label">
-          <Label
-            name={name}
-            description={description}
-            id={id}
-            colorHex={colorHex}
-          />
-        </div>
-        <div className="label-selector--description">{description}</div>
-      </div>
+        <Label
+          name={name}
+          description={description}
+          id={id}
+          colorHex={colorHex}
+        />
+      </span>
     )
   }
 
-  private get className(): string {
-    const {highlighted} = this.props
-
-    return classnames('label-selector--menu-item', {active: highlighted})
-  }
-
   private handleMouseOver = (): void => {
     const {onHighlight, id} = this.props
 

ui/src/configuration/components/RandomLabelColor.scss

@@ -0,0 +1,17 @@
+@import 'src/style/modules';
+
+/*
+  RandomLabelColor Styles
+  ------------------------------------------------------------------------------
+*/
+
+.random-color--button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: $ix-marg-b;
+
+    .label-colors--swatch {
+        margin-right: $ix-marg-c;
+    }
+}