fix: reduce island size hide buttons (#699)

* fix: reduce island size and hide buttons that are not used * fix: remove chatbutton if there are no chats enabled * fix: udpate tests * fix: tests
graasp · May 15, 2024 · 22c9e65 · 22c9e65
1 parent 15158f1
commit 22c9e65
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 158 deletions.
diff --git a/cypress/e2e/pinned.cy.ts b/cypress/e2e/pinned.cy.ts
@@ -65,7 +65,7 @@ describe('Pinned Items', () => {
       cy.visit(buildMainPath({ rootId: parent.id }));
 
       cy.wait(['@getChildren']);
-      cy.get(`#${ITEM_PINNED_BUTTON_ID}`).should('be.disabled');
+      cy.get(`#${ITEM_PINNED_BUTTON_ID}`).should('not.exist');
       cy.get(`#${ITEM_PINNED_ID}`).should('not.exist');
     });
   });

diff --git a/cypress/fixtures/documents.ts b/cypress/fixtures/documents.ts
@@ -1,15 +1,14 @@
 import {
   DocumentItemFactory,
   DocumentItemType,
-  ItemTagType,
   ItemType,
   PermissionLevel,
   buildDocumentExtra,
 } from '@graasp/sdk';
 
 import { CURRENT_USER, MEMBERS } from './members';
 import { MockItem } from './mockTypes';
-import { mockItemTag } from './tags';
+import { mockHiddenTag, mockPublicTag } from './tags';
 
 export const GRAASP_DOCUMENT_ITEM: DocumentItemType = DocumentItemFactory({
   id: 'ecafbd2a-5688-12eb-ae91-0242ac130002',
@@ -59,7 +58,7 @@ export const GRAASP_DOCUMENT_ITEM_HIDDEN: MockItem = {
       showChatbox: false,
     },
   }),
-  tags: [mockItemTag({ type: ItemTagType.Hidden })],
+  hidden: mockHiddenTag(),
   memberships: [{ memberId: MEMBERS.BOB.id, permission: PermissionLevel.Read }],
 };
 
@@ -78,7 +77,7 @@ export const GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE: MockItem = {
       showChatbox: false,
     },
   }),
-  tags: [mockItemTag({ type: ItemTagType.Public })],
+  public: mockPublicTag(),
 };
 
 export const GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN: MockItem = {
@@ -97,10 +96,8 @@ export const GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN: MockItem = {
       showChatbox: false,
     },
   }),
-  tags: [
-    mockItemTag({ type: ItemTagType.Public }),
-    mockItemTag({ type: ItemTagType.Hidden }),
-  ],
+  hidden: mockHiddenTag(),
+  public: mockPublicTag(),
 };
 
 export const GRAASP_DOCUMENT_ITEM_WITH_CHAT_BOX: DocumentItemType =

diff --git a/cypress/fixtures/items.ts b/cypress/fixtures/items.ts
@@ -1,9 +1,4 @@
-import {
-  ItemTagType,
-  ItemType,
-  PermissionLevel,
-  buildPathFromIds,
-} from '@graasp/sdk';
+import { ItemType, PermissionLevel, buildPathFromIds } from '@graasp/sdk';
 import { DEFAULT_LANG } from '@graasp/translations';
 
 import { v4 } from 'uuid';
@@ -17,14 +12,15 @@ import {
 } from './documents';
 import { CURRENT_USER, MEMBERS } from './members';
 import { MockItem } from './mockTypes';
