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,14 +1,14 @@
 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';
 import { styles } from './mas-items-selector.css.js';
-import { debounce } from '../utils.js';
+import { debounce } from '../../utils.js';
 
 export const TABS = [
     { value: TABLE_TYPE.CARDS, label: 'Fragments' },
@@ -23,40 +23,43 @@ class MasItemsSelector extends LitElement {
         viewOnly: { type: Boolean, state: true },
         searchQuery: { type: String, state: true },
         selectedTab: { type: String, state: true },
+        /** @type {(fragmentData: object) => string} */
+        getDisplayName: { type: Function },
+        renderFragmentStatusCell: { type: Function },
     };
 
     constructor() {
         super();
         this.viewOnly = false;
         this.searchQuery = '';
         this.selectedTab = TABLE_TYPE.CARDS;
+        this.getDisplayName = (fragmentData) => fragmentData?.path ?? '';
+        this.renderFragmentStatusCell = () => nothing;
     }
 
     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.length +
-            Store.translationProjects.selectedPlaceholders.value.length +
-            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);
     }
 
     #setSearchQuery = debounce((value) => {
@@ -79,7 +82,7 @@ class MasItemsSelector extends LitElement {
     #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;
     }
@@ -135,9 +138,13 @@ class MasItemsSelector extends LitElement {
                                 <mas-select-items-table
                                     .viewOnly=${this.viewOnly}
                                     .type=${tab.value}
+                                    .getDisplayName=${this.getDisplayName}
+                                    .renderFragmentStatusCell=${this.renderFragmentStatusCell}
                                     @show-toast=${this.#showToast}
                                 ></mas-select-items-table>
-                                ${this.viewOnly ? nothing : html`<mas-selected-items></mas-selected-items>`}
+                                ${this.viewOnly
+                                    ? nothing
+                                    : html`<mas-selected-items .getDisplayName=${this.getDisplayName}></mas-selected-items>`}
                             </div>
                             <sp-toast timeout="6000" @close=${(event) => event.stopPropagation()}></sp-toast>
                         </sp-tab-panel>

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,17 @@
 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 ReactiveController from '../../reactivity/reactive-controller.js';
 import {
     loadAllPlaceholders,
     loadAllFragments,
     loadSelectedPlaceholders,
     loadSelectedFragments,
-} from './translation-items-loader.js';
+} from '../utils/translation-items-loader.js';
 
 class MasSelectItemsTable extends LitElement {
     static styles = styles;
@@ -22,6 +21,8 @@ class MasSelectItemsTable extends LitElement {
         viewOnly: { type: Boolean },
         viewOnlyLoading: { type: Boolean, state: true },
         viewOnlyFragments: { type: Array, state: true },
+        getDisplayName: { type: Function },
+        renderFragmentStatusCell: { type: Function },
     };
 
     hasMore = new StoreController(this, Store.fragments.list.hasMore);
@@ -43,6 +44,8 @@ class MasSelectItemsTable extends LitElement {
         this.selectedPlaceholdersStoreController = null;
         this.observedSentinel = null;
         this.wasLoading = false;
+        this.getDisplayName = (fragmentData) => fragmentData?.path ?? '';
+        this.renderFragmentStatusCell = () => nothing;
     }
 
     connectedCallback() {
@@ -52,9 +55,9 @@ class MasSelectItemsTable extends LitElement {
         this.dataState.pendingCards = null;
         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()) {
@@ -63,17 +66,18 @@ 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,
                     {
                         signal: this.processAbortController.signal,
                         onItems: (items) => {
                             this.viewOnlyFragments = items;
                         },
+                        getDisplayName: this.getDisplayName,
                     },
                 ).finally(() => {
                     this.viewOnlyLoading = false;
@@ -83,16 +87,18 @@ class MasSelectItemsTable extends LitElement {
             if (this.type === TABLE_TYPE.PLACEHOLDERS) {
                 this.dataSubscription = loadAllPlaceholders();
             } else {
-                this.dataSubscription = loadAllFragments(this.type, this.repository, this.dataState);
+                this.dataSubscription = loadAllFragments(this.type, this.repository, this.dataState, {
+                    getDisplayName: this.getDisplayName,
+                });
             }
         }
         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}`],
         ]);
     }
 
@@ -169,11 +175,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() {
@@ -233,7 +239,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() {
@@ -246,6 +252,8 @@ class MasSelectItemsTable extends LitElement {
                         html`<mas-collapsible-table-row
                             .topLevelCard=${fragment}
                             .viewOnly=${this.viewOnly}
+                            .getDisplayName=${this.getDisplayName}
+                            .renderFragmentStatusCell=${this.renderFragmentStatusCell}
                         ></mas-collapsible-table-row>`,
                 )}`;
             case TABLE_TYPE.COLLECTIONS:
@@ -271,7 +279,7 @@ class MasSelectItemsTable extends LitElement {
                                 : nothing}
                             <sp-table-cell> ${fragment.title || '-'} </sp-table-cell>
                             <sp-table-cell>${fragment.studioPath}</sp-table-cell>
-                            ${renderFragmentStatusCell(fragment.status)}
+                            ${this.renderFragmentStatusCell(fragment.status)}
                         </sp-table-row>`,
                 )}`;
             case TABLE_TYPE.PLACEHOLDERS:
@@ -297,7 +305,7 @@ class MasSelectItemsTable extends LitElement {
                             <sp-table-cell>
                                 ${fragment.value?.length > 100 ? `${fragment.value.slice(0, 100)}...` : fragment.value || '-'}
                             </sp-table-cell>
-                            ${renderFragmentStatusCell(fragment.status)}
+                            ${this.renderFragmentStatusCell(fragment.status)}
                         </sp-table-row>`,
                 )}`;
 

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,