MWPW-192158: Shared item loading layer for bulk publish

studio/src/translation/mas-items-selector.css.js → studio/src/common/components/mas-items-selector.css.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ghostButtonStyles } from './translation-common-styles.css.js';
+import { ghostButtonStyles } from '../styles/translation-common-styles.css.js';
 
 export const styles = [
     ghostButtonStyles,

studio/src/translation/mas-items-selector.js → studio/src/common/components/mas-items-selector.js

@@ -1,9 +1,9 @@
 import { LitElement, html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import Store from '../store.js';
-import ReactiveController from '../reactivity/reactive-controller.js';
-import { TABLE_TYPE } from '../constants.js';
-import { toggleSidebarIcon } from '../icons.js';
+import ReactiveController from '../../reactivity/reactive-controller.js';
+import { getItemsSelectionStore } from '../items-selection-store.js';
+import { TABLE_TYPE } from '../../constants.js';
+import { toggleSidebarIcon } from '../../icons.js';
 import './mas-select-items-table.js';
 import './mas-selected-items.js';
 import './mas-search-and-filters.js';
@@ -29,35 +29,33 @@ class MasItemsSelector extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
+        const s = getItemsSelectionStore();
         this.storeController = new ReactiveController(this, [
-            Store.translationProjects.inEdit,
-            Store.translationProjects.showSelected,
-            Store.translationProjects.selectedCards,
-            Store.translationProjects.selectedCollections,
-            Store.translationProjects.selectedPlaceholders,
+            s.inEdit,
+            s.showSelected,
+            s.selectedCards,
+            s.selectedCollections,
+            s.selectedPlaceholders,
         ]);
     }
 
     get showSelected() {
-        return Store.translationProjects.showSelected.value;
+        return getItemsSelectionStore().showSelected.value;
     }
 
     get selectedCount() {
-        return [
-            ...Store.translationProjects.selectedCards.value,
-            ...Store.translationProjects.selectedPlaceholders.value,
-            ...Store.translationProjects.selectedCollections.value,
-        ].length;
+        const s = getItemsSelectionStore();
+        return [...s.selectedCards.value, ...s.selectedPlaceholders.value, ...s.selectedCollections.value].length;
     }
 
     #toggleShowSelected() {
-        Store.translationProjects.showSelected.set(!this.showSelected);
+        getItemsSelectionStore().showSelected.set(!this.showSelected);
     }
 
     #getTabLabel(tab) {
         if (this.viewOnly) {
             const valueUppercase = tab.value.charAt(0).toUpperCase() + tab.value.slice(1);
-            return `${tab.label} (${Store.translationProjects[`selected${valueUppercase}`].value.length})`;
+            return `${tab.label} (${getItemsSelectionStore()[`selected${valueUppercase}`].value.length})`;
         }
         return tab.label;
     }

studio/src/translation/mas-search-and-filters.js → studio/src/common/components/mas-search-and-filters.js

