Clickable links in warnings and errors

README.md

@@ -119,9 +119,10 @@ as one line: what production runs, the picked tag, how many merge requests or co
 with the ones allowed to fail counted apart, and a mark when the range was cut at `RELEASE_SCOPE_MAX_COMMITS`.
 Opening a line shows the service's environments, warnings, merge requests that are not merged yet, and its rows with
 tags and their pipelines, merge requests or commits, Jira keys with their status, environments, and failed jobs; rows
-out of scope are dimmed. Links open in a new tab. Each tag has a **pick** button:
-picking it highlights the rows it ships and closes the line again. A `--jira` report starts with each service's
-release tag picked. Services with neither a production deployment nor rows are left out of the page.
+out of scope are dimmed. Links, including the GitLab settings pages that warnings and errors point to, open in a new
+tab. Each tag has a **pick** button: picking it highlights the rows it ships and closes the line again. A `--jira`
+report starts with each service's release tag picked. Services with neither a production deployment nor rows are left
+out of the page.
 
 The address keeps the picks after `#`, as `team/api=2.4.0&team/web=5.12.0`, so sharing or reloading the page keeps
 them. An address with picks replaces the release tags of a `--jira` report; picks that are not in the report, such as

release_scope/_static/index.html

@@ -116,7 +116,7 @@ <h1 x-text="report.jira_scope.length ? t('titleIssues', { keys: report.jira_scop
         </template>
       </ul>
       <template x-for="item in problems" :key="item.text">
-        <p class="bad message" x-text="message(item)"></p>
+        <p class="bad message"><template x-for="(part, index) in messageParts(item)" :key="index"><span><template x-if="part.url"><a :href="part.url" x-text="part.text"></a></template><template x-if="!part.url"><span x-text="part.text"></span></template></span></template></p>
       </template>
 
       <h2 x-text="t('services')"></h2>
@@ -143,9 +143,9 @@ <h2 x-text="t('services')"></h2>
                 <span> · <span x-text="item.name"></span> <a :href="item.deployment_url" x-text="item.ref"></a></span>
               </template>
             </p>
-            <p x-show="service.error" class="bad message" x-text="service.error && message(service.error)"></p>
+            <p x-show="service.error" class="bad message"><template x-for="(part, index) in messageParts(service.error)" :key="index"><span><template x-if="part.url"><a :href="part.url" x-text="part.text"></a></template><template x-if="!part.url"><span x-text="part.text"></span></template></span></template></p>
             <template x-for="warning in service.warnings" :key="warning.text">
-              <p class="warn message" x-text="message(warning)"></p>
+              <p class="warn message"><template x-for="(part, index) in messageParts(warning)" :key="index"><span><template x-if="part.url"><a :href="part.url" x-text="part.text"></a></template><template x-if="!part.url"><span x-text="part.text"></span></template></span></template></p>
             </template>
             <p x-show="service.release && service.release.pending_merge_requests.length">
               <span x-text="t('notMerged')"></span>
@@ -530,6 +530,12 @@ <h3 x-text="t('releasePost')"></h3>
         const render = MESSAGES[this.lang] && MESSAGES[this.lang][item.code];
         return render ? render(item.params) : item.text;
       },
+      messageParts(item) {
+        if (!item) return [];
+        return this.message(item)
+          .split(/(https?:\/\/\S+?)(?=[.,;:)]*(?:\s|$))/)
+          .map((text, index) => ({ text, url: index % 2 ? text : "" }));
+      },
       setLang(lang) {
         this.lang = lang;
         document.documentElement.lang = lang;