snapshot_ui 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed5906abe86dd34b16173cdbff8239e7f649ab4ace8adceabf250c90165b1879
-  data.tar.gz: fce78cca8afc9baffd515257e1f5e7a564e27d803b6c2e3a84341441254d7ead
+  metadata.gz: 5d083a6167cbd33d814565a34c6da82c32f920bf1fef6faa8171e1cf4bae1f86
+  data.tar.gz: 15f7d8346e5f192e4b8901760b64a1d91362507bb7adf91cbaed37e30a257613
 SHA512:
-  metadata.gz: 2c64f1972c0f1261fe57e09e8aad3e9e9ba174184dbc9ff82ed988012e27a8d2340818629189d90a41d3ea7f2d11725ff9ec546500b32a1c0adddf6d2ec083a7
-  data.tar.gz: 791edbd08ad2eaffed422b850063dc8b3c5914a2214f8914f2079607c03a6c0b3cfa8b6608618e4d54750953886b633a9a7d26f3c975c8e06f5ced609f533b1f
+  metadata.gz: 07c26236a62e772945eb5165e2552d2a278493acb7b65d4429f445e98b2401b5ee39acfe842b2a5c9787220b5444ac3f0a1ecab1f7e8cb0a7f87e2f01726b2b2
+  data.tar.gz: 5fa30fbda712efff8c596acca55ec3811fee661a6684fa7d34aee7a30b2032255e14930c8288f90e5e5fe15d82424cef66848a4860d560241d9631e57837b94a

data/lib/snapshot_ui/cli/watcher.ru

@@ -6,18 +6,19 @@ require "async/websocket/client"
 require "async/websocket/adapters/rack"
 require "listen"
 require "set"
+require "uri"
 
-SNAPSHOT_DIRECTORY = ENV.fetch("SNAPSHOT_DIRECTORY")
-WEBSOCKET_ENDPOINT = "http://localhost:7070/cable"
+load ENV.fetch("SNAPSHOT_UI_INITIALIZER_FILE")
 
 REFRESH_MESSAGE = {identifier: "{\"channel\":\"RefreshChannel\"}", message: "refresh"}.to_json
 CONFIRM_SUBSCRIPTION_MESSAGE = {identifier: "{\"channel\":\"RefreshChannel\"}", type: "confirm_subscription"}.to_json
-PING_MESSAGE = {type: "ping", message: Time.now.to_i.to_s}.to_json
 
 @connections = Set.new
 
