From 520ad654a765489f436557bc9db93beeab04d994 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 24 Apr 2024 14:03:28 +0800 Subject: [PATCH] DEV: Migrate small_links to new objects setting type This commit migrates the `small_links` theme setting to `type: objects`. Since https://github.com/discourse/discourse/commit/a440e15291e98a866f80a6566d5ec0597ab77e2e, 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/components/custom-footer.hbs | 7 ++- .../discourse/components/custom-footer.js | 18 -------- locales/en.yml | 18 +++++--- .../0003-migrate-small-links-setting.js | 33 ++++++++++++++ settings.yml | 39 ++++++++++++++-- .../0003-migrate-small-links-setting-test.js | 44 +++++++++++++++++++ 6 files changed, 129 insertions(+), 30 deletions(-) create mode 100644 migrations/settings/0003-migrate-small-links-setting.js create mode 100644 test/unit/migrations/settings/0003-migrate-small-links-setting-test.js diff --git a/javascripts/discourse/components/custom-footer.hbs b/javascripts/discourse/components/custom-footer.hbs index 8451be8..9b4f4f1 100644 --- a/javascripts/discourse/components/custom-footer.hbs +++ b/javascripts/discourse/components/custom-footer.hbs @@ -47,13 +47,12 @@
- {{#each this.smallLinks as |link|}} + {{#each (theme-setting "small_links") as |link|}} {{link.text}} diff --git a/javascripts/discourse/components/custom-footer.js b/javascripts/discourse/components/custom-footer.js index ac57a63..bd1c283 100644 --- a/javascripts/discourse/components/custom-footer.js +++ b/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) diff --git a/locales/en.yml b/locales/en.yml index c7f1739..c556a71 100644 --- a/locales/en.yml +++ b/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:
Text, title
Text: what appears on in the footer
Title: the text that appears when the item is hovered." - links: - description: "Add links to link sections. One item per line in this order:
Parent, text, URL, target, title, referrer policy
It is a good idea to keep the number of links under each section similar
Parent: the name of the parent section which this link shows under. Use the `text` value from the list above
Text: the text that shows for this link
URL: the path this item links to. You can use relative paths as well.
Target: 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.
Title: the text that shows when the link is hovered.
Referrer Policy: 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:
Text, URL, target
Text: The text that shows for the small link
URL: The path of the link
Target: 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:
provider, title, URL, target
Provider: is the name of the provider like Facebook or Twitter
Title: The text that shows when the link is hovered
URL: The path you'd like the link to have
Target: Use blank to open the link in a new tab and use self to open it in the same tab
Icon: use a FontAwesome5 icon name (brand icons need a 'fab-' prefix)." show_footer_on_login_required_page: diff --git a/migrations/settings/0003-migrate-small-links-setting.js b/migrations/settings/0003-migrate-small-links-setting.js new file mode 100644 index 0000000..db7a2e3 --- /dev/null +++ b/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; +} diff --git a/settings.yml b/settings.yml index dabf9e7..d977255 100644 --- a/settings.yml +++ b/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 diff --git a/test/unit/migrations/settings/0003-migrate-small-links-setting-test.js b/test/unit/migrations/settings/0003-migrate-small-links-setting-test.js new file mode 100644 index 0000000..14bf738 --- /dev/null +++ b/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()) + ); + }); + } +);