Discource-C
/
discourse-data-explorer
mirror of https://github.com/discourse/discourse-data-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Reduce issues when debouncing schema search (#241) 

Previously the debounced value was both setting the filter value and
updating the input's text value. This causes visible UI issues, because
the debounce updating the input's text value would sometimes reset it,
especially if/when typing quickly.

This PR also uses sticky positioning for the search form, so that it
stays visible even when scrolling the list of schema tables.
This commit is contained in:
Penar Musaraj 2023-04-18 10:33:25 -04:00 committed by GitHub
parent 97d60de92a
commit 3907c49263
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assets/javascripts/discourse/components/explorer-schema.hbs
View File

@ -4,15 +4,12 @@
@icon="chevron-left" @icon="chevron-left"
@class="no-text unhide" @class="no-text unhide"
/> />
{{/if}} {{else}}
<div class="schema">
<div class="schema">
<div class={{if this.hideSchema "hidden"}}>
<div class="schema-search inline-form full-width"> <div class="schema-search inline-form full-width">
<TextField <input
@value={{this.filter}} type="text"
@onChange={{this.filterChanged}} {{on "input" (action "filterChanged" value="target.value")}}
@placeholderKey="explorer.schema.filter"
/> />
<DButton <DButton
@action={{this.collapseSchema}} @action={{this.collapseSchema}}
@ -21,14 +18,14 @@
/> />
</div> </div>
<ConditionalLoadingSpinner @condition={{this.loading}}> <div class="schema-container">
<div class="schema-container"> <ConditionalLoadingSpinner @condition={{this.loading}}>
<ul> <ul>
{{#each this.filteredTables as |table|}} {{#each this.filteredTables as |table|}}
<ExplorerSchema::OneTable @table={{table}} /> <ExplorerSchema::OneTable @table={{table}} />
{{/each}} {{/each}}
</ul> </ul>
</div> </ConditionalLoadingSpinner>
</ConditionalLoadingSpinner> </div>
</div> </div>
</div> {{/if}}

11
assets/stylesheets/explorer.scss
View File

@ -46,9 +46,6 @@ table.group-reports {
margin-left: -53px; margin-left: -53px;
z-index: 1; z-index: 1;
} }
.schema {
display: none;
}
} }
} }
@ -78,10 +75,16 @@ table.group-reports {
overflow-x: hidden; overflow-x: hidden;
color: var(--primary-high); color: var(--primary-high);
font-size: var(--font-down-1); font-size: var(--font-down-1);
position: relative;
.schema-search { .schema-search {
margin: 0.5em; padding: 0.5em;
position: sticky;
background-color: var(--secondary);
top: 0px;
z-index: 1;
} }
.schema-table-name { .schema-table-name {
font-weight: bold; font-weight: bold;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);