Skip to content

Commit bcbf6f0

Browse files
apburnesapburnes
committed
chore: Update file url to use baseUrl and file key
1 parent a9693fb commit bcbf6f0

File tree

5 files changed

+52
-103
lines changed

5 files changed

+52
-103
lines changed

‎docs/DEVELOPMENT.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ In our Docker Compose environment, `app` is the name of the container where the
8585

8686
For example:
8787

88-
- Use `docker compose --env-file ./services/local/docker.env build run --rm app yarn test` to run local testing on the app.
88+
- Use `docker compose --env-file ./services/local/docker.env run --rm app yarn test` to run local testing on the app.
8989
- Use `docker compose run --rm app yarn lint` to check that your local changes meet our linting standards.
9090
- Use `docker compose run --rm app yarn format` to format your local changes based on our standards.
9191

‎frontend/pages/sites/$siteId/storage/FileList.jsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const SORT_KEY_LAST_MODIFIED = 'updatedAt';
1414

1515
const FileListRow = ({
1616
item,
17-
storageRoot,
17+
baseUrl,
1818
path,
1919
currentSortKey,
2020
onNavigate,
2121
onDelete,
2222
onViewDetails,
2323
highlight = false,
2424
}) => {
25-
const copyUrl = `${storageRoot}${path}${item.name}`;
25+
const copyUrl = `${baseUrl}/${item.key}`;
2626
// handle copying the file's URL
2727
const [copySuccess, setCopySuccess] = useState(false);
2828
const handleCopy = async (url) => {
@@ -116,7 +116,7 @@ const FileListRow = ({
116116

117117
const FileList = ({
118118
path,
119-
storageRoot,
119+
baseUrl,
120120
data,
121121
onDelete,
122122
onNavigate,
@@ -128,7 +128,7 @@ const FileList = ({
128128
children,
129129
}) => {
130130
const TABLE_CAPTION = `
131-
Listing all contents for the current folder, sorted by ${currentSortKey} in
131+
Listing all contents for the current folder, sorted by ${currentSortKey} in
132132
${ariaFormatSort(currentSortOrder)} order
133133
`; // TODO: Create and update an aria live region to announce all changes
134134

@@ -200,10 +200,10 @@ const FileList = ({
200200
{children}
201201
{data.map((item) => (
202202
<FileListRow
203-
key={item.name}
203+
key={item.key}
204204
item={item}
205205
path={path}
206-
storageRoot={storageRoot}
206+
baseUrl={baseUrl}
207207
currentSortKey={currentSortKey}
208208
onNavigate={onNavigate}
209209
onDelete={onDelete}
@@ -243,7 +243,7 @@ const SortIcon = ({ sort = '' }) => (
243243

244244
FileList.propTypes = {
245245
path: PropTypes.string.isRequired,
246-
storageRoot: PropTypes.string.isRequired,
246+
baseUrl: PropTypes.string.isRequired,
247247
data: PropTypes.arrayOf(
248248
PropTypes.shape({
249249
name: PropTypes.string.isRequired,
@@ -263,9 +263,10 @@ FileList.propTypes = {
263263

264264
FileListRow.propTypes = {
265265
path: PropTypes.string.isRequired,
266-
storageRoot: PropTypes.string.isRequired,
266+
baseUrl: PropTypes.string.isRequired,
267267
item: PropTypes.shape({
268268
name: PropTypes.string.isRequired,
269+
key: PropTypes.string.isRequired,
269270
type: PropTypes.string.isRequired,
270271
updatedAt: PropTypes.string.isRequired,
271272
}).isRequired,

‎frontend/pages/sites/$siteId/storage/FileList.test.jsx

+33-92
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import React from 'react';
2-
import { render, screen, within, fireEvent, waitFor } from '@testing-library/react';
2+
import { act, render, screen, within, fireEvent, waitFor } from '@testing-library/react';
33
import '@testing-library/jest-dom';
4-
import { MemoryRouter } from 'react-router-dom';
54
import FileList from './FileList.jsx';
65

76
const mockFiles = [
8-
{ id: 20, name: 'Documents', type: 'directory', updatedAt: '2024-02-10T12:30:00Z' },
7+
{
8+
id: 20,
9+
name: 'Documents',
10+
key: '~assets/Documents',
11+
type: 'directory',
12+
updatedAt: '2024-02-10T12:30:00Z',
13+
},
914
{
1015
id: 21,
1116
name: 'report.pdf',
17+
key: '~assets/report.pdf',
1218
type: 'application/pdf',
1319
updatedAt: '2025-01-09T15:45:00Z',
1420
updatedBy: '[email protected]',
@@ -17,6 +23,7 @@ const mockFiles = [
1723
{
1824
id: 22,
1925
name: 'presentation.ppt',
26+
key: '~assets/presentation.ppt',
2027
type: 'application/vnd.ms-powerpoint',
2128
updatedAt: '2024-02-08T09:15:00Z',
2229
updatedBy: '[email protected]',
@@ -26,7 +33,7 @@ const mockFiles = [
2633

2734
const mockProps = {
2835
path: '/',
29-
storageRoot: 'https://custom.domain.gov/~assets',
36+
baseUrl: 'https://custom.domain.gov',
3037
data: mockFiles,
3138
onDelete: jest.fn(),
3239
onNavigate: jest.fn(),
@@ -42,62 +49,38 @@ describe('FileList', () => {
4249
});
4350

4451
it('renders correctly with file and folder names', () => {
45-
render(
46-
<MemoryRouter>
47-
<FileList {...mockProps} />
48-
</MemoryRouter>,
49-
);
52+
render(<FileList {...mockProps} />);
5053
expect(screen.getByRole('link', { name: 'Documents' })).toBeInTheDocument();
5154
expect(screen.getByRole('link', { name: 'report.pdf' })).toBeInTheDocument();
5255
expect(screen.getByRole('link', { name: 'presentation.ppt' })).toBeInTheDocument();
5356
});
5457

5558
it('does not trigger onViewDetails when clicking a folder', () => {
56-
render(
57-
<MemoryRouter>
58-
<FileList {...mockProps} />
59-
</MemoryRouter>,
60-
);
59+
render(<FileList {...mockProps} />);
6160
fireEvent.click(screen.getByRole('link', { name: 'Documents' }));
6261
expect(mockProps.onViewDetails).not.toHaveBeenCalled();
6362
});
6463

6564
it('calls onNavigate when a folder is clicked', () => {
66-
render(
67-
<MemoryRouter>
68-
<FileList {...mockProps} />
69-
</MemoryRouter>,
70-
);
65+
render(<FileList {...mockProps} />);
7166
fireEvent.click(screen.getByRole('link', { name: 'Documents' }));
7267
expect(mockProps.onNavigate).toHaveBeenCalledWith('/Documents/');
7368
});
7469

7570
it('does not trigger onNavigate when clicking a file', () => {
76-
render(
77-
<MemoryRouter>
78-
<FileList {...mockProps} />
79-
</MemoryRouter>,
80-
);
71+
render(<FileList {...mockProps} />);
8172
fireEvent.click(screen.getByRole('link', { name: 'report.pdf' }));
8273
expect(mockProps.onNavigate).not.toHaveBeenCalled();
8374
});
8475

8576
it('calls onViewDetails when a file name is clicked', () => {
86-
render(
87-
<MemoryRouter>
88-
<FileList {...mockProps} />
89-
</MemoryRouter>,
90-
);
77+
render(<FileList {...mockProps} />);
9178
fireEvent.click(screen.getByRole('link', { name: 'report.pdf' }));
9279
expect(mockProps.onViewDetails).toHaveBeenCalledWith('report.pdf');
9380
});
9481

9582
it('calls onSort and reverses sort when a sortable header is clicked', () => {
96-
render(
97-
<MemoryRouter>
98-
<FileList {...mockProps} />
99-
</MemoryRouter>,
100-
);
83+
render(<FileList {...mockProps} />);
10184

10285
fireEvent.click(screen.getByLabelText('Sort by name'));
10386
expect(mockProps.onSort).toHaveBeenCalledWith('name');
@@ -108,11 +91,7 @@ describe('FileList', () => {
10891
});
10992

11093
it('calls onSort with updatedAt for last modified header', () => {
111-
render(
112-
<MemoryRouter>
113-
<FileList {...mockProps} />
114-
</MemoryRouter>,
115-
);
94+
render(<FileList {...mockProps} />);
11695

11796
const sortButton = screen.getByLabelText('Sort by last modified');
11897
fireEvent.click(sortButton);
@@ -121,44 +100,28 @@ describe('FileList', () => {
121100
});
122101

123102
it('shows the ascending icon if currentSortOrder is asc', () => {
124-
render(
125-
<MemoryRouter>
126-
<FileList {...mockProps} />
127-
</MemoryRouter>,
128-
);
103+
render(<FileList {...mockProps} />);
129104
const sortButton = screen.getByLabelText('Sort by name');
130105
const ascendingIcon = within(sortButton).getByLabelText('ascending sort icon');
131106
expect(ascendingIcon).toBeInTheDocument();
132107
});
133108

134109
it('shows the descending icon if currentSortOrder is desc', () => {
135-
render(
136-
<MemoryRouter>
137-
<FileList {...mockProps} currentSortOrder="desc" />
138-
</MemoryRouter>,
139-
);
110+
render(<FileList {...mockProps} currentSortOrder="desc" />);
140111
const sortButton = screen.getByLabelText('Sort by name');
141112
const descendingIcon = within(sortButton).getByLabelText('descending sort icon');
142113
expect(descendingIcon).toBeInTheDocument();
143114
});
144115

145116
it('shows the unsorted icon on headers that are not currently sorted', () => {
146-
render(
147-
<MemoryRouter>
148-
<FileList {...mockProps} />
149-
</MemoryRouter>,
150-
);
117+
render(<FileList {...mockProps} />);
151118
const sortButton = screen.getByLabelText('Sort by last modified');
152119
const unsortedIcon = within(sortButton).getByLabelText('unsorted icon');
153120
expect(unsortedIcon).toBeInTheDocument();
154121
});
155122

156123
it('calls onSort with name for file name header', () => {
157-
render(
158-
<MemoryRouter>
159-
<FileList {...mockProps} />
160-
</MemoryRouter>,
161-
);
124+
render(<FileList {...mockProps} />);
162125

163126
const sortButton = screen.getByLabelText('Sort by name');
164127
fireEvent.click(sortButton);
@@ -167,11 +130,7 @@ describe('FileList', () => {
167130
});
168131

169132
it('calls onDelete when a folder delete button is clicked', () => {
170-
render(
171-
<MemoryRouter>
172-
<FileList {...mockProps} />
173-
</MemoryRouter>,
174-
);
133+
render(<FileList {...mockProps} />);
175134
fireEvent.click(screen.getAllByRole('button', { name: 'Delete' })[0]);
176135
expect(mockProps.onDelete).toHaveBeenCalledWith({
177136
...mockFiles[0],
@@ -180,21 +139,13 @@ describe('FileList', () => {
180139
});
181140

182141
it('calls onDelete when a file delete button is clicked', () => {
183-
render(
184-
<MemoryRouter>
185-
<FileList {...mockProps} />
186-
</MemoryRouter>,
187-
);
142+
render(<FileList {...mockProps} />);
188143
fireEvent.click(screen.getAllByRole('button', { name: 'Delete' })[1]);
189144
expect(mockProps.onDelete).toHaveBeenCalledWith({ ...mockFiles[1] });
190145
});
191146

192147
it('renders no rows when no files are present', () => {
193-
render(
194-
<MemoryRouter>
195-
<FileList {...mockProps} data={[]} />
196-
</MemoryRouter>,
197-
);
148+
render(<FileList {...mockProps} data={[]} />);
198149
expect(screen.getAllByRole('row').length).toBe(1);
199150
});
200151

@@ -207,11 +158,7 @@ describe('FileList', () => {
207158

208159
jest.useFakeTimers();
209160

210-
render(
211-
<MemoryRouter>
212-
<FileList {...mockProps} />
213-
</MemoryRouter>,
214-
);
161+
render(<FileList {...mockProps} />);
215162

216163
const copyButton = screen.getAllByText('Copy link')[0];
217164

@@ -222,7 +169,7 @@ describe('FileList', () => {
222169
);
223170

224171
await screen.findByText('Copied!');
225-
jest.advanceTimersByTime(5000);
172+
act(() => jest.advanceTimersByTime(5000));
226173
await waitFor(() => expect(screen.queryByText('Copied!')).not.toBeInTheDocument());
227174
expect(screen.getAllByText('Copy link')).toHaveLength(2);
228175

@@ -231,24 +178,18 @@ describe('FileList', () => {
231178

232179
it('renders children if provided', () => {
233180
render(
234-
<MemoryRouter>
235-
<FileList {...mockProps}>
236-
<tr data-testid="child-row">
237-
<td>Child Row</td>
238-
</tr>
239-
</FileList>
240-
</MemoryRouter>,
181+
<FileList {...mockProps}>
182+
<tr data-testid="child-row">
183+
<td>Child Row</td>
184+
</tr>
185+
</FileList>,
241186
);
242187
expect(screen.getByTestId('child-row')).toBeInTheDocument();
243188
});
244189

245190
it('applies the highlight class when highlightItem matches the row name', () => {
246191
const highlightProps = { ...mockProps, highlightItem: 'report.pdf' };
247-
render(
248-
<MemoryRouter>
249-
<FileList {...highlightProps} />
250-
</MemoryRouter>,
251-
);
192+
render(<FileList {...highlightProps} />);
252193

253194
const cell = screen.getByText('report.pdf');
254195
// eslint-disable-next-line testing-library/no-node-access

‎frontend/pages/sites/$siteId/storage/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ function FileStoragePage() {
238238
)}
239239
<FileList
240240
path={path}
241-
storageRoot={storageRoot}
241+
baseUrl={site.siteOrigin}
242242
data={fetchedPublicFiles || []}
243243
onDelete={handleDelete}
244244
onNavigate={handleNavigate}

0 commit comments

Comments
 (0)