diff --git a/.changeset/gold-news-unite.md b/.changeset/gold-news-unite.md new file mode 100644 index 00000000000..83c98abb0b6 --- /dev/null +++ b/.changeset/gold-news-unite.md @@ -0,0 +1,5 @@ +--- +'@aws-amplify/ui-react-storage': patch +--- + +Fixed displayText override for LocationDetailView dataTable headers diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.tsx index ad3f786fa2d..ff0832d5aab 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.tsx +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.tsx @@ -11,6 +11,7 @@ export function LocationDetailViewProvider({ children, ...props }: LocationDetailViewProviderProps): React.JSX.Element { + const { LocationDetailView: displayText } = useDisplayText(); const { LocationDetailView: { loadingIndicatorLabel, @@ -106,6 +107,7 @@ export function LocationDetailViewProvider({ searchQuery, tableData: getLocationDetailViewTableData({ areAllFilesSelected, + displayText, location, fileDataItems, getDateDisplayValue, diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getHeaders.spec.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getHeaders.spec.ts new file mode 100644 index 00000000000..ca289389ddd --- /dev/null +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getHeaders.spec.ts @@ -0,0 +1,52 @@ +import { getHeaders } from '../getHeaders'; + +describe('getHeaders', () => { + const mockProps = { + tableColumnLastModifiedHeader: 'Custom Last Modified', + tableColumnNameHeader: 'Custom Name', + tableColumnSizeHeader: 'Custom Size', + tableColumnTypeHeader: 'Custom Type', + areAllFilesSelected: false, + selectAllFilesLabel: 'Select all files', + onSelectAll: jest.fn(), + hasFiles: true, + }; + + it('should return correct headers when files exist', () => { + const result = getHeaders(mockProps); + + expect(result).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + content: { label: mockProps.tableColumnNameHeader }, + }), + expect.objectContaining({ + content: { label: mockProps.tableColumnTypeHeader }, + }), + expect.objectContaining({ + content: { label: mockProps.tableColumnSizeHeader }, + }), + expect.objectContaining({ + content: { label: mockProps.tableColumnLastModifiedHeader }, + }), + ]) + ); + }); + + it('should include checkbox column when hasFiles is true', () => { + const result = getHeaders(mockProps); + + const checkboxColumn = result.find((header) => header.type === 'checkbox'); + expect(checkboxColumn).toBeDefined(); + }); + + it('should not include checkbox column when hasFiles is false', () => { + const result = getHeaders({ + ...mockProps, + hasFiles: false, + }); + + const checkboxColumn = result.find((header) => header.type === 'checkbox'); + expect(checkboxColumn).toBeUndefined(); + }); +}); diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts index d655a524d59..7834ea78906 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts @@ -1,12 +1,15 @@ -import { getLocationDetailViewTableData } from '../getLocationDetailViewTableData'; +import { LocationData } from '../../../../actions'; +import { DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT } from '../../../../displayText/libraries/en/locationDetailView'; + import { getFileRowContent } from '../getFileRowContent'; import { getFolderRowContent } from '../getFolderRowContent'; -import { LocationData } from '../../../../actions'; +import { getLocationDetailViewTableData } from '../getLocationDetailViewTableData'; jest.mock('../getFileRowContent'); jest.mock('../getFolderRowContent'); describe('getLocationDetailViewTableData', () => { + const displayText = DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT; const location = { current: { bucket: 'bucket', @@ -92,6 +95,7 @@ describe('getLocationDetailViewTableData', () => { expect( getLocationDetailViewTableData({ areAllFilesSelected: false, + displayText, location, hasFiles: true, pageItems: [folderItem, folderItem, fileItem, fileItem, fileItem], @@ -126,6 +130,7 @@ describe('getLocationDetailViewTableData', () => { it('should select all files', () => { const tableData = getLocationDetailViewTableData({ areAllFilesSelected: false, + displayText, location, hasFiles: true, pageItems: [folderItem, fileItem], @@ -148,6 +153,7 @@ describe('getLocationDetailViewTableData', () => { it('should select a file', () => { const tableData = getLocationDetailViewTableData({ areAllFilesSelected: false, + displayText, location, hasFiles: true, pageItems: [fileItem], @@ -170,6 +176,7 @@ describe('getLocationDetailViewTableData', () => { it('should download a file', () => { const tableData = getLocationDetailViewTableData({ areAllFilesSelected: false, + displayText, location, hasFiles: true, pageItems: [fileItem], @@ -192,6 +199,7 @@ describe('getLocationDetailViewTableData', () => { it('should navigate to a folder', () => { const tableData = getLocationDetailViewTableData({ areAllFilesSelected: false, + displayText, location, hasFiles: true, pageItems: [folderItem], diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts index f18a883fa87..8c5719141f5 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts @@ -1,10 +1,10 @@ -import { LocationDetailViewHeaders } from './types'; +import { HeaderKeys } from './types'; -export const LOCATION_DETAIL_VIEW_HEADERS: LocationDetailViewHeaders = [ - { key: 'checkbox', type: 'text', content: { text: '' } }, - { key: 'name', type: 'sort', content: { label: 'Name' } }, - { key: 'type', type: 'sort', content: { label: 'Type' } }, - { key: 'last-modified', type: 'sort', content: { label: 'Last modified' } }, - { key: 'size', type: 'sort', content: { label: 'Size' } }, - { key: 'download', type: 'text', content: { text: '' } }, +export const LOCATION_DETAIL_VIEW_HEADERS: HeaderKeys[] = [ + 'checkbox', + 'name', + 'type', + 'last-modified', + 'size', + 'download', ]; diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts index 31cfd120d24..2f7d10afe0b 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts @@ -30,7 +30,7 @@ export const getFileRowContent = ({ onDownload: () => void; onSelect: () => void; }): DataTableProps['rows'][number]['content'] => - LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => { + LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => { const key = `${columnKey}-${rowId}`; switch (columnKey) { case 'checkbox': { diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts index 71e4e4df335..08f30a28c53 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts @@ -10,7 +10,7 @@ export const getFolderRowContent = ({ rowId: string; onNavigate: () => void; }): DataTableProps['rows'][number]['content'] => - LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => { + LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => { const key = `${columnKey}-${rowId}`; switch (columnKey) { case 'checkbox': { diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getHeaders.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getHeaders.ts new file mode 100644 index 00000000000..da3e9978f88 --- /dev/null +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getHeaders.ts @@ -0,0 +1,85 @@ +import { LocationDetailViewHeaders } from './types'; +import { LOCATION_DETAIL_VIEW_HEADERS } from './constants'; + +export const getHeaders = ({ + tableColumnLastModifiedHeader, + tableColumnNameHeader, + tableColumnSizeHeader, + tableColumnTypeHeader, + areAllFilesSelected, + selectAllFilesLabel, + onSelectAll, + hasFiles, +}: { + tableColumnLastModifiedHeader: string; + tableColumnNameHeader: string; + tableColumnSizeHeader: string; + tableColumnTypeHeader: string; + areAllFilesSelected: boolean; + selectAllFilesLabel: string; + onSelectAll: () => void; + hasFiles: boolean; +}): LocationDetailViewHeaders => + LOCATION_DETAIL_VIEW_HEADERS.map((key) => { + switch (key) { + case 'checkbox': { + if (hasFiles) { + return { + key, + type: 'checkbox', + content: { + checked: areAllFilesSelected, + label: selectAllFilesLabel, + id: 'header-checkbox', + onSelect: onSelectAll, + }, + }; + } else { + return { + key, + type: 'text', + content: { text: '' }, + }; + } + } + case 'name': { + return { + key, + type: 'sort', + content: { + label: tableColumnNameHeader, + }, + }; + } + case 'type': { + return { + key, + type: 'sort', + content: { + label: tableColumnTypeHeader, + }, + }; + } + case 'last-modified': { + return { + key, + type: 'sort', + content: { + label: tableColumnLastModifiedHeader, + }, + }; + } + case 'size': { + return { + key, + type: 'sort', + content: { + label: tableColumnSizeHeader, + }, + }; + } + case 'download': { + return { key, type: 'text', content: { text: '' } }; + } + } + }); diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts index 5d41043dc83..4ff39018318 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts @@ -6,15 +6,16 @@ import { LocationData, } from '../../../actions'; import { DataTableProps } from '../../../composables/DataTable'; +import { DefaultLocationDetailViewDisplayText } from '../../../displayText/types'; import { LocationState } from '../../../providers/store/location'; import { getFileRowContent } from './getFileRowContent'; import { getFolderRowContent } from './getFolderRowContent'; - -import { LOCATION_DETAIL_VIEW_HEADERS } from './constants'; +import { getHeaders } from './getHeaders'; export const getLocationDetailViewTableData = ({ areAllFilesSelected, + displayText, location, fileDataItems, hasFiles, @@ -28,6 +29,7 @@ export const getLocationDetailViewTableData = ({ onSelectAll, }: { areAllFilesSelected: boolean; + displayText: DefaultLocationDetailViewDisplayText; location: LocationState; fileDataItems?: FileData[]; hasFiles: boolean; @@ -40,20 +42,22 @@ export const getLocationDetailViewTableData = ({ onSelect: (isSelected: boolean, fileItem: FileData) => void; onSelectAll: () => void; }): DataTableProps => { - const headerCheckbox: DataTableProps['headers'][number] = { - key: 'checkbox', - type: 'checkbox', - content: { - checked: areAllFilesSelected, - label: selectAllFilesLabel, - onSelect: onSelectAll, - id: 'header-checkbox', - }, - }; - - const headers = hasFiles - ? [headerCheckbox, ...LOCATION_DETAIL_VIEW_HEADERS.slice(1)] - : LOCATION_DETAIL_VIEW_HEADERS; + const { + tableColumnLastModifiedHeader, + tableColumnNameHeader, + tableColumnSizeHeader, + tableColumnTypeHeader, + } = displayText; + const headers = getHeaders({ + areAllFilesSelected, + selectAllFilesLabel, + hasFiles, + onSelectAll, + tableColumnLastModifiedHeader, + tableColumnNameHeader, + tableColumnSizeHeader, + tableColumnTypeHeader, + }); const rows: DataTableProps['rows'] = pageItems.map((locationItem) => { const { id, key, type } = locationItem;