feat: Show the buttons in the detail page for the wishlist as disabled (

decentraland#1826) * feat: Show the buttons in the detail page for the wishlist as disabled * Update webapp/src/components/ListPage/ListPage.spec.tsx Co-authored-by: Lautaro Petaccio <[email protected]> Signed-off-by: Kevin Szuchet <[email protected]> * feat: Add tooltip for wishlist for the disabled kebab menu --------- Signed-off-by: Kevin Szuchet <[email protected]> Co-authored-by: Lautaro Petaccio <[email protected]>
siengvantran · Jun 19, 2023 · 2d58aac · 2d58aac
1 parent d66fe32
commit 2d58aac
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 43 deletions.
diff --git a/webapp/src/components/ListPage/ListPage.module.css b/webapp/src/components/ListPage/ListPage.module.css
@@ -34,6 +34,7 @@
 .actions {
   display: flex;
   align-items: center;
+  column-gap: 15px;
 }
 
 .actions :global(.ui.button).iconContainer {
@@ -54,6 +55,10 @@
   color: var(--background);
 }
 
+.actions :global(.ui.button + .ui.button) {
+  margin: 0;
+}
+
 :global(.ui.header).header .actions :global(.ui.button).iconContainer :global(.icon) {
   display: flex;
   justify-content: center;

diff --git a/webapp/src/components/ListPage/ListPage.spec.tsx b/webapp/src/components/ListPage/ListPage.spec.tsx
@@ -18,7 +18,8 @@ import {
   ERROR_CONTAINER_TEST_ID,
   COULD_NOT_LOAD_LIST_ACTION_TEST_ID,
   GO_BACK_BUTTON_TEST_ID,
-  EMPTY_LIST_ACTION_TEST_ID
+  EMPTY_LIST_ACTION_TEST_ID,
+  MORE_OPTIONS_DROPDOWN_TEST_ID
 } from './constants'
 import { Props } from './ListPage.types'
 
@@ -191,23 +192,33 @@ describe('when rendering the ListPage with a loaded list', () => {
     describe('when the lists feature flag is on', () => {
       beforeEach(() => {
         renderedPage = renderListPage({
-          list: { ...list, id: DEFAULT_FAVORITES_LIST_ID },
+          list: { ...list, id: DEFAULT_FAVORITES_LIST_ID, isPrivate: true },
           isListV1Enabled: true
         })
       })
 
-      it('should hide the share list button', () => {
-        expect(renderedPage.queryByTestId(SHARE_LIST_BUTTON_TEST_ID)).toBeNull()
+      it('should show the share list button disabled', () => {
+        expect(
+          renderedPage.getByTestId(SHARE_LIST_BUTTON_TEST_ID)
+        ).toBeDisabled()
       })
 
-      it('should hide the edit list button', () => {
-        expect(renderedPage.queryByTestId(EDIT_LIST_BUTTON_TEST_ID)).toBeNull()
+      it('should disable the dropdown to edit and delete the list', () => {
+        expect(
+          renderedPage.getByTestId(MORE_OPTIONS_DROPDOWN_TEST_ID)
+        ).toHaveClass('disabled')
       })
 
-      it('should hide the delete list button', () => {
+      it('should disable the dropdown item to edit the list', () => {
+        expect(renderedPage.getByTestId(EDIT_LIST_BUTTON_TEST_ID)).toHaveClass(
+          'disabled'
+        )
+      })
+
+      it('should disable the dropdown item to delete the list', () => {
         expect(
-          renderedPage.queryByTestId(DELETE_LIST_BUTTON_TEST_ID)
-        ).toBeNull()
+          renderedPage.getByTestId(DELETE_LIST_BUTTON_TEST_ID)
+        ).toHaveClass('disabled')
       })
     })
 

diff --git a/webapp/src/components/ListPage/ListPage.tsx b/webapp/src/components/ListPage/ListPage.tsx
@@ -1,7 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Link, Redirect, useLocation } from 'react-router-dom'
 import classNames from 'classnames'
-import { Back, Button, Dropdown, Header, Icon, Loader } from 'decentraland-ui'
+import {
+  Back,
+  Button,
+  Dropdown,
+  Header,
+  Icon,
+  Loader,
+  Popup
+} from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { formatDistanceToNow } from '../../lib/date'
@@ -18,7 +26,6 @@ import { LinkedProfile } from '../LinkedProfile'
 import { PrivateTag } from '../PrivateTag'
 import { Props } from './ListPage.types'
 import styles from './ListPage.module.css'
-
 import {
   ERROR_CONTAINER_TEST_ID,
   COULD_NOT_LOAD_LIST_ACTION_TEST_ID,
@@ -32,7 +39,8 @@ import {
   ASSET_BROWSE_TEST_ID,
   EMPTY_LIST_TEST_ID,
   GO_BACK_BUTTON_TEST_ID,
-  EMPTY_LIST_ACTION_TEST_ID
+  EMPTY_LIST_ACTION_TEST_ID,
+  MORE_OPTIONS_DROPDOWN_TEST_ID
 } from './constants'
 
 const LIST_NOT_FOUND = 'list was not found'
@@ -159,38 +167,65 @@ const ListPage = ({
                 />
               )}
             </div>
-            {list.id !== DEFAULT_FAVORITES_LIST_ID && !isPublicView ? (
+            {!isPublicView ? (
               <div className={styles.actions}>
-                <Button
-                  className={classNames(styles.iconContainer, styles.share)}
-                  inverted
-                  compact
-                  onClick={handleShareList}
-                  disabled={list.isPrivate}
-                  data-testid={SHARE_LIST_BUTTON_TEST_ID}
-                >
-                  <Icon name="share alternate" />
-                </Button>
-                <Dropdown
-                  compact
-                  className={styles.iconContainer}
-                  icon={<Icon name="ellipsis horizontal" />}
-                  as={Button}
-                  inverted
-                >
-                  <Dropdown.Menu direction="left">
-                    <Dropdown.Item
-                      text={t('list_page.edit_list')}
-                      onClick={() => onEditList(list)}
-                      data-testid={EDIT_LIST_BUTTON_TEST_ID}
-                    />
-                    <Dropdown.Item
-                      text={t('list_page.delete_list')}
-                      onClick={() => onDeleteList(list)}
-                      data-testid={DELETE_LIST_BUTTON_TEST_ID}
-                    />
-                  </Dropdown.Menu>
-                </Dropdown>
+                <Popup
+                  content={t('list_page.disable_sharing')}
+                  position="top left"
+                  trigger={
+                    <span>
+                      <Button
+                        className={classNames(
+                          styles.iconContainer,
+                          styles.share
+                        )}
+                        inverted
+                        compact
+                        onClick={handleShareList}
+                        disabled={list.isPrivate}
+                        data-testid={SHARE_LIST_BUTTON_TEST_ID}
+                      >
+                        <Icon name="share alternate" />
+                      </Button>
+                    </span>
+                  }
+                  on="hover"
+                  disabled={!list.isPrivate}
+                />
+                <Popup
+                  content={t('list_page.disable_kebab_menu')}
+                  position="top left"
+                  trigger={
+                    <span>
+                      <Dropdown
+                        compact
+                        className={styles.iconContainer}
+                        icon={<Icon name="ellipsis horizontal" />}
+                        as={Button}
+                        inverted
+                        disabled={list.id === DEFAULT_FAVORITES_LIST_ID}
+                        data-testid={MORE_OPTIONS_DROPDOWN_TEST_ID}
+                      >
+                        <Dropdown.Menu direction="left">
+                          <Dropdown.Item
+                            text={t('list_page.edit_list')}
+                            onClick={() => onEditList(list)}
+                            data-testid={EDIT_LIST_BUTTON_TEST_ID}
+                            disabled={list.id === DEFAULT_FAVORITES_LIST_ID}
+                          />
+                          <Dropdown.Item
+                            text={t('list_page.delete_list')}
+                            onClick={() => onDeleteList(list)}
+                            data-testid={DELETE_LIST_BUTTON_TEST_ID}
+                            disabled={list.id === DEFAULT_FAVORITES_LIST_ID}
+                          />
+                        </Dropdown.Menu>
+                      </Dropdown>
+                    </span>
+                  }
+                  on="hover"
+                  disabled={list.id !== DEFAULT_FAVORITES_LIST_ID}
+                />
               </div>
             ) : null}
           </Header>

diff --git a/webapp/src/components/ListPage/constants.tsx b/webapp/src/components/ListPage/constants.tsx
@@ -11,3 +11,4 @@ export const EDIT_LIST_BUTTON_TEST_ID = 'edit-list'
 export const DELETE_LIST_BUTTON_TEST_ID = 'delete-list'
 export const COULD_NOT_LOAD_LIST_ACTION_TEST_ID = 'could-not-load-list-action'
 export const GO_BACK_BUTTON_TEST_ID = 'go-back'
+export const MORE_OPTIONS_DROPDOWN_TEST_ID = 'more-options-dropdown'
diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -1328,6 +1328,8 @@
     "edit_list": "Edit List",
     "delete_list": "Delete List",
     "last_updated_at": "Last updated",
+    "disable_sharing": "Private lists cannot be shared.",
+    "disable_kebab_menu": "The wishlist can't be edited or deleted.",
     "empty": {
       "owner": {
         "title": "You don't have any saved items in this list",

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -1319,6 +1319,8 @@
     "edit_list": "Editar Lista",
     "delete_list": "Eliminar Lista",
     "last_updated_at": "Última actualización",
+    "disable_sharing": "Las listas privadas no se pueden compartir.",
+    "disable_kebab_menu": "La lista de deseos no se puede editar ni eliminar.",
     "empty": {
       "owner": {
         "title": "No tienes elementos guardados en esta lista",

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -1324,6 +1324,8 @@
     "edit_list": "编辑列表",
     "delete_list": "删除列表",
     "last_updated_at": "最后更新于",
+    "disable_sharing": "私人列表不能共享。",
+    "disable_kebab_menu": "心愿单无法编辑或删除。",
     "empty": {
       "owner": {
         "title": "您在此列表中没有任何已保存的项目",