Reverted collapsible design for Hazels

app/assets/javascripts/abuse_reports.js.es6

+((global) => {
+  const MAX_MESSAGE_LENGTH = 500;
+  const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
+
+  class AbuseReports {
+    constructor() {
+      $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
+      $(document)
+        .off('click', MESSAGE_CELL_SELECTOR)
+        .on('click', MESSAGE_CELL_SELECTOR, this.toggleMessageTruncation);
+    }
+
+    truncateLongMessage() {
+      let $messageCellElement = $(this);
+      let reportMessage = $messageCellElement.text();
+      if (reportMessage.length > MAX_MESSAGE_LENGTH) {
+        $messageCellElement.data('original-message', reportMessage);
+        $messageCellElement.data('message-truncated', 'true');
+        $messageCellElement.text(`${reportMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+      }
+    }
+
+    toggleMessageTruncation() {
+      let $messageCellElement = $(this);
+      let originalMessage = $messageCellElement.data('original-message');
+      if (!originalMessage) return;
+      if ($messageCellElement.data('message-truncated') === 'true') {
+        $messageCellElement.data('message-truncated', 'false');
+        $messageCellElement.text(originalMessage);
+      } else {
+        $messageCellElement.data('message-truncated', 'true');
+        $messageCellElement.text(`${originalMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+      }
+    }
+  }
+
+  global.AbuseReports = AbuseReports;
+})(window.gl);

app/assets/javascripts/dispatcher.js

@@ -193,7 +193,7 @@
                   new Labels();
               }
             case 'abuse_reports':
-              new AbuseReports();
+              new gl.AbuseReports();
               break;
           }
           break;

app/assets/javascripts/dispatcher.js.coffee

