moves widget operations to backend #5111

ValJed · 2025-10-20T13:08:17Z

Summary

Pretty simple solution, no big refacto. Still moves all widget operations config backend (with specific frontend native logic).
Removes the need for skipOperations.
A bit easier to read since all operations come from the same config (less vue code).

What are the specific steps to test this change?

For example:

Run the website and log in as an admin

Open a piece manager modal and select several pieces

Click the "Archive" button on the top left of the manager and confirm that it should proceed

Check that all pieces have been archived properly

What kind of change does this PR introduce?

(Check at least one)

Make sure the PR fulfills these requirements:

It includes a) the existing issue ID being resolved, b) a convincing reason for adding this feature, or c) a clear description of the bug it resolves
The changelog is updated
Related documentation has been updated
Related tests have been updated

If adding a new feature without an already open issue, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

linear · 2025-10-20T13:08:20Z

PRO-8371 Widget operations should not be hardcoded

…-widget-operations

…eft)

…es skipEdit computed

ValJed · 2025-10-21T08:46:27Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

      />

      <AposButton
+        v-if="widgetRemoveControl"


Still standalone, but might be removed (no reason to do that but) by users.

ValJed · 2025-10-21T08:46:45Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue


 import checkIfConditions from 'apostrophe/lib/universal/check-if-conditions.mjs';

+const standaloneWidgetOperation = [ 'remove' ];


Not needed in data here, hard coded stuff.

ValJed · 2025-10-21T08:47:22Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

+          disabled,
          tooltip: {
-            content: operation.label,
+            content: !disabled && (operation.tooltip || operation.label),


A bit weird to have label and tooltip for primary operations? But same config as secondary indeed. We have different label and tooltips for some primary operations which doesn't make sense (label not used).

ValJed · 2025-10-21T08:48:12Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

-      return controls.filter(control => (
-        !this.widgetSkipControlsMap.get(control.action) &&
-          !this.widgetSkipControlsMap.get(control.name)
-      ));


Not needed anymore

ValJed · 2025-10-21T08:49:07Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

-        !this.widgetSkipControlsMap.get(control.action) &&
-          !this.widgetSkipControlsMap.get(control.name)
-      ));
+      return controls.concat(this.widgetCustomSecondaryOperations.map(renderOperation));


use the same cb than for native, allow to disable custom secondary operations too.

ValJed · 2025-10-21T08:49:48Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

-        },
-        action: 'remove'
+        }
      };


kept standalone, still takes its config from backend.

ValJed · 2025-10-21T08:50:24Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

+      return this.getOperations({
+        secondaryLevel: true,
+        native: false
+      });


We make difference between native and custom for secondary to show native first and to display a separator between both.

ValJed · 2025-10-21T08:50:54Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

