Add empty opportunity page (#83)

* Add empty opportunity page

* Fix coverage

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/package.json

@@ -56,7 +56,9 @@
   },
   "jest": {
     "coveragePathIgnorePatterns": [
-      ".stories.tsx$"
+      ".stories.tsx$",
+      "graphql.tsx$",
+      "apollo.tsx$"
     ],
     "coverageThreshold": {
       "global": {

front/src/App.tsx

@@ -6,6 +6,7 @@ import Login from './pages/auth/Login';
 import AppLayout from './layout/AppLayout';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import RequireAuth from './components/auth/RequireAuth';
+import Opportunities from './pages/opportunities/Opportunities';
 
 function App() {
   const user = {
@@ -50,6 +51,14 @@ function App() {
                 </RequireAuth>
               }
             />
+            <Route
+              path="/opportunities"
+              element={
+                <RequireAuth>
+                  <Opportunities />
+                </RequireAuth>
+              }
+            />
             <Route path="/auth/callback" element={<AuthCallback />} />
             <Route path="/auth/login" element={<Login />} />
           </Routes>

front/src/layout/navbar/Navbar.tsx

@@ -6,7 +6,10 @@ import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
 import { faUser } from '@fortawesome/pro-regular-svg-icons';
-import { faBuildings } from '@fortawesome/pro-regular-svg-icons';
+import {
+  faBuildings,
+  faBullseyeArrow,
+} from '@fortawesome/pro-regular-svg-icons';
 
 const NavbarContainer = styled.div`
   display: flex;
@@ -56,6 +59,17 @@ function Navbar({ workspace }: OwnProps) {
               })
             }
           />
+          <NavItem
+            label="Opportunities"
+            to="/opportunities"
+            icon={faBullseyeArrow}
+            active={
+              !!useMatch({
+                path: useResolvedPath('/opportunities').pathname,
+                end: true,
+              })
+            }
+          />
         </NavItemsContainer>
       </NavbarContainer>
     </>

front/src/pages/opportunities/Opportunities.tsx

@@ -0,0 +1,12 @@
+import { faBullseyeArrow } from '@fortawesome/pro-regular-svg-icons';
+import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
+
+function Opportunities() {
+  return (
+    <WithTopBarContainer title="Opportunities" icon={faBullseyeArrow}>
+      <></>
+    </WithTopBarContainer>
+  );
+}
+
+export default Opportunities;

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -0,0 +1,19 @@
+import { MemoryRouter } from 'react-router-dom';
+import Opportunities from '../Opportunities';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+const component = {
+  title: 'Opportunities',
+  component: Opportunities,
+};
+
+export default component;
+
+export const OpportunitiesDefault = () => (
+  <ThemeProvider theme={lightTheme}>
+    <MemoryRouter>
+      <Opportunities />
+    </MemoryRouter>
+  </ThemeProvider>
+);

front/src/pages/opportunities/__tests__/Opportunities.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { OpportunitiesDefault } from '../__stories__/Opportunities.stories';
+
+it('Checks the Companies page render', () => {
+  const { getByTestId } = render(<OpportunitiesDefault />);
+
+  const title = getByTestId('top-bar-title');
+  expect(title).toHaveTextContent('Opportunities');
+});