source_monitor 0.11.1 → 0.12.0

data/app/assets/javascripts/source_monitor/application.js

@@ -6,14 +6,10 @@ import DropdownController from "./controllers/dropdown_controller";
 import ModalController from "./controllers/modal_controller";
 import ConfirmNavigationController from "./controllers/confirm_navigation_controller";
 import SelectAllController from "./controllers/select_all_controller";
+import FilterSubmitController from "./controllers/filter_submit_controller";
 import "./turbo_actions";
 
-const existingApplication = window.SourceMonitorStimulus;
-const application = existingApplication || Application.start();
-
-if (!existingApplication) {
-  window.SourceMonitorStimulus = application;
-}
+const application = Application.start();
 
 application.register("notification", NotificationController);
 application.register("notification-container", NotificationContainerController);
@@ -22,5 +18,6 @@ application.register("dropdown", DropdownController);
 application.register("modal", ModalController);
 application.register("confirm-navigation", ConfirmNavigationController);
 application.register("select-all", SelectAllController);
+application.register("filter-submit", FilterSubmitController);
 
 export default application;

data/app/assets/javascripts/source_monitor/controllers/dropdown_controller.js

@@ -3,107 +3,27 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["menu"];
   static values = {
-    transitionModule: { type: String, default: "stimulus-use" },
     hiddenClass: { type: String, default: "hidden" }
   };
 
   connect() {
-    this.element.dataset.dropdownState = "initializing";
-    this.transitionEnabled = false;
-    if (typeof this.toggleTransition !== "function") {
-      this.toggleTransition = this.toggleVisibility.bind(this);
-    }
-
-    if (typeof this.leave !== "function") {
-      this.leave = this.hideMenu.bind(this);
-    }
-
-    this.loadTransitions()
-      .catch(() => null)
-      .finally(() => {
-        this.element.dataset.dropdownState = "ready";
-      });
+    this._hideOnClickOutside = this.hide.bind(this);
+    document.addEventListener("click", this._hideOnClickOutside);
   }
 
   disconnect() {
-    delete this.element.dataset.dropdownState;
-  }
-
-  // Dynamic import provides progressive enhancement: smooth transitions when stimulus-use
-  // is available, graceful fallback to CSS class toggling when not. This complexity is
-  // justified as it allows the engine to work without requiring stimulus-use as a dependency.
-  // Evaluated for simplification in Phase 20.05.07 - Decision: Keep current implementation.
-  async loadTransitions() {
-    if (!this.hasMenuTarget || this.transitionModuleValue === "") {
-      this.logFallback();
-      return;
-    }
-
-    try {
-      const module = await import(this.transitionModuleValue);
-      const useTransition = module?.useTransition || module?.default?.useTransition;
-
-      if (typeof useTransition === "function") {
-        useTransition(this, {
-          element: this.menuTarget,
-          hiddenClass: this.hiddenClassValue
-        });
-        this.transitionEnabled = true;
-      } else {
-        this.logFallback();
-      }
-    } catch (error) {
-      this.logFallback(error);
-    }
+    document.removeEventListener("click", this._hideOnClickOutside);
   }
 
   toggle(event) {
-    if (this.transitionEnabled && typeof this.toggleTransition === "function") {
-      this.toggleTransition();
-    } else {
-      this.toggleVisibility();
-    }
+    if (event) event.stopPropagation();
+    if (!this.hasMenuTarget) return;
+    this.menuTarget.classList.toggle(this.hiddenClassValue);
   }
 
   hide(event) {
     if (!this.hasMenuTarget) return;
     if (event && this.element.contains(event.target)) return;
-
-    if (this.transitionEnabled && typeof this.leave === "function") {
-      this.leave();
-    } else {
-      this.hideMenu();
-    }
-  }
-
-  toggleVisibility() {
-    this.isOpen() ? this.hideMenu() : this.showMenu();
-  }
-
-  showMenu() {
-    if (!this.hasMenuTarget) return;
-    this.menuTarget.classList.remove(this.hiddenClassValue);
-  }
-
-  hideMenu() {
-    if (!this.hasMenuTarget) return;
     this.menuTarget.classList.add(this.hiddenClassValue);
   }
-
-  isOpen() {
-    return this.hasMenuTarget && !this.menuTarget.classList.contains(this.hiddenClassValue);
-  }
-
-  logFallback(error = null) {
-    this.transitionEnabled = false;
-    if (!this._fallbackLogged && typeof window !== "undefined" && window.console) {
-      window.console.warn(
-        "SourceMonitor dropdown transitions unavailable; using CSS class toggling instead."
-      );
-      if (error && typeof window.console.debug === "function") {
-        window.console.debug(error);
-      }
-    }
-    this._fallbackLogged = true;
-  }
 }

