GH-72 - Support DA Config API

* Ability to add arbitrary sheet-based configs to org and repo folders via a new `/config` view. * Refactored `getPathUtils.js` to better clarify `/my-item/` (folder) vs `/my-item` (html) vs `/my-item.json` (json) * Added tests for `getPathUtils.js` and `constants.js`. * Made `constants.js` more testable as it was caching a property as a result of ESM side-effects * Minor refactoring of `da-browse` to support config icon in breadcrumb. * Minor refactoring of `da-title` to support **save** vs **preview & publish**. Resolves: GH-72
adobe · Mar 5, 2024 · 1aa8f3c · 1aa8f3c
1 parent 1ead6cb
commit 1aa8f3c
Show file tree

Hide file tree

Showing 15 changed files with 483 additions and 194 deletions.
diff --git a/blocks/browse/da-browse/da-browse.css b/blocks/browse/da-browse/da-browse.css
@@ -5,6 +5,10 @@
  padding: 80px 0;
 }
 
+:host > svg {
+ display: none;
+}
+
 h1 {
  font-size: 1.4rem;
  text-transform: uppercase;
@@ -202,34 +206,62 @@ input[type="checkbox"] {
  position: relative;
  display: block;
  text-transform: uppercase;
- font-size: 14px;
+ font-size: 16px;
  font-weight: 700;
- padding: 0px 10px;
- line-height: 24px;
+ cursor: pointer;
+}
+
+.da-breadcrumb-list-item-link-wrapper {
+ padding: 0 10px;
  background: #dcdcdc;
  border-radius: 6px;
- cursor: pointer;
+ line-height: 32px;
+ display: flex;
+ overflow: hidden;
 }
 
 .da-breadcrumb-list-item a {
  text-decoration: none;
- color: rgb(44, 44, 44);
+ color: rgb(44 44 44);
+}
+
+.da-breadcrumb-list-item-config {
+ overflow: hidden;
+ text-indent: -1000px;
+ width: 32px;
+ padding-right: 2px;
+ margin: 0 -10px 0 2px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: rgb(44 44 44);
+}
+
+.da-breadcrumb-list-item-config:hover {
+ background-color: #147af3;
+ color: #FFF;
+}
+
+.da-breadcrumb-list-item-icon {
+ display: block;
+ width: 18px;
+ height: 18px;
 }
 
 .da-breadcrumb-list-item:last-child {
  cursor: unset;
 }
 
-.da-breadcrumb-list-item:after {
-  position: absolute;
-  right: -24px;
-  top: 0;
-  display: block;
-  content: '';
-  width: 24px;
-  height: 24px;
-  opacity: 0.5;
-  background: url('/blocks/browse/img/Smock_ChevronRight_18_N.svg') center / cover no-repeat;
+.da-breadcrumb-list-item::after {
+ position: absolute;
+ right: -24px;
+ top: 0;
+ display: block;
+ content: "";
+ width: 24px;
+ opacity: 0.5;
+ background: url(/blocks/browse/img/Smock_ChevronRight_18_N.svg) center center / 24px 24px no-repeat;
+ height: 32px;
 }
 
 /* Actions */

diff --git a/blocks/browse/da-browse/da-browse.js b/blocks/browse/da-browse/da-browse.js
@@ -1,11 +1,16 @@
 import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
-import { DA_ORIGIN } from '../../shared/constants.js';
+import { getDaAdmin } from '../../shared/constants.js';
+import inlinesvg from '../../shared/inlinesvg.js';
 
 import getSheet from '../../shared/sheet.js';
 import { saveToDa, daFetch } from '../../shared/utils.js';
 
 const sheet = await getSheet('/blocks/browse/da-browse/da-browse.css');
 
+const DA_ORIGIN = getDaAdmin();
+
+const ICONS = ['/blocks/browse/da-browse/img/Smock_Settings_18_N.svg'];
+
 export default class DaBrowse extends LitElement {
  static properties = {
  details: { attribute: false },
@@ -130,6 +135,7 @@ export default class DaBrowse extends LitElement {
  connectedCallback() {
  super.connectedCallback();
  this.shadowRoot.adoptedStyleSheets = [sheet];
+ inlinesvg({ parent: this.shadowRoot, paths: ICONS });
  }
 
  async update(props) {
@@ -196,6 +202,18 @@ export default class DaBrowse extends LitElement {
  this._canPaste = false;
  }
 
+ renderConfig(length, crumb, idx) {
+ if (this.details.depth <= 2 && idx + 1 === length) {
+ return html`
+ <a class="da-breadcrumb-list-item-config"
+ href="/config${crumb.path}/"
+ aria-label="Config">
+ <svg class="da-breadcrumb-list-item-icon"><use href="#spectrum-settings"/></svg>
+ </a>`;
+ }
+ return null;
+ }
+
  renderNew() {
  return html`
  <div class="da-actions-create ${this._createShow}">
@@ -293,9 +311,12 @@ export default class DaBrowse extends LitElement {
  <h1>Browse</h1>
  <div class="da-breadcrumb">
  <ul class="da-breadcrumb-list">
- ${this._breadcrumbs.map((crumb) => html`
+ ${this._breadcrumbs.map((crumb, idx) => html`
  <li class="da-breadcrumb-list-item">
- <a href="${crumb.path}">${crumb.name}</a>
+ <div class=da-breadcrumb-list-item-link-wrapper>
+ <a href="${crumb.path}">${crumb.name}</a>
+ ${this.renderConfig(this._breadcrumbs.length, crumb, idx)}
+ </a>
  </li>
  `)}
  </ul>

diff --git a/blocks/browse/da-browse/img/Smock_Settings_18_N.svg b/blocks/browse/da-browse/img/Smock_Settings_18_N.svg
diff --git a/blocks/browse/da-orgs/da-orgs.js b/blocks/browse/da-orgs/da-orgs.js
@@ -1,10 +1,11 @@
 import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
-import { DA_ORIGIN } from '../../shared/constants.js';
+import { getDaAdmin } from '../../shared/constants.js';
 import { daFetch } from '../../shared/utils.js';
 import getSheet from '../../shared/sheet.js';
 
 const sheet = await getSheet('/blocks/browse/da-orgs/da-orgs.css');
 
+const DA_ORIGIN = getDaAdmin();
 const MOCK_IMGS = [
  '/blocks/browse/da-orgs/img/da-one.webp',
  '/blocks/browse/da-orgs/img/da-two.webp',

diff --git a/blocks/edit/da-library/helpers/helpers.js b/blocks/edit/da-library/helpers/helpers.js
@@ -1,8 +1,9 @@
 // eslint-disable-next-line import/no-unresolved
 import { DOMParser } from 'da-y-wrapper';
-import { DA_ORIGIN, CON_ORIGIN } from '../../../shared/constants.js';
+import { CON_ORIGIN, getDaAdmin } from '../../../shared/constants.js';
 import getPathDetails from '../../../shared/pathDetails.js';
 
+const DA_ORIGIN = getDaAdmin();
 const REPLACE_CONTENT = '<content>';
 const DA_CONFIG = '/.da/config.json';
 

diff --git a/blocks/edit/da-title/da-title.js b/blocks/edit/da-title/da-title.js
@@ -1,5 +1,5 @@
 import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
-import { saveToDa, saveToAem } from '../utils/helpers.js';
+import { saveToDa, saveToAem, saveDaConfig } from '../utils/helpers.js';
 import getSheet from '../../shared/sheet.js';
 
 const sheet = await getSheet('/blocks/edit/da-title/da-title.css');
@@ -23,29 +23,53 @@ export default class DaTitle extends LitElement {
 
  const { hash } = window.location;
  const pathname = hash.replace('#', '');
- // Only save to da if it is a sheet
- if (this.sheet) {
+ // Only save to DA if it is a sheet or config
+ if (this.details.view === 'sheet') {
  const dasSave = await saveToDa(pathname, this.sheet);
  if (!dasSave.ok) return;
  }
- const aemPath = this.sheet ? `${pathname}.json` : pathname;
- let json = await saveToAem(aemPath, 'preview');
- if (action === 'publish') json = await saveToAem(aemPath, 'live');
- const { url } = action === 'publish' ? json.live : json.preview;
- window.open(url, '_blank');
+ if (this.details.view === 'config') {
+ const daConfigResp = await saveDaConfig(pathname, this.sheet);
+ if (!daConfigResp.ok) return;
+ }
+ if (action === 'preview' || action === 'publish') {
+ const aemPath = this.sheet ? `${pathname}.json` : pathname;
+ let json = await saveToAem(aemPath, 'preview');
+ if (action === 'publish') json = await saveToAem(aemPath, 'live');
+ const { url } = action === 'publish' ? json.live : json.preview;
+ window.open(url, '_blank');
+ }
  sendBtn.classList.remove('is-sending');
  }
 
- handlePreview() {
- this.handleAction('preview');
+ toggleActions() {
+ this._actionsVis = !this._actionsVis;
  }
 
- handlePublish() {
- this.handleAction('publish');
+ renderSave() {
+ return html`
+ <button
+ @click=${this.handleAction}
+ class="con-button blue da-title-action"
+ aria-label="Send">
+ Save
+ </button>`;
  }
 
- toggleActions() {
- this._actionsVis = !this._actionsVis;
+ renderAemActions() {
+ return html`
+ <button
+ @click=${() => this.handleAction('preview')}
+ class="con-button blue da-title-action"
+ aria-label="Send">
+ Preview
+ </button>
+ <button
+ @click=${() => this.handleAction('publish')}
+ class="con-button blue da-title-action"
+ aria-label="Send">
+ Publish
+ </button>`;
  }
 
  render() {
@@ -59,18 +83,7 @@ export default class DaTitle extends LitElement {
  <h1>${this.details.name}</h1>
  </div>
  <div class="da-title-actions${this._actionsVis ? ' is-open' : ''}">
- <button
- @click=${this.handlePreview}
- class="con-button blue da-title-action"
- aria-label="Send">
- Preview
- </button>
- <button
- @click=${this.handlePublish}
- class="con-button blue da-title-action"
- aria-label="Send">
- Publish
- </button>
+ ${this.details.view === 'config' ? this.renderSave() : this.renderAemActions()}
  <button
  @click=${this.toggleActions}
  class="con-button blue da-title-action-send"

diff --git a/blocks/edit/prose/index.js b/blocks/edit/prose/index.js
@@ -32,7 +32,9 @@ import menu from './plugins/menu.js';
 import imageDrop from './plugins/imageDrop.js';
 import linkConverter from './plugins/linkConverter.js';
 import { aem2prose, parse } from '../utils/helpers.js';
-import { DA_ORIGIN, COLLAB_ORIGIN } from '../../shared/constants.js';
+import { COLLAB_ORIGIN, getDaAdmin } from '../../shared/constants.js';
+
+const DA_ORIGIN = getDaAdmin();
 
 function getSchema() {
  const { marks, nodes: baseNodes } = baseSchema.spec;

diff --git a/blocks/edit/utils/helpers.js b/blocks/edit/utils/helpers.js
@@ -1,7 +1,9 @@
-import { DA_ORIGIN, AEM_ORIGIN } from '../../shared/constants.js';
+import { AEM_ORIGIN, getDaAdmin } from '../../shared/constants.js';
 import prose2aem from '../../shared/prose2aem.js';
 import { daFetch } from '../../shared/utils.js';
 
+const DA_ORIGIN = getDaAdmin();
+
 function getBlockName(block) {
  const classes = block.className.split(' ');
  const name = classes.shift();
@@ -109,7 +111,7 @@ async function saveHtml(fullPath) {
  return daFetch(fullPath, opts);
 }
 
-async function saveJson(fullPath, sheet) {
+async function saveJson(fullPath, sheet, dataType = 'blob') {
  const jData = sheet.getData();
  const data = jData.reduce((acc, row, idx) => {
  // Key Row
@@ -129,9 +131,17 @@ async function saveJson(fullPath, sheet) {
  return acc;
  }, []);
  const json = { total: data.length, offset: 0, limit: data.length, data, ':type': 'sheet' };
- const blob = new Blob([JSON.stringify(json)], { type: 'application/json' });
+
  const formData = new FormData();
- formData.append('data', blob);
+
+ if (dataType === 'blob') {
+ const blob = new Blob([JSON.stringify(json)], { type: 'application/json' });
+ formData.append('data', blob);
+ }
+
+ if (dataType === 'config') {
+ formData.append('config', JSON.stringify(json));
+ }
 
  const opts = { method: 'PUT', body: formData };
  return daFetch(fullPath, opts);
@@ -145,6 +155,11 @@ export function saveToDa(pathname, sheet) {
  return saveJson(fullPath, sheet);
 }
 
+export function saveDaConfig(pathname, sheet) {
+ const fullPath = `${DA_ORIGIN}/config${pathname}`;
+ return saveJson(fullPath, sheet, 'config');
+}
+
 export function parse(inital) {
  return new DOMParser().parseFromString(inital, 'text/html');
 }