DEV: Migrate link_sections and links to new objects setting type (#…

…45)

This commit migrates the `link_sections` and `links` setting to a `sections` objects typed settting. Since discourse/discourse@a440e15, we have started to support objects typed theme setting so we are switching this theme component to use it instead as it provides a much better UX for configuring the settings required for the theme component.

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.3.0.beta2-dev: e8cc46d2a87ec5a3c7e4ba3cfae80263f040e5a4
 < 3.3.0.beta1-dev: a7663469b5704f37c2a2e61d669c0f1362f2d9c0
 3.1.999: f87d03d930e2bf6e24027a62e5228e3deee1e8de
 2.9.0.beta3: 6e2eee67633c09b24dbc3292c2c39251dab31c55

javascripts/discourse/components/custom-footer.hbs

@@ -12,24 +12,27 @@
       <div class="second-box">
         <PluginOutlet @name="easy-footer-second-box">
           <div class="links">
-            {{#each this.linkSections as |section|}}
-              <div class="list" data-easyfooter-section={{section.dataName}}>
+            {{#each (theme-setting "sections") as |section|}}
+              <div
+                class="list"
+                data-easyfooter-section={{dasherize section.text}}
+              >
                 <span title={{section.title}}>
                   {{section.text}}
                 </span>
 
                 <ul>
-                  {{#each section.childLinks as |link|}}
+                  {{#each section.links as |link|}}
                     <li
                       class="footer-section-link-wrapper"
-                      data-easyfooter-link={{link.dataName}}
+                      data-easyfooter-link={{dasherize link.text}}
                     >
                       <a
                         class="footer-section-link"
                         title={{link.title}}
-                        href={{link.href}}
+                        href={{link.url}}
                         target={{link.target}}
-                        referrerpolicy={{link.referrerpolicy}}
+                        referrerpolicy={{link.referrer_policy}}
                       >
                         {{link.text}}
                       </a>
@@ -41,6 +44,7 @@
           </div>
         </PluginOutlet>
       </div>
+
       <div class="third-box">
         <div class="footer-links">
           {{#each this.smallLinks as |link|}}

javascripts/discourse/components/custom-footer.js

@@ -5,51 +5,6 @@ export default class extends Component {
   mainHeading = settings.heading;
   blurb = settings.blurb;
 
-  linkArray = settings.links
-    .split("|")
-    .filter(Boolean)
-    .map((link) => {
-      const fragments = link.split(",").map((fragment) => fragment.trim());
-      const parent = fragments[0].toLowerCase();
-      const text = fragments[1];
-      const dataName = dasherize(text);
-      const href = fragments[2];
-      const target = fragments[3] === "blank" ? "_blank" : "";
-      const title = fragments[4];
-      const referrerpolicy = fragments[5];
-
-      return {
-        parent,
-        text,
-        dataName,
-        href,
-        target,
-        title,
-        referrerpolicy,
-      };
-    });
-
-  linkSections = settings.link_sections
-    .split("|")
-    .filter(Boolean)
-    .map((section) => {
-      const fragments = section.split(",").map((fragment) => fragment.trim());
-      const parentFor = fragments[0].toLowerCase();
-      const text = fragments[0];
-      const title = fragments[1];
-      const dataName = dasherize(text);
-      const childLinks = this.linkArray.filter(
-        (link) => link.parent === parentFor
-      );
-
-      return {
-        text,
-        title,
-        dataName,
-        childLinks,
-      };
-    });
-
   smallLinks = settings.small_links
     .split("|")
     .filter(Boolean)

locales/en.yml

@@ -5,6 +5,33 @@ en:
         description: "Text for the heading in the footer - you can use your site name for example - Max length 25 characters"
       blurb:
         description: "Enter a short blurb about your community - Max length 180 characters"
+      sections:
+        description: "Sections to be displayed in the footer"
+        schema:
+          properties:
+            text:
+              label: Text
+              description: Text to be displayed for the section
+            title:
+              label: Title
+              description: The title attribute of the section
+            links:
+              text:
+                label: Text
+                description: Text to be displayed for the link
+              url:
+                label: URL
+                description: The URL the link points to
+              target:
+                label: Target
+                description: The target attribute of the link
+              title:
+                label: Title
+                description: The title attribute of the link
+              referrer_policy:
+                label: Referrer Policy
+                description: The referrerpolicy attribute of the link
+
       link_sections:
         description: "Add link sections. The ideal number of sections is six. One item per line in this order:<br> Text, title<br><b>Text:</b> what appears on in the footer<br><b>Title:</b> the text that appears when the item is hovered."
       links:

migrations/settings/0002-migrate-settings.js

@@ -0,0 +1,84 @@
+export default function migrate(settings) {
+  const oldLinkSections = settings.get("link_sections");
+
+  if (oldLinkSections) {
+    const newLinkSections = oldLinkSections.split("|").map((linkSection) => {
+      const [linkSectionName, linkSectionTitle] = linkSection
+        .split(",")
+        .map((value) => value.trim());
+
+      return {
+        text: linkSectionName,
+        title: linkSectionTitle,
+      };
+    });
+
+    const oldLinkSectionLinks = settings.get("links");
+
+    if (oldLinkSectionLinks) {
+      oldLinkSectionLinks.split("|").map((linkSectionLink) => {
+        const [
+          linkSectionName,
+          linkName,
+          linkUrl,
+          linkTarget,
+          linkTitle,
+          linkReferrerPolicy,
+        ] = linkSectionLink.split(",").map((value) => value.trim());
+
+        const linkSection = newLinkSections.find(
+          (section) => section.text === linkSectionName
+        );
+
+        if (linkSection) {
+          if (!linkSection.links) {
+            linkSection.links = [];
+          }
+
+          let target;
+
+          switch (linkTarget) {
+            case "blank":
+              target = "_blank";
+              break;
+            case "self":
+              target = "_self";
+              break;
+            default:
+              break;
+          }
+
+          const link = {
+            text: linkName,
+            url: linkUrl,
+            title: linkTitle || linkTarget, // There is a bug in the previous default which may have set the title to the target field
+          };
+
+          if (target) {
+            link.target = target;
+          }
+
+          if (
+            [
+              "no-referrer",
+              "no-referrer-when-downgrade",
+              "origin",
+              "origin-when-cross-origin",
+              "unsafe-url",
+            ].includes(linkReferrerPolicy)
+          ) {
+            link.referrer_policy = linkReferrerPolicy;
+          }
+
+          linkSection.links.push(link);
+        }
+      });
+    }
+
+    settings.set("sections", newLinkSections);
+    settings.delete("link_sections");
+    settings.delete("links");
+  }
+
+  return settings;
+}