-$ ->
-  new Dispatcher()
-
-class Dispatcher
-  constructor: () ->
-    @initSearch()
-    @initPageScripts()
-
-  initPageScripts: ->
-    page = $('body').attr('data-page')
-
-    unless page
-      return false
-
-    path = page.split(':')
-    shortcut_handler = null
-    switch page
-      when 'projects:issues:index'
-        Issuable.init()
-        new IssuableBulkActions()
-        shortcut_handler = new ShortcutsNavigation()
-      when 'projects:issues:show'
-        new Issue()
-        shortcut_handler = new ShortcutsIssuable()
-        new ZenMode()
-      when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
-        new Milestone()
-      when 'dashboard:todos:index'
-        new Todos()
-      when 'projects:milestones:new', 'projects:milestones:edit'
-        new ZenMode()
-        new DueDateSelect()
-        new GLForm($('.milestone-form'))
-      when 'groups:milestones:new'
-        new ZenMode()
-      when 'projects:compare:show'
-        new Diff()
-      when 'projects:issues:new','projects:issues:edit'
-        shortcut_handler = new ShortcutsNavigation()
-        new GLForm($('.issue-form'))
-        new IssuableForm($('.issue-form'))
-      when 'projects:merge_requests:new', 'projects:merge_requests:edit'
-        new Diff()
-        shortcut_handler = new ShortcutsNavigation()
-        new GLForm($('.merge-request-form'))
-        new IssuableForm($('.merge-request-form'))
-      when 'projects:tags:new'
-        new ZenMode()
-        new GLForm($('.tag-form'))
-      when 'projects:releases:edit'
-        new ZenMode()
-        new GLForm($('.release-form'))
-      when 'projects:merge_requests:show'
-        new Diff()
-        shortcut_handler = new ShortcutsIssuable(true)
-        new ZenMode()
-        new MergedButtons()
-      when 'projects:merge_requests:commits', 'projects:merge_requests:builds'
-        new MergedButtons()
-      when "projects:merge_requests:diffs"
-        new Diff()
-        new ZenMode()
-        new MergedButtons()
-      when 'projects:merge_requests:index'
-        shortcut_handler = new ShortcutsNavigation()
-        Issuable.init()
-      when 'dashboard:activity'
-        new Activities()
-      when 'dashboard:projects:starred'
-        new Activities()
-      when 'projects:commit:show'
-        new Commit()
-        new Diff()
-        new ZenMode()
-        shortcut_handler = new ShortcutsNavigation()
-      when 'projects:commits:show', 'projects:activity'
-        shortcut_handler = new ShortcutsNavigation()
-      when 'projects:show'
-        shortcut_handler = new ShortcutsNavigation()
-
-        new NotificationsForm()
-        new TreeView() if $('#tree-slider').length
-      when 'groups:activity'
-        new Activities()
-      when 'groups:show'
-        shortcut_handler = new ShortcutsNavigation()
-        new NotificationsForm()
-        new NotificationsDropdown()
-      when 'groups:group_members:index'
-        new GroupMembers()
-        new UsersSelect()
-      when 'projects:project_members:index'
-        new ProjectMembers()
-        new UsersSelect()
-      when 'groups:new', 'groups:edit', 'admin:groups:edit', 'admin:groups:new'
-        new GroupAvatar()
-      when 'projects:tree:show'
-        shortcut_handler = new ShortcutsNavigation()
-        new TreeView()
-      when 'projects:find_file:show'
-        shortcut_handler = true
-      when 'projects:blob:show', 'projects:blame:show'
-        new LineHighlighter()
-        shortcut_handler = new ShortcutsNavigation()
-        new ShortcutsBlob true
-      when 'projects:labels:new', 'projects:labels:edit'
-        new Labels()
-      when 'projects:labels:index'
-        new LabelManager() if $('.prioritized-labels').length
-      when 'projects:network:show'
-        # Ensure we don't create a particular shortcut handler here. This is
-        # already created, where the network graph is created.
-        shortcut_handler = true
-      when 'projects:forks:new'
-        new ProjectFork()
-      when 'projects:artifacts:browse'
-        new BuildArtifacts()
-      when 'projects:group_links:index'
-        new GroupsSelect()
-      when 'search:show'
-        new Search()
-
-    switch path.first()
-      when 'admin'
-        new Admin()
-        switch path[1]
-          when 'groups'
-            new UsersSelect()
-          when 'projects'
-            new NamespaceSelects()
-          when 'abuse_reports'
-            new AbuseReports()
-      when 'dashboard', 'root'
-        shortcut_handler = new ShortcutsDashboardNavigation()
-      when 'profiles'
-        new NotificationsForm()
-        new NotificationsDropdown()
-      when 'projects'
-        new Project()
-        new ProjectAvatar()
-        switch path[1]
-          when 'compare'
-            new CompareAutocomplete()
-          when 'edit'
-            shortcut_handler = new ShortcutsNavigation()
-            new ProjectNew()
-          when 'new'
-            new ProjectNew()
-          when 'show'
-            new ProjectNew()
-            new ProjectShow()
-            new NotificationsDropdown()
-          when 'wikis'
-            new Wikis()
-            shortcut_handler = new ShortcutsNavigation()
-            new ZenMode()
-            new GLForm($('.wiki-form'))
-          when 'snippets'
-            shortcut_handler = new ShortcutsNavigation()
-            new ZenMode() if path[2] == 'show'
-          when 'labels', 'graphs', 'compare', 'pipelines', 'forks', \
-          'milestones', 'project_members', 'deploy_keys', 'builds', \
-          'hooks', 'services', 'protected_branches'
-            shortcut_handler = new ShortcutsNavigation()
-
-    # If we haven't installed a custom shortcut handler, install the default one
-    if not shortcut_handler
-      new Shortcuts()
-
-  initSearch: ->
-
-    # Only when search form is present
-    new SearchAutocomplete() if $('.search').length

app/assets/stylesheets/pages/admin.scss

