Skip to content

Commit f170ffa

Browse files
jordanvnjordanvn
authored
fix: enable customization of displayText for location detail view dataTable headers (#6346)
* fix: enable customization of displayText for location detail view dataTable headers * fix: update location detail view test to include displayText * chore: converting default headers to string array, adding unit tests
1 parent 045aa57 commit f170ffa

File tree

9 files changed

+184
-28
lines changed

9 files changed

+184
-28
lines changed

‎.changeset/gold-news-unite.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@aws-amplify/ui-react-storage': patch
3+
---
4+
5+
Fixed displayText override for LocationDetailView dataTable headers

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailViewProvider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function LocationDetailViewProvider({
1111
children,
1212
...props
1313
}: LocationDetailViewProviderProps): React.JSX.Element {
14+
const { LocationDetailView: displayText } = useDisplayText();
1415
const {
1516
LocationDetailView: {
1617
loadingIndicatorLabel,
@@ -106,6 +107,7 @@ export function LocationDetailViewProvider({
106107
searchQuery,
107108
tableData: getLocationDetailViewTableData({
108109
areAllFilesSelected,
110+
displayText,
109111
location,
110112
fileDataItems,
111113
getDateDisplayValue,

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getHeaders.spec.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { getHeaders } from '../getHeaders';
2+
3+
describe('getHeaders', () => {
4+
const mockProps = {
5+
tableColumnLastModifiedHeader: 'Custom Last Modified',
6+
tableColumnNameHeader: 'Custom Name',
7+
tableColumnSizeHeader: 'Custom Size',
8+
tableColumnTypeHeader: 'Custom Type',
9+
areAllFilesSelected: false,
10+
selectAllFilesLabel: 'Select all files',
11+
onSelectAll: jest.fn(),
12+
hasFiles: true,
13+
};
14+
15+
it('should return correct headers when files exist', () => {
16+
const result = getHeaders(mockProps);
17+
18+
expect(result).toEqual(
19+
expect.arrayContaining([
20+
expect.objectContaining({
21+
content: { label: mockProps.tableColumnNameHeader },
22+
}),
23+
expect.objectContaining({
24+
content: { label: mockProps.tableColumnTypeHeader },
25+
}),
26+
expect.objectContaining({
27+
content: { label: mockProps.tableColumnSizeHeader },
28+
}),
29+
expect.objectContaining({
30+
content: { label: mockProps.tableColumnLastModifiedHeader },
31+
}),
32+
])
33+
);
34+
});
35+
36+
it('should include checkbox column when hasFiles is true', () => {
37+
const result = getHeaders(mockProps);
38+
39+
const checkboxColumn = result.find((header) => header.type === 'checkbox');
40+
expect(checkboxColumn).toBeDefined();
41+
});
42+
43+
it('should not include checkbox column when hasFiles is false', () => {
44+
const result = getHeaders({
45+
...mockProps,
46+
hasFiles: false,
47+
});
48+
49+
const checkboxColumn = result.find((header) => header.type === 'checkbox');
50+
expect(checkboxColumn).toBeUndefined();
51+
});
52+
});

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/__tests__/getLocationDetailViewTableData.spec.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
import { getLocationDetailViewTableData } from '../getLocationDetailViewTableData';
1+
import { LocationData } from '../../../../actions';
2+
import { DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT } from '../../../../displayText/libraries/en/locationDetailView';
3+
24
import { getFileRowContent } from '../getFileRowContent';
35
import { getFolderRowContent } from '../getFolderRowContent';
4-
import { LocationData } from '../../../../actions';
6+
import { getLocationDetailViewTableData } from '../getLocationDetailViewTableData';
57

68
jest.mock('../getFileRowContent');
79
jest.mock('../getFolderRowContent');
810

911
describe('getLocationDetailViewTableData', () => {
12+
const displayText = DEFAULT_LOCATION_DETAIL_VIEW_DISPLAY_TEXT;
1013
const location = {
1114
current: {
1215
bucket: 'bucket',
@@ -92,6 +95,7 @@ describe('getLocationDetailViewTableData', () => {
9295
expect(
9396
getLocationDetailViewTableData({
9497
areAllFilesSelected: false,
98+
displayText,
9599
location,
96100
hasFiles: true,
97101
pageItems: [folderItem, folderItem, fileItem, fileItem, fileItem],
@@ -126,6 +130,7 @@ describe('getLocationDetailViewTableData', () => {
126130
it('should select all files', () => {
127131
const tableData = getLocationDetailViewTableData({
128132
areAllFilesSelected: false,
133+
displayText,
129134
location,
130135
hasFiles: true,
131136
pageItems: [folderItem, fileItem],
@@ -148,6 +153,7 @@ describe('getLocationDetailViewTableData', () => {
148153
it('should select a file', () => {
149154
const tableData = getLocationDetailViewTableData({
150155
areAllFilesSelected: false,
156+
displayText,
151157
location,
152158
hasFiles: true,
153159
pageItems: [fileItem],
@@ -170,6 +176,7 @@ describe('getLocationDetailViewTableData', () => {
170176
it('should download a file', () => {
171177
const tableData = getLocationDetailViewTableData({
172178
areAllFilesSelected: false,
179+
displayText,
173180
location,
174181
hasFiles: true,
175182
pageItems: [fileItem],
@@ -192,6 +199,7 @@ describe('getLocationDetailViewTableData', () => {
192199
it('should navigate to a folder', () => {
193200
const tableData = getLocationDetailViewTableData({
194201
areAllFilesSelected: false,
202+
displayText,
195203
location,
196204
hasFiles: true,
197205
pageItems: [folderItem],

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/constants.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { LocationDetailViewHeaders } from './types';
1+
import { HeaderKeys } from './types';
22

3-
export const LOCATION_DETAIL_VIEW_HEADERS: LocationDetailViewHeaders = [
4-
{ key: 'checkbox', type: 'text', content: { text: '' } },
5-
{ key: 'name', type: 'sort', content: { label: 'Name' } },
6-
{ key: 'type', type: 'sort', content: { label: 'Type' } },
7-
{ key: 'last-modified', type: 'sort', content: { label: 'Last modified' } },
8-
{ key: 'size', type: 'sort', content: { label: 'Size' } },
9-
{ key: 'download', type: 'text', content: { text: '' } },
3+
export const LOCATION_DETAIL_VIEW_HEADERS: HeaderKeys[] = [
4+
'checkbox',
5+
'name',
6+
'type',
7+
'last-modified',
8+
'size',
9+
'download',
1010
];

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFileRowContent.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const getFileRowContent = ({
3030
onDownload: () => void;
3131
onSelect: () => void;
3232
}): DataTableProps['rows'][number]['content'] =>
33-
LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => {
33+
LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
3434
const key = `${columnKey}-${rowId}`;
3535
switch (columnKey) {
3636
case 'checkbox': {

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getFolderRowContent.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const getFolderRowContent = ({
1010
rowId: string;
1111
onNavigate: () => void;
1212
}): DataTableProps['rows'][number]['content'] =>
13-
LOCATION_DETAIL_VIEW_HEADERS.map(({ key: columnKey }) => {
13+
LOCATION_DETAIL_VIEW_HEADERS.map((columnKey) => {
1414
const key = `${columnKey}-${rowId}`;
1515
switch (columnKey) {
1616
case 'checkbox': {

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getHeaders.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { LocationDetailViewHeaders } from './types';
2+
import { LOCATION_DETAIL_VIEW_HEADERS } from './constants';
3+
4+
export const getHeaders = ({
5+
tableColumnLastModifiedHeader,
6+
tableColumnNameHeader,
7+
tableColumnSizeHeader,
8+
tableColumnTypeHeader,
9+
areAllFilesSelected,
10+
selectAllFilesLabel,
11+
onSelectAll,
12+
hasFiles,
13+
}: {
14+
tableColumnLastModifiedHeader: string;
15+
tableColumnNameHeader: string;
16+
tableColumnSizeHeader: string;
17+
tableColumnTypeHeader: string;
18+
areAllFilesSelected: boolean;
19+
selectAllFilesLabel: string;
20+
onSelectAll: () => void;
21+
hasFiles: boolean;
22+
}): LocationDetailViewHeaders =>
23+
LOCATION_DETAIL_VIEW_HEADERS.map((key) => {
24+
switch (key) {
25+
case 'checkbox': {
26+
if (hasFiles) {
27+
return {
28+
key,
29+
type: 'checkbox',
30+
content: {
31+
checked: areAllFilesSelected,
32+
label: selectAllFilesLabel,
33+
id: 'header-checkbox',
34+
onSelect: onSelectAll,
35+
},
36+
};
37+
} else {
38+
return {
39+
key,
40+
type: 'text',
41+
content: { text: '' },
42+
};
43+
}
44+
}
45+
case 'name': {
46+
return {
47+
key,
48+
type: 'sort',
49+
content: {
50+
label: tableColumnNameHeader,
51+
},
52+
};
53+
}
54+
case 'type': {
55+
return {
56+
key,
57+
type: 'sort',
58+
content: {
59+
label: tableColumnTypeHeader,
60+
},
61+
};
62+
}
63+
case 'last-modified': {
64+
return {
65+
key,
66+
type: 'sort',
67+
content: {
68+
label: tableColumnLastModifiedHeader,
69+
},
70+
};
71+
}
72+
case 'size': {
73+
return {
74+
key,
75+
type: 'sort',
76+
content: {
77+
label: tableColumnSizeHeader,
78+
},
79+
};
80+
}
81+
case 'download': {
82+
return { key, type: 'text', content: { text: '' } };
83+
}
84+
}
85+
});

‎packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import {
66
LocationData,
77
} from '../../../actions';
88
import { DataTableProps } from '../../../composables/DataTable';
9+
import { DefaultLocationDetailViewDisplayText } from '../../../displayText/types';
910
import { LocationState } from '../../../providers/store/location';
1011

1112
import { getFileRowContent } from './getFileRowContent';
1213
import { getFolderRowContent } from './getFolderRowContent';
13-
14-
import { LOCATION_DETAIL_VIEW_HEADERS } from './constants';
14+
import { getHeaders } from './getHeaders';
1515

1616
export const getLocationDetailViewTableData = ({
1717
areAllFilesSelected,
18+
displayText,
1819
location,
1920
fileDataItems,
2021
hasFiles,
@@ -28,6 +29,7 @@ export const getLocationDetailViewTableData = ({
2829
onSelectAll,
2930
}: {
3031
areAllFilesSelected: boolean;
32+
displayText: DefaultLocationDetailViewDisplayText;
3133
location: LocationState;
3234
fileDataItems?: FileData[];
3335
hasFiles: boolean;
@@ -40,20 +42,22 @@ export const getLocationDetailViewTableData = ({
4042
onSelect: (isSelected: boolean, fileItem: FileData) => void;
4143
onSelectAll: () => void;
4244
}): DataTableProps => {
43-
const headerCheckbox: DataTableProps['headers'][number] = {
44-
key: 'checkbox',
45-
type: 'checkbox',
46-
content: {
47-
checked: areAllFilesSelected,
48-
label: selectAllFilesLabel,
49-
onSelect: onSelectAll,
50-
id: 'header-checkbox',
51-
},
52-
};
53-
54-
const headers = hasFiles
55-
? [headerCheckbox, ...LOCATION_DETAIL_VIEW_HEADERS.slice(1)]
56-
: LOCATION_DETAIL_VIEW_HEADERS;
45+
const {
46+
tableColumnLastModifiedHeader,
47+
tableColumnNameHeader,
48+
tableColumnSizeHeader,
49+
tableColumnTypeHeader,
50+
} = displayText;
51+
const headers = getHeaders({
52+
areAllFilesSelected,
53+
selectAllFilesLabel,
54+
hasFiles,
55+
onSelectAll,
56+
tableColumnLastModifiedHeader,
57+
tableColumnNameHeader,
58+
tableColumnSizeHeader,
59+
tableColumnTypeHeader,
60+
});
5761

5862
const rows: DataTableProps['rows'] = pageItems.map((locationItem) => {
5963
const { id, key, type } = locationItem;

0 commit comments

Comments
 (0)