From 305373232182f5c4d9d9b09548054cfb98c2699a Mon Sep 17 00:00:00 2001
From: Jason Crome <jcrome@bestpractical.com>
Date: Tue, 14 Feb 2023 16:54:38 -0500
Subject: [PATCH] Create UI for adjusting dashboard column width

Users with accessibility concerns can either tab onto the slider and
move it with the arrow keys, or tab into one of the width text boxes and
enter the number of columns manually.

This only appears on the dashboard configuration page, and assumes that
dashboards will be two columns wide.
---
 lib/RT/Dashboard.pm                           | 18 ++++-
 lib/RT/Interface/Web.pm                       |  8 +-
 share/html/Dashboards/Queries.html            | 11 ++-
 share/html/Dashboards/Render.html             |  8 +-
 share/html/Elements/MyRT                      |  8 +-
 share/html/Widgets/SearchSelection            | 81 +++++++++++++++++++
 .../static/css/elevator-light/dashboards.css  | 24 ++++++
 7 files changed, 147 insertions(+), 11 deletions(-)

diff --git a/lib/RT/Dashboard.pm b/lib/RT/Dashboard.pm
index 897cb9cade0..c8bd1319627 100644
--- a/lib/RT/Dashboard.pm
+++ b/lib/RT/Dashboard.pm
@@ -104,7 +104,10 @@ sub SaveAttribute {
     return $object->AddAttribute(
         'Name'        => 'Dashboard',
         'Description' => $args->{'Name'},
-        'Content'     => {Panes => $args->{'Panes'}},
+        'Content'     => {
+            Panes => $args->{'Panes'},
+            Width => $args->{'Width'},
+        },
     );
 }
 
@@ -116,6 +119,7 @@ sub UpdateAttribute {
     if (defined $args->{'Panes'}) {
         ($status, $msg) = $self->{'Attribute'}->SetSubValues(
             Panes => $args->{'Panes'},
+            Width => $args->{'Width'},
         );
     }
 
@@ -178,6 +182,18 @@ sub Portlets {
     return map { @$_ } values %{ $self->Panes };
 }
 
+=head2 Width
+
+Returns a hashref of column widths
+
+=cut
+
+sub Width {
+    my $self = shift;
+    return unless ref($self->{'Attribute'}) eq 'RT::Attribute';
+    return $self->{'Attribute'}->SubValue('Width') || {};
+}
+
 =head2 Dashboards
 
 Returns a list of loaded sub-dashboards
diff --git a/lib/RT/Interface/Web.pm b/lib/RT/Interface/Web.pm
index 048527213ad..7718e619183 100644
--- a/lib/RT/Interface/Web.pm
+++ b/lib/RT/Interface/Web.pm
@@ -4967,7 +4967,11 @@ sub UpdateDashboard {
         "panes"        => {
             "body"    => [],
             "sidebar" => []
-        }
+        },
+        "width" => {
+            body    => $args->{body_width},
+            sidebar => $args->{sidebar_width},
+        },
     };
 
     foreach my $arg (qw{ body sidebar }) {
@@ -5044,7 +5048,7 @@ sub UpdateDashboard {
         $content->{$pane_name} = \@pane;
     }
 
-    return ( $ok, $msg ) = $Dashboard->Update( Panes => $content );
+    return ( $ok, $msg ) = $Dashboard->Update( Panes => $content, Width => $data->{ width } );
 }
 
 =head2 ListOfReports
diff --git a/share/html/Dashboards/Queries.html b/share/html/Dashboards/Queries.html
index 3986c60991f..98d5245fb72 100644
--- a/share/html/Dashboards/Queries.html
+++ b/share/html/Dashboards/Queries.html
@@ -51,10 +51,13 @@
 
 <form method="post" name="UpdateSearches" class="mx-auto max-width-lg">
   <& /Widgets/SearchSelection,
-    pane_name => \%pane_name,
-    sections  => \@sections,
-    selected  => \%selected,
-    filters   => \@filters,
+    pane_name       => \%pane_name,
+    sections        => \@sections,
+    selected        => \%selected,
+    filters         => \@filters,
+    dashboard_setup => 1,
+    body_width      => $Dashboard->Width->{ body },
+    sidebar_width   => $Dashboard->Width->{ sidebar },
   &>
   <& /Elements/Submit, Name => "UpdateSearches", Label => loc('Save') &>
 </form>
