From 7740e3375bdfbe41fc37e9439cf6fe5c08990f66 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Fri, 8 Jun 2018 13:28:29 -0700
Subject: [PATCH 1/2] Group schema tree children in div

---
 ui/src/flux/components/DatabaseListItem.tsx   |  4 +--
 ui/src/flux/components/TagListItem.tsx        | 28 +++++++++----------
 ui/src/flux/components/TagValueListItem.tsx   |  4 +--
 .../time-machine/flux-explorer.scss           |  2 +-
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/ui/src/flux/components/DatabaseListItem.tsx b/ui/src/flux/components/DatabaseListItem.tsx
index d25e374fd2..a9eba5be52 100644
--- a/ui/src/flux/components/DatabaseListItem.tsx
+++ b/ui/src/flux/components/DatabaseListItem.tsx
@@ -87,7 +87,7 @@ class DatabaseListItem extends PureComponent<Props, State> {
 
     if (isOpen) {
       return (
-        <>
+        <div className="flux-schema--children">
           <div className="flux-schema--filter">
             <input
               className="form-control input-xs"
@@ -101,7 +101,7 @@ class DatabaseListItem extends PureComponent<Props, State> {
             />
           </div>
           <TagList db={db} service={service} tags={this.tags} filter={[]} />
-        </>
+        </div>
       )
     }
   }
diff --git a/ui/src/flux/components/TagListItem.tsx b/ui/src/flux/components/TagListItem.tsx
index 106b81f2da..1093f6da07 100644
--- a/ui/src/flux/components/TagListItem.tsx
+++ b/ui/src/flux/components/TagListItem.tsx
@@ -84,7 +84,7 @@ export default class TagListItem extends PureComponent<Props, State> {
           </CopyToClipboard>
         </div>
         {this.state.isOpen && (
-          <>
+          <div className="flux-schema--children">
             <div
               className="flux-schema--header"
               onClick={this.handleInputClick}
@@ -107,21 +107,19 @@ export default class TagListItem extends PureComponent<Props, State> {
             </div>
             {this.isLoading && <LoaderSkeleton />}
             {!this.isLoading && (
-              <>
-                <TagValueList
-                  db={db}
-                  service={service}
-                  values={tagValues}
-                  tagKey={tagKey}
-                  filter={filter}
-                  onLoadMoreValues={this.handleLoadMoreValues}
-                  isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
-                  shouldShowMoreValues={limit < count}
-                  loadMoreCount={this.loadMoreCount}
-                />
-              </>
+              <TagValueList
+                db={db}
+                service={service}
+                values={tagValues}
+                tagKey={tagKey}
+                filter={filter}
+                onLoadMoreValues={this.handleLoadMoreValues}
+                isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
+                shouldShowMoreValues={limit < count}
+                loadMoreCount={this.loadMoreCount}
+              />
             )}
-          </>
+          </div>
         )}
       </div>
     )
diff --git a/ui/src/flux/components/TagValueListItem.tsx b/ui/src/flux/components/TagValueListItem.tsx
index 277509ca42..ffc88b61ac 100644
--- a/ui/src/flux/components/TagValueListItem.tsx
+++ b/ui/src/flux/components/TagValueListItem.tsx
@@ -66,7 +66,7 @@ class TagValueListItem extends PureComponent<Props, State> {
           </CopyToClipboard>
         </div>
         {this.state.isOpen && (
-          <>
+          <div className="flux-schema--children">
             {this.isLoading && <LoaderSkeleton />}
             {!this.isLoading && (
               <>
@@ -92,7 +92,7 @@ class TagValueListItem extends PureComponent<Props, State> {
                 />
               </>
             )}
-          </>
+          </div>
         )}
       </div>
     )
diff --git a/ui/src/style/components/time-machine/flux-explorer.scss b/ui/src/style/components/time-machine/flux-explorer.scss
index 42a94dc940..635ff1dcce 100644
--- a/ui/src/style/components/time-machine/flux-explorer.scss
+++ b/ui/src/style/components/time-machine/flux-explorer.scss
@@ -22,7 +22,7 @@ $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;
   }
 }

From e657b052c22baa023e3a7be83b46bd3c6fef7762 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Fri, 8 Jun 2018 13:59:06 -0700
Subject: [PATCH 2/2] Preserve open state of schema tree children

---
 ui/src/flux/components/DatabaseListItem.tsx   | 34 ++++-----
 ui/src/flux/components/TagList.tsx            | 12 +--
 ui/src/flux/components/TagListItem.tsx        | 76 +++++++++----------
 ui/src/flux/components/TagValueListItem.tsx   | 60 +++++++--------
 .../time-machine/flux-explorer.scss           |  4 +
 5 files changed, 88 insertions(+), 98 deletions(-)

diff --git a/ui/src/flux/components/DatabaseListItem.tsx b/ui/src/flux/components/DatabaseListItem.tsx
index a9eba5be52..3b0795ea57 100644
--- a/ui/src/flux/components/DatabaseListItem.tsx
+++ b/ui/src/flux/components/DatabaseListItem.tsx
@@ -85,25 +85,23 @@ class DatabaseListItem extends PureComponent<Props, State> {
     const {db, service} = this.props
     const {isOpen, searchTerm} = this.state
 
-    if (isOpen) {
-      return (
-        <div className="flux-schema--children">
-          <div className="flux-schema--filter">
-            <input
-              className="form-control input-xs"
-              placeholder={`Filter within ${db}`}
-              type="text"
-              spellCheck={false}
-              autoComplete="off"
-              value={searchTerm}
-              onClick={this.handleInputClick}
-              onChange={this.onSearch}
-            />
-          </div>
-          <TagList db={db} service={service} tags={this.tags} filter={[]} />
+    return (
+      <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+        <div className="flux-schema--filter">
+          <input
+            className="form-control input-xs"
+            placeholder={`Filter within ${db}`}
+            type="text"
+            spellCheck={false}
+            autoComplete="off"
+            value={searchTerm}
+            onClick={this.handleInputClick}
+            onChange={this.onSearch}
+          />
         </div>
-      )
-    }
+        <TagList db={db} service={service} tags={this.tags} filter={[]} />
+      </div>
+    )
   }
 
   private handleClickCopy = e => {
diff --git a/ui/src/flux/components/TagList.tsx b/ui/src/flux/components/TagList.tsx
index 86295ad873..aea90cbb19 100644
--- a/ui/src/flux/components/TagList.tsx
+++ b/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
 
diff --git a/ui/src/flux/components/TagListItem.tsx b/ui/src/flux/components/TagListItem.tsx
index 1093f6da07..ec4f17314b 100644
--- a/ui/src/flux/components/TagListItem.tsx
+++ b/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,44 +90,37 @@ export default class TagListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <div className="flux-schema--children">
-            <div
-              className="flux-schema--header"
-              onClick={this.handleInputClick}
-            >
-              <div className="flux-schema--filter">
-                <input
-                  className="form-control input-xs"
-                  placeholder={`Filter within ${tagKey}`}
-                  type="text"
-                  spellCheck={false}
-                  autoComplete="off"
-                  value={searchTerm}
-                  onChange={this.onSearch}
-                />
-                {this.isSearching && (
-                  <LoadingSpinner style={this.spinnerStyle} />
-                )}
-              </div>
-              {this.count}
-            </div>
-            {this.isLoading && <LoaderSkeleton />}
-            {!this.isLoading && (
-              <TagValueList
-                db={db}
-                service={service}
-                values={tagValues}
-                tagKey={tagKey}
-                filter={filter}
-                onLoadMoreValues={this.handleLoadMoreValues}
-                isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
-                shouldShowMoreValues={limit < count}
-                loadMoreCount={this.loadMoreCount}
+        <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"
+                placeholder={`Filter within ${tagKey}`}
+                type="text"
+                spellCheck={false}
+                autoComplete="off"
+                value={searchTerm}
+                onChange={this.onSearch}
               />
-            )}
+              {this.isSearching && <LoadingSpinner style={this.spinnerStyle} />}
+            </div>
+            {this.count}
           </div>
-        )}
+          {this.isLoading && <LoaderSkeleton />}
+          {!this.isLoading && (
+            <TagValueList
+              db={db}
+              service={service}
+              values={tagValues}
+              tagKey={tagKey}
+              filter={filter}
+              onLoadMoreValues={this.handleLoadMoreValues}
+              isLoadingMoreValues={loadingMore === RemoteDataState.Loading}
+              shouldShowMoreValues={limit < count}
+              loadMoreCount={this.loadMoreCount}
+            />
+          )}
+        </div>
       </div>
     )
   }
