collavre 0.1.0

data/app/javascript/creatives/drag_drop/indicator.js

@@ -0,0 +1,35 @@
+let linkHoverIndicator;
+let initialized = false;
+
+function appendLinkHoverIndicator() {
+  if (!linkHoverIndicator) return;
+  (document.body || document.documentElement).appendChild(linkHoverIndicator);
+}
+
+export function initIndicator() {
+  if (initialized) return;
+  initialized = true;
+
+  linkHoverIndicator = document.createElement('div');
+  linkHoverIndicator.className = 'creative-link-drop-indicator';
+  linkHoverIndicator.textContent = '-->';
+  linkHoverIndicator.style.display = 'none';
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', appendLinkHoverIndicator, { once: true });
+  } else {
+    appendLinkHoverIndicator();
+  }
+}
+
+export function showLinkHover(x, y) {
+  if (!linkHoverIndicator) return;
+  linkHoverIndicator.style.display = 'block';
+  linkHoverIndicator.style.left = `${x}px`;
+  linkHoverIndicator.style.top = `${y}px`;
+}
+
+export function hideLinkHover() {
+  if (!linkHoverIndicator) return;
+  linkHoverIndicator.style.display = 'none';
+}

data/app/javascript/creatives/drag_drop/operations.js

@@ -0,0 +1,116 @@
+import {
+  getChildrenContainer,
+  ensureChildrenContainer,
+  appendBlockToContainer,
+  moveBlockBefore,
+  moveBlockAfter,
+  setRowParent,
+  setRowRootState,
+  applyLevelDelta,
+  setHasChildren,
+  setExpanded,
+  syncParentHasChildren,
+} from './dom';
+
+export function createMoveContext(draggedState, targetRow, draggedChildren) {
+  return {
+    draggedRow: draggedState.row,
+    draggedChildren,
+    originalParentContainer: draggedState.row.parentNode,
+    originalNextSibling: draggedChildren ? draggedChildren.nextSibling : draggedState.row.nextSibling,
+    originalParentId: draggedState.parentId,
+    originalLevel: draggedState.level,
+    originalIsRoot: draggedState.isRoot,
+    targetRow,
+    targetHadContainer: !!getChildrenContainer(targetRow),
+    targetPreviousExpanded: targetRow ? targetRow.hasAttribute('expanded') : false,
+    targetPreviousHasChildren: targetRow ? targetRow.hasAttribute('has-children') : false,
+  };
+}
+
+export function applyMove({
+  direction,
+  targetRow,
+  draggedState,
+  draggedChildren,
+  moveContext,
+}) {
+  const targetLevel = Number(targetRow.getAttribute('level') || targetRow.level || 1);
+  let newParentId;
+  let newLevel;
+  let targetContainer = direction === 'child' ? getChildrenContainer(targetRow) : null;
+
+  if (direction === 'child') {
+    targetContainer = targetContainer || ensureChildrenContainer(targetRow);
+    moveContext.targetContainerCreated = !moveContext.targetHadContainer && !!targetContainer;
+    newParentId = targetRow.getAttribute('creative-id');
+    newLevel = targetLevel + 1;
+    appendBlockToContainer(draggedState.row, draggedChildren, targetContainer);
+    setHasChildren(targetRow, true);
+    setExpanded(targetRow, true, targetContainer);
+  } else if (direction === 'up') {
+    newParentId = targetRow.getAttribute('parent-id') || null;
+    newLevel = targetLevel;
+    moveBlockBefore(draggedState.row, draggedChildren, targetRow);
+  } else {
+    newParentId = targetRow.getAttribute('parent-id') || null;
+    newLevel = targetLevel;
+    moveBlockAfter(draggedState.row, draggedChildren, targetRow);
+  }
+
+  const levelDelta = newLevel - draggedState.level;
+  if (levelDelta !== 0) applyLevelDelta(draggedState.row, levelDelta);
+
+  setRowParent(draggedState.row, newParentId);
+  setRowRootState(draggedState.row, !newParentId);
+
+  syncParentHasChildren(draggedState.parentId);
+  syncParentHasChildren(newParentId);
+
+  return { newParentId, newLevel };
+}
+
+export function revertMove(context, attemptedParentId) {
+  const {
+    draggedRow,
+    draggedChildren,
+    originalParentContainer,
+    originalNextSibling,
+    originalParentId,
+    originalLevel,
+    originalIsRoot,
+    targetRow,
+    targetHadContainer,
+    targetPreviousExpanded,
+    targetPreviousHasChildren,
+    targetContainerCreated,
+  } = context;
+
+  if (originalNextSibling) {
+    originalParentContainer.insertBefore(draggedRow, originalNextSibling);
+    if (draggedChildren) originalParentContainer.insertBefore(draggedChildren, originalNextSibling);
+  } else {
+    originalParentContainer.appendChild(draggedRow);
+    if (draggedChildren) originalParentContainer.appendChild(draggedChildren);
+  }
+
+  const currentLevel = Number(draggedRow.getAttribute('level') || draggedRow.level || 1);
+  const delta = originalLevel - currentLevel;
+  if (delta !== 0) applyLevelDelta(draggedRow, delta);
+
+  setRowParent(draggedRow, originalParentId);
+  setRowRootState(draggedRow, originalIsRoot);
+
+  if (targetRow) {
+    if (targetContainerCreated) {
+      const container = getChildrenContainer(targetRow);
+      if (container) container.remove();
+    }
+    setHasChildren(targetRow, targetPreviousHasChildren);
+    const targetContainer = getChildrenContainer(targetRow);
+    setExpanded(targetRow, targetPreviousExpanded, targetContainer);
+  }
+
+  syncParentHasChildren(originalParentId);
+  syncParentHasChildren(attemptedParentId);
+}

