feat: rework cc display (#234)

feat: show created at and update at times feat: add click on entire card and actions inside the item feat: hide copy button if user isn't logged feat: change the layout of the summary fix: remove my-list from header fix: grid sizes and cards --------- Co-authored-by: spaenleh <spaenleh@gmail.com>
graasp · May 9, 2023 · 83c5167 · 83c5167
1 parent 619bf92
commit 83c5167
Show file tree

Hide file tree

Showing 72 changed files with 3,575 additions and 2,852 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,6 @@
 {
   "extends": ["airbnb", "airbnb-typescript", "prettier"],
-  "plugins": ["import", "jsx-a11y", "react"],
+  "plugins": ["import", "jsx-a11y", "react", "prettier"],
   "env": {
     "browser": true,
     "node": true,
@@ -17,9 +17,14 @@
     "project": "./tsconfig.json"
   },
   "rules": {
+    "prettier/prettier": "error",
     "no-console": ["error", { "allow": ["warn", "error"] }],
+    "react/function-component-definition": [
+      2,
+      { "namedComponents": "arrow-function" }
+    ],
     "curly": "error",
-    "@typescript-eslint/indent":"off",
+    "@typescript-eslint/indent": "off",
     "@typescript-eslint/brace-style": "off",
     "no-underscore-dangle": [
       "error",

diff --git a/cypress/e2e/allCollections/allCollections.cy.js b/cypress/e2e/allCollections/allCollections.cy.js
@@ -19,8 +19,7 @@ import { getRootPublishedItems } from '../../support/utils';
 buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
   describe(`All Collections Page for ${environment.currentMember.name}`, () => {
     // check if title and headings are displayed correctly
-    beforeEach(()=>
-    {
+    beforeEach(() => {
       cy.setUpApi(environment);
       if (environment.currentMember?.extra?.lang) {
         i18n.changeLanguage(environment.currentMember?.extra?.lang);
@@ -29,7 +28,6 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
     });
 
     it('Layout', () => {
-
       cy.get(`#${TITLE_TEXT_ID}`).should(
         'have.text',
         i18n.t(LIBRARY.ALL_COLLECTIONS_TITLE),
@@ -56,7 +54,6 @@ buildPublicAndPrivateEnvironments(PUBLISHED_ITEMS).forEach((environment) => {
     });
 
     it('display menu options', () => {
-
       cy.get(buildEducationLevelOptionSelector(0)).should(
         'have.text',
         SAMPLE_CATEGORIES[0].name,

diff --git a/cypress/e2e/collection/categories.cy.js b/cypress/e2e/collection/categories.cy.js
@@ -1,58 +1,49 @@
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { buildCollectionRoute } from '../../../src/config/routes';
-import { COLLECTION_LOADING_TIME } from '../../support/constants';
+import { SUMMARY_CATEGORIES_CONTAINER_ID } from '../../../src/config/selectors';
 import { SAMPLE_CATEGORIES } from '../../fixtures/categories';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
-import {
-  SUMMARY_CATEGORIES_CONTAINER_ID,
-  SUMMARY_LANGUAGES_CONTAINER_ID,
-} from '../../../src/config/selectors';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
+import { COLLECTION_LOADING_TIME } from '../../support/constants';
 
 describe('Categories in Summary', () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
-    it(`Display item's categories for ${environment.currentMember.name}`, () => {
+    it(
+      `Display item's categories for ${environment.currentMember.name}`,
+      { defaultCommandTimeout: 10000 },
+      () => {
+        cy.setUpApi(environment);
+
+        const item = PUBLISHED_ITEMS[0];
+        cy.visit(buildCollectionRoute(item.id));
+
+        item.categories.forEach(({ categoryId }) => {
+          const category = SAMPLE_CATEGORIES.find(
+            ({ id }) => id === categoryId,
+          );
+          cy.get(`#${SUMMARY_CATEGORIES_CONTAINER_ID}`).should(
+            'contain',
+            category?.name,
+          );
+        });
+      },
+    );
+
+    it(`Child shows parent's categories ${environment.currentMember.name}`, () => {
       cy.setUpApi(environment);
 
       const item = PUBLISHED_ITEMS[0];
-      cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
-
-      cy.get(`#${SUMMARY_LANGUAGES_CONTAINER_ID}`).should('not.exist');
-      item.categories.forEach(({ categoryId }) => {
-        const category = SAMPLE_CATEGORIES.find(({ id }) => id === categoryId);
-        cy.get(`#${SUMMARY_CATEGORIES_CONTAINER_ID}`).should(
-          'contain',
-          category?.name,
-        );
-      });
-    });
 
-    it(`Display item's language for ${environment.currentMember.name}`, () => {
-      cy.setUpApi(environment);
+      const child = PUBLISHED_ITEMS[1];
 
-      const item = PUBLISHED_ITEMS[4];
-      cy.visit(buildCollectionRoute(item.id));
+      cy.visit(buildCollectionRoute(child.id));
       cy.wait(COLLECTION_LOADING_TIME);
 
-      cy.get(`#${SUMMARY_CATEGORIES_CONTAINER_ID}`).should('not.exist');
+      const categoryContainer = cy.get(`#${SUMMARY_CATEGORIES_CONTAINER_ID}`);
+
       item.categories.forEach(({ categoryId }) => {
         const category = SAMPLE_CATEGORIES.find(({ id }) => id === categoryId);
-        cy.get(`#${SUMMARY_LANGUAGES_CONTAINER_ID}`).should(
-          'contain',
-          category?.name,
-        );
+        categoryContainer.should('contain', category?.name);
       });
     });
-
-    it(`No category to display for ${environment.currentMember.name}`, () => {
-      cy.setUpApi(environment);
-
-      const item = PUBLISHED_ITEMS[2];
-      cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
-
-      cy.get(`#${SUMMARY_LANGUAGES_CONTAINER_ID}`).should('not.exist');
-      cy.get(`#${SUMMARY_CATEGORIES_CONTAINER_ID}`).should('not.exist');
-    });
   });
 });
diff --git a/cypress/e2e/collection/ccLicense.cy.js b/cypress/e2e/collection/ccLicense.cy.js
@@ -1,29 +1,38 @@
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { buildCollectionRoute } from '../../../src/config/routes';
-import { COLLECTION_LOADING_TIME } from '../../support/constants';
+import {
+  SUMMARY_CC_LICENSE_CONTAINER_ID,
+  SUMMARY_CC_LICENSE_NO_LICENSE_ID,
+} from '../../../src/config/selectors';
 import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
-import { SUMMARY_CC_LICENSE_CONTAINER_ID } from '../../../src/config/selectors';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
 
 describe('CC License in Summary', () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
-    it(`Display item's cc license for ${environment.currentMember.name}`, () => {
-      cy.setUpApi(environment);
+    it(
+      `Display item's cc license for ${environment.currentMember.name}`,
+      { defaultCommandTimeout: 10000 },
+      () => {
+        cy.setUpApi(environment);
+
+        const item = PUBLISHED_ITEMS[0];
+        cy.visit(buildCollectionRoute(item.id));
 
-      const item = PUBLISHED_ITEMS[0];
-      cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
+        cy.get(`#${SUMMARY_CC_LICENSE_CONTAINER_ID}`).should('be.exist');
+      },
+    );
 
-      cy.get(`#${SUMMARY_CC_LICENSE_CONTAINER_ID}`).should('be.exist');
-    });
+    it(
+      `No cc license to display for ${environment.currentMember.name}`,
+      { defaultCommandTimeout: 10000 },
+      () => {
+        cy.setUpApi(environment);
 
-    it(`No cc license to display for ${environment.currentMember.name}`, () => {
-      cy.setUpApi(environment);
+        const item = PUBLISHED_ITEMS[5];
 
-      const item = PUBLISHED_ITEMS[2];
-      cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
+        cy.visit(buildCollectionRoute(item.id));
 
-      cy.get(`#${SUMMARY_CC_LICENSE_CONTAINER_ID}`).should('not.exist');
-    });
+        cy.get(`#${SUMMARY_CC_LICENSE_NO_LICENSE_ID}`).should('exist');
+      },
+    );
   });
 });
diff --git a/cypress/e2e/collection/summary.cy.js b/cypress/e2e/collection/summary.cy.js
@@ -1,31 +1,29 @@
-import { isChildOf } from '@graasp/sdk';
 import { DateTime } from 'luxon';
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
-import { buildCollectionRoute } from '../../../src/config/routes';
-import {
-  COLLECTION_LOADING_TIME,
-  PERMISSION_LEVELS,
-} from '../../support/constants';
 
-import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
-import { MEMBERS } from '../../fixtures/members';
+import { isChildOf } from '@graasp/sdk';
+
+import { buildCollectionRoute } from '../../../src/config/routes';
 import {
-  buildContributorId,
   CHILDREN_ITEMS_GRID_ID,
   ITEM_SUMMARY_TITLE_ID,
   SUMMARY_AUTHOR_CONTAINER_ID,
+  SUMMARY_CC_LICENSE_CONTAINER_ID,
   SUMMARY_CREATED_AT_CONTAINER_ID,
   SUMMARY_LAST_UPDATE_CONTAINER_ID,
+  buildContributorId,
 } from '../../../src/config/selectors';
+import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
+import { MEMBERS } from '../../fixtures/members';
+import { PERMISSION_LEVELS } from '../../support/constants';
 
 describe('Collection Summary', () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
-    it('Layout', () => {
+    it('Layout', { defaultCommandTimeout: 10000 }, () => {
       cy.setUpApi(environment);
 
       const item = PUBLISHED_ITEMS[0];
       cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
 
       // current member
       const member = Object.values(MEMBERS).find(
@@ -51,14 +49,22 @@ describe('Collection Summary', () => {
 
       // created at
       if (item.createdAt) {
-        cy.get(`#${SUMMARY_CREATED_AT_CONTAINER_ID}`).should('contain', 
-            DateTime.fromISO(item.createdAt).toLocaleString(DateTime.DATE_FULL, { locale: member?.extra?.lang }));
+        cy.get(`#${SUMMARY_CREATED_AT_CONTAINER_ID}`).should(
+          'contain',
+          DateTime.fromISO(item.createdAt).toLocaleString(DateTime.DATE_FULL, {
+            locale: member?.extra?.lang,
+          }),
+        );
       }
 
       // last update
       if (item.updatedAt) {
-        cy.get(`#${SUMMARY_LAST_UPDATE_CONTAINER_ID}`).should('contain', 
-            DateTime.fromISO(item.updatedAt).toLocaleString(DateTime.DATE_FULL, { locale: member?.extra?.lang }));
+        cy.get(`#${SUMMARY_LAST_UPDATE_CONTAINER_ID}`).should(
+          'contain',
+          DateTime.fromISO(item.updatedAt).toLocaleString(DateTime.DATE_FULL, {
+            locale: member?.extra?.lang,
+          }),
+        );
       }
 
       // contributors
@@ -71,12 +77,31 @@ describe('Collection Summary', () => {
       });
     });
 
-    it('Hide co-editor', () => {
+    it(
+      'CC license matches top level element',
+      { defaultCommandTimeout: 20000 },
+      () => {
+        cy.setUpApi(environment);
+
+        const parentItem = PUBLISHED_ITEMS[0];
+        const child = PUBLISHED_ITEMS[2];
+
+        if (parentItem.settings.ccLicenseAdaption && child !== undefined) {
+          cy.visit(buildCollectionRoute(child.id));
+
+          cy.get(`#${SUMMARY_CC_LICENSE_CONTAINER_ID}`).should(
+            'have.class',
+            parentItem.settings.ccLicenseAdaption,
+          );
+        }
+      },
+    );
+
+    it('Hide co-editor', { defaultCommandTimeout: 10000 }, () => {
       cy.setUpApi(environment);
 
       const item = PUBLISHED_ITEMS[1];
       cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
 
       // author
       const authorName = Object.values(MEMBERS).find(

diff --git a/cypress/e2e/collection/tags.cy.js b/cypress/e2e/collection/tags.cy.js
@@ -1,17 +1,16 @@
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { buildCollectionRoute } from '../../../src/config/routes';
-import { COLLECTION_LOADING_TIME } from '../../support/constants';
-import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
 import { SUMMARY_TAGS_CONTAINER_ID } from '../../../src/config/selectors';
+import { buildPublicAndPrivateEnvironments } from '../../fixtures/environment';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
+import { COLLECTION_LOADING_TIME } from '../../support/constants';
 
-describe('Tags in Summary', () => {
+describe('Tags in Summary', { defaultCommandTimeout: 10000 }, () => {
   buildPublicAndPrivateEnvironments().forEach((environment) => {
     it(`Display item's tags for ${environment.currentMember.name}`, () => {
       cy.setUpApi(environment);
 
       const item = PUBLISHED_ITEMS[0];
       cy.visit(buildCollectionRoute(item.id));
-      cy.wait(COLLECTION_LOADING_TIME);
 
       item.settings.tags.forEach((tag) => {
         cy.get(`#${SUMMARY_TAGS_CONTAINER_ID}`).should('contain', tag);

diff --git a/cypress/e2e/header.cy.js b/cypress/e2e/header.cy.js
@@ -1,8 +1,5 @@
 import { HOME_ROUTE } from '../../src/config/routes';
-import {
-  HEADER_ALL_COLLECTIONS_ID,
-  HEADER_MY_LIST_ID,
-} from '../../src/config/selectors';
+import { HEADER_ALL_COLLECTIONS_ID } from '../../src/config/selectors';
 import { PUBLISHED_ITEMS } from '../fixtures/items';
 import { SIGNED_OUT_MEMBER } from '../fixtures/members';
 
@@ -15,7 +12,7 @@ describe('Header', () => {
 
     it('Layout', () => {
       cy.get(`#${HEADER_ALL_COLLECTIONS_ID}`).should('be.visible');
-      cy.get(`#${HEADER_MY_LIST_ID}`).should('be.visible');
+      // cy.get(`#${HEADER_MY_LIST_ID}`).should('be.visible');
     });
   });
 
@@ -27,7 +24,7 @@ describe('Header', () => {
 
     it('Do not show My List if signed out', () => {
       cy.get(`#${HEADER_ALL_COLLECTIONS_ID}`).should('be.visible');
-      cy.get(`#${HEADER_MY_LIST_ID}`).should('not.exist');
+      // cy.get(`#${HEADER_MY_LIST_ID}`).should('not.exist');
     });
   });
 });
diff --git a/cypress/e2e/myLists/myFavorites.cy.js b/cypress/e2e/myLists/myFavorites.cy.js
@@ -1,7 +1,7 @@
 import { MY_LIST_ROUTE } from '../../../src/config/routes';
 import { MY_FAVORITES_COLLECTIONS_ID } from '../../../src/config/selectors';
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { ITEM_PUBLISHED_TAG } from '../../fixtures/itemTags';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
 import { buildMemberWithFavorites } from '../../fixtures/members';
 
 describe('My Favorite Items', () => {

diff --git a/cypress/e2e/myLists/myLikes.cy.js b/cypress/e2e/myLists/myLikes.cy.js
@@ -1,12 +1,12 @@
 import { MY_LIST_ROUTE } from '../../../src/config/routes';
-import { PUBLISHED_ITEMS } from '../../fixtures/items';
-import { ITEM_PUBLISHED_TAG } from '../../fixtures/itemTags';
-import { CURRENT_USER } from '../../fixtures/members';
 import {
-  buildMyListNavigationTabId,
   MY_LIKES_COLLECTIONS_ID,
+  buildMyListNavigationTabId,
 } from '../../../src/config/selectors';
 import { ITEM_LIKES } from '../../fixtures/itemLikes';
+import { ITEM_PUBLISHED_TAG } from '../../fixtures/itemTags';
+import { PUBLISHED_ITEMS } from '../../fixtures/items';
+import { CURRENT_USER } from '../../fixtures/members';
 
 describe('My Liked Items', () => {
   describe('Current user', () => {
@@ -16,9 +16,7 @@ describe('My Liked Items', () => {
       cy.visit(MY_LIST_ROUTE);
 
       // click my likes tab
-      cy.get(
-        `#${buildMyListNavigationTabId('myLikes')}`,
-      ).click();
+      cy.get(`#${buildMyListNavigationTabId('myLikes')}`).click();
 
       // liked items query both item-like table and published items
       cy.wait('@getPublicItemsWithTags').then(({ request: { url } }) => {