collavre 0.24.0 → 0.25.0

data/app/javascript/lib/utils/filter_navigation.js

@@ -0,0 +1,100 @@
+// Shared navigation for the creative list filters (GNB chat button and the
+// search popup).
+//
+// Two things these filters have in common:
+//
+//   1. Their parameters (comment, min_progress, search, show_archived,
+//      search_mode) are only consumed by Creatives::IndexQuery, so a toggle
+//      pressed anywhere else has to land on the creative index rather than
+//      decorate the current path with a parameter nothing reads.
+//   2. In workspace mode the list is rendered inside the
+//      #creative-workspace-content turbo-frame, so only that frame needs to be
+//      replaced. Assigning window.location.href bypasses Turbo entirely and
+//      rebuilds the whole page — assets, workspace tree and docked chat
+//      included.
+
+export const WORKSPACE_FRAME_ID = 'creative-workspace-content'
+
+// The creative index is reachable at both "/" (root route) and "/creatives",
+// so `onIndex` has to come from the server; a pathname comparison would get
+// the root route wrong.
+export function buildFilterUrl({ indexPath, onIndex }, mutate) {
+  const url = onIndex
+    ? new URL(window.location.href)
+    : new URL(indexPath || '/', window.location.origin)
+
+  mutate(url.searchParams)
+  return url
+}
+
+// Shared by the GNB component and the search popup's progress/comment buttons.
+export function applyFilterParam(params, filter) {
+  if (filter === 'comment') {
+    if (params.get('comment') === 'true') {
+      params.delete('comment')
+    } else {
+      params.set('comment', 'true')
+    }
+    return
+  }
+
+  params.delete('min_progress')
+  params.delete('max_progress')
+
+  if (filter === 'complete') {
+    params.set('min_progress', '1')
+    params.set('max_progress', '1')
+  } else if (filter === 'incomplete') {
+    params.set('min_progress', '0')
+    params.set('max_progress', '0.99')
+  }
+}
+
+// Returns true when only the workspace frame was replaced, meaning the GNB
+// survived the navigation and its server-rendered state is now stale.
+//
+// Turbo is imported unconditionally by application.js, so it is assumed
+// present here the same way creative_tree_row.js assumes it.
+export function visitFilterUrl(url) {
+  const frame = document.getElementById(WORKSPACE_FRAME_ID)
+
+  window.Turbo.visit(
+    `${url.pathname}${url.search}`,
+    frame ? { action: 'advance', frame: WORKSPACE_FRAME_ID } : { action: 'advance' }
+  )
+  return Boolean(frame)
+}
+
+function progressState(params) {
+  const min = params.get('min_progress')
+  const max = params.get('max_progress')
+  if (min === '1' && max === '1') return 'complete'
+  if (min === '0' && max === '0.99') return 'incomplete'
+  return 'all'
+}
+
+// Re-derives the `active` classes the server would have rendered for the URL
+// we are navigating to. Mirrors _search_form.html.erb; only needed on the
+// frame path, where the GNB is not re-rendered.
+export function syncFilterButtons(url) {
+  const params = url.searchParams
+  const hasProgress = Boolean(params.get('min_progress') || params.get('max_progress'))
+  const hasArchived = params.get('show_archived') === 'true'
+  const hasSearch = Boolean(params.get('search')?.trim())
+  const active = {
+    [`progress:${progressState(params)}`]: true,
+    comment: params.get('comment') === 'true',
+    archived: hasArchived,
+    'any-filter': hasProgress || hasArchived || hasSearch
+  }
+
+  document.querySelectorAll('[data-filter-state]').forEach((element) => {
+    const isActive = active[element.dataset.filterState] === true
+    element.classList.toggle('active', isActive)
+
+    // Buttons whose label depends on the filter state (archive show/hide)
+    // carry both translations so they can be swapped without a round trip.
+    const label = isActive ? element.dataset.labelOn : element.dataset.labelOff
+    if (label) element.textContent = label
+  })
+}

data/app/javascript/modules/__tests__/command_menu_creative_picker.test.js