@@ -99,29 +99,25 @@
 }
 
 .abuse-reports {
-  .btn-group {
-    margin-top: 4px;
+  table-layout: fixed;
+  .action-buttons a {
+    white-space: normal;
   }
-  .panel-body {
-    max-height: 300px;
-    overflow-y: scroll;
+  th {
+    width: 15%;
+    &.wide {
+      width: 55%;
     }
-  .panel-heading {
-    position: relative;
   }
-  .clickable-entity {
-    display: inline;
-    position: relative;
-    z-index: 2;
+  @media (max-width: $screen-sm-max) {
+    th {
+      width: 100%;
+    }
+    td {
+      width: 100%;
+      float: left;
     }
-  .clickable-title {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
   }
-
   .no-reports {
     .emoji-icon {
       margin-left: $btn-side-margin;

app/views/admin/abuse_reports/_abuse_report.html.haml

 - reporter = abuse_report.reporter
 - user = abuse_report.user
-
-.panel.panel-default
-  .panel-heading{ id: "heading#{ abuse_report_counter }", role: 'tab' }
-    .panel-title
-      %a.clickable-title{ role: 'button', href: "#collapse#{ abuse_report_counter }", data: { toggle: 'collapse', parent: '#accordion' }, aria: { expanded: 'true', controls: "collapse#{ abuse_report_counter }" } }
+%tr
+  %th.visible-xs-block.visible-sm-block User
+  %td
     - if user
-        = link_to user.name, user, { class: 'clickable-entity', data: { toggle: 'tooltip', placement: 'bottom', title: "Joined #{user.created_at}" } }
+      = link_to user.name, user
+      .light.small
+        Joined #{time_ago_with_tooltip(user.created_at)}
     - else
       (removed)
-      reported by
+  %td
+    %strong.visible-xs-block.visible-sm-block Reported by
     - if reporter
-        = link_to reporter.name, reporter, { class: 'clickable-entity' }
+      = link_to reporter.name, reporter
     - else
       (removed)
-      .light.small.clickable-entity
+    .light.small
       = time_ago_with_tooltip(abuse_report.created_at)
-      .btn-group.pull-right
+  %td
+    %strong.visible-xs-block.visible-sm-block Message
+    .message
+      = markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
+  %td
     - if user
       = link_to 'Remove user & report', admin_abuse_report_path(abuse_report, remove_user: true),
-            data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, remote: true, method: :delete, class: 'btn btn-sm btn-remove js-remove-tr'
+        data: { confirm: "USER #{user.name} WILL BE REMOVED! Are you sure?" }, remote: true, method: :delete, class: "btn btn-sm btn-block btn-remove js-remove-tr"
     - if user && !user.blocked?
-          = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: 'btn btn-sm'
+      = link_to 'Block user', block_admin_user_path(user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-sm btn-block"
     - else
-          .btn.btn-sm.disabled
+      .btn.btn-sm.disabled.btn-block
         Already Blocked
-        = link_to 'Remove report', [:admin, abuse_report], remote: true, method: :delete, class: 'btn btn-sm btn-close js-remove-tr'
-      .clearfix
-  .panel-collapse.collapse{ id: "collapse#{ abuse_report_counter }", class: (abuse_report_counter == 0 ? 'in' : ''), role: 'tabpanel', aria: { labelledby: "heading#{ abuse_report_counter }" } }
-    .panel-body
-      = markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
+    = link_to 'Remove report', [:admin, abuse_report], remote: true, method: :delete, class: "btn btn-sm btn-block btn-close js-remove-tr"

app/views/admin/abuse_reports/index.html.haml

@@ -3,9 +3,15 @@
 %hr
 .abuse-reports
   - if @abuse_reports.present?
-    .panel-group#accordion{ role: 'tablist', aria: { multiselectable: 'true' } }
+    .table-holder
+      %table.table
+        %thead.hidden-sm.hidden-xs
+          %tr
+            %th User
+            %th Reported by
+            %th.wide Message
+            %th Action
         = render @abuse_reports
-    = paginate @abuse_reports
   - else
     .no-reports
       %span.pull-left