diff --git a/share/html/Dashboards/Render.html b/share/html/Dashboards/Render.html
index 76f2b72dc03..371124161d8 100644
--- a/share/html/Dashboards/Render.html
+++ b/share/html/Dashboards/Render.html
@@ -74,12 +74,12 @@
 
 % my $body = $show_cb->('body');
 % my $sidebar = $show_cb->('sidebar');
-  <div class="col-<% $sidebar =~ /\S/ ? 8 : 12 %>">
+  <div class="col-<% $sidebar =~ /\S/ ? $body_width : 12 %>">
     <% $body |n %>
   </div>
 
 % if ( $sidebar =~ /\S/ ) {
-  <div class="col-4">
+  <div class="col-<% $sidebar_width %>">
     <% $sidebar |n %>
   </div>
 % }
@@ -150,6 +150,10 @@
     Abort(loc("Could not load dashboard [_1]", $id), Code => HTTP::Status::HTTP_NOT_FOUND);
 }
 
+# Pick reasonable defaults
+my $body_width    = $Dashboard->Width->{body}    // 8;
+my $sidebar_width = $Dashboard->Width->{sidebar} // 4;
+
 my $path = '/Dashboards/' . $Dashboard->id . '/' . $Dashboard->Name;
 unless ( $skip_create ) {
     push @results, ProcessQuickCreate( Path => $path, ARGSRef => \%ARGS );
diff --git a/share/html/Elements/MyRT b/share/html/Elements/MyRT
index 4cc8eb92ba4..d066b0fe065 100644
--- a/share/html/Elements/MyRT
+++ b/share/html/Elements/MyRT
@@ -48,12 +48,12 @@
 % $m->callback( ARGSRef => \%ARGS, CallbackName => 'BeforeTable' );
 <div class="myrt row">
 
-<div class="<% 'boxcontainer col-md-' . ( $sidebar ? '8' : '12' ) %>">
+<div class="<% 'boxcontainer col-md-' . ( $sidebar ? $body_width : '12' ) %>">
 % $show_cb->($_) foreach @$body;
 </div>
 
 % if ( $sidebar ) {
-<div class="boxcontainer col-md-4">
+<div class="boxcontainer col-md-<% $sidebar_width %>">
 % $show_cb->($_) foreach @$sidebar;
 </div>
 % }
@@ -61,6 +61,8 @@
 </div>
 % $m->callback( ARGSRef => \%ARGS, CallbackName => 'AfterTable' );
 <%INIT>
+my $body_width = 8;
+my $sidebar_width = 4;
 
 my %allowed_components = map {$_ => 1} @{RT->Config->Get('HomepageComponents')};
 
@@ -95,6 +97,8 @@ unless ( $Portlets ) {
         }
     }
     $Portlets = $dashboard->Panes;
+    $body_width    = $dashboard->Width->{body}    // 8;
+    $sidebar_width = $dashboard->Width->{sidebar} // 4;
 }
 
 $m->callback( CallbackName => 'MassagePortlets', Portlets => $Portlets );
diff --git a/share/html/Widgets/SearchSelection b/share/html/Widgets/SearchSelection
index 266ecab2b0c..4edf0bf5109 100644
--- a/share/html/Widgets/SearchSelection
+++ b/share/html/Widgets/SearchSelection
@@ -85,7 +85,58 @@
         </div>
       </div>
     </div>
