Resolving issue #6746

Replaced all instances of 'EmailBlocks'/'email-blocks' with 'AccountSearch'/'account-search' in the admin-panel.

Removed unused variables in the AdminLogs/index.tsx file, chose to import all svg files for the Nav icons, and added a new AccountHistory folder under AccountSearch.

Deleted any empty files, since these were resulting in failed CircleCI tests.

packages/fxa-admin-panel/README.md

@@ -40,8 +40,8 @@ This package uses [Jest](https://jestjs.io/) to test both the frontend and serve
 Test specific tests with the following commands:
 
 ```bash
-# Test frontend tests for the component EmailBlocks
-yarn test:frontend EmailBlocks
+# Test frontend tests for the component AccountSearch
+yarn test:frontend AccountSearch
 
 # Grep frontend tests for "displays the error"
 yarn test:frontend -t "displays the error"

packages/fxa-admin-panel/server/lib/server.ts

@@ -149,7 +149,7 @@ if (proxyUrl) {
     { encoding: 'utf-8' }
   );
 
-  ['/', '/email-blocks'].forEach((route) => {
+  ['/', '/account-search'].forEach((route) => {
     // FIXME: should set ETag, Not-Modified:
     app.get(route, (req, res) => {
       res.send(injectHtmlConfig(STATIC_INDEX_HTML, CLIENT_CONFIG));

packages/fxa-admin-panel/src/App.tsx

@@ -5,14 +5,19 @@
 import React from 'react';
 import { Switch, Redirect, Route, BrowserRouter } from 'react-router-dom';
 import AppLayout from './components/AppLayout';
-import EmailBlocks from './components/EmailBlocks';
+import AccountSearch from './components/AccountSearch';
+import AdminLogs from './components/AdminLogs';
 
 const App = () => (
   <BrowserRouter>
     <AppLayout>
       <Switch>
-        <Redirect exact from="/" to="/email-blocks" />
-        <Route path="/email-blocks" component={EmailBlocks} />
+        <Redirect exact from="/" to="/admin-logs" />
+        <Route path="/admin-logs" component={AdminLogs} />
+      </Switch>
+      <Switch>
+        <Redirect exact from="/" to="/account-search" />
+        <Route path="/account-search" component={AccountSearch} />
       </Switch>
     </AppLayout>
   </BrowserRouter>

packages/fxa-admin-panel/src/components/AccountSearch/index.scss

@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-.email-blocks {
+.account-search {
   form {
     flex-wrap: wrap;
     margin-top: 30px;

packages/fxa-admin-panel/src/components/AccountSearch/index.test.tsx

@@ -8,7 +8,7 @@ import { render, fireEvent, act } from '@testing-library/react';
 import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import '@testing-library/jest-dom/extend-expect';
 import { CLEAR_BOUNCES_BY_EMAIL } from './Account/index';
-import { GET_ACCOUNT_BY_EMAIL, EmailBlocks } from './index';
+import { GET_ACCOUNT_BY_EMAIL, AccountSearch } from './index';
 
 const chance = new Chance();
 let testEmail: string;
@@ -107,7 +107,7 @@ beforeEach(() => {
 });
 
 it('renders without imploding', () => {
-  const renderResult = render(<EmailBlocks />);
+  const renderResult = render(<AccountSearch />);
   const getByTestId = renderResult.getByTestId;
 
   expect(getByTestId('search-form')).toBeInTheDocument();
@@ -127,7 +127,7 @@ it('displays the account email bounces, and can clear them', async () => {
       ]}
       addTypename={false}
     >
-      <EmailBlocks />
+      <AccountSearch />
     </MockedProvider>
   );
   let getByTestId = renderResult.getByTestId;
@@ -168,7 +168,7 @@ it('displays the error state if there is an error', async () => {
 
   const renderResult = render(
     <MockedProvider mocks={[erroredAccountResponse]} addTypename={false}>
-      <EmailBlocks />
+      <AccountSearch />
     </MockedProvider>
   );
   let getByTestId = renderResult.getByTestId;

packages/fxa-admin-panel/src/components/AccountSearch/index.tsx

@@ -49,7 +49,7 @@ export const GET_ACCOUNT_BY_EMAIL = gql`
   }
 `;
 
-export const EmailBlocks = () => {
+export const AccountSearch = () => {
   const [inputValue, setInputValue] = useState<string>('');
   const [showResult, setShowResult] = useState<Boolean>(false);
   const [getAccount, { loading, error, data, refetch }] = useLazyQuery(
@@ -64,8 +64,8 @@ export const EmailBlocks = () => {
   };
 
   return (
-    <div className="email-blocks" data-testid="email-blocks">
-      <h2>Find and Delete Email Blocks</h2>
+    <div className="account-search" data-testid="account-search">
+      <h2>Account Search</h2>
       <p>
         Email addresses are blocked from the FxA email sender when an email sent
         to the address has bounced.
@@ -91,7 +91,7 @@ export const EmailBlocks = () => {
           data-testid="email-input"
         />
         <button
-          className="email-blocks-search-button"
+          className="account-search-search-button"
           title="search"
           data-testid="search-button"
         ></button>
@@ -139,4 +139,4 @@ const AccountSearchResult = ({
   return <p data-testid="no-account-message">Account not found.</p>;
 };
 
-export default EmailBlocks;
+export default AccountSearch;

packages/fxa-admin-panel/src/components/AdminLogs/index.scss

@@ -0,0 +1,20 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+.admin-logs {
+    form {
+      flex-wrap: wrap;
+      margin-top: 30px;
+    }
+  
+    label {
+      color: var(--color-black-80);
+      flex-basis: 100%;
+      font-size: var(--body-font-size-xs);
+      font-weight: var(--font-weight-normal);
+      margin-bottom: 5px;
+      text-transform: uppercase;
+    }
+}
+  

packages/fxa-admin-panel/src/components/AdminLogs/index.tsx

@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import './index.scss';
+
+export const AdminLogs = () => {
+  return (
+    <div className="admin-logs">
+      <h2>Admin Logs</h2>
+      <p>
+        This is a read-only view of all administrative changes that have been
+        done to any user account.
+      </p>
+    </div>
+  );
+};
+
+export default AdminLogs;

packages/fxa-admin-panel/src/components/Nav/index.tsx

@@ -5,6 +5,9 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import './index.scss';
+import mailIcon from '../../images/icon-mail.svg';
+import statusIcon from '../../images/icon-site-status.svg';
+import logsIcon from '../../images/icon-logs.svg';
 
 export const Nav = () => (
   <nav>
@@ -12,13 +15,33 @@ export const Nav = () => (
       <h2>Navigation</h2>
       <ul>
         <li>
-          <NavLink exact to="/email-blocks">
+          <NavLink exact to="/account-search">
             <img
               className="inline-flex icon"
-              src={require('../../images/icon-mail.svg')}
+              src={mailIcon}
               alt="external link"
             />
-            Email blocks
+            Account Search
+          </NavLink>
+        </li>
+        <li>
+          <NavLink exact to="/site-status">
+            <img
+              className="inline-flex icon"
+              src={statusIcon}
+              alt="external link"
+            />
+            Site Status
+          </NavLink>
+        </li>
+        <li>
+          <NavLink exact to="/admin-logs">
+            <img
+              className="inline-flex icon"
+              src={logsIcon}
+              alt="external link"
+            />
+            Admin Logs
           </NavLink>
         </li>
       </ul>

packages/fxa-admin-panel/src/images/icon-logs.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="150.000000pt" height="150.000000pt" viewBox="0 0 150.000000 150.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M282 1488 c-7 -7 -12 -29 -12 -50 l0 -38 -63 0 c-36 0 -68 -5 -75
+-12 -17 -17 -17 -1359 0 -1376 17 -17 1069 -17 1086 0 7 7 12 39 12 75 l0 63
+63 0 c36 0 68 5 75 12 9 9 12 132 12 492 l0 480 -183 183 -183 183 -360 0
+c-267 0 -363 -3 -372 -12z m688 -201 c0 -113 4 -167 12 -175 8 -8 62 -12 175
+-12 l163 0 0 -450 0 -450 -495 0 -495 0 0 625 0 625 320 0 320 0 0 -163z m190
+-12 l125 -125 -128 0 -127 0 0 125 c0 69 1 125 3 125 1 0 58 -56 127 -125z
+m-890 -513 c0 -444 3 -591 12 -600 9 -9 123 -12 450 -12 l438 0 0 -50 0 -50
+-495 0 -495 0 0 650 0 650 45 0 45 0 0 -588z"/>
+<path d="M426 1254 c-3 -9 -6 -46 -6 -84 0 -91 9 -100 105 -100 96 0 105 9
+105 100 0 103 3 100 -105 100 -75 0 -94 -3 -99 -16z m144 -84 l0 -50 -45 0
+-45 0 0 50 0 50 45 0 45 0 0 -50z"/>
+<path d="M593 1023 c-18 -7 -16 -40 3 -47 20 -8 588 -8 608 0 21 8 21 40 0 48
+-19 7 -593 7 -611 -1z"/>
+<path d="M430 1000 c0 -12 9 -22 24 -26 35 -8 66 4 66 27 0 16 -7 19 -45 19
+-38 0 -45 -3 -45 -20z"/>
+<path d="M593 873 c-18 -7 -16 -40 3 -47 20 -8 588 -8 608 0 21 8 21 40 0 48
+-19 7 -593 7 -611 -1z"/>
+<path d="M430 850 c0 -12 9 -22 24 -26 35 -8 66 4 66 27 0 16 -7 19 -45 19
+-38 0 -45 -3 -45 -20z"/>
+<path d="M593 723 c-18 -7 -16 -40 3 -47 20 -8 588 -8 608 0 21 8 21 40 0 48
+-19 7 -593 7 -611 -1z"/>
+<path d="M430 700 c0 -12 9 -22 24 -26 35 -8 66 4 66 27 0 16 -7 19 -45 19
+-38 0 -45 -3 -45 -20z"/>
+<path d="M593 573 c-18 -7 -16 -40 3 -47 20 -8 588 -8 608 0 21 8 21 40 0 48
+-19 7 -593 7 -611 -1z"/>
+<path d="M430 550 c0 -12 9 -22 24 -26 35 -8 66 4 66 27 0 16 -7 19 -45 19
+-38 0 -45 -3 -45 -20z"/>
+<path d="M593 423 c-18 -7 -16 -40 3 -47 20 -8 588 -8 608 0 21 8 21 40 0 48
+-19 7 -593 7 -611 -1z"/>
+<path d="M430 400 c0 -12 9 -22 24 -26 35 -8 66 4 66 27 0 16 -7 19 -45 19
+-38 0 -45 -3 -45 -20z"/>
+</g>
+</svg>

packages/fxa-admin-panel/src/images/icon-site-status.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M232 1789 c-46 -14 -109 -80 -122 -128 -7 -28 -10 -216 -8 -584 l3
+-543 27 -41 c15 -22 44 -51 65 -64 l38 -24 766 0 765 0 41 27 c22 15 51 44 64
+65 l24 38 0 565 0 565 -24 38 c-13 21 -42 50 -64 65 l-41 27 -750 2 c-456 1
+-764 -2 -784 -8z m1535 -122 l28 -27 0 -550 c0 -514 -1 -550 -18 -567 -17 -17
+-61 -18 -767 -18 l-750 0 -27 28 -28 27 0 539 c0 525 1 539 20 561 11 12 29
+26 40 31 11 4 347 7 747 6 l728 -2 27 -28z"/>
+<path d="M1197 1462 c-10 -10 -17 -22 -17 -26 0 -17 -203 -526 -210 -526 -4 0
+-42 84 -85 186 -113 268 -130 274 -230 73 l-65 -129 -129 0 c-137 0 -161 -7
+-161 -50 0 -44 22 -50 183 -50 84 0 157 4 163 8 6 4 33 49 59 101 32 64 49 90
+55 81 4 -7 46 -103 92 -212 68 -162 87 -200 105 -205 31 -7 51 2 63 29 5 13
+50 129 100 258 50 129 95 239 99 243 4 4 25 -54 45 -130 21 -76 45 -146 54
+-155 13 -16 36 -18 183 -18 178 0 199 5 199 50 0 43 -24 50 -160 50 l-129 0
+-16 53 c-8 28 -35 122 -59 207 -28 96 -51 159 -62 167 -25 18 -58 16 -77 -5z"/>
+<path d="M816 344 c-9 -8 -16 -22 -16 -30 0 -11 -25 -14 -134 -14 -109 0 -138
+-3 -150 -16 -20 -20 -20 -48 0 -68 14 -14 71 -16 484 -16 413 0 470 2 484 16
+9 8 16 24 16 34 0 43 -24 50 -166 50 -109 0 -134 3 -134 14 0 8 -7 22 -16 30
+-23 24 -345 24 -368 0z"/>
+</g>
+</svg>