additional refactor and fix tests

Author: SharonStrats

src/StatusSection.css

@@ -6,14 +6,46 @@
 
 .sourcePaneStatus[data-visible='true'] {
   display: block;
+  margin: 0;
+  padding: 12px;
+  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
+  border-radius: 5px;
+  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
+}
+
+#statusMessageArea {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .error-text {
   margin: 0;
-  padding: 12px;
-  background-color: #fde8e8;
-  border: 1px solid #f8b4b4;
-  border-radius: 4px;
-  color: #9b1c1c;
+  padding: 10px 12px;
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  color: var(--solid-ui-color-error, #b00020);
   font-weight: 500;
+  flex: 1;
+}
+
+.statusCloseButton {
+  flex: 0 0 auto;
+  margin-top: 0;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--solid-ui-color-error, #b00020);
+  font-weight: 600;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+}
+
+.statusCloseButton:hover {
+  background: color-mix(in srgb, var(--solid-ui-color-error, #b00020) 10%, transparent);
 }

src/StatusSection.ts

@@ -39,7 +39,7 @@ export function getStatusSection(){
       <section class="sourcePaneStatus" role="alert" data-visible="false">
         <div id="statusMessageArea" hidden>
           <p class="error-text">${statusMessage}</p>
-          <button @click=${() => clearError()}>X</button>
+          <button class="statusCloseButton" aria-label="Dismiss error" @click=${() => clearError()}>X</button>
         </div>
       </section>
     `

src/components/source-editor-card/SourceEditorCard.styles.css

@@ -8,7 +8,7 @@
     flex-direction: column;
     width: 100%;
     align-items: stretch;
-    padding: 0px 40px;
+    padding: 0 40px;
   }
 
   .sourcePaneEditor {

src/components/source-editor-card/SourceEditorCard.ts

@@ -185,29 +185,39 @@ export default class SourceEditorCard extends WebComponent {
       }
     }
   }
-  
-  render() {
+
+  private renderFooter() {
     const sourceContext = this._requireSourceContext()
-    const sectionClass = this._editorReady ? 'sourcePaneCard' : 'sourcePaneCard sourcePaneCardLoading'
     const compactContentType = sourceContext.editorMetadata.contentType?.split(';')[0]
     const showPrettyButton = !sourceContext.sourcePaneState.editing && !!compactContentType && compactable[compactContentType]
-    const prettyButton = showPrettyButton
-      ? html`
+
+    if (sourceContext.sourcePaneState.editing) {
+      return html`
+        <div class="sourcePaneEditorFooter">
+          <solid-ui-button class="sourcePaneCancelButton" variant="secondary" @click=${this.cancelHandler}>Cancel</solid-ui-button>
+          <solid-ui-button class="sourcePaneSaveButton" variant="primary" @click=${this.saveBack}>Save Changes</solid-ui-button>
+        </div>
+      `
+    }
+
+    if (showPrettyButton) {
+      return html`
+        <div class="sourcePaneEditorFooter">
           <solid-ui-button class="sourcePanePrettyButton" variant="secondary" @click=${this.prettyHandler}>Prettify</solid-ui-button>
-        `
-      : nothing
+        </div>
+      `
+    }
+
+    return nothing
+  }
+  
+  render() {
+    const sectionClass = this._editorReady ? 'sourcePaneCard' : 'sourcePaneCard sourcePaneCardLoading'
 
     return html`
       <section class=${sectionClass}>
         <div class="sourcePaneEditor"></div>
-        <div class="sourcePaneEditorFooter">
-          ${sourceContext.sourcePaneState.editing
-            ? html`
-                <solid-ui-button class="sourcePaneCancelButton" variant="secondary" @click=${this.cancelHandler}>Cancel</solid-ui-button>
-                <solid-ui-button class="sourcePaneSaveButton" variant="primary" @click=${this.saveBack}>Save Changes</solid-ui-button>
-              `
-            : prettyButton}
-        </div>
+        ${this.renderFooter()}
       </section>
     `
   }

src/components/source-provider/SourceProvider.styles.css

@@ -4,6 +4,9 @@
   width: 100%;
   align-self: stretch;
   box-sizing: border-box;
-  gap: 23px;
   padding-bottom: 39px;
 }
+
+source-pane-source-header {
+  margin-bottom: 23px;
+}

src/components/source-provider/SourceProvider.ts

@@ -173,16 +173,13 @@ export default class SourceProvider extends WebComponent {
   }
 
   render() {
-    const { renderStatusSection } = getStatusSection()
-
     return html`
       ${this.dataLoaded
         ? html`
             <source-pane-source-header></source-pane-source-header>
             <source-pane-source-editor-card></source-pane-source-editor-card>
           `
         : html``}
-      ${renderStatusSection()}
     `
   }
 }

src/icons/sourcePaneIcon.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from 'lit'
 
 export const sourcePaneIcon = html`
   <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">

src/sourcePane.ts

@@ -9,6 +9,7 @@ import { DataBrowserContext, NewPaneOptions } from 'pane-registry'
 import * as mime from 'mime-types'
 import { html, render as litRender } from 'lit'
 import { log } from './debug'
+import { getStatusSection } from './StatusSection'
 import './sourcePane.css'
 import './components/source-provider/SourceProvider'
 
@@ -83,7 +84,7 @@ const pane = {
   },
 
   render: function (subject: NamedNode, context: DataBrowserContext) {
- 
+    const { renderStatusSection } = getStatusSection()
     const sourcePane = context.dom.createElement('div')
     sourcePane.setAttribute('class', 'sourcePane')
     litRender(html`
@@ -92,6 +93,7 @@ const pane = {
           .subject=${subject}
         >
         </source-pane-source-provider>
+        ${renderStatusSection()}
     `, sourcePane)
 
     return sourcePane

test/helpers.test.js

@@ -1,8 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { fetchContentAndMetadata, getResponseHeaders } from '../src/resourceMetadata.ts'
+import { fetchContentAndMetadata, getResponseMetadata } from '../src/resourceLoader.ts'
 
-describe('helpers', () => {
+describe('resourceLoader', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
@@ -12,19 +12,27 @@ describe('helpers', () => {
       headers: {
         get: vi.fn((name) => {
           if (name === 'content-type') return 'text/turtle; charset=utf-8'
-          if (name === 'allow') return 'GET,PUT'
+          if (name === 'wac-allow') return 'user="write", public="read"'
           if (name === 'etag') return '"abc"'
           return null
         })
       }
     }
-    const store = { each: vi.fn(), any: vi.fn(), anyValue: vi.fn(), sym: vi.fn() }
+    const store = {
+      each: vi.fn(),
+      any: vi.fn(),
+      anyValue: vi.fn(() => undefined),
+      sym: vi.fn()
+    }
     const subject = { uri: 'https://example.org/profile/card' }
 
-    expect(getResponseHeaders(store, subject, response)).toEqual({
+    expect(getResponseMetadata(store, subject, response)).toEqual({
       contentType: 'text/turtle',
-      allowed: 'GET,PUT',
+      canEdit: true,
+      isPublic: true,
       eTag: '"abc"'
+      ,
+      modified: undefined
     })
   })
 
@@ -34,7 +42,7 @@ describe('helpers', () => {
       headers: {
         get: vi.fn((name) => {
           if (name === 'content-type') return 'text/turtle'
-          if (name === 'allow') return 'GET,PUT'
+          if (name === 'wac-allow') return 'user="write", public="read"'
           if (name === 'etag') return '"abc"'
           return null
         })
@@ -47,27 +55,22 @@ describe('helpers', () => {
       },
       each: vi.fn(),
       any: vi.fn(),
-      anyValue: vi.fn(),
+      anyValue: vi.fn(() => undefined),
       sym: vi.fn()
     }
     const subject = { uri: 'https://example.org/profile/card' }
-    const sourcePaneState = { broken: false, contentType: undefined, allowed: undefined, eTag: undefined }
 
-    const result = await fetchContentAndMetadata(store, subject, sourcePaneState)
+    const result = await fetchContentAndMetadata(store, subject)
 
     expect(result).toEqual({
       content: '<> a <#Thing>.',
       metadata: {
         contentType: 'text/turtle',
-        allowed: 'GET,PUT',
-        eTag: '"abc"'
+        canEdit: true,
+        isPublic: true,
+        eTag: '"abc"',
+        modified: undefined
       }
     })
-    expect(sourcePaneState).toEqual({
-      broken: false,
-      contentType: 'text/turtle',
-      allowed: 'GET,PUT',
-      eTag: '"abc"'
-    })
   })
 })

test/sourcePane.test.js

@@ -1,37 +1,27 @@
-import { render } from 'lit'
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 
-let renderHeader
+let sourcePane
 
 beforeAll(async () => {
-  class MockSourceEditorCard extends HTMLElement {
-    constructor () {
-      super()
-      this.updateEditingState = vi.fn()
-      this.setReadOnly = vi.fn()
-      this.focusEditor = vi.fn()
-    }
-  }
-
-  if (!globalThis.customElements.get('source-pane-source-editor-card')) {
-    globalThis.customElements.define('source-pane-source-editor-card', MockSourceEditorCard)
-  }
-
-  const headerModule = await import('../src/Header.ts')
-  renderHeader = headerModule.renderHeader
-
+  await import('../src/components/source-provider/SourceProvider.ts')
   await import('../src/components/header/SourceHeader.ts')
+  sourcePane = (await import('../src/sourcePane.ts')).default
+
 })
 
-function renderHeaderIntoDocument (sourcePaneState) {
+function renderPaneIntoDocument () {
   const container = document.createElement('div')
   document.body.appendChild(container)
 
   const store = { findTypeURIs: vi.fn(() => ({})) }
   const subject = { uri: 'https://janedoe.example/test.ttl' }
-  render(renderHeader(store, subject, sourcePaneState), container)
-
-  return { container, subject, store }
+  const context = {
+    dom: document,
+    session: { store }
+  }
+  const rendered = sourcePane.render(subject, context)
+  container.appendChild(rendered)
+  return { container, subject, store, rendered }
 }
 
 describe('source-pane', () => {
@@ -40,67 +30,12 @@ describe('source-pane', () => {
     vi.clearAllMocks()
   })
 
-  it('renders the header edit control', async () => {
-    const sourcePaneState = {
-      broken: false,
-      editing: false,
-      readonly: false,
-      allowed: undefined,
-      contentType: undefined,
-      eTag: undefined
-    }
-
-    const { container } = renderHeaderIntoDocument(sourcePaneState)
-    await Promise.resolve()
-
-    expect(container.querySelector('header.sourcePaneHeader')).not.toBeNull()
-    expect(container.querySelector('.sourcePaneEditButton')).not.toBeNull()
-  })
-
-  it('activates the editor when edit is clicked', async () => {
-    const sourcePaneState = {
-      broken: false,
-      editing: false,
-      readonly: false,
-      allowed: undefined,
-      contentType: undefined,
-      eTag: undefined
-    }
-
-    const { container } = renderHeaderIntoDocument(sourcePaneState)
-    const editorCard = document.createElement('source-pane-source-editor-card')
-    document.body.appendChild(editorCard)
-
+  it('renders the source provider wrapper', async () => {
+    const { rendered } = renderPaneIntoDocument()
     await Promise.resolve()
-    container.querySelector('.sourcePaneEditButton').click()
-
-    expect(editorCard.updateEditingState).toHaveBeenCalledWith(true)
-    expect(editorCard.setReadOnly).toHaveBeenCalledWith(false)
-    expect(editorCard.focusEditor).toHaveBeenCalled()
-  })
-
-  it('opens the editor card from the migrated header even without setEditing', async () => {
-    const header = document.createElement('source-pane-source-header')
-    Object.defineProperty(header, 'sourceContext', {
-      value: {
-        sourcePaneState: {
-          broken: false
-        }
-      },
-      writable: true
-    })
-
-    const editorCard = document.createElement('source-pane-source-editor-card')
-    document.body.appendChild(header)
-    document.body.appendChild(editorCard)
-
-    await header.updateComplete
-    await Promise.resolve()
-
-    header.shadowRoot.querySelectorAll('solid-ui-button')[1].click()
 
-    expect(editorCard.updateEditingState).toHaveBeenCalledWith(true)
-    expect(editorCard.setReadOnly).toHaveBeenCalledWith(false)
-    expect(editorCard.focusEditor).toHaveBeenCalled()
+    expect(rendered).not.toBeNull()
+    expect(rendered.className).toBe('sourcePane')
+    expect(rendered.getAttribute('class')).toBe('sourcePane')
   })
 })