Merge 728d7a4 into 155506d

rapid7 · Aug 6, 2018 · 5f73104 · 5f73104
2 parents 155506d + 728d7a4
commit 5f73104
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 28 deletions.
diff --git a/src/containers/configure/Configure.js b/src/containers/configure/Configure.js
@@ -12,7 +12,7 @@ import {
   Row
 } from 'reactstrap';
 import {Logo} from '../components/Logo';
-import {RecentLogins} from './RecentLogins';
+import RecentLogins from './RecentLogins';
 import {ConfigureMetadata} from './ConfigureMetadata';
 import {
   RoundedContent,

diff --git a/src/containers/configure/RecentLogins.js b/src/containers/configure/RecentLogins.js
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import {ListGroup} from 'reactstrap';
+import {
+  ListGroup,
+  Input
+} from 'reactstrap';
 import {Login} from './Login';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 
 const ScrollableListGroup = styled(ListGroup)`
   overflow-x: hidden;
@@ -15,28 +19,82 @@ const RecentLoginsHeader = styled.h4`
   padding-top: 15px;
 `;
 
-export const RecentLogins = (({metadataUrls}) =>
-  (
-    <div id="recent-logins">
-      <RecentLoginsHeader>Recent Logins</RecentLoginsHeader>
-      <ScrollableListGroup>
-        {
-          metadataUrls.map(({url, name}, i) =>
-            (
-              <Login
-                key={url}
-                pretty={name}
-                profileId={i}
-                url={url}
-              />
-            )
-          )
-        }
-      </ScrollableListGroup>
-    </div>
-  )
-);
-
-RecentLogins.propTypes = {
-  metadataUrls: PropTypes.array.isRequired,
+const SearchContainer = styled.div`
+  position: absolute;
+  right: 0;
+  top: 10px;
+  width: 250px;
+`;
+
+const SearchIcon = styled(FontAwesomeIcon)`
+  position: absolute;
+  top: 11px;
+  left: 10px;
+`;
+
+const SearchInput = styled(Input)`
+  padding-left: 30px;
+`;
+
+const filterMetadataUrls = (metadataUrls, filterText) => {
+  if (!filterText) {
+    return metadataUrls;
+  }
+
+  const tokens = filterText.split(' ').map((token) => token.toLowerCase());
+
+  return metadataUrls.filter((metadataUrl) =>
+    tokens.every((token) =>
+      metadataUrl.name.toLowerCase().indexOf(token) !== -1
+        || metadataUrl.url.toLowerCase().indexOf(token) !== -1
+    )
+  );
 };
+
+class RecentLogins extends Component {
+  static propTypes = {
+    metadataUrls: PropTypes.array.isRequired,
+  }
+
+  state = {
+    filterText: '',
+  };
+
+  handleFilterInputChange = ({currentTarget: {value: filterText}}) => this.setState({filterText});
+
+  render() {
+    const metadataUrls = filterMetadataUrls(this.props.metadataUrls, this.state.filterText);
+
+    return (
+      <div
+        className="position-relative"
+        id="recent-logins"
+      >
+        <RecentLoginsHeader>Recent Logins</RecentLoginsHeader>
+        <SearchContainer>
+          <SearchInput onChange={this.handleFilterInputChange} />
+          <SearchIcon
+            color="grey"
+            icon={['fas', 'search']}
+          />
+        </SearchContainer>
+        <ScrollableListGroup>
+          {
+            metadataUrls.map(({url, name}, i) =>
+              (
+                <Login
+                  key={url}
+                  pretty={name}
+                  profileId={i}
+                  url={url}
+                />
+              )
+            )
+          }
+        </ScrollableListGroup>
+      </div>
+    );
+  }
+}
+
+export default RecentLogins;
diff --git a/src/index.js b/src/index.js
@@ -10,6 +10,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import fontawesome from '@fortawesome/fontawesome';
 import faCopy from '@fortawesome/fontawesome-free-regular/faCopy';
 import faTrashAlt from '@fortawesome/fontawesome-free-regular/faTrashAlt';
+import faSearch from '@fortawesome/fontawesome-free-solid/faSearch';
 import faExclamationTriangle from '@fortawesome/fontawesome-free-solid/faExclamationTriangle';
 
 import App from './containers/App';
@@ -54,7 +55,7 @@ injectGlobal`
 `;
 /* eslint-enable no-unused-expressions */
 
-fontawesome.library.add(faCopy, faTrashAlt, faExclamationTriangle);
+fontawesome.library.add(faCopy, faTrashAlt, faSearch, faExclamationTriangle);
 
 const target = document.querySelector('#root');