DEV: Migrate small_links to new objects setting type

This commit migrates the `small_links` theme setting to `type: objects`. 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.

javascripts/discourse/components/custom-footer.hbs

@@ -47,13 +47,12 @@
 
       <div class="third-box">
         <div class="footer-links">
-          {{#each this.smallLinks as |link|}}
+          {{#each (theme-setting "small_links") as |link|}}
             <a
               class="small-link"
-              data-easyfooter-small-link={{link.dataName}}
-              title={{link.title}}
+              data-easyfooter-small-link={{dasherize link.text}}
               target={{link.target}}
-              href={{link.href}}
+              href={{link.url}}
             >
               {{link.text}}
             </a>

javascripts/discourse/components/custom-footer.js

@@ -5,24 +5,6 @@ export default class extends Component {
   mainHeading = settings.heading;
   blurb = settings.blurb;
 
-  smallLinks = settings.small_links
-    .split("|")
-    .filter(Boolean)
-    .map((link) => {
-      const fragments = link.split(",").map((fragment) => fragment.trim());
-      const text = fragments[0];
-      const dataName = dasherize(text);
-      const href = fragments[1];
-      const target = fragments[2] === "blank" ? "_blank" : "";
-
-      return {
-        text,
-        dataName,
-        href,
-        target,
-      };
-    });
-
   socialLinks = settings.social_links
     .split("|")
     .filter(Boolean)

locales/en.yml

@@ -32,12 +32,20 @@ en:
                 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:
-        description: "Add links to link sections. One item per line in this order:<br>Parent, text, URL, target, title, referrer policy<br>It is a good idea to keep the number of links under each section similar<br><b>Parent:</b> the name of the parent section which this link shows under. Use the `text` value from the list above<br><b>Text:</b> the text that shows for this link<br><b>URL:</b> the path this item links to. You can use relative paths as well.<br><b>Target:</b> Choose whether this item will open in a new tab or in the same tab. Use blank to open the link in a new tab, or use self to open it in the same tab.<br><b>Title:</b> the text that shows when the link is hovered.<br/><b>Referrer Policy:</b> the referrer policy to use in the link."
       small_links:
-        description: "You can add small links at the bottom of the footer like Terms of Service and Privacy. One item per line in this order:<br>Text, URL, target<br><b>Text:</b> The text that shows for the small link<br><b>URL:</b> The path of the link<br><b>Target:</b> Use blank to open the link in a new tab and use self to open it in the same tab"
+        description: "Small links at the bottom of the footer like Terms of Service and Privacy"
+        schema:
+          properties:
+            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
+
       social_links:
         description: "Enter the social links you'd like to add to the footer in this format:<br> provider, title, URL, target<br><b>Provider:</b> is the name of the provider like Facebook or Twitter<br><b>Title:</b> The text that shows when the link is hovered<br><b>URL:</b> The path you'd like the link to have<br><b>Target:</b> Use blank to open the link in a new tab and use self to open it in the same tab<br><b>Icon:</b> use a FontAwesome5 icon name (brand icons need a 'fab-' prefix)."
       show_footer_on_login_required_page:

migrations/settings/0003-migrate-small-links-setting.js

@@ -0,0 +1,33 @@
+export default function migrate(settings) {
+  const oldSmallLinks = settings.get("small_links");
+
+  if (oldSmallLinks) {
+    const newSmallLinks = oldSmallLinks.split("|").map((link) => {
+      const [linkText, linkUrl, linkTarget] = link
+        .split(",")
+        .map((fragment) => fragment.trim());
+
+      const newSmallLink = {
+        text: linkText,
+        url: linkUrl,
+      };
+
+      switch (linkTarget) {
+        case "blank":
+          newSmallLink.target = "_blank";
+          break;
+        case "self":
+          newSmallLink.target = "_self";
+          break;
+        default:
+          break;
+      }
+
+      return newSmallLink;
+    });
+
+    settings.set("small_links", newSmallLinks);
+  }
+
+  return settings;
+}

settings.yml

@@ -158,9 +158,42 @@ sections:
                 - unsafe-url
 
 small_links:
-  type: list
-  list_type: simple
-  default: "Privacy, #, self|Terms of service, #, self| About, #, self"
+  type: objects
+  default:
+    - text: Privacy
+      url: "#"
+      target: _self
+    - text: Terms of service
+      url: "#"
+      target: _self
+    - text: About
+      url: "#"
+      target: _self
+  schema:
+    name: small link
+    identifier: text
+    properties:
+      text:
+        type: string
+        required: true
+        validations:
+          min: 1
+          max: 1000
+      url:
+        type: string
+        required: true
+        validations:
+          min: 1
+          max: 2048
+          url: true
+      target:
+        type: enum
+        default: _blank
+        choices:
+          - _blank
+          - _self
+          - _parent
+          - _top
 
 social_links:
   type: list

test/unit/migrations/settings/0003-migrate-small-links-setting-test.js

@@ -0,0 +1,44 @@
+import { module, test } from "qunit";
+import migrate from "../../../../migrations/settings/0003-migrate-small-links-setting";
+
+module(
+  "Unit | Migrations | Settings | 0003-migrate-small-links-setting",
+  function () {
+    test("migrate", async function (assert) {
+      const settings = new Map(
+        Object.entries({
+          small_links:
+            "Link 1, #, blank|Link 2, #, self|Link 3, #, invalid_target",
+        })
+      );
+
+      const result = migrate(settings);
+
+      const expectedResult = new Map(
+        Object.entries({
+          small_links: [
+            {
+              text: "Link 1",
+              url: "#",
+              target: "_blank",
+            },
+            {
+              text: "Link 2",
+              url: "#",
+              target: "_self",
+            },
+            {
+              text: "Link 3",
+              url: "#",
+            },
+          ],
+        })
+      );
+
+      assert.deepEqual(
+        Object.fromEntries(result.entries()),
+        Object.fromEntries(expectedResult.entries())
+      );
+    });
+  }
+);