+          (secondaryLevel && !operation.secondaryLevel) ||
+          (!secondaryLevel && operation.secondaryLevel)
+        ) {
+          return false;


Separate filter logic to make it readable.
Also make the check first to avoid going inside checkIfConditions when operation is removed anyway.`

myovchev · 2025-10-21T13:55:08Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

  },
  methods: {
-    getOperations({ secondaryLevel }) {
+    getOperations({ secondaryLevel, native }) {


The native approach should be enforced also in modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue.
It would be tricky to not break stuff though. The context:

currently if there is an action prop, it will be emitted on component level, otherwise the name becomes the action and is emitted via the message bus.

I'm not sure how this fits the native part, as we are having a non native action operations. I'm open for any solutions.

native is not really needed, it's more here because for widget operations we allowed only operations with a modal property. native operations have no modal properties..
But if breadcrumbs operations allow operations to emit action through the event bus it should be the same for widget operations no?

Yes, it makes sense to me. Not currently needed, but consistent.

myovchev

Look at my comment - the breadcrumb operations need a look as well - they attempt to let the core actions work, but also allow emitting on component level vs message bus.

…-widget-operations

…al name

… an object)

…ablet breakpoint

…disable tooltip on entire switch

ValJed · 2025-10-29T13:08:49Z

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBreakpointPreviewMode.vue

  emits: [ 'switch-breakpoint-preview-mode', 'reset-breakpoint-preview-mode' ],
  data() {
    return {
-      mode: null,


get mode from store. It only contains mode and setMode for now. allows to get / watch / compute this value from other components.. Could be nice to move the entire logic in the store later, I kept it very simple for now.

ValJed · 2025-10-29T13:12:49Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

+      }
+
+      if (operation.action) {
+        apos.bus.$emit(operation.action, payload);


Not sure to understand but:

AposAreaLayoutEditor listens to both events directly (from bus):

apos.bus.$on('apos-switch-layout-mode', this.switchLayoutMode); apos.bus.$on('apos-layout-col-delete', this.onRemoveLayoutColumn);

Also reworked WidgetOperations to use nativeAction.

ValJed · 2025-10-29T13:13:38Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbSwitch.vue

-      </label>
-    </div>
+      <span class="apos-breadcrumb-switch__input-text">{{ $t(choice.label) }}</span>
+    </label>


I mainly added classes, removed a div and handle disable states.

ValJed · 2025-10-29T14:58:34Z

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

      'hoveredNonForeignWidget',
      'emphasizedWidgets'
    ]),
+    ...mapState(useBreakpointPreviewStore, { breakpointPreviewMode: 'mode' }),


Rename mode in breakpointPreviewMode for clarity.

ValJed · 2025-10-29T14:59:33Z

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

+        layoutWidgetGrid.tablet?.breakpoint,
+        layoutWidgetGrid.mobile?.breakpoint
+      );
+      return screenWidth <= tinyScreenStart;


as asked we will disable the button as soon as the screen is smaller than tablet or mobile (bigger one)

ValJed · 2025-10-29T15:01:29Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

          tooltip: operation.tooltip || null,
-          teleportContent: this.teleportModals
+          teleportContent: this.teleportModals,
+          disabled


Has been properly tested for switch only, will create a ticket.

ValJed · 2025-10-29T15:08:03Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbSwitch.vue

  computed: {
+    isDisabled() {
+      return this.disabled || this.enhancedChoices.some((choice) => choice.disabled);
+    },


I limited the breadcrumb switched to 2 choices only (server crashes otherwise with error). So we can use @stuartromanek style (everything is grayed if one choice is disabled or the entire switch is)

boutell

Just one minor language thing

boutell · 2025-10-29T15:14:47Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbSwitch.vue

+    },
+    disabled: {
+      type: Boolean,
+      default: false


Not so far anyway right? We disable one of the choices but not the active one (edit content).

boutell · 2025-10-29T15:17:07Z

modules/@apostrophecms/layout-column-widget/index.js

+    operationsInBreadcrumb: true,
+    breakpoints: {
+      tablet: 1024,
+      mobile: 414


Change back

boutell · 2025-10-29T15:17:32Z

modules/@apostrophecms/layout-column-widget/index.js

                type: 'boolean',
                label: 'apostrophe:layoutTabletShow',
-                help: `Less than ${options?.breakpoints?.tablet || 900}px`,
+                help: `Less than ${options?.breakpoints?.tablet || 1024}px`,


I don't think this default fallback is possible, right?

Maybe if users override the config somehow?
Better would be forcing options to be present maybe.

boutell · 2025-10-29T15:17:36Z

modules/@apostrophecms/layout-column-widget/index.js

                type: 'boolean',
                label: 'apostrophe:layoutMobileShow',
-                help: `Less than ${options?.breakpoints?.mobile || 600}px`,
+                help: `Less than ${options?.breakpoints?.mobile || 414}px`,


I don't think this default fallback is possible, right?

Maybe if users override the config somehow?

ValJed · 2025-10-29T15:09:53Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbSwitch.vue

+        return;
+      }
+
+      this.$emit('update', null);


This watch just remove the selected choice if it becomes disabled (eg. edit columns becomes disables it will switch to content automatically)

ValJed · 2025-10-29T15:10:22Z

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbSwitch.vue

+  cursor: pointer;
+  letter-spacing: 0.5px;
+  border-radius: 4px;
 }


This css is jsut about using classes and adding @stuartromanek style when disabled.

ValJed · 2025-10-29T15:10:59Z

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

    }
  },
-  emits: [ 'remove', 'edit', 'cut', 'copy', 'clone', 'up', 'down', 'update' ],
+  emits: [ 'update', 'operation' ],


follows @myovchev logic, we emit operation with the right name and not the event itself.

ValJed · 2025-10-29T15:53:13Z

@myovchev Fixes the native operations for breadcrumb too, move is working well.

…-widget-operations

moves widget operations to backend

27ac104

ValJed marked this pull request as draft October 20, 2025 13:08

ValJed self-assigned this Oct 20, 2025

ValJed added 7 commits October 20, 2025 17:04

removes logs

bcf1d35

remove frontent operations, adds disabledIf

eb81ead

Merge remote-tracking branch 'origin/main' into pro-8371-no-hardcoded…

8550c74

…-widget-operations

uses native operations from backend in widget controls (only remove l…

fa449c2

…eft)

removes skipOperations

584bb78

uses cascades to remove edit widget operation in layout-widget, updat…

51e544e

…es skipEdit computed

adds remove to backend config, keep it standalone in frontend

c1f79ee

ValJed force-pushed the pro-8371-no-hardcoded-widget-operations branch from 03443c5 to c1f79ee Compare October 21, 2025 08:43

ValJed requested review from boutell and myovchev October 21, 2025 08:44

ValJed commented Oct 21, 2025

View reviewed changes

fixes widgets tests

3cb3adf

ValJed marked this pull request as ready for review October 21, 2025 13:19

myovchev reviewed Oct 21, 2025

View reviewed changes

myovchev requested changes Oct 21, 2025

View reviewed changes

ValJed added 3 commits October 21, 2025 18:57

Merge remote-tracking branch 'origin/main' into pro-8371-no-hardcoded…

e97bf08

…-widget-operations

emit operation from widget control with name instead of each individu…

03d4907

…al name

disable and tooltip props for breadcrumb switch

e0bc9ba

ValJed removed the request for review from boutell October 23, 2025 07:23

ValJed added 7 commits October 23, 2025 15:37

rework controls / breadcrumb

586c04b

breadcrumb switch must have a value even if no def (radio input)

2ce5804

in area editor get index from payload object (more generic way to use…

574eebc

… an object)

uses nativeAction

87e19ea

action for switch layout

9f6c413

listen to bus events directly in layout editor

6a342b8

disabledIdData for layout switch

ba84108

ValJed added 10 commits October 29, 2025 13:03

if switch choice becomes disabled switch to another one or unset it

f2892d7

styles when entire breadcrumb switch is disabled

725455b

adds style for disabled breadcrumb switch choice

82b0211

global disabled for breadcrumb switch

8f482c3

compare current mobile preview screen with layout-widget mobile and t…

2075a0c

…ablet breakpoint

clean

8467677

be sure table and/or mobile breakpoints are ok

23c70e0

share operation disable and tooltip in lib file, support disable and …

37473c2

…disable tooltip on entire switch

supports only two choices in breadcrumb operations

9ef1f70

passes tooltip for breadcrumb menu

5fe9de0

ValJed commented Oct 29, 2025

View reviewed changes

ValJed requested review from boutell and myovchev October 29, 2025 15:03

ValJed commented Oct 29, 2025

View reviewed changes

fixes widget operations native before separator

a047ca4

boutell requested changes Oct 29, 2025

View reviewed changes

removes unsused import

8f0ed51

ValJed commented Oct 29, 2025

View reviewed changes

ValJed added 3 commits October 29, 2025 16:24

gets back old tablet and mobile defaults

e3e1a8e

fix move breadcrumb operation

4c42f35

fixes widgets tests

406da1e

ValJed requested a review from boutell October 29, 2025 15:54

ValJed added 2 commits October 29, 2025 20:50

Merge remote-tracking branch 'origin/main' into pro-8371-no-hardcoded…

161a2e9

…-widget-operations

adds changelog

b35f3a2

boutell approved these changes Oct 29, 2025

View reviewed changes

boutell requested review from myovchev and removed request for myovchev October 29, 2025 20:06

boutell merged commit e4ee8b2 into main Oct 29, 2025
9 checks passed

boutell deleted the pro-8371-no-hardcoded-widget-operations branch October 29, 2025 20:08


		import checkIfConditions from 'apostrophe/lib/universal/check-if-conditions.mjs';

		const standaloneWidgetOperation = [ 'remove' ];

moves widget operations to backend #5111

moves widget operations to backend #5111

Uh oh!

Conversation

ValJed commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What are the specific steps to test this change?

What kind of change does this PR introduce?

Make sure the PR fulfills these requirements:

Uh oh!

linear bot commented Oct 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ValJed Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

myovchev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ValJed Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

boutell left a comment

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!

ValJed commented Oct 29, 2025

ValJed commented Oct 20, 2025 •

edited

Loading

ValJed Oct 21, 2025 •

edited

Loading

ValJed Oct 29, 2025 •

edited

Loading