Separate annotation and reply counts in exports

This ensures that the count of annotations displayed in the Export tab matches
the count of top-level annotations that we show in the user list, and actually
import, in the Import tab.

When reporting unsaved annotations, use the term "draft" which covers both
annotations and replies.

Part of https://github.com/hypothesis/client/issues/5742

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -2,6 +2,7 @@ import { Button, CardActions, Input } from '@hypothesis/frontend-shared';
 import { useMemo, useState } from 'preact/hooks';
 
 import { downloadJSONFile } from '../../../shared/download-json-file';
+import { isReply } from '../../helpers/annotation-metadata';
 import { withServices } from '../../service-context';
 import type { AnnotationsExporter } from '../../services/annotations-exporter';
 import type { ToastMessengerService } from '../../services/toast-messenger';
@@ -26,8 +27,14 @@ function ExportAnnotations({
   const store = useSidebarStore();
   const group = store.focusedGroup();
   const exportReady = group && !store.isLoading();
+
   const exportableAnnotations = store.savedAnnotations();
-  const exportCount = exportableAnnotations.length;
+  const replyCount = useMemo(
+    () => exportableAnnotations.filter(ann => isReply(ann)).length,
+    [exportableAnnotations],
+  );
+  const nonReplyCount = exportableAnnotations.length - replyCount;
+
   const draftCount = store.countDrafts();
 
   const defaultFilename = useMemo(
@@ -55,8 +62,8 @@ function ExportAnnotations({
   };
 
   // Naive simple English pluralization
-  const pluralize = (str: string, count: number) => {
-    return count === 1 ? str : `${str}s`;
+  const pluralize = (count: number, singular: string, plural: string) => {
+    return count === 1 ? singular : plural;
   };
 
   return (
@@ -65,13 +72,21 @@ function ExportAnnotations({
       onSubmit={exportAnnotations}
       data-testid="export-form"
     >
-      {exportCount > 0 ? (
+      {exportableAnnotations.length > 0 ? (
         <>
           <label data-testid="export-count" htmlFor="export-filename">
             Export{' '}
             <strong>
-              {exportCount} {pluralize('annotation', exportCount)}
+              {nonReplyCount}{' '}
+              {pluralize(nonReplyCount, 'annotation', 'annotations')}
             </strong>{' '}
+            {replyCount > 0
+              ? `(and ${replyCount} ${pluralize(
+                  replyCount,
+                  'reply',
+                  'replies',
+                )}) `
+              : ''}
             in a file named:
           </label>
           <Input
@@ -93,15 +108,16 @@ function ExportAnnotations({
       )}
       {draftCount > 0 && (
         <p data-testid="drafts-message">
-          You have {draftCount} unsaved {pluralize('annotation', draftCount)}
-          {exportCount > 0 && <> that will not be included</>}.
+          You have {draftCount} unsaved{' '}
+          {pluralize(draftCount, 'draft', 'drafts')}
+          {exportableAnnotations.length > 0 && <> that will not be included</>}.
         </p>
       )}
       <CardActions>
         <Button
           data-testid="export-button"
           variant="primary"
-          disabled={!exportCount}
+          disabled={exportableAnnotations.length === 0}
           type="submit"
         >
           Export

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

@@ -83,25 +83,42 @@ describe('ExportAnnotations', () => {
     });
   });
 
-  it('shows a count of annotations for export', () => {
-    fakeStore.savedAnnotations.returns([fixtures.oldAnnotation()]);
-    const wrapperSingular = createComponent();
-    fakeStore.savedAnnotations.returns([
+  [
+    {
+      annotations: [fixtures.oldAnnotation()],
+      message: 'Export 1 annotation in a file',
+    },
+    {
+      annotations: [fixtures.oldAnnotation(), fixtures.oldAnnotation()],
+      message: 'Export 2 annotations in a file',
+    },
+    {
+      annotations: [
         fixtures.oldAnnotation(),
         fixtures.oldAnnotation(),
-    ]);
-    const wrapperPlural = createComponent();
-
-    assert.include(
-      wrapperSingular.find('[data-testid="export-count"]').text(),
-      'Export 1 annotation in a file',
-    );
-
+        fixtures.oldReply(),
+      ],
+      message: 'Export 2 annotations (and 1 reply) in a file',
+    },
+    {
+      annotations: [
+        fixtures.oldAnnotation(),
+        fixtures.oldAnnotation(),
+        fixtures.oldReply(),
+        fixtures.oldReply(),
+      ],
+      message: 'Export 2 annotations (and 2 replies) in a file',
+    },
+  ].forEach(({ annotations, message }) => {
+    it('shows a count of annotations for export', () => {
+      fakeStore.savedAnnotations.returns(annotations);
+      const wrapper = createComponent();
       assert.include(
-      wrapperPlural.find('[data-testid="export-count"]').text(),
-      'Export 2 annotations in a file',
+        wrapper.find('[data-testid="export-count"]').text(),
+        message,
       );
     });
+  });
 
   it('provides a filename field with a default suggested name', () => {
     const wrapper = createComponent();
@@ -211,12 +228,12 @@ describe('ExportAnnotations', () => {
 
       assert.include(
         wrapperSingular.find('[data-testid="drafts-message"]').text(),
-        'You have 1 unsaved annotation that',
+        'You have 1 unsaved draft that',
       );
 
       assert.include(
         wrapperPlural.find('[data-testid="drafts-message"]').text(),
-        'You have 2 unsaved annotations that',
+        'You have 2 unsaved drafts that',
       );
     });
   });

src/sidebar/store/modules/annotations.ts

@@ -554,9 +554,10 @@ const orphanCount = createSelector(
 /**
  * Return all loaded annotations which have been saved to the server
  */
-function savedAnnotations(state: State): SavedAnnotation[] {
-  return state.annotations.filter(ann => isSaved(ann)) as SavedAnnotation[];
-}
+const savedAnnotations = createSelector(
+  (state: State) => state.annotations,
+  annotations => annotations.filter(ann => isSaved(ann)) as SavedAnnotation[],
+);
 
 export const annotationsModule = createStoreModule(initialState, {
   namespace: 'annotations',