Add suggested filename for annotations export

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -5,6 +5,7 @@ import { downloadJSONFile } from '../../../shared/download-json-file';
 import { withServices } from '../../service-context';
 import type { AnnotationsExporter } from '../../services/annotations-exporter';
 import { useSidebarStore } from '../../store';
+import { suggestedFilename } from '../../util/export-annotations';
 import LoadingSpinner from './LoadingSpinner';
 
 export type ExportAnnotationsProps = {
@@ -13,7 +14,6 @@ export type ExportAnnotationsProps = {
 };
 
 // TODO: Validate user-entered filename
-// TODO: Initial filename suggestion (date + group name + ...?)
 // TODO: does the Input need a label?
 
 /**
@@ -61,7 +61,7 @@ function ExportAnnotations({ annotationsExporter }: ExportAnnotationsProps) {
           <Input
             data-testid="export-filename"
             id="export-filename"
-            defaultValue="suggested-filename-tbd"
+            defaultValue={suggestedFilename({ groupName: group?.name })}
             elementRef={inputRef}
           />
         </>

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

@@ -3,8 +3,7 @@ import { mount } from 'enzyme';
 import { checkAccessibility } from '../../../../test-util/accessibility';
 import { mockImportedComponents } from '../../../../test-util/mock-imported-components';
 import * as fixtures from '../../../test/annotation-fixtures';
-import ExportAnnotations from '../ExportAnnotations';
-import { $imports } from '../ExportAnnotations';
+import ExportAnnotations, { $imports } from '../ExportAnnotations';
 
 describe('ExportAnnotations', () => {
   let fakeStore;
@@ -46,6 +45,9 @@ describe('ExportAnnotations', () => {
         downloadJSONFile: fakeDownloadJSONFile,
       },
       '../../store': { useSidebarStore: () => fakeStore },
+      '../../util/export-annotations': {
+        suggestedFilename: () => 'suggested-filename',
+      },
     });
 
     // Restore this very simple component to get it test coverage
@@ -96,10 +98,12 @@ describe('ExportAnnotations', () => {
     );
   });
 
-  it('provides a filename field', () => {
+  it('provides a filename field with a default suggested name', () => {
     const wrapper = createComponent();
+    const input = wrapper.find('Input');
 
-    assert.isTrue(wrapper.find('Input').exists());
+    assert.isTrue(input.exists());
+    assert.equal(input.prop('defaultValue'), 'suggested-filename');
   });
 
   describe('export button clicked', () => {

src/sidebar/util/export-annotations.ts

+const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, '0');
+  const day = `${date.getDate()}`.padStart(2, '0');
+
+  return `${year}-${month}-${day}`;
+};
+
+type SuggestedFilenameOptions = {
+  groupName?: string;
+  date?: Date;
+};
+
+export const suggestedFilename = ({
+  groupName,
+  /* istanbul ignore next - test seam */
+  date = new Date(),
+}: SuggestedFilenameOptions) => {
+  const filenameSegments = [formatDate(date), 'Hypothesis'];
+  if (groupName) {
+    filenameSegments.push(groupName.replace(/ /g, '-'));
+  }
+
+  return filenameSegments.join('-');
+};

src/sidebar/util/test/export-annotations-test.js

+import { suggestedFilename } from '../export-annotations';
+
+describe('suggestedFilename', () => {
+  [
+    {
+      date: new Date(2023, 5, 23),
+      expectedResult: '2023-06-23-Hypothesis',
+    },
+    {
+      date: new Date(2019, 0, 5),
+      expectedResult: '2019-01-05-Hypothesis',
+    },
+    {
+      date: new Date(2020, 10, 5),
+      groupName: 'My group name',
+      expectedResult: '2020-11-05-Hypothesis-My-group-name',
+    },
+  ].forEach(({ date, groupName, expectedResult }) => {
+    it('builds expected filename for provided arguments', () => {
+      assert.equal(suggestedFilename({ date, groupName }), expectedResult);
+    });
+  });
+});