FIX: Fix local-dates in non-post contexts, and in long topics (#14565)

- Stop looking up the topic title from the DOM. On long topics, the topic title may not be present. Instead, we can store the topic title in a data-title attribute during decorateCookedElement, and then access it later. This approach would also allow us to add customize titles per-local-date in future. If there is no topic title available (e.g. when local dates are used elsewhere in the UI), we use the site name to build a sensible default

- Don't require a postId for creating calendar events. We don't have postIds in non-post contexts. At the moment, the 'download ICS' function will fail without a valid postId, so that will need to be fixed in a future commit.

plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js.es6

@@ -6,6 +6,7 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 import showModal from "discourse/lib/show-modal";
 import { downloadCalendar } from "discourse/lib/download-calendar";
 import { renderIcon } from "discourse-common/lib/icon-library";
+import I18n from "I18n";
 
 export function applyLocalDates(dates, siteSettings) {
   if (!siteSettings.discourse_local_dates_enabled) {
@@ -76,6 +77,9 @@ function _rangeElements(element) {
 function initializeDiscourseLocalDates(api) {
   const siteSettings = api.container.lookup("site-settings:main");
   const chat = api.container.lookup("service:chat");
+  const defaultTitle = I18n.t("discourse_local_dates.default_title", {
+    site_name: siteSettings.title,
+  });
 
   if (chat) {
     chat.addToolbarButton({
@@ -99,11 +103,15 @@ function initializeDiscourseLocalDates(api) {
   }
 
   api.decorateCookedElement(
-    (elem) => {
-      applyLocalDates(
-        elem.querySelectorAll(".discourse-local-date"),
-        siteSettings
-      );
+    (elem, helper) => {
+      const dates = elem.querySelectorAll(".discourse-local-date");
+
+      applyLocalDates(dates, siteSettings);
+
+      const topicTitle = helper?.getModel()?.topic?.title;
+      dates.forEach((date) => {
+        date.dataset.title = date.dataset.title || topicTitle || defaultTitle;
+      });
     },
     { id: "discourse-local-date" }
   );
@@ -207,11 +215,11 @@ function _downloadCalendarNode(element) {
         .toISOString()
     );
   }
+  node.setAttribute("data-title", startDataset.title);
   node.setAttribute(
-    "data-title",
-    document.querySelector("#topic-title a").innerText
+    "data-post-id",
+    element.closest("article")?.dataset?.postId
   );
-  node.setAttribute("data-post-id", element.closest("article").dataset.postId);
   return node;
 }
 

plugins/discourse-local-dates/config/locales/client.en.yml

@@ -34,3 +34,4 @@ en:
             every_three_months: "Every three months"
             every_six_months: "Every six months"
             every_year: "Every year"
+      default_title: "%{site_name} Event"

plugins/discourse-local-dates/test/javascripts/acceptance/download-calendar-test.js.es6

@@ -57,7 +57,7 @@ acceptance(
       assert.ok(!exists(document.querySelector("#discourse-modal-title")));
       assert.ok(
         window.open.calledWith(
-          "https://www.google.com/calendar/event?action=TEMPLATE&text=Local%20dates%20&dates=20210930T110000Z/20210930T120000Z",
+          "https://www.google.com/calendar/event?action=TEMPLATE&text=Local%20dates&dates=20210930T110000Z/20210930T120000Z",
           "_blank",
           "noopener",
           "noreferrer"