paper_trail_viewer 1.0.0 → 1.1.0

data/javascript/src/app.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useMemo, useState} from "react"
 import {render} from "react-dom"
 import {FieldValues, SubmitHandler, useForm} from "react-hook-form"
-import {Controls, Pagination, VersionsList} from "./components"
+import {ContextMenu, Controls, Pagination, VersionsList} from "./components"
 import {ColumnPicks} from "./types"
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -21,9 +21,10 @@ const App = () => {
     hasNextPage: false,
     versions: [],
   })
-  const config = useConfig(initialParams)
 
-  const submit: SubmitHandler<FieldValues> = (params) => {
+  const submitHandler: SubmitHandler<FieldValues> = (params) => {
+    ContextMenu.closeAll()
+
     // put form params into current URL
     const newURL = new URL(window.location.href.replace(/\?.*/, ""))
     Object.entries(params).forEach(
@@ -40,15 +41,14 @@ const App = () => {
       })
   }
 
-  useEffect(() => submit(initialParams), [initialParams])
+  const submit = handleSubmit(submitHandler)
+  const config = useConfig({initialParams, setValue, submit})
+
+  useEffect(() => submitHandler(initialParams), [initialParams])
 
   return (
-    <div className="p-2">
-      <Controls
-        config={config}
-        onSubmit={handleSubmit(submit)}
-        register={register}
-      />
+    <div className="p-2" onClick={() => ContextMenu.closeAll()}>
+      <Controls config={config} onSubmit={() => submit()} register={register} />
 
       <VersionsList
         config={config}
@@ -60,7 +60,7 @@ const App = () => {
         hasNext={data.hasNextPage}
         onPageChange={(newPage: number) => {
           setValue("page", newPage)
-          handleSubmit(submit)()
+          submit()
         }}
         page={watch("page")}
       />
@@ -82,7 +82,18 @@ const useInitialParamsFromURL = () =>
     }
   }, [])
 
