feat: Add labels for folder/object icons in S3 resource selector (#3248)

cloudscape-design · Feb 10, 2025 · d366444 · d366444
1 parent dfa621a
commit d366444
Show file tree

Hide file tree

Showing 21 changed files with 80 additions and 1 deletion.
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -14026,6 +14026,16 @@ The function will be called when a user clicks on the trigger button.",
             "optional": true,
             "type": "(itemsType: string) => string",
           },
+          {
+            "name": "labelIconFolder",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "labelIconObject",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "labelModalDismiss",
             "optional": true,

diff --git a/src/i18n/messages-types.ts b/src/i18n/messages-types.ts
@@ -412,6 +412,8 @@ export interface I18nFormatArgTypes {
     }
     "i18nStrings.labelRefresh": never;
     "i18nStrings.labelBreadcrumbs": never;
+    "i18nStrings.labelIconFolder": never;
+    "i18nStrings.labelIconObject": never;
     "i18nStrings.filteringCounterText": {
       "count": number;
     }

diff --git a/src/i18n/messages/all.ar.json b/src/i18n/messages/all.ar.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "البحث عن {itemsType}",
     "i18nStrings.labelRefresh": "تحديث البيانات",
     "i18nStrings.labelBreadcrumbs": "التنقل في S3",
+    "i18nStrings.labelIconFolder": "المجلد",
+    "i18nStrings.labelIconObject": "العنصر",
     "i18nStrings.filteringCounterText": "{count, plural, one {تطابق واحد} other {{count} تطابق}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.de.json b/src/i18n/messages/all.de.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "{itemsType} finden",
     "i18nStrings.labelRefresh": "Die Daten aktualisieren",
     "i18nStrings.labelBreadcrumbs": "S3-Navigation",
+    "i18nStrings.labelIconFolder": "Ordner",
+    "i18nStrings.labelIconObject": "Objekt",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 Übereinstimmung} other {{count} Übereinstimmungen}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.en-GB.json b/src/i18n/messages/all.en-GB.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Find {itemsType}",
     "i18nStrings.labelRefresh": "Refresh the data",
     "i18nStrings.labelBreadcrumbs": "S3 navigation",
+    "i18nStrings.labelIconFolder": "Folder",
+    "i18nStrings.labelIconObject": "Object",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 match} other {{count} matches}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json
@@ -318,6 +318,8 @@
     "i18nStrings.labelFiltering": "Find {itemsType}",
     "i18nStrings.labelRefresh": "Refresh the data",
     "i18nStrings.labelBreadcrumbs": "S3 navigation",
+    "i18nStrings.labelIconFolder": "Folder",
+    "i18nStrings.labelIconObject": "Object",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 match} other {{count} matches}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.es.json b/src/i18n/messages/all.es.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Encuentre {itemsType}",
     "i18nStrings.labelRefresh": "Actualizar los datos",
     "i18nStrings.labelBreadcrumbs": "Navegación S3",
+    "i18nStrings.labelIconFolder": "Carpeta",
+    "i18nStrings.labelIconObject": "Objeto",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 coincidencia} other {{count} coincidencias}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.fr.json b/src/i18n/messages/all.fr.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Trouver {itemsType}",
     "i18nStrings.labelRefresh": "Actualiser les données",
     "i18nStrings.labelBreadcrumbs": "Navigation S3",
+    "i18nStrings.labelIconFolder": "Dossier",
+    "i18nStrings.labelIconObject": "Objet",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 correspondance} other {{count} correspondances}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.id.json b/src/i18n/messages/all.id.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Temukan {itemsType}",
     "i18nStrings.labelRefresh": "Segarkan data",
     "i18nStrings.labelBreadcrumbs": "Navigasi S3",
+    "i18nStrings.labelIconFolder": "Folder",
+    "i18nStrings.labelIconObject": "Objek",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 kecocokan} other {{count} kecocokan}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.it.json b/src/i18n/messages/all.it.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Trova {itemsType}",
     "i18nStrings.labelRefresh": "Aggiorna i dati",
     "i18nStrings.labelBreadcrumbs": "Navigazione S3",
