[7.x] [Workplace Search] Fix Media Type field preview is unformatted bug (#104684)

x-pack/plugins/enterprise_search/public/applications/workplace_search/utils/index.ts

@@ -7,3 +7,4 @@
 
 export { toSentenceSerial } from './to_sentence_serial';
 export { getAsLocalDateTimeString } from './get_as_local_datetime_string';
+export { mimeType } from './mime_types';

x-pack/plugins/enterprise_search/public/applications/workplace_search/utils/mime_types.test.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mimeType } from './';
+
+describe('mimeType', () => {
+  it('should return correct mimeType when present', () => {
+    expect(mimeType('Image/gif')).toEqual('GIF');
+  });
+
+  it('should fall back gracefully when mimeType not present', () => {
+    expect(mimeType('NOPE')).toEqual('NOPE');
+  });
+});

x-pack/plugins/enterprise_search/public/applications/workplace_search/utils/mime_types.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+const mimeTypes = {
+  'application/iwork-keynote-sffkey': 'Keynote',
+  'application/x-iwork-keynote-sffkey': 'Keynote',
+  'application/iwork-numbers-sffnumbers': 'Numbers',
+  'application/iwork-pages-sffpages': 'Pages',
+  'application/json': 'JSON',
+  'application/mp4': 'MP4',
+  'application/msword': 'DOC',
+  'application/octet-stream': 'Binary',
+  'application/pdf': 'PDF',
+  'application/rtf': 'RTF',
+  'application/vnd.google-apps.audio': 'Google Audio',
+  'application/vnd.google-apps.document': 'Google Doc',
+  'application/vnd.google-apps.drawing': 'Google Drawing',
+  'application/vnd.google-apps.file': 'Google Drive File',
+  'application/vnd.google-apps.folder': 'Google Drive Folder',
+  'application/vnd.google-apps.form': 'Google Form',
+  'application/vnd.google-apps.fusiontable': 'Google Fusion Table',
+  'application/vnd.google-apps.map': 'Google Map',
+  'application/vnd.google-apps.photo': 'Google Photo',
+  'application/vnd.google-apps.presentation': 'Google Slides',
+  'application/vnd.google-apps.script': 'Google Script',
+  'application/vnd.google-apps.sites': 'Google Site',
+  'application/vnd.google-apps.spreadsheet': 'Google Sheet',
+  'application/vnd.google-apps.unknown': 'Google Unknown',
+  'application/vnd.google-apps.video': 'Google Video',
+  'application/vnd.ms-excel': 'XLS',
+  'application/vnd.ms-powerpoint': 'PPT',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPTX',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',
+  'application/xml': 'XML',
+  'application/zip': 'ZIP',
+  'image/gif': 'GIF',
+  'image/jpeg': 'JPEG',
+  'image/png': 'PNG',
+  'image/svg+xml': 'SVG',
+  'image/tiff': 'TIFF',
+  'image/vnd.adobe.photoshop': 'PSD',
+  'text/comma-separated-values': 'CSV',
+  'text/css': 'CSS',
+  'text/html': 'HTML',
+  'text/plain': 'TXT',
+  'video/quicktime': 'MOV',
+} as { [key: string]: string };
+
+export const mimeType = (type: string) => mimeTypes[type.toLowerCase()] || type;

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/example_search_result_group.tsx

@@ -13,7 +13,7 @@ import { useValues } from 'kea';
 import { isColorDark, hexToRgb } from '@elastic/eui';
 
 import { DESCRIPTION_LABEL } from '../../../../constants';
-import { getAsLocalDateTimeString } from '../../../../utils';
+import { getAsLocalDateTimeString, mimeType } from '../../../../utils';
 
 import { CustomSourceIcon } from './custom_source_icon';
 import { DisplaySettingsLogic } from './display_settings_logic';
@@ -117,7 +117,7 @@ export const ExampleSearchResultGroup: React.FC = () => {
                       data-test-subj="MediaTypeField"
                     >
                       <span className="example-search-result__tag-content">
-                        {result[mediaTypeField]}
+                        {mimeType(result[mediaTypeField] as string)}
                       </span>
                     </div>
                   )}

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/example_standout_result.tsx

@@ -13,7 +13,7 @@ import { useValues } from 'kea';
 import { isColorDark, hexToRgb } from '@elastic/eui';
 
 import { DESCRIPTION_LABEL } from '../../../../constants';
-import { getAsLocalDateTimeString } from '../../../../utils';
+import { getAsLocalDateTimeString, mimeType } from '../../../../utils';
 
 import { CustomSourceIcon } from './custom_source_icon';
 import { DisplaySettingsLogic } from './display_settings_logic';
@@ -108,7 +108,9 @@ export const ExampleStandoutResult: React.FC = () => {
                 })}
                 data-test-subj="MediaTypeField"
               >
-                <span className="example-search-result__tag-content">{result[mediaTypeField]}</span>
+                <span className="example-search-result__tag-content">
+                  {mimeType(result[mediaTypeField] as string)}
+                </span>
               </div>
             )}
             <div className="example-result-content__tag-content">