diff --git a/packages/fxa-admin-panel/README.md b/packages/fxa-admin-panel/README.md index 3f1a7de1d6..fa195eda36 100644 --- a/packages/fxa-admin-panel/README.md +++ b/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" diff --git a/packages/fxa-admin-panel/server/lib/server.ts b/packages/fxa-admin-panel/server/lib/server.ts index 478011d8c9..bb1acd6910 100644 --- a/packages/fxa-admin-panel/server/lib/server.ts +++ b/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)); diff --git a/packages/fxa-admin-panel/src/App.tsx b/packages/fxa-admin-panel/src/App.tsx index c966f82e21..5916dcfc22 100644 --- a/packages/fxa-admin-panel/src/App.tsx +++ b/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 = () => ( - - + + + + + + diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.scss b/packages/fxa-admin-panel/src/components/AccountSearch/Account/index.scss similarity index 100% rename from packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.scss rename to packages/fxa-admin-panel/src/components/AccountSearch/Account/index.scss diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.test.tsx b/packages/fxa-admin-panel/src/components/AccountSearch/Account/index.test.tsx similarity index 100% rename from packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.test.tsx rename to packages/fxa-admin-panel/src/components/AccountSearch/Account/index.test.tsx diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.tsx b/packages/fxa-admin-panel/src/components/AccountSearch/Account/index.tsx similarity index 100% rename from packages/fxa-admin-panel/src/components/EmailBlocks/Account/index.tsx rename to packages/fxa-admin-panel/src/components/AccountSearch/Account/index.tsx diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/index.scss b/packages/fxa-admin-panel/src/components/AccountSearch/index.scss similarity index 98% rename from packages/fxa-admin-panel/src/components/EmailBlocks/index.scss rename to packages/fxa-admin-panel/src/components/AccountSearch/index.scss index c841385108..4d6e55f280 100644 --- a/packages/fxa-admin-panel/src/components/EmailBlocks/index.scss +++ b/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; diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/index.test.tsx b/packages/fxa-admin-panel/src/components/AccountSearch/index.test.tsx similarity index 96% rename from packages/fxa-admin-panel/src/components/EmailBlocks/index.test.tsx rename to packages/fxa-admin-panel/src/components/AccountSearch/index.test.tsx index 285d6c684d..4897e2d2d7 100644 --- a/packages/fxa-admin-panel/src/components/EmailBlocks/index.test.tsx +++ b/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(); + const renderResult = render(); 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} > - + ); let getByTestId = renderResult.getByTestId; @@ -168,7 +168,7 @@ it('displays the error state if there is an error', async () => { const renderResult = render( - + ); let getByTestId = renderResult.getByTestId; diff --git a/packages/fxa-admin-panel/src/components/EmailBlocks/index.tsx b/packages/fxa-admin-panel/src/components/AccountSearch/index.tsx similarity index 93% rename from packages/fxa-admin-panel/src/components/EmailBlocks/index.tsx rename to packages/fxa-admin-panel/src/components/AccountSearch/index.tsx index dcec2047f6..3970979041 100644 --- a/packages/fxa-admin-panel/src/components/EmailBlocks/index.tsx +++ b/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(''); const [showResult, setShowResult] = useState(false); const [getAccount, { loading, error, data, refetch }] = useLazyQuery( @@ -64,8 +64,8 @@ export const EmailBlocks = () => { }; return ( -
-

Find and Delete Email Blocks

+
+

Account Search

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" /> @@ -139,4 +139,4 @@ const AccountSearchResult = ({ return

Account not found.

; }; -export default EmailBlocks; +export default AccountSearch; diff --git a/packages/fxa-admin-panel/src/components/AdminLogs/index.scss b/packages/fxa-admin-panel/src/components/AdminLogs/index.scss new file mode 100644 index 0000000000..6f5b158573 --- /dev/null +++ b/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; + } +} + \ No newline at end of file diff --git a/packages/fxa-admin-panel/src/components/AdminLogs/index.tsx b/packages/fxa-admin-panel/src/components/AdminLogs/index.tsx new file mode 100644 index 0000000000..3744e1bdeb --- /dev/null +++ b/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 ( +
+

Admin Logs

+

+ This is a read-only view of all administrative changes that have been + done to any user account. +

+
+ ); +}; + +export default AdminLogs; diff --git a/packages/fxa-admin-panel/src/components/Nav/index.tsx b/packages/fxa-admin-panel/src/components/Nav/index.tsx index 150f643cef..fe5cf90f63 100644 --- a/packages/fxa-admin-panel/src/components/Nav/index.tsx +++ b/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 = () => (