@@ -1,10 +1,11 @@
 import { LitElement, html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import { VARIANTS } from '../editors/variant-picker.js';
+import { VARIANTS } from '../../editors/variant-picker.js';
 import { styles } from './mas-search-and-filters.css.js';
-import Store from '../store.js';
-import { FILTER_TYPE, TABLE_TYPE } from '../constants.js';
-import ReactiveController from '../reactivity/reactive-controller.js';
+import Store from '../../store.js';
+import { getItemsSelectionStore } from '../items-selection-store.js';
+import { FILTER_TYPE, TABLE_TYPE } from '../../constants.js';
+import ReactiveController from '../../reactivity/reactive-controller.js';
 
 class MasSearchAndFilters extends LitElement {
     static styles = styles;
@@ -40,8 +41,8 @@ class MasSearchAndFilters extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.commonDataController = new ReactiveController(this, [
-            Store.translationProjects[`all${this.typeUppercased}`],
-            Store.translationProjects[`display${this.typeUppercased}`],
+            getItemsSelectionStore()[`all${this.typeUppercased}`],
+            getItemsSelectionStore()[`display${this.typeUppercased}`],
             Store[this.type === TABLE_TYPE.PLACEHOLDERS ? 'placeholders' : 'fragments'].list.loading,
         ]);
         const dataCallback = () => {
@@ -51,16 +52,16 @@ class MasSearchAndFilters extends LitElement {
             this.#applyFilters();
             this.requestUpdate();
         };
-        Store.translationProjects[`all${this.typeUppercased}`].subscribe(dataCallback);
+        getItemsSelectionStore()[`all${this.typeUppercased}`].subscribe(dataCallback);
         this.dataSubscription = {
-            unsubscribe: () => Store.translationProjects[`all${this.typeUppercased}`].unsubscribe(dataCallback),
+            unsubscribe: () => getItemsSelectionStore()[`all${this.typeUppercased}`].unsubscribe(dataCallback),
         };
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
-        Store.translationProjects[`display${this.typeUppercased}`].set(
-            Store.translationProjects[`all${this.typeUppercased}`].value,
+        getItemsSelectionStore()[`display${this.typeUppercased}`].set(
+            getItemsSelectionStore()[`all${this.typeUppercased}`].value,
         );
         this.dataSubscription?.unsubscribe();
     }
@@ -105,7 +106,7 @@ class MasSearchAndFilters extends LitElement {
         const marketSegments = new Map();
         const customerSegments = new Map();
         const products = new Map();
-        for (const fragment of Store.translationProjects[`all${this.typeUppercased}`].value) {
+        for (const fragment of getItemsSelectionStore()[`all${this.typeUppercased}`].value) {
             if (!fragment.tags) continue;
 
             for (const tag of fragment.tags) {
@@ -271,7 +272,7 @@ class MasSearchAndFilters extends LitElement {
     }
 
     #applyFilters() {
-        const source = Store.translationProjects[`all${this.typeUppercased}`].value || [];
+        const source = getItemsSelectionStore()[`all${this.typeUppercased}`].value || [];
         const query = this.searchQuery?.toLowerCase();
         const hasTemplate = this.templateFilter?.length > 0;
         const hasMarket = this.marketSegmentFilter?.length > 0;
@@ -319,15 +320,15 @@ class MasSearchAndFilters extends LitElement {
         if (this.type === TABLE_TYPE.CARDS) {
             result.sort((a, b) => (b.groupedVariations?.length > 0 ? 1 : 0) - (a.groupedVariations?.length > 0 ? 1 : 0));
         }
-        Store.translationProjects[`display${this.typeUppercased}`].set(result);
+        getItemsSelectionStore()[`display${this.typeUppercased}`].set(result);
     }
 
     renderCount() {
         return html`<div class="result-count">
             ${this.isLoading
                 ? html`<sp-progress-circle indeterminate size="s"></sp-progress-circle>`
-                : html`${Store.translationProjects[`display${this.typeUppercased}`].value.length}
-                  result${Store.translationProjects[`display${this.typeUppercased}`].value.length !== 1 ? 's' : ''}`}
+                : html`${getItemsSelectionStore()[`display${this.typeUppercased}`].value.length}
+                  result${getItemsSelectionStore()[`display${this.typeUppercased}`].value.length !== 1 ? 's' : ''}`}
         </div>`;
     }
 

studio/src/translation/mas-select-items-table.css.js → studio/src/common/components/mas-select-items-table.css.js

@@ -5,7 +5,7 @@ import {
     tableColumnIconStyles,
     tableSelectedRowStyles,
     loadingContainerFlexStyles,
-} from './translation-common-styles.css.js';
+} from '../styles/translation-common-styles.css.js';
 
 export const styles = [
     tableHeaderBaseStyles,

studio/src/translation/mas-select-items-table.js → studio/src/common/components/mas-select-items-table.js

@@ -1,18 +1,19 @@
 import { LitElement, html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styles } from './mas-select-items-table.css.js';
-import Store from '../store.js';
-import StoreController from '../reactivity/store-controller.js';
-import { TABLE_TYPE } from '../constants.js';
-import { renderFragmentStatusCell } from './translation-utils.js';
-import ReactiveController from '../reactivity/reactive-controller.js';
-import { MasCollapsibleTableRow } from './mas-collapsible-table-row.js';
+import Store from '../../store.js';
+import { getItemsSelectionStore } from '../items-selection-store.js';
+import StoreController from '../../reactivity/store-controller.js';
+import { TABLE_TYPE } from '../../constants.js';
+import { renderFragmentStatusCell } from '../../translation/translation-utils.js';
+import ReactiveController from '../../reactivity/reactive-controller.js';
 import {
     loadAllPlaceholders,
     loadAllFragments,
     loadSelectedPlaceholders,
     loadSelectedFragments,
-} from './translation-items-loader.js';
+} from '../utils/translation-items-loader.js';
+import '../../translation/mas-collapsible-table-row.js';
 
 class MasSelectItemsTable extends LitElement {
     static styles = styles;
@@ -49,9 +50,9 @@ class MasSelectItemsTable extends LitElement {
         super.connectedCallback();
         if (this.viewOnly) {
             if (this.type === TABLE_TYPE.PLACEHOLDERS) {
-                this.viewOnlyLoading = !!Store.translationProjects.selectedPlaceholders.value?.length;
+                this.viewOnlyLoading = !!getItemsSelectionStore().selectedPlaceholders.value?.length;
                 this.dataSubscription = loadSelectedPlaceholders(
-                    Store.translationProjects.selectedPlaceholders.value,
+                    getItemsSelectionStore().selectedPlaceholders.value,
                     (items) => {
                         this.viewOnlyFragments = items;
                         if (!Store.placeholders.list.loading.get()) {
@@ -60,10 +61,10 @@ class MasSelectItemsTable extends LitElement {
                     },
                 );
             } else {
-                this.viewOnlyLoading = !!Store.translationProjects[`selected${this.typeUppercased}`].value?.length;
+                this.viewOnlyLoading = !!getItemsSelectionStore()[`selected${this.typeUppercased}`].value?.length;
                 this.processAbortController = new AbortController();
                 loadSelectedFragments(
-                    Store.translationProjects[`selected${this.typeUppercased}`].value,
+                    getItemsSelectionStore()[`selected${this.typeUppercased}`].value,
                     this.type,
                     this.repository,
                     {
@@ -97,10 +98,10 @@ class MasSelectItemsTable extends LitElement {
         this[`selected${this.typeUppercased}StoreController`] = new ReactiveController(this, [
             Store.fragments.list.loading,
             Store.placeholders.list.loading,
-            Store.translationProjects[`selected${this.typeUppercased}`],
+            getItemsSelectionStore()[`selected${this.typeUppercased}`],
         ]);
         this[`display${this.typeUppercased}StoreController`] = new ReactiveController(this, [
-            Store.translationProjects[`display${this.typeUppercased}`],
+            getItemsSelectionStore()[`display${this.typeUppercased}`],
         ]);
     }
 
@@ -165,11 +166,11 @@ class MasSelectItemsTable extends LitElement {
         if (this.viewOnly) {
             return this.viewOnlyFragments;
         }
-        return Store.translationProjects[`display${this.typeUppercased}`].value;
+        return getItemsSelectionStore()[`display${this.typeUppercased}`].value;
     }
 
     get selectedInTable() {
-        return new Set(Store.translationProjects[`selected${this.typeUppercased}`].value);
+        return new Set(getItemsSelectionStore()[`selected${this.typeUppercased}`].value);
     }
 
     get tableColumns() {
@@ -229,7 +230,7 @@ class MasSelectItemsTable extends LitElement {
         const newSelected = this.selectedInTable.has(path)
             ? [...this.selectedInTable].filter((p) => p !== path)
             : [...this.selectedInTable, path];
-        Store.translationProjects[`selected${this.typeUppercased}`].set(newSelected);
+        getItemsSelectionStore()[`selected${this.typeUppercased}`].set(newSelected);
     }
 
     #renderTableBody() {

studio/src/translation/mas-selected-items.css.js → studio/src/common/components/mas-selected-items.css.js

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { ghostButtonStyles } from './translation-common-styles.css.js';
+import { ghostButtonStyles } from '../styles/translation-common-styles.css.js';
 
 export const styles = [
     ghostButtonStyles,

studio/src/translation/mas-selected-items.js → studio/src/common/components/mas-selected-items.js

@@ -1,11 +1,12 @@
 import { LitElement, html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styles } from './mas-selected-items.css.js';
-import Store from '../store.js';
-import ReactiveController from '../reactivity/reactive-controller.js';
-import { Fragment } from '../aem/fragment.js';
-import { CARD_MODEL_PATH, COLLECTION_MODEL_PATH } from '../constants.js';
-import { fetchUnresolvedVariations } from './translation-items-loader.js';
+import Store from '../../store.js';
+import { getItemsSelectionStore } from '../items-selection-store.js';
+import ReactiveController from '../../reactivity/reactive-controller.js';
+import { Fragment } from '../../aem/fragment.js';
+import { CARD_MODEL_PATH, COLLECTION_MODEL_PATH } from '../../constants.js';
+import { fetchUnresolvedVariations } from '../utils/translation-items-loader.js';
 
 class MasSelectedItems extends LitElement {
     static styles = styles;
@@ -15,17 +16,17 @@ class MasSelectedItems extends LitElement {
     constructor() {
         super();
         this.storeController = new ReactiveController(this, [
-            Store.translationProjects.showSelected,
-            Store.translationProjects.selectedCards,
-            Store.translationProjects.selectedCollections,
-            Store.translationProjects.selectedPlaceholders,
-            Store.translationProjects.groupedVariationsByParent,
+            getItemsSelectionStore().showSelected,
+            getItemsSelectionStore().selectedCards,
+            getItemsSelectionStore().selectedCollections,
+            getItemsSelectionStore().selectedPlaceholders,
+            getItemsSelectionStore().groupedVariationsByParent,
             Store.fragments.list.loading,
             Store.placeholders.list.loading,
         ]);
         this.fetchController = new ReactiveController(
             this,
-            [Store.translationProjects.showSelected, Store.translationProjects.selectedCards],
+            [getItemsSelectionStore().showSelected, getItemsSelectionStore().selectedCards],
             this.maybeFetchUnresolvedVariations.bind(this),
         );
     }
@@ -35,15 +36,15 @@ class MasSelectedItems extends LitElement {
     maybeFetchUnresolvedVariations() {
         if (!this.showSelected || !this.repository) return;
 
-        const selectedCards = Store.translationProjects.selectedCards.value || [];
+        const selectedCards = getItemsSelectionStore().selectedCards.value || [];
         const selectedCardsKey = [...selectedCards].sort().join('\0');
         if (selectedCardsKey === this.#lastFetchedSelectedCardsKey) return;
 
         this.#lastFetchedSelectedCardsKey = selectedCardsKey;
         fetchUnresolvedVariations(
             selectedCards,
-            Store.translationProjects.cardsByPaths.value,
-            Store.translationProjects.groupedVariationsByParent.value,
+            getItemsSelectionStore().cardsByPaths.value,
+            getItemsSelectionStore().groupedVariationsByParent.value,
             this.repository,
         );
     }
@@ -54,28 +55,28 @@ class MasSelectedItems extends LitElement {
     }
 
     get selectedItems() {
-        const cards = Store.translationProjects.selectedCards.value
-            ?.map(
+        const cards = getItemsSelectionStore()
+            .selectedCards.value?.map(
                 (path) =>
-                    Store.translationProjects.cardsByPaths.value?.get(path) ??
-                    Store.translationProjects.groupedVariationsData.value?.get(path),
+                    getItemsSelectionStore().cardsByPaths.value?.get(path) ??
+                    getItemsSelectionStore().groupedVariationsData.value?.get(path),
             )
             .filter(Boolean);
-        const collections = Store.translationProjects.selectedCollections.value
-            ?.map((path) => {
-                return Store.translationProjects.collectionsByPaths.value.get(path);
+        const collections = getItemsSelectionStore()
+            .selectedCollections.value?.map((path) => {
+                return getItemsSelectionStore().collectionsByPaths.value.get(path);
             })
             .filter(Boolean);
-        const placeholders = Store.translationProjects.selectedPlaceholders.value
-            ?.map((path) => {
-                return Store.translationProjects.placeholdersByPaths.value.get(path);
+        const placeholders = getItemsSelectionStore()
+            .selectedPlaceholders.value?.map((path) => {
+                return getItemsSelectionStore().placeholdersByPaths.value.get(path);
             })
             .filter(Boolean);
         return [...cards, ...collections, ...placeholders];
     }
 
     get showSelected() {
-        return Store.translationProjects.showSelected.value;
+        return getItemsSelectionStore().showSelected.value;
     }
 
     get isLoadingItems() {
@@ -120,8 +121,8 @@ class MasSelectedItems extends LitElement {
                 type = 'Placeholders';
                 break;
         }
-        Store.translationProjects[`selected${type}`].set(
-            Store.translationProjects[`selected${type}`].value?.filter((selectedPath) => selectedPath !== item.path),
+        getItemsSelectionStore()[`selected${type}`].set(
+            getItemsSelectionStore()[`selected${type}`].value?.filter((selectedPath) => selectedPath !== item.path),
         );
     }
 

studio/src/common/items-selection-store.js

@@ -0,0 +1,14 @@
+import Store from '../store.js';
+
+let activeItemsSelectionStore = Store.translationProjects;
+
+export function getItemsSelectionStore() {
+    return activeItemsSelectionStore;
+}
+
+/**
+ * @param {typeof Store.translationProjects} slice
+ */
+export function setItemsSelectionStore(slice) {
+    activeItemsSelectionStore = slice;
+}