Display message when TagList is empty

Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored-by: Chris Henn <chris.henn@influxdata.com>

ui/src/ifql/components/TagList.tsx

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react'
+import React, {PureComponent, MouseEvent} from 'react'
 
 import {SchemaFilter, Service} from 'src/types'
 import TagListItem from 'src/ifql/components/TagListItem'
@@ -24,6 +24,7 @@ export default class TagList extends PureComponent<Props, State> {
   public render() {
     const {db, service, tags, filter} = this.props
 
+    if (tags.length) {
       return (
         <>
           {tags.map(t => (
@@ -38,4 +39,17 @@ export default class TagList extends PureComponent<Props, State> {
         </>
       )
     }
+
+    return (
+      <div className="ifql-schema-tree ifql-tree-node">
+        <div className="ifql-schema-item no-hover" onClick={this.handleClick}>
+          <div className="no-results">No more tag keys.</div>
+        </div>
+      </div>
+    )
+  }
+
+  private handleClick(e: MouseEvent<HTMLDivElement>) {
+    e.stopPropagation()
+  }
 }

ui/src/ifql/components/TagValueList.tsx

@@ -61,12 +61,12 @@ export default class TagValueList extends PureComponent<Props> {
   }
 
   private get buttonValue(): string | JSX.Element {
-    const {isLoadingMoreValues, loadMoreCount} = this.props
+    const {isLoadingMoreValues, loadMoreCount, tagKey} = this.props
 
     if (isLoadingMoreValues) {
       return <LoadingSpinner />
     }
 
-    return `Load next ${loadMoreCount} values`
+    return `Load next ${loadMoreCount} values for ${tagKey}`
   }
 }

ui/src/ifql/components/TagValueListItem.tsx

@@ -48,6 +48,7 @@ class TagValueListItem extends PureComponent<Props, State> {
             {this.isLoading && <LoaderSkeleton />}
             {!this.isLoading && (
               <>
+                {!!this.tags.length && (
                   <div className="ifql-schema--filter">
                     <input
                       className="form-control input-sm"
@@ -60,6 +61,7 @@ class TagValueListItem extends PureComponent<Props, State> {
                       onChange={this.onSearch}
                     />
                   </div>
+                )}
                 <TagList
                   db={db}
                   service={service}

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

@@ -113,7 +113,10 @@ $ifql-tree-line: 2px;
   }
   .increase-values-limit {
     margin-left: 8px;
-    width: 160px;
+    padding: 0 10px;
+  }
+  .no-results {
+    margin-left: 8px;
   }
 }