Merge pull request #3382 from swagger-api/moved-filter

Moved filter search to within layout

Author: shockey

src/core/components/layouts/base.jsx

@@ -13,8 +13,13 @@ export default class BaseLayout extends React.Component {
     getComponent: PropTypes.func.isRequired
   }
 
+  onFilterChange =(e) => {
+    let {target: {value}} = e
+    this.props.layoutActions.updateFilter(value)
+  }
+
   render() {
-    let { specSelectors, specActions, getComponent } = this.props
+    let { specSelectors, specActions, getComponent, layoutSelectors } = this.props
 
     let info = specSelectors.info()
     let url = specSelectors.url()
@@ -31,6 +36,15 @@ export default class BaseLayout extends React.Component {
     let Row = getComponent("Row")
     let Col = getComponent("Col")
     let Errors = getComponent("errors", true)
+
+    let isLoading = specSelectors.loadingStatus() === "loading"
+    let isFailed = specSelectors.loadingStatus() === "failed"
+    let filter = layoutSelectors.currentFilter()
+
+    let inputStyle = {}
+    if(isFailed) inputStyle.color = "red"
+    if(isLoading) inputStyle.color = "#aaa"
+
     const Schemes = getComponent("schemes")
 
     const isSpecEmpty = !specSelectors.specStr()
@@ -57,13 +71,23 @@ export default class BaseLayout extends React.Component {
                   { schemes && schemes.size ? (
                     <Schemes schemes={ schemes } specActions={ specActions } />
                   ) : null }
+
                   { securityDefinitions ? (
                     <AuthorizeBtn />
                   ) : null }
                 </Col>
               </div>
             ) : null }
 
+            {
+              filter === null || filter === false ? null :
+                <div className="filter-container">
+                  <Col className="filter wrapper" mobile={12}>
+                    <input className="operation-filter-input" placeholder="Filter by tag" type="text" onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter} disabled={isLoading} style={inputStyle} />
+                  </Col>
+                </div>
+            }
+
             <Row>
               <Col mobile={12} desktop={12} >
                 <Operations/>

src/plugins/topbar/topbar.jsx

@@ -7,7 +7,6 @@ import Logo from "./logo_small.png"
 export default class Topbar extends React.Component {
 
   static propTypes = {
-    layoutSelectors: PropTypes.object.isRequired,
     layoutActions: PropTypes.object.isRequired
   }
 
@@ -91,13 +90,12 @@ export default class Topbar extends React.Component {
   }
 
   render() {
-    let { getComponent, specSelectors, getConfigs, layoutSelectors } = this.props
+    let { getComponent, specSelectors, getConfigs } = this.props
     const Button = getComponent("Button")
     const Link = getComponent("Link")
 
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
-    let filter = layoutSelectors.currentFilter()
 
     let inputStyle = {}
     if(isFailed) inputStyle.color = "red"
@@ -135,10 +133,6 @@ export default class Topbar extends React.Component {
               <img height="30" width="30" src={ Logo } alt="Swagger UX"/>
               <span>swagger</span>
             </Link>
-            {
-              filter === null || filter === false ? null :
-                <input className="operation-filter-input" placeholder="filter..." type="text" onChange={this.onFilterChange} value={filter === true ? "" : filter} disabled={isLoading} style={inputStyle} />
-            }
             <form className="download-url-wrapper" onSubmit={formOnSubmit}>
               {control}
             </form>

src/style/_layout.scss

@@ -327,6 +327,18 @@ body
     }
 }
 
+.filter
+{
+    .operation-filter-input
+    {
+        width: 100%;
+        margin: 20px 0;
+        padding: 10px 10px;
+
+        border: 2px solid #d8dde7;
+    }
+}
+
 
 .tab
 {

src/style/_topbar.scss

@@ -29,12 +29,6 @@
             padding: 0 10px;
         }
     }
-    .operation-filter-input
-    {
-        border: 2px solid #547f00;
-        border-right: none;
-        border-radius: 4px 0 0 4px;
-    }
 
     .download-url-wrapper
     {
@@ -49,7 +43,6 @@
             margin: 0;
 
             border: 2px solid #547f00;
-            border-radius: 0 0 0 0;
             outline: none;
         }