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,18 +24,32 @@ export default class TagList extends PureComponent<Props, State> {
   public render() {
     const {db, service, tags, filter} = this.props
 
+    if (tags.length) {
+      return (
+        <>
+          {tags.map(t => (
+            <TagListItem
+              key={t}
+              db={db}
+              tagKey={t}
+              service={service}
+              filter={filter}
+            />
+          ))}
+        </>
+      )
+    }
+
     return (
-      <>
+      <div className="ifql-schema-tree ifql-tree-node">
-        {tags.map(t => (
+        <div className="ifql-schema-item no-hover" onClick={this.handleClick}>
-          <TagListItem
+          <div className="no-results">No more tag keys.</div>
-            key={t}
+        </div>
-            db={db}
+      </div>
-            tagKey={t}
-            service={service}
-            filter={filter}
-          />
-        ))}
-      </>
     )
   }
+
+  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,18 +48,20 @@ class TagValueListItem extends PureComponent<Props, State> {
             {this.isLoading && <LoaderSkeleton />}
             {!this.isLoading && (
               <>
-                <div className="ifql-schema--filter">
+                {!!this.tags.length && (
-                  <input
+                  <div className="ifql-schema--filter">
-                    className="form-control input-sm"
+                    <input
-                    placeholder={`Filter within ${db}`}
+                      className="form-control input-sm"
-                    type="text"
+                      placeholder={`Filter within ${db}`}
-                    spellCheck={false}
+                      type="text"
-                    autoComplete="off"
+                      spellCheck={false}
-                    value={searchTerm}
+                      autoComplete="off"
-                    onClick={this.handleInputClick}
+                      value={searchTerm}
-                    onChange={this.onSearch}
+                      onClick={this.handleInputClick}
-                  />
+                      onChange={this.onSearch}
-                </div>
+                    />
+                  </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;
   }
 }
 
@@ -268,4 +271,4 @@ $ifql-tree-line: 2px;
     -webkit-transform: scale(1.0);
     transform: scale(1.0);
   }
-}
+}