Merge pull request #3609 from influxdata/flux/cache-metaqueries

Preserve schema tree children open state

ui/src/flux/components/DatabaseListItem.tsx

@@ -85,9 +85,8 @@ class DatabaseListItem extends PureComponent<Props, State> {
     const {db, service} = this.props
     const {isOpen, searchTerm} = this.state
 
-    if (isOpen) {
     return (
-        <>
+      <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
         <div className="flux-schema--filter">
           <input
             className="form-control input-xs"
@@ -101,10 +100,9 @@ class DatabaseListItem extends PureComponent<Props, State> {
           />
         </div>
         <TagList db={db} service={service} tags={this.tags} filter={[]} />
-        </>
+      </div>
     )
   }
-  }
 
   private handleClickCopy = e => {
     e.stopPropagation()

ui/src/flux/components/TagList.tsx

@@ -12,17 +12,7 @@ interface Props {
   filter: SchemaFilter[]
 }
 
-interface State {
-  isOpen: boolean
-}
-
-export default class TagList extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props)
-
-    this.state = {isOpen: false}
-  }
-
+export default class TagList extends PureComponent<Props> {
   public render() {
     const {db, service, tags, filter} = this.props
 

ui/src/flux/components/TagListItem.tsx

@@ -66,7 +66,14 @@ export default class TagListItem extends PureComponent<Props, State> {
 
   public render() {
     const {tagKey, db, service, filter} = this.props
-    const {tagValues, searchTerm, loadingMore, count, limit} = this.state
+    const {
+      tagValues,
+      searchTerm,
+      loadingMore,
+      count,
+      limit,
+      isOpen,
+    } = this.state
 
     return (
       <div className={this.className}>
@@ -83,12 +90,8 @@ export default class TagListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <>
-            <div
-              className="flux-schema--header"
-              onClick={this.handleInputClick}
-            >
+        <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+          <div className="flux-schema--header" onClick={this.handleInputClick}>
             <div className="flux-schema--filter">
               <input
                 className="form-control input-xs"
@@ -99,15 +102,12 @@ export default class TagListItem extends PureComponent<Props, State> {
                 value={searchTerm}
                 onChange={this.onSearch}
               />
-                {this.isSearching && (
-                  <LoadingSpinner style={this.spinnerStyle} />
-                )}
+              {this.isSearching && <LoadingSpinner style={this.spinnerStyle} />}
             </div>
             {this.count}
           </div>
           {this.isLoading && <LoaderSkeleton />}
           {!this.isLoading && (
-              <>
             <TagValueList
               db={db}
               service={service}
@@ -119,11 +119,9 @@ export default class TagListItem extends PureComponent<Props, State> {
               shouldShowMoreValues={limit < count}
               loadMoreCount={this.loadMoreCount}
             />
-              </>
-            )}
-          </>
           )}
         </div>
+      </div>
     )
   }
 
@@ -315,7 +313,7 @@ export default class TagListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loadingAll === RemoteDataState.NotStarted ||
-        loadingAll !== RemoteDataState.Error)
+        loadingAll === RemoteDataState.Error)
     )
   }
 

ui/src/flux/components/TagValueListItem.tsx

@@ -48,7 +48,7 @@ class TagValueListItem extends PureComponent<Props, State> {
 
   public render() {
     const {db, service, value} = this.props
-    const {searchTerm} = this.state
+    const {searchTerm, isOpen} = this.state
 
     return (
       <div className={this.className} onClick={this.handleClick}>
@@ -65,8 +65,7 @@ class TagValueListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <>
+        <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
           {this.isLoading && <LoaderSkeleton />}
           {!this.isLoading && (
             <>
@@ -92,8 +91,7 @@ class TagValueListItem extends PureComponent<Props, State> {
               />
             </>
           )}
-          </>
-        )}
+        </div>
       </div>
     )
   }
@@ -177,7 +175,7 @@ class TagValueListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loading === RemoteDataState.NotStarted ||
-        loading !== RemoteDataState.Error)
+        loading === RemoteDataState.Error)
     )
   }
 }

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

@@ -22,11 +22,15 @@ $flux-tree-gutter: 11px;
   flex-direction: column;
   align-items: stretch;
   padding-left: 0;
-  > .flux-schema-tree {
+  > .flux-schema--children > .flux-schema-tree {
     padding-left: $flux-tree-indent;
   }
 }
 
+.flux-schema--children.hidden {
+  display: none;
+}
+
 .flux-schema-tree__empty {
   height: $flux-tree-indent;
   display: flex;