PRO-8256: allow createWidgetOperations to be filtered based on a list of widget types

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## UNRELEASED
+
+### Adds
+
+* Custom operations registered with `addCreateWidgetOperation` can now specify an `ifTypesIntersect` property containing an array of widget type names. If the area in question allows at least one, the operation is offered.
+
 ## 4.21.0 (2025-09-03)
 
 ### Adds

modules/@apostrophecms/area/index.js

@@ -191,6 +191,7 @@ module.exports = {
       // interface regardless of whether `options.widgets` or `options.groups`
       // was used.
       getWidgets(options) {
+        // Keep in sync with client-side implementation
         let widgets = options.widgets || {};
 
         if (options.groups) {

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

@@ -95,6 +95,7 @@
 
 <script>
 import { createId } from '@paralleldrive/cuid2';
+import filterCreateWidgetOperations from '../lib/filter-create-widget-operations.js';
 
 export default {
   name: 'AposAreaContextualMenu',
@@ -201,7 +202,8 @@
         return [];
       }
       const menu = [ ...this.contextMenuOptions.menu ];
-      for (const createWidgetOperation of this.moduleOptions.createWidgetOperations) {
+      const createWidgetOperations = filterCreateWidgetOperations(this.moduleOptions, this.options);
+      for (const createWidgetOperation of createWidgetOperations) {
         menu.unshift({
           type: 'operation',
           ...createWidgetOperation
@@ -329,6 +331,7 @@
         this.$refs[name][0].querySelector('button').focus();
       }
     }
+
   }
 };
 </script>

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

@@ -100,6 +100,8 @@
 </template>
 
 <script>
+import filterCreateWidgetOperations from '../lib/filter-create-widget-operations.js';
+
 export default {
   name: 'AposAreaExpandedMenu',
   props: {
@@ -177,7 +179,7 @@ export default {
       return count ? +count > 1 && +count < 4 : true;
     },
     getCreateWidgetOperationsGroups() {
-      const operations = this.moduleOptions.createWidgetOperations;
+      const operations = filterCreateWidgetOperations(this.moduleOptions, this.options);
       if (operations.length === 0) {
         return [];
       }

modules/@apostrophecms/area/ui/apos/lib/filter-create-widget-operations.js

@@ -0,0 +1,16 @@
+// Requires the module options and an area field's .options property
+
+import getWidgets from './get-widgets.js';
+
+export default function filterCreateWidgetOperations(moduleOptions, areaOptions) {
+  const widgets = getWidgets(areaOptions);
+  return moduleOptions.createWidgetOperations.filter(createWidgetOperation => {
+    if (createWidgetOperation.ifTypesIntersect) {
+      const types = Object.keys(widgets);
+      if (!types.some(type => createWidgetOperation.ifTypesIntersect.includes(type))) {
+        return false;
+      }
+    }
+    return true;
+  });
+}

modules/@apostrophecms/area/ui/apos/lib/get-widgets.js

@@ -0,0 +1,14 @@
+// Requires an area field's .options property
+
+export default function getWidgets(options) {
+  let widgets = options.widgets || {};
+  if (options.groups) {
+    for (const group of Object.keys(options.groups)) {
+      widgets = {
+        ...widgets,
+        ...options.groups[group].widgets
+      };
+    }
+  }
+  return widgets;
+}

modules/@apostrophecms/widget-type/index.js

@@ -123,29 +123,6 @@ module.exports = {
     origin: null,
     preview: true
   },
-  handlers(self) {
-    return {
-      'apostrophe:modulesRegistered': {
-        composeWidgetOperations() {
-          self.widgetOperations = Object.entries(self.widgetOperations)
-            .map(([ name, operation ]) => {
-              if (!operation.label || !operation.modal) {
-                throw self.apos.error('invalid', 'widgetOperations requires label and modal properties.');
-              }
-
-              if (operation.secondaryLevel !== true && !operation.icon) {
-                throw self.apos.error('invalid', 'widgetOperations requires the icon property at primary level.');
-              }
-
-              return {
-                name,
-                ...operation
-              };
-            });
-        }
-      }
-    };
-  },
   init(self) {
     self.isExplicitOrigin = self.options.origin !== null;
     self.options.origin = self.options.origin || 'right';
@@ -170,6 +147,7 @@ module.exports = {
     self.label = self.options.label;
 
     self.composeSchema();
+    self.composeWidgetOperations();
 
     self.apos.area.setWidgetManager(self.name, self);
 
@@ -187,6 +165,7 @@ module.exports = {
   },
   methods(self) {
     return {
+
       composeSchema() {
         self.schema = self.apos.schema.compose({
           addFields: self.apos.schema.fieldsToArray(`Module ${self.__meta.name}`, self.fields),
@@ -203,6 +182,24 @@ module.exports = {
         });
       },
 
+      composeWidgetOperations() {
+        self.widgetOperations = Object.entries(self.widgetOperations)
+          .map(([ name, operation ]) => {
+            if (!operation.label || !operation.modal) {
+              throw self.apos.error('invalid', 'widgetOperations requires label and modal properties.');
+            }
+
+            if (operation.secondaryLevel !== true && !operation.icon) {
+              throw self.apos.error('invalid', 'widgetOperations requires the icon property at primary level.');
+            }
+
+            return {
+              name,
+              ...operation
+            };
+          });
+      },
+
       // Returns markup for the widget. Invoked via `{% widget ... %}` in the
       // `@apostrophecms/area` module as it iterates over widgets in
       // an area. The default behavior is to render the template for the widget,