Add annotations export format select

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -26,6 +26,30 @@ export type ExportAnnotationsProps = {
   toastMessenger: ToastMessengerService;
 };
 
+type ExportFormat = {
+  value: 'json' | 'csv' | 'text' | 'html';
+  name: string;
+};
+
+const exportFormats: ExportFormat[] = [
+  {
+    value: 'json',
+    name: 'JSON',
+  },
+  {
+    value: 'csv',
+    name: 'CSV',
+  },
+  {
+    value: 'text',
+    name: 'Text',
+  },
+  {
+    value: 'html',
+    name: 'HTML',
+  },
+];
+
 /**
  * Render content for "export" tab panel: allow user to export annotations
  * with a specified filename.
@@ -68,6 +92,9 @@ function ExportAnnotations({
       allAnnotationsOption,
   );
 
+  const exportFormatsEnabled = store.isFeatureEnabled('export_formats');
+  const [exportFormat, setExportFormat] = useState(exportFormats[0]);
+
   const fileInputId = useId();
   const userSelectId = useId();
 
@@ -133,17 +160,39 @@ function ExportAnnotations({
           >
             Name of export file:
           </label>
-          <Input
-            data-testid="export-filename"
-            id={fileInputId}
-            defaultValue={defaultFilename}
-            value={customFilename}
-            onChange={e =>
-              setCustomFilename((e.target as HTMLInputElement).value)
-            }
-            required
-            maxLength={250}
-          />
+          <div className="flex">
+            <Input
+              classes="grow"
+              data-testid="export-filename"
+              id={fileInputId}
+              defaultValue={defaultFilename}
+              value={customFilename}
+              onChange={e =>
+                setCustomFilename((e.target as HTMLInputElement).value)
+              }
+              required
+              maxLength={250}
+            />
+            {exportFormatsEnabled && (
+              <div className="grow-0 ml-2 min-w-[5rem]">
+                <SelectNext
+                  value={exportFormat}
+                  onChange={setExportFormat}
+                  buttonContent={exportFormat.name}
+                  data-testid="export-format-select"
+                >
+                  {exportFormats.map(exportFormat => (
+                    <SelectNext.Option
+                      key={exportFormat.value}
+                      value={exportFormat}
+                    >
+                      {exportFormat.name}
+                    </SelectNext.Option>
+                  ))}
+                </SelectNext>
+              </div>
+            )}
+          </div>
           <label htmlFor={userSelectId} className="block font-medium">
             Select which user{"'"}s annotations to export:
           </label>
@@ -154,6 +203,7 @@ function ExportAnnotations({
             buttonContent={
               <UserAnnotationsListItem userAnnotations={selectedUser} />
             }
+            data-testid="user-select"
           >
             <SelectNext.Option value={allAnnotationsOption}>
               <UserAnnotationsListItem userAnnotations={allAnnotationsOption} />

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

@@ -81,6 +81,9 @@ describe('ExportAnnotations', () => {
     $imports.$restore();
   });
 
+  const waitForTestId = async (wrapper, testId) =>
+    waitForElement(wrapper, `[data-testid="${testId}"]`);
+
   context('export annotations not ready (loading)', () => {
     it('renders a loading spinner if there is no focused group', () => {
       fakeStore.focusedGroup.returns(null);
@@ -181,7 +184,7 @@ describe('ExportAnnotations', () => {
 
       const wrapper = createComponent();
 
-      const userList = await waitForElement(wrapper, SelectNext);
+      const userList = await waitForTestId(wrapper, 'user-select');
       const users = userList.find(SelectNext.Option);
       assert.equal(users.length, userEntries.length);
 
@@ -207,6 +210,22 @@ describe('ExportAnnotations', () => {
     assert.equal(input.prop('defaultValue'), 'suggested-filename');
   });
 
+  [
+    { exportFormatsEnabled: true, expectedAmountOfSelects: 2 },
+    { exportFormatsEnabled: false, expectedAmountOfSelects: 1 },
+  ].forEach(({ exportFormatsEnabled, expectedAmountOfSelects }) => {
+    it('displays format selector when feature is enabled', async () => {
+      fakeStore.isFeatureEnabled.callsFake(
+        ff => exportFormatsEnabled || ff !== 'export_formats',
+      );
+
+      const wrapper = createComponent();
+      const selects = await waitForElement(wrapper, SelectNext);
+
+      assert.equal(selects.length, expectedAmountOfSelects);
+    });
+  });
+
   describe('export form submitted', () => {
     const submitExportForm = wrapper =>
       wrapper.find('[data-testid="export-form"]').simulate('submit');
@@ -265,7 +284,7 @@ describe('ExportAnnotations', () => {
       const wrapper = createComponent();
 
       // Select the user whose annotations we want to export
-      const userList = await waitForElement(wrapper, SelectNext);
+      const userList = await waitForTestId(wrapper, 'user-select');
       const option = userList
         .find(SelectNext.Option)
         .filterWhere(
@@ -376,7 +395,7 @@ describe('ExportAnnotations', () => {
 
   it('should pass a11y checks', async () => {
     const wrapper = createComponent();
-    const select = await waitForElement(wrapper, SelectNext);
+    const select = await waitForTestId(wrapper, 'user-select');
 
     await checkAccessibility({
       content: () => wrapper,