paper_trail_viewer 1.0.0

data/javascript/src/app.tsx

@@ -0,0 +1,100 @@
+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 {ColumnPicks} from "./types"
+
+document.addEventListener("DOMContentLoaded", () => {
+  const el = document.getElementById("mount-paper-trail-viewer")
+  el && render(<App />, el)
+})
+
+const App = () => {
+  const initialParams = useInitialParamsFromURL()
+
+  const {register, handleSubmit, watch, setValue} = useForm({
+    defaultValues: initialParams,
+  })
+
+  const [loading, setLoading] = useState(true)
+  const [data, setData] = useState({
+    hasNextPage: false,
+    versions: [],
+  })
+  const config = useConfig(initialParams)
+
+  const submit: SubmitHandler<FieldValues> = (params) => {
+    // put form params into current URL
+    const newURL = new URL(window.location.href.replace(/\?.*/, ""))
+    Object.entries(params).forEach(
+      ([k, v]) => v && newURL.searchParams.set(k, v)
+    )
+    window.history.replaceState({}, "", newURL)
+
+    // call API to fetch matching versions
+    fetch(`${window.location.pathname}/versions?${newURL.searchParams}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data)
+        setLoading(false)
+      })
+  }
+
+  useEffect(() => submit(initialParams), [initialParams])
+
+  return (
+    <div className="p-2">
+      <Controls
+        config={config}
+        onSubmit={handleSubmit(submit)}
+        register={register}
+      />
+
+      <VersionsList
+        config={config}
+        loading={loading}
+        versions={data.versions}
+      />
+
+      <Pagination
+        hasNext={data.hasNextPage}
+        onPageChange={(newPage: number) => {
+          setValue("page", newPage)
+          handleSubmit(submit)()
+        }}
+        page={watch("page")}
+      />
+    </div>
+  )
+}
+
+const useInitialParamsFromURL = () =>
+  useMemo(() => {
+    const search = new URLSearchParams(window.location.search)
+
+    return {
+      event: search.get("event") || "",
+      filter: search.get("filter") || "",
+      item_id: search.get("item_id") || "",
+      item_type: search.get("item_type") || "",
+      page: parseInt("" + search.get("page")) || 1,
+      per_page: parseInt("" + search.get("per_page")) || 20,
+    }
+  }, [])
+
+const useConfig = (initialParams: Record<string, unknown>) => {
+  const [columns, setColumns] = useState({
+    actions: true,
+    changes: true,
+    event: true,
+    item_id: !initialParams.item_id,
+    item_type: !initialParams.item_type,
+    time: false,
+    version_id: true,
+    whodunnit: true,
+  } as ColumnPicks)
+
+  const [viewed, setViewed] = useState([])
+
+  return {columns, setColumns, viewed, setViewed}
+}

data/javascript/src/components/change_diff.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer"
+import {Version} from "../types"
+
+// maybe render this only when in the viewport if performance is bad for
+// a high number of records
+export const ChangeDiff: React.FC<{changeset: Version["changeset"]}> = ({
+  changeset,
+}) => (
+  <>
+    {Object.entries(changeset).map(([k, [before, after]]) => {
+      // some data is nested, e.g. description translations
+      if (after && typeof after === "object") {
+        const beforeObj = new Object(before) as Record<string, unknown>
+        const afterObj = new Object(after) as Record<string, unknown>
+        const keys = [
+          ...new Set(Object.keys(beforeObj).concat(Object.keys(afterObj))),
+        ]
+        return (
+          <React.Fragment key={k}>
+            {keys.map((subK) => (
+              <Diff
+                key={subK}
+                name={`${k}_${subK}`}
+                before={beforeObj[subK]}
+                after={afterObj[subK]}
+              />
+            ))}
+          </React.Fragment>
+        )
+      }
+      // normal case: non-nested data
+      return <Diff key={k} name={k} before={before} after={after} />
+    })}
+  </>
+)
+
+const Diff: React.FC<{name: string; before: unknown; after: unknown}> = ({
+  name,
+  before,
+  after,
+}) => {
+  return (
+    <>
+      <strong>{name}</strong>
+      <ReactDiffViewer
+        compareMethod={DiffMethod.SENTENCES}
+        extraLinesSurroundingDiff={2}
+        // split HTML into lines for better diff results
+        oldValue={String(before || "").replace(/</g, "\n<")}
+        newValue={String(after || "").replace(/</g, "\n<")}
+        showDiffOnly
+        splitView={false}
+      />
+    </>
+  )
+}

data/javascript/src/components/config_modal.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import {Config, availableColumns} from "../types"
+import {Modal} from "./modal"
+
+export const ConfigModal: React.FC<{
+  config: Config
+}> = ({config: {columns, setColumns}}) => (
+  <Modal trigger="⚙️">
+    <h4>Settings</h4>
+    <h5>Columns</h5>
+    <ul>
+      {availableColumns.map((col, i) => (
+        <li
+          key={i}
+          onClick={() => setColumns({...columns, [col]: !columns[col]})}
+        >
+          <input type="checkbox" checked={columns[col]} /> {col}
+        </li>
+      ))}
+    </ul>
+  </Modal>
+)

data/javascript/src/components/controls.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import {Config, stickyStyle} from "../types"
+import {ConfigModal} from "./config_modal"
+
+export const Controls: React.FC<{
+  register: (
+    x: "page" | "filter" | "event" | "item_id" | "item_type" | "per_page"
+  ) => void
+  onSubmit: React.FormEventHandler<HTMLFormElement>
+  config: Config
+}> = ({register, onSubmit, config}) => (
+  <nav
+    className="d-flex align-items-md-center py-2 justify-content-center"
+    style={{...stickyStyle, top: 0}}
+  >
+    <form className="m-0" onSubmit={onSubmit}>
+      <span className="mx-1">Versions of:</span>
+      <input
+        {...register("item_type")}
+        type="text"
+        placeholder="Model"
+        style={{width: 150}}
+      />
+      <span className="mx-1">#</span>
+      <input
+        {...register("item_id")}
+        type="text"
+        placeholder="id"
+        style={{width: 110}}
+      />
+      <span className="mx-1">Per page:</span>
+      <select {...register("per_page")}>
+        <option value={20}>20</option>
+        <option value={50}>50</option>
+        <option value={100}>100</option>
+        <option value={200}>200</option>
+      </select>
+      <span className="mx-1">Event:</span>
+      <select {...register("event")}>
+        <option value="">any</option>
+        <option value="create">create</option>
+        <option value="update">update</option>
+        <option value="destroy">destroy</option>
+      </select>
+      <span className="mx-1">Filter:</span>
+      <input
+        {...register("filter")}
+        type="text"
+        placeholder="e.g. field name/value"
+        style={{width: 170}}
+      />
+      <button
+        name="button"
+        type="submit"
+        className="btn btn-sm btn-primary mx-1"
+      >
+        Search
+      </button>
+      <ConfigModal config={config} />
+    </form>
+  </nav>
+)

data/javascript/src/components/full_object_modal.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import {Version} from "../types"
+import {Modal} from "./modal"
+
+export const FullObjectModal: React.FC<{
+  object: Version["object"]
+  title: string
+}> = ({object, title}) => (
+  <Modal trigger={title}>
+    <table className="table">
+      <tbody>
+        {Object.entries(object).map(([k, v]) => (
+          <tr key={k}>
+            <th>{k}</th>
+            <td>{String(v || "")}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </Modal>
+)

data/javascript/src/components/index.ts

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

data/javascript/src/components/modal.tsx

@@ -0,0 +1,34 @@
+import React, {useState} from "react"
+import ReactModal from "react-modal"
+
+export const Modal = ({
+  children,
+  trigger,
+}: {
+  children: React.ReactNode
+  trigger: string
+}) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <span style={{cursor: "pointer"}} onClick={() => setOpen(!open)}>
+        {trigger}
+      </span>
+      <ReactModal
+        ariaHideApp={false}
+        isOpen={open}
+        onRequestClose={() => setOpen(false)}
+        style={{overlay: {zIndex: 20}}}
+      >
+        <span
+          onClick={() => setOpen(false)}
+          style={{cursor: "pointer", float: "right"}}
+        >
+          ╳
+        </span>
+        {children}
+      </ReactModal>
+    </>
+  )
+}

data/javascript/src/components/pagination.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+
+export const Pagination: React.FC<{
+  page: number
+  hasNext: boolean
+  onPageChange: (n: number) => void
+}> = ({page, hasNext, onPageChange}) => {
+  const goTo = (newPage: number) => {
+    if (newPage > 0 && (newPage < page || hasNext)) onPageChange(newPage)
+  }
+
+  return (
+    <nav className="d-flex justify-content-center my-2">
+      <button
+        className="btn btn-sm btn-outline-dark"
+        disabled={page <= 1}
+        onClick={() => goTo(page - 1)}
+      >
+        « Back
+      </button>
+      {page > 1 && (
+        <button className="btn btn-sm btn-outline-dark" onClick={() => goTo(1)}>
+          1
+        </button>
+      )}
+      {page > 2 && <span> … </span>}
+      {page > 3 && (
+        <button
+          className="btn btn-sm btn-outline-dark"
+          onClick={() => goTo(page - 1)}
+        >
+          {page - 1}
+        </button>
+      )}
+      <em className="mx-1">{page}</em>
+      {hasNext && (
+        <button
+          className="btn btn-sm btn-outline-dark"
+          onClick={() => goTo(page + 1)}
+        >
+          {page + 1}
+        </button>
+      )}
+      <button
+        className="btn btn-sm btn-outline-dark"
+        disabled={!hasNext}
+        onClick={() => goTo(page + 1)}
+      >
+        Next »
+      </button>
+    </nav>
+  )
+}

data/javascript/src/components/versions_list.tsx

@@ -0,0 +1,142 @@
+import React, {useCallback} from "react"
+import {Version, stickyStyle, Config, ViewedList} from "../types"
+import {ChangeDiff} from "./change_diff"
+import {FullObjectModal} from "./full_object_modal"
+
+export const VersionsList: React.FC<{
+  config: Config
+  loading: boolean
+  versions: Array<Version>
+}> = ({config, loading, versions}) => {
+  if (loading) return <Info text="⌛" />
+
+  if (versions.length === 0) return <Info text="No versions found." />
+
+  const {columns, viewed, setViewed} = config
+
+  return (
+    <table className="table">
+      <thead style={{...stickyStyle, top: 47}}>
+        <tr>
+          {columns.version_id && <th>Version ID</th>}
+          {columns.item_type && <th>Item Type</th>}
+          {columns.item_id && <th>Item ID</th>}
+          {columns.event && <th>Event</th>}
+          {columns.whodunnit && <th>Whodunnit</th>}
+          {columns.time && <th>Time</th>}
+          {columns.changes && <th>Changes</th>}
+          {columns.actions && (
+            <th>
+              Actions&nbsp;
+              <Undo config={config} />
+            </th>
+          )}
+        </tr>
+      </thead>
+
+      <tbody>
+        {versions.map((v, i) => {
+          if (viewed.includes(v.id)) return null
+
+          return (
+            <tr key={i} data-ci-type="version-row">
+              {columns.version_id && <td>{v.id}</td>}
+              {columns.item_type && <td>{v.item_type}</td>}
+              {columns.item_id && <td>{v.item_id}</td>}
+              {columns.event && <td>{v.event}</td>}
+              {columns.whodunnit && <TdWhodunnit v={v} />}
+              {columns.time && <TdTime v={v} />}
+              {columns.changes && <TdChanges v={v} />}
+              {columns.actions && (
+                <TdActions viewed={viewed} setViewed={setViewed} v={v} />
+              )}
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+const Info = ({text}: {text: string}) => (
+  <p className="d-flex justify-content-center">{text}</p>
+)
+
+const Undo = ({config: {viewed, setViewed}}: {config: Config}) => {
+  const undo = useCallback(() => {
+    setViewed(viewed.slice(0, -1))
+  }, [viewed, setViewed])
+
+  return (
+    <span
+      style={viewed.length === 0 ? {visibility: "hidden"} : {}}
+      onClick={() => undo()}
+    >
+      ⏪
+    </span>
+  )
+}
+
+const TdWhodunnit = ({v}: {v: Version}) => (
+  <td>
+    {(v.whodunnit && (
+      <a href={v.user_url || "#"} title={v.whodunnit}>
+        {truncate(v.whodunnit, 8)}
+      </a>
+    )) ||
+      "–"}
+  </td>
+)
+
+const TdTime = ({v}: {v: Version}) => (
+  <td>{v.created_at.replace("T", " ").replace(/\+.*/, "")}</td>
+)
+
+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 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/index.ts

@@ -0,0 +1 @@
+export * from './app'

data/javascript/src/types.ts

@@ -0,0 +1,42 @@
+import {CSSProperties} from "react"
+
+export const availableColumns = [
+  "version_id",
+  "item_type",
+  "item_id",
+  "event",
+  "time",
+  "whodunnit",
+  "changes",
+  "actions",
+] as const
+
+export type Column = typeof availableColumns[number]
+export type ColumnPicks = Record<Column, boolean>
+export type ViewedList = Version["id"][]
+
+export type Config = {
+  columns: ColumnPicks
+  setColumns: React.Dispatch<React.SetStateAction<ColumnPicks>>
+  viewed: ViewedList
+  setViewed: React.Dispatch<React.SetStateAction<ViewedList>>
+}
+
+export interface Version {
+  id: number
+  item_type: string
+  item_id: string
+  whodunnit?: string
+  event: string
+  created_at: string
+  changeset: Record<string, [unknown, unknown]>
+  object: Record<string, unknown>
+  item_url?: string
+  user_url?: string
+}
+
+export const stickyStyle = {
+  position: "sticky",
+  background: "#ffffffdd",
+  zIndex: 10,
+} as CSSProperties

data/lib/paper_trail_viewer/data_source/active_record.rb

@@ -0,0 +1,30 @@
+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
+    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')
+
+      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?
+      elsif 'object'.in?(versions.column_names)
+        versions = versions.where('object LIKE ?', "%#{filter}%") if 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.page(page).per(per_page)
+    end
+  end
+end

data/lib/paper_trail_viewer/data_source/bigquery.rb

@@ -0,0 +1,45 @@
+module PaperTrailViewer::DataSource
+  class Bigquery
+    def initialize(project_id:, credentials:, table:)
+      require 'google/cloud/bigquery'
+
+      @bigquery = Google::Cloud::Bigquery.new(
+        project_id:  project_id,
+        credentials: credentials,
+      )
+      @table = table
+    end
+
+    def call(item_type: nil, item_id: nil, event: nil, filter: nil, page: 1, per_page: 50)
+      # https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax
+      bigquery_result = @bigquery.query(<<~SQL, max: 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?}
+        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}
+      SQL
+
+      Adapter.new(bigquery_result)
+    end
+
+    Adapter = Struct.new(:bigquery_result) do
+      # PaperTrail::Version::ActiveRecord_Relation compatibility method
+      def map
+        bigquery_result.map { |row| yield PaperTrail::Version.new(row) }
+      end
+
+      # Kaminari compatibility method
+      def last_page?
+        !bigquery_result.next?
+      end
+    end
+  end
+end

data/lib/paper_trail_viewer/engine.rb

@@ -0,0 +1,5 @@
+require 'rails'
+
+class PaperTrailViewer::Engine < Rails::Engine
+  isolate_namespace PaperTrailViewer
+end

data/lib/paper_trail_viewer/version.rb

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

data/lib/paper_trail_viewer.rb

@@ -0,0 +1,11 @@
+require 'paper_trail'
+
+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/version'
+
+module PaperTrailViewer
+  mattr_accessor(:data_source)      { DataSource::ActiveRecord.new }
+  mattr_accessor(:user_path_method) { :user_path }
+end