DEV: Migrate custom header links to new objects setting type (#53)

Why this change? 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.

Author: tgxworld

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.3.0.beta2-dev: 0a837d7c044798417b1a7389cc37a67859c25dbe
 < 3.3.0.beta1-dev: 50061254831a658eba821238a8a1ae0b7029ab09
 < 3.2.0.beta2: 061adfe5ae20abbb82be711d373894c30987ec75
 < 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13

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

@@ -12,12 +12,13 @@
  >
  {{#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.locale
+ link.linkClass
+ link.hideOnScroll
+ }}
  >
  <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 hideOnScroll = link.hide_on_scroll;
+ const locale = link.locale;
+ const device = link.view;
 
  if (!linkText || (locale && document.documentElement.lang !== locale)) {
  return result;
@@ -32,8 +30,8 @@ export default class CustomHeaderLinks extends Component {
 
  result.push({
  device: `headerLink--${device}`,
- keepOnScroll: `headerLink--${keepOnScroll}`,
- locale: `headerLink--${locale}`,
+ hideOnScroll: `headerLink--${hideOnScroll}`,
+ 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

@@ -9,8 +9,7 @@
  context "when glimmer headers are enabled" do
  before do
  if SiteSetting.respond_to?(:experimental_glimmer_header_groups)
- SiteSetting.experimental_glimmer_header_groups =
- Group::AUTO_GROUPS[:everyone]
+ SiteSetting.experimental_glimmer_header_groups = Group::AUTO_GROUPS[:everyone]
  else
  SiteSetting.glimmer_header_mode = "enabled"
  end
@@ -24,28 +23,27 @@
  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
 
  context "when glimmer headers are disabled" do
  before do
  if SiteSetting.respond_to?(:experimental_glimmer_header_groups)
- SiteSetting.experimental_glimmer_header_groups =
- nil
+ SiteSetting.experimental_glimmer_header_groups = nil
  else
  SiteSetting.glimmer_header_mode = "disabled"
  end
@@ -59,19 +57,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));
+ });
+ }
+);