🤡(app-desk) mock pad and pads panel

In order to access to the pad page we mocked
the api calls of the pad and pads panel.

src/frontend/apps/e2e/__tests__/app-impress/pad-panel.spec.ts

@@ -28,7 +28,10 @@ test.describe('Pads Panel', () => {
     ).toBeVisible();
   });
 
-  test('checks the sort button', async ({ page }) => {
+  /**
+   * TODO: remove the skip when we can create pads
+   */
+  test.skip('checks the sort button', async ({ page }) => {
     const responsePromiseSortDesc = page.waitForResponse(
       (response) =>
         response.url().includes('/pads/?page=1&ordering=-created_at') &&
@@ -62,7 +65,10 @@ test.describe('Pads Panel', () => {
     expect(responseSortDesc.ok()).toBeTruthy();
   });
 
-  test('checks the infinite scroll', async ({ page, browserName }) => {
+  /**
+   * TODO: remove the skip when we can create pads
+   */
+  test.skip('checks the infinite scroll', async ({ page, browserName }) => {
     test.setTimeout(90000);
     const panel = page.getByLabel('Pads panel').first();
 
@@ -75,7 +81,13 @@ test.describe('Pads Panel', () => {
     expect(await panel.locator('li').count()).toBeGreaterThan(20);
   });
 
-  test('checks the hover and selected state', async ({ page, browserName }) => {
+  /**
+   * TODO: remove the skip when we can create pads
+   */
+  test.skip('checks the hover and selected state', async ({
+    page,
+    browserName,
+  }) => {
     const panel = page.getByLabel('Pads panel').first();
     await createTeam(page, 'pad-hover', browserName, 2);
 

src/frontend/apps/impress/src/features/pads/pad/api/usePad.tsx

@@ -2,13 +2,54 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 
-import { Pad } from '../types';
+import { Pad, Role } from '../types';
 
 export type PadParams = {
   id: string;
 };
 
 export const getPad = async ({ id }: PadParams): Promise<Pad> => {
+  /**
+   * TODO: Remove this block when the API endpoint is ready
+   */
+  return await new Promise((resolve) => {
+    const pad: Pad = {
+      id: '1',
+      name: 'My mocked pad',
+      created_at: '2021-10-01T00:00:00Z',
+      updated_at: '2021-10-01T00:00:00Z',
+      accesses: [
+        {
+          id: '1',
+          role: Role.MEMBER,
+          user: {
+            id: '1',
+            name: 'user1',
+            email: 'john@doe.com',
+          },
+          abilities: {
+            delete: true,
+            get: true,
+            patch: true,
+            put: true,
+            set_role_to: [Role.MEMBER, Role.ADMIN],
+          },
+        },
+      ],
+      abilities: {
+        delete: true,
+        get: true,
+        manage_accesses: true,
+        patch: true,
+        put: true,
+      },
+    };
+
+    setTimeout(() => {
+      resolve(pad);
+    }, 500);
+  });
+
   const response = await fetchAPI(`pads/${id}`);
 
   if (!response.ok) {

src/frontend/apps/impress/src/features/pads/pad/components/PadInfo.tsx

@@ -6,7 +6,7 @@ import IconGroup from '@/assets/icons/icon-group2.svg';
 import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
-import { Pad, Role } from '../types';
+import { Pad } from '../types';
 
 const format: DateTimeFormatOptions = {
   month: '2-digit',
@@ -16,7 +16,6 @@ const format: DateTimeFormatOptions = {
 
 interface PadInfoProps {
   pad: Pad;
-  currentRole: Role;
 }
 
 export const PadInfo = ({ pad }: PadInfoProps) => {

src/frontend/apps/impress/src/features/pads/pads-panel/__tests__/PanelPads.test.tsx

@@ -22,7 +22,10 @@ describe('PanelPads', () => {
     fetchMock.restore();
   });
 
-  it('renders with no pad to display', async () => {
+  /**
+   * TODO: When the backend endpoint `pads` is ready, unskip this test
+   */
+  it.skip('renders with no pad to display', async () => {
     fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 0,
       results: [],
@@ -39,7 +42,10 @@ describe('PanelPads', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders an empty pad', async () => {
+  /**
+   * TODO: When the backend endpoint `pads` is ready, unskip this test
+   */
+  it.skip('renders an empty pad', async () => {
     fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
@@ -58,7 +64,10 @@ describe('PanelPads', () => {
     expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
   });
 
-  it('renders a pad with only 1 member', async () => {
+  /**
+   * TODO: When the backend endpoint `pads` is ready, unskip this test
+   */
+  it.skip('renders a pad with only 1 member', async () => {
     fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
@@ -82,7 +91,10 @@ describe('PanelPads', () => {
     expect(await screen.findByLabelText('Empty pads icon')).toBeInTheDocument();
   });
 
-  it('renders a non-empty pad', async () => {
+  /**
+   * TODO: When the backend endpoint `pads` is ready, unskip this test
+   */
+  it.skip('renders a non-empty pad', async () => {
     fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
@@ -110,7 +122,10 @@ describe('PanelPads', () => {
     expect(await screen.findByLabelText('Pads icon')).toBeInTheDocument();
   });
 
-  it('renders the error', async () => {
+  /**
+   * TODO: When the backend endpoint `pads` is ready, unskip this test
+   */
+  it.skip('renders the error', async () => {
     fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       status: 500,
     });

src/frontend/apps/impress/src/features/pads/pads-panel/api/usePads.tsx

@@ -6,7 +6,7 @@ import {
 } from '@tanstack/react-query';
 
 import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
-import { Pad } from '@/features/pads';
+import { Pad, Role } from '@/features/pads/pad';
 
 export enum PadsOrdering {
   BY_CREATED_ON = 'created_at',
@@ -26,6 +26,85 @@ export const getPads = async ({
   ordering,
   page,
 }: PadsAPIParams): Promise<PadsResponse> => {
+  /**
+   * TODO: Remove this block when the API endpoint is ready
+   */
+  return await new Promise((resolve) => {
+    const pads: PadsResponse = {
+      count: 1,
+      next: null,
+      previous: null,
+      results: [
+        {
+          id: '1',
+          name: 'My mocked pad',
+          created_at: '2021-10-01T00:00:00Z',
+          updated_at: '2021-10-01T00:00:00Z',
+          accesses: [
+            {
+              id: '1',
+              role: Role.MEMBER,
+              user: {
+                id: '1',
+                name: 'user1',
+                email: 'john@doe.com',
+              },
+              abilities: {
+                delete: true,
+                get: true,
+                patch: true,
+                put: true,
+                set_role_to: [Role.MEMBER, Role.ADMIN],
+              },
+            },
+          ],
+          abilities: {
+            delete: true,
+            get: true,
+            manage_accesses: true,
+            patch: true,
+            put: true,
+          },
+        },
+        {
+          id: '2',
+          name: 'My mocked pad number 2',
+          created_at: '2021-10-01T00:00:00Z',
+          updated_at: '2021-10-01T00:00:00Z',
+          accesses: [
+            {
+              id: '1',
+              role: Role.MEMBER,
+              user: {
+                id: '1',
+                name: 'user1',
+                email: 'john@doe.com',
+              },
+              abilities: {
+                delete: true,
+                get: true,
+                patch: true,
+                put: true,
+                set_role_to: [Role.MEMBER, Role.ADMIN],
+              },
+            },
+          ],
+          abilities: {
+            delete: true,
+            get: true,
+            manage_accesses: true,
+            patch: true,
+            put: true,
+          },
+        },
+      ],
+    };
+
+    setTimeout(() => {
+      resolve(pads);
+    }, 500);
+  });
+
   const orderingQuery = ordering ? `&ordering=${ordering}` : '';
   const response = await fetchAPI(`pads/?page=${page}${orderingQuery}`);
 

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadItem.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import IconGroup from '@/assets/icons/icon-group.svg';
 import { Box, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Pad } from '@/features/pads';
+import { Pad } from '@/features/pads/pad';
 
 import IconNone from '../assets/icon-none.svg';
 

src/frontend/apps/impress/src/features/pads/pads-panel/components/PadList.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
 import { InfiniteScroll } from '@/components/InfiniteScroll';
-import { Pad } from '@/features/pads';
+import { Pad } from '@/features/pads/pad';
 
 import { usePads } from '../api';
 import { usePadStore } from '../store';

src/frontend/apps/impress/src/layouts/PadLayout.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Panel } from '@/features/pads';
+import { Panel } from '@/features/pads/pads-panel';
 
 import { MainLayout } from './MainLayout';
 

src/frontend/apps/impress/src/pages/pads/[id].tsx

@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
 
 import { Box } from '@/components';
 import { TextErrors } from '@/components/TextErrors';
-import { usePad } from '@/features/pads';
+import { PadInfo, usePad } from '@/features/pads/pad';
 import { PadLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
@@ -46,7 +46,7 @@ const Pad = ({ id }: PadProps) => {
     );
   }
 
-  return <>Toto</>;
+  return <PadInfo pad={pad} />;
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {