make widget operations dynamic to add custom ones #4897

ETLaurent · 2025-03-31T16:03:55Z

~~TODO: check that other modules have not been broken with the menuItemClicked changed to pass an item object and not just item.action~~ ✅

Related to https://github.com/apostrophecms/testbed/pull/343

Summary

Implement the new apos.area.addWidgetOperation method to:
- Add widget operations at first level
- Add widget operations at secondary level (via 3-dots menu)
Add wrapper to the @apostrophecms/widget-type module to register operations only for widgets that match the type of the module where the wrapper is invoked.
Handle permission in apos.area.getBrowserData
Dynamically loop through widget operations
Update widget operation icons
Display secondary widget operations, by re-using AposContextMenu.vue
- Adapt AposContextMenu.vue to make it emit the whole clicked item, not only its action property, in order to access the modal property.
- Adapt this change everywhere (action -> item.action)
~~Lot's of eslint max-len warnings fixed (marked as "linter" in the PR comments)~~ (done in Fix eslint warnings #4923)

What are the specific steps to test this change?

- Primary level

    apos.area.addWidgetOperation({
      name: 'openSettings',
      modal: 'AposSettingsManager',
      label: 'Create Section',
      icon: 'group-icon'
    });

- Secondary level

    apos.area.addWidgetOperation({
      name: 'createSections',
      modal: 'AposSettingsManager',
      label: 'Create Section',
      icon: 'group-icon',
      secondaryLevel: true
    });

- Specific widget type

    // in `modules/@apostrophecms/image-widget/index.js`
    self.addWidgetOperation({
      name: 'adjustImage',
      modal: 'AposImageRelationshipEditor',
      label: 'Adjust Image',
      icon: 'image-edit-outline',
      permission: {
        action: 'edit',
        type: '@apostrophecms/image'
      }
    });

image	rich text

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-03-31T16:03:58Z

PRO-7247 Non-core modules must be able to register new context operations on widgets

ETLaurent · 2025-04-03T15:19:17Z

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