-const useConfig = (initialParams: Record<string, unknown>) => {
+const useConfig = ({
+  initialParams,
+  setValue,
+  submit,
+}: {
+  initialParams: Record<string, unknown>
+  setValue: Function
+  submit: Function
+}) => {
+  const el = document.getElementById("mount-paper-trail-viewer")
+  const allowRollback = el && el.dataset.allowRollback === "1"
+
   const [columns, setColumns] = useState({
     actions: true,
     changes: true,
@@ -96,5 +107,5 @@ const useConfig = (initialParams: Record<string, unknown>) => {
 
   const [viewed, setViewed] = useState([])
 
-  return {columns, setColumns, viewed, setViewed}
+  return {allowRollback, columns, setColumns, viewed, setViewed}
 }

data/javascript/src/components/context_menu.tsx

@@ -0,0 +1,61 @@
+import React, {CSSProperties, useEffect, useMemo} from "react"
+
+export const ContextMenu = ({
+  children,
+  className,
+  coords,
+  setCoords,
+  zIndex = 15,
+}: {
+  children: React.ReactNode
+  className?: string
+  coords: [number, number]
+  setCoords: Function
+  zIndex?: number
+}) => {
+  useEffect(() => {
+    const exit = () => setCoords(null)
+    const exitOnEsc = ({keyCode}: {keyCode: number}) => keyCode === 27 && exit()
+
+    document.body.addEventListener("close_all_contextmenus", exit)
+    document.body.addEventListener("contextmenu", exit)
+    document.body.addEventListener("keydown", exitOnEsc)
+    window.addEventListener("hashchange", exit)
+
+    return () => {
+      document.body.removeEventListener("close_all_contextmenus", exit)
+      document.body.removeEventListener("contextmenu", exit)
+      document.body.removeEventListener("keydown", exitOnEsc)
+      window.removeEventListener("hashchange", exit)
+    }
+  }, [setCoords])
+
+  if (!coords) return null
+
+  const [x, y] = coords
+
+  const menuStyle = useMemo(() => {
+    const style = {position: "fixed", zIndex} as CSSProperties
+
+    // extend from coords towards center of window
+    if (x < window.innerWidth / 2) style.left = x
+    else style.right = window.innerWidth - x
+    if (y < window.innerHeight / 2) style.top = y
+    else style.bottom = window.innerHeight - y
+
+    return style
+  }, [x, y])
+
+  return (
+    <div
+      className={className}
+      onClick={(e) => e.stopPropagation()}
+      style={menuStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+ContextMenu["closeAll"] = () =>
+  document.body.dispatchEvent(new Event("close_all_contextmenus"))

data/javascript/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./context_menu"
 export * from "./controls"
 export * from "./pagination"
 export * from "./versions_list"

data/javascript/src/components/version_context_menu.tsx

@@ -0,0 +1,110 @@
+import React, {useCallback} from "react"
+import {Version, VersionContextMenuProps} from "../types"
+import {ContextMenu} from "./context_menu"
+import {FullObjectModal} from "./full_object_modal"
+
+export const VersionContextMenu = (props: VersionContextMenuProps) =>
+  props.coords ? <VersionContexMenuComponent {...props} /> : null
+
+const VersionContexMenuComponent = ({
+  config,
+  coords,
+  version,
+  setCoords,
+}: VersionContextMenuProps) => (
+  <ContextMenu
+    className="bg-light border border-bottom-0 p-0"
+    coords={coords}
+    setCoords={setCoords}
+  >
+    <div className="d-flex flex-column" style={{cursor: "pointer"}}>
+      <MenuItem show>
+        <div
+          onClick={() => {
+            setCoords(null)
+            config.setViewed([...config.viewed, version.id])
+          }}
+        >
+          <input type="checkbox" checked={false} />
+          &nbsp;
+          <span>Viewed</span>
+        </div>
+      </MenuItem>
+
+      <MenuItem show={!!version.object}>
+        <FullObjectModal object={version.object} title="👁️ Before" />
+      </MenuItem>
+
+      <MenuItem show={!!version.changeset}>
+        <FullObjectModal
+          object={merge(version.object, version.changeset)}
+          title="👁️ After"
+        />
+      </MenuItem>
+
+      <MenuItem show={!!version.item_url}>
+        <a
+          href={version.item_url}
+          style={{textDecoration: "none"}}
+          target="_blank"
+        >
+          ↗️ See live
+        </a>
+      </MenuItem>
+
+      <MenuItem show={!/[?&]item_id/.test(window.location.search)}>
+        <a
+          href={`${window.location.pathname}?item_type=${version.item_type}&item_id=${version.item_id}`}
+          style={{textDecoration: "none"}}
+        >
+          📌 Track item
+        </a>
+      </MenuItem>
+
+      <MenuItem show={config.allowRollback}>
+        <RollBack version={version} />
+      </MenuItem>
+    </div>
+  </ContextMenu>
+)
+
+const MenuItem = ({
+  children,
+  show,
+}: {
+  children: React.ReactNode
+  show: boolean
+}) => show && <div className="border-bottom p-2">{children}</div>
+
+const merge = (object: Version["object"], changeset: Version["changeset"]) => {
+  const newState = {...object}
+  Object.entries(changeset).forEach(([k, [_, newValue]]) => {
+    newState[k] = newValue
+  })
+  return newState
+}
+
+const RollBack = ({version: {event, id}}: {version: Version}) => {
+  const showRollBackDialog = useCallback(() => {
+    if (confirm(`${rollBackInfo[event]}! Are you sure you want to do this?`)) {
+      rollBack(id)
+    }
+  }, [event, id])
+
+  return <span onClick={() => showRollBackDialog()}>↩️ Roll back</span>
+}
+
+const rollBackInfo = {
+  create: "As this is a `create` version, this will destroy the record",
+  destroy: "As this is a `destroy` version, this will restore the record",
+  update: "This will put the record back in the state before this version",
+}
+
+const rollBack = (id: Version["id"]) => {
+  fetch(`${window.location.pathname}/versions/${id}`, {method: "PATCH"})
+    .then((response) => response.json())
+    .then((data) => {
+      alert(data.message)
+      if (data.success) window.location.reload()
+    })
+}

data/javascript/src/components/versions_list.tsx

@@ -1,7 +1,8 @@
-import React, {useCallback} from "react"
-import {Version, stickyStyle, Config, ViewedList} from "../types"
+import React, {useCallback, useState} from "react"
+import {Version, stickyStyle, Config} from "../types"
 import {ChangeDiff} from "./change_diff"
-import {FullObjectModal} from "./full_object_modal"
+import {ContextMenu} from "./context_menu"
+import {VersionContextMenu} from "./version_context_menu"
 
 export const VersionsList: React.FC<{
   config: Config
@@ -12,7 +13,7 @@ export const VersionsList: React.FC<{
 
   if (versions.length === 0) return <Info text="No versions found." />
 
-  const {columns, viewed, setViewed} = config
+  const {columns, viewed} = config
 
   return (
     <table className="table">
@@ -39,7 +40,7 @@ export const VersionsList: React.FC<{
           if (viewed.includes(v.id)) return null
 
           return (
-            <tr key={i} data-ci-type="version-row">
+            <tr key={i} data-ci-type="version-row" data-ci-id={v.id}>
               {columns.version_id && <td>{v.id}</td>}
               {columns.item_type && <td>{v.item_type}</td>}
               {columns.item_id && <td>{v.item_id}</td>}
@@ -47,9 +48,7 @@ export const VersionsList: React.FC<{
               {columns.whodunnit && <TdWhodunnit v={v} />}
               {columns.time && <TdTime v={v} />}
               {columns.changes && <TdChanges v={v} />}
-              {columns.actions && (
-                <TdActions viewed={viewed} setViewed={setViewed} v={v} />
-              )}
+              {columns.actions && <TdActions config={config} v={v} />}
             </tr>
           )
         })}
@@ -96,47 +95,38 @@ const TdChanges = ({v}: {v: Version}) => (
   <td>{v.changeset && <ChangeDiff changeset={v.changeset} />}</td>
 )
 
-const TdActions = ({
-  viewed,
-  setViewed,
-  v,
-}: {
-  viewed: ViewedList
-  setViewed: Function
-  v: Version
-}) => (
-  <td>
-    <div className="d-flex flex-column">
-      <div onClick={() => setViewed([...viewed, v.id])}>
-        <input type="checkbox" checked={false} />
-        &nbsp;
-        <span>Viewed</span>
-      </div>
-      {v.object && <FullObjectModal object={v.object} title="👁️ Before" />}
-      {v.changeset && (
-        <FullObjectModal
-          object={merge(v.object, v.changeset)}
-          title="👁️ After"
-        />
-      )}
-      {v.item_url && (
-        <a href={v.item_url} style={{textDecoration: "none"}} target="_blank">
-          ↗️ See live
-        </a>
-      )}
-    </div>
-  </td>
-)
+const TdActions = ({config, v}: {config: Config; v: Version}) => {
+  const [menuCoords, setMenuCoords] = useState<null | [number, number]>(null)
+  const showMenu = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault()
+      ContextMenu.closeAll()
+      setMenuCoords([event.clientX, event.clientY])
+    },
+    [setMenuCoords]
+  )
+
+  return (
+    <td>
+      <button
+        className="btn btn-outline-secondary rounded-circle px-3"
+        data-ci-type="version-action-button"
+        onClick={showMenu}
+      >
+        ⋮
+      </button>
+
+      <VersionContextMenu
+        config={config}
+        coords={menuCoords}
+        setCoords={setMenuCoords}
+        version={v}
+      />
+    </td>
+  )
+}
 
 const truncate = (str: string, len: number) => {
   if (!str || str.length <= len) return str
   return str.substring(0, len) + "…"
 }
-
-const merge = (object: Version["object"], changeset: Version["changeset"]) => {
-  const newState = {...object}
-  Object.entries(changeset).forEach(([k, [_, newValue]]) => {
-    newState[k] = newValue
-  })
-  return newState
-}

data/javascript/src/types.ts

@@ -16,6 +16,7 @@ export type ColumnPicks = Record<Column, boolean>
 export type ViewedList = Version["id"][]
 
 export type Config = {
+  allowRollback: boolean
   columns: ColumnPicks
   setColumns: React.Dispatch<React.SetStateAction<ColumnPicks>>
   viewed: ViewedList
@@ -27,7 +28,7 @@ export interface Version {
   item_type: string
   item_id: string
   whodunnit?: string
-  event: string
+  event: "create" | "update" | "destroy"
   created_at: string
   changeset: Record<string, [unknown, unknown]>
   object: Record<string, unknown>
@@ -35,6 +36,13 @@ export interface Version {
   user_url?: string
 }
 
+export interface VersionContextMenuProps {
+  config: Config
+  coords: null | [number, number]
+  setCoords: Function
+  version: Version
+}
+
 export const stickyStyle = {
   position: "sticky",
   background: "#ffffffdd",

data/lib/paper_trail_viewer/data_source/active_record.rb

@@ -3,28 +3,29 @@ require 'kaminari'
 module PaperTrailViewer::DataSource
   # The default data source. Queries version records via ActiveRecord.
   # See DataSource::Bigquery::Adapter for how to implement another source.
-  class ActiveRecord
-    def initialize(model: 'PaperTrail::Version')
-      @model = model
+  class ActiveRecord < Base
+    def initialize(version_class: 'PaperTrail::Version')
+      @version_class = version_class
     end
 
-    def call(item_type: nil, item_id: nil, event: nil, filter: nil, page: 1, per_page: 50)
-      versions = @model.is_a?(String) ? @model.constantize : @model
-      versions = versions.order('created_at DESC, id DESC')
+    # @param [PaperTrailViewer::Query]
+    def perform_query(q)
+      version_class = q.version_class || @version_class
+      versions = version_class.is_a?(String) ? version_class.constantize : version_class
 
       if 'object_changes'.in?(versions.column_names)
         # Ignore blank versions that only touch updated_at or untracked fields.
         versions = versions.where.not(object_changes: '')
-        versions = versions.where('object_changes LIKE ?', "%#{filter}%") if filter.present?
+        versions = versions.where('object_changes LIKE ?', "%#{q.filter}%") if q.filter.present?
       elsif 'object'.in?(versions.column_names)
-        versions = versions.where('object LIKE ?', "%#{filter}%") if filter.present?
+        versions = versions.where('object LIKE ?', "%#{q.filter}%") if q.filter.present?
       end
 
-      versions = versions.where(item_type: item_type) if item_type.present?
-      versions = versions.where(item_id: item_id) if item_id.present?
-      versions = versions.where(event: event) if event.present?
+      versions = versions.where(item_type: q.item_type) if q.item_type.present?
+      versions = versions.where(item_id: q.item_id) if q.item_id.present?
+      versions = versions.where(event: q.event) if q.event.present?
 
-      versions.page(page).per(per_page)
+      versions.order('created_at DESC, id DESC').page(q.page).per(q.per_page)
     end
   end
 end

data/lib/paper_trail_viewer/data_source/base.rb

@@ -0,0 +1,87 @@
+require 'kaminari'
+
+module PaperTrailViewer
+  module DataSource
+    # Abstract superclass for version data sources.
+    class Base
+      def call(params, main_app)
+        query = PaperTrailViewer::Query.new(params)
+        relation = perform_query(query)
+        versions_as_json = relation.map { |v| version_as_json(v, main_app) }
+
+        {
+          allowRollback: PaperTrailViewer.allow_rollback,
+          hasNextPage:   versions_as_json.any? && !relation.last_page?,
+          query:         query.to_h,
+          versions:      versions_as_json,
+        }
+      end
+
+      private
+
+      def version_as_json(version, main_app)
+        {
+          **version.attributes.slice(*%w[id whodunnit event created_at]),
+          changeset: changeset_for(version),
+          object:    load_object(version),
+          item_id:   version.item_id.to_s,
+          item_type: version.item_type,
+          item_url:  change_item_url(version, main_app),
+          user_url:  user_url(version, main_app),
+        }
+      end
+
+      def changeset_for(version)
+        case version.event
+        when 'create', 'update'
+          version.changeset || {}
+        when 'destroy'
+          record = version.reify rescue nil
+          return {} unless record
+
+          record.attributes.each_with_object({}) do |changes, (k, v)|
+            changes[k] = [v, nil] unless v.nil?
+          end
+        else
+          raise ArgumentError, "Unknown event: #{version.event}"
+        end
+      end
+
+      # Return the URL for the item represented by the +version+,
+      # e.g. a Company record instance referenced by a version.
+      def change_item_url(version, main_app)
+        version_type = version.item_type.underscore.split('/').last
+        main_app.try("#{version_type}_url", version.item_id)
+      end
+
+      def user_url(version, main_app)
+        (path_method = PaperTrailViewer.user_path_method).present? &&
+          (id = version.whodunnit).present? &&
+          !id.start_with?('#') &&
+          main_app.try(path_method, id) ||
+          nil
+      end
+
+      def load_object(version)
+        obj = version.object
+        if obj.is_a?(String)
+          PaperTrail.serializer.load(obj)
+        elsif obj.is_a?(Hash)
+          OpenStruct.new(obj)
+        else
+          obj
+        end
+      end
+    end
+  end
+end
+
+# backport deserialization fix for recent rubies
+# https://github.com/paper-trail-gem/paper_trail/pull/1338
+if PaperTrail::VERSION.to_s < '12.2.0'
+  module PaperTrail::Serializers::YAML
+    def load(string)
+      ::YAML.respond_to?(:unsafe_load) ? ::YAML.unsafe_load(string) : ::YAML.load(string)
+    end
+  end
+end

data/lib/paper_trail_viewer/data_source/bigquery.rb

@@ -1,5 +1,5 @@
 module PaperTrailViewer::DataSource
-  class Bigquery
+  class Bigquery < Base
     def initialize(project_id:, credentials:, table:)
       require 'google/cloud/bigquery'
 
@@ -10,21 +10,22 @@ module PaperTrailViewer::DataSource
       @table = table
     end
 
-    def call(item_type: nil, item_id: nil, event: nil, filter: nil, page: 1, per_page: 50)
+    # @param [PaperTrailViewer::Query]
+    def perform_query(q)
       # https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax
-      bigquery_result = @bigquery.query(<<~SQL, max: per_page)
+      bigquery_result = @bigquery.query(<<~SQL, max: q.per_page)
         SELECT   *
         FROM     `#{@table}`
         # Ignore blank versions that only touch updated_at or untracked fields.
         WHERE    object_changes != ''
-        #{"AND   item_type = '#{item_type}'"        if item_type.present?}
-        #{"AND   item_id = #{item_id}"              if item_id.present?}
-        #{"AND   event = '#{event}'"                if event.present?}
-        #{"AND   object_changes LIKE '%#{filter}%'" if filter.present?}
+        #{"AND   item_type = '#{q.item_type}'"        if q.item_type.present?}
+        #{"AND   item_id = #{q.item_id}"              if q.item_id.present?}
+        #{"AND   event = '#{q.event}'"                if q.event.present?}
+        #{"AND   object_changes LIKE '%#{q.filter}%'" if q.filter.present?}
         ORDER BY created_at DESC, id DESC
         # Paginate via OFFSET.
         # LIMIT must be greater than `max:` or result#next? is always false.
-        LIMIT    #{per_page + 1} OFFSET #{(page - 1) * per_page}
+        LIMIT    #{q.per_page + 1} OFFSET #{(q.page - 1) * q.per_page}
       SQL
 
       Adapter.new(bigquery_result)

data/lib/paper_trail_viewer/query.rb

@@ -0,0 +1,23 @@
+module PaperTrailViewer
+  Query = Struct.new(*%i[event filter item_id item_type page per_page version_class]) do
+    def initialize(params)
+      self.event      = params[:event].presence_in(%w[create update destroy])
+      self.filter     = (params[:filter].presence if params[:filter] != '%%')
+      self.item_id    = params[:item_id].presence
+      self.item_type  = params[:item_type].presence
+      self.page       = params[:page].to_i.clamp(1, 1000)
+      self.per_page   = params[:per_page].presence&.to_i&.clamp(1, 1000) || 50
+
+      # If an item_type is given, try to see if it uses a custom version class.
+      if item_type
+        begin
+          item_class = item_type.classify.constantize
+          self.version_class = item_class.version_class_name
+        rescue NameError, NoMethodError
+          # We might be looking at a model that is deleted or no longer versioned.
+          # Ignore and give it a try with the default version class.
+        end
+      end
+    end
+  end
+end

data/lib/paper_trail_viewer/rollback.rb

@@ -0,0 +1,20 @@
+module PaperTrailViewer::Rollback
+  def self.call(version_class: PaperTrail::Version, version_id:)
+    PaperTrailViewer.allow_rollback or raise 'Rollback not allowed'
+
+    version = version_class.find(version_id)
+
+    if version.event == 'create'
+      version.item_type.constantize.find(version.item_id).destroy!
+      Result.new(true, 'Rolled back newly-created record by destroying it.')
+    else
+      version.reify.save!
+      Result.new(true, 'Rolled back changes to this record.')
+    end
+
+  rescue StandardError => e
+    Result.new(false, "#{e.class}: #{e.message}")
+  end
+
+  Result = Struct.new(:success, :message)
+end

data/lib/paper_trail_viewer/version.rb

@@ -1,3 +1,3 @@
 module PaperTrailViewer
-  VERSION = '1.0.0'
+  VERSION = '1.1.0'
 end

data/lib/paper_trail_viewer.rb

@@ -1,11 +1,15 @@
 require 'paper_trail'
 
+require_relative 'paper_trail_viewer/data_source/base'
 require_relative 'paper_trail_viewer/data_source/active_record'
 require_relative 'paper_trail_viewer/data_source/bigquery'
 require_relative 'paper_trail_viewer/engine'
+require_relative 'paper_trail_viewer/query'
+require_relative 'paper_trail_viewer/rollback'
 require_relative 'paper_trail_viewer/version'
 
 module PaperTrailViewer
+  mattr_accessor(:allow_rollback)   { true }
   mattr_accessor(:data_source)      { DataSource::ActiveRecord.new }
   mattr_accessor(:user_path_method) { :user_path }
 end

data/paper_trail_viewer.gemspec

@@ -13,7 +13,6 @@ Gem::Specification.new do |spec|
   spec.license       = 'MIT'
 
   spec.files         = `git ls-files -z`.split("\x0") + %w[javascript/compiled.js]
-  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ['lib']