+    "i18nStrings.labelIconFolder": "Cartella",
+    "i18nStrings.labelIconObject": "Oggetto",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 corrispondenza} other {{count} corrispondenze}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.ja.json b/src/i18n/messages/all.ja.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "{itemsType} を検索",
     "i18nStrings.labelRefresh": "データを更新",
     "i18nStrings.labelBreadcrumbs": "S3 ナビゲーション",
+    "i18nStrings.labelIconFolder": "フォルダ",
+    "i18nStrings.labelIconObject": "オブジェクト",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 件の一致} other {{count} 件の一致}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.ko.json b/src/i18n/messages/all.ko.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "{itemsType} 찾기",
     "i18nStrings.labelRefresh": "데이터 새로고침",
     "i18nStrings.labelBreadcrumbs": "S3 탐색",
+    "i18nStrings.labelIconFolder": "폴더",
+    "i18nStrings.labelIconObject": "객체",
     "i18nStrings.filteringCounterText": "{count, plural, one {1개 일치} other {{count}개 일치}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.pt-BR.json b/src/i18n/messages/all.pt-BR.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "Encontrar {itemsType}",
     "i18nStrings.labelRefresh": "Atualizar os dados",
     "i18nStrings.labelBreadcrumbs": "Navegação no S3",
+    "i18nStrings.labelIconFolder": "Pasta",
+    "i18nStrings.labelIconObject": "Objeto",
     "i18nStrings.filteringCounterText": "{count, plural, one {Uma correspondência} other {{count} correspondências}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.tr.json b/src/i18n/messages/all.tr.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "{itemsType} bul",
     "i18nStrings.labelRefresh": "Verileri yenile",
     "i18nStrings.labelBreadcrumbs": "S3 gezintisi",
+    "i18nStrings.labelIconFolder": "Klasör",
+    "i18nStrings.labelIconObject": "Nesne",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 eşleşme} other {{count} eşleşme}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.zh-CN.json b/src/i18n/messages/all.zh-CN.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "查找 {itemsType}",
     "i18nStrings.labelRefresh": "刷新数据",
     "i18nStrings.labelBreadcrumbs": "S3 导航",
