Move alerts to left side panel

frontend/src/components/App/__snapshots__/index.test.tsx.snap

@@ -6,9 +6,7 @@ exports[`renders as expected 1`] = `
   <div
     id="app"
   >
-    <mock-navbar
-      isalertformopen="false"
-    />
+    <mock-navbar />
     <mock-mapview />
     <mock-authmodal />
   </div>

frontend/src/components/App/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import * as Sentry from '@sentry/browser';
 import { useIsAuthenticated } from '@azure/msal-react';
 import { ThemeProvider } from '@material-ui/core/styles';
@@ -56,23 +56,17 @@ Font.register({
   ],
 });
 
-const Wrapper = memo(() => {
-  const [isAlertFormOpen, setIsAlertFormOpen] = React.useState(false);
-  return (
-    <div id="app">
-      <NavBar
-        isAlertFormOpen={isAlertFormOpen}
-        setIsAlertFormOpen={setIsAlertFormOpen}
-      />
-      <Switch>
-        <Route>
-          <MapView setIsAlertFormOpen={setIsAlertFormOpen} />
-          <AuthModal />
-        </Route>
-      </Switch>
-    </div>
-  );
-});
+const Wrapper = memo(() => (
+  <div id="app">
+    <NavBar />
+    <Switch>
+      <Route>
+        <MapView />
+        <AuthModal />
+      </Route>
+    </Switch>
+  </div>
+));
 
 function App() {
   const isAuthenticated = useIsAuthenticated();

frontend/src/components/MapView/LeftPanel/AlertsPanel/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders as expected 1`] = `
+<div>
+  <div
+    class="MuiBox-root MuiBox-root-9 makeStyles-alertFormMenu-1"
+  >
+    <div
+      class="makeStyles-newAlertFormContainer-2"
+    >
+      <div
+        class="makeStyles-alertFormOptions-3"
+      >
+        <mock-layer-dropdown
+          classname="makeStyles-analysisPanelParamText-4"
+          label="Hazard Layer"
+          placeholder="Choose hazard layer"
+          type="wms"
+          value=""
+        />
+      </div>
+      <div
+        class="makeStyles-alertFormOptions-3"
+      >
+        <mock-typography
+          variant="body2"
+        >
+          Threshold
+        </mock-typography>
+        <div
+          class="makeStyles-thresholdInputsContainer-6"
+        >
+          <mock-textfield
+            classname="makeStyles-numberField-7"
+            error="false"
+            helpertext=""
+            id="filled-number"
+            label="Below"
+            type="number"
+            value=""
+          />
+          <mock-textfield
+            classname="makeStyles-numberField-7"
+            id="filled-number"
+            label="Above"
+            type="number"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="makeStyles-alertFormOptions-3"
+      >
+        <mock-typography
+          variant="body2"
+        >
+          Regions
+        </mock-typography>
+        <mock-circularprogress
+          color="inherit"
+          size="24"
+          style="padding: 2px;"
+        />
+      </div>
+      <div
+        class="makeStyles-alertFormOptions-3"
+      >
+        <mock-textfield
+          fullwidth="true"
+          id="alert-name"
+          inputlabelprops="[object Object]"
+          inputprops="[object Object]"
+          label="Alert Name"
+          type="text"
+          value=""
+        />
+      </div>
+      <div
+        class="makeStyles-alertFormOptions-3"
+      >
+        <mock-textfield
+          fullwidth="true"
+          id="email-address"
+          inputlabelprops="[object Object]"
+          inputprops="[object Object]"
+          label="Email Address"
+          type="text"
+        />
+      </div>
+    </div>
+    <mock-button
+      classname="makeStyles-innerCreateAlertButton-8"
+      disabled="true"
+    >
+      <mock-typography
+        style="color: white;"
+        variant="body2"
+      >
+        Create Alert
+      </mock-typography>
+    </mock-button>
+  </div>
+</div>
+`;

frontend/src/components/MapView/AlertForm/index.test.tsx → frontend/src/components/MapView/LeftPanel/AlertsPanel/index.test.tsx

@@ -3,15 +3,15 @@ import { render } from '@testing-library/react';
 import { ThemeProvider } from '@material-ui/styles';
 import { createTheme } from '@material-ui/core/styles';
 import { store } from 'context/store';
-import AlertForm from '.';
+import AlertsPanel from '.';
 
-jest.mock('../Layers/LayerDropdown', () => 'mock-Layer-Dropdown');
+jest.mock('../../Layers/LayerDropdown', () => 'mock-Layer-Dropdown');
 
 test('renders as expected', () => {
   const rendered = render(
     <Provider store={store}>
       <ThemeProvider theme={createTheme()}>
-        <AlertForm isOpen setOpen={jest.fn()} />
+        <AlertsPanel />
       </ThemeProvider>
     </Provider>,
   );