Make sure selected user is live updated on export pannel

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -116,10 +116,17 @@ function ExportAnnotations({
     }),
     [exportableAnnotations],
   );
-  const [selectedUser, setSelectedUser] = useState(
-    // Try to preselect current user
-    userList.find(userInfo => userInfo.userid === currentUser) ??
+
+  // Try to preselect current user
+  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>
               ))}

src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js

@@ -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();