apostrophe 4.6.0 → 4.7.0

package/.github/workflows/main.yml

@@ -3,7 +3,7 @@ name: Tests
 # Controls when the action will run.
 on:
   push:
-    branches: ["main"]
+    branches: ["main", "a3"]
   pull_request:
     branches: ["*"]
 

package/CHANGELOG.md

@@ -1,15 +1,61 @@
 # Changelog
 
+## 4.7.0 (2024-09-05)
+
+### Adds
+
+* To aid debugging, when a file extension is unacceptable as an Apostrophe attachment the rejected extension is now printed as part of the error message.
+* The new `big-upload-client` module can now be used to upload very large files to any route that uses the new `big-upload-middleware`.
+* Add option `skipReplace` for `apos.doc.changeDocIds` method to skip the replacing of the "old" document in the database.
+* The `@apostrophecms/i18n` module now exposes a `locales` HTTP GET API to aid in implementation of native apps for localized sites.
+* Context menus can be supplied a `menuId` so that interested components can listen to their opening/closing.
+* Allow to set mode in `AposWidget` component through props.
+* Add batch operations to pages.
+* Add shortcuts to pages manager.
+* Add `replaces` (boolean, `false` by default) option to the context operation definition (registered via `apos.doc.addContextOperation()`) to allow the operation to require a replace confirmation before being executed. The user confirmation results in the Editor modal being closed and the operation being executed. The operation is not executed if the user cancels the confirmation.
+
+### Changes
+
+* Wait for notify before navigating to a new page.
+* Send also `checkedTypes` via the pages body toolbar operations (e.g. 'batch') to the modal.
+
+### Fixes
+
+* Fix link to pages in rich-text not showing UI to select page during edit.
+* Bumps `uploadfs` dependency to ensure `.tar.gz`, `.tgz` and `.gz` files uploaded to S3 download without double-gzipping.
+This resolves the issue for new uploads.
+* Registering duplicate icon is no longer breaking the build.
+* Fix widget focus state so that the in-context Add Content menu stays visible during animation
+* Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI
+* Fix unhandled promise rejections and guard against potential memory leaks, remove 3rd party `debounce-async` dependency
+* Adds an option to center the context menu arrow on the button icon. Sets this new option on some context menus in the admin UI.
+* Fixes the update function of `AposSlatLists` so that elements are properly reordered on drag
+
+## 4.6.1 (2024-08-26)
+
+### Fixes
+
+* Registering duplicate icon is no longer breaking the build.
+* Fix widget focus state so that the in-context Add Content menu stays visible during animation.
+* Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI.
+
 ## 4.6.0 (2024-08-08)
 
 ### Adds
 
 * Add a locale switcher in pieces and pages editor modals. This is available for localized documents only, and allows you to switch between locales for the same document.
-  The locale can be switche at only one level, meaning that sub documents of a document that already switched locale will not be able to switch locale itself.
+  The locale can be switched at only one level, meaning that sub documents of a document that already switched locale will not be able to switch locale itself.
 * Adds visual focus states and keyboard handlers for engaging with areas and widgets in-context
+* Adds method `simulateRelationshipsFromStorage` method in schema module. 
+This method populates the relationship field with just enough information to allow convert to accept it. It does not fully fetch the related documents. It does the opposite of prepareForStorage.
+* A new options object has been added to the convert method. 
+Setting the `fetchRelationships` option to false will prevent convert from actually fetching relationships to check which related documents currently exist. 
+The shape of the relationship field is still validated.
 
 ### Changes
 
+* Refactors Admin UI SASS to eliminate deprecation warnings from declarations coming after nested rules.
+* Bumps the sass-loader version and adds a webpack option to suppress mixed declaration deprecation warnings to be removed when all modules are updated.
 * Add `title` and `_url` to select all projection.
 * Display `Select all` message on all pages in the manager modal.
 * Refresh `checked` in manager modal after archive action.

package/lib/big-upload-client.js

