From e3f1e0e9bcf89d960cc13cfa1bc56f60a89055a3 Mon Sep 17 00:00:00 2001 From: Martin Brennan Date: Wed, 5 Oct 2022 13:57:52 +1000 Subject: [PATCH] DEV: Add displaySection to sidebar sections (#18479) This PR renames the old Sidebar::Section displaySection function to displaySectionContent, and changes the meaning of displaySection to hide the entire sidebar section including the header. This is implemented via an arg passed to Sidebar::Section, which will default to true if it is not passed, and the BaseCustomSidebarSection class implements a default of `return true` for this function. --- .../app/components/sidebar/section.hbs | 74 ++++++++++--------- .../app/components/sidebar/section.js | 20 +++-- .../app/components/sidebar/user/sections.hbs | 3 +- .../sidebar/base-custom-sidebar-section.js | 7 ++ .../acceptance/sidebar-plugin-api-test.js | 45 +++++++++++ .../components/sidebar/section-test.js | 73 ++++++++++++++++++ 6 files changed, 179 insertions(+), 43 deletions(-) create mode 100644 app/assets/javascripts/discourse/tests/integration/components/sidebar/section-test.js diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs index 1a2381edb83..de74d2ccdfc 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs @@ -1,42 +1,44 @@ -
-
- - {{#if @collapsable}} - - {{d-icon this.headerCaretIcon}} +{{#if this.displaySection}} +
+
+ + {{#if @collapsable}} + + {{d-icon this.headerCaretIcon}} + + {{/if}} + + + {{@headerLinkText}} + + + {{#if this.isSingleHeaderAction}} + {{#each @headerActions as |headerAction|}} + + {{/each}} {{/if}} - - {{@headerLinkText}} - - + {{#if this.isMultipleHeaderActions}} + + {{/if}} +
- {{#if this.isSingleHeaderAction}} - {{#each @headerActions as |headerAction|}} - - {{/each}} - {{/if}} - - {{#if this.isMultipleHeaderActions}} - + {{#if this.displaySectionContent}} +
+ {{yield}} +
{{/if}}
- - {{#if this.displaySection}} -
- {{yield}} -
- {{/if}} -
+{{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.js b/app/assets/javascripts/discourse/app/components/sidebar/section.js index 7b348f64e44..ea11c34d952 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.js @@ -7,20 +7,20 @@ import { tracked } from "@glimmer/tracking"; export default class SidebarSection extends Component { @service keyValueStore; - @tracked displaySection; + @tracked displaySectionContent; collapsedSidebarSectionKey = `sidebar-section-${this.args.sectionName}-collapsed`; constructor() { super(...arguments); if (this.args.collapsable) { - this.displaySection = + this.displaySectionContent = this.keyValueStore.getItem(this.collapsedSidebarSectionKey) === undefined ? true : false; } else { - this.displaySection = true; + this.displaySectionContent = true; } } @@ -32,9 +32,9 @@ export default class SidebarSection extends Component { @action toggleSectionDisplay() { - this.displaySection = !this.displaySection; + this.displaySectionContent = !this.displaySectionContent; - if (this.displaySection) { + if (this.displaySectionContent) { this.keyValueStore.remove(this.collapsedSidebarSectionKey); } else { this.keyValueStore.setItem(this.collapsedSidebarSectionKey, true); @@ -54,7 +54,7 @@ export default class SidebarSection extends Component { } get headerCaretIcon() { - return this.displaySection ? "angle-down" : "angle-right"; + return this.displaySectionContent ? "angle-down" : "angle-right"; } get isSingleHeaderAction() { @@ -64,4 +64,12 @@ export default class SidebarSection extends Component { get isMultipleHeaderActions() { return this.args.headerActions?.length > 1; } + + get displaySection() { + if (this.args.displaySection === undefined) { + return true; + } + + return this.args.displaySection; + } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs index a5987ba0d94..518875cb933 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs @@ -18,7 +18,8 @@ @headerActionsIcon={{customSection.actionsIcon}} @headerActions={{customSection.actions}} @willDestroy={{customSection.willDestroy}} - @collapsable={{@collapsableSections}}> + @collapsable={{@collapsableSections}} + @displaySection={{customSection.displaySection}}> {{#each customSection.links as |link|}} { + api.addSidebarSection((BaseCustomSidebarSection) => { + return class extends BaseCustomSidebarSection { + get name() { + return "test-chat-channels"; + } + + get text() { + return "chat channels text"; + } + + get actionsIcon() { + return "cog"; + } + + get actions() { + return [ + { + id: "browseChannels", + title: "Browse channels", + action: () => {}, + }, + ]; + } + + get links() { + return []; + } + + get displaySection() { + return false; + } + }; + }); + }); + + await visit("/"); + + assert.notOk( + exists(".sidebar-section-test-chat-channels"), + "does not display the section" + ); + }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-test.js b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-test.js new file mode 100644 index 00000000000..76b734e6e3a --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-test.js @@ -0,0 +1,73 @@ +import { module, test } from "qunit"; +import { hbs } from "ember-cli-htmlbars"; +import { click, render } from "@ember/test-helpers"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import { exists } from "discourse/tests/helpers/qunit-helpers"; + +module("Integration | Component | sidebar | section", function (hooks) { + setupRenderingTest(hooks); + + test("default displaySection value for section", async function (assert) { + const template = hbs` + `; + + this.headerActions = []; + await render(template); + + assert.ok( + exists(".sidebar-section-wrapper"), + "section is displayed by default if no display arg is provided" + ); + }); + + test("displaySection is dynamic based on argument", async function (assert) { + const template = hbs` + `; + + this.displaySection = false; + this.headerActions = []; + await render(template); + + assert.notOk( + exists(".sidebar-section-wrapper"), + "section is not displayed" + ); + + this.set("displaySection", true); + assert.ok(exists(".sidebar-section-wrapper"), "section is displayed"); + }); + + test("can expand and collapse content when section is collapsible", async function (assert) { + const template = hbs` + `; + + this.headerActions = []; + await render(template); + + assert.ok(exists(".sidebar-section-content"), "shows content by default"); + + await click(".sidebar-section-header-caret"); + + assert.notOk( + exists(".sidebar-section-content"), + "does not show content after collapsing" + ); + }); +});