data/app/javascript/creatives/drag_drop/state.js

@@ -0,0 +1,31 @@
+const state = {
+  dragged: null,
+  lastOverRow: null,
+};
+
+export function setDraggedState(payload) {
+  state.dragged = payload;
+}
+
+export function getDraggedState() {
+  return state.dragged;
+}
+
+export function resetDraggedState() {
+  state.dragged = null;
+  state.lastOverRow = null;
+}
+
+export function setLastDragOverRow(row) {
+  state.lastOverRow = row;
+}
+
+export function getLastDragOverRow() {
+  return state.lastOverRow;
+}
+
+export function hasDraggedState() {
+  return !!state.dragged;
+}
+
+export default state;

data/app/javascript/creatives/tree_renderer.js

@@ -0,0 +1,248 @@
+function normalizeBoolean(value) {
+  return value === true || value === 'true' || value === ''
+}
+
+function setDatasetValue(element, key, value) {
+  if (!element) return
+  if (value === undefined || value === null) {
+    delete element.dataset[key]
+  } else {
+    element.dataset[key] = String(value)
+  }
+}
+
+function applyRowProperties(row, node) {
+  if (!row || !node) return
+  let dirty = false
+
+  if (node.id != null && row.creativeId !== node.id) {
+    row.creativeId = node.id
+    row.setAttribute('creative-id', node.id)
+    dirty = true
+  }
+  if (node.dom_id && row.domId !== node.dom_id) {
+    row.domId = node.dom_id
+    row.setAttribute('dom-id', node.dom_id)
+    dirty = true
+  }
+  if (node.parent_id != null) {
+    if (row.parentId !== node.parent_id) {
+      row.parentId = node.parent_id
+      dirty = true
+    }
+    row.setAttribute('parent-id', node.parent_id)
+  } else if (row.hasAttribute?.('parent-id')) {
+    row.parentId = null
+    row.removeAttribute('parent-id')
+    dirty = true
+  }
+  if (node.level != null) {
+    const level = Number(node.level)
+    if (row.level !== level) {
+      row.level = level
+      dirty = true
+    }
+    row.setAttribute('level', node.level)
+  }
+
+  const updateBooleanAttr = (prop, attr, value) => {
+    if (value == null) return
+    const normalized = normalizeBoolean(value)
+    if (row[prop] !== normalized) {
+      row[prop] = normalized
+      dirty = true
+    }
+    if (normalized) {
+      row.setAttribute(attr, '')
+    } else {
+      row.removeAttribute(attr)
+    }
+  }
+
+  updateBooleanAttr('selectMode', 'select-mode', node.select_mode)
+  updateBooleanAttr('canWrite', 'can-write', node.can_write)
+  updateBooleanAttr('hasChildren', 'has-children', node.has_children)
+  updateBooleanAttr('expanded', 'expanded', node.expanded)
+  updateBooleanAttr('isRoot', 'is-root', node.is_root)
+
+  if (node.link_url) {
+    if (row.linkUrl !== node.link_url) {
+      row.linkUrl = node.link_url
+      dirty = true
+    }
+    row.setAttribute('link-url', node.link_url)
+  }
+
+  const templates = node.templates || {}
+  if (templates.description_html != null && row.descriptionHtml !== templates.description_html) {
+    row.descriptionHtml = templates.description_html
+    setDatasetValue(row, 'descriptionHtml', templates.description_html)
+    dirty = true
+  }
+  if (templates.progress_html != null && row.progressHtml !== templates.progress_html) {
+    row.progressHtml = templates.progress_html
+    setDatasetValue(row, 'progressHtml', templates.progress_html)
+    dirty = true
+  }
+  if (templates.edit_icon_html != null && row.editIconHtml !== templates.edit_icon_html) {
+    row.editIconHtml = templates.edit_icon_html
+    setDatasetValue(row, 'editIconHtml', templates.edit_icon_html)
+    dirty = true
+  }
+  if (templates.edit_off_icon_html != null && row.editOffIconHtml !== templates.edit_off_icon_html) {
+    row.editOffIconHtml = templates.edit_off_icon_html
+    setDatasetValue(row, 'editOffIconHtml', templates.edit_off_icon_html)
+    dirty = true
+  }
+  if (templates.origin_link_html != null && row.originLinkHtml !== templates.origin_link_html) {
+    row.originLinkHtml = templates.origin_link_html
+    setDatasetValue(row, 'originLinkHtml', templates.origin_link_html)
+    dirty = true
+  }
+
+  const inlinePayload = node.inline_editor_payload || {}
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'description_raw_html')) {
+    setDatasetValue(row, 'descriptionRawHtml', inlinePayload.description_raw_html ?? '')
+  }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'progress')) {
+    setDatasetValue(row, 'progressValue', inlinePayload.progress ?? '')
+  }
+  if (Object.prototype.hasOwnProperty.call(inlinePayload, 'origin_id')) {
+    setDatasetValue(row, 'originId', inlinePayload.origin_id ?? '')
+  }
+
+  if (dirty && typeof row.requestUpdate === 'function') {
+    row.requestUpdate()
+  }
+}
+
+function createRow(node) {
+  const row = document.createElement('creative-tree-row')
+  applyRowProperties(row, node)
+  return row
+}
+
+function applyChildrenContainerProperties(container, node) {
+  if (!container || !node) return
+  container.className = 'creative-children'
+  if (node.id) {
+    container.id = node.id
+  }
+  if (node.level != null) {
+    setDatasetValue(container, 'level', String(node.level))
+  }
+  const expanded = normalizeBoolean(node.expanded)
+  const loaded = normalizeBoolean(node.loaded)
+  container.dataset.expanded = expanded ? 'true' : 'false'
+  container.dataset.loaded = loaded ? 'true' : 'false'
+  if (node.load_url) {
+    container.dataset.loadUrl = node.load_url
+  } else {
+    delete container.dataset.loadUrl
+  }
+  container.style.display = expanded || loaded ? '' : 'none'
+}
+
+function buildChildrenContainer(node) {
+  const container = document.createElement('div')
+  applyChildrenContainerProperties(container, node)
+  return container
+}
+
+function appendNodes(container, nodes) {
+  if (!container || !Array.isArray(nodes) || nodes.length === 0) return
+  const fragment = document.createDocumentFragment()
+
+  nodes.forEach((node) => {
+    const row = createRow(node)
+    fragment.appendChild(row)
+
+    const childData = node.children_container
+    if (childData && childData.id) {
+      const childrenContainer = buildChildrenContainer(childData)
+      fragment.appendChild(childrenContainer)
+      if (Array.isArray(childData.nodes) && childData.nodes.length > 0) {
+        appendNodes(childrenContainer, childData.nodes)
+      }
+    }
+  })
+
+  container.appendChild(fragment)
+}
+
+function collectExistingElements(container) {
+  const map = new Map()
+  Array.from(container.children || []).forEach((child) => {
+    if (child.matches?.('creative-tree-row')) {
+      const domId = child.domId || child.getAttribute?.('dom-id') || child.querySelector?.('.creative-tree')?.id
+      if (domId) {
+        map.set(domId, child)
+      }
+    } else if (child.classList?.contains('creative-children')) {
+      const id = child.id || child.dataset?.id
+      if (id) {
+        map.set(id, child)
+      }
+    }
+  })
+  return map
+}
+
+function reconcileNodes(container, nodes) {
+  if (!container) return
+  if (!Array.isArray(nodes) || nodes.length === 0) {
+    container.innerHTML = ''
+    return
+  }
+
+  const existing = collectExistingElements(container)
+  const nextChildren = []
+
+  nodes.forEach((node) => {
+    let row = null
+    if (node.dom_id && existing.has(node.dom_id)) {
+      row = existing.get(node.dom_id)
+      existing.delete(node.dom_id)
+      applyRowProperties(row, node)
+    } else {
+      row = createRow(node)
+    }
+    nextChildren.push(row)
+
+    const childData = node.children_container
+    if (childData && childData.id) {
+      let childrenContainer = null
+      if (existing.has(childData.id)) {
+        childrenContainer = existing.get(childData.id)
+        existing.delete(childData.id)
+        applyChildrenContainerProperties(childrenContainer, childData)
+      } else {
+        childrenContainer = buildChildrenContainer(childData)
+      }
+      nextChildren.push(childrenContainer)
+      if (Array.isArray(childData.nodes) && childData.nodes.length > 0) {
+        reconcileNodes(childrenContainer, childData.nodes)
+      } else {
+        childrenContainer.innerHTML = ''
+      }
+    }
+  })
+
+  container.replaceChildren(...nextChildren)
+}
+
+export function renderCreativeTree(container, nodes, { replace = true } = {}) {
+  if (!container) return
+  if (replace) {
+    container.innerHTML = ''
+    appendNodes(container, nodes)
+    return
+  }
+  reconcileNodes(container, nodes)
+}
+
+export function dispatchCreativeTreeUpdated(container) {
+  if (!container) return
+  const event = new CustomEvent('creative-tree:updated', { bubbles: true })
+  container.dispatchEvent(event)
+}