@@ -0,0 +1,100 @@
+// Upload files in 4MB chunks, well under the typical
+// proxy server limit on POST size
+
+const defaultChunkSize = 1024 * 1024 * 4;
+
+// Used to upload very large files, large enough that they
+// might exceed the max body size or max uploaded file size
+// configured on a proxy server, etc.
+//
+// `options` is required and may contain a `files` object
+// property containing HTML5 `File` objects. It will become
+// `req.files` on the receiving end, just like with more typical
+// file upload middleware.
+//
+// `qs` and `body` become `req.query` and `req.body` on the
+// receiving end. You may use them for non-file parameters.
+//
+// An existing query string in `url` is NOT supported. Use `qs`.
+//
+// The receiving route must use the `self.apos.http.bigUploadMiddleware`
+// function to obtain the middleware and it must be a `post` route.
+//
+// The query parameter `aposBigUpload` is reserved for internal use.
+//
+// If a `progress` function is supplied, it is periodically invoked
+// with a proportion (between 0.0 and 1.0) as the upload progresses.
+// Be aware the receiving end will typically do quite a bit of processing
+// after that.
+//
+// If `chunkSize` is specified (in bytes) it is used instead of the usual
+// 4MB. The chunk size should be big enough for efficiency but small
+// enough to avoid proxy server POST limits.
+//
+// For testing and server-side use an `http` object and a `FormData` constructor
+// may be specified otherwise the standard Apostrophe `apos.http` object
+// and the browser's `FormData` are used.
+
+module.exports = async (url, options) => {
+  const chunkSize = options.chunkSize || defaultChunkSize;
+  const http = options.http || window.apos?.http;
+  const progress = options.progress || (n => {});
+  const files = options.files || [];
+  const info = {};
+  let totalBytes = 0;
+  let sentBytes = 0;
+  for (const [ param, file ] of Object.entries(files)) {
+    totalBytes += file.size;
+    info[param] = {
+      name: file.name,
+      size: file.size,
+      chunks: Math.ceil(file.size / chunkSize)
+    };
+  }
+  const { id } = await http.post(url, {
+    qs: {
+      aposBigUpload: {
+        type: 'start'
+      }
+    },
+    body: {
+      files: info
+    }
+  });
+  let n = 0;
+  for (const file of Object.values(files)) {
+    const { size } = file;
+    let chunk = 0;
+    for (let offset = 0; (offset < size); offset += chunkSize) {
+      const formData = new FormData();
+      const thisChunkSize = Math.min(chunkSize, size - offset);
+      formData.append('chunk', file.slice(offset, offset + thisChunkSize));
+      await http.post(url, {
+        qs: {
+          aposBigUpload: {
+            type: 'chunk',
+            id,
+            n,
+            chunk
+          }
+        },
+        body: formData
+      });
+      sentBytes += thisChunkSize;
+      progress(sentBytes / totalBytes);
+      chunk++;
+    }
+    n++;
+  }
+  const result = await http.post(url, {
+    qs: {
+      aposBigUpload: {
+        type: 'end',
+        id
+      },
+      ...options.qs
+    },
+    body: options.body
+  });
+  return result;
+};

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

