Add search functionality for searching community configs

jenkinsci · Jul 22, 2020 · ffb9c2e · ffb9c2e
1 parent e1dacab
commit ffb9c2e
Showing 1 changed file with 49 additions and 9 deletions.
diff --git a/frontend/src/components/CommunityConfiguration/communityConfigLayout.js b/frontend/src/components/CommunityConfiguration/communityConfigLayout.js
@@ -1,8 +1,9 @@
 import React from 'react'
 import PluginCard from '../PluginCards/pluginCard'
 import { Container, Row, Col, Button} from 'reactstrap';
-import { Pagination, PaginationItem, PaginationLink, Spinner } from 'reactstrap';
 import ConfigurationCard from './configurationCard';
+import { InputGroup, InputGroupAddon,Input, Label } from 'reactstrap';
+
 
 class communityConfigLayout extends React.Component {
 
@@ -17,19 +18,58 @@ class communityConfigLayout extends React.Component {
         const body = await response.json();
         this.setState({data: body})
     }
+
+    onchange = pluginName => {
+        console.log("Searching Plugins")
+        this.setState({search: pluginName.target.value})
+    }
 
     render() {
+        const search  = this.state.search
         let configurationCards;
-        configurationCards = this.state.data.map(config => {
-            return(
-                <Col sm="3">
-                    <ConfigurationCard config = {config} /> 
-                </Col>
-            )
-        }) 
+        console.log(this.state.data)
+        if (search !== "") {
+            configurationCards = this.state.data.map(config => {
+                if(!(config["name"].toLowerCase().indexOf( search.toLowerCase() ) === -1)) {
+                    return(
+                    <Col sm="3">
+                        <ConfigurationCard config = {config} /> 
+                    </Col>
+                    )
+                }
+            })    
+        } else {
+            configurationCards = this.state.data.map(config => {
+                if (search !== "" && config["name"].toLowerCase().indexOf( search.toLowerCase() ) === -1) {
+                    return null
+                }
+                return(
+                    <Col sm="3">
+                        <ConfigurationCard config = {config} /> 
+                    </Col>
+                )
+            })  
+        }   
 
         return(
-            <Container fluid style = {{height: "100vh"}}>
+            <Container fluid style = {{height: "100vh"}} class="column">
+            {/* Div to center align the search box */}
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center"
+                }} >
+
+
+            {/* Search Bar */}
+            <InputGroup style={{margin:"10px", width:"40%"}}>
+            <Input onChange = {this.onchange} />
+            <InputGroupAddon addonType="append">
+            <Button  style = {{backgroundColor:"#185ecc"}} >Search Community Config</Button>
+            </InputGroupAddon>
+            </InputGroup>
+            </div>
             <Row>
                 {configurationCards} 
              </Row>