DEV: Change `enable_sidebar` query param to `navigation_menu` (#20368)

What does this change do?

This commit the client to override the navigation menu setting
configured by the site temporarily based on the value of the
`navigation_menu` query param. The new query param replaces the old
`enable_sidebar` query param.

Why do we need this change?

The motivation here is to allow theme maintainers to quickly preview
what the site will look like with the various navigation menu site
setting.
This commit is contained in:
Alan Guo Xiang Tan 2023-02-21 09:59:56 +08:00 committed by GitHub
parent 509fee0f5a
commit c47015b861
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 90 additions and 63 deletions

View File

@ -252,9 +252,9 @@ async function buildFromBootstrap(proxy, baseURL, req, response, preload) {
url.searchParams.append("safe_mode", reqUrlSafeMode);
}
const enableSidebar = forUrlSearchParams.get("enable_sidebar");
if (enableSidebar) {
url.searchParams.append("enable_sidebar", enableSidebar);
const navigationMenu = forUrlSearchParams.get("navigation_menu");
if (navigationMenu) {
url.searchParams.append("navigation_menu", navigationMenu);
}
const reqUrlPreviewThemeId = forUrlSearchParams.get("preview_theme_id");

View File

@ -343,6 +343,7 @@ const SiteHeaderComponent = MountWidget.extend(
canSignUp: this.canSignUp,
sidebarEnabled: this.sidebarEnabled,
showSidebar: this.showSidebar,
navigationMenuQueryParamOverride: this.navigationMenuQueryParamOverride,
};
},

View File

@ -7,13 +7,13 @@ import { action } from "@ember/object";
const HIDE_SIDEBAR_KEY = "sidebar-hidden";
export default Controller.extend({
queryParams: [{ sidebarQueryParamOverride: "enable_sidebar" }],
queryParams: [{ navigationMenuQueryParamOverride: "navigation_menu" }],
showTop: true,
showFooter: false,
router: service(),
showSidebar: false,
sidebarQueryParamOverride: null,
navigationMenuQueryParamOverride: null,
sidebarDisabledRouteOverride: false,
showSiteHeader: true,
@ -63,13 +63,13 @@ export default Controller.extend({
},
@discourseComputed(
"sidebarQueryParamOverride",
"navigationMenuQueryParamOverride",
"siteSettings.navigation_menu",
"canDisplaySidebar",
"sidebarDisabledRouteOverride"
)
sidebarEnabled(
sidebarQueryParamOverride,
navigationMenuQueryParamOverride,
navigationMenu,
canDisplaySidebar,
sidebarDisabledRouteOverride
@ -82,11 +82,14 @@ export default Controller.extend({
return false;
}
if (sidebarQueryParamOverride === "1") {
if (navigationMenuQueryParamOverride === "sidebar") {
return true;
}
if (sidebarQueryParamOverride === "0") {
if (
navigationMenuQueryParamOverride === "legacy" ||
navigationMenuQueryParamOverride === "header_dropdown"
) {
return false;
}

View File

@ -17,6 +17,7 @@
@toggleAnonymous={{route-action "toggleAnonymous"}}
@logout={{route-action "logout"}}
@sidebarEnabled={{this.sidebarEnabled}}
@navigationMenuQueryParamOverride={{this.navigationMenuQueryParamOverride}}
@showSidebar={{this.showSidebar}}
@toggleSidebar={{action "toggleSidebar"}}
/>

View File

@ -509,10 +509,12 @@ export default createWidget("header", {
})
);
} else if (state.hamburgerVisible) {
if (this.siteSettings.navigation_menu !== "legacy") {
if (!attrs.sidebarEnabled || this.site.narrowDesktopView) {
panels.push(this.attach("revamped-hamburger-menu-wrapper", {}));
}
if (
attrs.navigationMenuQueryParamOverride === "header_dropdown" ||
(this.siteSettings.navigation_menu !== "legacy" &&
(!attrs.sidebarEnabled || this.site.narrowDesktopView))
) {
panels.push(this.attach("revamped-hamburger-menu-wrapper", {}));
} else {
panels.push(this.attach("hamburger-menu"));
}

View File

@ -51,25 +51,6 @@ acceptance(
"hides the sidebar dropdown"
);
});
test("'enable_sidebar' query param override to enable sidebar", async function (assert) {
await visit("/?enable_sidebar=1");
assert.ok(exists(".sidebar-container"), "sidebar is displayed");
await click(".btn-sidebar-toggle");
assert.notOk(
exists(".sidebar-hamburger-dropdown"),
"does not display the sidebar dropdown"
);
assert.notOk(exists(".sidebar-container"), "sidebar is hidden");
await click(".btn-sidebar-toggle");
assert.ok(exists(".sidebar-container"), "sidebar is displayed");
});
}
);
@ -132,26 +113,6 @@ acceptance(
assert.ok(exists(".sidebar-container"), "displays the sidebar");
});
test("'enable_sidebar' query param override to disable sidebar", async function (assert) {
await visit("/?enable_sidebar=0");
assert.notOk(exists(".sidebar-container"), "sidebar is not displayed");
await click(".hamburger-dropdown");
assert.ok(
exists(".sidebar-hamburger-dropdown"),
"displays the sidebar dropdown"
);
await click(".hamburger-dropdown");
assert.notOk(
exists(".sidebar-hamburger-dropdown"),
"hides the sidebar dropdown"
);
});
test("button to toggle between mobile and desktop view on touch devices ", async function (assert) {
const capabilities = this.container.lookup("capabilities:main");
capabilities.touch = true;

View File

@ -645,7 +645,7 @@ class ApplicationController < ActionController::Base
current_user,
scope: guardian,
root: false,
enable_sidebar_param: params[:enable_sidebar],
navigation_menu_param: params[:navigation_menu],
),
),
)

View File

@ -59,6 +59,7 @@ module UserSidebarMixin
private
def sidebar_navigation_menu?
!SiteSetting.legacy_navigation_menu? || options[:enable_sidebar_param] == "1"
!SiteSetting.legacy_navigation_menu? ||
%w[sidebar header_dropdown].include?(options[:navigation_menu_param])
end
end

View File

@ -0,0 +1,15 @@
# frozen_string_literal: true
module PageObjects
module Components
class LegacyHeaderDropdown < PageObjects::Components::Base
def click
page.find(".hamburger-dropdown").click
end
def visible?
page.has_css?(".menu-panel.drop-down")
end
end
end
end

View File

@ -0,0 +1,15 @@
# frozen_string_literal: true
module PageObjects
module Components
class SidebarHeaderDropdown < PageObjects::Components::Base
def click
page.find(".hamburger-dropdown").click
end
def visible?
page.has_css?(".revamped.menu-panel.drop-down")
end
end
end
end

View File

@ -5,13 +5,13 @@ describe "Viewing sidebar", type: :system, js: true do
fab!(:user) { Fabricate(:user) }
fab!(:category_sidebar_section_link) { Fabricate(:category_sidebar_section_link, user: user) }
before_all { sign_in(user) }
describe "when using the legacy navigation menu" do
before { SiteSetting.navigation_menu = "legacy" }
it "should display the sidebar when `enable_sidebar` query param is '1'" do
sign_in(user)
visit("/latest?enable_sidebar=1")
it "should display the sidebar when `navigation_menu` query param is 'sidebar'" do
visit("/latest?navigation_menu=sidebar")
sidebar = PageObjects::Components::Sidebar.new
@ -19,20 +19,48 @@ describe "Viewing sidebar", type: :system, js: true do
expect(sidebar).to have_category_section_link(category_sidebar_section_link.linkable)
expect(page).not_to have_css(".hamburger-dropdown")
end
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
header_dropdown.click
expect(header_dropdown).to be_visible
end
end
describe "when using the sidebar navigation menu" do
before { SiteSetting.navigation_menu = "sidebar" }
it "should not display the sidebar when `enable_sidebar` query param is '0'" do
sign_in(user)
visit("/latest?enable_sidebar=0")
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
expect(page).to have_css(".hamburger-dropdown")
legacy_header_dropdown = PageObjects::Components::LegacyHeaderDropdown.new
legacy_header_dropdown.click
expect(legacy_header_dropdown).to be_visible
end
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
header_dropdown.click
expect(header_dropdown).to be_visible
end
end
end