+%   if ($dashboard_setup) {
+    <script type="text/javascript">
+      jQuery(window).on('load', function() {
+          var validateWidth = function (cols) {
+              if(!jQuery.isNumeric(cols)) { return 0; }
+              if(cols < 0) { cols = 0; }
+              if(cols > 12) { cols = 12; }
+              return cols;
+          }
 
+          jQuery("#slider-body-width").slider({
+              range: 'min',
+              min: 0,
+              max: 12,
+              value: <% $body_width %>,
+              slide: function(event, ui) {
+                  jQuery("#body-width").val(ui.value);
+                  jQuery("#sidebar-width").val(12 - ui.value);
+                  jQuery("#slider-sidebar-width").slider("value", 12 - ui.value);
+              }
+          });
+          jQuery("#body-width").val(jQuery("#slider-body-width").slider("value"));
+          jQuery("#body-width").change(function() {
+              var cols = validateWidth( jQuery(this).val() );
+              jQuery(this).val(cols);
+              jQuery("#slider-body-width").slider("value", cols);
+              jQuery("#sidebar-width").val(12 - cols);
+              jQuery("#slider-sidebar-width").slider("value", 12 - cols);
+          });
+
+          jQuery("#slider-sidebar-width").slider({
+              range: 'min',
+              min: 0,
+              max: 12,
+              value: <% $sidebar_width %>,
+              slide: function(event, ui) {
+                  jQuery("#sidebar-width").val(ui.value);
+                  jQuery("#body-width").val(12 - ui.value);
+                  jQuery("#slider-body-width").slider("value", 12 - ui.value);
+              }
+          });
+          jQuery("#sidebar-width").val(jQuery("#slider-sidebar-width").slider("value"));
+          jQuery("#sidebar-width").change(function() {
+              var cols = validateWidth(jQuery(this).val());
+              jQuery(this).val(cols);
+              jQuery("#slider-body-width").slider("value", 12 - cols);
+              jQuery("#body-width").val(12 - cols);
+              jQuery("#slider-sidebar-width").slider("value", cols);
+        });
+      });
+    </script>
+%   }
     <div class="col-6">
       <div class="destinations">
 %     for my $pane (sort keys %pane_name) {
@@ -100,6 +151,22 @@
              </ul>
             </div>
           </div>
+%         if ( $dashboard_setup ) {
+          <div class="form-row width-slider-wrapper">
+            <div class="form-group mx-auto">
+              <div id="slider-<% $pane %>-width" class="width-slider"></div>
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><% loc("[_1] Width:", ucfirst $pane) %></span>
+                </div>
+                <input type="number" min="0" max="12" step="1" class="form-control" name="<% $pane %>_width" id="<% $pane %>-width" />
+                <div class="input-group-prepend">
+                  <span class="input-group-text"><% loc('/ 12 Columns') %></span>
+                </div>
+              </div>
+            </div>
+          </div>
+%         }
         </div>
 %   }
       </div>
@@ -109,6 +176,19 @@
 
 <%INIT>
 use utf8;
+
+# Defaults needed here so the editor controls can setup properly for dashboards
+# without column widths that are explicitly set.
+my ( $body_width, $sidebar_width );
+if ( $dashboard_setup ) {
+    $body_width    = $ARGS{ body_width } // 8;
+    $sidebar_width = $ARGS{ sidebar_width } // 4;
+} else {
+    # This is some other use of this widget; not for setting up a dashboard
+    $body_width    = 12;
+    $sidebar_width = 0;
+}
+
 $m->callback(
     CallbackName => 'Default',
     sections     => \@sections,
@@ -121,4 +201,5 @@ $m->callback(
 @filters
 @sections
 %selected
+$dashboard_setup => 0
 </%ARGS>
diff --git a/share/static/css/elevator-light/dashboards.css b/share/static/css/elevator-light/dashboards.css
index 731c36cd038..00c5821c7ce 100644
--- a/share/static/css/elevator-light/dashboards.css
+++ b/share/static/css/elevator-light/dashboards.css
@@ -5,3 +5,27 @@ table.dashboard {
 #body>table.dashboard {
     margin-top: inherit
 }
+
+/* Dashboard sliders */
+.ui-slider-handle {
+  padding-top: 15px;
+  padding-bottom: 5px;
+}
+
+.width-slider {
+  margin-top: 10px;
+  padding-top: 15px;
+  padding-bottom 15px;
+}
+
+.selectionbox-js .width-slider-wrapper .input-group > .input-group-prepend > .input-group-text {
+  margin-top: 15px;
+  background-color: #fff;
+  border: none;
+}
+
+.selectionbox-js .width-slider-wrapper .form-group > .input-group > .form-control {
+  margin-top: 15px;
+  border-radius: .25rem !important;
+  width: 50px;
+}