+      }
+      if (modal) {
+        apos.modal.execute(modal, {
+          modelValue: this.modelValue


we'll just add additional data if needed

ETLaurent · 2025-04-08T15:07:30Z

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

+      // Maintain a knowledge of which tray item toggles are active
+      const trayItem = this.trayItems.find(trayItem => trayItem.name === item.action);
+
+      if (trayItem && trayItem.options.toggle) {
+        this.trayItemState = {
+          ...this.trayItemState,
+          [item.action]: !this.trayItemState[item.action]
+        };
+      }


block moved from the late onAdminMenuClick (unnecessary? right?) event listener

…247-widget-operations

ETLaurent · 2025-04-17T15:58:36Z

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

+          // TODO: make sure the update method from
+          // modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue
+          // does the job and does not mess with the widget type and _id:
+          this.$emit('update', result.widget);


ValJed

Some suggestions / questions.

Also one thing is unclear to me:
When we create the widget operation backend side there is no action.
Does it refer to the name of the operation? If it's the case why not keeping the same name for both?
There is an action inside the permission object but I don't think it's related to what is called item.action on the frontend.

ValJed · 2025-04-21T08:41:00Z

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

-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
+    emitEvent(item) {
+      apos.bus.$emit('admin-menu-click', item.action);


So item-clicked emits the entire item, but admin-menu-click emits only the action name?
Shouldn't we make it more consistent and emit the item all the time, maybe it's a lot more work?

We could, but in the end, the component that listens to admin-menu-click event will need to adapt, and so on.
Since the scope of this PR has already been way over, I prefer to limit the changes to the minimum.

ValJed · 2025-04-21T08:44:41Z

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

@@ -138,11 +138,11 @@ export default {
    togglePublishDraftMode() {
      if (this.canTogglePublishDraftMode) {
        const mode = this.draftMode === 'draft' ? 'published' : 'draft';
-        this.switchDraftMode(mode);
+        this.$emit('switch-draft-mode', mode);


Suggested change

this.$emit('switch-draft-mode', mode);

const action = this.draftMode === 'draft' ? 'published' : 'draft';

this.switchDraftMode({ action });

ValJed · 2025-04-21T08:46:46Z

modules/@apostrophecms/area/index.js

+
+        self.widgetOperations = self.widgetOperations.filter(
+          ({ name }) => name !== operation.name
+        );


Is this to avoid duplicates? I think that throwing an error would be easier to debug and fix for users?

Yes, this replaces an already-registered operation with the same name.
I took the same logic that's for customOperations:

apostrophe/modules/@apostrophecms/doc/index.js

Line 1538 in 62cdeaa

self.contextOperations = [

ValJed · 2025-04-21T08:49:36Z

modules/@apostrophecms/area/index.js

+        const widgetOperations = self.widgetOperations.filter(({ permission }) => {
+          if (permission?.action && permission?.type) {
+            return self.apos.permission.can(req, permission.action, permission.type, permission.mode || 'draft');
+          }
+          return true;
+        });


Suggested change

const widgetOperations = self.widgetOperations.filter(({ permission }) => {

if (permission?.action && permission?.type) {

return self.apos.permission.can(req, permission.action, permission.type, permission.mode || 'draft');

}

return true;

});

const widgetOperations = self.widgetOperations.filter(({ permission = {} }) => {

if (permission.action && permission.type) {

return self.apos.permission.can(req, permission.action, permission.type, permission.mode || 'draft');

}

return true;

});

I like my version better 🍃

ValJed · 2025-04-21T08:53:53Z

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

@@ -1,75 +1,36 @@
 <template>
  <div class="apos-area-modify-controls">
    <AposButtonGroup
+      v-if="!foreign"


AposWidgetControls.vue is never rendered if foreign is falsy,
You should remove the prop foreign from the component AposWidgetControls it serves no purpose.

See:

<AposWidgetControls v-if="!foreign" // Never rendered if foreign is falsy :first="i === 0" :last="i === next.length - 1" :options="{ contextual: isContextual }" :foreign="foreign" // Useless prop, can be removed :disabled="disabled" :max-reached="maxReached" :tabbable="isFocused" :model-value="widget" :area-field="field" @up="$emit('up', i);" @remove="$emit('remove', i);" @edit="$emit('edit', i);" @cut="$emit('cut', i);" @copy="$emit('copy', i);" @clone="$emit('clone', i);" @down="$emit('down', i);" @update="$emit('update')" />

ValJed · 2025-04-21T09:06:35Z

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

+        .filter(operation => !operation.secondaryLevel),
+      widgetSecondaryOperations: filteredOperations
+        .filter(operation => operation.secondaryLevel)
+    };


Optional but logic could be in a method

ValJed · 2025-04-21T09:14:05Z

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

+  },
+  methods: {
+    filterByWidgetType(operation) {
+      return !operation.type || operation.type === this.modelValue.type;
    },


This method is never used, you could use it in data

It was used.
But now it's been moved to the shared method, see 5873267

Erratum.
It wasn't used 👍

ValJed · 2025-04-21T09:15:14Z

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

+          widget: this.modelValue,
+          field: this.areaField
+        });
+        if (result.widget) {


Result can be undefined:

if (result?.widget) {

well spotted

ValJed · 2025-04-21T09:15:53Z

modules/@apostrophecms/i18n/i18n/de.json

@@ -81,7 +81,6 @@
  "chooseDocType": "{{ type }} auswählen",
  "clear": "Löschen",
  "clearSelection": "Auswahl löschen",
-  "clone": "Duplizieren",


We don't have clone anymore?

No, this is called "Duplicate..." now

ETLaurent · 2025-04-21T12:59:33Z

Also one thing is unclear to me:
When we create the widget operation backend side there is no action.
Does it refer to the name of the operation? If it's the case why not keeping the same name for both?
There is an action inside the permission object but I don't think it's related to what is called item.action on the frontend.

I am not sure I understand, but I can say that I started with not setting the name property, because I thought that modal would suffice (ie: that it was unique and served as the ID, like name).

But actually, we'd like to be able to add operations that have the same modal, with different props.
Hence the name.

Regarding action, I don't see where custom widgets operations would use it as it is expected to be a known string such as cut, clone and so on. Our custom operation would open modals, in my mind.

Indeed, permission's action is related to our permission system, as we usually provide an 'action' (create, edit publish etc) for a specific 'type':

self.apos.permission.can(req, permission.action, permission.type)

I hope this answers your question.

ValJed

LGTM 👍🏼

ETLaurent force-pushed the pro-7247-widget-operations branch from 51c8b02 to dbce534 Compare March 31, 2025 16:05

ETLaurent mentioned this pull request Apr 1, 2025

bump @mdi/js to its latest version apostrophecms/vue-material-design-icons#3

Closed

10 tasks

ETLaurent force-pushed the pro-7247-widget-operations branch from 6001c86 to 02912d7 Compare April 1, 2025 13:41

ETLaurent commented Apr 3, 2025

View reviewed changes

Etienne Laurent added 22 commits April 8, 2025 15:59

dynamic widget operations

f4b3058

use computed to render widgets controls

3844e0c

wip

2c807f3

fix max-len eslint warnings

98057e7

display primary custom operation

d64159e

display secondary controls

9c461d5

pass widget model value to modal, fix event

d4d0592

niughtmare

43ab477

wip

d9b6c97

adapt

4439236

rename

0113abe

revert mdi

66c74ab

remove logs

5e8ac05

yeah

d9b0ec0

separator

1986cb0

clean secondary controls

4075b2a

disable secondary items

f922415

use ternary

86df98d

display separator based on class

f805286

remove log

2e972b9

smartly display separator

f7dbb73

wip

64232c1

ETLaurent force-pushed the pro-7247-widget-operations branch from 278bd9e to 64232c1 Compare April 8, 2025 15:03

ETLaurent commented Apr 8, 2025

View reviewed changes

check permission

97616e3

ETLaurent dismissed boutell’s stale review via dfdac3f April 16, 2025 13:53

Etienne Laurent added 2 commits April 16, 2025 17:21

icon required at primary level

b6089b5

set data-apos-test-context-menu-item to item.modal

f477534

ETLaurent marked this pull request as draft April 17, 2025 09:16

Etienne Laurent added 3 commits April 17, 2025 11:30

add widget operation via widget module

9bce775

filter thigs

125e1de

changelog

ba29ff0

ETLaurent requested a review from ValJed April 17, 2025 15:25

Etienne Laurent added 4 commits April 17, 2025 17:25

Merge branch 'main' of github.com:apostrophecms/apostrophe into pro-7…

408a265

…247-widget-operations

changelog

e00da1d

handle modal result

1bf4d4f

Merge branch 'main' of github.com:apostrophecms/apostrophe into pro-7…

601a607

…247-widget-operations

ETLaurent marked this pull request as ready for review April 17, 2025 15:57

ETLaurent commented Apr 17, 2025

View reviewed changes

ValJed requested changes Apr 21, 2025

View reviewed changes

Etienne Laurent added 4 commits April 21, 2025 14:44

consistency

4d578fc

improve widget operations filtering

5873267

result?.widget

20e8780

remove useless foreign prop

8486ced

ETLaurent requested review from ValJed and boutell April 21, 2025 12:53

remove useless foreign prop everywhere

472902d

ETLaurent changed the title ~~dynamic widget operations~~ dynamic custom widget operations Apr 21, 2025

ETLaurent changed the title ~~dynamic custom widget operations~~ make widget operations dynamic to add custom ones Apr 21, 2025

ValJed approved these changes Apr 21, 2025

View reviewed changes

boutell approved these changes Apr 21, 2025

View reviewed changes

stuartromanek approved these changes Apr 21, 2025

View reviewed changes

ETLaurent merged commit 55b282e into main Apr 21, 2025
9 checks passed

ETLaurent deleted the pro-7247-widget-operations branch April 21, 2025 14:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

make widget operations dynamic to add custom ones #4897

make widget operations dynamic to add custom ones #4897

ETLaurent commented Mar 31, 2025 •

edited

Loading

linear bot commented Mar 31, 2025

ETLaurent Apr 3, 2025

ETLaurent Apr 8, 2025 •

edited

Loading

ETLaurent Apr 17, 2025

ValJed left a comment •

edited

Loading

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ValJed Apr 21, 2025

ETLaurent Apr 21, 2025

ETLaurent commented Apr 21, 2025 •

edited

Loading

ValJed left a comment

	this.$emit('switch-draft-mode', mode);
	const action = this.draftMode === 'draft' ? 'published' : 'draft';
	this.switchDraftMode({ action });

make widget operations dynamic to add custom ones #4897

make widget operations dynamic to add custom ones #4897

Conversation

ETLaurent commented Mar 31, 2025 • edited Loading

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:

linear bot commented Mar 31, 2025

Choose a reason for hiding this comment

ETLaurent Apr 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ValJed left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ETLaurent commented Apr 21, 2025 • edited Loading

ValJed left a comment

Choose a reason for hiding this comment

ETLaurent commented Mar 31, 2025 •

edited

Loading

ETLaurent Apr 8, 2025 •

edited

Loading

ValJed left a comment •

edited

Loading

ETLaurent commented Apr 21, 2025 •

edited

Loading