Added filtering option

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -13,6 +13,7 @@
     "antd": "^3.15.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-highlight-words": "^0.16.0",
     "react-router-config": "^5.0.0",
     "react-router-dom": "latest",
     "react-scripts": "2.1.8"

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/Apps.js

@@ -1,6 +1,7 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar} from "antd";
+import {Table, Divider, Tag, Card, PageHeader, Typography, Avatar,Input, Button, Icon} from "antd";
+import Highlighter from 'react-highlight-words';
 
 const Paragraph = Typography;
 
@@ -19,61 +20,7 @@ const routes = [
     },
 ];
 
-const columns = [{
+
-    title: '',
-    dataIndex: 'icon',
-    key: 'icon',
-    render: text => <Avatar size="large" src={text}/>,
-}, {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name',
-    render: text => <a href="javascript:;">{text}</a>,
-}, {
-    title: 'Platform',
-    dataIndex: 'platform',
-    key: 'platform',
-}, {
-    title: 'Type',
-    dataIndex: 'type',
-    key: 'type',
-}, {
-    title: 'Status',
-    key: 'status',
-    dataIndex: 'status',
-    render: tag => {
-          let color;
-          switch (tag) {
-              case 'published':
-                  color = 'green';
-                  break;
-              case 'removed':
-                  color = 'red'
-                  break;
-              case 'default':
-                  color = 'blue'
-          }
-          return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
-      },
-},  {
-    title: 'Published Version',
-    dataIndex: 'version',
-    key: 'version',
-},  {
-    title: 'Last Updated',
-    dataIndex: 'updated_at',
-    key: 'updated_at',
-},{
-    title: 'Action',
-    key: 'action',
-    render: () => (
-        <span>
-      <a href="javascript:;">Edit</a>
-      <Divider type="vertical" />
-      <a href="javascript:;">Manage</a>
-    </span>
-    ),
-}];
 
 
 const data = [{
@@ -108,12 +55,134 @@ const data = [{
 class Apps extends React.Component {
     routes;
 
+
+    state = {
+        searchText: '',
+    };
+
+
     constructor(props) {
         super(props);
         this.routes = props.routes;
     }
 
+    getColumnSearchProps = (dataIndex) => ({
+        filterDropdown: ({
+                             setSelectedKeys, selectedKeys, confirm, clearFilters,
+                         }) => (
+            <div style={{ padding: 8 }}>
+                <Input
+                    ref={node => { this.searchInput = node; }}
+                    placeholder={`Search ${dataIndex}`}
+                    value={selectedKeys[0]}
+                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+                    onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+                    style={{ width: 188, marginBottom: 8, display: 'block' }}
+                />
+                <Button
+                    type="primary"
+                    onClick={() => this.handleSearch(selectedKeys, confirm)}
+                    icon="search"
+                    size="small"
+                    style={{ width: 90, marginRight: 8 }}
+                >
+                    Search
+                </Button>
+                <Button
+                    onClick={() => this.handleReset(clearFilters)}
+                    size="small"
+                    style={{ width: 90 }}
+                >
+                    Reset
+                </Button>
+            </div>
+        ),
+        filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
+        onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
+        onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+                setTimeout(() => this.searchInput.select());
+            }
+        },
+        render: (text) => (
+            <Highlighter
+                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
+                searchWords={[this.state.searchText]}
+                autoEscape
+                textToHighlight={text.toString()}
+            />
+        ),
+    })
+
+    handleSearch = (selectedKeys, confirm) => {
+        confirm();
+        this.setState({ searchText: selectedKeys[0] });
+    }
+
+    handleReset = (clearFilters) => {
+        clearFilters();
+        this.setState({ searchText: '' });
+    }
+
+
     render() {
+        const columns = [{
+            title: '',
+            dataIndex: 'icon',
+            key: 'icon',
+            render: text => <Avatar size="large" src={text}/>,
+        }, {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+            render: text => <a href="javascript:;">{text}</a>,
+            ...this.getColumnSearchProps('name'),
+        }, {
+            title: 'Platform',
+            dataIndex: 'platform',
+            key: 'platform',
+        }, {
+            title: 'Type',
+            dataIndex: 'type',
+            key: 'type',
+        }, {
+            title: 'Status',
+            key: 'status',
+            dataIndex: 'status',
+            render: tag => {
+                let color;
+                switch (tag) {
+                    case 'published':
+                        color = 'green';
+                        break;
+                    case 'removed':
+                        color = 'red'
+                        break;
+                    case 'default':
+                        color = 'blue'
+                }
+                return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
+            },
+        },  {
+            title: 'Published Version',
+            dataIndex: 'version',
+            key: 'version',
+        },  {
+            title: 'Last Updated',
+            dataIndex: 'updated_at',
+            key: 'updated_at',
+        },{
+            title: 'Action',
+            key: 'action',
+            render: () => (
+                <span>
+      <a href="javascript:;">Edit</a>
+      <Divider type="vertical" />
+      <a href="javascript:;">Manage</a>
+    </span>
+            ),
+        }];
+
         return (
             <div>
                 <PageHeader