-import { mockItemTag } from './tags';
+import { mockHiddenTag, mockPublicTag } from './tags';
 
 export const DEFAULT_FOLDER_ITEM: MockItem = {
   description: '',
   id: '',
   name: '',
   displayName: 'default Display Name',
   path: '',
+  type: ItemType.FOLDER,
   extra: {
     [ItemType.FOLDER]: {
       childrenOrder: [],
@@ -33,7 +29,6 @@ export const DEFAULT_FOLDER_ITEM: MockItem = {
   creator: CURRENT_USER,
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
-  type: ItemType.FOLDER,
   lang: DEFAULT_LANG,
   settings: {
     isPinned: false,
@@ -100,6 +95,7 @@ export const FOLDER_WITH_SUBFOLDER_ITEM: { items: MockItem[] } = {
       id: 'ecafbd2a-5688-11eb-ae93-0242ac130002',
       name: 'parent folder',
       path: 'ecafbd2a_5688_11eb_ae93_0242ac130002',
+      type: ItemType.FOLDER,
       extra: {
         [ItemType.FOLDER]: {
           childrenOrder: [],
@@ -271,7 +267,7 @@ export const PINNED_AND_HIDDEN_ITEM: { items: MockItem[] } = {
         isPinned: true,
         showChatbox: false,
       },
-      tags: [mockItemTag({ type: ItemTagType.Hidden })],
+      hidden: mockHiddenTag(),
     },
     {
       id: 'fdf09f5a-5688-11eb-ae93-0242ac130008',
@@ -304,7 +300,7 @@ export const PUBLIC_FOLDER_WITH_PINNED_ITEMS: { items: MockItem[] } = {
         isPinned: false,
         showChatbox: false,
       },
-      tags: [mockItemTag({ type: ItemTagType.Public })],
+      public: mockPublicTag(),
     },
     {
       ...DEFAULT_FOLDER_ITEM,
@@ -324,7 +320,7 @@ export const PUBLIC_FOLDER_WITH_PINNED_ITEMS: { items: MockItem[] } = {
           icons: [],
         },
       },
-      tags: [mockItemTag({ type: ItemTagType.Public })],
+      public: mockPublicTag(),
     },
     {
       ...DEFAULT_FOLDER_ITEM,
@@ -335,7 +331,7 @@ export const PUBLIC_FOLDER_WITH_PINNED_ITEMS: { items: MockItem[] } = {
         isPinned: true,
         showChatbox: false,
       },
-      tags: [mockItemTag({ type: ItemTagType.Public })],
+      public: mockPublicTag(),
     },
   ],
 };
@@ -363,7 +359,7 @@ export const FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = {
         isPinned: false,
         showChatbox: false,
       },
-      tags: [mockItemTag({ type: ItemTagType.Hidden })],
+      hidden: mockHiddenTag(),
     },
   ],
 };
@@ -409,7 +405,7 @@ export const PUBLIC_FOLDER_WITH_HIDDEN_ITEMS: { items: MockItem[] } = {
         isPinned: false,
         showChatbox: false,
       },
-      tags: [mockItemTag({ type: ItemTagType.Public })],
+      public: mockPublicTag(),
     },
     GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE,
     GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN,

diff --git a/cypress/fixtures/mockTypes.ts b/cypress/fixtures/mockTypes.ts
@@ -1,11 +1,12 @@
-import { DiscriminatedItem, ItemTag, PermissionLevel } from '@graasp/sdk';
+import { ItemTag, PackedItem, PermissionLevel } from '@graasp/sdk';
 
 export type MockItemTag = Omit<ItemTag, 'item'>;
