MWPW-192158: Shared item loading layer for bulk publish

nala/studio/translations/translations.page.js

@@ -5,7 +5,7 @@ export default class TranslationsPage {
         const translationHost = page.locator('mas-translation');
         this.loadingIndicator = translationHost.locator('.loading-container sp-progress-circle');
 
-        this.translationTable = translationHost.locator('sp-table.translation-table');
+        this.translationTable = translationHost.locator('sp-table.item-table');
         this.tableHeaders = {
             translationProject: translationHost.locator('sp-table-head-cell:has-text("Translation Project")'),
             lastUpdatedBy: translationHost.locator('sp-table-head-cell:has-text("Last updated by")'),
@@ -14,9 +14,9 @@ export default class TranslationsPage {
         };
         this.emptyState = translationHost.locator('.translation-empty-state');
 
-        this.tableRows = translationHost.locator('sp-table.translation-table sp-table-row');
+        this.tableRows = translationHost.locator('sp-table.item-table sp-table-row');
 
-        this.firstRow = translationHost.locator('sp-table.translation-table sp-table-row').first();
+        this.firstRow = translationHost.locator('sp-table.item-table sp-table-row').first();
         this.firstRowTitleCell = this.firstRow.locator('sp-table-cell').nth(0);
         this.firstRowActionMenu = this.firstRow.locator('sp-action-menu');
 

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/table-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/table-styles.css.js';
 
 export const styles = [
     tableHeaderBaseStyles,