[TTAHUB-278] grantee search page

frontend/src/App.js

@@ -31,6 +31,7 @@ import RequestPermissions from './components/RequestPermissions';
 import AriaLiveContext from './AriaLiveContext';
 import AriaLiveRegion from './components/AriaLiveRegion';
 import ApprovedActivityReport from './pages/ApprovedActivityReport';
+import GranteeSearch from './pages/GranteeSearch';
 
 function App() {
   const [user, updateUser] = useState();
@@ -140,6 +141,13 @@ function App() {
                 <RegionalDashboard user={user} />
               )}
             />
+            <Route
+              exact
+              path="/grantee-search"
+              render={() => (
+                <GranteeSearch user={user} />
+              )}
+            />
             <Route
               path="/admin"
               render={() => (

frontend/src/components/SiteNav.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink as Link, withRouter } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChartBar, faBorderAll } from '@fortawesome/free-solid-svg-icons';
+import { faChartBar, faBorderAll, faUserFriends } from '@fortawesome/free-solid-svg-icons';
 
 import './SiteNav.css';
 
@@ -88,16 +88,28 @@ const SiteNav = ({
                   </li>
                   {admin
                     ? (
-                      <li>
-                        <NavLink
-                          to="/regional-dashboard"
-                        >
-                          <span className="padding-right-105">
-                            <FontAwesomeIcon color="white" icon={faBorderAll} />
-                          </span>
-                          Regional Dashboard
-                        </NavLink>
-                      </li>
+                      <>
+                        <li>
+                          <NavLink
+                            to="/regional-dashboard"
+                          >
+                            <span className="padding-right-105">
+                              <FontAwesomeIcon color="white" icon={faBorderAll} />
+                            </span>
+                            Regional Dashboard
+                          </NavLink>
+                        </li>
+                        <li>
+                          <NavLink
+                            to="/grantee-search"
+                          >
+                            <span className="padding-right-1">
+                              <FontAwesomeIcon color="white" icon={faUserFriends} />
+                            </span>
+                            Grantees
+                          </NavLink>
+                        </li>
+                      </>
                     ) : null }
                 </ul>
               </div>

frontend/src/pages/GranteeSearch/__tests__/index.js

@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  fireEvent,
+  render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import GranteeSearch from '../index';
+import { SCOPE_IDS } from '../../../Constants';
+
+const userBluePrint = {
+  id: 1,
+  name: 'One',
+  role: 'Taco Alphabetizer',
+  homeRegionId: 1,
+  permissions: [],
+};
+
+describe('the grantee search page', () => {
+  const renderGranteeSearch = (user) => {
+    render(<GranteeSearch user={user} />);
+  };
+
+  it('renders the heading and the region select', async () => {
+    const user = {
+      ...userBluePrint,
+      permissions: [
+        {
+          userId: 1,
+          scopeId: SCOPE_IDS.READ_WRITE_ACTIVITY_REPORTS,
+          regionId: 1,
+        },
+        {
+          userId: 1,
+          scopeId: SCOPE_IDS.READ_WRITE_ACTIVITY_REPORTS,
+          regionId: 2,
+        },
+      ],
+    };
+    renderGranteeSearch(user);
+    expect(screen.getByRole('heading', { name: /grantee records/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /open the regional select menu/i })).toBeInTheDocument();
+  });
+
+  it('you can interact with the search box', () => {
+    const user = { ...userBluePrint };
+    renderGranteeSearch(user);
+    const searchBox = screen.getByRole('searchbox');
+    const button = screen.getByRole('button', { name: /search for matching grantees/i });
+    userEvent.type(searchBox, 'ground control?');
+    fireEvent.click(button);
+
+    // Todo - once there is more ui, this should be expanded
+    // to test what actually happens when the button is clicked
+
+    expect(button).toBeInTheDocument();
+    expect(searchBox).toBeInTheDocument();
+  });
+});

frontend/src/pages/GranteeSearch/index.css

@@ -0,0 +1,14 @@
+.ttahub-grantee-search .smart-hub--button-select-toggle-btn {
+  padding: 0.75rem;
+}
+
+.ttahub-grantee-search--search-input {
+    border-radius: 0.25rem 0 0 0.25rem;
+    height: auto;
+    padding: 0.5rem 0.25rem;
+    width: 480px;
+}
+
+.ttahub-grantee-search--submit-button {
+    border-radius: 0 0.25rem 0.25rem 0;
+}

frontend/src/pages/GranteeSearch/index.js

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { Grid } from '@trussworks/react-uswds';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import RegionalSelect from '../../components/RegionalSelect';
+import { getUserRegions } from '../../permissions';
+import './index.css';
+
+function GranteeSearch({ user }) {
+  const hasCentralOffice = user && user.homeRegionId && user.homeRegionId === 14;
+  const regions = getUserRegions(user);
+
+  // eslint-disable-next-line max-len
+  const [appliedRegion, setAppliedRegion] = useState(hasCentralOffice ? 14 : regions[0]);
+  const [query, setQuery] = useState('');
+
+  function onApplyRegion(region) {
+    setAppliedRegion(region.value);
+  }
+
+  function onSubmit(e) {
+    e.preventDefault();
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>Grantee Records Search</title>
+      </Helmet>
+      <div className="ttahub-grantee-search">
+        <h1 className="landing">Grantee Records</h1>
+        <Grid className="ttahub-grantee-search--filter-row flex-fill display-flex flex-align-center flex-align-self-center flex-row flex-wrap margin-bottom-2">
+          {regions.length > 1
+              && (
+                <div className="margin-right-2">
+                  <RegionalSelect
+                    regions={regions}
+                    onApply={onApplyRegion}
+                    hasCentralOffice={hasCentralOffice}
+                    appliedRegion={appliedRegion}
+                  />
+                </div>
+              )}
+          <form className="ttahub-grantee-search--search-form display-flex" onSubmit={onSubmit}>
+            <input type="search" name="search" value={query} className="ttahub-grantee-search--search-input" onChange={(e) => setQuery(e.target.value)} />
+            <button type="submit" className="ttahub-grantee-search--submit-button usa-button">
+              <FontAwesomeIcon color="white" icon={faSearch} />
+              {' '}
+              <span className="sr-only">Search for matching grantees</span>
+            </button>
+          </form>
+        </Grid>
+      </div>
+    </>
+  );
+}
+
+export default GranteeSearch;
+
+GranteeSearch.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    role: PropTypes.arrayOf(PropTypes.string),
+    homeRegionId: PropTypes.number,
+    permissions: PropTypes.arrayOf(PropTypes.shape({
+      userId: PropTypes.number,
+      scopeId: PropTypes.number,
+      regionId: PropTypes.number,
+    })),
+  }),
+};
+
+GranteeSearch.defaultProps = {
+  user: null,
+};