feat: Implements the action bar with core actions. by kozmaadrian · Pull Request #393 · adobe/da-nx

kozmaadrian · 2026-04-27T14:46:47Z

Implements the action bar with core actions: preview, publish, delete, and rename.

Also adds shared components dialog, toast, and progress circle, required for the browse actions.

Test URLs:

https://da.live/browse?nx=ew-browseactions&nxver=2#/exp-workspace/frescopa

aem-code-sync · 2026-04-27T14:46:51Z

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

Re-sync branch

Commits

47bfa3f ✅ (latest)
0131d12 ✅
99f4eb8 ✅
cbdfa52 ✅
1da8c5a ✅
ecf9126 ✅
558e1ac ✅
3d90eeb ✅
750443c ✅
2cd5f8b ✅
9c79f27 ✅
919d9da ✅

hannessolo · 2026-04-28T08:39:55Z

The action buttons in the modal have the wrong font family (maybe the variable isn't set there for some reason?)

hannessolo · 2026-04-28T08:42:00Z

I think we should separate preview and publish as actions. As an edge delivery user, that's what I'm used to. Only having a publish button makes it not clear to me whether it will do preview, publish or preview -> publish both.

hannessolo · 2026-04-28T08:43:17Z

Happy to debate this one, but: Do we really need a confirmation dialog for single-file preview/publish? For multi files it makes sense, but for single file, we don't have a confirmation in sidekick or da so I don't think we need it here.

sharanyavinod · 2026-04-28T08:56:22Z

Currently if the url has a hash or a query param, that is also part of the browse title and breadcrumb. Would be good to sanitize so these stay meaningful.

sharanyavinod · 2026-04-28T09:37:07Z

+    variant: { type: String, attribute: false },
+    autofocusId: { type: String, attribute: false },
+    dismissable: { type: Boolean, attribute: false },
+    onPrimaryAction: { type: Function, attribute: false },


Why do we go for this approach vs firing events as in other blocks? This creates tight coupling between consumer and dialog, when ideally it would be nice that dialog simply fires an event and consumer listens and responds - consistent with how things are working across the repo atm. Dialog doesnt and shouldnt know about what happens after click - it just handles the UI, fires event and forgets, and everything else is the responsibility of the consumer.
As a bonus, this would also help redice the properties ie both the onAction and the actionId

The dialog was refactored, no callbacks are used.

sharanyavinod · 2026-04-28T09:46:57Z

@kozmaadrian All new blocks introduced have the callback pattern as in React vs event driven pattern across the repo. Why this deviation from pattern?

sharanyavinod · 2026-04-28T11:54:13Z

+
+  _renderShell({ title, body, actions }) {
+    return html`
+      <div


Worth exploring if we can use the native api here instead of custom code completely - it would give ootb support for many of the expected capabilities of a dialog.

+1, this should use dialog with showModal

anfibiacreativa · 2026-05-05T16:11:24Z

+    showRename: { type: Boolean },
+    showDeploy: { type: Boolean },
+    disabled: { type: Boolean, attribute: false },
+    onDismiss: { type: Function, attribute: false },


onDismiss/onAction are callback props. since we use CustomEvent, why don't we fire events instead? same for onComplete in the action dialogs

I can changed that, however at one point, the agreement was to consistently use events in shared components, while minimizing their use in more tightly coupled scenarios.

Update: AFAIU, reducing the number of events can be addressed in a future refactoring if needed. Therefore, I updated the code to rely exclusively on events.

anfibiacreativa · 2026-05-05T16:15:07Z

+    } else {
+      const url = r.json?.live?.url;
+      if (url) openAemUrlWithNoCache(url);
+    }


openAemUrlWithNoCache opens tabs inside the deploy fn. why don't we return the URLs and let the consumer decide? (in the function in line 8)

Done as suggested.

anfibiacreativa · 2026-05-05T16:17:23Z

+  static properties = {
+    title: { type: String, attribute: false },
+    body: { type: Object, attribute: false },
+    primaryActionLabel: { type: String, attribute: false },


I see the same issue here with function props instead of events
https://lit.dev/docs/components/events/

The dialog has been refactored.

anfibiacreativa · 2026-05-05T16:20:58Z

+        <div
+          class="panel"
+          role="dialog"
+          aria-modal="true"


we have role="dialog" aria-modal="true" but no focus trap. tab will escape to background.

Switched to element.

anfibiacreativa · 2026-05-05T16:22:10Z

+
+  _onLayerClose = () => {
+    this.dispatchEvent(
+      new CustomEvent('nx-dialog-close', { bubbles: true, composed: true }),


when the dialog closes, focus needs to return to whatever triggered it.

anfibiacreativa · 2026-05-05T16:29:08Z

+.bar-lead {
+  display: flex;
+  align-items: center;
+  gap: 6px;


magic number. please let's move to var

anfibiacreativa · 2026-05-05T16:29:41Z

+  --bar-lead-w: 141px;
+
+  width: var(--bar-lead-w);
+  min-width: var(--bar-lead-w);


width, min-width, max-width all the same var. flex: 0 0 var(--bar-lead-w) does the job.

anfibiacreativa · 2026-05-05T16:29:57Z

+  width: 100%;
+  min-height: var(--s2-spacing-500);
+  height: var(--s2-spacing-500);
+  padding-left: 10px;


magic number

The magic number seemed more readable since there’s no --s2-* variable defined for 6px.

anfibiacreativa · 2026-05-05T16:30:50Z

+}
+
+.browse-action-busy {
+  position: fixed;


isn't this identical in delete.css, deploy.css, rename.css. why don't we extract it?

Refactored.

anfibiacreativa · 2026-05-05T16:31:21Z

+  & .title {
+    margin: 0;
+    padding: 0;
+    font-size: 18px;


magic number

anfibiacreativa · 2026-05-05T16:35:29Z

I would really love for us to establish the no single letter name var and the boolean is/has prefix, but I won't block a PR for this. however there are many instances of those potential changes, and one of handleEventName instead of onEventName that I really stylistically prefer

sharanyavinod · 2026-05-07T08:32:55Z

+
+const styles = await loadStyle(import.meta.url);
+
+class NxBrowseDeployRunner extends LitElement {


I'm not sure I understand why we need this component? Any reason why this logic is separate and not part of browse? For me this is overkill and feels antipattern.

I split it out to match the other actions and keep browse simpler. It also leaves room if we add multi-item preview/publish later.

I get the need to keep things aligned, but consistency for the sake of consistency isnt helpful either. Delete and rename are valid as components because they have actual interactive state and user interaction - this has neither. In such a case, I feel a Lit component isnt justified. Completely fair to revisit and adapt when we have a more concrete use case, but not atm.

sharanyavinod · 2026-05-07T08:40:54Z

+
+const styles = await loadStyle(import.meta.url);
+
+class NxOverlay extends LitElement {


Since this is only used in browse I would move this out of shared for now. Without finalized mocks and given how minimal it is, I think its premature to keep it in shared - ideally it neednt be a component at all and could just be done inline or we move it into browse.

Fair! I’ll move the overlay into browse so it’s not in shared anymore. We can inline it later if we want it even simpler.

Adrian Kozma added 2 commits April 27, 2026 16:40

feat: Adds action bar.

919d9da

feat: Adds shared blocks.

9c79f27

kozmaadrian requested review from hannessolo and sharanyavinod April 27, 2026 14:47

sharanyavinod reviewed Apr 28, 2026

View reviewed changes

Adrian Kozma added 2 commits April 29, 2026 10:09

Merge branch 'ew' into ew-browseactions

2cd5f8b

fix: Fix the font family for the action buttons.

750443c

anfibiacreativa requested changes May 5, 2026

View reviewed changes

fix: Merge changs from ew and resolve conflicts.

3d90eeb

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 09:48 Inactive

fix: Improve the UI and split shared components.

558e1ac

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 09:53 Inactive

fix: Make the shared components more generic.

ecf9126

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 11:53 Inactive

fix: Additional fixes.

1da8c5a

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 12:40 Inactive

fix: Sanitize page url.

cbdfa52

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 12:46 Inactive

fix: Remove redundant code.

99f4eb8

aem-code-sync Bot temporarily deployed to ew-browseactions May 6, 2026 13:17 Inactive

fix: Replace callbacks with events, fix code style.

0131d12

sharanyavinod reviewed May 7, 2026

View reviewed changes

fix: Make overlay as a local component.

47bfa3f

aem-code-sync Bot deployed to ew-browseactions May 7, 2026 11:51 View deployment


		const styles = await loadStyle(import.meta.url);

		class NxBrowseDeployRunner extends LitElement {


		const styles = await loadStyle(import.meta.url);

		class NxOverlay extends LitElement {

Conversation

kozmaadrian commented Apr 27, 2026

Uh oh!

aem-code-sync Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hannessolo commented Apr 28, 2026

Uh oh!

hannessolo commented Apr 28, 2026

Uh oh!

hannessolo commented Apr 28, 2026

Uh oh!

sharanyavinod commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sharanyavinod commented Apr 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

anfibiacreativa commented May 5, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

aem-code-sync Bot commented Apr 27, 2026 •

edited

Loading

sharanyavinod commented Apr 28, 2026 •

edited

Loading