feat: rename 'View' button to 'Columns' (#2954)

RetroAchievements · Dec 19, 2024 · d3fbd25 · d3fbd25
1 parent 4709431
commit d3fbd25
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 27 deletions.
diff --git a/lang/en_US.json b/lang/en_US.json
@@ -511,5 +511,6 @@
     "We're excited to have you here! We know you might have some questions about hardcore mode, RetroPoints (white points), subsets, or which emulators to use. Don't worry, we've got you covered! Check out our <1>comprehensive FAQ</1> to get started. Happy gaming!": "We're excited to have you here! We know you might have some questions about hardcore mode, RetroPoints (white points), subsets, or which emulators to use. Don't worry, we've got you covered! Check out our <1>comprehensive FAQ</1> to get started. Happy gaming!",
     "Getting Started": "Getting Started",
     "Moderation Comments - {{user}}": "Moderation Comments - {{user}}",
-    "Moderation Comments": "Moderation Comments"
+    "Moderation Comments": "Moderation Comments",
+    "Columns": "Columns"
 }
diff --git a/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx b/resources/js/features/game-list/components/AllGamesMainRoot/AllGamesMainRoot.test.tsx
@@ -240,7 +240,7 @@ describe('Component: AllGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /points/i }));
 
     // ASSERT
@@ -260,7 +260,7 @@ describe('Component: AllGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
 
     // ASSERT
     expect(
@@ -281,7 +281,7 @@ describe('Component: AllGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -318,7 +318,7 @@ describe('Component: AllGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -626,7 +626,7 @@ describe('Component: AllGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /claimed/i }));
 
     await userEvent.click(screen.getByTestId('column-header-Claimed'));

diff --git a/...TableViewOptions/DataTableViewOptions.tsx → ...eColumnsToggle/DataTableColumnsToggle.tsx b/...TableViewOptions/DataTableViewOptions.tsx → ...eColumnsToggle/DataTableColumnsToggle.tsx
@@ -12,19 +12,19 @@ import {
   BaseDropdownMenuTrigger,
 } from '@/common/components/+vendor/BaseDropdownMenu';
 
-interface DataTableViewOptionsProps<TData> {
+interface DataTableColumnsToggleProps<TData> {
   table: Table<TData>;
 }
 
-export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+export function DataTableColumnsToggle<TData>({ table }: DataTableColumnsToggleProps<TData>) {
   const { t } = useTranslation();
 
   return (
     <BaseDropdownMenu>
       <BaseDropdownMenuTrigger asChild>
         <BaseButton size="sm" className="gap-1.5">
           <RxMixerHorizontal className="h-4 w-4" />
-          {t('View')}
+          {t('Columns')}
         </BaseButton>
       </BaseDropdownMenuTrigger>
 

diff --git a/resources/js/features/game-list/components/DataTableColumnsToggle/index.ts b/resources/js/features/game-list/components/DataTableColumnsToggle/index.ts
@@ -0,0 +1 @@
+export * from './DataTableColumnsToggle';
diff --git a/resources/js/features/game-list/components/DataTableToolbar/DataTableDesktopToolbar.tsx b/resources/js/features/game-list/components/DataTableToolbar/DataTableDesktopToolbar.tsx
@@ -6,9 +6,9 @@ import { usePageProps } from '@/common/hooks/usePageProps';
 
 import { doesColumnExist } from '../../utils/doesColumnExist';
 import { getAreNonDefaultFiltersSet } from '../../utils/getAreNonDefaultFiltersSet';
+import { DataTableColumnsToggle } from '../DataTableColumnsToggle';
 import { DataTableResetFiltersButton } from '../DataTableResetFiltersButton';
 import { DataTableSearchInput } from '../DataTableSearchInput';
-import { DataTableViewOptions } from '../DataTableViewOptions';
 import { DataTableAchievementsPublishedFilter } from './DataTableAchievementsPublishedFilter';
 import { DataTableProgressFilter } from './DataTableProgressFilter';
 import { DataTableSystemFilter } from './DataTableSystemFilter';
@@ -100,7 +100,7 @@ export function DataTableDesktopToolbar<TData>({
               disabled={table.getRowCount() === 0}
             />
 
-            <DataTableViewOptions table={table} />
+            <DataTableColumnsToggle table={table} />
           </div>
         </div>
       </div>

diff --git a/resources/js/features/game-list/components/DataTableViewOptions/index.ts b/resources/js/features/game-list/components/DataTableViewOptions/index.ts
diff --git a/resources/js/features/game-list/components/HubMainRoot/HubMainRoot.test.tsx b/resources/js/features/game-list/components/HubMainRoot/HubMainRoot.test.tsx
@@ -263,7 +263,7 @@ describe('Component: HubMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /points/i }));
 
     // ASSERT
@@ -287,7 +287,7 @@ describe('Component: HubMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
 
     // ASSERT
     expect(
@@ -312,7 +312,7 @@ describe('Component: HubMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -353,7 +353,7 @@ describe('Component: HubMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -710,7 +710,7 @@ describe('Component: HubMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /claimed/i }));
 
     await userEvent.click(screen.getByTestId('column-header-Claimed'));

diff --git a/resources/js/features/game-list/components/SystemGamesMainRoot/SystemGamesMainRoot.test.tsx b/resources/js/features/game-list/components/SystemGamesMainRoot/SystemGamesMainRoot.test.tsx
@@ -251,7 +251,7 @@ describe('Component: SystemGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /points/i }));
 
     // ASSERT
@@ -272,7 +272,7 @@ describe('Component: SystemGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
 
     // ASSERT
     expect(
@@ -294,7 +294,7 @@ describe('Component: SystemGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -332,7 +332,7 @@ describe('Component: SystemGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -603,7 +603,7 @@ describe('Component: SystemGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /claimed/i }));
 
     await userEvent.click(screen.getByTestId('column-header-Claimed'));

diff --git a/...js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx b/...js/features/game-list/components/WantToPlayGamesMainRoot/WantToPlayGamesMainRoot.test.tsx
@@ -204,7 +204,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /points/i }));
 
     // ASSERT
@@ -224,7 +224,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
 
     // ASSERT
     expect(
@@ -245,7 +245,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -282,7 +282,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /tickets/i }));
 
     // ASSERT
@@ -589,7 +589,7 @@ describe('Component: WantToPlayGamesMainRoot', () => {
     });
 
     // ACT
-    await userEvent.click(screen.getByRole('button', { name: /view/i }));
+    await userEvent.click(screen.getByRole('button', { name: /columns/i }));
     await userEvent.click(screen.getByRole('menuitemcheckbox', { name: /claimed/i }));
 
     await userEvent.click(screen.getByTestId('column-header-Claimed'));