fix: add tooltips on disabled navigation buttons (#661)

* fix: add tooltips on buttons * fix: add spans and remove tooltips when buttons are enabled
graasp · May 1, 2024 · 5905829 · 5905829
1 parent 58df44a
commit 5905829
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 33 deletions.
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
@@ -25,4 +25,12 @@ export const PLAYER = {
   ITEM_CHATBOX_TITLE: 'ITEM_CHATBOX_TITLE',
   ITEM_TITLE_CREATED_AT: 'ITEM_TITLE_CREATED_AT',
   ITEM_TITLE_UPDATED_AT: 'ITEM_TITLE_UPDATED_AT',
+  NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_READERS:
+    'NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_READERS',
+  NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_WRITERS:
+    'NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_WRITERS',
+  NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_READERS:
+    'NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_READERS',
+  NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_WRITERS:
+    'NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_WRITERS',
 };
diff --git a/src/langs/en.json b/src/langs/en.json
@@ -23,5 +23,9 @@
   "GO_TO_HOME": "Go to Home",
   "ITEM_CHATBOX_TITLE": "\"{{name}}\" Chat",
   "ITEM_TITLE_CREATED_AT": "Created: {{date}}",
-  "ITEM_TITLE_UPDATED_AT": "Updated: {{date}}"
+  "ITEM_TITLE_UPDATED_AT": "Updated: {{date}}",
+  "NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_READERS": "The chatbox has not been enabled for this item.",
+  "NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_WRITERS": "To enable the chatbox, go in the item settings in the Builder and activate the 'Show Chat in Player' setting.",
+  "NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_READERS": "There are no items pinned for this page.",
+  "NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_WRITERS": "To add items to the pinned section, set them as pinned in the Builder interface."
 }
diff --git a/src/modules/navigationIsland/ChatButton.tsx b/src/modules/navigationIsland/ChatButton.tsx
@@ -1,5 +1,9 @@
 import { useParams } from 'react-router-dom';
 
+import { Tooltip } from '@mui/material';
+
+import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk';
+
 import { MessageSquareOff, MessageSquareText } from 'lucide-react';
 
 import { usePlayerTranslation } from '@/config/i18n';
@@ -15,27 +19,34 @@ const useChatButton = (): { chatButton: JSX.Element | false } => {
   const { itemId } = useParams();
   const { data: item } = hooks.useItem(itemId);
   const { toggleChatbox, isChatboxOpen } = useLayoutContext();
+  const canWrite = item?.permission
+    ? PermissionLevelCompare.gte(item?.permission, PermissionLevel.Write)
+    : false;
 
-  // do not show chatbox button is chatbox setting is not enabled
-  // if () {
-  //   return { chatButton: false };
-  // }
+  const isDisabled = !item?.settings?.showChatbox;
+  const tooltip = canWrite
+    ? t(PLAYER.NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_WRITERS)
+    : t(PLAYER.NAVIGATION_ISLAND_CHAT_BUTTON_HELPER_TEXT_READERS);
 
   return {
     chatButton: (
-      <ToolButton
-        disabled={!item?.settings?.showChatbox}
-        key="chatButton"
-        id={ITEM_CHATBOX_BUTTON_ID}
-        onClick={toggleChatbox}
-        aria-label={
-          isChatboxOpen
-            ? t(PLAYER.HIDE_CHAT_TOOLTIP)
-            : t(PLAYER.SHOW_CHAT_TOOLTIP)
-        }
-      >
-        {isChatboxOpen ? <MessageSquareOff /> : <MessageSquareText />}
-      </ToolButton>
+      <Tooltip title={isDisabled ? tooltip : undefined} arrow>
+        <span>
+          <ToolButton
+            disabled={isDisabled}
+            key="chatButton"
+            id={ITEM_CHATBOX_BUTTON_ID}
+            onClick={toggleChatbox}
+            aria-label={
+              isChatboxOpen
+                ? t(PLAYER.HIDE_CHAT_TOOLTIP)
+                : t(PLAYER.SHOW_CHAT_TOOLTIP)
+            }
+          >
+            {isChatboxOpen ? <MessageSquareOff /> : <MessageSquareText />}
+          </ToolButton>
+        </span>
+      </Tooltip>
     ),
   };
 };

diff --git a/src/modules/navigationIsland/PinnedItemsButton.tsx b/src/modules/navigationIsland/PinnedItemsButton.tsx
@@ -1,6 +1,12 @@
 import { useParams } from 'react-router-dom';
 
-import { ItemTagType } from '@graasp/sdk';
+import { Tooltip } from '@mui/material';
+
+import {
+  ItemTagType,
+  PermissionLevel,
+  PermissionLevelCompare,
+} from '@graasp/sdk';
 
 import { Pin, PinOff } from 'lucide-react';
 
@@ -28,25 +34,36 @@ const usePinnedItemsButton = (): { pinnedButton: JSX.Element | false } => {
         // do not count hidden items as they are not displayed
         !tags?.data?.[id].some(({ type }) => type === ItemTagType.Hidden),
     )?.length || 0;
-
+  const canWrite = item?.permission
+    ? PermissionLevelCompare.gte(item?.permission, PermissionLevel.Write)
+    : false;
   // we should show the icon as open if there are pinned items and the drawer is open
   const isOpen = isPinnedOpen && pinnedCount > 0;
 
+  const isDisabled = pinnedCount <= 0;
+  const tooltip = canWrite
+    ? t(PLAYER.NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_WRITERS)
+    : t(PLAYER.NAVIGATION_ISLAND_PINNED_BUTTON_HELPER_TEXT_READERS);
+
   return {
     pinnedButton: (
-      <ToolButton
-        disabled={pinnedCount <= 0}
-        key="pinnedButton"
-        id={ITEM_PINNED_BUTTON_ID}
-        onClick={togglePinned}
-        aria-label={
-          isOpen
-            ? t(PLAYER.HIDE_PINNED_ITEMS_TOOLTIP)
-            : t(PLAYER.SHOW_PINNED_ITEMS_TOOLTIP)
-        }
-      >
-        {isOpen ? <PinOff /> : <Pin />}
-      </ToolButton>
+      <Tooltip title={isDisabled ? tooltip : undefined} arrow>
+        <span>
+          <ToolButton
+            disabled={isDisabled}
+            key="pinnedButton"
+            id={ITEM_PINNED_BUTTON_ID}
+            onClick={togglePinned}
+            aria-label={
+              isOpen
+                ? t(PLAYER.HIDE_PINNED_ITEMS_TOOLTIP)
+                : t(PLAYER.SHOW_PINNED_ITEMS_TOOLTIP)
+            }
+          >
+            {isOpen ? <PinOff /> : <Pin />}
+          </ToolButton>
+        </span>
+      </Tooltip>
     ),
   };
 };