feat: use new graasp UI (#997)

* fix: make it work * fix: update * fix: update with ui * fix: css ordering and small issues * fix: add timestamp in html * fix: update UI and fix some imports * fix: move katex css import * fix: remove edit prop * fix: add raw mode * fix: chatbox tests * fix: remove rollup-plugin replace by npx package * fix: remove only * fix: scroll in editor * chore: remove todos * fix: update sdk * fix: make PR changes
graasp · Feb 14, 2024 · dfaba0a · dfaba0a
1 parent b30ac6e
commit dfaba0a
Show file tree

Hide file tree

Showing 94 changed files with 3,347 additions and 1,630 deletions.
diff --git a/.prettierrc → .prettierrc.json b/.prettierrc → .prettierrc.json
@@ -6,6 +6,7 @@
   "bracketSpacing": true,
   "arrowParens": "always",
   "importOrder": [
+    ".*\\.css$",
     "^react",
     "^@?mui",
     "^@?graasp",

diff --git a/cypress/e2e/item/chatbox/chatbox.cy.ts b/cypress/e2e/item/chatbox/chatbox.cy.ts
@@ -1,5 +1,7 @@
 import { MockWebSocket } from '@graasp/query-client';
 
+import { v4 } from 'uuid';
+
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   CHATBOX_ID,
@@ -11,14 +13,10 @@ import {
   ITEM_WITH_CHATBOX_MESSAGES,
 } from '../../../fixtures/chatbox';
 import { CURRENT_USER, MEMBERS } from '../../../fixtures/members';
-import {
-  CHATBOX_LOADING_TIME,
-  WEBSOCKETS_DELAY_TIME,
-} from '../../../support/constants';
+import { CHATBOX_LOADING_TIME } from '../../../support/constants';
 
 const openChatbox = () => {
   cy.get(`#${ITEM_CHATBOX_BUTTON_ID}`).click();
-  cy.wait(CHATBOX_LOADING_TIME);
   cy.wait('@getItemChat', { timeout: CHATBOX_LOADING_TIME });
 };
 
@@ -42,6 +40,7 @@ describe('Chatbox Scenarios', () => {
 
     // send message
     const message = 'a new message';
+    const messageId = v4();
     // get the input field (which is a textarea because it is multiline
     cy.get(`#${CHATBOX_ID} #${CHATBOX_INPUT_BOX_ID} textarea:visible`).type(
       message,
@@ -61,16 +60,21 @@ describe('Chatbox Scenarios', () => {
           kind: 'item',
           op: 'publish',
           message: {
+            id: messageId,
             creator: CURRENT_USER.id,
             chatId: item.id,
             body: message,
+            createdAt: new Date().toISOString(),
+            updated: new Date().toISOString(),
           },
         },
       });
-      cy.wait(WEBSOCKETS_DELAY_TIME);
 
       // check the new message is visible
-      cy.get(`#${CHATBOX_ID}`).should('contain', message);
+      cy.get(`#${CHATBOX_ID} [data-cy=message-${messageId}]`).should(
+        'contain',
+        message,
+      );
     });
   });
 
@@ -80,6 +84,7 @@ describe('Chatbox Scenarios', () => {
 
     openChatbox();
 
+    const messageId = v4();
     // check websocket: the chatbox displays someone else's message
     const bobMessage = 'a message from bob';
     cy.get(`#${CHATBOX_ID}`).then(() => {
@@ -92,16 +97,21 @@ describe('Chatbox Scenarios', () => {
           kind: 'item',
           op: 'publish',
           message: {
+            id: messageId,
             creator: MEMBERS.BOB.id,
             chatId: item.id,
             body: bobMessage,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
           },
         },
       });
-      cy.wait(WEBSOCKETS_DELAY_TIME);
 
       // check the new message is visible
-      cy.get(`#${CHATBOX_ID}`).should('contain', bobMessage);
+      cy.get(`#${CHATBOX_ID} [data-cy=message-${messageId}]`).should(
+        'contain',
+        bobMessage,
+      );
     });
   });
 });
