Improve export format titles displayed in listbox

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -34,29 +34,40 @@ export type ExportAnnotationsProps = {
 type ExportFormat = {
   /** Unique format identifier used also as file extension */
   value: 'json' | 'csv' | 'txt' | 'html';
-  name: string;
+  /** The title to be displayed in the listbox item */
+  title: string;
+
+  /**
+   * The title to be displayed in the Select button.
+   * Falls back to `title` when not provided.
+   */
+  shortTitle?: string;
+
   description: string;
 };
 
 const exportFormats: ExportFormat[] = [
   {
     value: 'json',
-    name: 'JSON',
+    title: 'JSON',
     description: 'For import into another Hypothesis group or document',
   },
   {
     value: 'txt',
-    name: 'Text',
+    title: 'Plain text (TXT)',
+    shortTitle: 'Text',
     description: 'For import into word processors as plain text',
   },
   {
     value: 'csv',
-    name: 'CSV',
+    title: 'Table (CSV)',
+    shortTitle: 'CSV',
     description: 'For import into a spreadsheet',
   },
   {
     value: 'html',
-    name: 'HTML',
+    title: 'Rich text (HTML)',
+    shortTitle: 'HTML',
     description: 'For import into word processors as rich text',
   },
 ];
@@ -235,7 +246,7 @@ function ExportAnnotations({
                 <SelectNext
                   value={exportFormat}
                   onChange={setExportFormat}
-                  buttonContent={exportFormat.name}
+                  buttonContent={exportFormat.shortTitle ?? exportFormat.title}
                   data-testid="export-format-select"
                   right
                 >
@@ -246,7 +257,7 @@ function ExportAnnotations({
                     >
                       <div className="flex-col gap-y-2">
                         <div className="font-bold" data-testid="format-name">
-                          {exportFormat.name}
+                          {exportFormat.title}
                         </div>
                         <div data-testid="format-description">
                           {exportFormat.description}

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

@@ -254,20 +254,37 @@ describe('ExportAnnotations', () => {
       optionText(0, 'description'),
       'For import into another Hypothesis group or document',
     );
-    assert.equal(optionText(1, 'name'), 'Text');
+    assert.equal(optionText(1, 'name'), 'Plain text (TXT)');
     assert.equal(
       optionText(1, 'description'),
       'For import into word processors as plain text',
     );
-    assert.equal(optionText(2, 'name'), 'CSV');
+    assert.equal(optionText(2, 'name'), 'Table (CSV)');
     assert.equal(optionText(2, 'description'), 'For import into a spreadsheet');
-    assert.equal(optionText(3, 'name'), 'HTML');
+    assert.equal(optionText(3, 'name'), 'Rich text (HTML)');
     assert.equal(
       optionText(3, 'description'),
       'For import into word processors as rich text',
     );
   });
 
+  [
+    [{ shortTitle: 'Short', title: 'Something longer' }, 'Short'],
+    [{ title: 'Something longer' }, 'Something longer'],
+  ].forEach(([format, expectedTitle]) => {
+    it('displays format short title if defined', async () => {
+      const wrapper = createComponent();
+      const getSelect = () =>
+        waitForElement(wrapper, '[data-testid="export-format-select"]');
+
+      const selectBefore = await getSelect();
+      selectBefore.props().onChange(format);
+
+      const selectAfter = await getSelect();
+      assert.equal(selectAfter.prop('buttonContent'), expectedTitle);
+    });
+  });
+
   describe('export form submitted', () => {
     const submitExportForm = wrapper =>
       wrapper.find('[data-testid="export-form"]').simulate('submit');