fix(acl): allow dragging Everyone directly from the sharing chooser

src/acl/add-agent-buttons.ts

@@ -108,13 +108,17 @@ export class AddAgentButtons {
   }
 
   private renderPublicButton (): HTMLElement {
-    return widgets.button(
+    const button = widgets.button(
       this.groupList.controller.dom,
       icons.iconBase + widgets.iconForClass['foaf:Agent'],
       'Add Everyone',
       () => this.addAgent(ns.foaf('Agent').uri)
         .then(() => this.groupList.controller.renderTemporaryStatus('Adding the general public to those who can read. Drag the globe to a different level to give them more access.'))
         .then(() => this.renderCleanup()))
+    // Drag the ACL agent class, not the globe image's URL.
+    button.querySelector('img')?.setAttribute('draggable', 'false')
+    widgets.makeDraggable(button, ns.foaf('Agent'))
+    return button
   }
 
   private renderAuthenticatedAgentButton (): HTMLElement {

test/unit/acl/add-agent-buttons.test.ts

@@ -1,9 +1,10 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { silenceDebugMessages } from '../helpers/debugger'
 import { AddAgentButtons } from '../../../src/acl/add-agent-buttons'
 import { instantiateAccessGroups } from '../helpers/instantiateAccessGroups'
 import { JSDOM } from 'jsdom'
 import { solidLogicSingleton } from 'solid-logic'
+import ns from '../../../src/lib/ns'
 
 const store = solidLogicSingleton.store
 
@@ -129,6 +130,64 @@ describe('When "Add Group" button is clicked', () => {
   })
 })
 
+describe('Adding Everyone', () => {
+  let groupList: ReturnType<typeof instantiateAccessGroups>
+  let groups: HTMLElement
+  let button: HTMLButtonElement
+  let image: HTMLImageElement
+
+  beforeEach(() => {
+    groupList = instantiateAccessGroups(dom, store)
+    vi.spyOn(groupList.controller, 'isEditable', 'get').mockReturnValue(true)
+    vi.spyOn(groupList.controller, 'save').mockResolvedValue(undefined)
+    vi.spyOn(groupList.controller, 'render').mockReturnValue(dom.createElement('div'))
+    vi.spyOn(store.fetcher, 'load').mockRejectedValue(new Error('Unexpected RDF lookup'))
+    groups = groupList.render()
+    groups.querySelector<HTMLImageElement>('img[title="Add ..."]')!.click()
+    image = groups.querySelector<HTMLImageElement>('img[title="Add Everyone"]')!
+    button = image.parentElement as HTMLButtonElement
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it.each(['text/uri-list', 'text/plain'])('drags Everyone directly to Editors using %s without fetching the icon', async format => {
+    const payload = new Map<string, string>([[format, image.src]])
+    const dataTransfer = {
+      types: [format],
+      setData: (type: string, value: string) => payload.set(type, value),
+      getData: (type: string) => payload.get(type) || ''
+    }
+    const dragStart = new dom.defaultView!.Event('dragstart', { bubbles: true })
+    Object.defineProperty(dragStart, 'dataTransfer', { value: dataTransfer })
+    button.dispatchEvent(dragStart)
+
+    expect(dataTransfer.getData(format)).toBe(ns.foaf('Agent').uri)
+    expect(button.draggable).toBe(true)
+    expect(image.draggable).toBe(false)
+
+    const editors = Array.from(groups.children).find(group =>
+      (group.firstElementChild as HTMLElement)?.innerText === 'Editors')!
+    const drop = new dom.defaultView!.Event('drop', { bubbles: true, cancelable: true })
+    Object.defineProperty(drop, 'dataTransfer', { value: dataTransfer })
+    editors.dispatchEvent(drop)
+
+    await vi.waitFor(() => expect(groupList.controller.save).toHaveBeenCalledOnce())
+    const editorModes = [ns.acl('Read').uri, ns.acl('Write').uri].join('\n')
+    expect(groupList.byCombo[editorModes]).toEqual([['agentClass', ns.foaf('Agent').uri]])
+    expect(store.fetcher.load).not.toHaveBeenCalled()
+  })
+
+  it('still adds Everyone as a Viewer when clicked', async () => {
+    button.click()
+
+    await vi.waitFor(() => expect(groupList.controller.save).toHaveBeenCalledOnce())
+    expect(groupList.byCombo[ns.acl('Read').uri]).toEqual([['agentClass', ns.foaf('Agent').uri]])
+    expect(store.fetcher.load).not.toHaveBeenCalled()
+  })
+})
+
 describe('When "Add Bot" button is clicked', () => {
   let bar
   const buttonIndex = 4