data/app/javascript/lib/api/__tests__/queue_manager.test.js

@@ -0,0 +1,153 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals';
+
+// Mock csrfFetch using unstable_mockModule for ESM support
+const mockCsrfFetch = jest.fn();
+jest.unstable_mockModule('../csrf_fetch', () => ({
+    __esModule: true,
+    default: mockCsrfFetch
+}));
+
+// Dynamic imports are required when using unstable_mockModule
+const { default: apiQueue } = await import('../queue_manager');
+const { default: csrfFetch } = await import('../csrf_fetch');
+
+describe('ApiQueueManager', () => {
+    beforeEach(() => {
+        apiQueue.clear();
+        localStorage.clear();
+        mockCsrfFetch.mockClear();
+        // Reset processing state
+        apiQueue.processing = false;
+        // Mock processQueue to prevent auto-execution during enqueue tests
+        jest.spyOn(apiQueue, 'processQueue').mockImplementation(async () => { });
+        // Suppress console.error for expected errors
+        jest.spyOn(console, 'error').mockImplementation(() => { });
+
+        // Initialize with test user
+        apiQueue.initialize('test_user');
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    test('should deduplicate requests and merge callbacks', () => {
+        const callback1 = jest.fn();
+        const callback2 = jest.fn();
+
+        // Enqueue first request
+        apiQueue.enqueue({
+            path: '/test',
+            method: 'PATCH',
+            dedupeKey: 'test_1',
+            onSuccess: callback1
+        });
+
+        // Enqueue second request with same dedupeKey
+        apiQueue.enqueue({
+            path: '/test',
+            method: 'PATCH',
+            dedupeKey: 'test_1',
+            onSuccess: callback2
+        });
+
+        expect(apiQueue.queue.length).toBe(1);
+
+        // Execute the merged callback
+        const item = apiQueue.queue[0];
+        item.onSuccess();
+
+        expect(callback1).toHaveBeenCalled();
+        expect(callback2).toHaveBeenCalled();
+    });
+
+    test('should merge deletedAttachmentIds during deduplication', () => {
+        apiQueue.enqueue({
+            path: '/test',
+            method: 'PATCH',
+            dedupeKey: 'test_1',
+            deletedAttachmentIds: [1, 2]
+        });
+
+        apiQueue.enqueue({
+            path: '/test',
+            method: 'PATCH',
+            dedupeKey: 'test_1',
+            deletedAttachmentIds: [2, 3]
+        });
+
+        expect(apiQueue.queue.length).toBe(1);
+        expect(apiQueue.queue[0].deletedAttachmentIds).toEqual([1, 2, 3]);
+    });
+
+    test('should persist to localStorage without callbacks', () => {
+        apiQueue.enqueue({
+            path: '/test',
+            onSuccess: () => { }
+        });
+
+        const stored = JSON.parse(localStorage.getItem('api_queue_test_user'));
+        expect(stored).toHaveLength(1);
+        expect(stored[0].onSuccess).toBeUndefined();
+        expect(stored[0].path).toBe('/test');
+    });
+
+    test('should handle FormData correctly', async () => {
+        // Restore processQueue for this test
+        apiQueue.processQueue.mockRestore();
+
+        const formData = new FormData();
+        formData.append('file', 'test');
+
+        // Mock successful response
+        mockCsrfFetch.mockResolvedValue({ ok: true });
+
+        const item = {
+            path: '/upload',
+            method: 'POST',
+            body: formData
+        };
+
+        // We can call executeRequest directly to test it
+        await apiQueue.executeRequest(item);
+
+        expect(mockCsrfFetch).toHaveBeenCalled();
+        const callArgs = mockCsrfFetch.mock.calls[0];
+        const options = callArgs[1];
+
+        expect(options.body).toBeInstanceOf(FormData);
+        expect(options.body.has('file')).toBe(true);
+    });
+
+    test('should dispatch event on permanent failure', async () => {
+        // Restore processQueue for this test
+        apiQueue.processQueue.mockRestore();
+
+        const eventSpy = jest.spyOn(window, 'dispatchEvent');
+
+        // Mock failed response
+        mockCsrfFetch.mockRejectedValue(new Error('Network Error'));
+
+        const item = {
+            path: '/fail',
+            retries: 3 // Max retries
+        };
+
+        // Manually add to queue to bypass enqueue logic
+        apiQueue.queue = [item];
+
+        await apiQueue.processQueue();
+
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            type: 'api-queue-request-failed'
+        }));
+
+        const failedItems = JSON.parse(localStorage.getItem('api_queue_test_user_failed'));
+        expect(failedItems).toHaveLength(1);
+        expect(failedItems[0].path).toBe('/fail');
+        expect(failedItems[0].failedAt).toBeDefined();
+    });
+});

