From ab053ac66948e7c8e0a68ed01ca0ac435687b7e5 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Tue, 11 Jul 2023 09:40:37 +0800 Subject: [PATCH] UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar. --- .../components/modal/sidebar-section-form.hbs | 50 ++++--- .../components/modal/sidebar-section-form.js | 19 ++- .../sidebar/common/custom-section.hbs | 18 ++- .../sidebar/common/custom-section.js | 16 +- .../components/sidebar/more-section-links.hbs | 14 +- .../components/sidebar/more-section-links.js | 6 +- .../sidebar/section-link-button.hbs | 15 ++ .../app/components/sidebar/section.hbs | 93 ++++++------ .../community-section/section.js} | 70 +-------- .../discourse/app/lib/sidebar/section-link.js | 8 + .../discourse/app/lib/sidebar/section.js | 3 +- .../user/community-section/admin-section.js | 30 ++++ .../discourse/app/services/navigation-menu.js | 13 ++ .../discourse/app/widgets/header.js | 1 + .../sidebar-user-community-section-test.js | 66 --------- .../tests/acceptance/sidebar-user-test.js | 4 +- .../base/sidebar-more-section-links.scss | 16 ++ .../common/base/sidebar-section-link.scss | 23 ++- .../stylesheets/common/base/sidebar.scss | 13 +- config/locales/client.en.yml | 6 +- .../chat/spec/system/deleted_message_spec.rb | 2 +- plugins/chat/spec/system/navigation_spec.rb | 2 +- .../system/sidebar_navigation_menu_spec.rb | 2 +- spec/system/custom_sidebar_sections_spec.rb | 64 +++----- ...ting_sidebar_categories_navigation_spec.rb | 2 +- .../editing_sidebar_community_section_spec.rb | 67 +++++++++ .../editing_sidebar_tags_navigation_spec.rb | 2 +- .../components/navigation_menu/base.rb | 129 ++++++++++++++++ .../navigation_menu/header_dropdown.rb | 25 ++++ .../components/navigation_menu/sidebar.rb | 45 ++++++ .../system/page_objects/components/sidebar.rb | 138 ------------------ .../components/sidebar_header_dropdown.rb | 4 +- .../modals/sidebar_section_form.rb | 8 + .../viewing_sidebar_as_anonymous_user_spec.rb | 2 +- spec/system/viewing_sidebar_mobile_spec.rb | 3 +- spec/system/viewing_sidebar_spec.rb | 14 +- 36 files changed, 561 insertions(+), 432 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs rename app/assets/javascripts/discourse/app/lib/sidebar/{community-section.js => common/community-section/section.js} (69%) create mode 100644 app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section.js create mode 100644 app/assets/javascripts/discourse/app/services/navigation-menu.js create mode 100644 spec/system/editing_sidebar_community_section_spec.rb create mode 100644 spec/system/page_objects/components/navigation_menu/base.rb create mode 100644 spec/system/page_objects/components/navigation_menu/header_dropdown.rb create mode 100644 spec/system/page_objects/components/navigation_menu/sidebar.rb delete mode 100644 spec/system/page_objects/components/sidebar.rb diff --git a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs index 5429f6b6ab0..a64b2faf18f 100644 --- a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs +++ b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs @@ -6,38 +6,46 @@ class="sidebar-section-form-modal" > <:body> -
-
- - - {{#if this.transformedModel.invalidTitleMessage}} -
- {{this.transformedModel.invalidTitleMessage}} -
- {{/if}} -
+ + {{#unless this.transformedModel.hideTitleInput}} +
+ + + + + {{#if this.transformedModel.invalidTitleMessage}} +
+ {{this.transformedModel.invalidTitleMessage}} +
+ {{/if}} +
+ {{/unless}} +
+
+
+ {{#each this.activeLinks as |link|}} { + title: section.title, + publicSection: section.public, + sectionType: section.section_type, + links: section.links.reduce((acc, link) => { if (link.segment === "primary") { this.nextObjectId++; acc.push(this.initLink(link)); } return acc; }, A()), - secondaryLinks: this.model.links.reduce((acc, link) => { + secondaryLinks: section.links.reduce((acc, link) => { if (link.segment === "secondary") { this.nextObjectId++; acc.push(this.initLink(link)); } return acc; }, A()), - id: this.model.id, + id: section.id, + hideTitleInput: this.model.hideSectionHeader, }); } else { return new Section({ diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs index cde9643f48f..30e36c03454 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs @@ -6,6 +6,7 @@ @headerActions={{this.section.headerActions}} @headerActionsIcon={{this.section.headerActionIcon}} @class={{this.section.dragCss}} + @hideSectionHeader={{this.section.hideSectionHeader}} > {{#each this.section.links as |link|}} {{#if link.externalOrFullReload}} @@ -61,12 +62,25 @@ {{/each}} {{#if this.section.moreLinks}} - {{#if this.isDesktopDropdownMode}} + {{#if this.navigationMenu.isDesktopDropdownMode}} {{#each this.section.moreLinks as |sectionLink|}} {{/each}} + + {{#if this.section.moreSectionButtonAction}} + + {{/if}} {{else if this.section.moreLinks}} - + {{/if}} {{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.js b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.js index ca165f5db9b..2bf3946b865 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.js @@ -4,9 +4,12 @@ import { tracked } from "@glimmer/tracking"; import { inject as service } from "@ember/service"; import Section from "discourse/lib/sidebar/section"; -import CommunitySection from "discourse/lib/sidebar/community-section"; +import AdminCommunitySection from "discourse/lib/sidebar/user/community-section/admin-section"; +import CommonCommunitySection from "discourse/lib/sidebar/common/community-section/section"; export default class SidebarCustomSection extends Component { + @service currentUser; + @service navigationMenu; @service site; @service siteSettings; @@ -22,19 +25,14 @@ export default class SidebarCustomSection extends Component { super.willDestroy(); } - get isDesktopDropdownMode() { - const headerDropdownMode = - this.siteSettings.navigation_menu === "header dropdown"; - - return !this.site.mobileView && headerDropdownMode; - } - #initializeSection() { let sectionClass = Section; switch (this.args.sectionData.section_type) { case "community": - sectionClass = CommunitySection; + sectionClass = this.currentUser?.admin + ? AdminCommunitySection + : CommonCommunitySection; break; } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs index b0f3c1b83db..bcb99107116 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs @@ -20,11 +20,21 @@ >
-
+
    {{#each this.sectionLinks as |sectionLink|}} {{/each}} -
+ + + {{#if @moreButtonAction}} +
+ +
+ {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js index 285288df52f..72e2f415abf 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js @@ -48,9 +48,9 @@ export default class SidebarMoreSectionLinks extends Component { @bind closeDetails(event) { if (this.open) { - const isLinkClick = event.target.className.includes( - "sidebar-section-link" - ); + const isLinkClick = + event.target.className.includes("sidebar-section-link") || + event.target.className.includes("sidebar-section-link-button"); if (isLinkClick || this.#isOutsideDetailsClick(event)) { this.open = false; diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs new file mode 100644 index 00000000000..852bcc1d381 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-button.hbs @@ -0,0 +1,15 @@ +
+ +
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs index e8cc64fc055..5ec274885a1 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs @@ -3,54 +3,59 @@ class={{concat-class "sidebar-section-wrapper sidebar-section" @class}} data-section-name={{@sectionName}} > -
- - {{#if @collapsable}} - - {{d-icon this.headerCaretIcon}} + {{#unless @hideSectionHeader}} +
+ + {{#if @collapsable}} + + {{d-icon this.headerCaretIcon}} + + {{/if}} + + + {{@headerLinkText}} + {{#if @indicatePublic}} + + {{d-icon "globe"}} + {{d-icon "shield-alt"}} + {{i18n "sidebar.sections.global_section"}} + + + {{/if}} + + + {{#if this.isSingleHeaderAction}} + {{#each @headerActions as |headerAction|}} + + {{/each}} {{/if}} - - {{@headerLinkText}} - - {{#if @indicatePublic}} - - {{d-icon "globe"}} - {{d-icon "shield-alt"}} - {{i18n "sidebar.sections.global_section"}} - - + {{#if this.isMultipleHeaderActions}} + {{/if}} - - - {{#if this.isSingleHeaderAction}} - {{#each @headerActions as |headerAction|}} - - {{/each}} - {{/if}} - - {{#if this.isMultipleHeaderActions}} - - {{/if}} -
+
+ {{/unless}} {{#if this.displaySectionContent}}
    diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/section.js similarity index 69% rename from app/assets/javascripts/discourse/app/lib/sidebar/community-section.js rename to app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/section.js index eb64cc33cd3..e1cc4492016 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/common/community-section/section.js @@ -1,12 +1,8 @@ -import I18n from "I18n"; import SectionLink from "discourse/lib/sidebar/section-link"; -import Composer from "discourse/models/composer"; -import { getOwner, setOwner } from "@ember/application"; +import { setOwner } from "@ember/application"; import { inject as service } from "@ember/service"; import { tracked } from "@glimmer/tracking"; -import { action } from "@ember/object"; -import { next } from "@ember/runloop"; -import PermissionType from "discourse/models/permission-type"; + import EverythingSectionLink from "discourse/lib/sidebar/common/community-section/everything-section-link"; import MyPostsSectionLink from "discourse/lib/sidebar/user/community-section/my-posts-section-link"; import AdminSectionLink from "discourse/lib/sidebar/user/community-section/admin-section-link"; @@ -20,7 +16,6 @@ import { customSectionLinks, secondaryCustomSectionLinks, } from "discourse/lib/sidebar/custom-community-section-links"; -import SidebarSectionForm from "discourse/components/modal/sidebar-section-form"; const SPECIAL_LINKS_MAP = { "/latest": EverythingSectionLink, @@ -46,6 +41,7 @@ export default class CommunitySection { @tracked moreLinks; reorderable = false; + hideSectionHeader = true; constructor({ section, owner }) { setOwner(this, owner); @@ -137,64 +133,4 @@ export default class CommunitySection { overridenIcon, }); } - - get decoratedTitle() { - return I18n.t( - `sidebar.sections.${this.section.title.toLowerCase()}.header_link_text`, - { defaultValue: this.section.title } - ); - } - - get headerActions() { - if (this.currentUser?.admin) { - return [ - { - action: this.editSection, - title: I18n.t( - "sidebar.sections.community.header_action_edit_section_title" - ), - }, - ]; - } - if (this.currentUser) { - return [ - { - action: this.composeTopic, - title: I18n.t( - "sidebar.sections.community.header_action_create_topic_title" - ), - }, - ]; - } - } - - get headerActionIcon() { - return this.currentUser?.admin ? "pencil-alt" : "plus"; - } - - @action - editSection() { - return this.modal.show(SidebarSectionForm, { - model: this.section, - }); - } - - @action - composeTopic() { - const composerArgs = { - action: Composer.CREATE_TOPIC, - draftKey: Composer.NEW_TOPIC_KEY, - }; - - const controller = getOwner(this).lookup("controller:navigation/category"); - const category = controller.category; - - if (category && category.permission === PermissionType.FULL) { - composerArgs.categoryId = category.id; - } - - next(() => { - getOwner(this).lookup("controller:composer").open(composerArgs); - }); - } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/section-link.js index f08aff2fab0..89dcfd20267 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/section-link.js @@ -45,6 +45,7 @@ export default class SectionLink { if (event.button === 0 || event.targetTouches) { this.startMouseY = this.#calcMouseY(event); this.willDrag = true; + discourseLater( () => { this.delayedStart(event); @@ -53,9 +54,11 @@ export default class SectionLink { ); } } + delayedStart(event) { if (this.willDrag) { const currentMouseY = this.#calcMouseY(event); + if (currentMouseY === this.startMouseY) { event.stopPropagation(); event.preventDefault(); @@ -80,24 +83,29 @@ export default class SectionLink { @bind dragMove(event) { this.startMouseY = this.#calcMouseY(event); + if (!this.drag) { return; } + event.stopPropagation(); event.preventDefault(); const currentMouseY = this.#calcMouseY(event); const distance = currentMouseY - this.mouseY; + if (!this.linkHeight) { this.linkHeight = document.getElementsByClassName( "sidebar-section-link-wrapper" )[0].clientHeight; } + if (distance >= this.linkHeight) { if (this.section.links.indexOf(this) !== this.section.links.length - 1) { this.section.moveLinkDown(this); this.mouseY = currentMouseY; } } + if (distance <= -this.linkHeight) { if (this.section.links.indexOf(this) !== 0) { this.section.moveLinkUp(this); diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/section.js b/app/assets/javascripts/discourse/app/lib/sidebar/section.js index 15a36dc4868..3e89414c18b 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/section.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/section.js @@ -42,7 +42,7 @@ export default class Section { { action: () => { return this.modal.show(SidebarSectionForm, { - model: this.section, + model: this, }); }, title: I18n.t("sidebar.sections.custom.edit"), @@ -78,6 +78,7 @@ export default class Section { this.links = this.links.removeObject(link); this.links.splice(position, 0, link); } + @bind reorder() { return ajax(`/sidebar_sections/reorder`, { diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section.js new file mode 100644 index 00000000000..f27266ae652 --- /dev/null +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/admin-section.js @@ -0,0 +1,30 @@ +import I18n from "I18n"; +import { action } from "@ember/object"; +import { inject as service } from "@ember/service"; + +import CommonCommunitySection from "discourse/lib/sidebar/common/community-section/section"; +import SidebarSectionForm from "discourse/components/modal/sidebar-section-form"; + +export default class extends CommonCommunitySection { + @service modal; + @service navigationMenu; + + @action + moreSectionButtonAction() { + return this.modal.show(SidebarSectionForm, { model: this }); + } + + get moreSectionButtonText() { + return I18n.t( + `sidebar.sections.community.edit_section.${ + this.navigationMenu.isDesktopDropdownMode + ? "header_dropdown" + : "sidebar" + }` + ); + } + + get moreSectionButtonIcon() { + return "pencil-alt"; + } +} diff --git a/app/assets/javascripts/discourse/app/services/navigation-menu.js b/app/assets/javascripts/discourse/app/services/navigation-menu.js new file mode 100644 index 00000000000..848356bf075 --- /dev/null +++ b/app/assets/javascripts/discourse/app/services/navigation-menu.js @@ -0,0 +1,13 @@ +import Service, { inject as service } from "@ember/service"; + +export default class NavigationMenu extends Service { + @service site; + @service siteSettings; + + get isDesktopDropdownMode() { + const headerDropdownMode = + this.siteSettings.navigation_menu === "header dropdown"; + + return !this.site.mobileView && headerDropdownMode; + } +} diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js index e07b2724fd8..d1e0ca41d47 100644 --- a/app/assets/javascripts/discourse/app/widgets/header.js +++ b/app/assets/javascripts/discourse/app/widgets/header.js @@ -386,6 +386,7 @@ createWidget("revamped-hamburger-menu-wrapper", { click(event) { if ( event.target.closest(".sidebar-section-header-button") || + event.target.closest(".sidebar-section-link-button") || event.target.closest(".sidebar-section-link") ) { this.sendWidgetAction("toggleHamburger"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js index 6c34905b864..cab4af31383 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js @@ -46,72 +46,6 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) { }); }); - test("clicking on section header button", async function (assert) { - await visit("/"); - - await click( - ".sidebar-section[data-section-name='community'] .sidebar-section-header-button" - ); - - assert.ok(exists("#reply-control"), "it opens the composer"); - }); - - test("clicking on section header button while viewing a category", async function (assert) { - await visit("/c/bug"); - await click( - ".sidebar-section[data-section-name='community'] .sidebar-section-header-button" - ); - - assert.ok(exists("#reply-control"), "it opens the composer"); - - assert.strictEqual( - query(".category-input .selected-name .category-name").textContent, - "bug", - "the current category is prefilled in the composer input" - ); - }); - - test("clicking on section header link", async function (assert) { - await visit("/t/280"); - - assert.ok( - exists( - ".sidebar-section[data-section-name='community'] .sidebar-section-content" - ), - "shows content section" - ); - - assert.strictEqual( - query( - ".sidebar-section[data-section-name='community'] .sidebar-section-header" - ).title, - I18n.t("sidebar.toggle_section"), - "caret has the right title" - ); - - await click( - ".sidebar-section[data-section-name='community'] .sidebar-section-header" - ); - - assert.notOk( - exists( - ".sidebar-section[data-section-name='community'] .sidebar-section-content" - ), - "hides the content of the section" - ); - - await click( - ".sidebar-section[data-section-name='community'] .sidebar-section-header" - ); - - assert.ok( - exists( - ".sidebar-section[data-section-name='community'] .sidebar-section-content" - ), - "shows content section" - ); - }); - test("clicking on more... link", async function (assert) { await visit("/"); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js index d5899b87d21..b92fb0e1c3e 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js @@ -208,7 +208,7 @@ acceptance( assert.ok( exists( - ".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-community']" + ".sidebar-section[data-section-name='categories'] .sidebar-section-header[aria-expanded='true'][aria-controls='sidebar-section-content-categories']" ), "accessibility attributes are set correctly on sidebar section header when section is expanded" ); @@ -217,7 +217,7 @@ acceptance( assert.ok( exists( - ".sidebar-section[data-section-name='community'] .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-community']" + ".sidebar-section[data-section-name='categories'] .sidebar-section-header[aria-expanded='false'][aria-controls='sidebar-section-content-categories']" ), "accessibility attributes are set correctly on sidebar section header when section is collapsed" ); diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 1bfab6cde1e..83bf798e758 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -7,6 +7,7 @@ color: var(--d-sidebar-highlight-color); } } + height: var(--d-sidebar-row-height); color: var(--d-sidebar-link-color); display: flex; @@ -23,6 +24,7 @@ font-size: var(--font-down-1); } } + .sidebar-more-section-links-details-content { background-color: var(--d-sidebar-background); transition: background-color 0.25s; @@ -34,14 +36,28 @@ padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3); } } + .sidebar-more-section-links-details-content-main { position: sticky; + margin: 0; } + +.sidebar-more-section-links-details-content-footer { + border-top: 2px solid var(--primary-low); + display: flex; + width: 100%; + + .sidebar-section-link-wrapper { + width: 100%; + } +} + .sidebar-more-section-links-details-content-wrapper { position: absolute; width: 100%; z-index: z("modal", "content") + 1; } + .sidebar-more-section-links-details { position: relative; } diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index c35fb1b4753..3dd4fd76d6d 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -1,6 +1,7 @@ :root { --d-sidebar-section-link-prefix-margin-right: 0.35rem; --d-sidebar-section-link-prefix-width: 1.35rem; + --d-sidebar-section-link-icon-size: 0.8em; } .sidebar-section-link-wrapper { @@ -81,6 +82,26 @@ } } + .sidebar-section-link-button { + color: var(--d-sidebar-link-color); + background-color: var(--secondary); + width: 100%; + justify-content: flex-start; + + &:hover { + color: var(--d-sidebar-link-color); + background-color: var(--primary-low); + + .d-icon { + color: var(--d-sidebar-link-icon-color); + } + } + + .d-icon { + color: var(--d-sidebar-link-icon-color); + } + } + .sidebar-section-link[data-link-name="personal-messages-sent"], .sidebar-section-link[data-link-name="personal-messages-new"], .sidebar-section-link[data-link-name="personal-messages-archive"], @@ -130,7 +151,7 @@ color: var(--d-sidebar-link-icon-color); svg { - font-size: 0.8em; + font-size: var(--d-sidebar-section-link-icon-size); } .prefix-badge { diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index eb5cf4cf94c..08feb05cb8d 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -128,6 +128,7 @@ } } } + .sidebar-section-form-modal { .draggable { display: flex; @@ -162,6 +163,15 @@ .value.warning { position: absolute; } + + .sidebar-section-form__input-wrapper { + margin-bottom: 1em; + + input { + width: 100%; + } + } + .row-wrapper { display: grid; grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em; @@ -172,9 +182,10 @@ border-top: 2px solid transparent; border-bottom: 2px solid transparent; margin-bottom: -2px; + &.header { padding-bottom: 0; - padding-top: 1em; + label { margin-bottom: 0; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 3e24ad8bbf0..dc1ccaf2328 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4473,9 +4473,9 @@ en: header_action_title: "Edit your sidebar categories" configure_defaults: "Configure defaults" community: - header_link_text: "Community" - header_action_create_topic_title: "Create a topic" - header_action_edit_section_title: "Edit Community section" + edit_section: + sidebar: "Customize this section" + header_dropdown: "Customize" links: about: content: "About" diff --git a/plugins/chat/spec/system/deleted_message_spec.rb b/plugins/chat/spec/system/deleted_message_spec.rb index 8ffc7bb152e..da52c50694e 100644 --- a/plugins/chat/spec/system/deleted_message_spec.rb +++ b/plugins/chat/spec/system/deleted_message_spec.rb @@ -3,7 +3,7 @@ RSpec.describe "Deleted message", type: :system do let(:chat_page) { PageObjects::Pages::Chat.new } let(:channel_page) { PageObjects::Pages::ChatChannel.new } - let(:sidebar_component) { PageObjects::Components::Sidebar.new } + let(:sidebar_component) { PageObjects::Components::NavigationMenu::Sidebar.new } fab!(:current_user) { Fabricate(:admin) } fab!(:channel_1) { Fabricate(:category_channel) } diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb index 4e318044c94..feee261917d 100644 --- a/plugins/chat/spec/system/navigation_spec.rb +++ b/plugins/chat/spec/system/navigation_spec.rb @@ -14,7 +14,7 @@ RSpec.describe "Navigation", type: :system do let(:channel_page) { PageObjects::Pages::ChatChannel.new } let(:side_panel_page) { PageObjects::Pages::ChatSidePanel.new } let(:sidebar_page) { PageObjects::Pages::Sidebar.new } - let(:sidebar_component) { PageObjects::Components::Sidebar.new } + let(:sidebar_component) { PageObjects::Components::NavigationMenu::Sidebar.new } let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new } before do diff --git a/plugins/chat/spec/system/sidebar_navigation_menu_spec.rb b/plugins/chat/spec/system/sidebar_navigation_menu_spec.rb index 45da1efd4c4..a6cb8329d8e 100644 --- a/plugins/chat/spec/system/sidebar_navigation_menu_spec.rb +++ b/plugins/chat/spec/system/sidebar_navigation_menu_spec.rb @@ -2,7 +2,7 @@ RSpec.describe "Sidebar navigation menu", type: :system do let(:sidebar_page) { PageObjects::Pages::Sidebar.new } - let(:sidebar_component) { PageObjects::Components::Sidebar.new } + let(:sidebar_component) { PageObjects::Components::NavigationMenu::Sidebar.new } fab!(:current_user) { Fabricate(:user) } diff --git a/spec/system/custom_sidebar_sections_spec.rb b/spec/system/custom_sidebar_sections_spec.rb index c92eaea28bf..fc9ddf574dd 100644 --- a/spec/system/custom_sidebar_sections_spec.rb +++ b/spec/system/custom_sidebar_sections_spec.rb @@ -4,7 +4,7 @@ describe "Custom sidebar sections", type: :system do fab!(:user) { Fabricate(:user) } fab!(:admin) { Fabricate(:admin) } let(:section_modal) { PageObjects::Modals::SidebarSectionForm.new } - let(:sidebar) { PageObjects::Components::Sidebar.new } + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } before { user.user_option.update!(external_links_in_new_tab: true) } @@ -112,24 +112,36 @@ describe "Custom sidebar sections", type: :system do it "allows the user to reorder links in custom section" do sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user) - sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags") - Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url_1) - sidebar_url_2 = Fabricate(:sidebar_url, name: "Sidebar Categories", value: "/categories") - Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url_2) + + sidebar_url_1 = + Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags").tap do |sidebar_url| + Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url) + end + + sidebar_url_2 = + Fabricate(:sidebar_url, name: "Sidebar Categories", value: "/categories").tap do |sidebar_url| + Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url) + end + + sidebar_url_3 = + Fabricate(:sidebar_url, name: "Sidebar Latest", value: "/latest").tap do |sidebar_url| + Fabricate(:sidebar_section_link, sidebar_section: sidebar_section, linkable: sidebar_url) + end sign_in user + visit("/latest") expect(sidebar.primary_section_links("my-section")).to eq( - ["Sidebar Tags", "Sidebar Categories"], + ["Sidebar Tags", "Sidebar Categories", "Sidebar Latest"], ) tags_link = find(".sidebar-section-link[data-link-name='Sidebar Tags']") - categories_link = find(".sidebar-section-link[data-link-name='Sidebar Categories']") - tags_link.drag_to(categories_link, html5: true, delay: 0.4) + latest_link = find(".sidebar-section-link[data-link-name='Sidebar Latest']") + tags_link.drag_to(latest_link, html5: true, delay: 0.4) expect(sidebar.primary_section_links("my-section")).to eq( - ["Sidebar Categories", "Sidebar Tags"], + ["Sidebar Categories", "Sidebar Tags", "Sidebar Latest"], ) end @@ -199,40 +211,6 @@ describe "Custom sidebar sections", type: :system do expect(sidebar).to have_no_section("Edited public section") end - it "allows admin to edit community section and reset to default" do - sign_in admin - visit("/latest") - - expect(sidebar.primary_section_icons("community")).to eq( - %w[layer-group user flag wrench ellipsis-v], - ) - - sidebar.edit_custom_section("Community") - section_modal.fill_link("Topics", "/latest", "paper-plane") - section_modal.fill_name("Edited community section") - section_modal.topics_link.drag_to(section_modal.review_link, delay: 0.4) - section_modal.save - - expect(sidebar).to have_section("Edited community section") - expect(sidebar.primary_section_links("edited-community-section")).to eq( - ["My Posts", "Topics", "Review", "Admin", "More"], - ) - expect(sidebar.primary_section_icons("edited-community-section")).to eq( - %w[user paper-plane flag wrench ellipsis-v], - ) - - sidebar.edit_custom_section("Edited community section") - section_modal.reset - - expect(sidebar).to have_section("Community") - expect(sidebar.primary_section_links("community")).to eq( - ["Topics", "My Posts", "Review", "Admin", "More"], - ) - expect(sidebar.primary_section_icons("community")).to eq( - %w[layer-group user flag wrench ellipsis-v], - ) - end - it "shows anonymous public sections" do sidebar_section = Fabricate(:sidebar_section, title: "Public section", public: true) sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags") diff --git a/spec/system/editing_sidebar_categories_navigation_spec.rb b/spec/system/editing_sidebar_categories_navigation_spec.rb index ba3f5234cca..3f8f1b8e55e 100644 --- a/spec/system/editing_sidebar_categories_navigation_spec.rb +++ b/spec/system/editing_sidebar_categories_navigation_spec.rb @@ -19,7 +19,7 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do Fabricate(:category, parent_category_id: category.id, name: "category subcategory") end - let(:sidebar) { PageObjects::Components::Sidebar.new } + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } before { sign_in(user) } diff --git a/spec/system/editing_sidebar_community_section_spec.rb b/spec/system/editing_sidebar_community_section_spec.rb new file mode 100644 index 00000000000..9495aec6cd8 --- /dev/null +++ b/spec/system/editing_sidebar_community_section_spec.rb @@ -0,0 +1,67 @@ +# frozen_string_literal: true + +RSpec.describe "Editing Sidebar Community Section", type: :system do + fab!(:admin) { Fabricate(:admin) } + fab!(:user) { Fabricate(:user) } + + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } + let(:sidebar_header_dropdown) { PageObjects::Components::NavigationMenu::HeaderDropdown.new } + + it "should not display the edit section button to non admins" do + sign_in(user) + + visit("/latest") + + sidebar.click_community_section_more_button + + expect(sidebar).to have_no_customize_community_section_button + end + + it "allows admin to edit community section and reset to default" do + sign_in(admin) + + visit("/latest") + + expect(sidebar.primary_section_icons("community")).to eq( + %w[layer-group user flag wrench ellipsis-v], + ) + + modal = sidebar.click_community_section_more_button.click_customize_community_section_button + modal.fill_link("Topics", "/latest", "paper-plane") + modal.topics_link.drag_to(modal.review_link, delay: 0.4) + modal.save + + expect(sidebar.primary_section_links("community")).to eq( + ["My Posts", "Topics", "Review", "Admin", "More"], + ) + + expect(sidebar.primary_section_icons("community")).to eq( + %w[user paper-plane flag wrench ellipsis-v], + ) + + modal = sidebar.click_community_section_more_button.click_customize_community_section_button + modal.reset + + expect(sidebar).to have_section("Community") + + expect(sidebar.primary_section_links("community")).to eq( + ["Topics", "My Posts", "Review", "Admin", "More"], + ) + + expect(sidebar.primary_section_icons("community")).to eq( + %w[layer-group user flag wrench ellipsis-v], + ) + end + + it "should allow admins to open modal to edit the section when `navigation_menu` site setting is `header dropdown`" do + SiteSetting.navigation_menu = "header dropdown" + + sign_in(admin) + + visit("/latest") + + modal = sidebar_header_dropdown.open.click_customize_community_section_button + + expect(modal).to be_visible + end +end diff --git a/spec/system/editing_sidebar_tags_navigation_spec.rb b/spec/system/editing_sidebar_tags_navigation_spec.rb index 3111dc8c922..fa9af551800 100644 --- a/spec/system/editing_sidebar_tags_navigation_spec.rb +++ b/spec/system/editing_sidebar_tags_navigation_spec.rb @@ -24,7 +24,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do # This tag should not be displayed in the modal as it has not been used in a topic fab!(:tag5) { Fabricate(:tag, name: "tag5") } - let(:sidebar) { PageObjects::Components::Sidebar.new } + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } before { sign_in(user) } diff --git a/spec/system/page_objects/components/navigation_menu/base.rb b/spec/system/page_objects/components/navigation_menu/base.rb new file mode 100644 index 00000000000..beb3a51ad33 --- /dev/null +++ b/spec/system/page_objects/components/navigation_menu/base.rb @@ -0,0 +1,129 @@ +# frozen_string_literal: true + +module PageObjects + module Components + module NavigationMenu + class Base < PageObjects::Components::Base + def community_section + find(".sidebar-section[data-section-name='community']") + end + + SIDEBAR_SECTION_LINK_SELECTOR = "sidebar-section-link" + + def click_section_link(name) + find(".#{SIDEBAR_SECTION_LINK_SELECTOR}", text: name).click + end + + def has_one_active_section_link? + has_css?(".#{SIDEBAR_SECTION_LINK_SELECTOR}--active", count: 1) + end + + def has_section_link?(name, href: nil, active: false, target: nil) + section_link_present?(name, href: href, active: active, target: target, present: true) + end + + def has_no_section_link?(name, href: nil, active: false) + section_link_present?(name, href: href, active: active, present: false) + end + def has_section?(name) + has_css?(".sidebar-sections [data-section-name='#{name.parameterize}']") + end + + def has_no_section?(name) + has_no_css?(".sidebar-sections [data-section-name='#{name.parameterize}']") + end + + def has_categories_section? + has_section?("Categories") + end + + def has_tags_section? + has_section?("Tags") + end + + def has_no_tags_section? + has_no_section?("Tags") + end + + def has_all_tags_section_link? + has_section_link?(I18n.t("js.sidebar.all_tags")) + end + + def has_tag_section_links?(tags) + tag_names = tags.map(&:name) + + tag_section_links = + all( + ".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper[data-tag-name]", + count: tag_names.length, + ) + + expect(tag_section_links.map(&:text)).to eq(tag_names) + end + + def primary_section_links(slug) + all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper").map(&:text) + end + + def primary_section_icons(slug) + all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper use").map do |icon| + icon[:href].delete_prefix("#") + end + end + + def has_category_section_link?(category) + page.has_link?(category.name, class: "sidebar-section-link") + end + + def click_add_section_button + click_button(add_section_button_text) + end + + def has_no_add_section_button? + page.has_no_button?(add_section_button_text) + end + + def click_edit_categories_button + within(".sidebar-section[data-section-name='categories']") do + click_button(class: "sidebar-section-header-button", visible: false) + end + + PageObjects::Modals::SidebarEditCategories.new + end + + def click_edit_tags_button + within(".sidebar-section[data-section-name='tags']") do + click_button(class: "sidebar-section-header-button", visible: false) + end + + PageObjects::Modals::SidebarEditTags.new + end + + def edit_custom_section(name) + name = name.parameterize + + find(".sidebar-section[data-section-name='#{name}']").hover + + find( + ".sidebar-section[data-section-name='#{name}'] button.sidebar-section-header-button", + ).click + end + + private + + def section_link_present?(name, href: nil, active: false, target: nil, present:) + attributes = { exact_text: name } + attributes[:href] = href if href + attributes[:class] = SIDEBAR_SECTION_LINK_SELECTOR + attributes[:class] += "--active" if active + attributes[:target] = target if target + page.public_send(present ? :has_link? : :has_no_link?, **attributes) + end + + def add_section_button_text + I18n.t("js.sidebar.sections.custom.add") + end + end + end + end +end diff --git a/spec/system/page_objects/components/navigation_menu/header_dropdown.rb b/spec/system/page_objects/components/navigation_menu/header_dropdown.rb new file mode 100644 index 00000000000..54bd9e79208 --- /dev/null +++ b/spec/system/page_objects/components/navigation_menu/header_dropdown.rb @@ -0,0 +1,25 @@ +# frozen_string_literal: true + +module PageObjects + module Components + module NavigationMenu + class HeaderDropdown < Base + def open + find(".header-dropdown-toggle.hamburger-dropdown").click + expect(page).to have_css(".sidebar-hamburger-dropdown") + self + end + + def click_customize_community_section_button + community_section.click_button( + I18n.t("js.sidebar.sections.community.edit_section.header_dropdown"), + ) + + expect(page).to have_no_css(".sidebar-hamburger-dropdown") + + PageObjects::Modals::SidebarSectionForm.new + end + end + end + end +end diff --git a/spec/system/page_objects/components/navigation_menu/sidebar.rb b/spec/system/page_objects/components/navigation_menu/sidebar.rb new file mode 100644 index 00000000000..4e703e0c92d --- /dev/null +++ b/spec/system/page_objects/components/navigation_menu/sidebar.rb @@ -0,0 +1,45 @@ +# frozen_string_literal: true + +module PageObjects + module Components + module NavigationMenu + class Sidebar < Base + def open_on_mobile + click_button("toggle-hamburger-menu") + end + + def visible? + page.has_css?("#d-sidebar") + end + + def not_visible? + page.has_no_css?("#d-sidebar") + end + + def has_no_customize_community_section_button? + community_section.has_no_button?(class: "sidebar-section-link-button") + end + + def click_customize_community_section_button + community_section.click_button( + I18n.t("js.sidebar.sections.community.edit_section.sidebar"), + ) + + expect(community_section).to have_no_css(".sidebar-more-section-links-details") + + PageObjects::Modals::SidebarSectionForm.new + end + + def click_community_section_more_button + community_section.click_button(class: "sidebar-more-section-links-details-summary") + expect(community_section).to have_css(".sidebar-more-section-links-details") + self + end + + def custom_section_modal_title + find("#discourse-modal-title") + end + end + end + end +end diff --git a/spec/system/page_objects/components/sidebar.rb b/spec/system/page_objects/components/sidebar.rb deleted file mode 100644 index 5307389bf48..00000000000 --- a/spec/system/page_objects/components/sidebar.rb +++ /dev/null @@ -1,138 +0,0 @@ -# frozen_string_literal: true - -module PageObjects - module Components - class Sidebar < PageObjects::Components::Base - def open_on_mobile - click_button("toggle-hamburger-menu") - end - - def visible? - page.has_css?("#d-sidebar") - end - - def not_visible? - page.has_no_css?("#d-sidebar") - end - - def has_category_section_link?(category) - page.has_link?(category.name, class: "sidebar-section-link") - end - - def click_add_section_button - click_button(add_section_button_text) - end - - def has_no_add_section_button? - page.has_no_button?(add_section_button_text) - end - - def click_edit_categories_button - within(".sidebar-section[data-section-name='categories']") do - click_button(class: "sidebar-section-header-button", visible: false) - end - - PageObjects::Modals::SidebarEditCategories.new - end - - def click_edit_tags_button - within(".sidebar-section[data-section-name='tags']") do - click_button(class: "sidebar-section-header-button", visible: false) - end - - PageObjects::Modals::SidebarEditTags.new - end - - def edit_custom_section(name) - find(".sidebar-section[data-section-name='#{name.parameterize}']").hover - - find( - ".sidebar-section[data-section-name='#{name.parameterize}'] button.sidebar-section-header-button", - ).click - end - - SIDEBAR_SECTION_LINK_SELECTOR = "sidebar-section-link" - - def click_section_link(name) - find(".#{SIDEBAR_SECTION_LINK_SELECTOR}", text: name).click - end - - def has_one_active_section_link? - has_css?(".#{SIDEBAR_SECTION_LINK_SELECTOR}--active", count: 1) - end - - def has_section_link?(name, href: nil, active: false, target: nil) - section_link_present?(name, href: href, active: active, target: target, present: true) - end - - def has_no_section_link?(name, href: nil, active: false) - section_link_present?(name, href: href, active: active, present: false) - end - - def custom_section_modal_title - find("#discourse-modal-title") - end - - def has_section?(name) - has_css?(".sidebar-sections [data-section-name='#{name.parameterize}']") - end - - def has_no_section?(name) - has_no_css?(".sidebar-sections [data-section-name='#{name.parameterize}']") - end - - def has_categories_section? - has_section?("Categories") - end - - def has_tags_section? - has_section?("Tags") - end - - def has_no_tags_section? - has_no_section?("Tags") - end - - def has_all_tags_section_link? - has_section_link?(I18n.t("js.sidebar.all_tags")) - end - - def has_tag_section_links?(tags) - tag_names = tags.map(&:name) - - tag_section_links = - all( - ".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper[data-tag-name]", - count: tag_names.length, - ) - - expect(tag_section_links.map(&:text)).to eq(tag_names) - end - - def primary_section_links(slug) - all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper").map(&:text) - end - - def primary_section_icons(slug) - all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper use").map do |icon| - icon[:href].delete_prefix("#") - end - end - - private - - def section_link_present?(name, href: nil, active: false, target: nil, present:) - attributes = { exact_text: name } - attributes[:href] = href if href - attributes[:class] = SIDEBAR_SECTION_LINK_SELECTOR - attributes[:class] += "--active" if active - attributes[:target] = target if target - page.public_send(present ? :has_link? : :has_no_link?, **attributes) - end - - def add_section_button_text - I18n.t("js.sidebar.sections.custom.add") - end - end - end -end diff --git a/spec/system/page_objects/components/sidebar_header_dropdown.rb b/spec/system/page_objects/components/sidebar_header_dropdown.rb index 35e7984adba..cd5287074cf 100644 --- a/spec/system/page_objects/components/sidebar_header_dropdown.rb +++ b/spec/system/page_objects/components/sidebar_header_dropdown.rb @@ -23,9 +23,9 @@ module PageObjects page.has_no_css?(".sidebar-footer-actions-keyboard-shortcuts") end - def click_community_header_button + def click_categories_header_button page.click_button( - I18n.t("js.sidebar.sections.community.header_action_create_topic_title"), + I18n.t("js.sidebar.sections.categories.header_action_title"), class: "sidebar-section-header-button", ) end diff --git a/spec/system/page_objects/modals/sidebar_section_form.rb b/spec/system/page_objects/modals/sidebar_section_form.rb index 9aba0336441..bb3a989e251 100644 --- a/spec/system/page_objects/modals/sidebar_section_form.rb +++ b/spec/system/page_objects/modals/sidebar_section_form.rb @@ -34,16 +34,24 @@ module PageObjects def reset find(".reset-link").click find(".dialog-footer .btn-primary").click + closed? + self end def save find("#save-section").click + closed? + self end def visible? page.has_css?(".sidebar-section-form-modal") end + def closed? + page.has_no_css?(".sidebar-section-form-modal") + end + def has_disabled_save? find_button("Save", disabled: true) end diff --git a/spec/system/viewing_sidebar_as_anonymous_user_spec.rb b/spec/system/viewing_sidebar_as_anonymous_user_spec.rb index 40324a40cac..1d1b75a6a55 100644 --- a/spec/system/viewing_sidebar_as_anonymous_user_spec.rb +++ b/spec/system/viewing_sidebar_as_anonymous_user_spec.rb @@ -25,7 +25,7 @@ describe "Viewing sidebar as anonymous user", type: :system do Fabricate(:tag, name: "tag 6").tap { |tag| Fabricate.times(1, :topic, tags: [tag]) } end - let(:sidebar) { PageObjects::Components::Sidebar.new } + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } describe "when viewing the tags section" do it "should not display the tags section when tagging has been disabled" do diff --git a/spec/system/viewing_sidebar_mobile_spec.rb b/spec/system/viewing_sidebar_mobile_spec.rb index 8d2da9befad..585d897f29e 100644 --- a/spec/system/viewing_sidebar_mobile_spec.rb +++ b/spec/system/viewing_sidebar_mobile_spec.rb @@ -53,9 +53,8 @@ describe "Viewing sidebar mobile", type: :system, mobile: true do expect(sidebar_dropdown).to be_visible - sidebar_dropdown.click_community_header_button + sidebar_dropdown.click_categories_header_button - expect(composer).to be_opened expect(sidebar_dropdown).to be_hidden end diff --git a/spec/system/viewing_sidebar_spec.rb b/spec/system/viewing_sidebar_spec.rb index 9ad545d38c0..2e0fa5363fe 100644 --- a/spec/system/viewing_sidebar_spec.rb +++ b/spec/system/viewing_sidebar_spec.rb @@ -5,6 +5,8 @@ describe "Viewing sidebar", type: :system do fab!(:user) { Fabricate(:user) } fab!(:category_sidebar_section_link) { Fabricate(:category_sidebar_section_link, user: user) } + let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } + before { sign_in(user) } describe "when using the legacy navigation menu" do @@ -13,8 +15,6 @@ describe "Viewing sidebar", type: :system do it "should display the sidebar when `navigation_menu` query param is 'sidebar'" do visit("/latest?navigation_menu=sidebar") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_visible expect(sidebar).to have_category_section_link(category_sidebar_section_link.linkable) expect(page).not_to have_css(".hamburger-dropdown") @@ -23,8 +23,6 @@ describe "Viewing sidebar", type: :system do it "should display the sidebar dropdown menu when `navigation_menu` query param is 'header_dropdown'" do visit("/latest?navigation_menu=header_dropdown") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_not_visible header_dropdown = PageObjects::Components::SidebarHeaderDropdown.new @@ -40,8 +38,6 @@ describe "Viewing sidebar", type: :system do it "should display the sidebar when `navigation_menu` query param is 'sidebar'" do visit("/latest?navigation_menu=sidebar") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_visible expect(page).not_to have_css(".hamburger-dropdown") end @@ -49,8 +45,6 @@ describe "Viewing sidebar", type: :system do it "should display the legacy dropdown menu when `navigation_menu` query param is 'legacy'" do visit("/latest?navigation_menu=legacy") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_not_visible legacy_header_dropdown = PageObjects::Components::LegacyHeaderDropdown.new @@ -66,8 +60,6 @@ describe "Viewing sidebar", type: :system do it "should display the legacy dropdown menu when `navigation_menu` query param is 'legacy'" do visit("/latest?navigation_menu=legacy") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_not_visible legacy_header_dropdown = PageObjects::Components::LegacyHeaderDropdown.new @@ -79,8 +71,6 @@ describe "Viewing sidebar", type: :system do it "should display the sidebar dropdown menu when `navigation_menu` query param is 'header_dropdown'" do visit("/latest?navigation_menu=header_dropdown") - sidebar = PageObjects::Components::Sidebar.new - expect(sidebar).to be_not_visible header_dropdown = PageObjects::Components::SidebarHeaderDropdown.new