feat: remove aggrid and update memberships tables (#1391)

* feat: remove aggrid and update memberships tables

* refactor: update yarn lock

* refactor: apply PR requested changes

cypress/e2e/item/view/viewFolder.cy.ts

@@ -110,7 +110,7 @@ describe('View Folder', () => {
     cy.get(`#${buildItemCard(child1.id)}`).should('be.visible');
   });
 
-  it.only('Sorting & Ordering', () => {
+  it('Sorting & Ordering', () => {
     const { id } = parentItem;
     cy.visit(buildItemPath(id));
 

cypress/e2e/memberships/deleteItemMembership.cy.ts

@@ -1,11 +1,19 @@
+import {
+  ItemMembership,
+  PackedFolderItemFactory,
+  PermissionLevel,
+} from '@graasp/sdk';
+
 import { buildItemPath } from '../../../src/config/paths';
 import {
   CONFIRM_MEMBERSHIP_DELETE_BUTTON_ID,
   buildItemMembershipRowDeleteButtonId,
   buildShareButtonId,
 } from '../../../src/config/selectors';
+import { CURRENT_USER, MEMBERS } from '../../fixtures/members';
 import { ITEMS_WITH_MEMBERSHIPS } from '../../fixtures/memberships';
 import { TABLE_MEMBERSHIP_RENDER_TIME } from '../../support/constants';
+import { ItemForTest } from '../../support/types';
 
 const deleteItemMembership = ({
   id,
@@ -50,4 +58,36 @@ describe('Delete Membership', () => {
       'be.disabled',
     );
   });
+
+  it('cannot delete if there is only one admin item membership', () => {
+    const item: ItemForTest = PackedFolderItemFactory();
+    const items = [
+      {
+        ...item,
+        memberships: [
+          {
+            permission: PermissionLevel.Admin,
+            member: CURRENT_USER,
+            item,
+          } as unknown as ItemMembership,
+          {
+            permission: PermissionLevel.Read,
+            member: MEMBERS.BOB,
+            item,
+          } as unknown as ItemMembership,
+        ],
+      },
+    ];
+
+    cy.setUpApi({ items });
+    // go to children item
+    const { id, memberships } = items[0];
+    cy.visit(buildItemPath(id));
+    cy.get(`#${buildShareButtonId(id)}`).click();
+
+    const { id: mId } = memberships[1];
+    cy.get(`#${buildItemMembershipRowDeleteButtonId(mId)}`).should(
+      'be.disabled',
+    );
+  });
 });

cypress/e2e/memberships/editItemMembership.cy.ts

@@ -1,13 +1,29 @@
-import { PermissionLevel } from '@graasp/sdk';
+import {
+  ItemMembership,
+  PackedFolderItemFactory,
+  PermissionLevel,
+} from '@graasp/sdk';
 
-import { buildItemPath } from '../../../src/config/paths';
+import { buildItemPath, buildItemSharePath } from '../../../src/config/paths';
 import {
   ITEM_MEMBERSHIP_PERMISSION_SELECT_CLASS,
   buildItemMembershipRowSelector,
   buildPermissionOptionId,
   buildShareButtonId,
 } from '../../../src/config/selectors';
+import { CURRENT_USER, MEMBERS } from '../../fixtures/members';
 import { ITEMS_WITH_MEMBERSHIPS } from '../../fixtures/memberships';
+import { ItemForTest } from '../../support/types';
+
+const openPermissionSelect = (id: string) => {
+  const select = cy.get(
+    `${buildItemMembershipRowSelector(
+      id,
+    )} .${ITEM_MEMBERSHIP_PERMISSION_SELECT_CLASS}`,
+  );
+  select.click();
+  return select;
+};
 
 const editItemMembership = ({
   itemId,
@@ -19,13 +35,7 @@ const editItemMembership = ({
   permission: PermissionLevel;
 }) => {
   cy.get(`#${buildShareButtonId(itemId)}`).click();
-
-  const select = cy.get(
-    `${buildItemMembershipRowSelector(
-      id,
-    )} .${ITEM_MEMBERSHIP_PERMISSION_SELECT_CLASS}`,
-  );
-  select.click();
+  const select = openPermissionSelect(id);
   select.get(`#${buildPermissionOptionId(permission)}`).click();
 };
 
@@ -65,4 +75,39 @@ describe('Edit Membership', () => {
       expect(body?.permission).to.equal(permission);
     });
   });
+
+  it('cannot downgrade child membership', () => {
+    const item: ItemForTest = PackedFolderItemFactory();
+    const child: ItemForTest = PackedFolderItemFactory();
+    const memberships = [
+      {
+        permission: PermissionLevel.Admin,
+        member: CURRENT_USER,
+        item: child,
+      } as unknown as ItemMembership,
+      {
+        permission: PermissionLevel.Write,
+        member: MEMBERS.BOB,
+        item,
+      } as unknown as ItemMembership,
+    ];
+    const items = [
+      {
+        ...child,
+        memberships,
+      },
+    ];
+    cy.setUpApi({ items });
+
+    // go to children item
+    cy.visit(buildItemSharePath(child.id));
+
+    const m = memberships[1];
+    openPermissionSelect(m.id);
+
+    // should not show read
+    cy.get(`#${buildPermissionOptionId(PermissionLevel.Read)}`).should(
+      'not.exist',
+    );
+  });
 });

package.json

@@ -14,8 +14,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@ag-grid-community/core": "31.3.4",
-    "@ag-grid-community/styles": "31.3.4",
     "@air/react-drag-to-select": "5.0.8",
     "@emotion/cache": "11.13.0",
     "@emotion/react": "11.13.0",

src/components/Root.tsx

@@ -1,6 +1,3 @@
-import './styles.css';
-import '@ag-grid-community/styles/ag-grid.min.css';
-import '@ag-grid-community/styles/ag-theme-material.min.css';
 // hack to have the text editor styles available without having to bundle them with graasp/ui
 import 'katex/dist/katex.min.css';
 import 'react-quill/dist/quill.snow.css';