@@ -107,9 +107,11 @@ export default {
 :deep(.apos-admin-bar__control-set) {
   @include type-base;
 
-  display: flex;
-  width: 100%;
-  height: 100%;
+  & {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .apos-admin-bar__user {

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

@@ -5,6 +5,7 @@
     identifier="localePickerTrigger"
     :button="button"
     :unpadded="true"
+    :center-on-icon="true"
     menu-placement="bottom-end"
     @open="open"
     @close="isOpen = false"
@@ -162,9 +163,11 @@ export default {
   &:deep(.apos-button__label) {
     @include type-small;
 
-    color: var(--a-primary);
-    font-weight: var(--a-weight-bold);
-    letter-spacing: 1px;
+    & {
+      color: var(--a-primary);
+      font-weight: var(--a-weight-bold);
+      letter-spacing: 1px;
+    }
   }
 }
 </style>

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

@@ -3,6 +3,7 @@
     class="apos-admin-user"
     :button="button"
     :menu="items"
+    :center-on-icon="true"
     menu-placement="bottom-end"
     @item-clicked="emitEvent"
   >
@@ -57,7 +58,9 @@ export default {
   :deep(.apos-button) {
     @include type-base;
 
-    color: var(--a-text-primary);
+    & {
+      color: var(--a-text-primary);
+    }
   }
 
   :deep(.apos-context-menu__popup) {

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

@@ -615,7 +615,7 @@ export default {
           body: {},
           busy: true
         });
-        apos.notify('apostrophe:restoredPrevious', {
+        await apos.notify('apostrophe:restoredPrevious', {
           type: 'success',
           dismiss: true
         });
@@ -720,14 +720,18 @@ export default {
     async updateDraftIsEditable() {
       if (this.context.aposLocale && this.context.aposLocale.endsWith('published') && !this.context._edit) {
         // A contributor might be able to edit the draft
-        const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'draft',
-            aposLocale: this.context.aposLocale.split(':')[0]
-          }
-        });
-        this.draftIsEditable = draftContext && draftContext._edit;
+        try {
+          const draftContext = await apos.http.get(`${this.action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'draft',
+              aposLocale: this.context.aposLocale.split(':')[0]
+            }
+          });
+          this.draftIsEditable = draftContext && draftContext._edit;
+        } catch (e) {
+          console.error(e);
+        }
       }
     },
     async getPublished() {
@@ -735,13 +739,17 @@ export default {
       const manuallyPublished = moduleOptions.localized && !this.autopublish;
       if (manuallyPublished && this.context.lastPublishedAt) {
         const action = window.apos.modules[this.context.type].action;
-        const doc = await apos.http.get(`${action}/${this.context._id}`, {
-          busy: true,
-          qs: {
-            aposMode: 'published'
-          }
-        });
-        return doc;
+        try {
+          const doc = await apos.http.get(`${action}/${this.context._id}`, {
+            busy: true,
+            qs: {
+              aposMode: 'published'
+            }
+          });
+          return doc;
+        } catch (error) {
+          console.error(error);
+        }
       }
       return null;
     },

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

@@ -31,6 +31,7 @@
           :button="draftButton"
           :menu="draftMenu"
           :disabled="hasCustomUi || isUnpublished"
+          :center-on-icon="true"
           menu-placement="bottom-end"
           @item-clicked="switchDraftMode"
         />

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

@@ -122,11 +122,13 @@ export default {
 .apos-admin-bar__status {
   @include type-help;
 
-  position: relative;
-  margin-left: 7.5px;
-  opacity: 1;
-  color: var(--a-base-2);
-  transition: opacity 200ms;
+  & {
+    position: relative;
+    margin-left: 7.5px;
+    opacity: 1;
+    color: var(--a-base-2);
+    transition: opacity 200ms;
+  }
 
   &.apos-is-hidden {
     opacity: 0;

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

@@ -294,12 +294,15 @@ module.exports = {
       // options to sanitize against. Thus h5 can be legal
       // in one rich text widget and not in another.
       //
+      // The `convertOptions` parameter allows to pass options
+      // to the convert method to alter them.
+      //
       // If any errors occur sanitizing the individual widgets,
       // an array of errors with `path` and `error` properties
       // is thrown.
       //
       // Returns a new array of sanitized items.
-      async sanitizeItems(req, items, options) {
+      async sanitizeItems(req, items, options, convertOptions = {}) {
         options = options || {};
         const result = [];
         const errors = [];
@@ -322,7 +325,7 @@ module.exports = {
           }
           let newItem;
           try {
-            newItem = await manager.sanitize(req, item, widgetOptions);
+            newItem = await manager.sanitize(req, item, widgetOptions, convertOptions);
             newItem._id = self.apos.launder.id(item._id) || self.apos.util.generateId();
           } catch (e) {
             if (Array.isArray(e)) {

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

@@ -6,6 +6,7 @@
       :disabled="isDisabled"
       :button="buttonOptions"
       :popover-modifiers="inContext ? ['z-index-in-context'] : []"
+      :menu-id="menuId"
     >
       <ul class="apos-area-menu__wrapper">
         <li
@@ -117,6 +118,12 @@ export default {
       default: function() {
         return {};
       }
+    },
+    menuId: {
+      type: String,
+      default() {
+        return `areaMenu-${createId()}`;
+      }
     }
   },
   emits: [ 'add' ],
@@ -182,9 +189,6 @@ export default {
       } else {
         return menu;
       }
-    },
-    menuId() {
-      return `areaMenu-${createId()}`;
     }
   },
   mounted() {
@@ -295,10 +299,12 @@ export default {
   @include apos-button-reset();
   @include type-base;
 
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px 20px;
-  color: var(--a-base-1);
+    & {
+      box-sizing: border-box;
+      width: 100%;
+      padding: 5px 20px;
+      color: var(--a-base-1);
+    }
 
   &:hover,
   &:focus {
@@ -331,11 +337,13 @@ export default {
 .apos-area-menu__group-label {
   @include apos-button-reset();
 
-  display: flex;
-  box-sizing: border-box;
-  justify-content: space-between;
-  width: 100%;
-  padding: 10px 20px;
+  & {
+    display: flex;
+    box-sizing: border-box;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px 20px;
+  }
 
   &:hover {
     cursor: pointer;
@@ -350,7 +358,9 @@ export default {
 .apos-area-menu__group-chevron {
   @include apos-transition();
 
-  transform: rotate(90deg);
+  & {
+    transform: rotate(90deg);
+  }
 }
 
 .apos-area-menu__group-chevron.apos-is-active {
@@ -371,8 +381,10 @@ export default {
 .apos-area-menu__items--accordion {
   @include apos-transition($duration:0.3s);
 
-  overflow: hidden;
-  max-height: 0;
+  & {
+    overflow: hidden;
+    max-height: 0;
+  }
 }
 
 .apos-area-menu__items--accordion.apos-is-active {

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

@@ -256,10 +256,12 @@ export default {
 .apos-widget {
   @include type-base;
 
-  padding: 0;
-  border: none;
-  background: none;
-  text-align: inherit;
+  & {
+    padding: 0;
+    border: none;
+    background: none;
+    text-align: inherit;
+  }
 
   .apos-widget__preview {
     transition: opacity 250ms ease-in-out;
@@ -316,9 +318,11 @@ export default {
 .apos-widget__help {
   @include type-base;
 
-  margin-top: 0;
-  line-height: var(--a-line-tall);
-  text-align: left;
+  & {
+    margin-top: 0;
+    line-height: var(--a-line-tall);
+    text-align: left;
+  }
 }
 
 .apos-widget__help {

package/modules/@apostrophecms/area/ui/apos/components/AposAreaMenu.vue

@@ -16,6 +16,7 @@
     :options="options"
     :max-reached="maxReached"
     :disabled="disabled"
+    :menu-id="menuId"
     @add="$emit('add', $event);"
   />
 </template>
@@ -58,6 +59,10 @@ export default {
     tabbable: {
       type: Boolean,
       default: false
+    },
+    menuId: {
+      type: String,
+      default: null
     }
   },
   emits: [ 'add' ],
@@ -113,10 +118,12 @@ export default {
   @include apos-button-reset();
   @include type-base;
 
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px 20px;
-  color: var(--a-base-1);
+  & {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 5px 20px;
+    color: var(--a-base-1);
+  }
 
   &:hover,
   &:focus {
@@ -149,11 +156,13 @@ export default {
 .apos-area-menu__group-label {
   @include apos-button-reset();
 
-  display: flex;
-  box-sizing: border-box;
-  justify-content: space-between;
-  width: 100%;
-  padding: 10px 20px;
+  & {
+    display: flex;
+    box-sizing: border-box;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px 20px;
+  }
 
   &:hover {
     cursor: pointer;
@@ -168,7 +177,9 @@ export default {
 .apos-area-menu__group-chevron {
   @include apos-transition();
 
-  transform: rotate(90deg);
+  & {
+    transform: rotate(90deg);
+  }
 }
 
 .apos-area-menu__group-chevron.apos-is-active {
@@ -189,8 +200,10 @@ export default {
 .apos-area-menu__items--accordion {
   @include apos-transition($duration:0.3s);
 
-  overflow: hidden;
-  max-height: 0;
+  & {
+    overflow: hidden;
+    max-height: 0;
+  }
 }
 
 .apos-area-menu__items--accordion.apos-is-active {

package/modules/@apostrophecms/area/ui/apos/components/AposAreaMenuItem.vue

@@ -67,7 +67,9 @@ export default {
   .apos-area-menu__item-icon {
     @include apos-align-icon();
 
-    margin-right: 10px;
+    & {
+      margin-right: 10px;
+    }
   }
 
   .apos-area-menu__item-content {