@@ -0,0 +1,62 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const openCreativeLinkPicker = jest.fn()
+
+jest.unstable_mockModule('../creative_link_picker', () => ({
+  openCreativeLinkPicker,
+}))
+
+await import('../command_menu')
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+describe('command menu Creative picker', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    global.fetch = originalFetch
+    jest.clearAllMocks()
+  })
+
+  test('routes the /creative command through the shared picker', async () => {
+    document.body.innerHTML = `
+      <form id="new-comment-form"><textarea>/creative</textarea></form>
+      <div id="comments-popup" data-creative-id="7"></div>
+      <div id="command-menu" style="display:none">
+        <ul data-popup-list></ul>
+      </div>
+    `
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve([{
+        type: 'popup',
+        popup_type: 'creative_picker',
+        name: 'creative',
+        label: '/creative',
+        aliases: [],
+      }]),
+    })
+
+    document.dispatchEvent(new Event('turbo:load'))
+    const textarea = document.querySelector('textarea')
+    textarea.setSelectionRange(9, 9)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    await flush()
+    await flush()
+
+    textarea.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    }))
+
+    expect(openCreativeLinkPicker).toHaveBeenCalledWith(textarea, {
+      triggerRange: { start: 0, end: 9 },
+    })
+  })
+})

data/app/javascript/modules/__tests__/command_menu_typeahead.test.js