data/app/assets/javascripts/source_monitor/controllers/filter_submit_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Submits the parent form when a filter dropdown value changes.
+// Replaces inline `onchange="this.form.requestSubmit()"` handlers.
+//
+// Usage:
+//   <select data-action="change->filter-submit#submit">
+export default class extends Controller {
+  submit(event) {
+    const form = event.target.closest("form");
+    if (form) form.requestSubmit();
+  }
+}

data/app/assets/javascripts/source_monitor/controllers/modal_controller.js

@@ -1,3 +1,4 @@
+/* global Node, requestAnimationFrame */
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
@@ -7,6 +8,7 @@ export default class extends Controller {
 
   connect() {
     this.handleEscape = this.handleEscape.bind(this);
+    this._inertElements = [];
     if (this.autoOpenValue) {
       this.open();
     }
@@ -27,6 +29,12 @@ export default class extends Controller {
 
     document.body.classList.add("overflow-hidden");
     document.addEventListener("keydown", this.handleEscape);
+
+    // Focus trap: set inert on sibling elements so Tab stays inside the modal
+    this._setInert(true);
+
+    // Move focus to the first focusable element inside the modal
+    this._focusFirstElement();
   }
 
   close(event) {
@@ -38,6 +46,8 @@ export default class extends Controller {
       this.panelTarget.classList.remove(this.openClass);
     }
 
+    // Remove inert from background elements
+    this._setInert(false);
     this.teardown();
 
     if (this.removeOnCloseValue) {
@@ -61,4 +71,50 @@ export default class extends Controller {
     document.body.classList.remove("overflow-hidden");
     document.removeEventListener("keydown", this.handleEscape);
   }
+
+  // -- Private helpers --
+
+  _setInert(inert) {
+    if (inert) {
+      // Find the modal panel's topmost parent that is a direct child of body,
+      // then mark all its siblings as inert
+      const modalRoot = this._findModalRoot();
+      if (!modalRoot) return;
+
+      this._inertElements = [];
+      for (const sibling of document.body.children) {
+        if (sibling === modalRoot || sibling === this.element) continue;
+        if (sibling.nodeType !== Node.ELEMENT_NODE) continue;
+        if (!sibling.hasAttribute("inert")) {
+          sibling.setAttribute("inert", "");
+          this._inertElements.push(sibling);
+        }
+      }
+    } else {
+      for (const el of this._inertElements) {
+        el.removeAttribute("inert");
+      }
+      this._inertElements = [];
+    }
+  }
+
+  _findModalRoot() {
+    // Walk up from the panel target to find the element that is a direct child of body
+    let el = this.hasPanelTarget ? this.panelTarget : this.element;
+    while (el && el.parentElement !== document.body) {
+      el = el.parentElement;
+    }
+    return el;
+  }
+
+  _focusFirstElement() {
+    // Defer to next frame so the panel is visible
+    requestAnimationFrame(() => {
+      if (!this.hasPanelTarget) return;
+      const focusable = this.panelTarget.querySelector(
+        'button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable) focusable.focus();
+    });
+  }
 }

data/app/assets/javascripts/source_monitor/controllers/notification_controller.js

@@ -6,12 +6,7 @@ export default class extends Controller {
   };
 
   connect() {
-    if (!window.SourceMonitorControllers) {
-      window.SourceMonitorControllers = {};
-    }
-
     this.clearTimeout();
-    this.registerController();
     this.applyLevelDelay();
     this.startTimer();
   }
@@ -26,20 +21,15 @@ export default class extends Controller {
     this.dismiss();
   }
 
-  registerController() {
-    window.SourceMonitorControllers.notification = this;
-  }
-
   startTimer() {
     if (this.delayValue <= 0) return;
     this.timeoutId = window.setTimeout(() => this.dismiss(), this.delayValue);
   }
 
   applyLevelDelay() {
-    const level = this.element.dataset.level;
-    if (level === "error" && this.delayValue === 5000) {
-      this.delayValue = 10000;
-    }
+    // Error delay is set server-side via TOAST_DURATION_ERROR (6000ms) in
+    // ApplicationController and passed as data-notification-delay-value.
+    // No client-side override needed.
   }
 
   dismiss() {

data/app/components/source_monitor/application_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "view_component"
+
+module SourceMonitor
+  class ApplicationComponent < ViewComponent::Base
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::FormTagHelper
+  end
+end

data/app/components/source_monitor/filter_dropdown_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module SourceMonitor
+  # Renders a labeled filter dropdown with auto-submit behavior.
+  # Used across sources, items, and logs index views to provide
+  # consistent filter select styling and behavior.
+  class FilterDropdownComponent < ApplicationComponent
+    SELECT_CLASSES = "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm " \
+                     "text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+    LABEL_CLASSES = "block text-xs font-medium text-slate-500 mb-1"
+
+    # @param label [String] visible label text for the dropdown
+    # @param param_name [Symbol, String] the form parameter name
+    # @param options [Array<Array>] array of [label, value] pairs for the select
+    # @param selected_value [String, nil] currently selected value
+    # @param form [ActionView::Helpers::FormBuilder, nil] optional form builder for Ransack integration
+    def initialize(label:, param_name:, options:, selected_value: nil, form: nil)
+      @label = label
+      @param_name = param_name
+      @options = options
+      @selected_value = selected_value.to_s
+      @form = form
+    end
+
+    def call
+      content_tag(:div) do
+        safe_join([ render_label, render_select ])
+      end
+    end
+
+    private
+
+    def render_label
+      if @form
+        @form.label(@param_name, @label, class: LABEL_CLASSES)
+      else
+        label_tag(@param_name, @label, class: LABEL_CLASSES)
+      end
+    end
+
+    def render_select
+      stimulus_attrs = { action: "change->filter-submit#submit" }
+
+      if @form
+        @form.select(
+          @param_name,
+          options_for_select(@options, @selected_value),
+          {},
+          class: SELECT_CLASSES,
+          data: stimulus_attrs
+        )
+      else
+        select_tag(
+          @param_name,
+          options_for_select(@options, @selected_value),
+          class: SELECT_CLASSES,
+          data: stimulus_attrs
+        )
+      end
+    end
+  end
+end

data/app/components/source_monitor/icon_component.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module SourceMonitor
+  class IconComponent < ApplicationComponent
+    # SVG path data for each registered icon. Each entry is an array of hashes
+    # with :d (path data) and optional per-path attributes like :fill, :stroke, etc.
+    ICONS = {
+      menu_dots: {
+        view_box: "0 0 20 20",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "1.5",
+        paths: [
+          { d: "M10.343 3.94a.75.75 0 0 0-1.093-.332l-.822.548a2.25 2.25 0 0 1-2.287.014l-.856-.506a.75.75 0 0 0-1.087.63l.03.988a2.25 2.25 0 0 1-.639 1.668l-.715.715a.75.75 0 0 0 0 1.06l.715.715a2.25 2.25 0 0 1 .639 1.668l-.03.988a.75.75 0 0 0 1.087.63l.856-.506a2.25 2.25 0 0 1 2.287.014l.822.548a.75.75 0 0 0 1.093-.332l.38-.926a2.25 2.25 0 0 1 1.451-1.297l.964-.258a.75.75 0 0 0 .534-.72v-.946a.75.75 0 0 0-.534-.72l-.964-.258a2.25 2.25 0 0 1-1.45-1.297l-.381-.926Z",
+            stroke_linecap: "round", stroke_linejoin: "round" },
+          { d: "M12 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z",
+            stroke_linecap: "round", stroke_linejoin: "round" }
+        ]
+      },
+      refresh: {
+        view_box: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "1.5",
+        paths: [
+          { d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99",
+            stroke_linecap: "round", stroke_linejoin: "round" }
+        ]
+      },
+      chevron_down: {
+        view_box: "0 0 20 20",
+        fill: "currentColor",
+        paths: [
+          { d: "M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z",
+            fill_rule: "evenodd", clip_rule: "evenodd" }
+        ]
+      },
+      external_link: {
+        view_box: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        paths: [
+          { d: "M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25",
+            stroke_linecap: "round", stroke_linejoin: "round" }
+        ]
+      },
+      spinner: {
+        view_box: "0 0 24 24",
+        fill: "none",
+        spinner: true,
+        elements: [
+          { type: :circle, class: "opacity-25", cx: "12", cy: "12", r: "10",
+            stroke: "currentColor", stroke_width: "4" },
+          { type: :path, class: "opacity-75", fill: "currentColor",
+            d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z" }
+        ]
+      }
+    }.freeze
+
+    SIZE_CLASSES = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6"
+    }.freeze
+
+    def initialize(name, size: :md, css_class: nil)
+      @name = name.to_sym
+      @size = size&.to_sym
+      @css_class = css_class
+    end
+
+    def call
+      icon = ICONS[@name]
+      return "".html_safe unless icon
+
+      size_cls = @size ? SIZE_CLASSES.fetch(@size, SIZE_CLASSES[:md]) : nil
+      classes = [ size_cls, @css_class ].compact.join(" ")
+
+      if icon[:spinner]
+        render_spinner(icon, classes)
+      else
+        render_standard(icon, classes)
+      end
+    end
+
+    private
+
+    def render_standard(icon, classes)
+      svg_attrs = {
+        class: classes,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: icon[:view_box],
+        fill: icon[:fill] || "none",
+        aria: { hidden: "true" }
+      }
+      svg_attrs[:stroke] = icon[:stroke] if icon[:stroke]
+      svg_attrs[:stroke_width] = icon[:stroke_width] if icon[:stroke_width]
+
+      tag.svg(**svg_attrs) do
+        safe_join(icon[:paths].map { |path_data| render_path(path_data) })
+      end
+    end
+
+    def render_path(path_data)
+      attrs = { d: path_data[:d] }
+      attrs[:stroke_linecap] = path_data[:stroke_linecap] if path_data[:stroke_linecap]
+      attrs[:stroke_linejoin] = path_data[:stroke_linejoin] if path_data[:stroke_linejoin]
+      attrs[:fill_rule] = path_data[:fill_rule] if path_data[:fill_rule]
+      attrs[:clip_rule] = path_data[:clip_rule] if path_data[:clip_rule]
+      attrs[:fill] = path_data[:fill] if path_data[:fill]
+      tag.path(**attrs)
+    end
+
+    def render_spinner(icon, classes)
+      tag.svg(
+        class: classes,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: icon[:view_box],
+        aria: { hidden: "true" }
+      ) do
+        safe_join(icon[:elements].map { |el| render_element(el) })
+      end
+    end
+
+    def render_element(el)
+      case el[:type]
+      when :circle
+        tag.circle(
+          class: el[:class],
+          cx: el[:cx], cy: el[:cy], r: el[:r],
+          stroke: el[:stroke], stroke_width: el[:stroke_width]
+        )
+      when :path
+        tag.path(class: el[:class], fill: el[:fill], d: el[:d])
+      end
+    end
+  end
+end

data/app/components/source_monitor/status_badge_component.html.erb

@@ -0,0 +1,8 @@
+<span class="<%= badge_classes %>"
+      data-testid="<%= data_attributes[:testid] %>"
+      data-status="<%= data_attributes[:status] %>">
+  <% if show_spinner? %>
+    <%= render SourceMonitor::IconComponent.new(:spinner, size: nil, css_class: "mr-1 #{spinner_size_class} animate-spin text-blue-500") %>
+  <% end %>
+  <%= display_label %>
+</span>

data/app/components/source_monitor/status_badge_component.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module SourceMonitor
+  # Renders a consistent status badge with color-coded styling and optional spinner.
+  # Replaces 12+ duplicated badge markup patterns across views.
+  #
+  # Usage:
+  #   render StatusBadgeComponent.new(status: "working")
+  #   render StatusBadgeComponent.new(status: :fetching, size: :sm)
+  #   render StatusBadgeComponent.new(status: "success", label: "Completed")
+  class StatusBadgeComponent < ApplicationComponent
+    STATUS_STYLES = {
+      # Health statuses
+      "working" => { classes: "bg-green-100 text-green-700", label: "Working" },
+      "active" => { classes: "bg-green-100 text-green-700", label: "Active" },
+      "improving" => { classes: "bg-sky-100 text-sky-700", label: "Improving" },
+      # Success statuses
+      "success" => { classes: "bg-green-100 text-green-700", label: "Success" },
+      "completed" => { classes: "bg-green-100 text-green-700", label: "Completed" },
+      # Failure statuses
+      "failing" => { classes: "bg-rose-100 text-rose-700", label: "Failing" },
+      "failed" => { classes: "bg-rose-100 text-rose-700", label: "Failed" },
+      "error" => { classes: "bg-rose-100 text-rose-700", label: "Error" },
+      # Warning statuses
+      "declining" => { classes: "bg-yellow-100 text-yellow-700", label: "Declining" },
+      "warning" => { classes: "bg-amber-100 text-amber-700", label: "Warning" },
+      "partial" => { classes: "bg-amber-100 text-amber-700", label: "Partial" },
+      # Pending/queued statuses
+      "queued" => { classes: "bg-amber-100 text-amber-700", label: "Queued" },
+      "pending" => { classes: "bg-amber-100 text-amber-700", label: "Pending" },
+      # Processing statuses (show spinner)
+      "fetching" => { classes: "bg-blue-100 text-blue-700", label: "Processing", spinner: true },
+      "processing" => { classes: "bg-blue-100 text-blue-700", label: "Processing", spinner: true },
+      # Inactive statuses
+      "idle" => { classes: "bg-slate-100 text-slate-600", label: "Idle" },
+      "disabled" => { classes: "bg-slate-200 text-slate-600", label: "Disabled" },
+      "paused" => { classes: "bg-amber-100 text-amber-700", label: "Paused" },
+      "blocked" => { classes: "bg-rose-100 text-rose-700", label: "Blocked" }
+    }.freeze
+
+    SPINNER_STATUSES = %w[fetching processing].freeze
+
+    SIZE_CLASSES = {
+      sm: "px-2 py-0.5 text-[10px]",
+      md: "px-3 py-1 text-xs",
+      lg: "px-4 py-1.5 text-sm"
+    }.freeze
+
+    DEFAULT_CLASSES = "bg-slate-100 text-slate-600"
+
+    # @param status [String, Symbol] the status to display
+    # @param label [String, nil] override the default label for the status
+    # @param size [Symbol] :sm, :md, or :lg (default: :md)
+    # @param show_spinner [Boolean] whether to show spinner for processing statuses (default: true)
+    # @param data [Hash] additional data attributes for the badge element
+    def initialize(status:, label: nil, size: :md, show_spinner: true, data: {})
+      @status = status.to_s
+      @label = label
+      @size = size.to_sym
+      @show_spinner = show_spinner
+      @data = data
+    end
+
+    private
+
+    def style_config
+      STATUS_STYLES.fetch(@status) { { classes: DEFAULT_CLASSES, label: @status.humanize } }
+    end
+
+    def badge_classes
+      color_classes = style_config[:classes]
+      size_classes = SIZE_CLASSES.fetch(@size, SIZE_CLASSES[:md])
+      "inline-flex items-center rounded-full font-semibold #{size_classes} #{color_classes}"
+    end
+
+    def display_label
+      @label || style_config[:label]
+    end
+
+    def show_spinner?
+      @show_spinner && (style_config[:spinner] || SPINNER_STATUSES.include?(@status))
+    end
+
+    def spinner_size_class
+      case @size
+      when :sm then "h-3 w-3"
+      when :lg then "h-4.5 w-4.5"
+      else "h-3.5 w-3.5"
+      end
+    end
+
+    def data_attributes
+      { testid: "status-badge", status: @status }.merge(@data)
+    end
+  end
+end

data/app/controllers/concerns/source_monitor/sanitizes_search_params.rb

@@ -41,6 +41,10 @@ module SourceMonitor
       raw = params[:q]
       return {} unless raw
 
+      # Ransack requires a plain Hash, not ActionController::Parameters. Using
+      # to_unsafe_h here is safe because the values are immediately passed through
+      # ParameterSanitizer.sanitize which applies an explicit allowlist, then
+      # stripped and blank-filtered below before reaching Ransack.
       hash =
         if raw.respond_to?(:to_unsafe_h)
           raw.to_unsafe_h

data/app/controllers/concerns/source_monitor/set_source.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module SourceMonitor
+  module SetSource
+    extend ActiveSupport::Concern
+
+    private
+
+    def set_source
+      @source = Source.find(params[:source_id])
+    end
+  end
+end

data/app/controllers/source_monitor/application_controller.rb

@@ -10,8 +10,23 @@ module SourceMonitor
     helper_method :source_monitor_current_user, :source_monitor_user_signed_in?
     after_action :broadcast_flash_toasts
 
+    rescue_from ActiveRecord::RecordNotFound, with: :record_not_found
+
     private
 
+    def record_not_found
+      respond_to do |format|
+        format.html { render plain: "Record not found", status: :not_found }
+        format.turbo_stream do
+          render turbo_stream: turbo_stream.append("flash",
+            partial: "source_monitor/shared/toast",
+            locals: { message: "Record not found", level: :error }),
+            status: :not_found
+        end
+        format.json { render json: { error: "Record not found" }, status: :not_found }
+      end
+    end
+
     FLASH_LEVELS = {
       notice: :success,
       alert: :error,
@@ -20,6 +35,8 @@ module SourceMonitor
       warning: :warning
     }.freeze
 
+    # Toast display durations in milliseconds. These values are passed to the
+    # Stimulus notification_controller via data-notification-delay-value.
     TOAST_DURATION_DEFAULT = 5000
     TOAST_DURATION_ERROR = 6000