DEV: Switch edit nav menu tags/categories modal to component (#22401)

Why this change?

A new component based API for modals was introduced in
b3a23bd9d6. This commit moves the edit
navigation menu tags and categories modal to the new API.

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/categories-modal.hbs

@@ -1,4 +1,4 @@
-<Sidebar::EditNavigationModalForm::Modal
+<Sidebar::EditNavigationMenu::Modal
   @title="sidebar.categories_form_modal.title"
   @disableSaveButton={{this.saving}}
   @save={{this.save}}
@@ -15,6 +15,7 @@
   @resetFilter={{this.resetFilter}}
   @filterSelected={{this.filterSelected}}
   @filterUnselected={{this.filterUnselected}}
+  @closeModal={{@closeModal}}
 >
   <form class="sidebar-categories-form">
     {{#if (gt this.filteredCategoriesGroupings.length 0)}}
@@ -68,4 +69,4 @@
       </div>
     {{/if}}
   </form>
-</Sidebar::EditNavigationModalForm::Modal>
+</Sidebar::EditNavigationMenu::Modal>

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs

@@ -0,0 +1,73 @@
+<DModal
+  class="sidebar__edit-navigation-menu__modal"
+  @title={{i18n @title}}
+  @closeModal={{@closeModal}}
+>
+  <:headerBelowTitle>
+    <p class="sidebar__edit-navigation-menu__deselect-wrapper">
+      <DButton
+        @class="btn-flat sidebar__edit-navigation-menu__deselect-button"
+        @label="sidebar.edit_navigation_modal_form.deselect_button_text"
+        @ariaLabel="sidebar.edit_navigation_modal_form.deselect_button_text"
+        @action={{@deselectAll}}
+      />
+
+      {{@deselectAllText}}
+    </p>
+  </:headerBelowTitle>
+
+  <:belowHeader>
+    <div class="sidebar__edit-navigation-menu__filter">
+      <div class="sidebar__edit-navigation-menu__filter-input">
+        {{d-icon
+          "search"
+          class="sidebar__edit-navigation-menu__filter-input-icon"
+        }}
+
+        <Input
+          class="sidebar__edit-navigation-menu__filter-input-field"
+          placeholder={{@inputFilterPlaceholder}}
+          @type="text"
+          @value={{this.filter}}
+          {{on "input" (action @onFilterInput value="target.value")}}
+          autofocus="true"
+        />
+      </div>
+
+      <div class="sidebar__edit-navigation-menu__filter-dropdown-wrapper">
+        <DropdownSelectBox
+          @class="sidebar__edit-navigation-menu__filter-dropdown"
+          @value={{this.filterDropdownValue}}
+          @content={{this.filterDropdownContent}}
+          @onChange={{this.onFilterDropdownChange}}
+          @options={{hash showCaret=true}}
+        />
+      </div>
+    </div>
+  </:belowHeader>
+
+  <:body>
+    {{yield}}
+  </:body>
+
+  <:footer>
+    <div class="sidebar__edit-navigation-menu__footer">
+      <DButton
+        @class="btn-primary sidebar__edit-navigation-menu__save-button"
+        @label="save"
+        @disabled={{@saving}}
+        @action={{@save}}
+      />
+
+      {{#if @showResetDefaultsButton}}
+        <DButton
+          @icon="undo"
+          @class="btn-flat btn-text sidebar__edit-navigation-menu__reset-defaults-button"
+          @label="sidebar.edit_navigation_modal_form.reset_to_defaults"
+          @disabled={{@saving}}
+          @action={{@resetToDefaults}}
+        />
+      {{/if}}
+    </div>
+  </:footer>
+</DModal>

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);

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs

@@ -1,4 +1,4 @@
-<Sidebar::EditNavigationModalForm::Modal
+<Sidebar::EditNavigationMenu::Modal
   @title="sidebar.tags_form_modal.title"
   @saving={{this.saving}}
   @save={{this.save}}
@@ -13,6 +13,7 @@
   @resetFilter={{this.resetFilter}}
   @filterSelected={{this.filterSelected}}
   @filterUnselected={{this.filterUnselected}}
+  @closeModal={{@closeModal}}
 >
   <form class="sidebar-tags-form">
     {{#if this.tagsLoading}}
@@ -52,4 +53,4 @@
       {{/if}}
     {{/if}}
   </form>
-</Sidebar::EditNavigationModalForm::Modal>
+</Sidebar::EditNavigationMenu::Modal>

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs

@@ -1,68 +0,0 @@
-{{#in-element this.modalHeaderAfterTitleElement}}
-  <p class="sidebar__edit-navigation-modal-form__deselect-wrapper">
-    <DButton
-      @class="btn-flat sidebar__edit-navigation-modal-form__deselect-button"
-      @label="sidebar.edit_navigation_modal_form.deselect_button_text"
-      @ariaLabel="sidebar.edit_navigation_modal_form.deselect_button_text"
-      @action={{@deselectAll}}
-    />
-
-    {{@deselectAllText}}
-  </p>
-{{/in-element}}
-
-<div class="sidebar__edit-navigation-modal-form__filter">
-  <div class="sidebar__edit-navigation-modal-form__filter-input">
-    {{d-icon
-      "search"
-      class="sidebar__edit-navigation-modal-form__filter-input-icon"
-    }}
-
-    <Input
-      class="sidebar__edit-navigation-modal-form__filter-input-field"
-      placeholder={{@inputFilterPlaceholder}}
-      @type="text"
-      @value={{this.filter}}
-      {{on "input" (action @onFilterInput value="target.value")}}
-      autofocus="true"
-    />
-  </div>
-
-  <div class="sidebar__edit-navigation-modal-form__filter-dropdown-wrapper">
-    <DropdownSelectBox
-      @class="sidebar__edit-navigation-modal-form__filter-dropdown"
-      @value={{this.filterDropdownValue}}
-      @content={{this.filterDropdownContent}}
-      @onChange={{this.onFilterDropdownChange}}
-      @options={{hash showCaret=true}}
-    />
-  </div>
-</div>
-
-<div class="sidebar__edit-navigation-modal-form">
-  <DModalBody
-    @title={{@title}}
-    @class="sidebar__edit-navigation-modal-form__body"
-  >
-    {{yield}}
-  </DModalBody>
-</div>
-
-<div class="modal-footer sidebar__edit-navigation-modal-form__footer">
-  <DButton
-    @class="btn-primary sidebar__edit-navigation-modal-form__save-button"
-    @label="save"
-    @disabled={{@saving}}
-    @action={{@save}}
-  />
-
-  {{#if @showResetDefaultsButton}}
-    <DButton
-      @icon="undo"
-      @class="btn-flat btn-text sidebar__edit-navigation-modal-form__reset-defaults-button"
-      @label="sidebar.edit_navigation_modal_form.reset_to_defaults"
-      @disabled={{@saving}}
-      @action={{@resetToDefaults}}
-    />
-  {{/if}}
-</div>

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")
     )
   }}
@@ -47,3 +47,9 @@
     />
   {{/if}}
 </Sidebar::Section>
+
+{{#if this.isModalVisible}}
+  <Sidebar::EditNavigationMenu::CategoriesModal
+    @closeModal={{fn (mut this.isModalVisible) false}}
+  />
+{{/if}}

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, tracked } from "@glimmer/tracking";
-import { cached } 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");
-  }
 }

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")
     )
   }}
@@ -45,3 +45,9 @@
     />
   {{/if}}
 </Sidebar::Section>
+
+{{#if this.isModalVisible}}
+  <Sidebar::EditNavigationMenu::TagsModal
+    @closeModal={{fn (mut this.isModalVisible) false}}
+  />
+{{/if}}

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");
-  }
 }

app/assets/javascripts/discourse/app/controllers/sidebar-categories-form.js

@@ -1,6 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default class SidebarCategoriesForm extends Controller.extend(
-  ModalFunctionality
-) {}

app/assets/javascripts/discourse/app/templates/modal/sidebar-categories-form.hbs

@@ -1,3 +0,0 @@
-<Sidebar::EditNavigationModalForm::CategoriesForm
-  @closeModal={{(action "closeModal")}}
-/>

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"
     );
   });

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(
+    assert.true(exists(".sidebar-tags-form"), "it shows the tags form modal");
-      exists(".sidebar-tags-form-modal"),
-      "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) {

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;

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-menu/categories-modal";
-@import "sidebar/edit-navigation-modal-form/modal";
+@import "sidebar/edit-navigation-menu/modal";
-@import "sidebar/edit-navigation-modal-form/tags-form";
+@import "sidebar/edit-navigation-menu/tags-modal";
 @import "svg";
 @import "tap-tile";
 @import "time-input";

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 {
+.sidebar__edit-navigation-menu__footer {
-  .btn.sidebar__edit-navigation-modal-form__reset-defaults-button {
+  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;
 

app/assets/stylesheets/desktop/components/_index.scss

@@ -1,5 +1,5 @@
-@import "sidebar/edit-navigation-modal-form/categories-form";
+@import "sidebar/edit-navigation-menu/categories-modal";
-@import "sidebar/edit-navigation-modal-form/tags-form";
+@import "sidebar/edit-navigation-menu/tags-modal";
 @import "user-card";
 @import "user-info";
 @import "user-stream-item";

app/assets/stylesheets/mobile/components/_index.scss

@@ -1,5 +1,5 @@
-@import "sidebar/edit-navigation-modal-form/modal";
+@import "sidebar/edit-navigation-menu/modal";
-@import "sidebar/edit-navigation-modal-form/tags-form";
+@import "sidebar/edit-navigation-menu/tags-modal";
 @import "topic-footer-mobile-dropdown";
 @import "user-card";
 @import "user-stream-item";

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%;
+  }
+}

app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss

@@ -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%;
-  }
-}

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

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(
+        PageObjects::Components::SelectKit.new(".sidebar__edit-navigation-menu__filter-dropdown")
-          ".sidebar__edit-navigation-modal-form__filter-dropdown",
-        )
       end
     end
   end

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) &&
+        has_css?(".sidebar-tags-form .sidebar-tags-form__tag", count: tag_names.length) &&
-          all(".sidebar-tags-form-modal .sidebar-tags-form__tag").all? do |row|
+          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