@@ -0,0 +1,267 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+jest.unstable_mockModule('../creative_link_picker', () => ({
+  openCreativeLinkPicker: jest.fn(),
+}))
+
+await import('../command_menu')
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+// flush() plus the placement frame CommonPopup defers its reveal to.
+const settle = () => flush().then(() => new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0))))
+
+const COMMANDS = [
+  { name: 'task_create', label: '/task_create', aliases: [] },
+  { name: 'topic_list', label: '/topic_list', aliases: [] },
+]
+
+// The command list is fetched on every input event, so the menu's behaviour while
+// a lookup is in flight is what the user actually sees when typing "/task".
+describe('command menu typeahead', () => {
+  const originalFetch = global.fetch
+
+  const setup = () => {
+    document.body.innerHTML = `
+      <form id="new-comment-form"><textarea></textarea></form>
+      <div id="comments-popup" data-creative-id="7"></div>
+      <div id="command-menu" style="display:none">
+        <ul data-popup-list></ul>
+      </div>
+    `
+    document.dispatchEvent(new Event('turbo:load'))
+    return {
+      textarea: document.querySelector('textarea'),
+      menu: document.getElementById('command-menu'),
+    }
+  }
+
+  const type = (textarea, value) => {
+    textarea.value = value
+    textarea.setSelectionRange(value.length, value.length)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    global.fetch = originalFetch
+    jest.clearAllMocks()
+  })
+
+  test('shares one request across the keystrokes typed before it resolves', async () => {
+    let resolveFetch
+    global.fetch = jest.fn(() => new Promise((resolve) => { resolveFetch = resolve }))
+    const { textarea, menu } = setup()
+
+    for (const value of ['/', '/t', '/ta', '/tas', '/task']) type(textarea, value)
+    expect(global.fetch).toHaveBeenCalledTimes(1)
+
+    resolveFetch({ ok: true, json: () => Promise.resolve(COMMANDS) })
+    await flush()
+
+    expect(menu.style.display).toBe('block')
+    // Only the query the user actually ended on is rendered.
+    expect(menu.querySelectorAll('.common-popup-item')).toHaveLength(1)
+    expect(menu.textContent).toContain('/task_create')
+  })
+
+  test('a failed lookup is not cached, so the next keystroke retries', async () => {
+    global.fetch = jest.fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValueOnce({ ok: true, json: () => Promise.resolve(COMMANDS) })
+    const { textarea, menu } = setup()
+
+    type(textarea, '/')
+    await flush()
+    expect(menu.style.display).toBe('none')
+
+    type(textarea, '/t')
+    await flush()
+    expect(global.fetch).toHaveBeenCalledTimes(2)
+    expect(menu.style.display).toBe('block')
+  })
+
+  test('a lookup that lands after the "/" is deleted does not re-open the menu', async () => {
+    let resolveFetch
+    global.fetch = jest.fn(() => new Promise((resolve) => { resolveFetch = resolve }))
+    const { textarea, menu } = setup()
+
+    type(textarea, '/')
+    // The user backspaces before the command list arrives.
+    type(textarea, '')
+
+    resolveFetch({ ok: true, json: () => Promise.resolve(COMMANDS) })
+    await flush()
+
+    expect(menu.style.display).toBe('none')
+  })
+
+  test('a stale lookup cannot overwrite the menu with an outdated query', async () => {
+    const pending = []
+    global.fetch = jest.fn(() => new Promise((resolve) => { pending.push(resolve) }))
+    const { textarea, menu } = setup()
+
+    type(textarea, '/')
+    // Second keystroke reuses the in-flight request, so there is still only one.
+    type(textarea, '/topic')
+    expect(pending).toHaveLength(1)
+
+    pending[0]({ ok: true, json: () => Promise.resolve(COMMANDS) })
+    await flush()
+
+    // Rendered for "/topic", not for the earlier empty query that would have
+    // listed every command.
+    expect(menu.querySelectorAll('.common-popup-item')).toHaveLength(1)
+    expect(menu.textContent).toContain('/topic_list')
+  })
+
+  test('the popup is not blanked between keystrokes once it is open', async () => {
+    global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve(COMMANDS) })
+    const { textarea, menu } = setup()
+
+    type(textarea, '/')
+    // Let the placement frame reveal the popup, as it does for a real first open.
+    await settle()
+    expect(menu.style.visibility).toBe('visible')
+
+    // Every later keystroke must leave it on screen: blanking it here is what
+    // made the menu blink once per character.
+    for (const value of ['/t', '/ta', '/tas']) {
+      type(textarea, value)
+      await flush()
+      expect(menu.style.visibility).toBe('visible')
+    }
+  })
+
+  test('command arguments refocus after settlement without stealing deliberate focus', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve([{
+        name: 'task_create',
+        label: '/task_create',
+        aliases: [],
+        input_schema: [{ name: 'title', type: 'string', required: false }],
+      }]),
+    })
+    const { textarea, menu } = setup()
+    const submit = document.createElement('button')
+    const submitClick = jest.fn()
+    let submissionId
+    submit.type = 'button'
+    submit.setAttribute('data-comments--form-target', 'submit')
+    submit.addEventListener('click', (event) => {
+      submitClick()
+      submissionId = event.commandSubmissionId
+      document.getElementById('comments-popup').dispatchEvent(
+        new CustomEvent('comments--form:submit-started', { detail: { submissionId } }),
+      )
+    })
+    document.getElementById('new-comment-form').appendChild(submit)
+
+    type(textarea, '/task')
+    await settle()
+    textarea.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    }))
+
+    const titleInput = document.querySelector('#command-args-dialog textarea')
+    titleInput.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    }))
+    await flush()
+
+    expect(document.getElementById('command-args-dialog')).toBeNull()
+    expect(menu.style.display).toBe('none')
+    expect(submitClick).toHaveBeenCalledTimes(1)
+    expect(document.activeElement).not.toBe(textarea)
+
+    document.getElementById('comments-popup').dispatchEvent(
+      new CustomEvent('comments--form:submit-settled', {
+        detail: { submissionId: 'an-unrelated-send' },
+      }),
+    )
+    expect(document.activeElement).not.toBe(textarea)
+
+    document.getElementById('comments-popup').dispatchEvent(
+      new CustomEvent('comments--form:submit-settled', { detail: { submissionId } }),
+    )
+
+    expect(document.activeElement).toBe(textarea)
+
+    type(textarea, '/task')
+    await settle()
+    textarea.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    }))
+    document.querySelector('#command-args-dialog textarea').dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true,
+      cancelable: true,
+    }))
+    await flush()
+
+    const otherControl = document.createElement('button')
+    document.body.appendChild(otherControl)
+    otherControl.focus()
+    document.getElementById('comments-popup').dispatchEvent(
+      new CustomEvent('comments--form:submit-settled', { detail: { submissionId } }),
+    )
+
+    expect(submitClick).toHaveBeenCalledTimes(2)
+    expect(document.activeElement).toBe(otherControl)
+  })
+
+  test('a rejected command submission removes its settlement listener', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve([{
+        name: 'task_create',
+        label: '/task_create',
+        aliases: [],
+        input_schema: [{ name: 'title', type: 'string', required: false }],
+      }]),
+    })
+    const { textarea } = setup()
+    const submit = document.createElement('button')
+    let rejectedSubmissionId
+    submit.type = 'button'
+    submit.setAttribute('data-comments--form-target', 'submit')
+    submit.addEventListener('click', (event) => {
+      rejectedSubmissionId = event.commandSubmissionId
+      // No submit-started event: the form controller rejected this attempt.
+    })
+    document.getElementById('new-comment-form').appendChild(submit)
+
+    type(textarea, '/task')
+    await settle()
+    textarea.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter', bubbles: true, cancelable: true,
+    }))
+    document.querySelector('#command-args-dialog textarea').dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Enter', bubbles: true, cancelable: true,
+    }))
+    await flush()
+
+    expect(document.activeElement).toBe(textarea)
+
+    const otherControl = document.createElement('button')
+    document.body.appendChild(otherControl)
+    otherControl.focus()
+    document.getElementById('comments-popup').dispatchEvent(
+      new CustomEvent('comments--form:submit-settled', {
+        detail: { submissionId: rejectedSubmissionId },
+      }),
+    )
+
+    expect(document.activeElement).toBe(otherControl)
+  })
+})

