DEV: Migrate custom header links to new objects setting type

javascripts/discourse/components/custom-header-links.hbs

@@ -12,12 +12,14 @@
   >
     {{#each this.links as |link|}}
       <li
-        class="headerLink
-          {{link.device}}
-          {{link.keepOnScrollClass}}
-          {{link.locale}}
-          {{link.linkClass}}
-          {{link.keepOnScroll}}"
+        class={{concat-class
+          "headerLink"
+          link.device
+          link.keepOnScrollClass
+          link.locale
+          link.linkClass
+          link.keepOnScroll
+        }}
       >
         <a
           title={{link.anchorAttributes.title}}

javascripts/discourse/components/custom-header-links.js

@@ -7,16 +7,14 @@ export default class CustomHeaderLinks extends Component {
   }
 
   get links() {
-    return settings.custom_header_links.split("|").reduce((result, item) => {
-      let [
-        linkText,
-        linkTitle,
-        linkHref,
-        device,
-        target = "",
-        keepOnScroll,
-        locale,
-      ] = item.split(",").map((s) => s.trim());
+    return settings.custom_header_links.reduce((result, link) => {
+      const linkText = link.text;
+      const linkTitle = link.title;
+      const linkHref = link.url;
+      const target = link.target;
+      const keepOnScroll = link.hide_on_scroll;
+      const locale = link.locale;
+      const device = link.view;
 
       if (!linkText || (locale && document.documentElement.lang !== locale)) {
         return result;
@@ -33,7 +31,7 @@ export default class CustomHeaderLinks extends Component {
       result.push({
         device: `headerLink--${device}`,
         keepOnScroll: `headerLink--${keepOnScroll}`,
-        locale: `headerLink--${locale}`,
+        locale: locale ? `headerLink--${locale}` : null,
         linkClass,
         anchorAttributes,
         linkText,

locales/en.yml

@@ -1,5 +1,36 @@
 en:
   theme_metadata:
     settings:
-      custom_header_links: "Comma delimited in this order: link text, link title, URL, view, target, hide on scroll<br><b>Link text:</b> The text for the link<br><b>Link title:</b> the text that shows when the link is hovered<br><b>URL:</b> The path for the link (can be relative)<br><b>View:</b> vdm = desktop and mobile, vdo = desktop only, vmo = mobile only<br><b>Target:</b> blank = opens in a new tab, self = opens in the same tab<br><b>Hide on scroll:</b> remove = hides the link when the title is expanded on topic pages keep = keeps the link visible even when the title is visible on topic pages<br><b>Language:</b> blank = no locale assoaciated to the link, else insert a locale code (en, fr, de, ...)"
       links_position: "Note that when links are displayed on the left, they're automatically hidden while scrolling within topics to make room for the title"
+      custom_header_links:
+        description: Custom links to be displayed in the header
+        schema:
+          properties:
+            text:
+              label: Text
+              description: The text for the link
+            title:
+              label: Title
+              description: The title attribute for the link
+            url:
+              label: URL
+              description: The URL for the link
+            view:
+              label: View
+              description: |
+                vdm = desktop and mobile
+                vdo = desktop only
+                vmo = mobile only
+            target:
+              label: Target
+              description: |
+                blank = opens in a new tab
+                self = opens in the same tab
+            hide_on_scroll:
+              label: Hide on scroll
+              description: |
+                remove = hides the link when the title is expanded on topic pages
+                keep = keeps the link visible even when the title is visible on topic pages
+            locale:
+              label: Locale
+              description: The locale in which the link should be displayed on. The link will be displayed on all locales if left blank.

migrations/settings/0002-migrate-custom-header-links.js

@@ -0,0 +1,33 @@
+export default function migrate(settings) {
+  const oldSetting = settings.get("custom_header_links");
+
+  if (oldSetting) {
+    const newSetting = oldSetting.split("|").map((link) => {
+      const [text, title, url, view, target, hide_on_scroll, locale] = link
+        .split(",")
+        .map((s) => s.trim());
+
+      const newLink = {
+        text,
+        title,
+        url,
+        view,
+        target,
+        hide_on_scroll,
+        locale,
+      };
+
+      Object.keys(newLink).forEach((key) => {
+        if (newLink[key] === undefined) {
+          delete newLink[key];
+        }
+      });
+
+      return newLink;
+    });
+
+    settings.set("custom_header_links", newSetting);
+  }
+
+  return settings;
+}

settings.yml

@@ -1,7 +1,65 @@
 custom_header_links:
-  type: list
-  list_type: simple
-  default: "External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep|Privacy, Our Privacy Policy, /privacy, vdm, self, keep"
+  type: objects
+  default:
+    - text: "External link"
+      title: "This link will open in a new tab"
+      url: "https://meta.discourse.org"
+      view: "vdo"
+      target: "blank"
+      hide_on_scroll: "remove"
+    - text: "Most Liked"
+      title: "Posts with the most amount of likes"
+      url: "/latest/?order=op_likes"
+      view: "vdo"
+      target: "self"
+      hide_on_scroll: "keep"
+    - text: "Privacy"
+      title: "Our Privacy Policy"
+      url: "/privacy"
+      view: "vdm"
+      target: "self"
+      hide_on_scroll: "keep"
+  schema:
+    name: "link"
+    properties:
+      text:
+        type: string
+        required: true
+        validations:
+          min_length: 1
+          max_length: 100
+      title:
+        type: string
+        required: true
+        validations:
+          min_length: 1
+          max_length: 1000
+      url:
+        type: string
+        required: true
+        validations:
+          min_length: 1
+          max_length: 2048
+          url: true
+      view:
+        type: enum
+        choices:
+          - vdm
+          - vdo
+          - vmo
+      target:
+        type: enum
+        choices:
+          - blank
+          - self
+      hide_on_scroll:
+        type: enum
+        choices:
+          - remove
+          - keep
+        default: keep
+      locale:
+        type: string
 
 links_position:
   default: right

spec/system/viewing_custom_header_links_spec.rb

@@ -7,10 +7,7 @@
   let!(:custom_header_link) { PageObjects::Components::CustomHeaderLink.new }
 
   context "when glimmer headers are enabled" do
-    before do
-      SiteSetting.experimental_glimmer_header_groups =
-        Group::AUTO_GROUPS[:everyone]
-    end
+    before { SiteSetting.experimental_glimmer_header_groups = Group::AUTO_GROUPS[:everyone] }
 
     it "should display the custom header links" do
       visit("/")
@@ -20,19 +17,19 @@
       expect(custom_header_link).to have_custom_header_link(
         "External link",
         href: "https://meta.discourse.org",
-        title: "this link will open in a new tab"
+        title: "This link will open in a new tab",
       )
 
       expect(custom_header_link).to have_custom_header_link(
         "Most Liked",
         href: "/latest/?order=op_likes",
-        title: "Posts with the most amount of likes"
+        title: "Posts with the most amount of likes",
       )
 
       expect(custom_header_link).to have_custom_header_link(
         "Privacy",
         href: "/privacy",
-        title: "Our Privacy Policy"
+        title: "Our Privacy Policy",
       )
     end
   end
@@ -48,19 +45,19 @@
       expect(custom_header_link).to have_custom_header_link(
         "External link",
         href: "https://meta.discourse.org",
-        title: "this link will open in a new tab"
+        title: "This link will open in a new tab",
       )
 
       expect(custom_header_link).to have_custom_header_link(
         "Most Liked",
         href: "/latest/?order=op_likes",
-        title: "Posts with the most amount of likes"
+        title: "Posts with the most amount of likes",
       )
 
       expect(custom_header_link).to have_custom_header_link(
         "Privacy",
         href: "/privacy",
-        title: "Our Privacy Policy"
+        title: "Our Privacy Policy",
       )
     end
   end

test/unit/migrations/settings/0002-migrate-custom-header-links-test.js

@@ -0,0 +1,52 @@
+import { module, test } from "qunit";
+import migrate from "../../../../migrations/settings/0002-migrate-custom-header-links";
+
+module(
+  "Unit | Migrations | Settings | 0002-migrate-custom-header-links",
+  function () {
+    test("migrate", function (assert) {
+      const settings = new Map(
+        Object.entries({
+          custom_header_links:
+            "External link, this link will open in a new tab, https://meta.discourse.org, vdo, blank, remove|Most Liked, Posts with the most amount of likes, /latest/?order=op_likes, vdo, self, keep|Privacy, Our Privacy Policy, /privacy, vdm, self, keep, en",
+        })
+      );
+
+      const result = migrate(settings);
+
+      const expectedResult = new Map(
+        Object.entries({
+          custom_header_links: [
+            {
+              text: "External link",
+              title: "this link will open in a new tab",
+              url: "https://meta.discourse.org",
+              view: "vdo",
+              target: "blank",
+              hide_on_scroll: "remove",
+            },
+            {
+              text: "Most Liked",
+              title: "Posts with the most amount of likes",
+              url: "/latest/?order=op_likes",
+              view: "vdo",
+              target: "self",
+              hide_on_scroll: "keep",
+            },
+            {
+              text: "Privacy",
+              title: "Our Privacy Policy",
+              url: "/privacy",
+              view: "vdm",
+              target: "self",
+              hide_on_scroll: "keep",
+              locale: "en",
+            },
+          ],
+        })
+      );
+
+      assert.deepEqual(Array.from(result), Array.from(expectedResult));
+    });
+  }
+);