Merge pull request #2488 from glific/next

New UI for Glific

.github/workflows/cypress-testing.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master]
+    branches: [master, next]
 
 jobs:
   glific:
@@ -95,6 +95,9 @@ jobs:
           echo clone cypress repo
           git clone https://github.com/glific/cypress-testing.git
           echo done. go to dir.
+          cd cypress-testing
+          git checkout feature/next
+          cd ..
           cp -r cypress-testing/cypress cypress
           yarn add cypress
           echo Create cypress.config.ts from example

.github/workflows/netlify.yml

@@ -1,7 +1,7 @@
 name: Build and Deploy to Netlify
 on:
   pull_request:
-    branches: [master]
+    branches: [master, next]
 
 jobs:
   build:

.github/workflows/unit-testing.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [master]
   pull_request:
-    branches: [master]
+    branches: [master, next]
 
 jobs:
   test:

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+bun.lockb
 
 # testing
 /coverage
@@ -30,4 +31,7 @@ cypress.json
 cypress/screenshots
 cypress/videos
 
-.tool-versions
+.tool-versions
+
+/priv
+/.vscode

src/App.module.css

@@ -1,4 +1,5 @@
 .App {
+  position: relative;
   display: flex;
   overflow: hidden;
 }

src/App.test.tsx

@@ -1,12 +1,11 @@
 import 'mocks/matchMediaMock';
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
-import { waitFor, render } from '@testing-library/react';
+import { waitFor, render, screen } from '@testing-library/react';
 import { vi, describe, it } from 'vitest';
-
+import { setAuthSession, setUserSession } from 'services/AuthService';
 import App from 'App';
 import { CONVERSATION_MOCKS } from 'mocks/Chat';
-import { setAuthSession, setUserSession } from 'services/AuthService';
 
 const mocks = CONVERSATION_MOCKS;
 import axios from 'axios';
@@ -24,6 +23,11 @@ const app = (
   </MockedProvider>
 );
 
+vi.mock('routes/AuthenticatedRoute/AuthenticatedRoute', () => ({
+  default: () => <div>Authenticated route subscription</div>,
+  AuthenticatedRoute: () => <div>Chat subscription</div>,
+}));
+
 describe('<App /> ', () => {
   it('it should render <Login /> component by default', async () => {
     mockedAxios.post.mockImplementation(() => Promise.resolve({}));
@@ -34,17 +38,15 @@ describe('<App /> ', () => {
     });
   });
 
-  it('it should render <App /> component correctly', async () => {
+  it('it should render <App /> component correctly in unauthenticated mode', async () => {
     const { container } = render(app);
     await waitFor(() => {
       expect(container).toBeInTheDocument();
+      expect(screen.getByText('Login')).toBeInTheDocument();
     });
   });
 
-  it('it should render <Chat /> component if session is active', async () => {
-    // let's create token expiry date for tomorrow
-    mockedAxios.post.mockResolvedValue(() => Promise.resolve({}));
-
+  it('it should render <App /> component correctly in authenticated mode', async () => {
     const tokenExpiryDate = new Date();
     tokenExpiryDate.setDate(new Date().getDate() + 1);
 
@@ -55,11 +57,9 @@ describe('<App /> ', () => {
     });
 
     setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Staff'] }));
-
-    const { getByTestId } = render(app);
-
+    render(app);
     await waitFor(() => {
-      expect(getByTestId('navbar')).toBeInTheDocument();
+      expect(screen.getByText('Chat subscription')).toBeInTheDocument();
     });
   });
 });

src/App.tsx

@@ -11,22 +11,21 @@ import { checkAuthStatusService, getAuthSession } from 'services/AuthService';
 import { UnauthenticatedRoute } from 'routes/UnauthenticatedRoute/UnauthenticatedRoute';
 import { AuthenticatedRoute } from 'routes/AuthenticatedRoute/AuthenticatedRoute';
 import { Logout } from 'containers/Auth/Logout/Logout';
-import { isGreaterThanLgBreakpoint } from 'common/utils';
 
 const App = () => {
   const navigate = useNavigate();
   // by default, do not assign any value to assume login or logout
   // let's checkAuthStatusService allocate it on useEffect
   const [authenticated, setAuthenticated] = useState<any>();
-  const [drawerOpen, setDrawerOpen] = useState(isGreaterThanLgBreakpoint());
+  const [drawerOpen, setDrawerOpen] = useState(true);
 
   useEffect(() => {
     const isAccessTokenPresent = getAuthSession('accessToken') !== null;
     const isTokenExpired = checkAuthStatusService();
     setAuthenticated(isTokenExpired || isAccessTokenPresent);
   }, []);
 
-  const sideDraawerValues = useMemo(
+  const sideDrawerValues = useMemo(
     () => ({
       drawerOpen,
       setDrawerOpen: (value: any) => {
@@ -68,7 +67,7 @@ const App = () => {
     <SessionContext.Provider value={values}>
       <ApolloProvider client={gqlClient(navigate)}>
         <ErrorHandler />
-        <SideDrawerContext.Provider value={sideDraawerValues}>{routes}</SideDrawerContext.Provider>
+        <SideDrawerContext.Provider value={sideDrawerValues}>{routes}</SideDrawerContext.Provider>
       </ApolloProvider>
     </SessionContext.Provider>
   );