data/app/javascript/modules/__tests__/creative_link_picker.test.js

@@ -0,0 +1,85 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import {
+  escapeMarkdownLabel,
+  insertMarkdownCreativeLink,
+  markdownCreativeCommandRange,
+  openCreativeLinkPicker,
+} from '../creative_link_picker'
+
+describe('creative link picker helpers', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    delete window.Stimulus
+  })
+
+  test('finds /creative only at the beginning of a Markdown line', () => {
+    expect(markdownCreativeCommandRange('/creative', 9)).toEqual({ start: 0, end: 9 })
+    expect(markdownCreativeCommandRange('first\n/creative', 15)).toEqual({ start: 6, end: 15 })
+    expect(markdownCreativeCommandRange('text /creative', 14)).toBeNull()
+    expect(markdownCreativeCommandRange('/creative later', 15)).toBeNull()
+  })
+
+  test('inserts the canonical Markdown link and notifies textarea consumers', () => {
+    const textarea = document.createElement('textarea')
+    textarea.value = 'before after'
+    textarea.setSelectionRange(7, 7)
+    const inputListener = jest.fn()
+    textarea.addEventListener('input', inputListener)
+
+    expect(insertMarkdownCreativeLink(textarea, { id: 12, label: 'Target' })).toBe(true)
+    expect(textarea.value).toBe('before [Target](/creatives/12) after')
+    expect(inputListener).toHaveBeenCalledTimes(1)
+  })
+
+  test('escapes Markdown constructs in the selected Creative label', () => {
+    const textarea = document.createElement('textarea')
+
+    expect(escapeMarkdownLabel('a\\`*_[]()<>~b')).toBe('a\\\\\\`\\*\\_\\[\\]\\(\\)\\<\\>\\~b')
+    expect(insertMarkdownCreativeLink(textarea, {
+      id: 12,
+      label: 'x](https://evil.example)',
+    })).toBe(true)
+    expect(textarea.value).toBe('[x\\]\\(https://evil.example\\)](/creatives/12) ')
+  })
+
+  test('removes the trigger and opens the shared picker with creation enabled', () => {
+    document.body.innerHTML = '<div id="link-creative-modal"></div><textarea id="editor">/creative</textarea>'
+    const textarea = document.getElementById('editor')
+    textarea.setSelectionRange(9, 9)
+    const controller = { open: jest.fn() }
+    window.Stimulus = {
+      getControllerForElementAndIdentifier: jest.fn(() => controller),
+    }
+
+    const opened = openCreativeLinkPicker(textarea, {
+      triggerRange: { start: 0, end: 9 },
+    })
+
+    expect(opened).toBe(true)
+    expect(textarea.value).toBe('')
+    expect(controller.open).toHaveBeenCalledTimes(1)
+    expect(controller.open.mock.calls[0][3]).toEqual({ allowCreate: true })
+
+    textarea.blur()
+    controller.open.mock.calls[0][2]()
+    expect(document.activeElement).toBe(textarea)
+
+    controller.open.mock.calls[0][1]({ id: 18, label: 'Created' })
+    expect(textarea.value).toBe('[Created](/creatives/18) ')
+  })
+
+  test('does not remove the trigger when the shared picker is unavailable', () => {
+    document.body.innerHTML = '<textarea id="editor">/creative</textarea>'
+    const textarea = document.getElementById('editor')
+    textarea.setSelectionRange(9, 9)
+
+    expect(openCreativeLinkPicker(textarea, {
+      triggerRange: { start: 0, end: 9 },
+    })).toBe(false)
+    expect(textarea.value).toBe('/creative')
+  })
+})