+live_websocket_uri = URI.parse(SnapshotUI.configuration.live_websocket_url)
+
 run lambda { |env|
-  if env["REQUEST_PATH"] == "/cable"
+  if env["REQUEST_PATH"] == live_websocket_uri.path
     Async::WebSocket::Adapters::Rack.open(env, protocols: ["actioncable-v1-json"]) do |connection|
       @connections << connection
 
@@ -27,7 +28,7 @@ run lambda { |env|
 
       Async do |ping_task|
         loop do
-          connection.write(PING_MESSAGE)
+          connection.write({type: "ping", message: Time.now.to_i.to_s}.to_json)
           connection.flush
           sleep(2)
         end
@@ -50,7 +51,7 @@ run lambda { |env|
 }
 
 Async do |client_task|
-  endpoint = Async::HTTP::Endpoint.parse(WEBSOCKET_ENDPOINT)
+  endpoint = Async::HTTP::Endpoint.parse(SnapshotUI.configuration.live_websocket_url)
 
   Async::WebSocket::Client.connect(endpoint) do |connection|
     Async do |listener_task|
@@ -68,15 +69,16 @@ Async do |client_task|
 end
 
 def detect_snapshots_update(task)
-  Pathname.new(SNAPSHOT_DIRECTORY).mkpath
-  listener = Listen.to(SNAPSHOT_DIRECTORY) { |_modified, _added, _removed| broadcast_update }
+  Pathname.new(SnapshotUI.configuration.storage_directory).mkpath
+  listener = Listen.to(SnapshotUI.configuration.storage_directory) { |_modified, _added, _removed| broadcast_update }
 
   task.async do
     listener.start
     task.sleep
   end
 
-  Console.info("Watching for snapshots updates in #{SNAPSHOT_DIRECTORY}...")
+  Console.info("Watching for snapshots updates in #{SnapshotUI.configuration.storage_directory}")
+  Console.info("Review snapshots on #{SnapshotUI.configuration.web_url}")
 end
 
 def broadcast_update

data/lib/snapshot_ui/cli.rb

@@ -1,22 +1,25 @@
 require "bundler/setup"
 require "thor"
 require "pathname"
+require "uri"
 
 module SnapshotUI
   class CLI < Thor
-    WEBSOCKET_HOST = "localhost:7070"
-
-    desc "watch SNAPSHOT_DIRECTORY", "Watches for snapshot changes in SNAPSHOT_DIRECTORY and broadcasts them on ws://#{WEBSOCKET_HOST}/cable."
-    def watch(snapshot_directory)
-      unless File.exist?(snapshot_directory)
-        puts "The provided directory `#{snapshot_directory}` doesn't exist. Please double check the path."
+    desc "live SNAPSHOT_UI_INITIALIZER_FILE", "Run the command to enable live refreshing of UI snapshots."
+    def live(initializer_file)
+      unless File.exist?(initializer_file)
+        puts "The provided initializer file `#{initializer_file}` doesn't exist. Please double check the path."
         exit 1
       end
 
-      websocket_host = "http://#{WEBSOCKET_HOST}"
+      load initializer_file
+
+      websocket_host_uri = URI.parse(SnapshotUI.configuration.live_websocket_url)
+      websocket_host_uri.path = ""
+
       config_path = Pathname.new(__dir__).join("cli", "watcher.ru").cleanpath.to_s
 
-      exec "SNAPSHOT_DIRECTORY=#{snapshot_directory} bundle exec falcon serve --bind #{websocket_host} --count 1 --config #{config_path}"
+      exec "SNAPSHOT_UI_INITIALIZER_FILE=#{initializer_file} bundle exec falcon serve --bind #{websocket_host_uri} --count 1 --config #{config_path}"
     end
 
     def self.exit_on_failure?

data/lib/snapshot_ui/configuration.rb

@@ -5,12 +5,13 @@ require_relative "colorize"
 module SnapshotUI
   class Configuration
     attr_writer :storage_directory, :project_root_directory
-    attr_accessor :web_url
+    attr_accessor :web_url, :live_websocket_url
 
-    def initialize(project_root_directory:, storage_directory:, web_url:)
+    def initialize(project_root_directory:, storage_directory:, web_url:, live_websocket_url:)
       @project_root_directory = project_root_directory
       @storage_directory = storage_directory
       @web_url = web_url
+      @live_websocket_url = live_websocket_url
     end
 
     def storage_directory

data/lib/snapshot_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SnapshotUI
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/lib/snapshot_ui/web/application.rb

@@ -119,6 +119,33 @@ module SnapshotUI
       def refresh_controller
         'data-controller="refresh" data-action="refresh-connected@window->refresh#connected refresh-disconnected@window->refresh#disconnected turbo:before-render@window->refresh#display_status"'
       end
+
+      def snapshot_title(snapshot)
+        title = snapshot.context.name.sub("test_", "").gsub(/^\d{4}\s*/, "").tr("_", " ")
+        suffix =
+          if snapshot.context.take_snapshot_index > 0
+            " (##{snapshot.context.take_snapshot_index + 1} in the same test)"
+          end
+
+        "#{title}#{suffix}"
+      end
+
+      def test_group_title(test_group)
+        parts = test_group.split("::")
+        last_part = "<span class='last'>#{parts.last}</span>"
+        all = parts[0..-2] << last_part
+
+        all.join(" <span class='divider'>/</span> ")
+      end
+
+      def copy_icon_svg
+        <<~HTML
+          <svg class="copy icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path fill="currentColor" d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"/>
+          </svg>
+        HTML
+      end
     end
   end
 end

data/lib/snapshot_ui/web/assets/javascripts/application.js

@@ -3,6 +3,8 @@ import "@hotwired/turbo"
 import "channels"
 
 import RefreshController from "controllers/refresh_controller"
+import SourceLocationController from "controllers/source_location_controller"
 
 window.Stimulus = Application.start()
 Stimulus.register("refresh", RefreshController)
+Stimulus.register("source-location", SourceLocationController)

data/lib/snapshot_ui/web/assets/javascripts/controllers/source_location_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  copy(event) {
+    event.preventDefault()
+
+    let currentTarget = event.currentTarget
+
+    navigator.clipboard.writeText(currentTarget.dataset.sourceLocation)
+
+    currentTarget.classList.toggle('animate');
+    setTimeout(()=> {
+      currentTarget.classList.toggle('animate')
+    },300)
+
+  }
+}

data/lib/snapshot_ui/web/assets/stylesheets/application.css

@@ -28,6 +28,15 @@ body#snapshots_index h1 {
 body#snapshots_index h2 {
     margin: 30px 0 0;
     font-size: 24px;
+    color: #aaa;
+}
+
+body#snapshots_index h2 .last {
+    color: #666666;
+}
+
+body#snapshots_index h2 .divider {
+    color: #ccc;
 }
 
 body#snapshots_index p {
@@ -44,8 +53,14 @@ body#snapshots_index h1, h2, h3, h4, h5, h6 {
     color: #666666;
 }
 
-body#snapshots_index a { color: #000; text-decoration: none; }
-body#snapshots_index a:hover { text-decoration: underline; }
+body#snapshots_index a {
+    color: #000;
+    text-decoration: none;
+}
+
+body#snapshots_index a:hover {
+    text-decoration: underline;
+}
 
 body#snapshots_index code {
     background: rgba(175, 184, 193, 0.2);
@@ -101,6 +116,67 @@ body#not_found p {
     color: #666666;
 }
 
