Merge branch 'imrishabh18-325921' into 'master'

Use prefix js- to class names

See merge request gitlab-org/gitlab!71546

app/assets/javascripts/right_sidebar.js

@@ -111,7 +111,7 @@ Sidebar.prototype.toggleTodo = function (e) {
 };
 
 Sidebar.prototype.sidebarCollapseClicked = function (e) {
-  if ($(e.currentTarget).hasClass('dont-change-state')) {
+  if ($(e.currentTarget).hasClass('js-dont-change-state')) {
     return;
   }
   const sidebar = e.data;

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -41,7 +41,7 @@ export default {
   computed: {
     buttonClasses() {
       return this.collapsed
-        ? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
+        ? 'btn-blank btn-todo sidebar-collapsed-icon js-dont-change-state'
         : 'gl-button btn btn-default btn-todo issuable-header-btn float-right';
     },
     buttonLabel() {

app/assets/javascripts/vue_shared/components/sidebar/copyable_field.vue

@@ -62,7 +62,7 @@ export default {
   <div>
     <clipboard-button
       v-if="!isLoading"
-      css-class="sidebar-collapsed-icon dont-change-state gl-rounded-0! gl-hover-bg-transparent"
+      css-class="sidebar-collapsed-icon js-dont-change-state gl-rounded-0! gl-hover-bg-transparent"
       v-bind="clipboardProps"
     />
 

app/views/shared/issuable/_sidebar.html.haml

@@ -75,7 +75,7 @@
         #js-reference-entry-point
         - if issuable_type == 'merge_request'
           .sub-block.js-sidebar-source-branch
-            .sidebar-collapsed-icon.dont-change-state
+            .sidebar-collapsed-icon.js-dont-change-state
               = clipboard_button(text: source_branch, title: _('Copy branch name'), placement: "left", boundary: 'viewport')
             .gl-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-mb-2.hide-collapsed
               %span.gl-overflow-hidden.gl-text-overflow-ellipsis.gl-white-space-nowrap

app/views/shared/milestones/_sidebar.html.haml

@@ -161,7 +161,7 @@
     - milestone_ref = milestone.try(:to_reference, full: true)
     - if milestone_ref.present?
       .block.reference
-        .sidebar-collapsed-icon.dont-change-state
+        .sidebar-collapsed-icon.js-dont-change-state
           = clipboard_button(text: milestone_ref, title: s_('MilestoneSidebar|Copy reference'), placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
           %span.gl-display-inline-block.gl-text-truncate

spec/frontend/sidebar/todo_spec.js

@@ -27,7 +27,7 @@ describe('SidebarTodo', () => {
   it.each`
     state    | classes
     ${false} | ${['gl-button', 'btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
-    ${true}  | ${['btn-blank', 'btn-todo', 'sidebar-collapsed-icon', 'dont-change-state']}
+    ${true}  | ${['btn-blank', 'btn-todo', 'sidebar-collapsed-icon', 'js-dont-change-state']}
   `('returns todo button classes for when `collapsed` prop is `$state`', ({ state, classes }) => {
     createComponent({ collapsed: state });
     expect(wrapper.find('button').classes()).toStrictEqual(classes);