Fine grained access control

blocks/browse/da-actionbar/da-actionbar.js

@@ -8,7 +8,8 @@ const STYLE = await getStyle(import.meta.url);
 export default class DaActionBar extends LitElement {
   static properties = {
     items: { attribute: false },
-    _canPaste: { state: true },
+    permissions: { attribute: false },
+    _isCopying: { state: true },
     _isDeleting: { state: true },
     _isMoving: { state: true },
     currentPath: { type: String },
@@ -29,7 +30,7 @@ export default class DaActionBar extends LitElement {
     if (props.has('items')) {
       // Reset state when items go empty
       if (this.items.length === 0) {
-        this._canPaste = false;
+        this._isCopying = false;
         this._isMoving = false;
         this._isDeleting = false;
       }
@@ -39,7 +40,7 @@ export default class DaActionBar extends LitElement {
   }
 
   handleClear() {
-    this._canPaste = false;
+    this._isCopying = false;
     this._isMoving = false;
     this._isDeleting = false;
     const opts = { detail: true, bubbles: true, composed: true };
@@ -54,12 +55,12 @@ export default class DaActionBar extends LitElement {
   }
 
   handleCopy() {
-    this._canPaste = true;
+    this._isCopying = true;
   }
 
   handleMove() {
+    this._isCopying = true;
     this._isMoving = true;
-    this._canPaste = true;
   }
 
   handlePaste() {
@@ -106,13 +107,19 @@ export default class DaActionBar extends LitElement {
     return itemDir !== this.currentPath;
   }
 
+  get _canWrite() {
+    if (!this.permissions) return false;
+    return this.permissions.some((permission) => permission === 'write');
+  }
+
   get _canShare() {
-    return this.items.some((item) => item.ext && item.ext !== 'link');
+    const isFile = this.items.some((item) => item.ext && item.ext !== 'link');
+    return isFile && !this._isCopying;
   }
 
   get currentAction() {
     const itemStr = this.items.length > 1 ? 'items' : 'item';
-    if (this._canPaste) {
+    if (this._isCopying && this._canWrite) {
       const folderName = this.currentPath.split('/').pop();
       return `Paste ${this.items.length} ${itemStr} into ${folderName}`;
     }
@@ -135,37 +142,37 @@ export default class DaActionBar extends LitElement {
         <div class="da-action-bar-right-rail">
           <button
             @click=${this.handleRename}
-            class="rename-button ${this.items.length === 1 ? '' : 'hide'} ${this._canPaste ? 'hide' : ''}">
+            class="rename-button ${this._canWrite ? '' : 'hide'} ${this.items.length === 1 ? '' : 'hide'} ${this._isCopying ? 'hide' : ''}">
             <img src="/blocks/browse/da-browse/img/Smock_TextEdit_18_N.svg" />
             <span>Rename</span>
           </button>
           <button
             @click=${this.handleCopy}
-            class="copy-button ${this._canPaste ? 'hide' : ''}">
+            class="copy-button ${this._isCopying ? 'hide' : ''}">
             <img src="/blocks/browse/da-browse/img/Smock_Copy_18_N.svg" />
             <span>Copy</span>
           </button>
           <button
-              @click=${this.handleMove}
-              class="copy-button ${this._canPaste ? 'hide' : ''}">
-              <img src="/blocks/browse/da-browse/img/Smock_Cut_18_N.svg" />
-              <span>Cut</span>
-            </button>
+            @click=${this.handleMove}
+            class="copy-button ${this._canWrite ? '' : 'hide'} ${this._isCopying ? 'hide' : ''}">
+            <img src="/blocks/browse/da-browse/img/Smock_Cut_18_N.svg" />
+            <span>Cut</span>
+          </button>
           <button
             @click=${this.handlePaste}
-            class="copy-button ${this._canPaste ? '' : 'hide'}">
+            class="copy-button ${this._canWrite ? '' : 'hide'} ${this._isCopying ? '' : 'hide'}">
             <img src="/blocks/browse/da-browse/img/Smock_Copy_18_N.svg" />
             <span>Paste</span>
           </button>
           <button
             @click=${this.handleDelete}
-            class="delete-button ${this._canPaste ? 'hide' : ''}">
+            class="delete-button ${this._canWrite ? '' : 'hide'} ${this._isCopying ? 'hide' : ''}">
             <img src="/blocks/browse/da-browse/img/Smock_Delete_18_N.svg" />
             <span>Delete</span>
           </button>
           <button
             @click=${this.handleShare}
-            class="share-button ${this._canShare && !this._canPaste ? '' : 'hide'}">
+            class="share-button ${this._canShare ? '' : 'hide'}">
             <img src="/blocks/browse/img/Smock_Share_18_N.svg" />
             <span>Share</span>
           </button>

blocks/browse/da-browse/da-browse.js

@@ -39,6 +39,10 @@ export default class DaBrowse extends LitElement {
     this.shadowRoot.adoptedStyleSheets = [STYLE];
   }
 
+  handlePermissions(e) {
+    if (this.newCmp) this.newCmp.permissions = e.detail;
+  }
+
   handleTabClick(idx) {
     this._tabItems = this._tabItems.map((tab, tidx) => ({ ...tab, selected: idx === tidx }));
   }
@@ -55,6 +59,10 @@ export default class DaBrowse extends LitElement {
     return this._tabItems.find((tab) => tab.selected).id;
   }
 
+  get newCmp() {
+    return this.shadowRoot.querySelector('da-new');
+  }
+
   renderNew() {
     return html`<da-new @newitem=${this.handleNewItem} fullpath="${this.details.fullpath}"></da-new>`;
   }
@@ -68,6 +76,7 @@ export default class DaBrowse extends LitElement {
       <da-list
         class="da-list-type-${type}"
         fullpath="${fullpath}"
+        @onpermissions=${this.handlePermissions}
         select="${select ? true : nothing}"
         sort="${sort ? true : nothing}"
         drag="${drag ? true : nothing}"></da-list>`;

blocks/browse/da-list/da-list.js

@@ -25,6 +25,7 @@ export default class DaList extends LitElement {
     drag: { type: Boolean },
     listItems: { attribute: false },
     newItem: { attribute: false },
+    _permissions: { state: true },
     _listItems: { state: true },
     _selectedItems: { state: true },
     _dropFiles: { state: true },
@@ -51,6 +52,7 @@ export default class DaList extends LitElement {
     }
 
     if (props.has('fullpath') && this.fullpath) {
+      this.handlePermissions(null);
       this._listItems = await this.getList();
     }
 
@@ -69,9 +71,19 @@ export default class DaList extends LitElement {
     this._status = { type, text, description };
   }
 
+  handlePermissions(permissions) {
+    this._permissions = permissions;
+
+    // Notify parent
+    const opts = { detail: permissions, bubbles: true, composed: true };
+    const event = new CustomEvent('onpermissions', opts);
+    this.dispatchEvent(event);
+  }
+
   async getList() {
     const resp = await daFetch(`${DA_ORIGIN}/list${this.fullpath}`);
-    if (!resp.ok) return null;
+    if (!resp.ok) return [];
+    if (resp.permissions) this.handlePermissions(resp.permissions);
     return resp.json();
   }
 
@@ -127,6 +139,12 @@ export default class DaList extends LitElement {
     this.requestUpdate();
   }
 
+  wait(milliseconds) {
+    return new Promise((r) => {
+      setTimeout(r, milliseconds);
+    });
+  }
+
   async handlePasteItem(item) {
     let continuation = true;
     let continuationToken;
@@ -140,6 +158,13 @@ export default class DaList extends LitElement {
       if (resp.status === 204) {
         continuation = false;
         break;
+      } else if (resp.status >= 400) {
+        this.setStatus('Copying', 'There was an issue copying.');
+
+        // TODO maybe there is a better way to keep the status dialog visible for a bit?
+        await this.wait(2000);
+
+        return;
       }
       const json = await resp.json();
       ({ continuationToken } = json);
@@ -418,6 +443,7 @@ export default class DaList extends LitElement {
         ${this.drag ? this.renderDropArea() : nothing}
       </div>
       <da-actionbar
+        .permissions=${this._permissions}
         @clearselection=${this.handleClear}
         @rename=${this.handleRename}
         @onpaste=${this.handlePaste}

blocks/browse/da-new/da-new.css

@@ -51,6 +51,15 @@ button {
   transition: outline-offset .2s;
 }
 
+.da-actions-new-button:disabled {
+  color: var(--s2-gray-700);
+  background-color: transparent;
+  outline-color: var(--s2-gray-700);
+  border: 2px solid var(--s2-gray-700);
+  border-style: dotted;
+  cursor: not-allowed;
+}
+
 .da-actions-create.menu .da-actions-menu {
   display: grid;
   gap: 6px;

blocks/browse/da-new/da-new.js

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'da-lit';
+import { LitElement, html, nothing } from 'da-lit';
 import { saveToDa } from '../../shared/utils.js';
 import { getNx } from '../../../scripts/utils.js';
 import getEditPath from '../shared.js';
@@ -10,6 +10,7 @@
 export default class DaNew extends LitElement {
   static properties = {
     fullpath: { type: String },
+    permissions: { attribute: false },
     _createShow: { attribute: false },
     _createType: { attribute: false },
     _createFile: { attribute: false },
@@ -126,10 +127,15 @@
     this._externalUrl = '';
   }
 
+  get _disabled() {
+    if (!this.permissions) return true;
+    return !this.permissions.some((permission) => permission === 'write');
+  }
+
   render() {
     return html`
       <div class="da-actions-create ${this._createShow}">
-        <button class="da-actions-new-button" @click=${this.handleCreateMenu}>New</button>
+        <button class="da-actions-new-button" @click=${this.handleCreateMenu} ?disabled=${this._disabled}>New</button>
         <ul class="da-actions-menu">
           <li class=da-actions-menu-item>
             <button data-type=folder @click=${this.handleNewType}>Folder</button>

blocks/edit/da-content/da-content.js

@@ -1,23 +1,27 @@
-import { LitElement, html } from 'da-lit';
+import { LitElement, html, nothing } from 'da-lit';
 
 import getSheet from '../../shared/sheet.js';
 import '../da-editor/da-editor.js';
-import '../da-preview/da-preview.js';
-import '../da-versions/da-versions.js';
 
 const sheet = await getSheet('/blocks/edit/da-content/da-content.css');
 
 export default class DaContent extends LitElement {
   static properties = {
     details: { attribute: false },
-    _sourceUrl: { state: true },
+    permissions: { attribute: false },
+    proseEl: { attribute: false },
+    wsProvider: { attribute: false },
+    _editorLoaded: { state: true },
     _versionUrl: { state: true },
   };
 
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [sheet];
-    this._sourceUrl = this.details.sourceUrl;
+  }
+
+  update(props) {
+    super.update(props);
   }
 
   showPreview() {
@@ -31,6 +35,14 @@ export default class DaContent extends LitElement {
     this.daVersions.classList.add('show-versions');
   }
 
+  async handleEditorLoaded() {
+    if (this._editorLoaded) return;
+    const preview = import('../da-preview/da-preview.js');
+    const versions = import('../da-versions/da-versions.js');
+    await Promise.all([preview, versions]);
+    this._editorLoaded = true;
+  }
+
   handleReset() {
     this._versionUrl = null;
   }
@@ -52,18 +64,28 @@ export default class DaContent extends LitElement {
   render() {
     return html`
       <div class="editor-wrapper">
-        <da-editor path="${this._sourceUrl}" version="${this._versionUrl}" @versionreset=${this.handleReset}></da-editor>
-        <div class="da-editor-tabs">
-          <div class="da-editor-tabs-full">
-            <button class="da-editor-tab show-preview" title="Preview" @click=${this.showPreview}>Preview</button>
-          </div>
-          <div class="da-editor-tabs-quiet">
-            <button class="da-editor-tab quiet show-versions" title="Versions" @click=${this.showVersions}>Versions</button>
+        <da-editor
+          path="${this.details.sourceUrl}"
+          version="${this._versionUrl}"
+          .permissions=${this.permissions}
+          .proseEl=${this.proseEl}
+          .wsProvider=${this.wsProvider}
+          @proseloaded=${this.handleEditorLoaded}
+          @versionreset=${this.handleReset}>
+        </da-editor>
+        ${this._editorLoaded ? html`
+          <div class="da-editor-tabs">
+            <div class="da-editor-tabs-full">
+              <button class="da-editor-tab show-preview" title="Preview" @click=${this.showPreview}>Preview</button>
+            </div>
+            <div class="da-editor-tabs-quiet">
+              <button class="da-editor-tab quiet show-versions" title="Versions" @click=${this.showVersions}>Versions</button>
+            </div>
           </div>
-        </div>
+        ` : nothing}
       </div>
-      <da-preview path=${this.details.previewUrl}></da-preview>
-      <da-versions path=${this.details.fullpath} @preview=${this.handlePreview} @close=${this.handleCloseVersions}></da-versions>
+      ${this._editorLoaded ? html`<da-preview path=${this.details.previewUrl}></da-preview>` : nothing}
+      ${this._editorLoaded ? html`<da-versions path=${this.details.fullpath} @preview=${this.handlePreview} @close=${this.handleCloseVersions}></da-versions>` : nothing}
     `;
   }
 }

blocks/edit/da-editor/da-editor.css

@@ -61,6 +61,10 @@
   padding-top: 96px;
 }
 
+.da-prose-mirror-readonly .ProseMirror {
+  background-color: lightgrey;
+}
+
 .ProseMirror {
   min-height: 600px;
   background: #FFF;