Fix font format parsing for URLs with query strings and hash (#23990)

enterprise/frontend/src/metabase-enterprise/whitelabel/components/FontFilesWidget/FontFilesWidget.unit.spec.tsx

 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { FontFile } from "metabase-types/api";
+import { createMockFontFile } from "metabase-types/api/mocks";
 import FontFilesWidget from "./FontFilesWidget";
 
 describe("FontFilesWidget", () => {
-  it("should add a font file", () => {
-    const files = getFontFiles();
+  it("should add a font file with a query string in the URL", () => {
+    const file = createMockFontFile({
+      src: "https://metabase.test/regular.ttf?raw=true",
+      fontWeight: 400,
+      fontFormat: "truetype",
+    });
     const setting = { value: [] };
     const onChange = jest.fn();
 
     render(<FontFilesWidget setting={setting} onChange={onChange} />);
 
     const input = screen.getByLabelText("Regular");
-    userEvent.type(input, files[0].src);
+    userEvent.type(input, file.src);
     userEvent.tab();
 
-    expect(onChange).toHaveBeenCalledWith([files[0]]);
+    expect(onChange).toHaveBeenCalledWith([file]);
+  });
+
+  it("should add a font file with an invalid URL", () => {
+    const file = createMockFontFile({
+      src: "invalid",
+      fontWeight: 400,
+      fontFormat: "woff2",
+    });
+    const setting = { value: [] };
+    const onChange = jest.fn();
+
+    render(<FontFilesWidget setting={setting} onChange={onChange} />);
+
+    const input = screen.getByLabelText("Regular");
+    userEvent.type(input, file.src);
+    userEvent.tab();
+
+    expect(onChange).toHaveBeenCalledWith([file]);
   });
 
   it("should remove a font file", () => {
-    const files = getFontFiles();
+    const files = [
+      createMockFontFile({
+        src: "https://metabase.test/regular.ttf?raw=true",
+        fontWeight: 400,
+        fontFormat: "truetype",
+      }),
+      createMockFontFile({
+        src: "https://metabase.test/bold.woff2",
+        fontWeight: 700,
+        fontFormat: "woff2",
+      }),
+    ];
     const setting = { value: files };
     const onChange = jest.fn();
 
@@ -33,16 +66,3 @@ describe("FontFilesWidget", () => {
     expect(onChange).toHaveBeenCalledWith([files[1]]);
   });
 });
-
-const getFontFiles = (): FontFile[] => [
-  {
-    src: "https://metabase.test/regular.ttf",
-    fontWeight: 400,
-    fontFormat: "truetype",
-  },
-  {
-    src: "https://metabase.test/bold.woff2",
-    fontWeight: 700,
-    fontFormat: "woff2",
-  },
-];

enterprise/frontend/src/metabase-enterprise/whitelabel/components/FontFilesWidget/utils.ts

@@ -36,17 +36,21 @@ const getFontFile = (src: string, option: FontFileOption): FontFile => {
 };
 
 const getFontFormat = (src: string): FontFormat => {
-  const match = src.match(/.*\.(\w+)/);
-  const extension = match ? match[1] : null;
+  try {
+    const url = new URL(src);
+    const extension = url.pathname.substring(url.pathname.lastIndexOf("."));
 
-  switch (extension) {
-    case "woff":
-      return "woff";
-    case "woff2":
-      return "woff2";
-    case "ttf":
-      return "truetype";
-    default:
-      return "woff2";
+    switch (extension) {
+      case ".woff":
+        return "woff";
+      case ".woff2":
+        return "woff2";
+      case ".ttf":
+        return "truetype";
+      default:
+        return "woff2";
+    }
+  } catch {
+    return "woff2";
   }
 };