Commit 71bb4cc4 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya

Make sure selected user is live updated on export pannel

parent b06d0d16
......@@ -116,10 +116,17 @@ function ExportAnnotations({
}),
[exportableAnnotations],
);
const [selectedUser, setSelectedUser] = useState(
// Try to preselect current user
userList.find(userInfo => userInfo.userid === currentUser) ??
const [selectedUserId, setSelectedUserId] = useState(currentUser);
// Re-compute selectedUserAnnotations if:
// - `userList` changes: This means annotations where created/deleted/updated
// - `selectedUserId` changes: This means user was manually changed
const selectedUserAnnotations = useMemo(
() =>
userList.find(user => user.userid === selectedUserId) ??
allAnnotationsOption,
[allAnnotationsOption, selectedUserId, userList],
);
const exportFormatsEnabled = store.isFeatureEnabled('export_formats');
......@@ -143,7 +150,7 @@ function ExportAnnotations({
const buildExportContent = useCallback(
(format: ExportFormat['value']): string => {
const annotationsToExport =
selectedUser?.annotations ?? exportableAnnotations;
selectedUserAnnotations?.annotations ?? exportableAnnotations;
switch (format) {
case 'json': {
const data = annotationsExporter.buildJSONExportContent(
......@@ -194,7 +201,7 @@ function ExportAnnotations({
exportableAnnotations,
group?.name,
profile,
selectedUser?.annotations,
selectedUserAnnotations?.annotations,
],
);
const exportAnnotations = useCallback(
......@@ -270,21 +277,26 @@ function ExportAnnotations({
Select which user{"'"}s annotations to export:
</label>
<SelectNext
value={selectedUser}
onChange={setSelectedUser}
value={selectedUserId}
onChange={setSelectedUserId}
buttonId={userSelectId}
buttonContent={
<UserAnnotationsListItem userAnnotations={selectedUser} />
<UserAnnotationsListItem
userAnnotations={selectedUserAnnotations}
/>
}
data-testid="user-select"
>
<SelectNext.Option value={allAnnotationsOption}>
<SelectNext.Option value={undefined}>
<UserAnnotationsListItem
userAnnotations={allAnnotationsOption}
/>
</SelectNext.Option>
{userList.map(userInfo => (
<SelectNext.Option key={userInfo.userid} value={userInfo}>
<SelectNext.Option
key={userInfo.userid}
value={userInfo.userid}
>
<UserAnnotationsListItem userAnnotations={userInfo} />
</SelectNext.Option>
))}
......
......@@ -210,11 +210,12 @@ describe('ExportAnnotations', () => {
assert.equal(users.length, userEntries.length);
for (const [i, entry] of userEntries.entries()) {
const value = users.at(i).prop('value');
const user = users.at(i);
const value = user.prop('value');
const text = user.text();
assert.equal(value.userid, entry.userid);
assert.equal(value.displayName, entry.displayName);
assert.equal(value.annotations.length, entry.annotationsCount);
assert.equal(value, entry.userid);
assert.equal(text, `${entry.displayName}${entry.annotationsCount}`);
}
});
});
......@@ -376,14 +377,8 @@ describe('ExportAnnotations', () => {
// Select the user whose annotations we want to export
const userList = await waitForTestId(wrapper, 'user-select');
const option = userList
.find(SelectNext.Option)
.filterWhere(
option => option.prop('value').userid === 'acct:john@example.com',
)
.first();
act(() => {
userList.prop('onChange')(option.prop('value'));
userList.prop('onChange')('acct:john@example.com');
});
wrapper.update();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment