apostrophe 3.31.0 → 3.32.0

package/.eslintrc

@@ -3,6 +3,9 @@
     "apostrophe",
     "plugin:vue/vue3-recommended"
   ],
+  "env": {
+    "mocha": true
+  },
   "globals": {
     "apos": true
   },

package/CHANGELOG.md

@@ -1,10 +1,30 @@
 # Changelog
 
+## 3.32.0 (2022-11-09)
+
+### Adds
+
+* Adds Reset Password feature to the login page. Note that the feature must be enabled and email delivery must be properly configured. See the [documentation](https://v3.docs.apostrophecms.org/reference/modules/login.html) for more details.
+* Allow project-level developer to override bundling decisions by configuring the `@apostrophecms/asset` module. Check the [module documentation](https://v3.docs.apostrophecms.org/reference/modules/asset.html#options) for more information.
+
+### Fixes
+
+* Query builders for regular select fields have always accepted null to mean "do not filter on this property." Now this also works for dynamic select fields.
+* The i18n UI state management now doesn't allow actions while it's busy.
+* Fixed various localization bugs in the text of the "Update" dropdown menu.
+* The `singleton: true` option for piece types now automatically implies `showCreate: false`.
+* Remove browser console warnings by handling Tiptap Editor's breaking changes and duplicated plugins.
+* The editor modal now allocates more space to area fields when possible, resolving common concerns about editing large widgets inside the modal.
+
 ## 3.31.0 (2022-10-27)
 
 ### Adds
 
-* Adds `placeholder: true` and `initialModal: false` features to improve the user experience of adding widgets to the page. Checkout the [Widget Placeholders documentation](https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#adding-placeholder-content-to-widgets) for more detail. 
+* Adds `placeholder: true` and `initialModal: false` features to improve the user experience of adding widgets to the page. Checkout the [Widget Placeholders documentation](https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html#adding-placeholder-content-to-widgets) for more detail.
+
+### Fixes
+
+* When another user is editing the document, the other user's name is now displayed correctly.
 
 ## 3.30.0 (2022-10-12)
 

package/modules/@apostrophecms/asset/index.js

@@ -17,7 +17,8 @@ const {
   fillExtraBundles,
   getBundlesNames,
   writeBundlesImportFiles,
-  findNodeModulesSymlinks
+  findNodeModulesSymlinks,
+  transformRebundledFor
 } = require('./lib/webpack/utils');
 
 module.exports = {
@@ -38,7 +39,10 @@ module.exports = {
     watch: true,
     // Miliseconds to wait between asset sources changes before
     // performing a build.
-    watchDebounceMs: 1000
+    watchDebounceMs: 1000,
+    // Object containing instructions for remapping existing bundles.
+    // See the modulre reference documentation for more information.
+    rebundleModules: undefined
   },
 
   async init(self) {
@@ -51,16 +55,21 @@ module.exports = {
     self.initUploadfs();
 
     const {
-      extensions = {}, extensionOptions = {}, verifiedBundles = {}
+      extensions = {},
+      extensionOptions = {},
+      verifiedBundles = {},
+      rebundleModules = {}
     } = await getWebpackExtensions({
       getMetadata: self.apos.synth.getMetadata,
-      modulesToInstantiate: self.apos.modulesToBeInstantiated()
+      modulesToInstantiate: self.apos.modulesToBeInstantiated(),
+      rebundleModulesConfig: self.options.rebundleModules
     });
 
     self.extraBundles = fillExtraBundles(verifiedBundles);
     self.webpackExtensions = extensions;
     self.webpackExtensionOptions = extensionOptions;
     self.verifiedBundles = verifiedBundles;
+    self.rebundleModules = rebundleModules;
     self.buildWatcherEnable = process.env.APOS_ASSET_WATCH !== '0' && self.options.watch !== false;
     self.buildWatcherDebounceMs = parseInt(self.options.watchDebounceMs || 1000, 10);
     self.buildWatcher = null;
@@ -312,15 +321,27 @@ module.exports = {
             }
 
             if (options.index) {
+              // Gather modules with non-main, catch-all bundles
+              const ignoreModules = self.rebundleModules
+                .filter(entry => !entry.main && !entry.source)
+                .reduce((acc, entry) => ({
+                  ...acc,
+                  [entry.name]: true
+                }), {});
+
               indexJsImports = getImports(source, 'index.js', {
                 invokeApps: true,
                 enumerateImports: true,
                 importSuffix: 'App',
-                requireDefaultExport: true
+                requireDefaultExport: true,
+                mainModuleBundles: getMainModuleBundleFiles('js'),
+                ignoreModules
               });
               indexSassImports = getImports(source, 'index.scss', {
                 importSuffix: 'Stylesheet',
-                enumerateImports: true
+                enumerateImports: true,
+                mainModuleBundles: getMainModuleBundleFiles('scss'),
+                ignoreModules
               });
             }
 
@@ -351,7 +372,7 @@ module.exports = {
                 name,
                 buildDir,
                 mainBundleName: outputFilename.replace('.js', ''),
-                verifiedBundles: self.verifiedBundles,
+                verifiedBundles: getVerifiedBundlesInEffect(),
                 getImportFileOutput,
                 writeImportFile
               });
@@ -437,6 +458,32 @@ module.exports = {
             }));
           }
 
+          function getMainModuleBundleFiles(ext) {
+            return Object.values(self.verifiedBundles)
+              .reduce((acc, entry) => {
+                if (!entry.main) {
+                  return acc;
+                };
+                return [
+                  ...acc,
+                  ...(entry[ext] || [])
+                ];
+              }, []);
+          }
+
+          function getVerifiedBundlesInEffect() {
+            return Object.entries(self.verifiedBundles)
+              .reduce((acc, [ key, entry ]) => {
+                if (entry.main) {
+                  return acc;
+                };
+                return {
+                  ...acc,
+                  [key]: entry
+                };
+              }, {});
+          }
+
           function writeImportFile ({
             importFile,
             prologue,
@@ -625,6 +672,9 @@ module.exports = {
             for (const name of modulesToInstantiate) {
               const metadata = self.apos.synth.getMetadata(name);
               for (const entry of metadata.__meta.chain) {
+                if (options.ignoreModules?.[entry.name]) {
+                  seen[entry.dirname] = true;
+                }
                 if (seen[entry.dirname]) {
                   continue;
                 }
@@ -652,6 +702,10 @@ module.exports = {
               components.reverse();
             }
 
+            if (options.mainModuleBundles) {
+              components.push(...options.mainModuleBundles);
+            }
+
             return getImportFileOutput(components, options);
           }
 
@@ -883,6 +937,10 @@ module.exports = {
   },
   methods(self) {
     return {
+      // Register the library function as method to be used by core modules.
+      // Open the implementation for more dev comments.
+      transformRebundledFor,
+
       async initUploadfs() {
         if (self.options.uploadfs) {
           self.uploadfs = await self.apos.modules['@apostrophecms/uploadfs'].getInstance(self.options.uploadfs);

package/modules/@apostrophecms/asset/lib/webpack/utils.js

@@ -47,16 +47,25 @@ module.exports = {
     }
   },
 
+  // Export for testing
+  formatRebundleConfig,
+  verifyRebundleConfig,
+
+  transformRebundledFor,
+
   async getWebpackExtensions ({
-    getMetadata, modulesToInstantiate
+    getMetadata, modulesToInstantiate, rebundleModulesConfig = {}
   }) {
     const modulesMeta = modulesToInstantiate
       .map((name) => getMetadata(name));
 
+    const rebundleModules = formatRebundleConfig(rebundleModulesConfig);
+
     const {
       extensions, extensionOptions, foundBundles
     } = getModulesWebpackConfigs(
-      modulesMeta
+      modulesMeta,
+      rebundleModules
     );
 
     const verifiedBundles = await verifyBundlesEntryPoints(foundBundles);
@@ -64,26 +73,36 @@ module.exports = {
     return {
       extensions,
       extensionOptions,
-      verifiedBundles
+      verifiedBundles,
+      rebundleModules
     };
   },
 
   fillExtraBundles (verifiedBundles = {}) {
-    return Object.entries(verifiedBundles).reduce((acc, [ bundleName, { js, scss } ]) => {
-      return {
-        js: [
-          ...acc.js,
-          ...(js.length && !acc.js.includes(bundleName)) ? [ bundleName ] : []
-        ],
-        css: [
-          ...acc.css,
-          ...(scss.length && !acc.css.includes(bundleName)) ? [ bundleName ] : []
-        ]
-      };
-    }, {
-      js: [],
-      css: []
-    });
+
+    const res = Object.entries(verifiedBundles).reduce(
+      (acc, [ bundleName, entry ]) => {
+        const {
+          js, scss, main
+        } = entry;
+        if (main) {
+          return acc;
+        }
+        return {
+          js: [
+            ...acc.js,
+            ...(js.length && !acc.js.includes(bundleName)) ? [ bundleName ] : []
+          ],
+          css: [
+            ...acc.css,
+            ...(scss.length && !acc.css.includes(bundleName)) ? [ bundleName ] : []
+          ]
+        };
+      }, {
+        js: [],
+        css: []
+      });
+    return res;
   },
 
   getBundlesNames (bundles, es5 = false) {
@@ -177,13 +196,17 @@ async function findSymlinks(where, sub = '') {
   return result;
 }
 
-function getModulesWebpackConfigs (modulesMeta) {
+function getModulesWebpackConfigs (modulesMeta, rebundleModules) {
   const {
     extensions, extensionOptions, bundles
   } = modulesMeta.reduce((modulesAcc, meta) => {
     const { webpack, __meta } = meta;
 
-    const configs = formatConfigs(__meta.chain, webpack);
+    const configs = formatConfigs(
+      __meta.chain,
+      webpack,
+      rebundleModules
+    );
 
     if (!configs.length) {
       return modulesAcc;
@@ -235,15 +258,57 @@ function getModulesWebpackConfigs (modulesMeta) {
 };
 
 async function verifyBundlesEntryPoints (bundles) {
-  const checkPathsPromises = bundles.map(async ({ bundleName, modulePath }) => {
+  const checkPathsPromises = bundles.map(async ({
+    bundleName, modulePath, bundleRemapping
+  }) => {
     const jsPath = `${modulePath}/ui/src/${bundleName}.js`;
     const scssPath = `${modulePath}/ui/src/${bundleName}.scss`;
+    const jsIndexPath = `${modulePath}/ui/src/index.js`;
+    const scssIndexPath = `${modulePath}/ui/src/index.scss`;
+    let main = false;
+    let withIndex;
 
     const jsFileExists = await fs.pathExists(jsPath);
     const scssFileExists = await fs.pathExists(scssPath);
 
+    for (const remapping of bundleRemapping) {
+      main = remapping.main;
+      // - catch all to "main" or new bundle name,
+      // already verified it's unique for the given module
+      if (!remapping.source) {
+        // Bundle name for "main" "doesn't matter - it will be ignored and never built,
+        // we want to achieve a free from colision name. What matters is main = true.
+        // Target is 'main' by convention: `main.bundleName`
+        bundleName = `${remapping.target}.${bundleName}`;
+        if (!remapping.main) {
+          // move "ui/src/index.*" to the bundle,
+          // verify existence later, better performance
+          withIndex = {
+            jsPath: jsIndexPath,
+            scssPath: scssIndexPath
+          };
+          bundleName = remapping.target;
+        }
+
+        break;
+      }
+      // - not a catch-all statement from this point on
+      // - "main" for a concrete bunbdle
+      if (remapping.main && remapping.source === bundleName) {
+        bundleName = `${remapping.target}.${bundleName}`;
+        break;
+      }
+      // - not "main", concrete bundle remapping
+      if (remapping.source === bundleName) {
+        bundleName = remapping.target;
+        break;
+      }
+    }
+
     return {
       bundleName,
+      main,
+      withIndex,
       ...jsFileExists && { jsPath },
       ...scssFileExists && { scssPath }
     };
@@ -251,8 +316,39 @@ async function verifyBundlesEntryPoints (bundles) {
 
   const bundlesPaths = await Promise.all(checkPathsPromises);
 
-  const packedFilesByBundle = bundlesPaths.reduce((acc, {
-    bundleName, jsPath, scssPath
+  // Verify and squash withIndex data
+  const seen = {};
+  const bundlesPathsWithIndex = [];
+  for (const entry of bundlesPaths) {
+    if (!entry.withIndex) {
+      bundlesPathsWithIndex.push(entry);
+      continue;
+    }
+    if (seen[entry.bundleName]) {
+      delete entry.withIndex;
+      bundlesPathsWithIndex.push(entry);
+      continue;
+    }
+    seen[entry.bundleName] = true;
+    const { jsPath, scssPath } = entry.withIndex;
+    const jsFileExists = await fs.pathExists(jsPath);
+    const scssFileExists = await fs.pathExists(scssPath);
+    if (!jsFileExists && !scssFileExists) {
+      delete entry.withIndex;
+      bundlesPathsWithIndex.push(entry);
+      continue;
+    }
+    bundlesPathsWithIndex.push({
+      ...entry,
+      withIndex: {
+        ...jsFileExists && { jsPath },
+        ...scssFileExists && { scssPath }
+      }
+    });
+  }
+
+  const packedFilesByBundle = bundlesPathsWithIndex.reduce((acc, {
+    bundleName, jsPath, scssPath, main, withIndex
   }) => {
     if (!jsPath && !scssPath) {
       return acc;
@@ -261,11 +357,18 @@ async function verifyBundlesEntryPoints (bundles) {
     return {
       ...acc,
       [bundleName]: {
+        main,
+        // Boolean indicating if the "main" index.js is included
+        // caused by a remapping. It's not yet used anywhere but
+        // it's an useful information that we keep.
+        withIndex: !!withIndex || acc[bundleName]?.withIndex,
         js: [
+          ...withIndex?.jsPath ? [ withIndex?.jsPath ] : [],
           ...acc[bundleName] ? acc[bundleName].js : [],
           ...jsPath ? [ jsPath ] : []
         ],
         scss: [
+          ...withIndex?.scssPath ? [ withIndex?.scssPath ] : [],
           ...acc[bundleName] ? acc[bundleName].scss : [],
           ...scssPath ? [ scssPath ] : []
         ]
@@ -276,7 +379,105 @@ async function verifyBundlesEntryPoints (bundles) {
   return packedFilesByBundle;
 };
 
-function formatConfigs (chain, webpackConfigs) {
+// Normalize config:
+// - from { moduleName: 'main' }
+//    to [{ main: true, name: 'moduleName', target: 'main' }]
+// - from { moduleName: bundleName }
+//    to [{ main: false, name: 'moduleName', target: bundleName }]
+// - from { 'moduleName:sourceBundle': 'main' }
+//    to [{ main: true, name: 'moduleName', source: 'sourceBundle', target: 'main' }]
+// - from { 'moduleName:sourceBundle': targetBundle }
+//    to [{ main: false, name: 'moduleName', source: 'sourceBundle', target: targetBundle }]
+function formatRebundleConfig(mappingConfig = {}) {
+  const result = Object.keys(mappingConfig).reduce((transformed, key) => {
+    const main = mappingConfig[key] === 'main';
+    const [ moduleName, sourceBundle ] = key.split(':');
+    return [
+      ...transformed,
+      {
+        name: moduleName,
+        source: sourceBundle,
+        target: mappingConfig[key],
+        main
+      }
+    ];
+  }, []);
+  // Better panic than sorry!
+  verifyRebundleConfig(result);
+  return result;
+}
+
+// This function is used to detect re-bundled and moved to the main build bundles.
+// It returns filtered configuration containing the proper bundle names.
+// See usage in `template/lib/bundlesLoader.js` and `widget-type/index.js`.
+// Expected arguments:
+// - moduleName: the module owning the bundleConfig
+// - bundleConfig: the bundle configuration ({ bundles: {...} })
+// - rebundleConfigs: the normalized output of `formatRebundleConfig(asset.options.rebundleModules)`
+function transformRebundledFor(moduleName, bundleConfigs, rebundleConfigs) {
+  const rebundle = rebundleConfigs
+    .filter(entry => entry.name === moduleName);
+  let result = { ...bundleConfigs };
+
+  for (const entry of rebundle) {
+    // 1. CatchAll to "main", already bundled in the main build - skip.
+    if (!entry.source && entry.main) {
+      result = {};
+      break;
+    }
+    // 2. CatchAll to a new bundle name, preserve merged options.
+    if (!entry.source && !entry.main) {
+      const options = Object.values(bundleConfigs)
+        .reduce((all, opts) => ({
+          ...all,
+          ...opts
+        }), {});
+      result = { [entry.target]: options };
+      break;
+    }
+    // 3. Rename a single bundle.
+    if (entry.source) {
+      // 3.1. ... but it's sent to the main build
+      if (entry.main) {
+        delete result[entry.source];
+        continue;
+      }
+      // 3.2. rename it, preserve the options
+      if (bundleConfigs[entry.source]) {
+        result[entry.target] = { ...bundleConfigs[entry.source] };
+        delete result[entry.source];
+      }
+    }
+  }
+
+  return result;
+}
+
+// Expects formatted by formatRebundleConfig() `asset.options.rebundleModules`
+function verifyRebundleConfig(config = []) {
+  const targeted = [];
+  const catchAllModules = {};
+  for (const entry of config) {
+    if (!entry.source) {
+      catchAllModules[entry.name] = `${entry.name}: ${entry.target}`;
+    } else {
+      targeted.push(entry);
+    }
+  }
+  for (const entry of targeted) {
+    if (catchAllModules[entry.name]) {
+      const conflicting = `${entry.name}${entry.source ? `:${entry.source}` : ''}: ${entry.target}`;
+      throw new Error(
+        'Invalid apos.asset.options.rebundleModules: ' +
+        `"${catchAllModules[entry.name]}" conflicts with ` +
+        `"${conflicting}"`
+      );
+    }
+  }
+}
+
+// Gather and transform all available webpack configs
+function formatConfigs (chain, webpackConfigs, rebundleModules) {
   return Object.entries(webpackConfigs)
     .map(([ name, config ], i) => {
 
@@ -285,16 +486,26 @@ function formatConfigs (chain, webpackConfigs) {
       }
 
       const {
-        bundles = {}, extensions = {}, extensionOptions = {}
+        bundles = {},
+        extensions = {},
+        extensionOptions = {}
       } = config;
+      const bundleNames = Object.keys(bundles);
+
+      // Remapping only for the explicitly defined by the module bundle
+      // configurations
+      const bundleRemapping = rebundleModules
+        .filter(entry => entry.name === chain[i].name);
 
       return {
+        name: chain[i].name,
         extensions,
         extensionOptions,
         bundles: {
           [name]: {
-            bundleNames: Object.keys(bundles),
-            modulePath: chain[i].dirname
+            bundleNames,
+            modulePath: chain[i].dirname,
+            bundleRemapping
           }
         }
       };
@@ -303,11 +514,14 @@ function formatConfigs (chain, webpackConfigs) {
 
 function flattenBundles (bundles) {
   return Object.values(bundles)
-    .reduce((acc, { bundleNames, modulePath }) => {
+    .reduce((acc, {
+      bundleNames, modulePath, bundleRemapping
+    }) => {
       return [
         ...acc,
         ...bundleNames.map((bundleName) => ({
           bundleName,
+          bundleRemapping,
           modulePath
         }))
       ];

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -650,16 +650,17 @@ export default {
       // Powers the dropdown Save menu
       // all actions expected to be methods of this component
       // Needs to be manually computed because this.saveLabel doesn't stay reactive when part of an object
-      const typeLabel = this.moduleOptions
-        ? this.moduleOptions.label.toLowerCase()
-        : 'document';
+      const typeLabel = this.$t(this.moduleOptions
+        ? this.moduleOptions.label
+        : 'document');
       const isNew = !this.docId;
       // this.original takes a moment to populate, don't crash
       const canPreview = this.original && (this.original._id ? this.original._url : this.original._previewable);
       const canNew = this.moduleOptions.showCreate;
+      const isSingleton = this.moduleOptions.singleton;
       const description = {
         saveLabel: this.$t(this.saveLabel),
-        typeLabel: this.$t(typeLabel)
+        typeLabel
       };
       const menu = [
         {
@@ -667,7 +668,8 @@ export default {
           action: 'onSave',
           description: {
             ...description,
-            key: isNew ? 'apostrophe:insertAndReturn' : 'apostrophe:updateAndReturn'
+            key: isSingleton ? 'apostrophe:updateSingleton'
+              : (isNew ? 'apostrophe:insertAndReturn' : 'apostrophe:updateAndReturn')
           },
           def: true
         }
@@ -689,7 +691,8 @@ export default {
         menu.push({
           label: {
             key: 'apostrophe:takeActionAndCreateNew',
-            saveLabel: this.$t(this.saveLabel)
+            saveLabel: this.$t(this.saveLabel),
+            typeLabel
           },
           action: 'onSaveAndNew',
           description: {
@@ -707,18 +710,25 @@ export default {
       }
       if (this.manuallyPublished && canPreview) {
         menu.push({
-          label: 'apostrophe:saveDraftAndPreview',
+          label: {
+            key: 'apostrophe:saveDraftAndPreview',
+            typeLabel
+          },
           action: 'onSaveDraftAndView',
-          description: 'apostrophe:saveDraftAndPreviewDescription',
-          typeLabel: this.$t(typeLabel)
+          description: {
+            key: 'apostrophe:saveDraftAndPreviewDescription',
+            typeLabel
+          }
         });
       };
       if (this.manuallyPublished && canNew) {
         menu.push({
           label: 'apostrophe:saveDraftAndCreateNew',
           action: 'onSaveDraftAndNew',
-          description: 'apostrophe:saveDraftAndCreateNewDescription',
-          typeLabel: this.$t(typeLabel)
+          description: {
+            key: 'apostrophe:saveDraftAndCreateNewDescription',
+            typeLabel
+          }
         });
       }
       return menu;
@@ -754,13 +764,13 @@ export default {
 
 <style lang="scss" scoped>
   .apos-doc-editor__body {
-    padding-top: 20px;
-    max-width: 90%;
-    margin-right: auto;
-    margin-left: auto;
+    padding-top: $spacing-double;
   }
 
   .apos-doc-editor__utility {
-    padding: 40px 20px;
+    padding: $spacing-quadruple $spacing-base;
+    @include media-up(lap) {
+      padding: $spacing-quadruple $spacing-double;
+    }
   }
 </style>