From 81dd656f30a42d7400f421ab35bd6b9e904daf80 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Mon, 8 Apr 2024 15:41:14 +0800 Subject: [PATCH] DEV: Migrate `link_sections` and `links` to new objects setting type This commit migrates the `link_sections` and `links` setting to a `sections` objects typed settting. 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 | 16 +- .../discourse/components/custom-footer.js | 45 ---- locales/en.yml | 27 ++ migrations/settings/0002-migrate-settings.js | 82 +++++++ settings.yml | 164 ++++++++++++- spec/system/footer_spec.rb | 52 +++- .../settings/0002-migrate-settings-test.js | 230 ++++++++++++++++++ 7 files changed, 546 insertions(+), 70 deletions(-) create mode 100644 migrations/settings/0002-migrate-settings.js create mode 100644 test/unit/migrations/settings/0002-migrate-settings-test.js diff --git a/javascripts/discourse/components/custom-footer.hbs b/javascripts/discourse/components/custom-footer.hbs index fc26a0b..922facf 100644 --- a/javascripts/discourse/components/custom-footer.hbs +++ b/javascripts/discourse/components/custom-footer.hbs @@ -11,24 +11,27 @@
- {{#each this.linkSections as |section|}} -
+ {{#each (theme-setting "sections") as |section|}} +
{{section.text}}
    - {{#each section.childLinks as |link|}} + {{#each section.links as |link|}}
  • {{link.text}} @@ -39,6 +42,7 @@ {{/each}}
+
{{#each this.smallLinks as |link|}} diff --git a/javascripts/discourse/components/custom-footer.js b/javascripts/discourse/components/custom-footer.js index db8ad7b..ac57a63 100644 --- a/javascripts/discourse/components/custom-footer.js +++ b/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) diff --git a/locales/en.yml b/locales/en.yml index 6c47d24..c7f1739 100644 --- a/locales/en.yml +++ b/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:
Text, title
Text: what appears on in the footer
Title: the text that appears when the item is hovered." links: diff --git a/migrations/settings/0002-migrate-settings.js b/migrations/settings/0002-migrate-settings.js new file mode 100644 index 0000000..67620e8 --- /dev/null +++ b/migrations/settings/0002-migrate-settings.js @@ -0,0 +1,82 @@ +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, + linkReferralPolicy, + ] = linkSectionLink.split(",").map((value) => value.trim()); + + const linkSection = newLinkSections.find( + (section) => section.name === 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, + }; + + if (target) { + link.target = target; + } + + if ( + [ + "no-referrer", + "no-referrer-when-downgrade", + "origin", + "origin-when-cross-origin", + "unsafe-url", + ].includes(linkReferralPolicy) + ) { + link.referrer_policy = linkReferralPolicy; + } + + linkSection.links.push(link); + } + }); + } + + settings.set("sections", newLinkSections); + } + + return settings; +} diff --git a/settings.yml b/settings.yml index c35d8cf..dabf9e7 100644 --- a/settings.yml +++ b/settings.yml @@ -1,27 +1,175 @@ heading: default: "This is a header" max: 25 + blurb: default: "Ius vitae ornatus at, ei mea sumo quot dicant. Ei tale democritum eos, in mea timeam accumsan forensibus. Ei his aperiam suavitate. Et debitis convenire sea, viris dictas latine." max: 180 -link_sections: - type: list - list_type: simple - default: "Design, Get inspired!|Code, Learn new things!|Business, Start a new career!|Shop, Buy cool stuff!|Community, The latest news about the people you care about!|World, Check out what's happening" -links: - type: list - list_type: simple - default: "Design, Design process, #, blank, Learn the basics|Design, Blog design, #, blank, What makes for a great blog?|Design, Photoshop tutorials, #, blank, Photoshop for beginners|Design, Design trends, #, blank, Stay on top of the current trends!|Code, Wordpress, #, blank, Wordpress code examples|Code, Tools, #, blank, Tools that will make your life easier!|Code, Tutorials, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, #, blank, Why not start a blog?|Business, Social media, #, blank, Learn how to leverage Social media and make it work for your business|Business, Make money, #, blank, Everyone likes to be paid!|Business, Marketing, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, #, blank, buy vectors|Shop, Textures, #, blank, buy textures|Shop, UI kits, #, blank, buy UI kits|Shop, PSDs, #, blank, Ready-made PSD's|Community, Your corner, #, blank, Tell us how you feel!|Community, Questions, #, blank, Feel like answering some questions?|Community, Members, #, blank, Say hi to new members|Community, trending, #, blank, Catch up with the latest trending topics!|World, Politics, #, blank, Stay up to date|World, Education, #, blank, The latest research|World, Automotive, #, blank, We cover the latest models!|World, Sports, #, The latest scores|World, Tech, #, Never miss a new gadget" + +sections: + type: objects + default: + - text: Design + title: Get inspired! + links: + - text: Design process + url: "#" + title: Learn the basics + - text: Blog design + url: "#" + title: What makes for a great blog? + - text: Photoshop tutorials + url: "#" + title: Photoshop for beginners + - text: Design trends + url: "#" + title: Stay on top of the current trends! + - text: Code + title: Learn new things! + links: + - text: Wordpress + url: "#" + title: Wordpress code examples + - text: Tools + url: "#" + title: Tools that will make your life easier! + - text: Tutorials + url: "#" + title: Just starting out? We'll guide you through the basics + - text: Business + title: Start a new career! + links: + - text: Blogging + url: "#" + title: Why not start a blog? + - text: Social media + url: "#" + title: Learn how to leverage Social media and make it work for your business + - text: Make money + url: "#" + title: Everyone likes to be paid! + - text: Marketing + url: "#" + title: No business will survive without customers...Here's how to get'em! + - text: Shop + title: Buy cool stuff! + links: + - text: Vectors + url: "#" + title: buy vectors + - text: Textures + url: "#" + title: buy textures + - text: UI kits + url: "#" + title: buy UI kits + - text: PSDs + url: "#" + title: Ready-made PSD's + - text: Community + title: The latest news about the people you care about! + links: + - text: Your corner + url: "#" + title: Tell us how you feel! + - text: Questions + url: "#" + title: Feel like answering some questions? + - text: Members + url: "#" + title: Say hi to new members + - text: trending + url: "#" + title: Catch up with the latest trending topics! + - text: World + title: Check out what's happening + links: + - text: Politics + url: "#" + title: Stay up to date + - text: Education + url: "#" + title: The latest research + - text: Automotive + url: "#" + title: We cover the latest models! + - text: Sports + url: "#" + title: The latest scores + - text: Tech + url: "#" + title: Never miss a new gadget + schema: + name: link section + identifier: text + properties: + text: + type: string + required: true + validations: + min: 1 + max: 1000 + title: + type: string + required: true + validations: + min: 1 + max: 1000 + links: + type: objects + schema: + name: link + identifier: text + properties: + text: + type: string + required: true + validations: + min: 1 + max: 1000 + url: + type: string + required: true + validations: + min: 1 + max: 2048 + target: + type: enum + default: _blank + choices: + - _blank + - _self + - _parent + - _top + title: + type: string + required: true + validations: + min: 1 + max: 1000 + referrer_policy: + type: enum + default: no-referrer-when-downgrade + choices: + - no-referrer + - no-referrer-when-downgrade + - origin + - origin-when-cross-origin + - unsafe-url + small_links: type: list list_type: simple default: "Privacy, #, self|Terms of service, #, self| About, #, self" + social_links: type: list list_type: simple default: "Facebook, Join us on Facebook, #, blank,fab-facebook|Twitter, show some love on Twitter, #, blank,fab-twitter| Youtube, Check out our latest videos on Youtube, #, blank,fab-youtube" + show_footer_on_login_required_page: default: true + svg_icons: default: "fab-facebook|fab-twitter|fab-youtube" type: "list" diff --git a/spec/system/footer_spec.rb b/spec/system/footer_spec.rb index 60054b2..4ace3e0 100644 --- a/spec/system/footer_spec.rb +++ b/spec/system/footer_spec.rb @@ -4,11 +4,46 @@ let!(:theme) { upload_theme_component } it "should display the footer" do - theme.update_setting(:link_sections, "Section 1, Section 1 title|Section 2, Section 2 title") theme.update_setting( - :links, - "Section 1, Section 1 Link, http://some.url.com/section1/link1, blank, Section 1 Link Title|Section 1, Section 1 Link 2, http://some.url.com/section1/link2, blank, Section 1 Link 2 Title|Section 2, Section 2 Link, http://some.url.com/section2/link1, blank, Section 2 Link Title|Section 2, Section 2 Link 2, http://some.url.com/section2/link2, blank, Section 2 Link 2 Title", + :sections, + [ + { + name: "Section 1", + title: "Section 1 title", + links: [ + { + name: "Section 1 Link", + url: "http://some.url.com/section1/link1", + title: "Section 1 Link Title", + referrer_policy: "origin", + }, + { + name: "Section 1 Link 2", + url: "http://some.url.com/section1/link2", + target: "_self", + title: "Section 1 Link 2 Title", + }, + ], + }, + { + name: "Section 2", + title: "Section 2 title", + links: [ + { + name: "Section 2 Link", + url: "http://some.url.com/section2/link1", + title: "Section 2 Link Title", + }, + { + name: "Section 2 Link 2", + url: "http://some.url.com/section2/link2", + title: "Section 2 Link 2 Title", + }, + ], + }, + ], ) + theme.save! visit("/") @@ -20,17 +55,14 @@ within(".below-footer-outlet .links .list[data-easyfooter-section='section-1']") do expect(page).to have_css("span[title='Section 1 title']", text: "Section 1") - expect(page).to have_link( - "Section 1 Link", - href: "http://some.url.com/section1/link1", - target: "_blank", - title: "Section 1 Link Title", + expect(page).to have_selector( + "a[href='http://some.url.com/section1/link1'][title='Section 1 Link Title'][referrerpolicy='origin']", ) expect(page).to have_link( "Section 1 Link 2", href: "http://some.url.com/section1/link2", - target: "_blank", + target: "_self", title: "Section 1 Link 2 Title", ) end @@ -41,14 +73,12 @@ expect(page).to have_link( "Section 2 Link", href: "http://some.url.com/section2/link1", - target: "_blank", title: "Section 2 Link Title", ) expect(page).to have_link( "Section 2 Link 2", href: "http://some.url.com/section2/link2", - target: "_blank", title: "Section 2 Link 2 Title", ) end diff --git a/test/unit/migrations/settings/0002-migrate-settings-test.js b/test/unit/migrations/settings/0002-migrate-settings-test.js new file mode 100644 index 0000000..21daf5b --- /dev/null +++ b/test/unit/migrations/settings/0002-migrate-settings-test.js @@ -0,0 +1,230 @@ +import { module, test } from "qunit"; +import migrate from "../../../../migrations/settings/0002-migrate-settings"; + +module("Unit | Migrations | Settings | 0002-migrate-settings", function () { + test("migrate links with valid target attribute", async function (assert) { + const settings = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: + "Section Name, Link 1, #, blank, Link 1 Title|Section Name, Link 2, #, self, Link 2 Title", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: + "Section Name, Link 1, #, blank, Link 1 Title|Section Name, Link 2, #, self, Link 2 Title", + sections: [ + { + name: "Section Name", + title: "Section Title", + links: [ + { + name: "Link 1", + url: "#", + target: "_blank", + title: "Link 1 Title", + }, + { + name: "Link 2", + url: "#", + target: "_self", + title: "Link 2 Title", + }, + ], + }, + ], + }) + ); + + assert.deepEqual(result, expectedResult); + }); + + test("migrate links with invalid target attribute", async function (assert) { + const settings = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: "Section Name, Link 1, #, invalid_target, Link Title", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: "Section Name, Link 1, #, invalid_target, Link Title", + sections: [ + { + name: "Section Name", + title: "Section Title", + links: [ + { + name: "Link 1", + url: "#", + title: "Link Title", + }, + ], + }, + ], + }) + ); + + assert.deepEqual(result, expectedResult); + }); + + test("migrate links with valid referrerpolicy attribute", async function (assert) { + const settings = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: "Section Name, Link 1, #, blank, Link Title, no-referrer", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: "Section Name, Link 1, #, blank, Link Title, no-referrer", + sections: [ + { + name: "Section Name", + title: "Section Title", + links: [ + { + name: "Link 1", + url: "#", + target: "_blank", + title: "Link Title", + referrer_policy: "no-referrer", + }, + ], + }, + ], + }) + ); + + assert.deepEqual(result, expectedResult); + }); + + test("migrate links with invalid referrerpolicy attribute", async function (assert) { + const settings = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: + "Section Name, Link 1, #, blank, Link Title, invalid_referrerpolicy", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + link_sections: "Section Name, Section Title", + links: + "Section Name, Link 1, #, blank, Link Title, invalid_referrerpolicy", + sections: [ + { + name: "Section Name", + title: "Section Title", + links: [ + { + name: "Link 1", + url: "#", + target: "_blank", + title: "Link Title", + }, + ], + }, + ], + }) + ); + + assert.deepEqual(result, expectedResult); + }); + + test("migrate", function (assert) { + const settings = new Map( + Object.entries({ + link_sections: "Design, Get inspired!|Code, Learn new things!", + links: + "Design, Design process, #, blank, Learn the basics|Design, Blog design, #, self, What makes for a great blog?|Design, Photoshop tutorials, #, invalid_target, Photoshop for beginners|Design, Design trends, #, blank, Stay on top of the current trends!|Code, Wordpress, #, blank, Wordpress code examples|Code, Tools, #, blank, Tools that will make your life easier!|Code, Tutorials, #, blank, Just starting out? We'll guide you through the basics", + }) + ); + + const result = migrate(settings); + + const expectedResult = new Map( + Object.entries({ + link_sections: "Design, Get inspired!|Code, Learn new things!", + links: + "Design, Design process, #, blank, Learn the basics|Design, Blog design, #, self, What makes for a great blog?|Design, Photoshop tutorials, #, invalid_target, Photoshop for beginners|Design, Design trends, #, blank, Stay on top of the current trends!|Code, Wordpress, #, blank, Wordpress code examples|Code, Tools, #, blank, Tools that will make your life easier!|Code, Tutorials, #, blank, Just starting out? We'll guide you through the basics", + sections: [ + { + name: "Design", + title: "Get inspired!", + links: [ + { + name: "Design process", + url: "#", + target: "_blank", + title: "Learn the basics", + }, + { + name: "Blog design", + url: "#", + target: "_self", + title: "What makes for a great blog?", + }, + { + name: "Photoshop tutorials", + url: "#", + title: "Photoshop for beginners", + }, + { + name: "Design trends", + url: "#", + target: "_blank", + title: "Stay on top of the current trends!", + }, + ], + }, + { + name: "Code", + title: "Learn new things!", + links: [ + { + name: "Wordpress", + url: "#", + target: "_blank", + title: "Wordpress code examples", + }, + { + name: "Tools", + url: "#", + target: "_blank", + title: "Tools that will make your life easier!", + }, + { + name: "Tutorials", + url: "#", + target: "_blank", + title: "Just starting out? We'll guide you through the basics", + }, + ], + }, + ], + }) + ); + + assert.deepEqual( + Object.fromEntries(result.entries()), + Object.fromEntries(expectedResult.entries()) + ); + }); +});