3032 support favorites in path selector (#3173)

* Adds favorites column to path_selector modal

* Lists filePickerFavorites in Favorites section of path selector

* Makes favorites work with filePickerFavorites - rough

* Adds list of favorites as defined by OodFilesApp

* Removes debug cruft

* Uses partial for favorites in path_selector

* Changes interface expectation for favorites, uses files_path helper

* Fixes variable declaration in js

* Removes unnecessary fs fallback in view

* Accepts 'favorites: false' or undefined favorites

* Moves logic for defining favorites to helper

* Allow for favorites: false to hide favorites entirely

* Changes .fetch to .try so we can differentiate 'false' from 'nil' for favorites

* Fixes try method call

* Fixes logic in helper, fixes styling

apps/dashboard/app/helpers/batch_connect/session_contexts_helper.rb

@@ -136,4 +136,13 @@ def resolution_field(form, id, opts = {})
       )
     end
   end
+
+  def pathselector_favorites(favorites)
+    # If favorites is false, return nil
+    if favorites.nil?
+      OodFilesApp.new.favorite_paths.reject(&:remote?)
+    elsif favorites
+      favorites.map { |f| FavoritePath.new(f) }
+    end
+  end
 end

apps/dashboard/app/javascript/path_selector/path_selector.js

@@ -23,15 +23,15 @@ function makeTable(element) {
 function getPathSelectorOptions(element) {
   options = {};
 
-  options.filesPath         = element.dataset['filesPath'];
-  options.initialDirectory  = element.dataset['initialDirectory'];
-  options.tableId           = element.dataset['tableId'];
-  options.breadcrumbId      = element.dataset['breadcrumbId'];
-  options.selectButtonId    = element.dataset['selectButtonId'];
-  options.inputFieldId      = element.dataset['inputFieldId'];
-  options.showFiles         = element.dataset['showFiles'];
-  options.showHidden        = element.dataset['showHidden'];
-  options.modalId           = element.id;
+  options.filesPath           = element.dataset['filesPath'];
+  options.initialDirectory    = element.dataset['initialDirectory'];
+  options.tableId             = element.dataset['tableId'];
+  options.breadcrumbId        = element.dataset['breadcrumbId'];
+  options.selectButtonId      = element.dataset['selectButtonId'];
+  options.inputFieldId        = element.dataset['inputFieldId'];
+  options.showFiles           = element.dataset['showFiles'];
+  options.showHidden          = element.dataset['showHidden'];
+  options.modalId             = element.id;
 
   return options;
 }

apps/dashboard/app/javascript/path_selector/path_selector_data_table.js

@@ -3,37 +3,37 @@ export class PathSelectorTable {
   _table = null;
 
   // input data that should be passed into the constructor
-  tableId           = undefined;
-  filesPath         = undefined;
-  breadcrumbId      = undefined;
-  initialDirectory  = undefined;
-  selectButtonId    = undefined;
-  inputFieldId      = undefined;
-  modalId           = undefined;
-  showHidden        = undefined;
-  showFiles         = undefined;
+  tableId             = undefined;
+  filesPath           = undefined;
+  breadcrumbId        = undefined;
+  initialDirectory    = undefined;
+  selectButtonId      = undefined;
+  inputFieldId        = undefined;
+  modalId             = undefined;
+  showHidden          = undefined;
+  showFiles           = undefined;
 
   constructor(options) {
-      this.tableId            = options.tableId;
-      this.filesPath          = options.filesPath;
-      this.breadcrumbId       = options.breadcrumbId;
-      this.initialDirectory   = options.initialDirectory;
-      this.selectButtonId     = options.selectButtonId;
-      this.inputFieldId       = options.inputFieldId;
-      this.modalId            = options.modalId;
-      this.showHidden         = options.showHidden === 'true';
-      this.showFiles          = options.showFiles === 'true';
+      this.tableId             = options.tableId;
+      this.filesPath           = options.filesPath;
+      this.breadcrumbId        = options.breadcrumbId;
+      this.initialDirectory    = options.initialDirectory;
+      this.selectButtonId      = options.selectButtonId;
+      this.inputFieldId        = options.inputFieldId;
+      this.modalId             = options.modalId;
+      this.showHidden          = options.showHidden === 'true';
+      this.showFiles           = options.showFiles === 'true';
 
       this.initDataTable();
       this.reloadTable(this.initialUrl());
 
       $(`#${this.tableId} tbody`).on('click', 'tr', (event) => { this.clickRow(event) });
+      $('#favorites').on('click', 'li', (event) => { this.clickRow(event) });
       $(`#${this.breadcrumbId}`).on('click', 'li', (event) => { this.clickBreadcrumb(event) });
       $(`#${this.selectButtonId}`).on('click', (event) => { this.selectPath(event) });
   }
 
   initDataTable() {
-
     this._table = $(`#${this.tableId}`).DataTable({
       autoWidth: false,
       language: {
@@ -54,7 +54,7 @@ export class PathSelectorTable {
       // https://datatables.net/reference/option/dom
       // dom: '', dataTables_info nowrap
       //
-      // put breadcrmbs below filter!!!
+      // put breadcrumbs below filter!!!
       dom: "<'row'<'col-sm-12'f>>" + // normally <'row'<'col-sm-6'l><'col-sm-6'f>> but we disabled pagination so l is not needed (dropdown for selecting # rows)
           "<'row'<'col-sm-12'<'dt-status-bar'<'datatables-status float-right'><'transfers-status'>>>>" +
           "<'row'<'col-sm-12'tr>>", // normally this is <'row'<'col-sm-5'i><'col-sm-7'p>> but we disabled pagination so have info take whole row
@@ -121,7 +121,7 @@ export class PathSelectorTable {
   }
 
   clickRow(event) {
-    const row = $(event.target).closest('tr').get(0);
+    const row = $(event.target).closest('tr').get(0) || event.target;
     const url = row.dataset['apiUrl'];
     const pathType = row.dataset['pathType'];
 
@@ -201,4 +201,4 @@ export class PathSelectorTable {
     data.files = filteredFiles;
     return data;
   }
-}
+}

apps/dashboard/app/views/batch_connect/session_contexts/_favorites.html.erb

@@ -0,0 +1,5 @@
+<li role='button'
+  class='clickable text-wrap list-group-item' 
+  data-api-url=<%= files_path(path.to_s, fs: path.filesystem) %>>
+  <span class='fa fa-folder'>&nbsp;</span><%= path %>
+</li>

apps/dashboard/app/views/batch_connect/session_contexts/_path_selector.html.erb

@@ -2,6 +2,7 @@
   show_hidden = field_options.fetch(:show_hidden, false)
   show_files = field_options.fetch(:show_files, true)
   inital_directory = field_options.fetch(:directory, CurrentUser.home)
+  favorites = pathselector_favorites(field_options.try(:[], :favorites))
 
   input_field_id = "#{form.object_name}_#{attrib.id}"
   path_selector_id = "#{input_field_id}_path_selector"
@@ -39,30 +40,47 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">       
-        <div>
-          <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
-          </ol>
+      <div class="modal-body">
+
+        <div class="container-fluid">
+          <div class="row">
+          <% if favorites %>
+            <div class="col-sm-5">
+              <div class="panel panel-default">
+                <div class="panel-heading">Favorites</div>
+                <ol id="favorites" class="list-group text-nowrap">
+                  <%= render partial: 'favorites', collection: favorites, as: :path %>
+                </ol>
+              </div>
+            </div>
+          <% end %>
+
+
+            <div class="<%= favorites ? 'col-sm-7' : 'col-sm-12' %>">
+              <ol id="<%= breadcrumb_id %>" class="breadcrumb breadcrumb-no-delimiter">
+              </ol>
 
-          <div class="d-none alert alert-warning" role="alert" id="forbidden-warning">
-            <%= t('dashboard.batch_connect_sessions_path_selector_forbidden_error') %>
-          </div>
+              <div class="d-none alert alert-warning" role="alert" id="forbidden-warning">
+                <%= t('dashboard.batch_connect_sessions_path_selector_forbidden_error') %>
+              </div>
 
-          <div class="d-flex justify-content-center">
-            <div id="loading-icon" class="spinner-border rem-5" role="status">
-              <span class="sr-only">Loading...</span> 
+              <div class="d-flex justify-content-center">
+                <div id="loading-icon" class="spinner-border rem-5" role="status">
+                  <span class="sr-only">Loading...</span> 
+                </div>
+              </div>
+              <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
+                <thead>
+                  <tr>
+                    <th>Type</th>
+                    <th>Name</th>
+                  </tr>
+                </thead>
+                <tbody>
+                </tbody>
+              </table>
             </div>
           </div>
-          <table class="table table-hover table-condensed d-table w-100" id="<%= table_id %>">
-            <thead>
-              <tr>
-                <th>Type</th>
-                <th>Name</th>
-              </tr>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
         </div>
       </div>
       <div class="modal-footer sticky-footer">