MWPW-163214: M@S Studio Splash Screen

[Axelcureno]

Adds splash screen experience to M@S Studio.

Resolve MWPW-163214

Test URLs:

• Before: https://main--mas--adobecom.hlx.page/studio.html
• After: https://MWPW-163214--mas--adobecom.hlx.page/studio.html

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 6d57c4a ✅ (latest)
• 60a66d4 ✅
• 44fbfa9 ✅
• 38efa01 ✅
• 8785768 ✅
• ee6bd94 ✅
• 3011993 ✅
• 40f440e ✅
• d324e82 ✅
• 4b7dc5d ✅
• 167faf7 ✅
• 167e499 ✅
• 46ae022 ✅
• 73e2bd7 ✅
• ba5589b ✅
• ec8a157 ✅
• 24b520c ✅
• f143b52 ✅
• f2734ed ✅
• fb7ae82 ✅
• 4e4c356 ✅
• 20afb8a ❌
• 15e759b ❌
• f495ed3 ❌
• 1fe7d39 ❌
• a5f153b ❌
• 13ef33a ❌
• 3916838 ❌
• 3791ca8 ❌
• 5315a33 ❌

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/studio.html
🖥️	/studio.html

[yesil]

why the initial value is get from store here and later at the line 31, the value in the store is not updated?

[st-angelo-adobe]

In the controller I simply initialize the local state (this.value). At line 31, the value in the story is already updated, updateValue reacts to that, updating the local state, and asking for a rerender.

[yesil]

why this need to be a web component?
why deeplink.js not sufficient?

[st-angelo-adobe]

Hm, actually looking over it, it doesn't have to be a component. It can just be a function.
Deeplink does what store subscription does, so no point to have both and make things confusing.

In a simple function we can subscribe to the search and filters stores, and to the page hash (hashchange), and make them update each other (no components needed for this).

I would prefer to do this separately, after merge if that's ok.

[yesil]

To update the state, we can either update hash, react to hash changes and update the store with these values
or update the store and the hash but not react to hash changes, after the first initialization.
both are possible with deeplink.js.

[st-angelo-adobe]

We can have something like:

And make sure they don't enter an infinite update loop.

Maybe we would even want to merge the search and filters stores, to be honest.

My point is, we don't really need the deeplink.js anymore, which is supposed to be used in connectedCallback and has a disposer (I mean ok, I understand we don't HAVE to use it in a component if we don't want to), when we can just call a function once that subscribes to stuff, and that's it. The state is outside the components now.

[3ch023]

agree it could be a function, but yeah, could be done in next PR

[3ch023]

dupe

[st-angelo-adobe]

It's not, I'm subscribing to 2 different stores there 😄 One that specifies whether we're in selection mode, one that has the actual selection (an array of fragment ids)
To be honest, it might be better to set selection at fragment level (and I noticed on the main branch that there was something like that), but again, this is something we can come back to.

[npeltier]

that confusion is talkative: we should may be find another name that is less confusing for selecting

[yesil]

This is specific to merch cards but common to any fragment, hence it was put in editor-panel.js.
Please move any form logic that is not specific to merch-card, back to editor-panel.js

[yesil]

The action buttons should not be in merch-card-editor, please bring back editor-panel. :-)

[yesil]

I like this 👍

[npeltier]

Hi @st-angelo-adobe

i tested your change and thanks a lot for this and all the efforts! However i personally think we need another round of polish before getting it in. I understand you developed from quite a wild initial state and this is painful, but i do think your PR should be at a stage where we can - quickly - then iterate to something good. Typically i don't like current file structure, but i really don't consider blocking. I'll try to illustrate what i dislike and seems structural to me with following fictional scenario: let's imagine mas studio toolbar has no search, but already in another place stuff that do search. so related store exists.
As a UI developer, i should probably only know about some hook to central state manager about 'search' that i can update with my UI element, sending there keys & values. Ideally because we know it's lit, we could even have some lit hooks that takes fields name & directly update the stores.

here i have to add to declare a controller
search = new StoreController(this, Store.search);

that i use in

        if (this.loading.value || !this.search.value.query) return nothing;
        return html`<span id="search-results-label"
            >Search results for "${this.search.value.query}"</span
        >`;
    }

that i don't use in

                placeholder="Search"
                @change="${extractValue(this.updateQuery)}"
                @submit="${preventDefault(extractValue(this.updateQuery))}"
                value=${this.search.value.query}
                size="m"
            ></sp-search>

that is using

        Store.search.update((prev) => ({ ...prev, query: value }));
    }

and to me that's the problem. I guess i'm fine declaring a controller, but:

• i don't understand why we have "value" and "query" to handle. to me, there is a superflous level of structure here,
• i don't understand why i do have to declare a change event handler for something we do know how it works

here i would see something like

        return html`<span id="search-results-label"
            >Search results for "${this.search.value}"</span
        >`;
    }```

and just

                placeholder="Search"
                @change="${this.search.changeHandler}"
                @submit="${preventDefault(extractValue(this.updateQuery))}"
                value=${this.search.value.query}
                size="m"
            ></sp-search>

[npeltier]

having written it, i guess we could make those changes afterward. Will update to comment

will address post PR merge

[Roycethan]

@yesil @Axelcureno here are feedbacks w.r.t ticket AC's and issues:

1. Status( Edits/Publish) are not updated at https://mwpw-163214--mas--adobecom.hlx.page/studio.html at first instance when user makes edits/publish in their content space and click back on "Home" sidenav option - for me i needed a browser refresh to see the recent update

2. 'Support' menu item should be at the bottom with Slack icon that takes users to '#merch-at-scale' Slack channel when clicked
   Current:

Expectation:

3)Welcome message - i believe should display user's name fetched from IMS profile - currnetly its hardcoded

4. I was not able to copy to new card/delete after selecting it (disabled select options) , am i lack any permissions or something else ?

cc @npeltier @3ch023