Fix BL-15820 Addition to TC error message

For various reasons simply adding ""Important: synchronization problems can be caused when one or more members of your team have incorrect Dropbox settings. Please ensure all members of your team collection are using the correct settings. See [critical Dropbox settings](https://docs.bloomlibrary.org/critical-dropbox-settings/).";

lead to all these changes!

Author: hatton

src/BloomBrowserUI/react_components/stringWithOptionalLink.spec.tsx

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { renderToStaticMarkup } from "react-dom/server";
+import { act } from "react-dom/test-utils";
+
+vi.mock("../utils/bloomApi", () => ({
+    post: vi.fn(),
+    postString: vi.fn(),
+}));
+
+import { post, postString } from "../utils/bloomApi";
+import { StringWithOptionalLink } from "./stringWithOptionalLink";
+
+const postMock = vi.mocked(post);
+const postStringMock = vi.mocked(postString);
+
+describe("StringWithOptionalLink", () => {
+    let container: HTMLDivElement | null = null;
+
+    const renderIntoDom = (message: string) => {
+        if (!container) {
+            throw new Error("render container not initialized");
+        }
+
+        const target = container;
+        act(() => {
+            ReactDOM.render(
+                <StringWithOptionalLink message={message} />,
+                target,
+            );
+        });
+        return target;
+    };
+
+    beforeEach(() => {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        if (container) {
+            ReactDOM.unmountComponentAtNode(container);
+            container.remove();
+            container = null;
+        }
+        vi.clearAllMocks();
+    });
+
+    it("renders spans and anchors for multiple links", () => {
+        const markup = renderToStaticMarkup(
+            <StringWithOptionalLink
+                message={
+                    "Start <a href='/bloom/api/internal'>first</a> middle <a href='http://example.com'>second</a> end"
+                }
+            />,
+        );
+        const temp = document.createElement("div");
+        temp.innerHTML = markup;
+
+        const spans = temp.querySelectorAll("span");
+        const anchors = temp.querySelectorAll("a");
+
+        expect(spans.length).toBe(3);
+        expect(spans[0].textContent).toBe("Start ");
+        expect(spans[1].textContent).toBe(" middle ");
+        expect(spans[2].textContent).toBe(" end");
+
+        expect(anchors.length).toBe(2);
+        expect(anchors[0].textContent).toBe("first");
+        expect(anchors[0].getAttribute("href")).toBe("/bloom/api/internal");
+        expect(anchors[1].textContent).toBe("second");
+        expect(anchors[1].getAttribute("href")).toBe("http://example.com");
+    });
+
+    it("invokes post for internal links", () => {
+        const host = renderIntoDom(
+            "Do <a href='/bloom/api/doThing'>this</a> now",
+        );
+        const anchor = host.querySelector("a");
+        expect(anchor).not.toBeNull();
+
+        anchor?.dispatchEvent(
+            new MouseEvent("click", { bubbles: true, cancelable: true }),
+        );
+
+        expect(postMock).toHaveBeenCalledWith("doThing");
+        expect(postStringMock).not.toHaveBeenCalled();
+    });
+
+    it("invokes postString for external links", () => {
+        const host = renderIntoDom(
+            "Visit <a href='mailto:test@example.com'>email</a>",
+        );
+        const anchor = host.querySelector("a");
+        expect(anchor).not.toBeNull();
+
+        anchor?.dispatchEvent(
+            new MouseEvent("click", { bubbles: true, cancelable: true }),
+        );
+
+        expect(postStringMock).toHaveBeenCalledWith(
+            "link",
+            "mailto:test@example.com",
+        );
+        expect(postMock).not.toHaveBeenCalled();
+    });
+});

src/BloomBrowserUI/react_components/stringWithOptionalLink.tsx

@@ -1,37 +1,66 @@
 import * as React from "react";
-import { post } from "../utils/bloomApi";
+import { post, postString } from "../utils/bloomApi";
 
 // Display a string which may have embedded a link, in the usual HTML format,
 // for example, "There is a problem. Please click <a href='...'>here</a> to report it".
 // (Currently the href must use single quotes.)
 // If there is no link, the result is a single span, the message.
-// If there is a link, we get a span, a link, and another span.
+// If there are links, we interleave spans and anchor tags for each segment.
 // Currently the href is assumed to be something to send to our API,
 // but NOT to actually navigate to. We could support more options as needed.
 export const StringWithOptionalLink: React.FunctionComponent<{
     message: string;
 }> = (props) => {
-    const match = props.message.match(
-        /^(.*?)<a[^>]*?href='([^>']+)'[^>]*>(.*?)<\/a>(.*)$/,
-    );
-    if (match) {
-        const href = match[2].replace("/bloom/api/", "");
-        return (
-            <React.Fragment>
-                <span>{match[1]}</span>
-                <a
-                    // We don't currently use the href, but to get link formatting it
-                    // has to be present. May also be helpful for accessibility.
-                    href={match[2]}
-                    onClick={(e) => {
-                        e.preventDefault(); // so it doesn't try to follow the link
-                        post(href);
-                    }}
-                >
-                    {match[3]}
-                </a>
-                <span>{match[4]}</span>
-            </React.Fragment>
+    const linkRegex = /<a[^>]*?href='([^>']+)'[^>]*>(.*?)<\/a>/g;
+    const elements: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let segmentIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = linkRegex.exec(props.message))) {
+        const precedingText = props.message.slice(lastIndex, match.index);
+        if (precedingText) {
+            elements.push(
+                <span key={`text-${segmentIndex}`}>{precedingText}</span>,
+            );
+            segmentIndex++;
+        }
+
+        const rawHref = match[1];
+        const isExternalLink =
+            rawHref.startsWith("http") || rawHref.startsWith("mailto");
+        const href = rawHref.replace("/bloom/api/", "");
+
+        elements.push(
+            <a
+                key={`link-${segmentIndex}`}
+                // We don't currently use the href, but to get link formatting it
+                // has to be present. May also be helpful for accessibility.
+                href={rawHref}
+                onClick={(e) => {
+                    e.preventDefault(); // so it doesn't try to follow the link
+                    if (isExternalLink) {
+                        postString("link", rawHref);
+                        return;
+                    }
+                    post(href);
+                }}
+            >
+                {match[2]}
+            </a>,
         );
-    } else return <span>{props.message}</span>;
+        segmentIndex++;
+        lastIndex = linkRegex.lastIndex;
+    }
+
+    const trailingText = props.message.slice(lastIndex);
+    if (trailingText) {
+        elements.push(<span key={`text-${segmentIndex}`}>{trailingText}</span>);
+    }
+
+    if (elements.length === 0) {
+        return <span>{props.message}</span>;
+    }
+
+    return <React.Fragment>{elements}</React.Fragment>;
 };