fix: add column header for table action buttons

City-of-Helsinki · Feb 19, 2024 · ab088d8 · ab088d8
1 parent 94bd52e
commit ab088d8
Show file tree

Hide file tree

Showing 25 changed files with 36 additions and 18 deletions.
diff --git a/src/common/components/table/table.module.scss b/src/common/components/table/table.module.scss
@@ -24,6 +24,10 @@
       width: 1%;
       padding: var(--focus-outline-width) !important;
     }
+
+    thead tr th:last-of-type {
+      @include hidden-from-screen;
+    }
   }
 }
 

diff --git a/src/domain/app/i18n/en.json b/src/domain/app/i18n/en.json
@@ -58,6 +58,7 @@
     "yle": "YLE ID"
   },
   "common": {
+    "actions": "Actions",
     "add": "Add",
     "affiliate": "Affiliate",
     "and": "and",

diff --git a/src/domain/app/i18n/fi.json b/src/domain/app/i18n/fi.json
@@ -58,6 +58,7 @@
     "part2": ", jos haluat tallentaa muutoksia."
   },
   "common": {
+    "actions": "Toiminnot",
     "add": "Lisää",
     "affiliate": "Liittyvä",
     "and": "ja",

diff --git a/src/domain/app/i18n/sv.json b/src/domain/app/i18n/sv.json
@@ -58,6 +58,7 @@
     "part2": " för att spara dina ändringar."
   },
   "common": {
+    "actions": "Åtgärder",
     "add": "Lägg till",
     "affiliate": "Dotterbolag",
     "and": "och",

diff --git a/src/domain/event/formSections/timeSection/eventTimesTable/EventTimesTable.tsx b/src/domain/event/formSections/timeSection/eventTimesTable/EventTimesTable.tsx
@@ -236,7 +236,7 @@ const EventTimesTable: React.FC<EventTimesTableProps> = ({
         <HeaderRow>
           <th className={styles.indexColumn}>#</th>
           <th>{t('event.form.labelTime')}</th>
-          <th className={styles.buttonColumn}></th>
+          <th>{t('common.actions')}</th>
         </HeaderRow>
       </thead>
       <TableBody>

diff --git a/src/domain/events/eventsTable/EventsTable.tsx b/src/domain/events/eventsTable/EventsTable.tsx
@@ -98,7 +98,7 @@ const EventsTable: React.FC<EventsTableProps> = ({
           <th className={styles.statusColumn}>
             {t('eventsPage.eventsTableColumns.status')}
           </th>
-          <th></th>
+          <th>{t('common.actions')}</th>
         </HeaderRow>
       </thead>
       <TableBody>

diff --git a/src/domain/events/eventsTable/__tests__/EventsTable.test.tsx b/src/domain/events/eventsTable/__tests__/EventsTable.test.tsx
@@ -54,6 +54,7 @@ test('should render events table', () => {
     'Alkuaika',
     'Loppuaika',
     'Status',
+    'Toiminnot',
   ];
 
   for (const name of columnHeaders) {

diff --git a/src/domain/images/__tests__/ImagesPage.test.tsx b/src/domain/images/__tests__/ImagesPage.test.tsx
@@ -15,7 +15,6 @@ import {
 import { mockedOrganizationAncestorsResponse } from '../../organization/__mocks__/organizationAncestors';
 import { mockedUserResponse } from '../../user/__mocks__/user';
 import {
-  imageNames,
   images,
   mockedImagesResponse,
   mockedSortedImagesResponse,

diff --git a/src/domain/images/imagesTable/ImagesTable.tsx b/src/domain/images/imagesTable/ImagesTable.tsx
@@ -129,7 +129,7 @@ const ImagesTable: React.FC<ImagesTableProps> = ({
         },
         {
           key: 'actionButtons',
-          headerName: '',
+          headerName: t('common.actions'),
           transform: ActionColumn,
         },
       ]}

diff --git a/src/domain/images/imagesTable/__tests__/ImagesTable.test.tsx b/src/domain/images/imagesTable/__tests__/ImagesTable.test.tsx
@@ -46,7 +46,13 @@ const findImageRow = async (id: string) =>
 test('should render images table', () => {
   renderComponent();
 
-  const columnHeaders = ['Kuva', 'ID', 'Nimi', 'Viimeksi muokattu'];
+  const columnHeaders = [
+    'Kuva',
+    'ID',
+    'Nimi',
+    'Viimeksi muokattu',
+    'Toiminnot',
+  ];
 
   for (const name of columnHeaders) {
     screen.getByRole('columnheader', { name });

diff --git a/src/domain/keywordSets/__tests__/KeywordSetsPage.test.tsx b/src/domain/keywordSets/__tests__/KeywordSetsPage.test.tsx
@@ -15,7 +15,6 @@ import {
 import { mockedOrganizationAncestorsResponse } from '../../organization/__mocks__/organizationAncestors';
 import { mockedUserResponse } from '../../user/__mocks__/user';
 import {
-  keywordSetNames,
   keywordSets,
   mockedKeywordSetsResponse,
   mockedSortedKeywordSetsResponse,

diff --git a/src/domain/keywordSets/keywordSetsTable/KeywordSetsTable.tsx b/src/domain/keywordSets/keywordSetsTable/KeywordSetsTable.tsx
@@ -114,7 +114,7 @@ const KeywordSetsTable: React.FC<KeywordSetsTableProps> = ({
         },
         {
           key: 'actionButtons',
-          headerName: '',
+          headerName: t('common.actions'),
           transform: ActionsColumn,
         },
       ]}

diff --git a/src/domain/keywordSets/keywordSetsTable/__tests__/KeywordSetsTable.test.tsx b/src/domain/keywordSets/keywordSetsTable/__tests__/KeywordSetsTable.test.tsx
@@ -24,7 +24,6 @@ beforeEach(() => {
   mockAuthenticatedLoginState();
 });
 
-const keywordSetName = getValue(keywordSets.data[0]?.name?.fi, '');
 const keywordSetId = getValue(keywordSets.data[0]?.id, '');
 
 const defaultProps: KeywordSetsTableProps = {
@@ -46,7 +45,7 @@ const findKeywordSetRow = async (id: string) =>
 test('should render keywords table', () => {
   renderComponent();
 
-  const columnHeaders = ['ID', 'Nimi', 'Käyttötarkoitus'];
+  const columnHeaders = ['ID', 'Nimi', 'Käyttötarkoitus', 'Toiminnot'];
 
   for (const name of columnHeaders) {
     screen.getByRole('columnheader', { name });

diff --git a/src/domain/keywords/__tests__/KeywordsPage.test.tsx b/src/domain/keywords/__tests__/KeywordsPage.test.tsx
@@ -15,7 +15,6 @@ import {
 import { mockedOrganizationAncestorsResponse } from '../../organization/__mocks__/organizationAncestors';
 import { mockedUserResponse } from '../../user/__mocks__/user';
 import {
-  keywordNames,
   keywords,
   mockedKeywordsResponse,
   mockedSortedKeywordsResponse,

diff --git a/src/domain/keywords/keywordsTable/KeywordsTable.tsx b/src/domain/keywords/keywordsTable/KeywordsTable.tsx
@@ -100,7 +100,7 @@ const KeywordsTable: React.FC<KeywordsTableProps> = ({
         },
         {
           key: 'actionButtons',
-          headerName: '',
+          headerName: t('common.actions'),
           transform: ActionsColumn,
         },
       ]}

diff --git a/src/domain/keywords/keywordsTable/__tests__/KeywordsTable.test.tsx b/src/domain/keywords/keywordsTable/__tests__/KeywordsTable.test.tsx
@@ -47,7 +47,7 @@ const findKeywordRow = async (id: string) =>
 test('should render keywords table', async () => {
   renderComponent();
 
-  const columnHeaders = ['ID', 'Nimi', 'Tapahtumien lkm'];
+  const columnHeaders = ['ID', 'Nimi', 'Tapahtumien lkm', 'Toiminnot'];
 
   for (const name of columnHeaders) {
     screen.getByRole('columnheader', { name });

diff --git a/src/domain/organizations/organizationsTable/OrganizationsTable.tsx b/src/domain/organizations/organizationsTable/OrganizationsTable.tsx
@@ -115,7 +115,7 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
               setSortingAndOrder={setSortingAndOrder}
               sortIconType={'other'}
             />
-            <th></th>
+            <th>{t('common.actions')}</th>
           </HeaderRow>
         </thead>
         <TableBody>

diff --git a/src/domain/organizations/organizationsTable/__tests__/OrganizationsTable.test.tsx b/src/domain/organizations/organizationsTable/__tests__/OrganizationsTable.test.tsx
@@ -61,6 +61,7 @@ test('should render organizations table', () => {
     'Datalähde',
     'Luokittelu',
     'Pääorganisaatio',
+    'Toiminnot',
   ];
 
   for (const name of columnHeaders) {

diff --git a/src/domain/places/placesTable/PlacesTable.tsx b/src/domain/places/placesTable/PlacesTable.tsx
@@ -113,7 +113,7 @@ const PlacesTable: React.FC<PlacesTableProps> = ({
         },
         {
           key: '',
-          headerName: '',
+          headerName: t('common.actions'),
           transform: ActionsColumn,
         },
       ]}

diff --git a/src/domain/places/placesTable/__tests__/PlacesTable.test.tsx b/src/domain/places/placesTable/__tests__/PlacesTable.test.tsx
@@ -47,7 +47,13 @@ const findPlaceRow = async (id: string) =>
 test('should render places table', () => {
   renderComponent();
 
-  const columnHeaders = ['ID', 'Nimi', 'Tapahtumien lkm', 'Katuosoite'];
+  const columnHeaders = [
+    'ID',
+    'Nimi',
+    'Tapahtumien lkm',
+    'Katuosoite',
+    'Toiminnot',
+  ];
 
   for (const name of columnHeaders) {
     screen.getByRole('columnheader', { name });

diff --git a/src/domain/registrations/__tests__/RegistrationsPage.test.tsx b/src/domain/registrations/__tests__/RegistrationsPage.test.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable max-len */
 import { createMemoryHistory } from 'history';
 
-import getValue from '../../../utils/getValue';
 import { mockAuthenticatedLoginState } from '../../../utils/mockLoginHooks';
 import {
   configure,

diff --git a/src/domain/registrations/registrationsTable/RegistrationsTable.tsx b/src/domain/registrations/registrationsTable/RegistrationsTable.tsx
@@ -189,7 +189,7 @@ const RegistrationsTable: React.FC<RegistrationsTableProps> = ({
 
         {
           key: '',
-          headerName: '',
+          headerName: t('common.actions'),
           transform: ActionsColumn,
         },
       ]}

diff --git a/src/domain/registrations/registrationsTable/__tests__/RegistrationsTable.test.tsx b/src/domain/registrations/registrationsTable/__tests__/RegistrationsTable.test.tsx
@@ -71,6 +71,7 @@ test('should render registrations table', async () => {
     'Jono',
     'Ilmoittautumisaika',
     'Tapahtuman ajankohta',
+    'Toiminnot',
   ];
 
   for (const name of columnHeaders) {

diff --git a/src/domain/signups/signupsTable/SignupsTable.tsx b/src/domain/signups/signupsTable/SignupsTable.tsx
@@ -288,7 +288,7 @@ const SignupsTable: React.FC<SignupsTableProps> = ({
           },
           {
             key: 'actionButtons',
-            headerName: '',
+            headerName: t('common.actions'),
             transform: MemoizedSignupActionsDropdown,
           },
         ]}

diff --git a/src/domain/signups/signupsTable/__tests__/SignupsTable.test.tsx b/src/domain/signups/signupsTable/__tests__/SignupsTable.test.tsx
@@ -100,6 +100,7 @@ test('should render signups table', async () => {
     'Yhteyshenkilön sähköposti',
     'Yhteyshenkilön puhelinnumero',
     'Status',
+    'Toiminnot',
   ];
 
   for (const name of columnHeaders) {