apostrophe 4.15.2 → 4.16.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 4.16.0 (2025-05-14)
+
+### Adds
+
+* Uses new `widgetOperations` to add the `adjustImage` operation to the image widget.
+* Adds a server validation before adding a widget to an area. Introduces a new POST route `@apostrophecms/area/validate-widget`.
+* The new `widgetOperations` cascade config property can be used to display custom operations for widgets. An `if` condition can be used to test properties of the widget before displaying an operation.
+
+### Changes
+
+* Enable widget live preview by default.
+
+### Fixes
+
+* Fixes `range` field type default value not being set properly.
+* Fixes autocomplete and search sorting and as a consequence, fixes potential duplicates during pagination.
+* Fixes all eslint warnings.
+* When pasting a widget from the clipboard, the correct widget type is always offered on the "Add Content" menu.
+* Widget live preview is now attempting to auto-position the Widget Editor modal only if no explicit widget configuration (`options.origin`) is provided.
+* `required` is now implemented on the server side as well for `relationship` fields. It behaves like `min: 1`. It was always implemented on the front end. However, note that a relationship can still become empty if the related document is archived or deleted.
+* Image widgets, and others with a placeholder when empty, now restore their placeholder view when canceling the widget editor in live preview mode.
+* Fixes `z-index` of widget controls, going above the controls add button.
+
+### Changes
+
+* Updates the default fields for the `getMangageApiProjection()` to include a more sensible base configuration and adds a `true` option to return the minimal default values.
+
 ## 4.15.2 (2025-04-28)
 
 ### Security
@@ -33,6 +60,7 @@
 
 ### Fixes
 
+* Adds missing notifications and error handling in media manager and save notification for auto-published pieces.
 * Update `uploadfs` to `1.24.3`.
 * Fixes an edge case where reordering a page in the Page Manager might affect another locale.
 * Fixes chrome bug when pages manager checkboxes need a double click when coming from the rich text editor (because some text is selected).

package/defaults.js

@@ -31,8 +31,8 @@ module.exports = {
     '@apostrophecms/oembed': {},
     '@apostrophecms/pager': {},
     '@apostrophecms/any-doc-type': {},
-    // global comes first so it can register a doc type manager and clean things up before
-    // pages claims any orphan page types
+    // global comes first so it can register a doc type manager and clean
+    // things up before pages claims any orphan page types
     '@apostrophecms/global': {},
     '@apostrophecms/polymorphic-type': {},
     '@apostrophecms/page': {},
@@ -43,7 +43,6 @@ module.exports = {
     '@apostrophecms/area': {},
     '@apostrophecms/rich-text-widget': {},
     '@apostrophecms/html-widget': {},
-    '@apostrophecms/image-widget': {},
     '@apostrophecms/color-field': {},
     '@apostrophecms/oembed-field': {},
     '@apostrophecms/video-widget': {},
@@ -52,6 +51,7 @@ module.exports = {
     '@apostrophecms/settings': {},
     '@apostrophecms/image': {},
     '@apostrophecms/image-tag': {},
+    '@apostrophecms/image-widget': {},
     '@apostrophecms/file': {},
     '@apostrophecms/file-tag': {},
     '@apostrophecms/soft-redirect': {},

package/index.js

@@ -44,24 +44,25 @@ let defaults = require('./defaults.js');
 //
 // `openTelemetryProvider`
 //
-// If set, Apostrophe will register it as a global OpenTelemetry tracer provider.
-// The expected value is an object, an instance of TracerProvider.
-// If the Node SDK is used in the application instead of manual configuration,
-// the provider instance is only available as a
-// private property: `sdkInstance._tracerProvider`. An issue can be opened
-// to discuss the exposure of a public getter with the OpenTelemetry developers.
+// If set, Apostrophe will register it as a global OpenTelemetry tracer
+// provider. The expected value is an object, an instance of TracerProvider. If
+// the Node SDK is used in the application instead of manual configuration, the
+// provider instance is only available as a private property:
+// `sdkInstance._tracerProvider`. An issue can be opened to discuss the exposure
+// of a public getter with the OpenTelemetry developers.
 //
 // `beforeExit`
 //
 // If set, Apostrophe will invoke it (await) before invoking process.exit.
-// `beforeExit` may be an async function, will be awaited, and takes no arguments.
+// `beforeExit` may be an async function, will be awaited, and takes no
+// arguments.
 //
 // `pnpm`
 // A boolean to force on or off the pnpm related build routines. If not set,
 // an automated check will be performed to determine if pnpm is in use. We offer
 // an option, because automated check is not 100% reliable. Monorepo tools are
-// often hiding package management specifics (lock files, node_module structure, etc.)
-// in a centralized store.
+// often hiding package management specifics (lock files, node_module
+// structure, etc.) in a centralized store.
 //
 // ## Awaiting the Apostrophe function
 //
@@ -147,7 +148,8 @@ module.exports = async function(options) {
         return null;
       });
     } else {
-      // continue as a worker operation, the pid should be recorded by the auto instrumentation
+      // continue as a worker operation, the pid should be recorded
+      // by the auto instrumentation
       spanName += ':worker';
       console.log(`Cluster worker ${process.pid} started`);
     }
@@ -248,8 +250,9 @@ async function apostrophe(options, telemetry, rootSpan) {
       }
     };
 