+.copy_source_location {
+    all: unset;
+    cursor: pointer;
+    position: relative;
+}
+
+.copy_source_location .icon {
+    width: 0.9em;
+    height: 0.9em;
+    color: #aaa;
+}
+
+.copy_source_location:hover .icon {
+    color: #000;
+}
+
+.copy_source_location.animate .icon {
+    animation: enlarge-and-back-to-normal 0.3s;
+}
+
+@keyframes enlarge-and-back-to-normal {
+    0%,
+    100% {
+        transform: scale(1, 1);
+    }
+    50% {
+        transform: scale(1.3, 1.3);
+    }
+}
+
+.copy_source_location:before {
+    content: attr(data-source-location);
+    position:absolute;
+    font-size: 90%;
+    top:-95%;
+    transform:translateX(-50%);
+    left:100%;
+    margin-top:-15px;
+    padding:3px 15px 1px;
+    border-radius:10px;
+    background:#eee;
+    color: #666;
+    text-align:center;
+    display:none;
+}
+
+.copy_source_location:after {
+    content: "";
+    position:absolute;
+    top:-11px;
+    transform:translateX(-50%);
+    margin-left:10px;
+    border:10px solid #eee;
+    border-color: #eee transparent transparent transparent;
+    display:none;
+}
+
+.copy_source_location:hover:before, .copy_source_location:hover:after {
+    display:block;
+}
+
 /* Hotwired Turbo related */
 .turbo-progress-bar {
     height: 2px;

data/lib/snapshot_ui/web/views/layout.html.erb

@@ -7,7 +7,7 @@
   <meta name="turbo-refresh-method" content="morph">
   <meta name="turbo-refresh-scroll" content="preserve">
   <link rel="stylesheet" href="<%= stylesheet_path("application.css") %>">
-  <meta name="action-cable-url" content="ws://127.0.0.1:7070/cable" />
+  <meta name="action-cable-url" content="<%= SnapshotUI.configuration.live_websocket_url %>" />
   <script type="importmap" data-turbo-track="reload">
     {
       "imports": {
@@ -16,6 +16,7 @@
         "@hotwired/turbo": "https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm",
         "@rails/actioncable": "https://cdn.jsdelivr.net/npm/@rails/actioncable@7.1.3-4/+esm",
         "controllers/refresh_controller": "<%= javascript_path("controllers/refresh_controller.js") %>",
+        "controllers/source_location_controller": "<%= javascript_path("controllers/source_location_controller.js") %>",
         "channels/consumer": "<%= javascript_path("channels/consumer.js") %>",
         "channels": "<%= javascript_path("channels/index.js") %>",
         "channels/refresh_channel": "<%= javascript_path("channels/refresh_channel.js") %>"

data/lib/snapshot_ui/web/views/snapshots/index.html.erb

@@ -44,15 +44,21 @@ bundle exec snapshot_ui watch SNAPSHOT_DIRECTORY</pre>
   <% end %>
 
   <% @grouped_by_test_class.each do |test_group, snapshots| %>
-  <h2><%= test_group %></h2>
+
+  <h2><%= test_group_title(test_group) %></h2>
 
   <ul>
     <% snapshots.each do |snapshot| %>
       <li>
-        <a href="<%= snapshot_path(snapshot.slug) %>">
-          <%= snapshot.context.name %>
-          <%= if snapshot.context.take_snapshot_index > 0 then "(##{(snapshot.context.take_snapshot_index + 1)} in the same test)" end %>
-        </a>
+        <a href="<%= snapshot_path(snapshot.slug) %>"><%= snapshot_title(snapshot) %></a>
+        <button
+           class="copy_source_location"
+           data-controller="source-location"
+           data-action="click->source-location#copy"
+           data-source-location="<%= snapshot.context.source_location.join(":") %>"
+        >
+          <%= copy_icon_svg %>
+        </button>
       </li>
     <% end %>
   </ul>

data/lib/snapshot_ui.rb

@@ -7,7 +7,8 @@ module SnapshotUI
   DEFAULT_CONFIGURATION = {
     project_root_directory: nil,
     storage_directory: nil,
-    web_url: "http://localhost:3000/ui/snapshots"
+    web_url: "http://localhost:3000/ui/snapshots",
+    live_websocket_url: "http://localhost:49152/live"
   }.freeze
 
   def self.configure

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: snapshot_ui
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Tomaz Zlender
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-26 00:00:00.000000000 Z
+date: 2024-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rack
@@ -110,6 +110,7 @@ files:
 - lib/snapshot_ui/web/assets/javascripts/channels/index.js
 - lib/snapshot_ui/web/assets/javascripts/channels/refresh_channel.js
 - lib/snapshot_ui/web/assets/javascripts/controllers/refresh_controller.js
+- lib/snapshot_ui/web/assets/javascripts/controllers/source_location_controller.js
 - lib/snapshot_ui/web/assets/stylesheets/application.css
 - lib/snapshot_ui/web/views/layout.html.erb
 - lib/snapshot_ui/web/views/snapshots/index.html.erb