Convert data attributes in search_bar.html.haml

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

@@ -14,18 +14,18 @@
           .scroll-container
             %ul.tokens-container.list-unstyled
               %li.input-token
-                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', 'data-id' => 'filtered-search', 'data-project-id' => @project.id, 'data-username-params' => @users.to_json(only: [:id, :username]), 'data-base-endpoint' => namespace_project_path(@project.namespace, @project) }
+                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: 'filtered-search', 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
             = icon('filter')
             %button.clear-search.hidden{ type: 'button' }
               = icon('times')
           #js-dropdown-hint.dropdown-menu.hint-dropdown
-            %ul{ 'data-dropdown' => true }
-              %li.filter-dropdown-item{ 'data-action' => 'submit' }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { action: 'submit' } }
                 %button.btn.btn-link
                   = icon('search')
                   %span
                     Keep typing and press Enter
-            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
                 %button.btn.btn-link
                   -# Encapsulate static class name `{{icon}}` inside #{} to bypass
@@ -36,50 +36,50 @@
                   %span.js-filter-tag.dropdown-light-content
                     {{tag}}
           #js-dropdown-author.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
-            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
                 %button.btn.btn-link.dropdown-user
-                  %img.avatar{ 'data-src' => '{{avatar_url}}', alt: '{{name}}\'s avatar', width: '30' }
+                  %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
                   .dropdown-user-details
                     %span
                       {{name}}
                     %span.dropdown-light-content
                       @{{username}}
           #js-dropdown-assignee.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
-            %ul{ 'data-dropdown' => true }
-              %li.filter-dropdown-item{ 'data-value' => 'none' }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
                 %button.btn.btn-link
                   No Assignee
               %li.divider
-            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
                 %button.btn.btn-link.dropdown-user
-                  %img.avatar{ 'data-src' => '{{avatar_url}}', alt: '{{name}}\'s avatar', width: '30' }
+                  %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
                   .dropdown-user-details
                     %span
                       {{name}}
                     %span.dropdown-light-content
                       @{{username}}
           #js-dropdown-milestone.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
-            %ul{ 'data-dropdown' => true }
-              %li.filter-dropdown-item{ 'data-value' => 'none' }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
                 %button.btn.btn-link
                   No Milestone
-              %li.filter-dropdown-item{ 'data-value' => 'upcoming' }
+              %li.filter-dropdown-item{ data: { value: 'upcoming' } }
                 %button.btn.btn-link
                   Upcoming
               %li.divider
-            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
                 %button.btn.btn-link.js-data-value
                   {{title}}
           #js-dropdown-label.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label' } }
-            %ul{ 'data-dropdown' => true }
-              %li.filter-dropdown-item{ 'data-value' => 'none' }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
                 %button.btn.btn-link
                   No Label
               %li.divider
-            %ul.filter-dropdown{ 'data-dynamic' => true, 'data-dropdown' => true }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
               %li.filter-dropdown-item
                 %button.btn.btn-link
                   %span.dropdown-label-box{ style: 'background: {{color}}' }