@@ -313,7 +313,7 @@ export default class TagListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loadingAll === RemoteDataState.NotStarted ||
-        loadingAll !== RemoteDataState.Error)
+        loadingAll === RemoteDataState.Error)
     )
   }
 
diff --git a/ui/src/flux/components/TagValueListItem.tsx b/ui/src/flux/components/TagValueListItem.tsx
index ffc88b61ac..19b992658d 100644
--- a/ui/src/flux/components/TagValueListItem.tsx
+++ b/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,35 +65,33 @@ class TagValueListItem extends PureComponent<Props, State> {
             </div>
           </CopyToClipboard>
         </div>
-        {this.state.isOpen && (
-          <div className="flux-schema--children">
-            {this.isLoading && <LoaderSkeleton />}
-            {!this.isLoading && (
-              <>
-                {!!this.tags.length && (
-                  <div className="flux-schema--filter">
-                    <input
-                      className="form-control input-xs"
-                      placeholder={`Filter within ${value}`}
-                      type="text"
-                      spellCheck={false}
-                      autoComplete="off"
-                      value={searchTerm}
-                      onClick={this.handleInputClick}
-                      onChange={this.onSearch}
-                    />
-                  </div>
-                )}
-                <TagList
-                  db={db}
-                  service={service}
-                  tags={this.tags}
-                  filter={this.filter}
-                />
-              </>
-            )}
-          </div>
-        )}
+        <div className={`flux-schema--children ${isOpen ? '' : 'hidden'}`}>
+          {this.isLoading && <LoaderSkeleton />}
+          {!this.isLoading && (
+            <>
+              {!!this.tags.length && (
+                <div className="flux-schema--filter">
+                  <input
+                    className="form-control input-xs"
+                    placeholder={`Filter within ${value}`}
+                    type="text"
+                    spellCheck={false}
+                    autoComplete="off"
+                    value={searchTerm}
+                    onClick={this.handleInputClick}
+                    onChange={this.onSearch}
+                  />
+                </div>
+              )}
+              <TagList
+                db={db}
+                service={service}
+                tags={this.tags}
+                filter={this.filter}
+              />
+            </>
+          )}
+        </div>
       </div>
     )
   }
@@ -177,7 +175,7 @@ class TagValueListItem extends PureComponent<Props, State> {
     return (
       !isOpen &&
       (loading === RemoteDataState.NotStarted ||
-        loading !== RemoteDataState.Error)
+        loading === RemoteDataState.Error)
     )
   }
 }
diff --git a/ui/src/style/components/time-machine/flux-explorer.scss b/ui/src/style/components/time-machine/flux-explorer.scss
index 635ff1dcce..36a9831102 100644
--- a/ui/src/style/components/time-machine/flux-explorer.scss
+++ b/ui/src/style/components/time-machine/flux-explorer.scss
@@ -27,6 +27,10 @@ $flux-tree-gutter: 11px;
   }
 }
 
+.flux-schema--children.hidden {
+  display: none;
+}
+
 .flux-schema-tree__empty {
   height: $flux-tree-indent;
   display: flex;