Refactor validation and error message in terms of file type

Instead of maintaining lists of both valid extensions and valid mime types, we simply use the latter.
elastic · Jul 21, 2020 · 2a9caf3 · 2a9caf3
1 parent 9aa4a54
commit 2a9caf3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/...security_solution/public/detections/components/value_lists_management_modal/form.test.tsx b/...security_solution/public/detections/components/value_lists_management_modal/form.test.tsx
@@ -16,7 +16,7 @@ const mockUseImportList = useImportList as jest.Mock;
 
 const mockFile = ({
   name: 'foo.csv',
-  path: '/home/foo.csv',
+  type: 'text/csv',
 } as unknown) as File;
 
 const mockSelectFile: <P>(container: ReactWrapper<P>, file: File) => Promise<void> = async (
@@ -85,8 +85,8 @@ describe('ValueListsForm', () => {
 
   it('disables upload and displays an error if file has invalid extension', async () => {
     const badMockFile = ({
-      name: 'foo.unknown',
-      path: '/home/foo.unknown',
+      name: 'foo.pdf',
+      type: 'application/pdf',
     } as unknown) as File;
 
     const container = mount(
@@ -102,7 +102,7 @@ describe('ValueListsForm', () => {
     ).toEqual(true);
 
     expect(container.find('div[data-test-subj="value-list-file-picker-row"]').text()).toContain(
-      'Value list must have a .csv or .txt extension.'
+      'File must be one of the following types: [text/csv, text/plain]'
     );
   });
 

diff --git a/...gins/security_solution/public/detections/components/value_lists_management_modal/form.tsx b/...gins/security_solution/public/detections/components/value_lists_management_modal/form.tsx
@@ -46,7 +46,6 @@ const options: ListTypeOptions[] = [
 ];
 
 const defaultListType: Type = 'keyword';
-const validFileExtensions = ['.csv', '.txt'];
 const validFileTypes = ['text/csv', 'text/plain'];
 
 export interface ValueListsFormProps {
@@ -62,8 +61,7 @@ export const ValueListsFormComponent: React.FC<ValueListsFormProps> = ({ onError
   const { http } = useKibana().services;
   const { start: importList, ...importState } = useImportList();
 
-  const fileIsValid =
-    !file || validFileExtensions.some((extension) => file.name.endsWith(extension));
+  const fileIsValid = !file || validFileTypes.some((fileType) => file.type === fileType);
 
   // EuiRadioGroup's onChange only infers 'string' from our options
   const handleRadioChange = useCallback((t: string) => setType(t as Type), [setType]);
@@ -131,7 +129,7 @@ export const ValueListsFormComponent: React.FC<ValueListsFormProps> = ({ onError
         label={i18n.FILE_PICKER_LABEL}
         fullWidth
         isInvalid={!fileIsValid}
-        error={[i18n.FILE_PICKER_INVALID_EXTENSION]}
+        error={[i18n.FILE_PICKER_INVALID_FILE_TYPE(validFileTypes.join(', '))]}
       >
         <EuiFilePicker
           accept={validFileTypes.join()}

diff --git a/...curity_solution/public/detections/components/value_lists_management_modal/translations.ts b/...curity_solution/public/detections/components/value_lists_management_modal/translations.ts
@@ -24,12 +24,11 @@ export const FILE_PICKER_PROMPT = i18n.translate(
   }
 );
 
-export const FILE_PICKER_INVALID_EXTENSION = i18n.translate(
-  'xpack.securitySolution.lists.uploadValueListExtensionValidationMessage',
-  {
-    defaultMessage: 'Value list must have a .csv or .txt extension.',
-  }
-);
+export const FILE_PICKER_INVALID_FILE_TYPE = (fileTypes: string): string =>
+  i18n.translate('xpack.securitySolution.lists.uploadValueListExtensionValidationMessage', {
+    values: { fileTypes },
+    defaultMessage: 'File must be one of the following types: [{fileTypes}]',
+  });
 
 export const CLOSE_BUTTON = i18n.translate(
   'xpack.securitySolution.lists.closeValueListsModalTitle',