From fe294ab1a77c1026b6996550eb8c36b6f07e1b73 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Tue, 4 Jul 2023 09:45:21 +0800 Subject: [PATCH] DEV: Switch edit nav menu tags/categories modal to component (#22401) Why this change? A new component based API for modals was introduced in b3a23bd9d6abdff2d87d4f32866a27cb6770f499. This commit moves the edit navigation menu tags and categories modal to the new API. --- .../categories-modal.hbs} | 5 +- .../categories-modal.js} | 0 .../sidebar/edit-navigation-menu/modal.hbs | 73 +++++++++++++++++++ .../modal.js | 4 - .../tags-modal.hbs} | 5 +- .../tags-modal.js} | 0 .../edit-navigation-modal-form/modal.hbs | 68 ----------------- .../sidebar/user/categories-section.hbs | 10 ++- .../sidebar/user/categories-section.js | 16 ++-- .../components/sidebar/user/tags-section.hbs | 10 ++- .../components/sidebar/user/tags-section.js | 18 ++--- .../controllers/sidebar-categories-form.js | 6 -- .../modal/sidebar-categories-form.hbs | 3 - .../sidebar-user-categories-section-test.js | 2 +- .../sidebar-user-tags-section-test.js | 5 +- app/assets/stylesheets/common/base/modal.scss | 4 +- .../stylesheets/common/components/_index.scss | 6 +- .../categories-modal.scss} | 0 .../modal.scss | 23 +++--- .../tags-modal.scss} | 0 .../desktop/components/_index.scss | 4 +- .../categories-modal.scss} | 0 .../tags-modal.scss} | 0 .../stylesheets/mobile/components/_index.scss | 4 +- .../sidebar/edit-navigation-menu/modal.scss | 15 ++++ .../tags-modal.scss} | 0 .../edit-navigation-modal-form/modal.scss | 15 ---- .../modals/sidebar_edit_categories.rb | 24 ++---- .../modals/sidebar_edit_navigation_modal.rb | 18 +++-- .../page_objects/modals/sidebar_edit_tags.rb | 18 ++--- 30 files changed, 172 insertions(+), 184 deletions(-) rename app/assets/javascripts/discourse/app/components/sidebar/{edit-navigation-modal-form/categories-form.hbs => edit-navigation-menu/categories-modal.hbs} (96%) rename app/assets/javascripts/discourse/app/components/sidebar/{edit-navigation-modal-form/categories-form.js => edit-navigation-menu/categories-modal.js} (100%) create mode 100644 app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs rename app/assets/javascripts/discourse/app/components/sidebar/{edit-navigation-modal-form => edit-navigation-menu}/modal.js (90%) rename app/assets/javascripts/discourse/app/components/sidebar/{edit-navigation-modal-form/tags-form.hbs => edit-navigation-menu/tags-modal.hbs} (94%) rename app/assets/javascripts/discourse/app/components/sidebar/{edit-navigation-modal-form/tags-form.js => edit-navigation-menu/tags-modal.js} (100%) delete mode 100644 app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs delete mode 100644 app/assets/javascripts/discourse/app/controllers/sidebar-categories-form.js delete mode 100644 app/assets/javascripts/discourse/app/templates/modal/sidebar-categories-form.hbs rename app/assets/stylesheets/common/components/sidebar/{edit-navigation-modal-form/categories-form.scss => edit-navigation-menu/categories-modal.scss} (100%) rename app/assets/stylesheets/common/components/sidebar/{edit-navigation-modal-form => edit-navigation-menu}/modal.scss (69%) rename app/assets/stylesheets/common/components/sidebar/{edit-navigation-modal-form/tags-form.scss => edit-navigation-menu/tags-modal.scss} (100%) rename app/assets/stylesheets/desktop/components/sidebar/{edit-navigation-modal-form/categories-form.scss => edit-navigation-menu/categories-modal.scss} (100%) rename app/assets/stylesheets/desktop/components/sidebar/{edit-navigation-modal-form/tags-form.scss => edit-navigation-menu/tags-modal.scss} (100%) create mode 100644 app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/modal.scss rename app/assets/stylesheets/mobile/components/sidebar/{edit-navigation-modal-form/tags-form.scss => edit-navigation-menu/tags-modal.scss} (100%) delete mode 100644 app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs similarity index 96% rename from app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs rename to app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs index ef665e861fd..cab218e9d0f 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs @@ -1,4 +1,4 @@ -
{{#if (gt this.filteredCategoriesGroupings.length 0)}} @@ -68,4 +69,4 @@ {{/if}}
- \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.js similarity index 100% rename from app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js rename to app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.js diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs new file mode 100644 index 00000000000..fbd1698befc --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs @@ -0,0 +1,73 @@ + + <:headerBelowTitle> +

+ + + {{@deselectAllText}} +

+ + + <:belowHeader> +
+
+ {{d-icon + "search" + class="sidebar__edit-navigation-menu__filter-input-icon" + }} + + +
+ +
+ +
+
+ + + <:body> + {{yield}} + + + <:footer> +
+ + + {{#if @showResetDefaultsButton}} + + {{/if}} +
+ + \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.js similarity index 90% rename from app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js rename to app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.js index ca6c6801274..f36cd6e4025 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.js @@ -26,10 +26,6 @@ export default class extends Component { }, ]; - get modalHeaderAfterTitleElement() { - return document.getElementById("modal-header-after-title"); - } - @action onFilterInput(value) { this.args.onFilterInput(value); diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs similarity index 94% rename from app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs rename to app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs index 36e143bfa8c..9f5089c0507 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs @@ -1,4 +1,4 @@ -
{{#if this.tagsLoading}} @@ -52,4 +53,4 @@ {{/if}} {{/if}}
- \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js similarity index 100% rename from app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js rename to app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs deleted file mode 100644 index e7626cf5cc5..00000000000 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs +++ /dev/null @@ -1,68 +0,0 @@ -{{#in-element this.modalHeaderAfterTitleElement}} -

- - - {{@deselectAllText}} -

-{{/in-element}} - -
-
- {{d-icon - "search" - class="sidebar__edit-navigation-modal-form__filter-input-icon" - }} - - -
- -
- -
-
- -
- - {{yield}} - -
- -
- - - {{#if @showResetDefaultsButton}} - - {{/if}} -
\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs index 665dce3effd..aa791ba1e5f 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs @@ -3,7 +3,7 @@ @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}} @headerActions={{array (hash - action=this.editTracked + action=(fn (mut this.isModalVisible) true) title=(i18n "sidebar.sections.categories.header_action_title") ) }} @@ -46,4 +46,10 @@ @query={{hash filter="default_navigation_menu_categories"}} /> {{/if}} - \ No newline at end of file + + +{{#if this.isModalVisible}} + +{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js index 7865e4d4f14..aec4adb2d1e 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js @@ -1,20 +1,21 @@ import { inject as service } from "@ember/service"; -import { action } from "@ember/object"; -import { cached } from "@glimmer/tracking"; +import { cached, tracked } from "@glimmer/tracking"; import { debounce } from "discourse-common/utils/decorators"; import Category from "discourse/models/category"; import SidebarCommonCategoriesSection from "discourse/components/sidebar/common/categories-section"; -import showModal from "discourse/lib/show-modal"; import { hasDefaultSidebarCategories } from "discourse/lib/sidebar/helpers"; export const REFRESH_COUNTS_APP_EVENT_NAME = "sidebar:refresh-categories-section-counts"; export default class SidebarUserCategoriesSection extends SidebarCommonCategoriesSection { - @service router; - @service currentUser; @service appEvents; + @service currentUser; + @service modal; + @service router; + + @tracked isModalVisible = false; constructor() { super(...arguments); @@ -63,9 +64,4 @@ export default class SidebarUserCategoriesSection extends SidebarCommonCategorie get hasDefaultSidebarCategories() { return hasDefaultSidebarCategories(this.siteSettings); } - - @action - editTracked() { - showModal("sidebar-categories-form"); - } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs index ad0f94bc4f0..86c35ce72a5 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs @@ -3,7 +3,7 @@ @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}} @headerActions={{array (hash - action=this.editTracked + action=(fn (mut this.isModalVisible) true) title=(i18n "sidebar.sections.tags.header_action_title") ) }} @@ -44,4 +44,10 @@ @query={{hash filter="default_navigation_menu_tags"}} /> {{/if}} - \ No newline at end of file + + +{{#if this.isModalVisible}} + +{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js index 65d8b107937..256a0bdd5c6 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js @@ -1,19 +1,20 @@ -import { cached } from "@glimmer/tracking"; +import { cached, tracked } from "@glimmer/tracking"; import { inject as service } from "@ember/service"; -import { action } from "@ember/object"; import SidebarCommonTagsSection from "discourse/components/sidebar/common/tags-section"; import TagSectionLink from "discourse/lib/sidebar/user/tags-section/tag-section-link"; import PMTagSectionLink from "discourse/lib/sidebar/user/tags-section/pm-tag-section-link"; import { hasDefaultSidebarTags } from "discourse/lib/sidebar/helpers"; -import showModal from "discourse/lib/show-modal"; export default class SidebarUserTagsSection extends SidebarCommonTagsSection { - @service router; - @service topicTrackingState; - @service pmTopicTrackingState; @service currentUser; + @service modal; + @service pmTopicTrackingState; + @service router; @service siteSettings; + @service topicTrackingState; + + @tracked isModalVisible = false; constructor() { super(...arguments); @@ -77,9 +78,4 @@ export default class SidebarUserTagsSection extends SidebarCommonTagsSection { get hasDefaultSidebarTags() { return hasDefaultSidebarTags(this.siteSettings); } - - @action - editTracked() { - showModal("sidebar-tags-form"); - } } diff --git a/app/assets/javascripts/discourse/app/controllers/sidebar-categories-form.js b/app/assets/javascripts/discourse/app/controllers/sidebar-categories-form.js deleted file mode 100644 index 983d655fc3f..00000000000 --- a/app/assets/javascripts/discourse/app/controllers/sidebar-categories-form.js +++ /dev/null @@ -1,6 +0,0 @@ -import Controller from "@ember/controller"; -import ModalFunctionality from "discourse/mixins/modal-functionality"; - -export default class SidebarCategoriesForm extends Controller.extend( - ModalFunctionality -) {} diff --git a/app/assets/javascripts/discourse/app/templates/modal/sidebar-categories-form.hbs b/app/assets/javascripts/discourse/app/templates/modal/sidebar-categories-form.hbs deleted file mode 100644 index 664f504de3d..00000000000 --- a/app/assets/javascripts/discourse/app/templates/modal/sidebar-categories-form.hbs +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js index 57e62785798..0ccb3e5cacd 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js @@ -139,7 +139,7 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { ); assert.true( - exists(".sidebar-categories-form-modal"), + exists(".sidebar-categories-form"), "it shows the categories form modal" ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js index 80ed97c50b3..b4a76324961 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js @@ -111,10 +111,7 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) { ".sidebar-section[data-section-name='tags'] .sidebar-section-header-button" ); - assert.true( - exists(".sidebar-tags-form-modal"), - "it shows the tags form modal" - ); + assert.true(exists(".sidebar-tags-form"), "it shows the tags form modal"); }); test("tags section is displayed with site's top tags when user has not added any tags and there are no default tags configured", async function (assert) { diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index deb48873763..8230c63b1b1 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -133,10 +133,10 @@ } } - &:not(.history-modal) { + &:not(.history-modal):not(.sidebar__edit-navigation-menu__modal) { .modal-body:not(.reorder-categories):not(.poll-ui-builder):not( .poll-breakdown - ):not(.sidebar__edit-navigation-modal-form__body) { + ) { max-height: 80vh !important; @media screen and (max-height: 500px) { max-height: 65vh !important; diff --git a/app/assets/stylesheets/common/components/_index.scss b/app/assets/stylesheets/common/components/_index.scss index c296d7d52b5..bd7806630f1 100644 --- a/app/assets/stylesheets/common/components/_index.scss +++ b/app/assets/stylesheets/common/components/_index.scss @@ -28,9 +28,9 @@ @import "relative-time-picker"; @import "share-and-invite-modal"; @import "download-calendar"; -@import "sidebar/edit-navigation-modal-form/categories-form"; -@import "sidebar/edit-navigation-modal-form/modal"; -@import "sidebar/edit-navigation-modal-form/tags-form"; +@import "sidebar/edit-navigation-menu/categories-modal"; +@import "sidebar/edit-navigation-menu/modal"; +@import "sidebar/edit-navigation-menu/tags-modal"; @import "svg"; @import "tap-tile"; @import "time-input"; diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/categories-form.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss similarity index 100% rename from app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/categories-form.scss rename to app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/categories-modal.scss diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss similarity index 69% rename from app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss rename to app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss index c013b1bc085..a774429c075 100644 --- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss +++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/modal.scss @@ -1,15 +1,15 @@ -.sidebar__edit-navigation-modal-form { +.sidebar__edit-navigation-menu__modal { .modal-body { min-height: 50vh; } } -.sidebar__edit-navigation-modal-form__filter { +.sidebar__edit-navigation-menu__filter { display: flex; flex-direction: row; padding: 1em 1em 0 1em; - .sidebar__edit-navigation-modal-form__filter-dropdown { + .sidebar__edit-navigation-menu__filter-dropdown { margin-left: 0.5em; .select-kit-header { @@ -30,7 +30,7 @@ } } - .sidebar__edit-navigation-modal-form__filter-input { + .sidebar__edit-navigation-menu__filter-input { display: flex; flex-direction: row; margin-right: auto; @@ -38,14 +38,14 @@ position: relative; } - .sidebar__edit-navigation-modal-form__filter-input-icon { + .sidebar__edit-navigation-menu__filter-input-icon { position: absolute; left: 0.5em; top: 0.65em; color: var(--primary-low-mid); } - .sidebar__edit-navigation-modal-form__filter-input-field { + .sidebar__edit-navigation-menu__filter-input-field { border-color: var(--primary-low-mid); padding-left: 1.75em; width: 100%; @@ -59,8 +59,11 @@ } } -.sidebar__edit-navigation-modal-form__footer { - .btn.sidebar__edit-navigation-modal-form__reset-defaults-button { +.sidebar__edit-navigation-menu__footer { + display: flex; + width: 100%; + + .btn.sidebar__edit-navigation-menu__reset-defaults-button { margin-left: auto; margin-right: 0em; @@ -76,10 +79,10 @@ } } -.sidebar__edit-navigation-modal-form__deselect-wrapper { +.sidebar__edit-navigation-menu__deselect-wrapper { margin: 0; - .btn-flat.sidebar__edit-navigation-modal-form__deselect-button { + .btn-flat.sidebar__edit-navigation-menu__deselect-button { margin-left: auto; padding: 0; diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/tags-form.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss similarity index 100% rename from app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/tags-form.scss rename to app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss diff --git a/app/assets/stylesheets/desktop/components/_index.scss b/app/assets/stylesheets/desktop/components/_index.scss index b26861b84de..b895bd68565 100644 --- a/app/assets/stylesheets/desktop/components/_index.scss +++ b/app/assets/stylesheets/desktop/components/_index.scss @@ -1,5 +1,5 @@ -@import "sidebar/edit-navigation-modal-form/categories-form"; -@import "sidebar/edit-navigation-modal-form/tags-form"; +@import "sidebar/edit-navigation-menu/categories-modal"; +@import "sidebar/edit-navigation-menu/tags-modal"; @import "user-card"; @import "user-info"; @import "user-stream-item"; diff --git a/app/assets/stylesheets/desktop/components/sidebar/edit-navigation-modal-form/categories-form.scss b/app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/categories-modal.scss similarity index 100% rename from app/assets/stylesheets/desktop/components/sidebar/edit-navigation-modal-form/categories-form.scss rename to app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/categories-modal.scss diff --git a/app/assets/stylesheets/desktop/components/sidebar/edit-navigation-modal-form/tags-form.scss b/app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/tags-modal.scss similarity index 100% rename from app/assets/stylesheets/desktop/components/sidebar/edit-navigation-modal-form/tags-form.scss rename to app/assets/stylesheets/desktop/components/sidebar/edit-navigation-menu/tags-modal.scss diff --git a/app/assets/stylesheets/mobile/components/_index.scss b/app/assets/stylesheets/mobile/components/_index.scss index 45e62f33c50..00e6ac8523e 100644 --- a/app/assets/stylesheets/mobile/components/_index.scss +++ b/app/assets/stylesheets/mobile/components/_index.scss @@ -1,5 +1,5 @@ -@import "sidebar/edit-navigation-modal-form/modal"; -@import "sidebar/edit-navigation-modal-form/tags-form"; +@import "sidebar/edit-navigation-menu/modal"; +@import "sidebar/edit-navigation-menu/tags-modal"; @import "topic-footer-mobile-dropdown"; @import "user-card"; @import "user-stream-item"; diff --git a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/modal.scss b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/modal.scss new file mode 100644 index 00000000000..c1732330eee --- /dev/null +++ b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/modal.scss @@ -0,0 +1,15 @@ +.sidebar__edit-navigation-menu { + .modal-inner-container { + width: 35em; + } +} + +.sidebar__edit-navigation-menu__filter { + flex-direction: column; + padding: 0.667em; + + .sidebar__edit-navigation-menu__filter-dropdown { + margin-left: 0; + width: 100%; + } +} diff --git a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/tags-form.scss b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/tags-modal.scss similarity index 100% rename from app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/tags-form.scss rename to app/assets/stylesheets/mobile/components/sidebar/edit-navigation-menu/tags-modal.scss diff --git a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss deleted file mode 100644 index 571dfe74694..00000000000 --- a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss +++ /dev/null @@ -1,15 +0,0 @@ -.sidebar__edit-navigation-modal-form { - .modal-inner-container { - width: 35em; - } -} - -.sidebar__edit-navigation-modal-form__filter { - flex-direction: column; - padding: 0.667em; - - .sidebar__edit-navigation-modal-form__filter-dropdown { - margin-left: 0; - width: 100%; - } -} diff --git a/spec/system/page_objects/modals/sidebar_edit_categories.rb b/spec/system/page_objects/modals/sidebar_edit_categories.rb index 187f60ae575..56d96472175 100644 --- a/spec/system/page_objects/modals/sidebar_edit_categories.rb +++ b/spec/system/page_objects/modals/sidebar_edit_categories.rb @@ -5,32 +5,24 @@ require_relative "sidebar_edit_navigation_modal" module PageObjects module Modals class SidebarEditCategories < SidebarEditNavigationModal - def closed? - has_no_css?(".sidebar-categories-form-modal") - end - - def has_right_title?(title) - has_css?(".sidebar-categories-form-modal #discourse-modal-title", text: title) - end - def has_parent_category_color?(category) has_css?( - ".sidebar-categories-form-modal .sidebar-categories-form__row", + ".sidebar-categories-form .sidebar-categories-form__row", style: "border-left-color: ##{category.color} ", ) end def has_category_description_excerpt?(category) has_css?( - ".sidebar-categories-form-modal .sidebar-categories-form__category-row", + ".sidebar-categories-form .sidebar-categories-form__category-row", text: category.description_excerpt, ) end def has_no_categories? - has_no_css?(".sidebar-categories-form-modal .sidebar-categories-form__category-row") && + has_no_css?(".sidebar-categories-form .sidebar-categories-form__category-row") && has_css?( - ".sidebar-categories-form-modal .sidebar-categories-form__no-categories", + ".sidebar-categories-form .sidebar-categories-form__no-categories", text: I18n.t("js.sidebar.categories_form_modal.no_categories"), ) end @@ -40,7 +32,7 @@ module PageObjects categories = all( - ".sidebar-categories-form-modal .sidebar-categories-form__category-row", + ".sidebar-categories-form .sidebar-categories-form__category-row", count: category_names.length, ) @@ -49,13 +41,13 @@ module PageObjects def has_checkbox?(category, disabled: false) has_selector?( - ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}", + ".sidebar-categories-form .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}", ) end def toggle_category_checkbox(category) find( - ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input", + ".sidebar-categories-form .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input", ).click self @@ -63,7 +55,7 @@ module PageObjects def has_checkbox?(category, disabled: false) has_selector?( - ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}", + ".sidebar-categories-form .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}", ) end end diff --git a/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb b/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb index 9ec567fa2c9..786681237d7 100644 --- a/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb +++ b/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb @@ -3,13 +3,21 @@ module PageObjects module Modals class SidebarEditNavigationModal < PageObjects::Modals::Base + def closed? + has_no_css?(".sidebar__edit-navigation-menu__modal") + end + + def has_right_title?(title) + has_css?(".sidebar__edit-navigation-menu__modal .title", text: title) + end + def has_focus_on_filter_input? evaluate_script("document.activeElement").native == - find(".sidebar__edit-navigation-modal-form__filter-input-field").native + find(".sidebar__edit-navigation-menu__filter-input-field").native end def filter(text) - find(".sidebar__edit-navigation-modal-form__filter-input-field").fill_in(with: text) + find(".sidebar__edit-navigation-menu__filter-input-field").fill_in(with: text) self end @@ -23,7 +31,7 @@ module PageObjects end def save - find(".sidebar__edit-navigation-modal-form__save-button").click + find(".sidebar__edit-navigation-menu__save-button").click self end @@ -59,9 +67,7 @@ module PageObjects private def dropdown_filter - PageObjects::Components::SelectKit.new( - ".sidebar__edit-navigation-modal-form__filter-dropdown", - ) + PageObjects::Components::SelectKit.new(".sidebar__edit-navigation-menu__filter-dropdown") end end end diff --git a/spec/system/page_objects/modals/sidebar_edit_tags.rb b/spec/system/page_objects/modals/sidebar_edit_tags.rb index 11ca06e4347..0d18dc03d4d 100644 --- a/spec/system/page_objects/modals/sidebar_edit_tags.rb +++ b/spec/system/page_objects/modals/sidebar_edit_tags.rb @@ -5,34 +5,26 @@ require_relative "sidebar_edit_navigation_modal" module PageObjects module Modals class SidebarEditTags < SidebarEditNavigationModal - def closed? - has_no_css?(".sidebar-tags-form-modal") - end - - def has_right_title?(title) - has_css?(".sidebar-tags-form-modal #discourse-modal-title", text: title) - end - def has_tag_checkboxes?(tags) tag_names = tags.map(&:name) - has_css?(".sidebar-tags-form-modal .sidebar-tags-form__tag", count: tag_names.length) && - all(".sidebar-tags-form-modal .sidebar-tags-form__tag").all? do |row| + has_css?(".sidebar-tags-form .sidebar-tags-form__tag", count: tag_names.length) && + all(".sidebar-tags-form .sidebar-tags-form__tag").all? do |row| tag_names.include?(row["data-tag-name"].to_s) end end def has_no_tag_checkboxes? - has_no_css?(".sidebar-tags-form-modal .sidebar-tags-form__tag") && + has_no_css?(".sidebar-tags-form .sidebar-tags-form__tag") && has_css?( - ".sidebar-tags-form-modal .sidebar-tags-form__no-tags", + ".sidebar-tags-form .sidebar-tags-form__no-tags", text: I18n.t("js.sidebar.tags_form_modal.no_tags"), ) end def toggle_tag_checkbox(tag) find( - ".sidebar-tags-form-modal .sidebar-tags-form__tag[data-tag-name='#{tag.name}'] .sidebar-tags-form__input", + ".sidebar-tags-form .sidebar-tags-form__tag[data-tag-name='#{tag.name}'] .sidebar-tags-form__input", ).click self