data/app/javascript/lib/api/creatives.js

@@ -0,0 +1,79 @@
+import csrfFetch from './csrf_fetch'
+
+const JSON_HEADERS = { Accept: 'application/json' }
+
+export function get(id) {
+  return csrfFetch(`/creatives/${id}.json`, {
+    headers: JSON_HEADERS,
+  }).then((response) => response.json())
+}
+
+export function parentSuggestions(id) {
+  return csrfFetch(`/creatives/${id}/parent_suggestions.json`, {
+    headers: JSON_HEADERS,
+  }).then((response) => response.json())
+}
+
+export function loadChildren(url) {
+  return csrfFetch(url, { headers: JSON_HEADERS }).then((response) => response.json())
+}
+
+export function search(query, { simple = false } = {}) {
+  const params = new URLSearchParams()
+  if (query != null) params.set('search', query)
+  if (simple) params.set('simple', 'true')
+
+  const queryString = params.toString()
+  const url = queryString ? `/creatives.json?${queryString}` : '/creatives.json'
+
+  return csrfFetch(url, {
+    headers: JSON_HEADERS,
+  }).then((response) => response.json())
+}
+
+export function save(action, method, form) {
+  return csrfFetch(action, {
+    method,
+    headers: JSON_HEADERS,
+    body: new FormData(form),
+  })
+}
+
+export function linkExisting(parentId, originId) {
+  const body = new FormData()
+  if (parentId != null) body.append('creative[parent_id]', parentId)
+  if (originId != null) body.append('creative[origin_id]', originId)
+
+  return csrfFetch('/creatives', {
+    method: 'POST',
+    headers: JSON_HEADERS,
+    body,
+  })
+}
+
+export function destroy(id, withChildren = false) {
+  const query = withChildren ? '?delete_with_children=true' : ''
+  return csrfFetch(`/creatives/${id}${query}`, {
+    method: 'DELETE',
+  })
+}
+
+export function unconvert(id) {
+  return csrfFetch(`/creatives/${id}/unconvert`, {
+    method: 'POST',
+    headers: JSON_HEADERS,
+  })
+}
+
+const creativesApi = {
+  get,
+  parentSuggestions,
+  loadChildren,
+  search,
+  save,
+  linkExisting,
+  destroy,
+  unconvert,
+}
+
+export default creativesApi

data/app/javascript/lib/api/csrf_fetch.js

@@ -0,0 +1,22 @@
+const DEFAULT_CREDENTIALS = 'same-origin'
+
+function readCsrfToken() {
+  if (typeof document === 'undefined') return null
+  return document.querySelector('meta[name="csrf-token"]')?.content || null
+}
+
+export default function csrfFetch(input, options = {}) {
+  const { headers: incomingHeaders, credentials, ...rest } = options
+  const headers = new Headers(incomingHeaders || undefined)
+  const token = readCsrfToken()
+
+  if (token && !headers.has('X-CSRF-Token')) {
+    headers.set('X-CSRF-Token', token)
+  }
+
+  return fetch(input, {
+    credentials: credentials ?? DEFAULT_CREDENTIALS,
+    headers,
+    ...rest,
+  })
+}