-export type MockItem = DiscriminatedItem & {
+export type MockItem = Omit<PackedItem, 'permission' | 'hidden' | 'public'> & {
   // for testing
   filepath?: string;
   // path to a fixture file in cypress
   filefixture?: string;
   memberships?: { memberId: string; permission: PermissionLevel }[];
-  tags?: MockItemTag[];
+  hidden?: MockItemTag;
+  public?: MockItemTag;
 };
diff --git a/cypress/fixtures/tags.ts b/cypress/fixtures/tags.ts
@@ -5,7 +5,6 @@ import { v4 } from 'uuid';
 import { CURRENT_USER } from './members';
 import { MockItemTag } from './mockTypes';
 
-// eslint-disable-next-line import/prefer-default-export
 export const mockItemTag = ({
   creator = CURRENT_USER,
   type,
@@ -15,6 +14,10 @@ export const mockItemTag = ({
 }): MockItemTag => ({
   id: v4(),
   type,
-  createdAt: new Date(),
+  createdAt: new Date().toISOString(),
   creator,
 });
+export const mockHiddenTag = (creator?: Member): MockItemTag =>
+  mockItemTag({ creator, type: ItemTagType.Hidden });
+export const mockPublicTag = (creator?: Member): MockItemTag =>
+  mockItemTag({ creator, type: ItemTagType.Public });
diff --git a/src/modules/common/HiddenWrapper.tsx b/src/modules/common/HiddenWrapper.tsx
diff --git a/src/modules/common/ItemThumbnail.tsx b/src/modules/common/ItemThumbnail.tsx
@@ -27,7 +27,6 @@ const ItemThumbnail = ({
       mimetype={getMimetype(item.extra)}
       alt={item.name}
       iconSrc={thumbnailSrc}
-      sx={{ borderRadius: 1 }}
     />
   );
 };

diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx
@@ -17,6 +17,7 @@ import {
   ItemType,
   LinkItemType,
   LocalFileItemType,
+  PackedItem,
   PermissionLevel,
   S3FileItemType,
   ShortcutItemType,
@@ -56,7 +57,7 @@ import {
 } from '@/config/selectors';
 import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext';
 import { PLAYER } from '@/langs/constants';
-import { isHidden, paginationContentFilter } from '@/utils/item';
+import { paginationContentFilter } from '@/utils/item';
 
 import NavigationIsland from '../navigationIsland/NavigationIsland';
 import SectionHeader from './SectionHeader';
@@ -67,7 +68,6 @@ const {
   useItem,
   useChildren,
   useFileContentUrl,
-  useItemTags,
   useChildrenPaginated,
 } = hooks;
 
@@ -359,12 +359,9 @@ const ItemContent = ({ item }: ItemContentProps) => {
   }
 };
 
-const ItemContentWrapper = ({ item }: { item: DiscriminatedItem }) => {
-  const { data: itemTags } = useItemTags(item.id);
-  const isItemHidden = isHidden(item, itemTags);
-
+const ItemContentWrapper = ({ item }: { item: PackedItem }) => {
   // An item the user has access to can be hidden (write, admin) so we hide it in player
-  if (isItemHidden) {
+  if (item.hidden) {
     return null;
   }
   return <ItemContent item={item} />;

diff --git a/src/modules/navigation/ItemNavigation.tsx b/src/modules/navigation/ItemNavigation.tsx
@@ -12,12 +12,11 @@ import { axios, hooks } from '@/config/queryClient';
 import { MAIN_MENU_ID, TREE_VIEW_ID } from '@/config/selectors';
 import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext.tsx';
 import TreeView from '@/modules/navigation/tree/TreeView';
-import { isHidden } from '@/utils/item';
 import { combineUuids, shuffleAllButLastItemInArray } from '@/utils/shuffle.ts';
 
 import LoadingTree from './tree/LoadingTree';
 
-const { useItem, useDescendants, useItemsTags } = hooks;
+const { useItem, useDescendants } = hooks;
 
 const DrawerNavigation = (): JSX.Element | null => {
   const rootId = useParams()[ROOT_ID_PATH];
@@ -38,7 +37,6 @@ const DrawerNavigation = (): JSX.Element | null => {
   const { isInitialLoading: isLoadingTree } = useDescendants({
     id: rootId ?? '',
   });
-  const { data: itemsTags } = useItemsTags(descendants?.map(({ id }) => id));
 
   const { data: rootItem, isLoading, isError, error } = useItem(rootId);
   const handleNavigationOnClick = (newItemId: string) => {
@@ -76,9 +74,7 @@ const DrawerNavigation = (): JSX.Element | null => {
           <TreeView
             id={TREE_VIEW_ID}
             rootItems={[rootItem]}
-            items={[rootItem, ...descendants].filter(
-              (ele) => !isHidden(ele, itemsTags?.data?.[ele.id]),
-            )}
+            items={[rootItem, ...descendants].filter((ele) => !ele.hidden)}
             firstLevelStyle={{ fontWeight: 'bold' }}
             onTreeItemSelect={handleNavigationOnClick}
           />

diff --git a/src/modules/navigation/tree/Node.tsx b/src/modules/navigation/tree/Node.tsx
@@ -45,7 +45,7 @@ const Node = ({
     {/* icon type for root level items */}
     {level === 1 && element.metadata?.type && (
       <ItemIcon
-        sx={{ width: 17 }}
+        size="17px"
         alt="icon"
         type={element.metadata.type}
         mimetype={element.metadata.mimetype}