Merge pull request #44 from DigitalNZ/pm/list-page

IMPROVE PIPELINE LIST PAGE: As Tim, I want to be able to search across Pipelines, so I can find examples and get where I need to go as easily as possible.

app/controllers/concerns/user_authorization.rb

@@ -14,6 +14,7 @@ def setup_two_factor_authentication
     excluded_paths = ['/users/sign_in', '/users/sign_out', '/users/password/new', '/users/invitation',
                       '/users/invitation/accept']
 
+    return if current_user.blank?
     return if excluded_paths.include?(request.path)
     return unless current_user.enforce_two_factor?
     return if current_user.two_factor_setup?

app/controllers/pipelines_controller.rb

@@ -3,11 +3,10 @@
 class PipelinesController < ApplicationController
   include LastEditedBy
 
-  before_action :assign_sort_by, only: %w[index create]
   before_action :find_pipeline, only: %w[show destroy edit update clone]
 
   def index
-    @pipelines = Pipeline.order(@sort_by).page(params[:page])
+    @pipelines = pipelines
     @pipeline = Pipeline.new
   end
 
@@ -33,7 +32,7 @@ def create
       redirect_to pipeline_path(@pipeline), notice: t('.success')
     else
       flash.alert = t('.failure')
-      @pipelines = Pipeline.order(@sort_by).page(params[:page])
+      @pipelines = pipelines
       render :index
     end
   end
@@ -78,9 +77,12 @@ def find_pipeline
     @pipeline = Pipeline.find(params[:id])
   end
 
-  def assign_sort_by
-    @sort_by = { name: :asc }
-    @sort_by = { updated_at: :desc } if params['sort_by'] == 'updated_at'
+  def pipelines
+    PipelineSearchQuery.new(params).call.order(sort_by).page(params[:page])
+  end
+
+  def sort_by
+    @sort_by ||= params['sort_by'] == 'name' ? { name: :asc } : { updated_at: :desc }
   end
 
   def pipeline_params

app/frontend/entrypoints/application.js