-    // Signals to various (build related) places that we are running a pnpm installation.
-    // The relevant option, if set, has a higher precedence over the automated check.
+    // Signals to various (build related) places that we are running a pnpm
+    // installation. The relevant option, if set, has a higher precedence over
+    // the automated check.
     self.isPnpm = options.pnpm ??
       fs.existsSync(path.join(self.npmRootDir, 'pnpm-lock.yaml'));
 
@@ -320,8 +323,8 @@ async function apostrophe(options, telemetry, rootSpan) {
     self.apos.schema.registerAllSchemas();
     await self.apos.lock.withLock('@apostrophecms/migration:migrate', async () => {
       await self.apos.migration.migrate(self.argv);
-      // Inserts the global doc in the default locale if it does not exist; same for other
-      // singleton piece types registered by other modules
+      // Inserts the global doc in the default locale if it does not exist;
+      // same for other singleton piece types registered by other modules
       for (const apostropheModule of Object.values(self.modules)) {
         if (self.instanceOf(apostropheModule, '@apostrophecms/piece-type') && apostropheModule.options.singletonAuto) {
           await apostropheModule.insertIfMissing();
@@ -329,8 +332,8 @@ async function apostrophe(options, telemetry, rootSpan) {
       }
       await self.apos.page.implementParkAllInDefaultLocale();
       await self.apos.doc.replicate(); // emits beforeReplicate and afterReplicate events
-      // Replicate will have created the parked pages across locales if needed, but we may
-      // still need to reset parked properties
+      // Replicate will have created the parked pages across locales if needed,
+      // but we may still need to reset parked properties
       await self.apos.page.implementParkAllInOtherLocales();
     });
     await self.emit('ready'); // formerly afterInit
@@ -625,8 +628,9 @@ async function apostrophe(options, telemetry, rootSpan) {
       if (!target) {
         continue;
       }
-      // Add all the modules that want to be before this one to the target's beforeSelf.
-      // Do this recursively for every module from the beforeSelf array that has own `beforeSelf` members.
+      // Add all the modules that want to be before this one to the target's
+      // beforeSelf. Do this recursively for every module from the beforeSelf
+      // array that has own `beforeSelf` members.
       addBeforeSelfRecursive(name, m.beforeSelf, target.beforeSelf);
     }
 
@@ -670,7 +674,8 @@ async function apostrophe(options, telemetry, rootSpan) {
   function modulesToBeInstantiated() {
     return Object.keys(self.options.modules).filter(name => {
       const improvement = self.synth.isImprovement(name);
-      return !(self.options.modules[name] && (improvement || self.options.modules[name].instantiate === false));
+      return !(self.options.modules[name] &&
+        (improvement || self.options.modules[name].instantiate === false));
     });
   }
 
@@ -712,7 +717,11 @@ async function apostrophe(options, telemetry, rootSpan) {
             return;
           }
           const submodule = await self.root.import(path.resolve(self.localModules, name, 'index.js'));
-          if (submodule && submodule.options && submodule.options.ignoreUnusedFolderWarning) {
+          if (
+            submodule &&
+            submodule.options &&
+            submodule.options.ignoreUnusedFolderWarning
+          ) {
             return;
           }
         } catch (e) {
@@ -777,14 +786,22 @@ async function apostrophe(options, telemetry, rootSpan) {
       if (apostropheModule.options.extends && ((typeof apostropheModule.options.extends) === 'string')) {
         lint(`The module ${name} contains an "extends" option. This is probably a\nmistake. In Apostrophe "extend" is used to extend other modules.`);
       }
-      if (apostropheModule.options.singletonWarningIfNot && (name !== apostropheModule.options.singletonWarningIfNot)) {
+      if (
+        apostropheModule.options.singletonWarningIfNot &&
+        (name !== apostropheModule.options.singletonWarningIfNot)
+      ) {
         lint(`The module ${name} extends ${apostropheModule.options.singletonWarningIfNot}, which is normally\na singleton (Apostrophe creates only one instance of it). Two competing\ninstances will lead to problems. If you are adding project-level code to it,\njust use modules/${apostropheModule.options.singletonWarningIfNot}/index.js and do not use "extend".\nIf you are improving it via an npm module, use "improve" rather than "extend".\nIf neither situation applies you should probably just make a new module that does\nnot extend anything.\n\nIf you are sure you know what you are doing, you can set the\nsingletonWarningIfNot: false option for this module.`);
       }
       if (name.match(/-widget$/) && (!extending(apostropheModule)) && (!apostropheModule.options.ignoreNoExtendWarning)) {
         lint(`The module ${name} does not extend anything.\n\nA -widget module usually extends @apostrophecms/widget-type or another widget type.\nOr possibly you forgot to npm install something.\n\nIf you are sure you are doing the right thing, set the\nignoreNoExtendWarning option to true for this module.`);
       } else if (name.match(/-page$/) && (name !== '@apostrophecms/page') && (!extending(apostropheModule)) && (!apostropheModule.options.ignoreNoExtendWarning)) {
         lint(`The module ${name} does not extend anything.\n\nA -page module usually extends @apostrophecms/page-type or\n@apostrophecms/piece-page-type or another page type.\nOr possibly you forgot to npm install something.\n\nIf you are sure you are doing the right thing, set the\nignoreNoExtendWarning option to true for this module.`);
-      } else if ((!extending(apostropheModule)) && (!hasCode(name)) && (!isBundle(name)) && (!apostropheModule.options.ignoreNoCodeWarning)) {
+      } else if (
+        !extending(apostropheModule) &&
+        !hasCode(name) &&
+        !isBundle(name) &&
+        !apostropheModule.options.ignoreNoCodeWarning
+      ) {
         lint(`The module ${name} does not extend anything and does not have any code.\n\nThis usually means that you:\n\n1. Forgot to "extend" another module\n2. Configured a module that comes from npm without npm installing it\n3. Simply haven't written your "index.js" yet\n\nIf you really want a module with no code, set the ignoreNoCodeWarning option\nto true for this module.`);
       }
     }

package/lib/check-if-conditions.js

@@ -9,15 +9,25 @@ export default function checkIfConditions(doc, conditions) {
       return checkAndConditions(doc, value);
     }
 
-    const isNotEqualCondition = typeof value === 'object' &&
-          !Array.isArray(value) &&
-          value !== null &&
-          Object.hasOwn(value, '$ne');
-
-    if (isNotEqualCondition) {
-      return getNestedPropValue(doc, key) !== value.$ne;
+    if (
+      typeof value === 'object' &&
+      !Array.isArray(value) &&
+      value !== null
+    ) {
+      if (Object.hasOwn(value, '$ne')) {
+        return getNestedPropValue(doc, key) !== value.$ne;
+      } else if (Object.hasOwn(value, '$exists')) {
+        // Per MongoDB documentation, $exists should treat null and undefined the same.
+        // == null and != null are documented to match or reject null, undefined
+        // and nothing else.
+        const actual = getNestedPropValue(doc, key);
+        if (value.$exists) {
+          return actual != null;
+        } else {
+          return actual == null;
+        }
+      }
     }
-
     return getNestedPropValue(doc, key) === value;
   });
 }
@@ -37,7 +47,15 @@ function checkAndConditions(doc, conditions) {
 function getNestedPropValue(doc, key) {
   if (key.includes('.')) {
     const keys = key.split('.');
-    return keys.reduce((acc, cur) => acc[cur], doc);
+    // Do not crash if a key is not found — mongodb doesn't, which is useful because
+    // you can test for things like _image.0 where both might not exist yet
+    return keys.reduce((acc, cur) => {
+      if ((typeof acc !== 'object') || (acc == null)) {
+        return undefined;
+      } else {
+        return acc[cur];
+      }
+    }, doc);
   }
 
   return doc[key];

package/lib/moog-require.js

@@ -59,16 +59,18 @@ module.exports = async function(options) {
 
     if (options.nestedModuleSubdirs) {
       if (!self._indexes) {
-        // Fetching a list of index.js files on the first call and then searching it each time for
-        // one that refers to the right type name shaves as much as 60 seconds off the startup
-        // time in a large project, compared to using the glob cache feature
+        // Fetching a list of index.js files on the first call and then
+        // searching it each time for one that refers to the right type name
+        // shaves as much as 60 seconds off the startup time in a large project,
+        // compared to using the glob cache feature
         self._indexes = glob(self.options.localModules + '/**/index.js', { follow: true });
       }
       const matches = self._indexes.filter(function(index) {
-        // Double-check that we're not confusing "@apostrophecms/asset" with "asset" by
-        // making sure "type" is not preceded by an npm namespace folder. If type is itself namespaced
-        // this never comes up (because npm namespaces don't nest). The risk is that a legitimate
-        // project level module that happens to end with the same name as a namespaced module
+        // Double-check that we're not confusing "@apostrophecms/asset" with
+        // "asset" by making sure "type" is not preceded by an npm namespace
+        // folder. If type is itself namespaced this never comes up (because npm
+        // namespaces don't nest). The risk is that a legitimate project level
+        // module that happens to end with the same name as a namespaced module
         // will be rejected as a duplicate when nestedModuleSubdirs is present
         return index.endsWith('/' + type + '/index.js') && !index.match(new RegExp(`/@[^/]+/${regExpQuote(type)}/index\\.js$`));
       });
@@ -78,7 +80,11 @@ module.exports = async function(options) {
       projectLevelPath = matches[0] ? path.normalize(matches[0]) : projectLevelPath;
     }
     if (fs.existsSync(projectLevelPath)) {
-      const { default: defaultProjectLevelDefinition } = await importFresh(resolveFrom(path.dirname(self.root.filename), projectLevelPath));
+      const {
+        default: defaultProjectLevelDefinition
+      } = await importFresh(
+        resolveFrom(path.dirname(self.root.filename), projectLevelPath)
+      );
       projectLevelDefinition = defaultProjectLevelDefinition;
       if (Object.keys(projectLevelDefinition).length === 0) {
         /* eslint-disable-next-line no-console */
@@ -159,15 +165,15 @@ module.exports = async function(options) {
     if (npmDefinition) {
       result = await superDefine(type, npmDefinition);
       if (npmDefinition.improve) {
-        // Restore the name of the improving module as otherwise our asset chains have
-        // multiple references to my-foo which is ambiguous
+        // Restore the name of the improving module as otherwise our asset
+        // chains have multiple references to my-foo which is ambiguous
         result.__meta.name = originalType;
       }
     }
     result = await superDefine(type, definition);
     if (npmDefinition && npmDefinition.improve) {
-      // Restore the name of the improving module as otherwise our asset chains have
-      // multiple references to my-foo which is ambiguous
+      // Restore the name of the improving module as otherwise our asset chains
+      // have multiple references to my-foo which is ambiguous
       result.__meta.name = self.originalToMy(originalType);
     }
     // Mark "my" modules as such
@@ -256,7 +262,8 @@ module.exports = async function(options) {
         return [];
       }
 
-      // Ternary is required because glob expects at least 2 entries when using curly braces
+      // Ternary is required because glob expects at least 2 entries
+      // when using curly braces
       const pattern = workspaces.length === 1 ? workspaces[0] : `{${workspaces.join(',')}}`;
       const packagePath = path.resolve(folder, pattern, 'package.json');
       const workspacePackages = glob(packagePath, { follow: true });
@@ -275,9 +282,9 @@ module.exports = async function(options) {
 
   self.applyImprovementsBeforeProjectLevel = () => {
     for (const [ name, definition ] of Object.entries(self.definitions)) {
-      // At this stage the complete definition of a type is a linked list of `extend`
-      // properties starting from what should be project level, unless there
-      // are improvements. Shuffle project level to be the first in the
+      // At this stage the complete definition of a type is a linked list of
+      // `extend` properties starting from what should be project level, unless
+      // there are improvements. Shuffle project level to be the first in the
       // linked list
       if (definition.__meta.name !== self.originalToMy(name)) {
         let candidate = definition;

package/lib/moog.js

@@ -131,7 +131,8 @@ module.exports = function(options) {
     // Now we want to start from the base class and go down
     steps.reverse();
 
-    // Actually just the apos object merging in, app.js merging was handled elsewhere
+    // Actually just the apos object merging in, app.js merging was handled
+    // elsewhere
     Object.assign(options, _options || {});
 
     self.options.sections = self.options.sections || [];
@@ -186,7 +187,8 @@ module.exports = function(options) {
         if (!that[`${cascade}Groups`]) {
           that[`${cascade}Groups`] = {};
         }
-        // You can have access to options within a function, if you choose to provide one
+        // You can have access to options within a function, if you choose to
+        // provide one
         const properties = ((typeof step[cascade]) === 'function') ? step[cascade](that, options) : step[cascade];
         if (properties) {
           const valid = [ 'add', 'remove', 'order', 'group' ];
@@ -235,7 +237,8 @@ module.exports = function(options) {
           if (properties.group) {
             const groups = klona(that[`${cascade}Groups`]);
             for (const value of Object.values(properties.group)) {
-              // Handle `operations` alias of `fields`. Only one of them should be used.
+              // Handle `operations` alias of `fields`. Only one of them should
+              // be used.
               if (Array.isArray(value.operations)) {
                 value.fields = value.operations;
               }
@@ -279,9 +282,9 @@ module.exports = function(options) {
       }
     }
 
-    // This needs to be after the options and cascades are compiled so it can manipulate
-    // the result, yet we've already reordered the steps with the superclass first,
-    // so walk them backwards to implement beforeSuperClass
+    // This needs to be after the options and cascades are compiled so it can
+    // manipulate the result, yet we've already reordered the steps with the
+    // superclass first, so walk them backwards to implement beforeSuperClass
     for (let i = (steps.length - 1); (i >= 0); i--) {
       const step = steps[i];
       if (step.beforeSuperClass) {
@@ -293,14 +296,15 @@ module.exports = function(options) {
     // in other sections
     build(null, 'methods');
 
-    // Unparsed sections, like `queries` and `extendQueries`. These are just captured
-    // in an object with the props from each level so the module can do something with
-    // them at runtime. Do it before init so that init can carry out queries
+    // Unparsed sections, like `queries` and `extendQueries`. These are just
+    // captured in an object with the props from each level so the module can do
+    // something with them at runtime. Do it before init so that init can carry
+    // out queries
     (self.options.unparsedSections || []).forEach(section => capture(section));
 
-    // init is called BEFORE routes etc. are called so that the section functions
-    // for those things can benefit from methods, properties, etc. set by init
-    // when deciding what to return
+    // init is called BEFORE routes etc. are called so that the section
+    // functions for those things can benefit from methods, properties, etc. set
+    // by init when deciding what to return
     for (const step of steps) {
       if (step.init) {
         await step.init(that, options);
@@ -312,9 +316,9 @@ module.exports = function(options) {
 
     // afterAllSections is called last and has access to self.routes, etc.
     // For project-level developers this is usually not important, but
-    // the core does call certain methods in the @apostrophecms/modules base class
-    // implementation of afterAllSections to actually add the routes and handlers
-    // to the system
+    // the core does call certain methods in the @apostrophecms/modules base
+    // class implementation of afterAllSections to actually add the routes and
+    // handlers to the system
     for (const step of steps) {
       if (step.afterAllSections) {
         await step.afterAllSections(that, options);
@@ -419,9 +423,10 @@ module.exports = function(options) {
 
     self.options.unparsedSections = self.options.unparsedSections || [];
 
-    // Unparsed sections, like `queries` and `extendQueries`. These are just captured
-    // in an object with the props from each level so the module can do something with
-    // them at runtime. Do it before init so that init can carry out queries
+    // Unparsed sections, like `queries` and `extendQueries`. These are just
+    // captured in an object with the props from each level so the module can do
+    // something with them at runtime. Do it before init so that init can carry
+    // out queries
     (self.options.unparsedSections || []).forEach(section => capture(section));
 
     return that;

package/lib/opentelemetry.js

@@ -32,8 +32,8 @@ module.exports = function (options = {}) {
   }
 
   /**
-   * Start and return a new span. Optionally provide a parent span or allow the parent
-   * span to be auto-detected.
+   * Start and return a new span. Optionally provide a parent span or allow the
+   * parent span to be auto-detected.
    * Use this when the current code block does the tracing and it doesn't expect
    * more tracing to happen down the line.
    *
@@ -82,7 +82,8 @@ module.exports = function (options = {}) {
    * @returns {api.Span|any} the return value of the handler or the newly created span
    * @example
    * // Activate span, return some value
-   * const value = await self.apos.telemetry.startActiveSpan(spanName, async (span) => {
+   * const value = await self.apos.telemetry.startActiveSpan(spanName, async
+   * (span) => {
    *   // Use the span, do work, end span, return any value
    *   span.end();
    *   return value;

package/modules/@apostrophecms/admin-bar/index.js

@@ -1,8 +1,9 @@
-// The admin bar module implements Apostrophe's admin bar at the top of the screen. Any module
-// can register a button (or more than one) for this bar by calling the `add` method of this
-// module. Buttons can also be grouped into dropdown menus and restricted to those with
-// particular permissions. [@apostrophecms/piece-type](../@apostrophecms/piece-type/index.html) automatically
-// takes advantage of this module.
+// The admin bar module implements Apostrophe's admin bar at the top of the
+// screen. Any module can register a button (or more than one) for this bar by
+// calling the `add` method of this module. Buttons can also be grouped into
+// dropdown menus and restricted to those with particular permissions.
+// [@apostrophecms/piece-type](../@apostrophecms/piece-type/index.html)
+// automatically takes advantage of this module.
 
 const _ = require('lodash');
 const { createId } = require('@paralleldrive/cuid2');
@@ -190,14 +191,15 @@ module.exports = {
       // wish to implement a custom admin bar item not powered by
       // the `AposModals` app.
       //
-      // If `options.contextUtility` is true, the item will be displayed in a tray of
-      // icons just to the right of the login and/or locales menu. If `options.toggle` is also true,
-      // then the button will have the `active` state until toggled
-      // off again. `options.tooltip.deactivate` and `options.tooltip.activate` may be
-      // provided to offer a different tooltip during the active versus inactive states,
-      // respectively. Otherwise, `options.tooltip` is used. The regular label is also present
-      // for screenreaders only. The contextUtility functionality is typically used for
-      // experiences that temporarily change the current editing context.
+      // If `options.contextUtility` is true, the item will be displayed in a
+      // tray of icons just to the right of the login and/or locales menu. If
+      // `options.toggle` is also true, then the button will have the `active`
+      // state until toggled off again. `options.tooltip.deactivate` and
+      // `options.tooltip.activate` may be provided to offer a different tooltip
+      // during the active versus inactive states, respectively. Otherwise,
+      // `options.tooltip` is used. The regular label is also present for
+      // screenreaders only. The contextUtility functionality is typically used
+      // for experiences that temporarily change the current editing context.
       //
       // If `options.user` is true, the menu bar item will appear
       // on the user's personal dropdown, where "Log Out" appears. Such items
@@ -256,7 +258,10 @@ module.exports = {
           }
           // Only build a menu if there are at least two items after filtering
           // for permissions
-          if (item.menuLeader === item.name && (items[i + 1] && items[i + 1].menuLeader === item.name)) {
+          if (
+            item.menuLeader === item.name &&
+            items[i + 1]?.menuLeader === item.name
+          ) {
             menu = {
               menu: true,
               items: [ item ],
@@ -313,7 +318,8 @@ module.exports = {
       groupItems() {
         // Implement the groups and addGroups options. Mark the grouped items
         // with a `menuLeader` property.
-        const groups = self.options.groups || self.groups.concat(self.options.addGroups || []);
+        const groups = self.options.groups ||
+          self.groups.concat(self.options.addGroups || []);
 
         groups.forEach(function (group) {
           if (!group.label) {
@@ -418,7 +424,8 @@ module.exports = {
               screens: {}
             },
           // Base API URL appropriate to the context document
-          contextBar: context && self.apos.doc.getManager(context.type).options.contextBar,
+          contextBar: context && self.apos.doc
+            .getManager(context.type).options.contextBar,
           showAdminBar: self.getShowAdminBar(req),
           // Simplifies frontend logic
           contextId: context && context._id,

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

@@ -13,7 +13,7 @@
         class="apos-admin-bar__btn"
         :modifiers="['no-motion']"
         role="menuitem"
-        @click="emitEvent('@apostrophecms/page:manager')"
+        @click="emitEvent({ action: '@apostrophecms/page:manager' })"
       />
     </li>
     <li
@@ -42,7 +42,7 @@
         :modifiers="['no-motion']"
         class="apos-admin-bar__btn"
         role="menuitem"
-        @click="emitEvent(item.action)"
+        @click="emitEvent(item)"
       />
     </li>
     <li
@@ -85,7 +85,7 @@
           :label="item.label"
           :action="item.action"
           :state="trayItemState[item.name] ? [ 'active' ] : []"
-          @click="emitEvent(item.action)"
+          @click="emitEvent(item)"
         />
       </template>
     </li>
@@ -122,10 +122,9 @@ export default {
     }
   },
   async mounted() {
-    apos.bus.$on('admin-menu-click', this.onAdminMenuClick);
-
     const itemsSet = klona(this.items);
-    this.menuItems = itemsSet.filter(item => !(item.options && item.options.contextUtility))
+    this.menuItems = itemsSet
+      .filter(item => !(item.options && item.options.contextUtility))
       .map(item => {
         if (item.items) {
           item.items.forEach(subitem => {
@@ -148,12 +147,25 @@ export default {
     });
   },
   methods: {
-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
+    emitEvent(item) {
+      apos.bus.$emit('admin-menu-click', item.action);
+
+      // 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]
+        };
+      }
     },
     trayItemTooltip(item) {
       if (item.options.toggle) {
-        if (this.trayItemState[item.name] && item.options.tooltip && item.options.tooltip.deactivate) {
+        if (
+          this.trayItemState[item.name] &&
+          item.options.tooltip?.deactivate
+        ) {
           return {
             content: item.options.tooltip.deactivate,
             placement: 'bottom'
@@ -169,17 +181,6 @@ export default {
       } else {
         return item.options.tooltip;
       }
-    },
-    // Maintain a knowledge of which tray item toggles are active
-    onAdminMenuClick(e) {
-      const name = e.itemName || e;
-      const trayItem = this.trayItems.find(item => item.name === name);
-      if (trayItem && trayItem.options.toggle) {
-        this.trayItemState = {
-          ...this.trayItemState,
-          [name]: !this.trayItemState[name]
-        };
-      }
     }
   }
 };

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

@@ -43,8 +43,8 @@ export default {
     }
   },
   methods: {
-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
+    emitEvent(item) {
+      apos.bus.$emit('admin-menu-click', item.action);
     }
   }
 };