@raketa-cloud/admin 1.8.17 → 1.8.19

package/src/tests/routeAssets.test.js

@@ -0,0 +1,120 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import currentPath from "../currentPath.cjs";
+import routeAssets from "../routeAssets";
+
+function makeAdapter() {
+  const routes = {};
+
+  return {
+    routes,
+    addRoute: jest.fn((verb, path, handler) => {
+      routes[`${verb} ${path}`] = handler;
+    }),
+  };
+}
+
+// Minimal stand-in for Hono's context: records what the handler returns.
+function makeCtx() {
+  return {
+    body: jest.fn((source, status, headers) => ({ source, status, headers })),
+  };
+}
+
+describe("routeAssets", () => {
+  test("registers the package's client scripts under /report", () => {
+    const adapter = makeAdapter();
+
+    routeAssets(adapter);
+
+    expect(Object.keys(adapter.routes)).toEqual([
+      "GET /report/analytics.js",
+      "GET /report/reports.js",
+      "GET /report/chart.js",
+    ]);
+  });
+
+  // A synchronous read per request blocks the event loop for a file that only
+  // changes while someone is editing it.
+  describe("reading the scripts", () => {
+    const fs = require("node:fs");
+    const env = process.env.RAKETA_ENV;
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+      if (env === undefined) delete process.env.RAKETA_ENV;
+      else process.env.RAKETA_ENV = env;
+    });
+
+    const get = async (adapter, file) =>
+      adapter.routes[`GET /report/${file}`](makeCtx());
+
+    test("reads each script once outside development", async () => {
+      const read = jest.spyOn(fs, "readFileSync");
+      const adapter = makeAdapter();
+
+      routeAssets(adapter);
+      await get(adapter, "analytics.js");
+      await get(adapter, "analytics.js");
+      await get(adapter, "reports.js");
+
+      expect(read).toHaveBeenCalledTimes(2);
+    });
+
+    test("re-reads on every request in development", async () => {
+      process.env.RAKETA_ENV = "development";
+      const read = jest.spyOn(fs, "readFileSync");
+      const adapter = makeAdapter();
+
+      routeAssets(adapter);
+      await get(adapter, "analytics.js");
+      await get(adapter, "analytics.js");
+
+      expect(read).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  // Served from the dependency rather than a CDN so a strict script-src CSP
+  // can't leave the traffic chart blank.
+  test("serves the chart.js UMD bundle from the package's dependency", async () => {
+    const adapter = makeAdapter();
+
+    routeAssets(adapter);
+
+    const ctx = makeCtx();
+    const result = await adapter.routes["GET /report/chart.js"](ctx);
+
+    expect(result.status).toBe(200);
+    expect(result.source).toContain("window.Chart");
+    expect(result.headers["content-type"]).toBe(
+      "application/javascript; charset=utf-8",
+    );
+    expect(result.headers["cache-control"]).toBe("public, max-age=3600");
+
+    // Held in memory after the first read — 200KB per request otherwise.
+    const again = await adapter.routes["GET /report/chart.js"](makeCtx());
+    expect(again.source).toBe(result.source);
+  });
+
+  test("serves each script from the package, not the host app", async () => {
+    const adapter = makeAdapter();
+
+    routeAssets(adapter);
+
+    for (const file of ["analytics.js", "reports.js"]) {
+      const ctx = makeCtx();
+      const result = await adapter.routes[`GET /report/${file}`](ctx);
+
+      const source = readFileSync(join(currentPath, "report", file), "utf8");
+
+      expect(result.source).toBe(source);
+      expect(result.status).toBe(200);
+      expect(result.headers["content-type"]).toBe(
+        "application/javascript; charset=utf-8",
+      );
+      // Read per request so `npm run dev` picks up edits without a restart.
+      expect(result.headers["cache-control"]).toBe("no-cache");
+    }
+  });
+});

package/src/tests/routeResourceModule.test.js

@@ -1,16 +1,19 @@
 import routeResourceModule from "../routeResourceModule";
 
-function makeAdapter() {
+function makeAdapter(globalConfig = {}) {
   return {
     routeCollection: jest.fn(),
     routeNestedCollection: jest.fn(),
     routeNestedMember: jest.fn(),
+    globalConfig,
   };
 }
 
 describe("routeResourceModule", () => {
   test("registers exports collection with explicit mapping", () => {
-    const adapter = makeAdapter();
+    const adapter = makeAdapter({
+      features: { reports: { article: true } },
+    });
 
     routeResourceModule(adapter, "article", "articles", {
       dateFields: ["publish_at"],
@@ -32,7 +35,101 @@ describe("routeResourceModule", () => {
       resourceType: "article",
       resourceTypePlural: "articles",
       dateFields: ["publish_at"],
+      reports: true,
+    });
+  });
+
+  test("skips report routes for modules with reports disabled", () => {
+    const adapter = makeAdapter();
+
+    routeResourceModule(adapter, "banner", "banners");
+
+    const paths = adapter.routeCollection.mock.calls.flatMap(([mapping]) =>
+      mapping.map(([, path]) => path),
+    );
+
+    expect(paths).not.toContain("/banners/:id/insights");
+    expect(paths).not.toContain("/banners/:id/performance");
+  });
+
+  test("no longer registers page routes for the reports", () => {
+    const adapter = makeAdapter({
+      features: { reports: { page: true } },
+    });
+
+    routeResourceModule(adapter, "page", "pages");
+
+    const paths = adapter.routeCollection.mock.calls.flatMap(([mapping]) =>
+      mapping.map(([, path]) => path),
+    );
+
+    // The Settings page reads the JSON feed instead; the standalone Insights
+    // and Performance pages are gone.
+    expect(paths).not.toContain("/pages/:id/insights");
+    expect(paths).not.toContain("/pages/:id/performance");
+  });
+
+  test("registers the reports JSON feed when enabled via the project-level features config", () => {
+    const adapter = makeAdapter({
+      features: { reports: { page: true } },
+    });
+
+    routeResourceModule(adapter, "page", "pages");
+
+    const feedCall = adapter.routeCollection.mock.calls.find(([mapping]) =>
+      mapping.some(([, path]) => path === "/report/pages/:id"),
+    );
+
+    expect(feedCall[0]).toEqual([
+      [
+        "GET",
+        "/report/pages/:id",
+        "report/pages",
+        "pages",
+        "reports",
+        expect.any(Function),
+      ],
+    ]);
+  });
+
+  test("skips the reports JSON feed when disabled via the project-level features config", () => {
+    const adapter = makeAdapter({
+      features: { reports: { banner: false } },
+    });
+
+    routeResourceModule(adapter, "banner", "banners");
+
+    const paths = adapter.routeCollection.mock.calls.flatMap(([mapping]) =>
+      mapping.map(([, path]) => path),
+    );
+
+    expect(paths).not.toContain("/report/banners/:id");
+  });
+
+  test("defaults reports to disabled when the resource is not listed in the features config", () => {
+    const adapter = makeAdapter({
+      features: { reports: { page: true } },
     });
+
+    routeResourceModule(adapter, "release-note", "release-notes");
+
+    const paths = adapter.routeCollection.mock.calls.flatMap(([mapping]) =>
+      mapping.map(([, path]) => path),
+    );
+
+    expect(paths).not.toContain("/report/release-notes/:id");
+  });
+
+  test("defaults reports to disabled when no features config is present at all", () => {
+    const adapter = makeAdapter();
+
+    routeResourceModule(adapter, "page", "pages");
+
+    const paths = adapter.routeCollection.mock.calls.flatMap(([mapping]) =>
+      mapping.map(([, path]) => path),
+    );
+
+    expect(paths).not.toContain("/report/pages/:id");
   });
 
   test("propagates resourceConfig with dateFields to all helpers", () => {

package/src/tests/routeStandard.test.js

@@ -20,7 +20,7 @@ describe("routeStandard", () => {
   });
 
   test("registers dashboard mapping via adapter.routeCollection", () => {
-    const adapter = { routeCollection: jest.fn() };
+    const adapter = { routeCollection: jest.fn(), addRoute: jest.fn() };
 
     routeStandard(adapter);
 
@@ -42,7 +42,7 @@ describe("routeStandard", () => {
   });
 
   test("registers redirects, tags, api/tags via routeCollection helper", () => {
-    const adapter = { routeCollection: jest.fn() };
+    const adapter = { routeCollection: jest.fn(), addRoute: jest.fn() };
 
     routeStandard(adapter);
 
@@ -60,7 +60,7 @@ describe("routeStandard", () => {
   });
 
   test("delegates to routeSettings and registers page/article/event resources", () => {
-    const adapter = { routeCollection: jest.fn() };
+    const adapter = { routeCollection: jest.fn(), addRoute: jest.fn() };
 
     routeStandard(adapter);
 

package/src/tests/support/fakeDom.js

@@ -0,0 +1,164 @@
+// Minimal DOM stand-in for the browser scripts in src/static.
+//
+// The package runs jest in the "node" environment (jsdom is not a dependency)
+// and the static scripts only touch a small slice of the DOM: attribute
+// selectors, classList, dataset, style.left, textContent and remove(). This
+// implements exactly that slice.
+
+const camelize = (name) => name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+
+// Supports the selector forms used by the static scripts: a bare tag name and
+// any number of [attr] / [attr="value"] tests, optionally combined.
+function compileSelector(selector) {
+  const tests = [];
+
+  const tagName = selector
+    .replace(/\[([a-zA-Z-]+)(?:="([^"]*)")?\]/g, (_, name, value) => {
+      tests.push((el) =>
+        value === undefined
+          ? el.hasAttribute(name)
+          : el.getAttribute(name) === value,
+      );
+      return "";
+    })
+    .trim();
+
+  if (tagName) {
+    tests.push((el) => el.tagName === tagName.toLowerCase());
+  }
+
+  return (el) => tests.every((test) => test(el));
+}
+
+class FakeElement {
+  constructor(tagName, attributes = {}, children = []) {
+    this.tagName = tagName.toLowerCase();
+    this.attributes = { ...attributes };
+    this.children = [];
+    this.parentNode = null;
+    this.textContent = "";
+    this.style = {};
+    this.removed = false;
+    this._classes = new Set(
+      (attributes.class || "").split(/\s+/).filter(Boolean),
+    );
+
+    this.classList = {
+      add: (...names) => names.forEach((name) => this._classes.add(name)),
+      remove: (...names) => names.forEach((name) => this._classes.delete(name)),
+      contains: (name) => this._classes.has(name),
+      toString: () => this.className,
+    };
+
+    children.forEach((child) => this.append(child));
+  }
+
+  get className() {
+    return [...this._classes].join(" ");
+  }
+
+  set className(value) {
+    this._classes = new Set(String(value).split(/\s+/).filter(Boolean));
+  }
+
+  get dataset() {
+    return Object.keys(this.attributes).reduce((acc, name) => {
+      if (name.startsWith("data-")) {
+        acc[camelize(name.slice(5))] = this.attributes[name];
+      }
+      return acc;
+    }, {});
+  }
+
+  append(child) {
+    child.parentNode = this;
+    this.children.push(child);
+    return child;
+  }
+
+  hasAttribute(name) {
+    return this.attributes[name] !== undefined;
+  }
+
+  getAttribute(name) {
+    return this.attributes[name] ?? null;
+  }
+
+  setAttribute(name, value) {
+    this.attributes[name] = String(value);
+  }
+
+  removeAttribute(name) {
+    delete this.attributes[name];
+  }
+
+  remove() {
+    this.removed = true;
+    if (!this.parentNode) return;
+    this.parentNode.children = this.parentNode.children.filter(
+      (child) => child !== this,
+    );
+    this.parentNode = null;
+  }
+
+  descendants() {
+    return this.children.flatMap((child) => [child, ...child.descendants()]);
+  }
+
+  querySelector(selector) {
+    return this.querySelectorAll(selector)[0] ?? null;
+  }
+
+  querySelectorAll(selector) {
+    const matches = compileSelector(selector);
+    return this.descendants().filter(matches);
+  }
+}
+
+export function el(tagName, attributes = {}, children = []) {
+  return new FakeElement(tagName, attributes, children);
+}
+
+// Root element plus the document/window pair the static scripts expect. The
+// caller installs them on globalThis before requiring the script under test.
+export function createDom(children = [], { readyState = "complete" } = {}) {
+  const root = el("body", {}, children);
+  const listeners = {};
+
+  const document = {
+    readyState,
+    body: root,
+    addEventListener: (type, callback) => {
+      listeners[type] = [...(listeners[type] || []), callback];
+    },
+    dispatchEvent: (type) => (listeners[type] || []).forEach((cb) => cb()),
+    getElementById: (id) => root.querySelector(`[id="${id}"]`),
+    querySelector: (selector) => root.querySelector(selector),
+    querySelectorAll: (selector) => root.querySelectorAll(selector),
+  };
+
+  const window = {};
+
+  return { root, document, window, listeners };
+}
+
+// The static scripts run their work on import, so each test needs a fresh
+// module registry with the globals already in place.
+export function installDom(dom) {
+  globalThis.document = dom.document;
+  globalThis.window = dom.window;
+}
+
+export function uninstallDom() {
+  delete globalThis.document;
+  delete globalThis.window;
+}
+
+// The static scripts start their work on import and never hand back a promise,
+// so tests drain the queue instead of awaiting. Several ticks, because a single
+// one is not enough for a fetch → json → render chain under load.
+export const flushPromises = async (ticks = 10) => {
+  for (let i = 0; i < ticks; i++) {
+    await new Promise((resolve) => setImmediate(resolve));
+  }
+};

package/src/views/content_tasks/index.ejs

@@ -1,6 +1,6 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <h1 class="heading-1">Content Tasks</h1>
+    <h1 class="heading-1">Translation Tasks</h1>
 
     <div class="actions-toolbar">
       <button type="button" data-toggle-sidebar="1" class="p-2.5 rounded hover:bg-neutral-200 transition-all duration-300 ease-in-out dark:hover:bg-neutral-700">
@@ -18,7 +18,7 @@
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-12">
         <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
       </svg>
-      <h3 class="heading-3 mt-4">No content tasks</h3>
+      <h3 class="heading-3 mt-4">No translation tasks</h3>
       <p class="body-2 text-raketa-foreground/70 mt-2">
         <% if (Object.keys(_context.query).some(k => k.startsWith('f:'))) { %>
           No tasks match the selected filters. Try adjusting your filters.

package/src/views/resources/_shared/_core_web_vitals.ejs

@@ -0,0 +1,27 @@
+<%
+  const cwvMetrics = locals.vitalsMeta || [];
+%>
+
+<div class="pb-8">
+  <h4 class="flex items-center gap-2 pb-4 heading-3">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="invisible size-5 text-raketa-foreground/50" role="img" aria-label="Core Web Vitals Assessment" data-report="cwv-assessment">
+      <title>Core Web Vitals Assessment</title>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    </svg>
+
+    Core Web Vitals
+
+    <span class="font-normal body-3 text-raketa-foreground/50" data-report="cwv-period">
+      <span data-loader class="inline-block border-2 rounded-full size-3 border-raketa-primary/20 border-t-raketa-primary animate-spin"></span>
+    </span>
+  </h4>
+
+  <div class="grid grid-cols-2 gap-6 transition-all md:grid-cols-3 lg:grid-cols-5 lg:gap-0 lg:divide-x lg:divide-neutral-200 dark:lg:divide-neutral-700" data-report="vitals-grid">
+    <% cwvMetrics.forEach((m) => { %>
+    <%- render_partial('./_shared/_vital_meter.ejs', {
+      metric: m,
+      render_partial,
+    }) %>
+    <% }); %>
+  </div>
+</div>

package/src/views/resources/_shared/_quick_insights.ejs

@@ -0,0 +1,64 @@
+<%
+  // Google Analytics KPI cards, rendered empty. Labels, icons and frames come
+  // from here; every value is written in by /report/reports.js once it fetches
+  // the JSON feed — see the data-report / data-metric hooks below.
+  const SPINNER =
+    '<span data-loader class="inline-block border-2 rounded-full size-3 border-raketa-primary/20 border-t-raketa-primary animate-spin"></span>';
+
+  const ICONS = {
+    eye: '<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>',
+    users: '<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>',
+    clock: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>',
+    cursor: '<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672 13.684 16.6m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672Zm-7.518-.267A8.25 8.25 0 1 1 20.25 10.5M8.288 14.212A5.25 5.25 0 1 1 17.25 10.5"/>',
+  };
+
+  // `metric` keys match the summary keys reports.js reads from the feed.
+  const CARDS = [
+    { metric: 'views', label: 'Page Views', icon: ICONS.eye },
+    { metric: 'users', label: 'Unique Users', icon: ICONS.users },
+    { metric: 'avgDuration', label: 'Avg. Duration', icon: ICONS.clock },
+    { metric: 'engagement', label: 'Engagement', icon: ICONS.cursor },
+  ];
+%>
+
+<div class="pb-8">
+  <h4 class="flex items-center gap-2 pb-4 heading-3">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
+      <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" clip-rule="evenodd" />
+    </svg>
+
+    Insights
+
+    <span class="font-normal body-3 text-raketa-foreground/50" data-report="range">
+      <%- SPINNER %>
+    </span>
+  </h4>
+
+  <div class="grid grid-cols-1 gap-4 transition-all md:grid-cols-2 lg:grid-cols-4" data-report="insights-grid">
+    <% CARDS.forEach((c) => { %>
+    <div class="p-5 border rounded-xl border-neutral-200 dark:border-neutral-700">
+      <div class="flex items-start justify-between">
+        <div>
+          <p class="text-[10px] font-bold uppercase text-raketa-foreground/50"><%= c.label %></p>
+
+          <h3 class="mt-1 text-xl font-semibold text-raketa-foreground" data-report="value" data-metric="<%= c.metric %>">
+            <span data-loader class="inline-block border-2 rounded-full size-5 border-raketa-primary/20 border-t-raketa-primary animate-spin"></span>
+          </h3>
+        </div>
+
+        <div class="text-raketa-primary">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><%- c.icon %></svg>
+        </div>
+      </div>
+
+      <div class="flex items-center mt-3">
+        <span class="text-[11px] font-bold text-raketa-foreground/50" data-report="trend" data-metric="<%= c.metric %>">
+          <%- SPINNER %>
+        </span>
+
+        <span class="ml-1.5 text-[10px] text-raketa-foreground/50">vs prev. period</span>
+      </div>
+    </div>
+    <% }); %>
+  </div>
+</div>

package/src/views/resources/_shared/_scheduled_revisions.ejs

@@ -0,0 +1,88 @@
+<%
+  // Revisions queued for publication. Expects `scheduledRevisions` (the
+  // revisions carrying a `schedule`) plus render_partial for the nested
+  // operator partial. Renders nothing when the queue is empty.
+  const queued = locals.scheduledRevisions || [];
+%>
+
+<% if (queued.length) { %>
+<div class="pb-8">
+  <h4 class="flex items-center gap-2 pb-4 heading-3">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
+      <path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" />
+      <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
+    </svg>
+
+    Scheduled for publication
+  </h4>
+
+  <table class="data-grid alt">
+    <thead>
+      <tr>
+        <th>Title</th>
+        <th>Created by</th>
+        <th>Scheduled by</th>
+        <th>Publish on</th>
+        <th>&nbsp;</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <% queued.forEach((revision) => { %>
+      <tr class="border-b border-mono-25">
+        <td class="w-1/2 py-4 pl-2">
+          <div class="flex items-center gap-1">
+            <%= revision.title %>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <%- render_partial('./_shared/_revision_operator.ejs', { revision }) %>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1" title="<%= revision.schedule.operatorMeta.name %>">
+              <% if (revision.schedule.operatorMeta.avatar) { %>
+              <img src="<%= revision.schedule.operatorMeta.avatar %>" class="rounded-full size-4">
+              <% } %>
+              <%= revision.schedule.operatorMeta.name %>
+            </div>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="body-3 text-raketa-foreground/50">
+            <div class="flex items-center gap-1">
+              <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-raketa-foreground" viewBox="0 0 512 512">
+                <path d="M112.91 128A191.85 191.85 0 0064 254c-1.18 106.35 85.65 193.8 192 194 106.2.2 192-85.83 192-192 0-104.54-83.55-189.61-187.5-192a4.36 4.36 0 00-4.5 4.37V152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
+                <path d="M233.38 278.63l-79-113a8.13 8.13 0 0111.32-11.32l113 79a32.5 32.5 0 01-37.25 53.26 33.21 33.21 0 01-8.07-7.94z" />
+              </svg>
+
+              <time data-pretty-expiration-time datetime="<%= revision.schedule.mergeAt %>"><%= revision.schedule.mergeAt %></time>
+            </div>
+          </div>
+        </td>
+
+        <td class="whitespace-nowrap">
+          <div class="justify-end actions-toolbar">
+            <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceType}_revisions/${revision.id}/cancel_schedules` %>" method="post" class="inline-flex items-center gap-2">
+              <%- f.submit('Remove schedule', { class: 'btn-text' }) %>
+            </form>
+
+            <a href="/remote/login?redirect_to=/<%= _context.locale %>/admin/<%= _context.resourceConfig.resourceType %>-revisions/<%= revision.id %>/preview" target="_blank" class="btn-text has-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+              </svg>
+
+              Preview
+            </a>
+          </div>
+        </td>
+      </tr>
+      <% }); %>
+    </tbody>
+  </table>
+</div>
+<% } %>

package/src/views/resources/_shared/_title.ejs

@@ -1,14 +1,18 @@
-<div class="flex flex-col pb-4">
-  <h1 class="heading-1 flex items-center gap-2">
-    <%= resource.title %>
+<div class="flex justify-between w-full pb-8">
+  <div class="flex flex-col">
+    <h1 class="flex items-center gap-2 heading-1">
+      <%= resource.title %>
+    </h1>
+    <a href="<%= _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale) %>" target="_blank" class="btn-text"><%= _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale) %></a>
+  </div>
 
-    <% if (resource.visibility !== "private") { %>
-    <a href="<%= _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale) %>" target="_blank">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-raketa-primary">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-      </svg>
-    </a>
-    <% } %>
-  </h1>
-  <a href="<%= _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale) %>" target="_blank" class="btn-text"><%= _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale) %></a>
+  <%
+    const withTranslations = locals.withTranslations && locals.render_partial;
+  %>
+
+  <% if (withTranslations) { %>
+  <div class="pt-2">
+    <%- render_partial('./_shared/_translations_strip.ejs') %>
+  </div>
+  <% } %>
 </div>