@@ -31,13 +31,14 @@ console.log(
 // import '~/index.css'
 
 import * as bootstrap from "bootstrap";
+import "/js/ClearField";
 import "/js/TestRecordExtraction";
 import "/js/TestEnrichmentExtraction";
 import "/js/TestTransformationRecordSelector";
 import "/js/TestDestination";
 import "/js/Tooltips";
 import "/js/CollapseScroll";
-import "/js/ContentSourceFilter";
+import "/js/SubmittingSelect";
 import "/js/CreateModal";
 import "/js/AutoComplete";
 

app/frontend/entrypoints/application.scss

@@ -1,16 +1,13 @@
 // Modules
-
 @import "../stylesheets/modules/colors";
 @import "../stylesheets/modules/fonts";
 
 // Libraries
-
 @import "~bootstrap/scss/bootstrap";
 @import "~bootstrap-icons/font/bootstrap-icons.min";
 @import "~autoComplete/dist/css/autoComplete.css";
 
 // Mixins
-
 @import "../stylesheets/mixins/bem";
 
 // Bootstrap overrides
@@ -25,19 +22,17 @@
 @import "../stylesheets/bootstrap/accordion";
 
 // Library overrides
-
 @import "../stylesheets/autocomplete/autocomplete";
 
-
 // Blocks
-
+@import "../stylesheets/blocks/card-link";
+@import "../stylesheets/blocks/definition-group";
 @import "../stylesheets/blocks/field-nav";
 @import "../stylesheets/blocks/field-nav-panel";
 @import "../stylesheets/blocks/form-in-dropdown";
+@import "../stylesheets/blocks/harvest-card";
 @import "../stylesheets/blocks/header";
 @import "../stylesheets/blocks/jump-to";
 @import "../stylesheets/blocks/record-view";
-@import "../stylesheets/blocks/definition-group";
+@import "../stylesheets/blocks/search";
 @import "../stylesheets/blocks/table";
-
-@import "../stylesheets/base";

app/frontend/js/ClearField.js

@@ -0,0 +1,14 @@
+const clearButtons = document.querySelectorAll("[data-clear-field]");
+
+clearButtons.forEach(function (clearButton) {
+  clearButton.addEventListener("click", (event) => {
+    const form = event.target.closest("form");
+    const fieldNameToClear = event.target.dataset.clearField;
+    const fieldToClear = form.querySelector(
+      `input[name="${fieldNameToClear}"]`
+    );
+
+    fieldToClear.value = "";
+    form.submit();
+  });
+});

app/frontend/js/SubmittingSelect.js

@@ -0,0 +1,11 @@
+const selectElements = document.querySelectorAll(
+  '[data-submitting-select="true"]'
+);
+
+selectElements.forEach(function (selectElement) {
+  const form = selectElement.closest("form");
+
+  selectElement.addEventListener("change", () => {
+    form.submit();
+  });
+});

app/frontend/js/components/SharedDefinitionsView.jsx

@@ -16,7 +16,7 @@ const SharedDefinitionsView = ({ definitionType }) => {
           return (
             <div className="col-3" key={sharedDefinition.id}>
               <a
-                className="card mb-3"
+                className="card card--clickable mb-3"
                 href={`/pipelines/${sharedDefinition.pipeline.id}`}
               >
                 <div className="card-body">

app/frontend/stylesheets/blocks/_card-link.scss

@@ -0,0 +1,22 @@
+// this is used to make a card which has interactive elements
+// clickable without breaking a11y
+// See https://inclusive-components.design/cards/
+.card--clickable {
+  &:hover {
+    border-color: $primary;
+  }
+
+  .card__link {
+    color: var(--bs-card-color);
+    text-decoration: none;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}

app/frontend/stylesheets/blocks/_harvest-card.scss

@@ -0,0 +1,33 @@
+.harvest-card {
+  @include element('actions') {
+    position: absolute;
+    right: 0rem;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 2.25rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  @include element('actions-toggle') {
+    border: none;
+  }
+
+  @include element('action') {
+    padding: .625rem 1rem;
+  }
+
+  @include element('right-arrow') {
+    position: absolute;
+    right: -1.5rem;
+    top: 0;
+    bottom: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: auto;
+    color: $primary;
+  }
+}

app/frontend/stylesheets/blocks/_search.scss

@@ -0,0 +1,51 @@
+.search {
+  position: relative;
+
+  @include element('label') {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: .4rem $form-floating-padding-x;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    border: 1px solid transparent;
+  }
+
+  &__input {
+    width: 22rem;
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus ~ .search__label, &:not(:placeholder-shown) ~ .search__label {
+      display: none;
+    }
+  }
+
+  @include element('clear') {
+    position: absolute;
+    top: 0;
+    right: .5rem;
+    margin-top: .3rem;
+
+    --bs-btn-padding-y: .25rem;
+    --bs-btn-padding-x: .5rem;
+    --bs-btn-font-size: .75rem;
+    --bs-btn-border-color: #{$lynx-white};
+    --bs-btn-bg: #{$lynx-white};
+    --bs-btn-color: #{$primary};
+    --bs-btn-hover-color: #{$primary};
+    --bs-btn-hover-bg: #{shade-color($lynx-white, 10%)};
+    --bs-btn-hover-border-color: #{shade-color($lynx-white, 10%)};
+
+    > .bi-plus::before {
+      transform: rotate(45deg);
+    }
+  }
+}

app/frontend/stylesheets/bootstrap/_card.scss

@@ -32,40 +32,6 @@
       cursor: default
     }
   }
-
-  @include element('control-action') {
-    padding: 10px 16px 9px 16px;
-  }
-
-  @include element('control') {
-    position: absolute;
-    right: .5rem;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    height: 1rem;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  @include element('right-arrow') {
-      position: absolute;
-      right: -1.5rem;
-      top: 0;
-      bottom: 0;
-      width: 1.25rem;
-      height: 1.25rem;
-      margin: auto;
-      color: $primary;
-  }
-}
-
-a.card {
-  &:hover {
-    border-color: $primary;
-  }
 }
 
 form {

app/frontend/stylesheets/bootstrap/_form.scss

@@ -1,3 +1,3 @@
-.form-label {
+.form-label, .col-form-label {
   font-weight: 600;
 }

app/frontend/stylesheets/modules/_colors.scss

@@ -1,12 +1,13 @@
-// https://color-name-generator.com/ 
+// https://color-name-generator.com/
 
 $doctor: #F8F9FA;
 $bleached-silk: #F2F2F2;
 $vital-green: #198754;
 $antarctic-deep: #343A40;
-$bright-star: #dee2e6;
-$pompeii-ash: #6c757d;
-$satin-white: #ced4da;
+$bright-star: #DEE2E6;
+$pompeii-ash: #6C757D;
+$satin-white: #CED4DA;
+$lynx-white: #F7F7F7;
 
 $primary: $vital-green;
 $dark: $antarctic-deep;

app/models/extraction_definition.rb

@@ -3,6 +3,8 @@
 # Used to store the information for running an extraction
 #
 class ExtractionDefinition < ApplicationRecord
+  FORMATS = %w[JSON XML HTML].freeze
+
   # The destination is used for Enrichment Extractions
   # To know where to pull the records that are to be enriched from
   belongs_to :destination, optional: true
@@ -39,7 +41,7 @@ class ExtractionDefinition < ApplicationRecord
 
   # Harvest related validation
   with_options if: :harvest? do
-    validates :format, presence: true, inclusion: { in: %w[JSON XML HTML] }
+    validates :format, presence: true, inclusion: { in: FORMATS }
     validates :base_url, presence: true, format: { with: URI::DEFAULT_PARSER.make_regexp }
     validate :total_selector_format
     validates :total_selector, presence: true

app/models/pipeline.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Pipeline < ApplicationRecord
+  paginates_per 19 # not 20 because of the "Create new pipeline" button
+
   has_many :harvest_definitions, dependent: :destroy
   has_many :harvest_jobs, through: :harvest_definitions
   belongs_to :last_edited_by, class_name: 'User', optional: true
@@ -10,6 +12,19 @@ class Pipeline < ApplicationRecord
 
   validates :name, presence: true, uniqueness: true
 
+  def self.search(words, format)
+    words = sanitized_words(words)
+    return self if words.blank? && format.blank?
+
+    query = where('name LIKE ?', words)
+            .or(where('description LIKE ?', words))
+            .or(where(last_edited_by_id: search_user_ids(words)))
+            .or(where(id: search_source_ids(words)))
+
+    query = query.and(where(id: search_format_ids(format))) if format.present?
+    query
+  end
+
   def harvest
     harvest_definitions.find_by(kind: 'harvest')
   end