fix(admin): Parse cron expressions correctly in Safari v16.3 (#45654)

* fix(admin): Don't use regex lookbehinds in Schedule utility functions since these fail on Safari 16.3

* Remove blank describe block

frontend/src/metabase/admin/performance/utils.tsx

 import dayjs from "dayjs";
+import { t } from "ttag";
 import { memoize } from "underscore";
 import type { SchemaObjectDescription } from "yup/lib/schema";
 
@@ -124,12 +125,24 @@ export const cronToScheduleSettings_unmemoized = (
     if (weekday === Cron.AllValues) {
       schedule_frame = frameFromCron(dayOfMonth);
     } else {
-      // Split on transition from number to non-number
-      const weekdayParts = weekday.split(/(?<=\d)(?=\D)/);
-      const day = parseInt(weekdayParts[0]);
+      const dayStr = weekday.match(/^\d+/)?.[0];
+      if (!dayStr) {
+        throw new Error(
+          t`The cron expression contains an invalid weekday: ${weekday}`,
+        );
+      }
+      const day = parseInt(dayStr);
       schedule_day = weekdays[day - 1]?.value as ScheduleDayType;
       if (dayOfMonth === Cron.AllValues) {
-        const frameInCronFormat = weekdayParts[1].replace(/^#/, "");
+        // Match the part after the '#' in a string like '6#1' or the letter in '6L'
+        const frameInCronFormat = weekday
+          .match(/^\d+(\D.*)$/)?.[1]
+          .replace(/^#/, "");
+        if (!frameInCronFormat) {
+          throw new Error(
+            t`The cron expression contains an invalid weekday: ${weekday}`,
+          );
+        }
         schedule_frame = frameFromCron(frameInCronFormat);
       } else {
         schedule_frame = frameFromCron(dayOfMonth);

frontend/src/metabase/components/Schedule/utils.tsx

@@ -4,12 +4,25 @@ import { isValidElement } from "react";
 import type { SelectProps } from "metabase/ui";
 import { Box, Group } from "metabase/ui";
 
-const placeholderRegex = /^\{([0-9])+\}$/;
+const placeholderRegex = /^\{(\d)+\}$/;
+
+// https://regexr.com/83e7f
+// Splitting on this regex includes the placeholders in the resulting array
+const regexForSplittingOnPlaceholders = /(\{\d+\})/;
+
+/** Takes a translated string containing placeholders and returns a JSX expression containing components substituted in for the placeholders */
 export const addScheduleComponents = (
+  /** A translated string containing placeholders, such as:
+   * - "{0} {1} on {2} at {3}"
+   * - "{0} {1} {2} à {3}" (a French example)
+   * - "{1} {2} um {3} {0}" (a German example)
+   */
   str: string,
   components: ReactNode[],
 ): ReactNode => {
-  const segments = str.split(/(?=\{)|(?<=\})/g).filter(part => part.trim());
+  const segments = str
+    .split(regexForSplittingOnPlaceholders)
+    .filter(part => part.trim());
   const arr = segments.map(segment => {
     const match = segment.match(placeholderRegex);
     return match ? components[parseInt(match[1])] : segment;
@@ -52,7 +65,9 @@ const addBlanks = (arr: ReactNode[]) => {
     // Insert blank nodes between adjacent Selects unless they can fit on one line
     if (isValidElement(curr) && isValidElement(next)) {
       const canSelectsProbablyFitOnOneLine =
-        curr.props.longestLabel.length + next.props.longestLabel.length < 24;
+        (curr.props.longestLabel?.length || 5) +
+          (next.props.longestLabel?.length || 5) <
+        24;
       if (canSelectsProbablyFitOnOneLine) {
         result[result.length - 1] = (
           <Group spacing="xs" key={`selects-on-one-line`}>

frontend/src/metabase/components/Schedule/utils.unit.spec.tsx

+import { render, screen } from "@testing-library/react";
+
+import type { SelectProps } from "metabase/ui";
+
+import { addScheduleComponents, getLongestSelectLabel } from "./utils";
+
+describe("utils", () => {
+  describe("addScheduleComponents", () => {
+    // Mock translation dictionary
+    const translations = {
+      // English strings
+      en: {
+        /* This string contains placeholders. {0} is a verb like 'Send',
+         * {1} is an adverb like 'hourly',
+         * {2} is an adjective like 'first',
+         * {3} is a day like 'Tuesday',
+         * {4} is a time like '12:00pm' */
+        "{0} {1} on the {2} {3} at {4}": "{0} {1} on the {2} {3} at {4}",
+        invalidate: "Invalidate",
+        monthly: "monthly",
+        first: "first",
+        tuesday: "Tuesday",
+        twelvePm: "12:00pm",
+      },
+      // German translations
+      de: {
+        /* This string contains placeholders. {0} is a verb like 'Send',
+         * {1} is an adverb like 'hourly',
+         * {2} is an adjective like 'first',
+         * {3} is a day like 'Tuesday',
+         * {4} is a time like '12:00pm' */
+        "{0} {1} on the {2} {3} at {4}": "{1} am {2} {3} um {4} {0}", // The order is different in German
+        invalidate: "ungültig machen",
+        monthly: "monatlich",
+        first: "erste",
+        tuesday: "Dienstag",
+        twelvePm: "12:00 Uhr",
+      },
+    };
+
+    it("can add components to an untranslated (English) string", () => {
+      const { invalidate, monthly, first, tuesday, twelvePm } = translations.en;
+      const scheduleDescription =
+        translations.en["{0} {1} on the {2} {3} at {4}"];
+      const scheduleReactNode = addScheduleComponents(scheduleDescription, [
+        <div key="verb">{invalidate} </div>,
+        <div key="frequency">{monthly} </div>,
+        <div key="frame">{first} </div>,
+        <div key="weekday-of-month">{tuesday} </div>,
+        <div key="time">{twelvePm} </div>,
+      ]);
+      render(<div data-testid="schedule">{scheduleReactNode}</div>);
+      const scheduleElement = screen.getByTestId("schedule");
+      expect(scheduleElement).toHaveTextContent(
+        "Invalidate monthly on the first Tuesday at 12:00pm",
+      );
+    });
+
+    it("can add components to a string translated into German", () => {
+      const { invalidate, monthly, first, tuesday, twelvePm } = translations.de;
+      const scheduleDescription =
+        translations.de["{0} {1} on the {2} {3} at {4}"];
+      const scheduleReactNode = addScheduleComponents(scheduleDescription, [
+        <div key="verb">{invalidate} </div>,
+        <div key="frequency">{monthly} </div>,
+        <div key="frame">{first} </div>,
+        <div key="weekday-of-month">{tuesday} </div>,
+        <div key="time">{twelvePm} </div>,
+      ]);
+      render(<div data-testid="schedule">{scheduleReactNode}</div>);
+      const scheduleElement = screen.getByTestId("schedule");
+      expect(scheduleElement).toHaveTextContent(
+        "monatlich am erste Dienstag um 12:00 Uhr ungültig machen",
+      );
+    });
+  });
+
+  describe("getLongestSelectLabel", () => {
+    it("should return the longest label from an array of strings", () => {
+      const data: SelectProps["data"] = [
+        "short",
+        "medium length",
+        "the longest string in the array",
+      ];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("the longest string in the array");
+    });
+
+    it("should return the longest label from an array of objects", () => {
+      const data: SelectProps["data"] = [
+        { value: "short", label: "short" },
+        { value: "medium", label: "medium length" },
+        { value: "long", label: "the longest string in the array" },
+      ];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("the longest string in the array");
+    });
+
+    it("should return the longest label from a mixed array", () => {
+      const data: SelectProps["data"] = [
+        "short",
+        { value: "value", label: "the longest string in the array" },
+        "medium length",
+      ];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("the longest string in the array");
+    });
+
+    it("should return an empty string if data is empty", () => {
+      const data: SelectProps["data"] = [];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("");
+    });
+
+    it("should return an empty string if all objects have no labels", () => {
+      const data: SelectProps["data"] = [
+        { value: "first" },
+        { value: "second" },
+      ];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("");
+    });
+
+    it("should handle undefined labels in objects", () => {
+      const data: SelectProps["data"] = [
+        { value: "first", label: undefined },
+        { value: "second", label: "valid label" },
+      ];
+      const result = getLongestSelectLabel(data);
+      expect(result).toBe("valid label");
+    });
+  });
+});