apostrophe 3.56.0 → 3.58.0

package/.github/workflows/main.yml

@@ -1,5 +1,3 @@
-# This is a basic workflow to help you get started with Actions
-
 name: Tests
 
 # Controls when the action will run.
@@ -20,8 +18,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16, 18]
-        mongodb-version: [4.4, 5.0, 6.0]
+        node-version: [18, 20]
+        mongodb-version: [4.4, 5.0, 6.0, 7.0]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
@@ -38,9 +36,6 @@ jobs:
         with:
           mongodb-version: ${{ matrix.mongodb-version }}
 
-      # Exit status must be succesful in the end
-      - run:  ( ( node --version | grep v14 ) && npm install -g npm@8 ) || echo "npm OK"
-
       - run: npm install
 
       - run: npm test

package/.github/workflows/outdated-dependencies.yml

@@ -0,0 +1,43 @@
+name: Check outdated dependencies
+on:
+  schedule:
+    # Runs every Monday at 8:00
+    - cron: "0 8 * * MON"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  check_outdated_dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git checkout
+        uses: actions/checkout@v2
+      - name: Use Node.js 18
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm install
+      - name: Check outdated dependencies
+        run: |
+          echo "$(npm outdated)" > output
+          npm outdated
+      - name: Report Status
+        if: failure()
+        run: |
+          outdated_dependencies=$(cat output)
+
+          repo="${{ github.repository }}"
+          repo_url="${{ github.server_url }}/$repo"
+          run_url="$repo_url/actions/runs/${{ github.run_id }}"
+
+          text="ℹ️ The <$repo_url|$repo> project has outdated dependencies:
+          \`\`\`
+          $outdated_dependencies
+          \`\`\`
+          <$run_url|View Run>"
+
+          payload="{\"text\": \"$text\"}"
+          curl -X POST -H 'Content-type: application/json' --data "$payload" $SLACK_WEBHOOK_URL
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.ACTION_MONITORING_SLACK }}

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 3.58.0 (2023-10-12)
+
+### Fixes
+
+* Ensure Apostrophe can make appropriate checks by always including `type` in the projection even if it is not explicitly listed.
+* Never try to annotate a widget with permissions the way we annotate a document, even if the widget is simulating a document.
+* The `areas` query builder now works properly when an array of area names has been specified.
+
+### Adds
+
+* Widget schema can now follow the parent schema via the similar to introduced in the `array` field type syntax (`<` prefix). In order a parent followed field to be available to the widget schema, the area field should follow it. For example, if area follows the root schema `title` field via `following: ['title']`, any field from a widget schema inside that area can do `following: ['<title']`.
+* The values of fields followed by an `area` field are now available in custom widget preview Vue components (registered with widget option `options.widget = 'MyComponentPreview'`). Those components will also receive additional `areaField` prop (the parent area field definition object).
+* Allows to insert attachments with a given ID, as well as with `docIds` and `archivedDocIds` to preserve related docs.
+* Adds an `update` method to the attachment module, that updates the mongoDB doc and the associated file.
+* Adds an option to the `http` `remote` method to allow receiving the original response from `node-fetch` that is a stream.
+
+## 3.57.0 2023-09-27
+
+### Changes
+* Removes a 25px gap used to prevent in-context widget UI from overlapping with the admin bar
+* Simplifies the way in-context widget state is rendered via modifier classes
+### Adds
+
+* Widgets detect whether or not their in-context editing UI will collide with the admin bar and adjust it appropriately.
+* Italian translation i18n file created for the Apostrophe Admin-UI. Thanks to [Antonello Zanini](https://github.com/Tonel) for this contribution.
+* Fixed date in piece type being displayed as current date in column when set as undefined and without default value. Thanks to [TheSaddestBread](https://github.com/AllanKoder) for this contribution.
+
+### Fixes
+
+* Bumped dependency on `oembetter` to ensure Vimeo starts working again
+for everyone with this release. This is necessary because Vimeo stopped
+offering oembed discovery meta tags on their video pages.
+
+### Fixes
+
+* The `118n` module now ignores non-JSON files within the i18n folder of any module and does not crash the build process.
+
 ## 3.56.0 (2023-09-13)
 
 ### Adds

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

@@ -138,9 +138,4 @@ export default {
   }
 }
 
-// make space for a widget's breadcrumbs that are flush with the admin bar
-.apos-admin-bar-spacer {
-  margin-bottom: 25px;
-}
-
 </style>

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

@@ -43,9 +43,11 @@
         :i="i"
         :options="options"
         :next="next"
+        :following-values="followingValues"
         :doc-id="docId"
         :context-menu-options="contextMenuOptions"
         :field-id="fieldId"
+        :field="field"
         :disabled="field && field.readOnly"
         :widget-hovered="hoveredWidget"
         :non-foreign-widget-hovered="hoveredNonForeignWidget"
@@ -109,6 +111,12 @@ export default {
         return [];
       }
     },
+    followingValues: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     choices: {
       type: Array,
       required: true
@@ -370,7 +378,8 @@ export default {
           value: widget,
           options: this.widgetOptionsByType(widget.type),
           type: widget.type,
-          docId: this.docId
+          docId: this.docId,
+          parentFollowingValues: this.followingValues
         });
         apos.area.activeEditor = null;
         apos.bus.$off('apos-refreshing', cancelRefresh);
@@ -467,7 +476,8 @@ export default {
           value: null,
           options: this.widgetOptionsByType(name),
           type: name,
-          docId: this.docId
+          docId: this.docId,
+          parentFollowingValues: this.followingValues
         });
         apos.area.activeEditor = null;
         if (widget) {

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

@@ -7,17 +7,19 @@
     :data-area-label="widgetLabel"
     :data-apos-widget-foreign="foreign ? 1 : 0"
     :data-apos-widget-id="widget._id"
+    ref="widget"
   >
     <div
       class="apos-area-widget-inner"
-      :class="ui.container"
+      :class="containerClasses"
       @mouseover="mouseover($event)"
       @mouseleave="mouseleave"
       @click="getFocus($event, widget._id)"
     >
       <div
         class="apos-area-widget-controls apos-area-widget__label"
-        :class="ui.labels"
+        ref="label"
+        :class="labelsClasses"
       >
         <ol class="apos-area-widget__breadcrumbs">
           <li class="apos-area-widget__breadcrumb apos-area-widget__breadcrumb--widget-icon">
@@ -56,7 +58,7 @@
       </div>
       <div
         class="apos-area-widget-controls apos-area-widget-controls--add apos-area-widget-controls--add--top"
-        :class="ui.addTop"
+        :class="addClasses"
       >
         <AposAreaMenu
           v-if="!foreign"
@@ -73,7 +75,7 @@
       </div>
       <div
         class="apos-area-widget-controls apos-area-widget-controls--modify"
-        :class="ui.controls"
+        :class="controlsClasses"
       >
         <AposWidgetControls
           v-if="!foreign"
@@ -98,7 +100,7 @@
       -->
       <div
         class="apos-area-widget-guard"
-        :class="{'apos-is-disabled': focused}"
+        :class="{'apos-is-disabled': isFocused}"
       />
       <!-- Still used for contextual editing components -->
       <component
@@ -109,7 +111,7 @@
         :value="widget"
         @update="$emit('update', $event)"
         :doc-id="docId"
-        :focused="focused"
+        :focused="isFocused"
         :key="generation"
       />
       <component
@@ -119,16 +121,18 @@
         :type="widget.type"
         :id="widget._id"
         :area-field-id="fieldId"
+        :area-field="field"
+        :following-values="followingValuesWithParent"
         :value="widget"
         :foreign="foreign"
         @edit="$emit('edit', i);"
         :doc-id="docId"
         :rendering="rendering"
-        :key="generation"
+        :key="`${generation}-preview`"
       />
       <div
         class="apos-area-widget-controls apos-area-widget-controls--add apos-area-widget-controls--add--bottom"
-        :class="ui.addBottom"
+        :class="addClasses"
       >
         <AposAreaMenu
           v-if="!foreign"
@@ -148,7 +152,6 @@
 </template>
 
 <script>
-import { klona } from 'klona';
 import AposIndicator from '../../../../ui/ui/apos/components/AposIndicator.vue';
 
 export default {
@@ -190,10 +193,20 @@ export default {
         return {};
       }
     },
+    followingValues: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     next: {
       type: Array,
       required: true
     },
+    field: {
+      type: Object,
+      required: true
+    },
     fieldId: {
       type: String,
       required: true
@@ -225,38 +238,15 @@ export default {
   },
   emits: [ 'clone', 'up', 'down', 'remove', 'edit', 'cut', 'copy', 'update', 'add', 'changed' ],
   data() {
-    const initialState = {
-      controls: {
-        show: false
-      },
-      container: {
-        highlight: false,
-        focus: false
-      },
-      add: {
-        bottom: {
-          show: false,
-          focus: false
-        },
-        top: {
-          show: false,
-          focus: false
-        }
-      },
-      labels: {
-        show: false
-      }
-    };
     return {
-      blankState: klona(initialState),
-      state: klona(initialState),
-      highlightable: false,
-      focused: false,
+      mounted: false, // hack around needing DOM to be rendered for computed classes
+      isSuppressed: false,
       classes: {
         show: 'apos-is-visible',
         open: 'apos-is-open',
         focus: 'apos-is-focused',
-        highlight: 'apos-is-highlighted'
+        highlight: 'apos-is-highlighted',
+        adjust: 'apos-is-ui-adjusted'
       },
       breadcrumbs: {
         $lastEl: null,
@@ -266,6 +256,14 @@ export default {
     };
   },
   computed: {
+    // Passed only to the preview layer (custom preview components).
+    followingValuesWithParent() {
+      return Object.entries(this.followingValues || {})
+        .reduce((acc, [ key, value ]) => {
+          acc[`<${key}`] = value;
+          return acc;
+        }, {});
+    },
     bottomContextMenuOptions() {
       return {
         ...this.contextMenuOptions,
@@ -294,73 +292,56 @@ export default {
     moduleOptions() {
       return window.apos.area;
     },
-    isSuppressed() {
-      if (this.focused) {
-        return false;
-      }
-
-      if (this.highlightable) {
+    isFocused() {
+      if (this.isSuppressed) {
         return false;
+      } else {
+        if (this.widgetFocused === this.widget._id) {
+          document.addEventListener('click', this.unfocus);
+        }
+        return this.widgetFocused === this.widget._id;
       }
-
-      return !(this.hovered || this.nonForeignHovered);
     },
-    hovered() {
+    isHovered() {
       return this.widgetHovered === this.widget._id;
     },
+    isHighlighted() {
+      const $parent = this.getParent();
+      return $parent && $parent.dataset.areaWidget === this.widgetFocused;
+    },
     nonForeignHovered() {
       return this.nonForeignWidgetHovered === this.widget._id;
     },
-    // Sets up all the interaction classes based on the current
-    // state. If our widget is suppressed, return a blank UI state and reset
-    // our real one.
-    ui() {
-      const state = {
-        controls: this.state.controls.show ? this.classes.show : null,
-        labels: this.state.labels.show ? this.classes.show : null,
-        container: this.state.container.focus ? this.classes.focus
-          : ((this.state.container.highlight || this.nonForeignHovered) ? this.classes.highlight : null),
-        addTop: this.state.add.top.focus ? this.classes.focus
-          : ((this.state.add.top.show || this.nonForeignHovered) ? this.classes.show : null),
-        addBottom: this.state.add.bottom.focus ? this.classes.focus
-          : ((this.state.add.bottom.show || this.nonForeignHovered) ? this.classes.show : null)
+    controlsClasses() {
+      return {
+        [this.classes.show]: this.isFocused
       };
-
-      if (this.isSuppressed) {
-        this.resetState();
-        return this.blankState;
+    },
+    containerClasses() {
+      const classes = {
+        [this.classes.highlight]: this.isHighlighted || this.isHovered,
+        [this.classes.focus]: this.isFocused
+      };
+      if (this.mounted) {
+        classes[this.classes.adjust] = this.adjustUi();
       }
-
-      return state;
+      return classes;
+    },
+    labelsClasses() {
+      return {
+        [this.classes.show]: this.isHovered || this.isFocused
+      };
+    },
+    addClasses() {
+      return {
+        [this.classes.show]: this.isHovered || this.isFocused
+      };
     },
     foreign() {
       // Cast to boolean is necessary to satisfy prop typing
       return !!(this.docId && (window.apos.adminBar.contextId !== this.docId));
     }
   },
-  watch: {
-    widgetFocused (newVal) {
-      if (newVal === this.widget._id) {
-        this.focus();
-      } else {
-        // reset everything
-        this.resetState();
-        this.focused = false;
-      }
-      const $parent = this.getParent();
-      if (
-        $parent &&
-        $parent.dataset.areaWidget === newVal
-      ) {
-        // Our parent was focused
-        this.resetState();
-        this.state.container.highlight = true;
-        this.highlightable = true;
-      } else {
-        this.highlightable = false;
-      }
-    }
-  },
   created() {
     if (this.options.groups) {
       for (const group of Object.keys(this.options.groups)) {
@@ -372,6 +353,7 @@ export default {
     }
   },
   mounted() {
+    this.mounted = true;
     // AposAreaEditor is listening for keyboard input that triggers
     // a 'focus my parent' plea
     apos.bus.$on('widget-focus-parent', this.focusParent);
@@ -392,11 +374,21 @@ export default {
     apos.bus.$off('widget-focus-parent', this.focusParent);
   },
   methods: {
+
+    // Determine whether or not we should adjust the label based on its position to the admin bar
+    adjustUi() {
+      const { height: labelHeight } = this.$refs.label.getBoundingClientRect();
+      const { top: widgetTop } = this.$refs.widget.getBoundingClientRect();
+      const adminBarHeight = window.apos.modules['@apostrophecms/admin-bar'].height;
+      const offsetTop = widgetTop + window.scrollY;
+      return offsetTop - labelHeight < adminBarHeight;
+    },
+
     // Focus parent, useful for obtrusive UI
     focusParent() {
       // Something above us asked the focused widget to try and focus its parent
       // We only care about this if we're focused ...
-      if (this.focused) {
+      if (this.isFocused) {
         const $parent = this.getParent();
         // .. And have a parent
         if ($parent) {
@@ -408,6 +400,7 @@ export default {
     // Ask the parent AposAreaEditor to make us focused
     getFocus(e, id) {
       e.stopPropagation();
+      this.isSuppressed = false;
       apos.bus.$emit('widget-focus', id);
     },
 
@@ -416,15 +409,6 @@ export default {
       if (e) {
         e.stopPropagation();
       }
-      if (this.focused) {
-        return;
-      }
-      if (!this.foreign) {
-        this.state.add.top.show = true;
-        this.state.add.bottom.show = true;
-      }
-      this.state.container.highlight = true;
-      this.state.labels.show = true;
       const closest = this.foreign && this.$el.closest('[data-apos-widget-foreign="0"]');
       const closestId = closest && closest.getAttribute('data-apos-widget-id');
       apos.bus.$emit('widget-hover', {
@@ -434,41 +418,16 @@ export default {
     },
 
     mouseleave() {
-      if (!this.highlightable) {
-        // Force highlight when a parent has been focused
-        this.state.container.highlight = false;
-      }
-      if (!this.focused) {
-        this.state.labels.show = false;
-        this.state.add.top.show = false;
-        this.state.add.bottom.show = false;
-      }
-      if (this.hovered) {
+      if (this.isHovered) {
         apos.bus.$emit('widget-hover', {
           _id: null,
           nonForeignId: null
         });
       }
     },
-
-    focus(e) {
-      if (e) {
-        e.stopPropagation();
-      }
-      this.focused = true;
-      this.state.container.focus = true;
-      this.state.controls.show = true;
-      this.state.add.top.show = true;
-      this.state.add.bottom.show = true;
-      this.state.labels.show = true;
-      document.addEventListener('click', this.unfocus);
-    },
-
     unfocus(event) {
       if (!this.$el.contains(event.target)) {
-        this.focused = false;
-        this.resetState();
-        this.highlightable = false;
+        this.isSuppressed = true;
         document.removeEventListener('click', this.unfocus);
         apos.bus.$emit('widget-focus', null);
       }
@@ -485,12 +444,11 @@ export default {
       }
     },
 
-    resetState() {
-      this.state = klona(this.blankState);
-    },
-
     getParent() {
-      return apos.util.closest(this.$el.parentNode, '[data-area-widget]');
+      if (!this.mounted) {
+        return false;
+      }
+      return this.$el.parentNode ? apos.util.closest(this.$el.parentNode, '[data-area-widget]') : false;
     },
 
     // Hacky way to get the parents tree of a widget
@@ -555,6 +513,14 @@ export default {
         box-shadow: none;
       }
     }
+    &.apos-is-ui-adjusted {
+      .apos-area-widget-controls--modify {
+        transform: translate3d(-10px, 50px, 0);
+      }
+      .apos-area-widget__label {
+        transform: translate(-10px, 10px);
+      }
+    }
 
     .apos-area-widget-inner &:after {
       display: none;
@@ -704,6 +670,7 @@ export default {
     right: 0;
     display: flex;
     transform: translateY(-100%);
+    transition: opacity 0.3s ease;
   }
 
   .apos-area-widget-inner .apos-area-widget-inner .apos-area-widget__label {

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

@@ -386,8 +386,7 @@ module.exports = {
       // This method returns `attachment` where `attachment` is an attachment
       // object, suitable for passing to the `url` API and for use as the value
       // of a `type: 'attachment'` schema field.
-      async insert(req, file, options) {
-        options = options || {};
+      async insert(req, file, options = {}) {
         let extension = path.extname(file.name);
         if (extension && extension.length) {
           extension = extension.substr(1);
@@ -402,16 +401,21 @@ module.exports = {
             extensions: accepted.join(req.t('apostrophe:listJoiner'))
           }));
         }
+
+        if (options.attachmentId && await self.apos.attachment.db.findOne({ _id: options.attachmentId })) {
+          throw self.apos.error('invalid', 'duplicate');
+        }
+
         const info = {
-          _id: self.apos.util.generateId(),
+          _id: options.attachmentId ?? self.apos.util.generateId(),
           group: group.name,
           createdAt: new Date(),
           name: self.apos.util.slugify(path.basename(file.name, path.extname(file.name))),
           title: self.apos.util.sortify(path.basename(file.name, path.extname(file.name))),
           extension: extension,
           type: 'attachment',
-          docIds: [],
-          archivedDocIds: []
+          docIds: options.docIds ?? [],
+          archivedDocIds: options.archivedDocIds ?? []
         };
         if (!(options.permissions === false)) {
           if (!self.apos.permission.can(req, 'upload-attachment')) {
@@ -432,7 +436,11 @@ module.exports = {
         }
         if (self.isSized(extension)) {
           // For images we correct automatically for common file extension mistakes
-          const result = await Promise.promisify(self.uploadfs.copyImageIn)(file.path, '/attachments/' + info._id + '-' + info.name, { sizes: self.imageSizes });
+          const result = await Promise.promisify(self.uploadfs.copyImageIn)(
+            file.path,
+            '/attachments/' + info._id + '-' + info.name,
+            { sizes: self.imageSizes }
+          );
           info.extension = result.extension;
           info.width = result.width;
           info.height = result.height;
@@ -454,6 +462,51 @@ module.exports = {
         await self.db.insertOne(info);
         return info;
       },
+
+      async update(req, file, attachment) {
+        const existing = await self.db.findOne({ _id: attachment._id });
+        if (!existing) {
+          throw self.apos.error('notfound');
+        }
+
+        const projection = {
+          _id: 1,
+          archived: 1
+        };
+
+        const existingRelatedDocs = await self.apos.doc.db
+          .find({
+            _id: {
+              $in: [
+                ...existing.docIds,
+                ...existing.archivedDocIds,
+                ...attachment.docIds,
+                ...attachment.archivedDocIds
+              ]
+            }
+          }, { projection })
+          .toArray();
+
+        const { docIds, archivedDocIds } = existingRelatedDocs
+          .reduce(({ docIds, archivedDocIds }, doc) => {
+            return {
+              docIds: [ ...docIds, ...!doc.archived ? [ doc._id ] : [] ],
+              archivedDocIds: [ ...archivedDocIds, ...doc.archived ? [ doc._id ] : [] ]
+            };
+          }, {
+            docIds: [],
+            archivedDocIds: []
+          });
+
+        await self.alterAttachment(existing, 'remove');
+        await self.db.deleteOne({ _id: existing._id });
+        await self.insert(req, file, {
+          attachmentId: attachment._id,
+          docIds: _.uniq([ ...docIds, ...existing.docIds || [] ]),
+          archivedDocIds: _.uniq([ ...archivedDocIds, ...existing.archivedDocIds || [] ])
+        });
+      },
+
       // Given a path to a local svg file, sanitize any XSS attack vectors that
       // may be present in the file. The caller is responsible for catching any
       // exception thrown and treating that as an invalid file but there is no

package/modules/@apostrophecms/doc-type/index.js

@@ -1624,6 +1624,12 @@ module.exports = {
             // to the projection instead.
             const add = [];
             const remove = [];
+
+            // Add type in projection by default
+            if (!_.isEmpty(projection)) {
+              add.push('type');
+            }
+
             for (const [ key, val ] of Object.entries(projection)) {
               if (!val) {
                 // For a negative projection this is just
@@ -2228,7 +2234,7 @@ module.exports = {
                   const dotPath = info.dotPath;
                   if (setting && Array.isArray(setting)) {
                     if (!_.includes(setting, dotPath)) {
-                      return;
+                      continue;
                     }
                   }
                   if (doc._edit) {