🤡(app-impress) remove mock pad endpoints

The backend was updated to include the
pad endpoints.
The mock pad endpoints were removed
in favor of the real ones.
We adapted the types as well to match
the real ones.

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -23,28 +23,26 @@ export const randomName = (name: string, browserName: string, length: number) =>
     return `${browserName}-${Math.floor(Math.random() * 10000)}-${index}-${name}`;
   });
 
-export const createTeam = async (
+export const createPad = async (
   page: Page,
-  teamName: string,
+  padName: string,
   browserName: string,
   length: number,
 ) => {
-  const panel = page.getByLabel('Teams panel').first();
+  const panel = page.getByLabel('Pads panel').first();
-  const buttonCreate = page.getByRole('button', { name: 'Create the team' });
+  const buttonCreate = page.getByRole('button', { name: 'Create the pad' });
 
-  const randomTeams = randomName(teamName, browserName, length);
+  const randomPads = randomName(padName, browserName, length);
 
-  for (let i = 0; i < randomTeams.length; i++) {
+  for (let i = 0; i < randomPads.length; i++) {
-    await panel.getByRole('button', { name: 'Add a team' }).click();
+    await panel.getByRole('button', { name: 'Add a pad' }).click();
-    await page.getByText('Team name').fill(randomTeams[i]);
+    await page.getByText('Pad name').fill(randomPads[i]);
     await expect(buttonCreate).toBeEnabled();
     await buttonCreate.click();
-    await expect(
+    await expect(panel.locator('li').getByText(randomPads[i])).toBeVisible();
-      panel.locator('li').nth(0).getByText(randomTeams[i]),
-    ).toBeVisible();
   }
 
-  return randomTeams;
+  return randomPads;
 };
 
 export const addNewMember = async (

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

@@ -71,7 +71,7 @@ test.describe('Pad Create', () => {
     await page.getByText('Pad name').fill(padName);
     await page.getByRole('button', { name: 'Create the pad' }).click();
 
-    const elPad = page.getByText(`Members of “${padName}“`);
+    const elPad = page.locator('h2').getByText(padName);
     await expect(elPad).toBeVisible();
 
     await panel.getByRole('button', { name: 'Add a pad' }).click();
@@ -95,25 +95,6 @@ test.describe('Pad Create', () => {
     await expect(page).toHaveURL(/\/pads$/);
   });
 
-  test('checks error when duplicate pad', async ({ page, browserName }) => {
-    const panel = page.getByLabel('Pads panel').first();
-
-    await panel.getByRole('button', { name: 'Add a pad' }).click();
-
-    const padName = `My duplicate pad ${browserName}-${Math.floor(Math.random() * 1000)}`;
-    await page.getByText('Pad name').fill(padName);
-    await page.getByRole('button', { name: 'Create the pad' }).click();
-
-    await panel.getByRole('button', { name: 'Add a pad' }).click();
-
-    await page.getByText('Pad name').fill(padName);
-    await page.getByRole('button', { name: 'Create the pad' }).click();
-
-    await expect(
-      page.getByText('Pad with this Slug already exists.'),
-    ).toBeVisible();
-  });
-
   test('checks 404 on pads/[id] page', async ({ page }) => {
     await page.goto('/pads/some-unknown-pad');
     await expect(

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

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import cs from 'convert-stream';
 import pdf from 'pdf-parse';
 
-import { keyCloakSignIn } from './common';
+import { createPad, keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page, browserName }) => {
   await page.goto('/');
@@ -10,23 +10,29 @@ test.beforeEach(async ({ page, browserName }) => {
 });
 
 test.describe('Pad Editor', () => {
-  test('checks the Pad Editor interact correctly', async ({ page }) => {
+  test('checks the Pad Editor interact correctly', async ({
-    await page.getByText('My mocked pad').first().click();
+    page,
+    browserName,
+  }) => {
+    const randomPad = await createPad(page, 'pad-editor', browserName, 1);
 
-    await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
+    await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
     await expect(page.getByText('Hello World')).toBeVisible();
   });
 
-  test('checks the Pad is connected to the webrtc server', async ({ page }) => {
+  test('checks the Pad is connected to the webrtc server', async ({
+    page,
+    browserName,
+  }) => {
     const webSocketPromise = page.waitForEvent('websocket', (webSocket) => {
       return webSocket.url().includes('ws://localhost:4444/');
     });
 
-    await page.getByText('My mocked pad').first().click();
+    const randomPad = await createPad(page, 'pad-editor', browserName, 1);
-    await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
+    await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
 
     const webSocket = await webSocketPromise;
     expect(webSocket.url()).toBe('ws://localhost:4444/');
@@ -47,13 +53,14 @@ test.describe('Pad Editor', () => {
 
   test('it converts the pad to pdf with a template integrated', async ({
     page,
+    browserName,
   }) => {
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes('impress-document.pdf');
     });
 
-    await page.getByText('My mocked pad').first().click();
+    const randomPad = await createPad(page, 'pad-editor', browserName, 1);
-    await expect(page.locator('h2').getByText('My mocked pad')).toBeVisible();
+    await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');

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

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 
 import { waitForElementCount } from '../helpers';
 
-import { createTeam, keyCloakSignIn } from './common';
+import { createPad, keyCloakSignIn } from './common';
 
 test.beforeEach(async ({ page, browserName }) => {
   await page.goto('/');
@@ -28,19 +28,16 @@ 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') &&
+        response.url().includes('/documents/?page=1&ordering=-created_at') &&
         response.status() === 200,
     );
 
     const responsePromiseSortAsc = page.waitForResponse(
       (response) =>
-        response.url().includes('/pads/?page=1&ordering=created_at') &&
+        response.url().includes('/documents/?page=1&ordering=created_at') &&
         response.status() === 200,
     );
 
@@ -65,40 +62,31 @@ 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();
 
-    const randomTeams = await createTeam(page, 'pad-infinite', browserName, 40);
+    const randomPads = await createPad(page, 'pad-infinite', browserName, 40);
 
     await expect(panel.locator('li')).toHaveCount(20);
-    await panel.getByText(randomTeams[24]).click();
+    await panel.getByText(randomPads[24]).click();
 
     await waitForElementCount(panel.locator('li'), 21, 10000);
     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);
+    await createPad(page, 'pad-hover', browserName, 2);
 
-    const selectedTeam = panel.locator('li').nth(0);
+    const selectedPad = panel.locator('li').nth(0);
-    await expect(selectedTeam).toHaveCSS(
+    await expect(selectedPad).toHaveCSS(
       'background-color',
       'rgb(202, 202, 251)',
     );
 
-    const hoverTeam = panel.locator('li').nth(1);
+    const hoverPad = panel.locator('li').nth(1);
-    await hoverTeam.hover();
+    await hoverPad.hover();
-    await expect(hoverTeam).toHaveCSS('background-color', 'rgb(227, 227, 253)');
+    await expect(hoverPad).toHaveCSS('background-color', 'rgb(227, 227, 253)');
   });
 });

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

@@ -2,55 +2,14 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 
-import { Pad, Role } from '../types';
+import { Pad } from '../types';
 
 export type PadParams = {
   id: string;
 };
 
 export const getPad = async ({ id }: PadParams): Promise<Pad> => {
-  /**
+  const response = await fetchAPI(`documents/${id}`);
-   * 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) {
     throw new APIError('Failed to get the pad', await errorCauses(response));

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

@@ -17,7 +17,7 @@ export const PadEditor = ({ pad }: PadEditorProps) => {
       <PadToolBox pad={pad} />
       <Card className="m-b p-b" $css="margin-top:0;flex:1;" $overflow="auto">
         <Text as="h2" $align="center">
-          {pad.name}
+          {pad.title}
         </Text>
         <BlockNoteEditor pad={pad} />
       </Card>

src/frontend/apps/impress/src/features/pads/pad/types.tsx

@@ -1,15 +1,13 @@
-import { User } from '@/core/auth';
-
 export interface Access {
   id: string;
   role: Role;
-  user: User;
+  team: string;
+  user: string;
   abilities: {
-    delete: boolean;
+    destroy: boolean;
-    get: boolean;
+    retrieve: boolean;
-    patch: boolean;
-    put: boolean;
     set_role_to: Role[];
+    update: boolean;
   };
 }
 
@@ -21,15 +19,14 @@ export enum Role {
 
 export interface Pad {
   id: string;
-  name: string;
+  title: string;
   accesses: Access[];
   created_at: string;
   updated_at: string;
   abilities: {
-    delete: boolean;
+    destroy: boolean;
-    get: boolean;
+    retrieve: boolean;
     manage_accesses: boolean;
-    patch: boolean;
+    update: boolean;
-    put: boolean;
   };
 }

src/frontend/apps/impress/src/features/pads/pads-create/api/useCreatePad.tsx

@@ -5,14 +5,14 @@ import { KEY_LIST_PAD } from '@/features/pads';
 
 type CreatePadResponse = {
   id: string;
-  name: string;
+  title: string;
 };
 
-export const createPad = async (name: string): Promise<CreatePadResponse> => {
+export const createPad = async (title: string): Promise<CreatePadResponse> => {
-  const response = await fetchAPI(`pads/`, {
+  const response = await fetchAPI(`documents/`, {
     method: 'POST',
     body: JSON.stringify({
-      name,
+      title,
     }),
   });
 

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

@@ -22,11 +22,8 @@ describe('PanelPads', () => {
     fetchMock.restore();
   });
 
-  /**
+  it('renders with no pad to display', async () => {
-   * TODO: When the backend endpoint `pads` is ready, unskip this test
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
-   */
-  it.skip('renders with no pad to display', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 0,
       results: [],
     });
@@ -42,11 +39,8 @@ describe('PanelPads', () => {
     ).toBeInTheDocument();
   });
 
-  /**
+  it('renders an empty pad', async () => {
-   * TODO: When the backend endpoint `pads` is ready, unskip this test
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
-   */
-  it.skip('renders an empty pad', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
         {
@@ -64,11 +58,8 @@ 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
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
-   */
-  it.skip('renders a pad with only 1 member', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
         {
@@ -91,11 +82,8 @@ 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
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
-   */
-  it.skip('renders a non-empty pad', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       count: 1,
       results: [
         {
@@ -122,11 +110,8 @@ 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
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
-   */
-  it.skip('renders the error', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
       status: 500,
     });
 
@@ -142,7 +127,7 @@ describe('PanelPads', () => {
   });
 
   it('renders with pad panel open', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
       count: 1,
       results: [],
     });
@@ -157,7 +142,7 @@ describe('PanelPads', () => {
   });
 
   it('closes and opens the pad panel', async () => {
-    fetchMock.mock(`/api/pads/?page=1&ordering=-created_at`, {
+    fetchMock.mock(`/api/documents/?page=1&ordering=-created_at`, {
       count: 1,
       results: [],
     });

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, Role } from '@/features/pads/pad';
+import { Pad } from '@/features/pads/pad';
 
 export enum PadsOrdering {
   BY_CREATED_ON = 'created_at',
@@ -26,90 +26,11 @@ 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}`);
+  const response = await fetchAPI(`documents/?page=${page}${orderingQuery}`);
 
   if (!response.ok) {
-    throw new APIError('Failed to get the teams', await errorCauses(response));
+    throw new APIError('Failed to get the pads', await errorCauses(response));
   }
 
   return response.json() as Promise<PadsResponse>;

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

@@ -93,7 +93,7 @@ export const PadItem = ({ pad }: PadItemProps) => {
               min-width: 14rem;
             `}
           >
-            {pad.name}
+            {pad.title}
           </Text>
         </Box>
       </StyledLink>