Merge pull request #791 from SolidOS/close-error

add close to error message

Author: SharonStrats

src/outline/manager.js

@@ -28,6 +28,10 @@ import AccessControlModal from 'solid-ui/components/access-control-modal'
 
 const EXPLORER_PROVIDER_TAG = 'solid-ui-file-explorer-provider'
 
+export function dismissErrorStateOnClose (errorState) {
+  errorState.addEventListener('close', () => errorState.remove())
+}
+
 export default function (context) {
   const dom = context.dom
   const explorerStates = new WeakMap()
@@ -1719,6 +1723,7 @@ export default function (context) {
         errorState.setAttribute('title', 'Access denied')
         errorState.setAttribute('message', soloAccessMessage())
         if (docUri) errorState.setAttribute('data-outline-error-for', docUri)
+        dismissErrorStateOnClose(errorState)
         UI.utils.emptyNode(p).appendChild(errorState)
         sf.addCallback('done', function soloAccessRecovered (uri) {
           if (!soloAccessDenied || !p.isConnected) return false

test/unit/outline/manager.test.ts

@@ -28,7 +28,7 @@ vi.mock('pane-registry', () => ({
   byName: vi.fn()
 }))
 
-import OutlineManager from '../../../src/outline/manager'
+import OutlineManager, { dismissErrorStateOnClose } from '../../../src/outline/manager'
 import { onNavigated, type NavigatedDetail } from '../../../src/navigation/events'
 import { lit, NamedNode, sym, blankNode } from 'rdflib'
 import { findByText, getByText } from '@testing-library/dom'
@@ -354,6 +354,16 @@ describe('manager', () => {
         expect(isInViewerPodMock).not.toHaveBeenCalled()
       })
 
+      it('removes the solo access-denied message when it is closed', () => {
+        const errorState = document.createElement('solid-ui-error-state')
+        document.body.appendChild(errorState)
+        dismissErrorStateOnClose(errorState)
+
+        errorState.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+
+        expect(document.body.contains(errorState)).toBe(false)
+      })
+
       it('renders pane and header before menu icons resolve', async () => {
         let resolveIcon!: (icon: string) => void
         const icon = new Promise<string>(resolve => { resolveIcon = resolve })