#4994: Make links in Field descriptions clickable

jest.config.json

@@ -18,7 +18,7 @@
     "^.+\\.txt$": "<rootDir>/src/testUtils/rawJestTransformer.mjs"
   },
   "transformIgnorePatterns": [
-    "node_modules/(?!@cfworker|escape-string-regex|filename-reserved-regex|filenamify|idb|webext-|p-timeout|p-retry|p-defer|p-memoize|serialize-error|strip-outer|trim-repeated|mimic-fn|urlpattern-polyfill|url-join|uuid|nanoid|use-debounce|copy-text-to-clipboard)"
+    "node_modules/(?!@cfworker|escape-string-regex|filename-reserved-regex|filenamify|idb|webext-|p-timeout|p-retry|p-defer|p-memoize|serialize-error|strip-outer|trim-repeated|mimic-fn|urlpattern-polyfill|url-join|uuid|nanoid|use-debounce|copy-text-to-clipboard|linkify-urls|create-html-element|stringify-attributes|escape-goat)"
   ],
   "setupFiles": [
     "dotenv/config",

package.json

@@ -86,6 +86,7 @@
     "json-stringify-safe": "^5.0.1",
     "jsonpath-plus": "^7.0.0",
     "kbar": "^0.1.0-beta.39",
+    "linkify-urls": "^4.0.0",
     "lodash-es": "^4.17.21",
     "marked": "^4.2.5",
     "mustache": "^4.2.0",

src/components/LinkifiedString.test.tsx

@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2023 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import LinkifiedString from "./LinkifiedString";
+
+describe("LinkifiedString", () => {
+  test("linkifies string", async () => {
+    const rendered = render(
+      <LinkifiedString>https://example.com and more</LinkifiedString>
+    );
+
+    expect(rendered.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <span>
+          <a
+            href="https://example.com"
+            target="_blank"
+          >
+            https://example.com
+          </a>
+           and more
+        </span>
+      </DocumentFragment>
+    `);
+  });
+  test("ignores string without links", async () => {
+    const rendered = render(
+      <LinkifiedString>Here’s regular text</LinkifiedString>
+    );
+
+    expect(rendered.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <span>
+          Here’s regular text
+        </span>
+      </DocumentFragment>
+    `);
+  });
+  test("ignores empty string", async () => {
+    const rendered = render(<LinkifiedString>{""}</LinkifiedString>);
+
+    expect(rendered.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <span />
+      </DocumentFragment>
+    `);
+  });
+  test("ignores non-string children", async () => {
+    const rendered = render(
+      <LinkifiedString>
+        Half<a href="https://example.com">linked</a>
+      </LinkifiedString>
+    );
+
+    expect(rendered.asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        Half
+        <a
+          href="https://example.com"
+        >
+          linked
+        </a>
+      </DocumentFragment>
+    `);
+  });
+  test("ignores missing children", async () => {
+    const rendered = render(<LinkifiedString />);
+
+    expect(rendered.asFragment()).toMatchInlineSnapshot("<DocumentFragment />");
+  });
+});

src/components/LinkifiedString.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2023 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import linkifyUrls from "linkify-urls";
+import React from "react";
+
+const LinkifiedString: React.FC = ({ children }) => {
+  if (typeof children !== "string") {
+    return <>{children}</>;
+  }
+
+  return (
+    <span
+      dangerouslySetInnerHTML={{
+        __html: linkifyUrls(children, {
+          attributes: {
+            target: "_blank",
+          },
+        }),
+      }}
+    />
+  );
+};
+
+export default LinkifiedString;

src/components/form/FieldTemplate.tsx

@@ -29,6 +29,7 @@ import cx from "classnames";
 import { castArray, isPlainObject } from "lodash";
 import AnnotationAlert from "@/components/annotationAlert/AnnotationAlert";
 import { AnnotationType } from "@/analysis/analysisTypes";
+import LinkifiedString from "../LinkifiedString";
 
 export type FieldProps<As extends React.ElementType = React.ElementType> =
   FormControlProps &
@@ -223,7 +224,7 @@ const FieldTemplate: React.FC<FieldProps> = ({
         {formControl}
         {description && (
           <BootstrapForm.Text className="text-muted">
-            {description}
+            <LinkifiedString>{description}</LinkifiedString>
           </BootstrapForm.Text>
         )}
       </Col>