State management pre cleanup

adobecom · Dec 11, 2024 · 60a66d4 · 60a66d4
1 parent 44fbfa9
commit 60a66d4
Show file tree

Hide file tree

Showing 37 changed files with 2,431 additions and 600 deletions.
diff --git a/studio.html b/studio.html
@@ -53,7 +53,7 @@
         <script src="studio/src/maslib.js" type="module"></script>
         <script src="studio/libs/swc.js" type="module"></script>
         <script src="studio/src/aem/index.js" type="module"></script>
-        <script src="studio/src/studio.js" type="module"></script>
+        <script src="studio/src/studio-new.js" type="module"></script>
 
         <!-- OST -->
         <script src="studio/ost/index.js"></script>

diff --git a/studio/libs/swc.js b/studio/libs/swc.js
diff --git a/studio/src/aem/aem.js b/studio/src/aem/aem.js
@@ -56,9 +56,14 @@ class AEM {
      * @param {string} [params.path] - The path to search in
      * @param {Array} [params.tags] - The tags
      * @param {string} [params.query] - The search query
+     * @param {AbortController} abortController used for cancellation
      * @returns A generator function that fetches all the matching data using a cursor that is returned by the search API
      */
-    async *searchFragment({ path, query = '', tags = [], sort }, limit) {
+    async *searchFragment(
+        { path, query = '', tags = [], sort },
+        limit,
+        abortController,
+    ) {
         const filter = {
             path,
         };
@@ -94,10 +99,10 @@ class AEM {
                 `${this.cfSearchUrl}?${searchParams}`,
                 {
                     headers: this.headers,
+                    signal: abortController?.signal,
                 },
-            ).catch((err) => {
-                throw new Error(`${NETWORK_ERROR_MESSAGE}: ${err.message}`);
-            });
+            );
+
             if (!response.ok) {
                 throw new Error(
                     `Search failed: ${response.status} ${response.statusText}`,
@@ -131,13 +136,15 @@ class AEM {
      * @param {string} baseUrl the aem base url
      * @param {string} id fragment id
      * @param {Object} headers optional request headers
+     * @param {AbortController} abortController used for cancellation
      * @returns {Promise<Object>} the raw fragment item
      */
-    async getFragmentById(baseUrl, id, headers) {
+    async getFragmentById(baseUrl, id, headers, abortController) {
         const response = await fetch(
             `${baseUrl}/adobe/sites/cf/fragments/${id}`,
             {
                 headers,
+                signal: abortController?.signal,
             },
         );
         if (!response.ok) {
@@ -203,8 +210,7 @@ class AEM {
 
         await this.saveTags(fragment);
 
-        const newFragment = await this.sites.cf.fragments.getById(fragment.id);
-        return newFragment;
+        return this.pollUpdatedFragment(fragment);
     }
 
     async saveTags(fragment) {
@@ -248,6 +254,16 @@ class AEM {
         }
     }
 
+    async pollUpdatedFragment(oldFragment) {
+        while (true) {
+            const newFragment = await this.sites.cf.fragments.getById(
+                oldFragment.id,
+            );
+            if (newFragment.etag !== oldFragment.etag) return newFragment;
+            await this.wait(150);
+        }
+    }
+
     /**
      * Copy a content fragment using the AEM classic API
      * @param {Object} fragment
@@ -475,8 +491,13 @@ class AEM {
                 /**
                  * @see AEM#getFragmentById
                  */
-                getById: (id) =>
-                    this.getFragmentById(this.baseUrl, id, this.headers),
+                getById: (id, abortController) =>
+                    this.getFragmentById(
+                        this.baseUrl,
+                        id,
+                        this.headers,
+                        abortController,
+                    ),
                 /**
                  * @see AEM#saveFragment
                  */

diff --git a/studio/src/aem/fragment.js b/studio/src/aem/fragment.js
@@ -1,5 +1,3 @@
-import { EVENT_CHANGE } from '../events.js';
-
 export class Fragment {
     path = '';
     hasChanges = false;
@@ -9,14 +7,24 @@ export class Fragment {
 
     selected = false;
 
+    initialValue;
+
     /**
      * @param {*} AEM Fragment JSON object
      * @param {*} eventTarget DOM element to dispatch events from
      */
-    constructor(
-        { id, etag, model, path, title, description, status, modified, fields },
-        eventTarget,
-    ) {
+    constructor({
+        id,
+        etag,
+        model,
+        path,
+        title,
+        description,
+        status,
+        modified,
+        fields,
+        tags,
+    }) {
         this.id = id;
         this.model = model;
         this.etag = etag;
@@ -27,7 +35,8 @@ export class Fragment {
         this.status = status;
         this.modified = modified;
         this.fields = fields;
-        this.eventTarget = eventTarget; /** can be null and set after on save */
+        this.tags = tags || [];
+        this.initialValue = structuredClone(this);
     }
 
     get variant() {
@@ -46,26 +55,25 @@ export class Fragment {
 
     refreshFrom(fragmentData) {
         Object.assign(this, fragmentData);
+        this.initialValue = structuredClone(this);
         this.hasChanges = false;
-        this.notify();
     }
 
-    notify() {
-        this.eventTarget.dispatchEvent(
-            new CustomEvent(EVENT_CHANGE, { detail: this }),
-        );
+    discardChanges() {
+        if (!this.hasChanges) return;
+        Object.assign(this, this.initialValue);
+        this.initialValue = structuredClone(this);
+        this.hasChanges = false;
     }
 
     toggleSelection(value) {
         if (value !== undefined) this.selected = value;
         else this.selected = !this.selected;
-        this.notify();
     }
 
     updateFieldInternal(fieldName, value) {
         this[fieldName] = value ?? '';
         this.hasChanges = true;
-        this.notify();
     }
 
     updateField(fieldName, value) {
@@ -82,7 +90,7 @@ export class Fragment {
                 this.hasChanges = true;
                 change = true;
             });
-        this.notify();
+        if (fieldName === 'tags') this.newTags = value;
         return change;
     }
 }
diff --git a/studio/src/aem/mas-filter-panel.js b/studio/src/aem/mas-filter-panel.js
@@ -1,12 +1,8 @@
 import { html, css, LitElement } from 'lit';
 
 class MasFilterPanel extends LitElement {
-    static properties = {
-        source: { type: String },
-    };
     static styles = css`
         :host {
-            padding-inline: 16px;
             display: flex;
         }
 
@@ -27,33 +23,6 @@ class MasFilterPanel extends LitElement {
         }
     `;
 
-    #source;
-
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.#source = document.getElementById(this.source);
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#source.removeAttribute('tags');
-    }
-
-    handeFilterChange(event) {
-        const newValue = event.target.getAttribute('value');
-        if (!newValue) return;
-        const value = this.#source.getAttribute('tags') || '';
-        let tags = value.split(',').filter((tag) => Boolean(tag));
-        if (tags.includes(newValue))
-            tags = tags.filter((tag) => tag !== newValue);
-        else tags.push(newValue);
-        this.#source.setAttribute('tags', tags.join(','));
-    }
-
     render() {
         return html`
             <div id="filters-panel">

diff --git a/studio/src/aem/mas-filter-toolbar.js b/studio/src/aem/mas-filter-toolbar.js
@@ -9,26 +9,33 @@ class MasFilterToolbar extends LitElement {
             align-items: center;
             gap: 10px;
         }
+
         sp-picker {
             width: 100px;
         }
+
         sp-textfield {
             width: 200px;
         }
+
         sp-action-button {
             border: none;
             font-weight: bold;
         }
+
         sp-action-button:not(.filters-shown) {
             color: var(--spectrum-gray-700);
         }
+
         sp-action-button.filters-shown {
             background-color: var(--spectrum-blue-100);
             color: var(--spectrum-accent-color-1000);
         }
+
         sp-action-button.filters-shown:hover {
             background-color: var(--spectrum-blue-200);
         }
+
         .filters-badge {
             width: 18px;
             height: 18px;
@@ -39,6 +46,7 @@ class MasFilterToolbar extends LitElement {
             color: var(--spectrum-white);
             border-radius: 2px;
         }
+
         sp-search {
             --spectrum-search-border-radius: 16px;
         }

diff --git a/studio/src/aem/render-view.js b/studio/src/aem/render-view.js
@@ -1,7 +1,7 @@
 import { html, LitElement, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { EVENT_CHANGE, EVENT_LOAD } from '../events.js';
-import './mas-fragment-status.js';
+import '../mas-fragment-status.js';
 
 const MODE = 'render';
 

diff --git a/studio/src/constants.js b/studio/src/constants.js
@@ -20,3 +20,9 @@ export const ANALYTICS_LINK_IDS = [
     'see-terms',
     'what-is-included',
 ];
+
+export const FOLDER_MAPPING = {
+    acom: 'Adobe.com',
+    nala: 'CCD',
+    'adobe-home': 'Adobe Home',
+};