diff --git a/cypress/fixtures/documents.ts b/cypress/fixtures/documents.ts
@@ -1,4 +1,5 @@
 import { DocumentItemType, Item, ItemType } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { buildDocumentExtra } from '../../src/utils/itemExtra';
 import { DEFAULT_FOLDER_ITEM } from './items';
@@ -13,6 +14,7 @@ export const GRAASP_DOCUMENT_ITEM: DocumentItemType = {
   settings: {},
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
+  lang: DEFAULT_LANG,
   creator: CURRENT_USER,
   extra: buildDocumentExtra({
     content: '<h1>Some Title</h1>',
@@ -28,6 +30,7 @@ export const GRAASP_DOCUMENT_BLANK_NAME_ITEM: DocumentItemType = {
   settings: {},
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
+  lang: DEFAULT_LANG,
   creator: CURRENT_USER,
   extra: buildDocumentExtra({
     content: '<h1>Some Title</h1>',
@@ -49,6 +52,7 @@ export const GRAASP_DOCUMENT_CHILDREN_ITEM: DocumentItemType = {
   path: 'bdf09f5a_5688_11eb_ae93_0242ac130002.1cafbd2a_5688_12eb_ae93_0242ac130002',
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   extra: buildDocumentExtra({

diff --git a/cypress/fixtures/etherpad.ts b/cypress/fixtures/etherpad.ts
@@ -1,4 +1,5 @@
 import { EtherpadItemType, ItemType } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { CURRENT_USER } from './members';
 
@@ -11,6 +12,7 @@ export const GRAASP_ETHERPAD_ITEM: EtherpadItemType = {
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   extra: {

diff --git a/cypress/fixtures/files.ts b/cypress/fixtures/files.ts
@@ -1,4 +1,5 @@
 import { ItemType, MaxWidth, MimeTypes } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { InternalItemType } from '../../src/config/types';
 import { buildFileExtra, buildS3FileExtra } from '../../src/utils/itemExtra';
@@ -20,6 +21,7 @@ export const IMAGE_ITEM_DEFAULT: LocalFileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildFileExtra({
     name: 'icon.png',
     path: '9a95/e2e1/2a7b-1615910428274',
@@ -45,6 +47,7 @@ export const IMAGE_ITEM_DEFAULT_WITH_MAX_WIDTH: LocalFileItemForTest = {
   settings: {
     maxWidth: MaxWidth.Medium,
   },
+  lang: DEFAULT_LANG,
   extra: buildFileExtra({
     name: 'icon.png',
     path: '9a95/e2e1/2a7b-1615910428274',
@@ -68,6 +71,7 @@ export const VIDEO_ITEM_DEFAULT: LocalFileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildFileExtra({
     name: 'video.mp4',
     path: '9a95/e2e1/2a7b-1615910428274',
@@ -91,6 +95,7 @@ export const PDF_ITEM_DEFAULT: LocalFileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildFileExtra({
     name: 'doc.pdf',
     path: '9a95/e2e1/2a7b-1615910428274',
@@ -119,6 +124,7 @@ export const IMAGE_ITEM_S3: S3FileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildS3FileExtra({
     path: MOCK_IMAGE_URL, // for testing
     size: 32439,
@@ -142,6 +148,7 @@ export const VIDEO_ITEM_S3: S3FileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildS3FileExtra({
     path: MOCK_VIDEO_URL, // for testing
     size: 52345,
@@ -165,6 +172,7 @@ export const PDF_ITEM_S3: S3FileItemForTest = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   settings: {},
+  lang: DEFAULT_LANG,
   extra: buildS3FileExtra({
     path: MOCK_PDF_URL, // for testing
     size: 54321,

diff --git a/cypress/fixtures/h5p.ts b/cypress/fixtures/h5p.ts
@@ -1,4 +1,5 @@
 import { H5PItemType, ItemType } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { CURRENT_USER } from './members';
 
@@ -11,6 +12,7 @@ export const GRAASP_H5P_ITEM: H5PItemType = {
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   extra: {

diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -12,6 +12,7 @@ import {
   RecycledItemData,
   ShortcutItemType,
 } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { ApiConfig, ItemForTest } from '../support/types';
 import { CURRENT_USER, MEMBERS } from './members';
@@ -27,6 +28,7 @@ export const DEFAULT_FOLDER_ITEM: FolderItemType = {
   updatedAt: '2020-01-01T01:01:01Z',
   description: 'mydescription',
   settings: {},
+  lang: DEFAULT_LANG,
 };
 
 export const CREATED_ITEM: Partial<FolderItemType> = {

diff --git a/cypress/fixtures/links.ts b/cypress/fixtures/links.ts
@@ -1,4 +1,5 @@
 import { EmbeddedLinkItemType, ItemType } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { buildEmbeddedLinkExtra } from '../../src/utils/itemExtra';
 import { CURRENT_USER } from './members';
@@ -11,6 +12,7 @@ export const GRAASP_LINK_ITEM: EmbeddedLinkItemType = {
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   extra: buildEmbeddedLinkExtra({
@@ -31,6 +33,7 @@ export const GRAASP_LINK_ITEM_NO_PROTOCOL: EmbeddedLinkItemType = {
   path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   extra: buildEmbeddedLinkExtra({
@@ -58,6 +61,7 @@ export const YOUTUBE_LINK_ITEM: EmbeddedLinkItemType = {
   name: 'graasp youtube link',
   description: 'a description for graasp youtube link',
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   creator: CURRENT_USER,
@@ -76,6 +80,7 @@ export const INVALID_LINK_ITEM: EmbeddedLinkItemType = {
   type: ItemType.LINK,
   creator: CURRENT_USER,
   settings: {},
+  lang: DEFAULT_LANG,
   createdAt: '2021-08-11T12:56:36.834Z',
   updatedAt: '2021-08-11T12:56:36.834Z',
   name: 'graasp youtube link',

diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -642,8 +642,9 @@ export const mockPostManyItemMemberships = (
         return reply({ statusCode: StatusCodes.BAD_REQUEST });
       }
       const itemId = url.split('/')[4];
-      const itemMemberships = items.find(({ id }) => id === itemId)
-        ?.memberships;
+      const itemMemberships = items.find(
+        ({ id }) => id === itemId,
+      )?.memberships;
 
       // return membership or error if membership
       // for member id already exists
@@ -1524,8 +1525,9 @@ export const mockGetItemThumbnailUrl = (
       const [link] = url.split('?');
       const id = link.slice(API_HOST.length).split('/')[2];
 
-      const thumbnails = items.find(({ id: thisId }) => id === thisId)
-        ?.thumbnails;
+      const thumbnails = items.find(
+        ({ id: thisId }) => id === thisId,
+      )?.thumbnails;
       if (!thumbnails) {
         return reply({ statusCode: StatusCodes.NOT_FOUND });
       }

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -6,8 +6,8 @@
     "types": ["cypress", "node", "vite/client"],
     "strictNullChecks": false,
     "strict": true,
-    "sourceMap": false
+    "sourceMap": false,
   },
   "include": ["**/*.ts", "cypress.d.ts"],
-  "exclude": ["coverage", ".nyc_output"]
+  "exclude": ["coverage", ".nyc_output"],
 }
diff --git a/index.html b/index.html
@@ -8,7 +8,10 @@
       name="description"
       content="Knowledge sharing without borders. Communicate, Collaborate, Build Engaging Learning Experiences"
     />
-    <meta name="version-info" content="%VITE_VERSION%" />
+    <meta
+      name="version-info"
+      content="%VITE_VERSION% @ %VITE_BUILD_TIMESTAMP%"
+    />
 
     <!-- Load Roboto font from Google fonts -->
     <link
@@ -18,7 +21,7 @@
     <title>Graasp Builder</title>
   </head>
   <body>
-    <div id="root" style="width: 100%;"></div>
+    <div id="root" style="width: 100%"></div>
     <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>