Validate min and max length on export annotations filename

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -15,7 +15,6 @@ export type ExportAnnotationsProps = {
   toastMessenger: ToastMessengerService;
 };
 
-// TODO: Validate user-entered filename
 // TODO: does the Input need a label?
 
 /**
@@ -39,7 +38,9 @@ function ExportAnnotations({
     return <LoadingSpinner />;
   }
 
-  const exportAnnotations = () => {
+  const exportAnnotations = (e: Event) => {
+    e.preventDefault();
+
     try {
       const filename = `${inputRef.current!.value}.json`;
       const exportData = annotationsExporter.buildExportContent(
@@ -57,21 +58,27 @@ function ExportAnnotations({
   };
 
   return (
-    <>
+    <form
+      className="space-y-3"
+      onSubmit={exportAnnotations}
+      data-testid="export-form"
+    >
       {exportCount > 0 ? (
         <>
-          <p data-testid="export-count">
+          <label data-testid="export-count" htmlFor="export-filename">
             Export{' '}
             <strong>
               {exportCount} {pluralize('annotation', exportCount)}
             </strong>{' '}
             in a file named:
-          </p>
+          </label>
           <Input
             data-testid="export-filename"
             id="export-filename"
             defaultValue={suggestedFilename({ groupName: group?.name })}
             elementRef={inputRef}
+            required
+            maxLength={250}
           />
         </>
       ) : (
@@ -90,12 +97,12 @@ function ExportAnnotations({
           data-testid="export-button"
           variant="primary"
           disabled={!exportCount}
-          onClick={exportAnnotations}
+          type="submit"
         >
           Export
         </Button>
       </CardActions>
-    </>
+    </form>
   );
 }
 

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

@@ -111,9 +111,9 @@ describe('ExportAnnotations', () => {
     assert.equal(input.prop('defaultValue'), 'suggested-filename');
   });
 
-  describe('export button clicked', () => {
-    const clickExportButton = wrapper =>
-      wrapper.find('button[data-testid="export-button"]').simulate('click');
+  describe('export form submitted', () => {
+    const submitExportForm = wrapper =>
+      wrapper.find('[data-testid="export-form"]').simulate('submit');
 
     it('builds an export file from the non-draft annotations', () => {
       const wrapper = createComponent();
@@ -123,7 +123,7 @@ describe('ExportAnnotations', () => {
       ];
       fakeStore.savedAnnotations.returns(annotationsToExport);
 
-      clickExportButton(wrapper);
+      submitExportForm(wrapper);
 
       assert.calledOnce(fakeAnnotationsExporter.buildExportContent);
       assert.calledWith(
@@ -139,7 +139,7 @@ describe('ExportAnnotations', () => {
       wrapper.find('input[data-testid="export-filename"]').getDOMNode().value =
         'my-filename';
 
-      clickExportButton(wrapper);
+      submitExportForm(wrapper);
 
       assert.calledOnce(fakeDownloadJSONFile);
       assert.calledWith(
@@ -157,7 +157,7 @@ describe('ExportAnnotations', () => {
 
         const wrapper = createComponent();
 
-        clickExportButton(wrapper);
+        submitExportForm(wrapper);
 
         assert.notCalled(fakeDownloadJSONFile);
         assert.calledOnce(fakeAnnotationsExporter.buildExportContent);