+    "i18nStrings.labelIconFolder": "文件夹",
+    "i18nStrings.labelIconObject": "对象",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 个匹配项} other {{count} 个匹配项}}"
   },
   "select": {

diff --git a/src/i18n/messages/all.zh-TW.json b/src/i18n/messages/all.zh-TW.json
@@ -309,6 +309,8 @@
     "i18nStrings.labelFiltering": "尋找 {itemsType}",
     "i18nStrings.labelRefresh": "重新整理資料",
     "i18nStrings.labelBreadcrumbs": "S3 導覽",
+    "i18nStrings.labelIconFolder": "資料夾",
+    "i18nStrings.labelIconObject": "物件",
     "i18nStrings.filteringCounterText": "{count, plural, one {1 個符合} other {{count} 個符合}}"
   },
   "select": {

diff --git a/src/s3-resource-selector/__tests__/fixtures.ts b/src/s3-resource-selector/__tests__/fixtures.ts
@@ -82,6 +82,8 @@ export const i18nStrings: S3ResourceSelectorProps.I18nStrings = {
   labelRefresh: 'Refresh the data',
   labelModalDismiss: 'Dismiss the modal',
   labelBreadcrumbs: 'S3 navigation',
+  labelIconFolder: 'Folder',
+  labelIconObject: 'Object',
 };
 
 export const buckets: ReadonlyArray<S3ResourceSelectorProps.Bucket> = [

diff --git a/src/s3-resource-selector/__tests__/main.test.tsx b/src/s3-resource-selector/__tests__/main.test.tsx
@@ -221,6 +221,8 @@ describe('i18n', () => {
             'i18nStrings.labelNotSorted': 'Custom {columnName} not sorted',
             'i18nStrings.labelSortedAscending': 'Custom {columnName} sorted ascending',
             'i18nStrings.labelSortedDescending': 'Custom {columnName} sorted descending',
+            'i18nStrings.labelFolderIcon': 'Custom folder',
+            'i18nStrings.labelObjectIcon': 'Custom object',
           },
         }}
       >

diff --git a/src/s3-resource-selector/interfaces.ts b/src/s3-resource-selector/interfaces.ts
@@ -267,6 +267,8 @@ export namespace S3ResourceSelectorProps {
     labelBreadcrumbs?: string;
     labelExpandBreadcrumbs?: string;
     labelClearFilter?: string;
+    labelIconObject?: string;
+    labelIconFolder?: string;
   }
 
   export interface ChangeDetail {

diff --git a/src/s3-resource-selector/s3-modal/__tests__/objects-table.test.tsx b/src/s3-resource-selector/s3-modal/__tests__/objects-table.test.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { act, render } from '@testing-library/react';
 
+import TestI18nProvider from '../../../../lib/components/i18n/testing';
 import { ObjectsTable } from '../../../../lib/components/s3-resource-selector/s3-modal/objects-table';
 import createWrapper from '../../../../lib/components/test-utils/dom';
 import { getIconHTML } from '../../../icon/__tests__/utils';
@@ -99,7 +100,35 @@ test('Renders correct table content', async () => {
 
 test('renders separate icons for folder and file', async () => {
   const wrapper = await renderTable(<ObjectsTable {...defaultProps} />);
+  expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toHaveAccessibleName('Folder');
   expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('folder'));
+  expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toHaveAccessibleName('Object');
+  expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('file'));
+});
+
+test('uses I18nProvider for folder and file icons', async () => {
+  const wrapper = await renderTable(
+    <TestI18nProvider
+      messages={{
+        's3-resource-selector': {
+          'i18nStrings.labelIconFolder': 'Custom folder',
+          'i18nStrings.labelIconObject': 'Custom object',
+        },
+      }}
+    >
+      <ObjectsTable
+        {...defaultProps}
+        i18nStrings={{
+          ...defaultProps.i18nStrings,
+          labelIconFolder: undefined,
+          labelIconObject: undefined,
+        }}
+      />
+    </TestI18nProvider>
+  );
+  expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toHaveAccessibleName('Custom folder');
+  expect(wrapper.findBodyCell(1, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('folder'));
+  expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toHaveAccessibleName('Custom object');
   expect(wrapper.findBodyCell(2, 2)!.findIcon()!.getElement()).toContainHTML(getIconHTML('file'));
 });
 

diff --git a/src/s3-resource-selector/s3-modal/objects-table.tsx b/src/s3-resource-selector/s3-modal/objects-table.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { useInternalI18n } from '../../i18n/context';
+import { IconProps } from '../../icon/interfaces';
 import InternalIcon from '../../icon/internal';
 import { ForwardFocusRef } from '../../internal/hooks/forward-focus';
 import InternalLink from '../../link/internal';
@@ -92,9 +93,12 @@ export function ObjectsTable({
           sortingField: 'Key',
           cell: item => {
             const isClickable = item.IsFolder || includes(selectableItemsTypes, 'versions');
+            const iconProps: IconProps = item.IsFolder
+              ? { name: 'folder', ariaLabel: i18n('i18nStrings.labelIconFolder', i18nStrings?.labelIconFolder) }
+              : { name: 'file', ariaLabel: i18n('i18nStrings.labelIconObject', i18nStrings?.labelIconObject) };
             return (
               <>
-                <InternalIcon name={item.IsFolder ? 'folder' : 'file'} />{' '}
+                <InternalIcon {...iconProps} />{' '}
                 {isClickable ? (
                   <InternalLink onFollow={() => item.Key && onDrilldown(item)} variant="link">
                     {item.Key}