[SQL Lab] Lock result set controls to be always visible

apache · Apr 19, 2020 · 1cb5914 · 1cb5914
1 parent 083dd6a
commit 1cb5914
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 40 deletions.
diff --git a/superset-frontend/src/SqlLab/components/ResultSet.jsx b/superset-frontend/src/SqlLab/components/ResultSet.jsx
@@ -143,48 +143,42 @@ export default class ResultSet extends React.PureComponent {
       }
       return (
         <div className="ResultSetControls">
-          <div className="clearfix">
-            <div className="pull-left">
-              <ButtonGroup>
-                {this.props.visualize && (
-                  <ExploreResultsButton
-                    query={this.props.query}
-                    database={this.props.database}
-                    actions={this.props.actions}
-                  />
-                )}
-                {this.props.csv && (
-                  <Button
-                    bsSize="small"
-                    href={'/superset/csv/' + this.props.query.id}
-                  >
-                    <i className="fa fa-file-text-o" /> {t('.CSV')}
-                  </Button>
-                )}
+          <div className="ResultSetButtons">
+            {this.props.visualize && (
+              <ExploreResultsButton
+                query={this.props.query}
+                database={this.props.database}
+                actions={this.props.actions}
+              />
+            )}
+            {this.props.csv && (
+              <Button
+                bsSize="small"
+                href={'/superset/csv/' + this.props.query.id}
+              >
+                <i className="fa fa-file-text-o" /> {t('.CSV')}
+              </Button>
+            )}
 
-                <CopyToClipboard
-                  text={prepareCopyToClipboardTabularData(data)}
-                  wrapped={false}
-                  copyNode={
-                    <Button bsSize="small">
-                      <i className="fa fa-clipboard" /> {t('Clipboard')}
-                    </Button>
-                  }
-                />
-              </ButtonGroup>
-            </div>
-            <div className="pull-right">
-              {this.props.search && (
-                <input
-                  type="text"
-                  onChange={this.changeSearch}
-                  value={this.state.searchText}
-                  className="form-control input-sm"
-                  placeholder={t('Filter Results')}
-                />
-              )}
-            </div>
+            <CopyToClipboard
+              text={prepareCopyToClipboardTabularData(data)}
+              wrapped={false}
+              copyNode={
+                <Button bsSize="small">
+                  <i className="fa fa-clipboard" /> {t('Clipboard')}
+                </Button>
+              }
+            />
           </div>
+          {this.props.search && (
+            <input
+              type="text"
+              onChange={this.changeSearch}
+              value={this.state.searchText}
+              className="form-control input-sm"
+              placeholder={t('Filter Results')}
+            />
+          )}
         </div>
       );
     }

diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less
@@ -359,7 +359,21 @@ div.tablePopover {
 }
 
 .ResultSetControls {
+  display: flex;
+  justify-content: space-between;
   padding: 8px 0;
+  position: fixed;
+}
+
+.ResultSetButtons {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 4px;
+  padding-right: 8px;
+}
+
+.filterable-table-container {
+  margin-top: 48px;
 }
 
 .ace_editor {