Replace X button with dropdown menu in CollectionItemRow

client/modules/User/components/CollectionItemRow.jsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { removeFromCollection } from '../../IDE/actions/collections';
 import { formatDateToString } from '../../../utils/formatDate';
-import RemoveIcon from '../../../images/close.svg';
-import { Tooltip } from '../../../common/Tooltip';
+import { TableDropdown } from '../../../components/Dropdown/TableDropdown';
+import { MenuItem } from '../../../components/Dropdown/MenuItem';
 
 const CollectionItemRow = ({ collection, item, isOwner }) => {
   const { t } = useTranslation();
@@ -47,17 +47,16 @@ const CollectionItemRow = ({ collection, item, isOwner }) => {
       <th scope="row">{name}</th>
       <td>{formatDateToString(item.createdAt)}</td>
       <td>{sketchOwnerUsername}</td>
-      <td className="collection-row__action-column">
+      <td className="sketch-list__dropdown-column">
         {isOwner && (
-          <Tooltip content={t('Collection.SketchRemoveARIA')}>
-            <button
-              className="collection-row__remove-button"
-              onClick={handleSketchRemove}
-              aria-label={t('Collection.SketchRemoveARIA')}
-            >
-              <RemoveIcon focusable="false" aria-hidden="true" />
-            </button>
-          </Tooltip>
+          <TableDropdown
+            aria-label={t('SketchList.ToggleLabelARIA')}
+            className="collection-item__dropdown"
+          >
+            <MenuItem onClick={handleSketchRemove}>
+              {t('Collection.SketchRemoveLabel')}
+            </MenuItem>
+          </TableDropdown>
         )}
       </td>
     </tr>

client/modules/User/components/CollectionItemRow.unit.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
-import { reduxRender, screen, fireEvent, act } from '../../../test-utils';
+import { reduxRender, screen } from '../../../test-utils';
 import { initialTestState } from '../../../testData/testReduxStore';
 import CollectionItemRow from './CollectionItemRow';
 
@@ -56,9 +56,9 @@ describe('<CollectionItemRow />', () => {
     expect(screen.getByText('testuser')).toBeInTheDocument();
   });
 
-  it('shows the remove button when user is the owner', () => {
+  it('shows the dropdown menu when user is the owner', () => {
     subject();
-    expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /toggle/i })).toBeInTheDocument();
   });
 
   describe('when user is not the owner', () => {
@@ -70,24 +70,14 @@ describe('<CollectionItemRow />', () => {
       subjectProps = { ...subjectProps, isOwner: true };
     });
 
-    it('does not show the remove button', () => {
+    it('does not show the dropdown menu', () => {
       subject();
       expect(
-        screen.queryByRole('button', { name: /remove/i })
+        screen.queryByRole('button', { name: /toggle/i })
       ).not.toBeInTheDocument();
     });
   });
 
-  it('wraps the remove button with a tooltip', async () => {
-    subject();
-
-    const button = screen.getByRole('button', { name: /remove/i });
-    await act(async () => {
-      fireEvent.mouseEnter(button);
-    });
-    expect(button).toHaveClass('tooltipped');
-  });
-
   describe('when the project is deleted', () => {
     beforeAll(() => {
       subjectProps = {

client/styles/components/_collection.scss

@@ -4,7 +4,7 @@
   padding: #{math.div(24, $base-font-size)}rem #{math.div(66, $base-font-size)}rem;
   position: relative;
   flex: 1;
-  overflow: hidden;
+  overflow: visible;
   display: flex;
   flex-direction:column;
 
@@ -116,7 +116,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow: hidden;
+  overflow: visible;
   max-width: #{math.div(1012, $base-font-size)}rem;
   margin: 0 auto;
   width: 100%;
@@ -127,7 +127,6 @@
 }
 
 .collection-table-wrapper {
-  overflow-y: auto;
   max-width: 100%;
   min-height: 100%;
 }
@@ -145,57 +144,11 @@
   font-size: #{math.div(16, $base-font-size)}rem;
 }
 
-.collection-row__action-column {
-  width: #{math.div(60, $base-font-size)}rem;
-  position: relative;
-
-  .tooltip-wrapper {
-    display: inline-flex;
-    width: auto;
-
-    .tooltipped::after {
-      right: 0;
-      left: auto;
-    }
-
-    .tooltipped-n::before,
-    .tooltipped::before {
-      right: #{math.div(10, $base-font-size)}rem;
-      left: auto;
-    }
+.collection-item__dropdown {
+  & ul {
+    width: #{math.div(180, $base-font-size)}rem;
+    top: 74%;
+    right: calc(100% - 26px);
   }
 }
 
-.collection-row__remove-button {
-  display: inline-block;
-  width:#{math.div(35, $base-font-size)}rem;
-  height:#{math.div(35, $base-font-size)}rem;
-  @include icon();
-  @include themify() {
-    // icon graphic
-    path {
-      fill: getThemifyVariable('table-button-color');
-    }
-
-    // icon background circle
-    path:first-child {
-      fill: getThemifyVariable('table-button-background-color');
-    }
-
-    & svg {
-      width:#{math.div(35, $base-font-size)}rem;
-      height:#{math.div(35, $base-font-size)}rem;
-    }
-
-    &:hover,
-    &:focus {
-      path {
-        fill: getThemifyVariable('table-button-hover-color');
-      }
-
-      path:first-child {
-        fill: getThemifyVariable('table-button-background-hover-color');
-      }
-    }
-  }
-}

translations/locales/bn/translations.json

@@ -473,6 +473,7 @@
     "AddSketch": "স্কেচ যোগ করুন",
     "DeleteFromCollection": "{{name_sketch}} কে এই সংগ্রহ থেকে সরাতে চান কি না?",
     "SketchDeleted": "স্কেচ ডিলিট হয়েছে",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "সংগ্রহ থেকে স্কেচ রিমুভ করুন",
     "DescriptionPlaceholder": "বর্ণনা যোগ করুন",
     "NumSketches": "{{count}} স্কেচ",

translations/locales/de/translations.json

@@ -432,6 +432,7 @@
     "AddSketch": "Sketch hinzufügen",
     "DeleteFromCollection": "Bist Du sicher, dass Du {{name_sketch}} aus dieser Sammlung entfernen willst?",
     "SketchDeleted": "Sketch gelöscht",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Sketch aus der Sammlung entfernen",
     "DescriptionPlaceholder": "Beschreibung hinzufügen",
     "Description": "Beschreibung",

translations/locales/en-US/translations.json

@@ -516,6 +516,7 @@
     "DeleteFromCollection": "Are you sure you want to remove {{name_sketch}} from this collection?",
     "SketchDeleted": "Sketch deleted",
     "SketchRemoveARIA": "Remove sketch from collection",
+    "SketchRemoveLabel": "Remove from Collection",
     "DescriptionPlaceholder": "Add description",
     "Description": "description",
     "NumSketches": "{{count}} sketch",

translations/locales/es-419/translations.json

@@ -442,6 +442,7 @@
     "AddSketch": "Agregar Bosquejo",
     "DeleteFromCollection": "¿Estás seguro que quieres remover {{name_sketch}} de esta colección?",
     "SketchDeleted": "El bosquejo fue eliminado",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Remover bosquejo de la colección",
     "DescriptionPlaceholder": "Agregar descripción",
     "Description": "descripción",

translations/locales/fr-CA/translations.json

@@ -446,6 +446,7 @@
       "AddSketch": "Ajouter un croquis",
       "DeleteFromCollection": "Êtes-vous sûr de vouloir supprimer {{name_sketch}} de cette collection?",
       "SketchDeleted": "Croquis supprimé",
+    "SketchRemoveLabel": "Remove from Collection",
       "SketchRemoveARIA": "Supprimer le croquis de la collection",
       "DescriptionPlaceholder": "Ajouter une description",
       "Description": "description",

translations/locales/hi/translations.json

@@ -510,6 +510,7 @@
     "AddSketch": "स्केच जोड़ें",
     "DeleteFromCollection": "क्या आप वाकई {{name_sketch}} को इस संग्रह से हटाना चाहते हो?",
     "SketchDeleted": "स्केच डिलीट किया",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "स्केच संग्रह से हटाएं",
     "DescriptionPlaceholder": "विवरण लिखें",
     "NumSketches": "{{count}} स्केच",

translations/locales/it/translations.json

@@ -445,6 +445,7 @@
     "AddSketch": "Aggiungi sketch",
     "DeleteFromCollection": "Sei sicuro di voler cancellare {{name_sketch}} dalla collezione?",
     "SketchDeleted": "Sketch cancellato",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Cancella sketch dalla collezione",
     "DescriptionPlaceholder": "Aggiungi descrizione",
     "Description": "descrizione",

translations/locales/ja/translations.json

@@ -436,6 +436,7 @@
       "AddSketch": "スケッチを追加する",
       "DeleteFromCollection": "このコレクションから {{name_sketch}} を削除してもよろしいですか？",
       "SketchDeleted": "スケッチが削除されました",
+    "SketchRemoveLabel": "Remove from Collection",
       "SketchRemoveARIA": "コレクションからスケッチを削除する",
       "DescriptionPlaceholder": "スケッチについて記述する",
       "Description": "コレクションについて",

translations/locales/ko/translations.json

@@ -424,6 +424,7 @@
     "AddSketch": "스케치 추가하기 Add Sketch",
     "DeleteFromCollection": "Are you sure you want to remove {{name_sketch}} from this collection?",
     "SketchDeleted": "Sketch deleted",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Remove sketch from collection",
     "DescriptionPlaceholder": "Add description",
     "Description": "description",

translations/locales/ne/translations.json

@@ -507,6 +507,7 @@
     "AddSketch": "स्केच थप्नुहोस्",
     "DeleteFromCollection": "के तपाईं पक्का यो कलेक्सनबाट {{name_sketch}} हटाउन चाहनुहुन्छ?",
     "SketchDeleted": "स्केच डिलिट भयो",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "कलेक्सनबाट स्केच हटाउनुहोस्",
     "DescriptionPlaceholder": "विवरण थप्नुहोस्",
     "Description": "विवरण",

translations/locales/pt-BR/translations.json

@@ -475,6 +475,7 @@
     "AddSketch": "Adicionar Esboço",
     "DeleteFromCollection": "Realmente quer remover {{name_sketch}} dessa coleção?",
     "SketchDeleted": "Esboço apagado",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Remover esboço da coleção",
     "DescriptionPlaceholder": "Adicionar descrição",
     "NumSketches": "{{count}} esboço(s)",

translations/locales/sv/translations.json

@@ -435,6 +435,7 @@
     "AddSketch": "Lägg till sketch",
     "DeleteFromCollection": "Är du säker på att du vill radera {{name_sketch}} från den här samlingen?",
     "SketchDeleted": "Sketchen är raderad",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Radera sketch från samling",
     "DescriptionPlaceholder": "Lägg till beskrivning",
     "Description": "beskrivning",

translations/locales/tr/translations.json

@@ -439,6 +439,7 @@
     "AddSketch": "Eskiz ekle",
     "DeleteFromCollection": "{{name_sketch}} eskizini koleksiyondan kaldırmak istediğinizden emin misiniz?",
     "SketchDeleted": "Eskiz silindi",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Eskiz koleksiyondan kaldır",
     "DescriptionPlaceholder": "Açıklama ekle",
     "Description": "açıklama",

translations/locales/uk-UA/translations.json

@@ -497,6 +497,7 @@
     "AddSketch": "Додати скетч",
     "DeleteFromCollection": "Ви впевнені, що хочете видалити {{name_sketch}} з цієї колекції?",
     "SketchDeleted": "Скетч видалено",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "Видалити скетч із колекції",
     "DescriptionPlaceholder": "Додати опис",
     "Description": "опис",

translations/locales/ur/translations.json

@@ -436,6 +436,7 @@
       "AddSketch": "خاکہ شامل کریں۔",
       "DeleteFromCollection": "کیا آپ واقعی ہٹانا چاہتے ہیں {{name_sketch}} اس مجموعہ سے؟",
       "SketchDeleted": "خاکہ حذف کر دیا گیا۔",
+    "SketchRemoveLabel": "Remove from Collection",
       "SketchRemoveARIA": "مجموعہ سے خاکہ کو ہٹا دیں۔",
       "DescriptionPlaceholder": "تفصیل شامل کریں۔",
       "Description": "تفصیل",

translations/locales/zh-CN/translations.json

@@ -438,6 +438,7 @@
     "AddSketch": "添加项目",
     "DeleteFromCollection": "您确定要从此集合中删除 {{name_sketch}} 吗？",
     "SketchDeleted": "项目已删除",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "从集合中移除项目",
     "DescriptionPlaceholder": "添加描述",
     "Description": "描述",

translations/locales/zh-TW/translations.json

@@ -438,6 +438,7 @@
     "AddSketch": "新增草稿",
     "DeleteFromCollection": "確定要從本作品集移除 {{name_sketch}}？",
     "SketchDeleted": "已刪除草稿",
+    "SketchRemoveLabel": "Remove from Collection",
     "SketchRemoveARIA": "從作品集移除草稿",
     "DescriptionPlaceholder": "新增說明",
     "Description": "說明",