✨(frontend) Added drag-and-drop functionality for document management

Added a new feature for moving documents within the user interface via
drag-and-drop. This includes the creation of Draggable and Droppable
components, as well as tests to verify document creation and movement
behavior. Changes have also been made to document types to include user
roles and child management capabilities.

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

@@ -239,6 +239,7 @@ export const mockedDocument = async (page: Page, json: object) => {
           },
           link_reach: 'restricted',
           created_at: '2021-09-01T09:00:00Z',
+          user_roles: ['owner'],
           ...json,
         },
       });
@@ -248,6 +249,22 @@ export const mockedDocument = async (page: Page, json: object) => {
   });
 };
 
+export const mockedListDocs = async (page: Page, data: object[] = []) => {
+  await page.route('**/documents/**/', async (route) => {
+    const request = route.request();
+    if (request.method().includes('GET') && request.url().includes('page=')) {
+      await route.fulfill({
+        json: {
+          count: data.length,
+          next: null,
+          previous: null,
+          results: data,
+        },
+      });
+    }
+  });
+};
+
 export const mockedInvitations = async (page: Page, json?: object) => {
   await page.route('**/invitations/**/', async (route) => {
     const request = route.request();