Merge pull request #3731 from backstage/orkohunter/techdocs-set-correct-content-type-header

packages/techdocs-common/src/stages/publish/googleStorage.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import path from 'path';
 import express from 'express';
 import {
   Storage,
@@ -167,7 +168,7 @@ export class GoogleGCSPublish implements PublisherBase {
       const filePath = req.path.replace(/^\//, '');
 
       // Files with different extensions (CSS, HTML) need to be served with different headers
-      const fileExtension = filePath.split('.')[filePath.split('.').length - 1];
+      const fileExtension = path.extname(filePath);
       const responseHeaders = getHeadersForFileExtension(fileExtension);
 
       const fileStreamChunks: Array<any> = [];

packages/techdocs-common/src/stages/publish/helpers.test.ts

@@ -17,29 +17,25 @@ import mockFs from 'mock-fs';
 import { getFileTreeRecursively, getHeadersForFileExtension } from './helpers';
 
 describe('getHeadersForFileExtension', () => {
-  it('returns correct header for default extensions', () => {
-    const headers = getHeadersForFileExtension('xyz');
-    const expectedHeaders = {
-      'Content-Type': 'text/plain',
-    };
-    expect(headers).toEqual(expectedHeaders);
-  });
+  const correctMapOfExtensions = [
+    ['.html', 'text/html; charset=utf-8'],
+    ['.css', 'text/css; charset=utf-8'],
+    ['.png', 'image/png'],
+    ['.jpg', 'image/jpeg'],
+    ['.jpeg', 'image/jpeg'],
+    ['.svg', 'image/svg+xml'],
+    ['.json', 'application/json; charset=utf-8'],
+    ['.this-in-not-an-extension', 'text/plain; charset=utf-8'],
+  ];
 
-  it('returns correct header for html', () => {
-    const headers = getHeadersForFileExtension('html');
-    const expectedHeaders = {
-      'Content-Type': 'text/html; charset=UTF-8',
-    };
-    expect(headers).toEqual(expectedHeaders);
-  });
-
-  it('returns correct header for css', () => {
-    const headers = getHeadersForFileExtension('css');
-    const expectedHeaders = {
-      'Content-Type': 'text/css; charset=UTF-8',
-    };
-    expect(headers).toEqual(expectedHeaders);
-  });
+  test.each(correctMapOfExtensions)(
+    'check content-type for %s extension',
+    (extension, expectedContentType) => {
+      const headers = getHeadersForFileExtension(extension);
+      expect(headers).toHaveProperty('Content-Type');
+      expect(headers['Content-Type'].toLowerCase()).toBe(expectedContentType);
+    },
+  );
 });
 
 describe('getFileTreeRecursively', () => {

packages/techdocs-common/src/stages/publish/helpers.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import mime from 'mime-types';
 import recursiveReadDir from 'recursive-readdir';
 
 export type responseHeadersType = {
@@ -22,32 +23,15 @@ export type responseHeadersType = {
 /**
  * Some files need special headers to be used correctly by the frontend. This function
  * generates headers in the response to those file requests.
- * @param {string} fileExtension html, css, js etc.
+ * @param {string} fileExtension .html, .css, .js, .png etc.
  */
 export const getHeadersForFileExtension = (
   fileExtension: string,
 ): responseHeadersType => {
-  const headersCommon = {
-    'Content-Type': 'text/plain',
-  };
-  const headersHTML = {
-    ...headersCommon,
-    'Content-Type': 'text/html; charset=UTF-8',
-  };
-
-  const headersCSS = {
-    ...headersCommon,
-    'Content-Type': 'text/css; charset=UTF-8',
-  };
-
-  switch (fileExtension) {
-    case 'html':
-      return headersHTML;
-    case 'css':
-      return headersCSS;
-    default:
-      return headersCommon;
-  }
+  return {
+    'Content-Type':
+      mime.contentType(fileExtension) || 'text/plain; charset=utf-8',
+  } as responseHeadersType;
 };
 
 /**