fix: filter hidden from pinned

.github/workflows/cypress.yml

@@ -41,7 +41,7 @@ jobs:
 
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           install: false
           start: yarn preview:test

cypress/e2e/pinned.cy.ts

@@ -2,11 +2,13 @@ import { buildMainPath } from '../../src/config/paths';
 import {
   ITEM_PINNED_BUTTON_ID,
   ITEM_PINNED_ID,
+  buildDocumentId,
   buildFolderButtonId,
 } from '../../src/config/selectors';
 import {
   FOLDER_WITH_PINNED_ITEMS,
   FOLDER_WITH_SUBFOLDER_ITEM,
+  PINNED_AND_HIDDEN_ITEM,
   PUBLIC_FOLDER_WITH_PINNED_ITEMS,
 } from '../fixtures/items';
 import { MEMBERS } from '../fixtures/members';
@@ -22,7 +24,7 @@ describe('Pinned Items', () => {
       });
     });
 
-    it('Pinned button should toggle sidebar visiblity', () => {
+    it('Pinned button should toggle sidebar visibility', () => {
       const parent = FOLDER_WITH_SUBFOLDER_ITEM.items[0];
 
       cy.visit(buildMainPath({ rootId: parent.id }));
@@ -88,3 +90,22 @@ describe('Pinned Items', () => {
     });
   });
 });
+
+describe('Pinned and hidden children', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      items: PINNED_AND_HIDDEN_ITEM.items,
+    });
+  });
+
+  it('Should not open pinned drawer if only pinned item is also hidden', () => {
+    const parent = PINNED_AND_HIDDEN_ITEM.items[0];
+    const normalDocument = PINNED_AND_HIDDEN_ITEM.items[2];
+    cy.visit(buildMainPath({ rootId: parent.id }));
+
+    // check that the document is shown
+    cy.get(`#${buildDocumentId(normalDocument.id)}`);
+    // check that the pinned icon is not shown
+    cy.get(`#${ITEM_PINNED_ID}`).should('not.exist');
+  });
+});

cypress/fixtures/items.ts

@@ -4,6 +4,7 @@ import {
   PermissionLevel,
   buildPathFromIds,
 } from '@graasp/sdk';
+import { DEFAULT_LANG } from '@graasp/translations';
 
 import { v4 } from 'uuid';
 
@@ -32,6 +33,7 @@ export const DEFAULT_FOLDER_ITEM: MockItem = {
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
   type: ItemType.FOLDER,
+  lang: DEFAULT_LANG,
   settings: {
     isPinned: false,
     showChatbox: false,
@@ -209,6 +211,49 @@ export const FOLDER_WITH_PINNED_ITEMS: { items: MockItem[] } = {
   ],
 };
 
+export const PINNED_AND_HIDDEN_ITEM: { items: MockItem[] } = {
+  items: [
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'ecafbd2a-5688-11eb-ae93-0242ac130005',
+      name: 'parent folder',
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130005',
+      settings: {
+        isPinned: false,
+        showChatbox: false,
+      },
+    },
+    {
+      ...DEFAULT_FOLDER_ITEM,
+      id: 'fdf09f5a-5688-11eb-ae93-0242ac130007',
+      name: 'PINNED & hidden',
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130005.fdf09f5a_5688_11eb_ae93_0242ac130007',
+      settings: {
+        isPinned: true,
+        showChatbox: false,
+      },
+      tags: [mockItemTag({ type: ItemTagType.Hidden })],
+    },
+    {
+      id: 'fdf09f5a-5688-11eb-ae93-0242ac130008',
+      name: 'Normal child',
+      description: 'I am a normal item',
+
+      type: ItemType.DOCUMENT,
+      extra: { [ItemType.DOCUMENT]: { content: 'hello' } },
+      path: 'ecafbd2a_5688_11eb_ae93_0242ac130005.fdf09f5a_5688_11eb_ae93_0242ac130008',
+      settings: {
+        isPinned: false,
+        showChatbox: false,
+      },
+      lang: DEFAULT_LANG,
+      creator: CURRENT_USER,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    },
+  ],
+};
+
 export const PUBLIC_FOLDER_WITH_PINNED_ITEMS: { items: MockItem[] } = {
   items: [
     {

src/modules/rightPanel/SideContent.tsx

@@ -3,9 +3,10 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import { Grid, Stack, Tooltip, styled } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 
-import { DiscriminatedItem, ItemType } from '@graasp/sdk';
+import { DiscriminatedItem, ItemTagType, ItemType } from '@graasp/sdk';
 
 import { usePlayerTranslation } from '@/config/i18n';
+import { hooks } from '@/config/queryClient';
 import { useItemContext } from '@/contexts/ItemContext';
 import { useLayoutContext } from '@/contexts/LayoutContext';
 import { PLAYER } from '@/langs/constants';
@@ -60,6 +61,7 @@ type Props = {
 
 const SideContent = ({ content, item }: Props): JSX.Element | null => {
   const { descendants, rootId } = useItemContext();
+  const { data: tags } = hooks.useItemsTags(descendants?.map(({ id }) => id));
 
   const {
     isPinnedMenuOpen,
@@ -91,7 +93,12 @@ const SideContent = ({ content, item }: Props): JSX.Element | null => {
   );
 
   const pinnedCount =
-    descendants?.filter(({ settings: s }) => s.isPinned)?.length || 0;
+    descendants?.filter(
+      ({ id, settings: s }) =>
+        s.isPinned &&
+        // do not count hidden items as they are not displayed
+        !tags?.data?.[id].some(({ type }) => type === ItemTagType.Hidden),
+    )?.length || 0;
 
   const toggleChatOpen = () => {
     setIsChatboxMenuOpen(!isChatboxMenuOpen);

vite.config.ts

@@ -35,6 +35,7 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
       checker({
         typescript: true,
         eslint: { lintCommand: 'eslint "./**/*.{ts,tsx}"' },
+        overlay: { initialIsOpen: false },
       }),
       react(),
       istanbul({