apostrophe 3.32.0 → 3.33.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.33.0 (2022-11-28)
+
+### Adds
+
+* You can now set `inline: true` on schema fields of type `array`. This displays a simple editing interface in the context of the main dialog box for the document in question, avoiding the need to open an additional dialog box. Usually best for cases with just one field or just a few. If your array field has a large number of subfields the default behavior (`inline: false`) is more suitable for your needs. See the [array field](https://v3.docs.apostrophecms.org/reference/field-types/array.html) documentation for more information.
+* Batch feature for publishing pieces.
+
+### Fixes
+
+* Prior to this release, widget templates that contained areas pulled in from related documents would break the ability to add another widget beneath.
+* Validation of object fields now works properly on the browser side, in addition to server-side validation, resolving UX issues.
+* Provisions were added to prevent any possibility of a discrepancy in relationship loading results under high load. It is not clear whether this A2 bug was actually possible in A3.
+
 ## 3.32.0 (2022-11-09)
 
 ### Adds

package/CONTRIBUTING.md

@@ -12,14 +12,17 @@ development updates, and help as you build with Apostrophe. There are also
 [Github Discussions](https://github.com/apostrophecms/apostrophe/discussions) and
 [Stack Overflow](https://stackoverflow.com/questions/tagged/apostrophe-cms).
 
-- [Code of Conduct](#code-of-conduct)
-- [How can I contribute?](#how-can-i-contribute)
-  - [Reporting Bugs](#reporting-bugs)
-  - [Suggesting a Feature or Enhancement](#suggesting-a-feature-or-enhancement)
-  - [Fixing Bugs or Submitting Enhancements](#fixing-bugs-or-submitting-enhancements)
-  - [Improving documentation](#improving-documentation)
-  - [Share the Love](#share-the-love)
-- [Should I make a new npm module?](#should-i-make-a-new-npm-module)
+- [ApostropheCMS Contribution Guide](#apostrophecms-contribution-guide)
+  - [Code of Conduct](#code-of-conduct)
+  - [How can I contribute?](#how-can-i-contribute)
+    - [Reporting Bugs](#reporting-bugs)
+    - [Suggesting a Feature or Enhancement](#suggesting-a-feature-or-enhancement)
+    - [Fixing Bugs or Submitting Enhancements](#fixing-bugs-or-submitting-enhancements)
+    - [Contributing to Apostrophe Core](#contributing-to-apostrophe-core)
+      - [**What to expect next**](#what-to-expect-next)
+    - [Improving documentation](#improving-documentation)
+    - [Share the Love](#share-the-love)
+  - [Should I make a new npm module?](#should-i-make-a-new-npm-module)
 
 ## Code of Conduct
 
@@ -95,6 +98,20 @@ were applicable. For Apostrophe core, that should be in the
 and for other modules, add it in their README files (unless the README directs
 you elsewhere).
 
+### Contributing to Apostrophe Core
+
+This is assuming you are interacting with the ApostropheCMS repositories on the GitHub website. If you are using GitHub Desktop you can read about how to fork a repository in the [GitHub docs.](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/adding-and-cloning-repositories/cloning-and-forking-repositories-from-github-desktop)
+
+1. Fork the main Apostrophe repository to your own account by clicking on the fork button at the top of the [GitHub page.](https://github.com/apostrophecms/apostrophe) If you are contributing to the latest version of Apostrophe you can simply click on the "Create fork" button on the next screen. If you are contributing to Apostrophe 2, you will need to uncheck the "Copy the main branch only" selection before creating the fork.
+2. The forked version of the repository can be modified in any way you would like without impact on the original repository. As a best practice, we request that you create a branch with a short informative name for making code changes. This makes it easier for our team to track what you are contributing when you make your pull request (PR).
+3. Once you've completed your code changes (and updates to `CHANGELOG.md` if needed - see the notes above) you can push all of your changes to your repo. Navigating to your GitHub repository page you will see a banner for creating a PR. Click on the "Contribute" and then "Open a pull request" buttons.
+4. This will bring up a PR page. There are a number of sections to be filled out. Please read carefully and make selections where needed. Following this checklist is very helpful when our team reviews your request. If you need help, just ask!
+5. Finally, it is best to notify a team member on the [Discord channel](https://discord.com/channels/517772094482677790/701815369005924374) that you have submitted a PR. You can also find our contact addresses on our GitHub pages. We don't get automatic notifications from community-submitted PRs. We will see it in the queue eventually, notifying us will just speed up the process.
+   
+#### **What to expect next**
+
+After we get your PR, we will assign someone from the team to review it. They will follow your testing recommendations and run any tests that you have included. They will also look to make sure your code passes all of our internal linting tests. If there are any issues, the reviewer will highlight the needed changes in their PR review. You can then respond to those suggestions with another round of code changes and submissions to your code branch. Once accepted, the reviewer will merge your changes into the proper repository branch. You can then give yourself a well deserved pat on the back - thanks! 🥳
+
 ### Improving documentation
 
 The [documentation repo](https://github.com/apostrophecms/a3-docs)
@@ -102,7 +119,13 @@ is public and we appreciate contributions. The core maintainers know Apostrophe
 very well, but that can make it hard to see where the gaps in documentation are.
 Please open issues there letting us know (nicely, please). Even better, submit a
 pull request documenting something and you'll be helping many developers going
-forward.
+forward. The mechanism for creating a pull request for documentation is the same as the method described for contributing to the core. To summarize:
+1. Fork
+2. Clone and create branch
+3. Make changes and push to branch
+4. Make pull request (PR) and notify Apostrophe development team
+5. Respond to PR comments with any needed changes
+6. Enjoy your awesome contribution - thanks! 🎉
 
 Even typo fixes are great!
 

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

@@ -48,6 +48,7 @@
         :field-id="fieldId"
         :disabled="field && field.readOnly"
         :widget-hovered="hoveredWidget"
+        :non-foreign-widget-hovered="hoveredNonForeignWidget"
         :widget-focused="focusedWidget"
         :max-reached="maxReached"
         :rendering="rendering(widget)"
@@ -135,6 +136,7 @@ export default {
       areaId: cuid(),
       next: this.getValidItems(),
       hoveredWidget: null,
+      hoveredNonForeignWidget: null,
       focusedWidget: null,
       contextMenuOptions: {
         menu: this.choices
@@ -239,8 +241,9 @@ export default {
         apos.bus.$emit('widget-focus-parent', this.focusedWidget);
       }
     },
-    updateWidgetHovered(widgetId) {
-      this.hoveredWidget = widgetId;
+    updateWidgetHovered({ _id, nonForeignId }) {
+      this.hoveredWidget = _id;
+      this.hoveredNonForeignWidget = nonForeignId;
     },
     updateWidgetFocused(widgetId) {
       this.focusedWidget = widgetId;

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

@@ -5,6 +5,8 @@
     :class="{'apos-area-widget-wrapper--foreign': foreign}"
     :data-area-widget="widget._id"
     :data-area-label="widgetLabel"
+    :data-apos-widget-foreign="foreign ? 1 : 0"
+    :data-apos-widget-id="widget._id"
   >
     <div
       class="apos-area-widget-inner"
@@ -152,6 +154,10 @@ export default {
       type: String,
       default: null
     },
+    nonForeignWidgetHovered: {
+      type: String,
+      default: null
+    },
     widgetFocused: {
       type: String,
       default: null
@@ -283,11 +289,13 @@ export default {
         return false;
       }
 
-      if (this.widgetHovered) {
-        return this.widgetHovered !== this.widget._id;
-      } else {
-        return false;
-      }
+      return !(this.hovered || this.nonForeignHovered);
+    },
+    hovered() {
+      return this.widgetHovered === this.widget._id;
+    },
+    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
@@ -297,11 +305,11 @@ export default {
         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.classes.highlight : null),
+          : ((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.classes.show : null),
+          : ((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.classes.show : null)
+          : ((this.state.add.bottom.show || this.nonForeignHovered) ? this.classes.show : null)
       };
 
       if (this.isSuppressed) {
@@ -356,9 +364,7 @@ export default {
 
     this.breadcrumbs.$lastEl = this.$el;
 
-    if (!this.foreign) {
-      this.getBreadcrumbs();
-    }
+    this.getBreadcrumbs();
 
     if (this.widgetFocused) {
       // If another widget was in focus (because the user clicked the "add"
@@ -395,11 +401,18 @@ export default {
       if (this.focused) {
         return;
       }
-      this.state.add.top.show = true;
-      this.state.add.bottom.show = true;
+      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;
-      apos.bus.$emit('widget-hover', this.widget._id);
+      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', {
+        _id: this.widget._id,
+        nonForeignId: this.foreign ? closestId : null
+      });
     },
 
     mouseleave() {
@@ -412,6 +425,12 @@ export default {
         this.state.add.top.show = false;
         this.state.add.bottom.show = false;
       }
+      if (this.hovered) {
+        apos.bus.$emit('widget-hover', {
+          _id: null,
+          nonForeignId: null
+        });
+      }
     },
 
     focus(e) {
@@ -432,7 +451,7 @@ export default {
         this.focused = false;
         this.resetState();
         this.highlightable = false;
-        document.removeEventListener('click', this.blurUnfocus);
+        document.removeEventListener('click', this.unfocus);
         apos.bus.$emit('widget-focus', null);
       }
     },
@@ -477,9 +496,11 @@ export default {
     widgetComponent(type) {
       return this.moduleOptions.components.widgets[type];
     },
+
     widgetEditorComponent(type) {
       return this.moduleOptions.components.widgetEditors[type];
     }
+
   }
 };
 </script>

package/modules/@apostrophecms/asset/lib/globalIcons.js

@@ -80,6 +80,7 @@ module.exports = {
   'trash-can-outline-icon': 'TrashCanOutline',
   'tune-icon': 'Tune',
   'undo-icon': 'UndoVariant',
+  'unfold-less-horizontal-icon': 'UnfoldLessHorizontal',
   'unfold-more-horizontal-icon': 'UnfoldMoreHorizontal',
   'video-icon': 'Video',
   'view-column-icon': 'ViewColumn',

package/modules/@apostrophecms/i18n/i18n/en.json

@@ -306,6 +306,9 @@
   "publish": "Publish",
   "publishBeforeUsingTooltip": "Publish this content before using it in a relationship",
   "published": "Published",
+  "publishType": "Publish {{ type }}",
+  "publishingBatchConfirmation": "Are you sure you want to publish {{ count }} {{ type }}?",
+  "publishingBatchConfirmationButton": "Yes, publish content.",
   "rawCssAndJs": "Raw CSS and JS",
   "rawHtml": "Raw HTML",
   "rawHtmlCode": "Raw HTML (Code)",

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

@@ -105,6 +105,19 @@ module.exports = {
   utilityOperations: {},
   batchOperations: {
     add: {
+      publish: {
+        label: 'apostrophe:publish',
+        messages: {
+          progress: 'Publishing {{ type }}...',
+          completed: 'Published {{ count }} {{ type }}.'
+        },
+        icon: 'earth-icon',
+        modalOptions: {
+          title: 'apostrophe:publishType',
+          description: 'apostrophe:publishingBatchConfirmation',
+          confirmationButton: 'apostrophe:publishingBatchConfirmationButton'
+        }
+      },
       archive: {
         label: 'apostrophe:archive',
         messages: {
@@ -295,6 +308,31 @@ module.exports = {
           }
           return self.publish(req, draft);
         },
+        async publish (req) {
+          if (!Array.isArray(req.body._ids)) {
+            throw self.apos.error('invalid');
+          }
+
+          req.body._ids = req.body._ids.map(_id => {
+            return self.inferIdLocaleAndMode(req, _id);
+          });
+
+          return self.apos.modules['@apostrophecms/job'].runBatch(
+            req,
+            req.body._ids,
+            async function(req, id) {
+              const piece = await self.findOneForEditing(req, { _id: id });
+
+              if (!piece) {
+                throw self.apos.error('notfound');
+              }
+
+              await self.publish(req, piece);
+            }, {
+              action: 'publish'
+            }
+          );
+        },
         async archive (req) {
           if (!Array.isArray(req.body._ids)) {
             throw self.apos.error('invalid');

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

@@ -661,9 +661,12 @@ module.exports = {
         let relationships = [];
 
         function findRelationships(schema, arrays) {
+          // Shallow clone of each relationship to allow
+          // for independent _dotPath and _arrays properties
+          // for different requests
           const _relationships = _.filter(schema, function (field) {
             return !!self.fieldTypes[field.type].relate;
-          });
+          }).map(relationship => ({ ...relationship }));
           _.each(_relationships, function (relationship) {
             if (!arrays.length) {
               relationship._dotPath = relationship.name;

package/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue

@@ -11,7 +11,85 @@
       />
     </template>
     <template #body>
-      <div class="apos-input-array">
+      <div v-if="field.inline">
+        <draggable
+          v-if="field.inline"
+          class="apos-input-array-inline"
+          tag="div"
+          role="list"
+          :list="items"
+          v-bind="dragOptions"
+          :id="listId"
+        >
+          <div
+            v-for="(item, index) in items"
+            :key="item._id"
+            class="apos-input-array-inline-item"
+            :class="item.open ? 'apos-input-array-inline-item--active' : null"
+          >
+            <div class="apos-input-array-inline-item-controls">
+              <AposIndicator
+                icon="drag-icon"
+                class="apos-drag-handle"
+              />
+              <AposButton
+                v-if="item.open && !alwaysExpand"
+                class="apos-input-array-inline-collapse"
+                :icon-size="20"
+                label="apostrophe:close"
+                icon="unfold-less-horizontal-icon"
+                type="subtle"
+                :modifiers="['inline', 'no-motion']"
+                :icon-only="true"
+                @click="closeInlineItem(item._id)"
+              />
+            </div>
+            <div class="apos-input-array-inline-content-wrapper">
+              <h3
+                class="apos-input-array-inline-label"
+                v-if="!item.open && !alwaysExpand"
+                @click="openInlineItem(item._id)"
+              >
+                {{ getLabel(item._id, index) }}
+              </h3>
+              <transition name="collapse">
+                <div
+                  v-show="item.open"
+                  class="apos-input-array-inline-schema-wrapper"
+                >
+                  <AposSchema
+                    :schema="field.schema"
+                    v-model="item.schemaInput"
+                    :trigger-validation="triggerValidation"
+                    :utility-rail="false"
+                    :generation="generation"
+                    :modifiers="['small', 'inverted']"
+                  />
+                </div>
+              </transition>
+            </div>
+            <div class="apos-input-array-inline-item-controls apos-input-array-inline-item-controls--remove">
+              <AposButton
+                label="apostrophe:removeItem"
+                icon="trash-can-outline-icon"
+                type="subtle"
+                :modifiers="['inline', 'danger', 'no-motion']"
+                :icon-only="true"
+                @click="remove(item._id)"
+              />
+            </div>
+          </div>
+        </draggable>
+        <AposButton
+          type="button"
+          label="apostrophe:addItem"
+          icon="plus-icon"
+          :disabled="disableAdd()"
+          :modifiers="[ 'block' ]"
+          @click="add"
+        />
+      </div>
+      <div v-else class="apos-input-array">
         <label class="apos-input-wrapper">
           <AposButton
             :label="editLabel"
@@ -27,27 +105,100 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
+import cuid from 'cuid';
+import { klona } from 'klona';
+import draggable from 'vuedraggable';
 
 export default {
   name: 'AposInputArray',
+  components: { draggable },
   mixins: [ AposInputMixin ],
-  data () {
-    return {
-      // Next should consistently be an array.
-      next: (this.value && Array.isArray(this.value.data))
-        ? this.value.data : (this.field.def || [])
+  props: {
+    generation: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    const next = this.getNext();
+    const data = {
+      next,
+      items: modelItems(next, this.field)
     };
+    return data;
   },
   computed: {
-    editLabel () {
+    alwaysExpand() {
+      return alwaysExpand(this.field);
+    },
+    listId() {
+      return `sortableList-${cuid()}`;
+    },
+    dragOptions() {
+      return {
+        disabled: this.field.readOnly || this.next.length <= 1,
+        ghostClass: 'apos-is-dragging',
+        handle: '.apos-drag-handle'
+      };
+    },
+    editLabel() {
       return {
         key: 'apostrophe:editType',
         type: this.$t(this.field.label)
       };
+    },
+    effectiveError() {
+      const error = this.error || this.serverError;
+      // Server-side errors behave differently
+      const name = error?.name || error;
+      if (name === 'invalid') {
+        // Always due to a subproperty which will display its own error,
+        // don't confuse the user
+        return false;
+      }
+      return error;
+    }
+  },
+  watch: {
+    generation() {
+      this.next = this.getNext();
+      this.items = modelItems(this.next, this.field);
+    },
+    items: {
+      deep: true,
+      handler() {
+        const erroneous = this.items.filter(item => item.schemaInput.hasErrors);
+        if (erroneous.length) {
+          erroneous.forEach(item => {
+            if (!item.open) {
+              // Make errors visible
+              item.open = true;
+            }
+          });
+        } else {
+          const next = this.items.map(item => ({
+            ...item.schemaInput.data,
+            _id: item._id,
+            metaType: 'arrayItem',
+            scopedArrayName: this.field.scopedArrayName
+          }));
+          this.next = next;
+        }
+        // Our validate method was called first before that of
+        // the subfields, so remedy that by calling again on any
+        // change to the subfield state during validation
+        if (this.triggerValidation) {
+          this.validateAndEmit();
+        }
+      }
     }
   },
   methods: {
-    validate (value) {
+    validate(value) {
+      if (this.items.find(item => item.schemaInput.hasErrors)) {
+        return 'invalid';
+      }
       if (this.field.required && !value.length) {
         return 'required';
       }
@@ -59,10 +210,7 @@ export default {
       }
       return false;
     },
-    update (items) {
-      this.next = items;
-    },
-    async edit () {
+    async edit() {
       const result = await apos.modal.execute('AposArrayEditor', {
         field: this.field,
         items: this.next,
@@ -71,7 +219,139 @@ export default {
       if (result) {
         this.next = result;
       }
+    },
+    getNext() {
+      // Next should consistently be an array.
+      return (this.value && Array.isArray(this.value.data))
+        ? this.value.data : (this.field.def || []);
+    },
+    disableAdd() {
+      return this.field.max && (this.items.length >= this.field.max);
+    },
+    remove(_id) {
+      this.items = this.items.filter(item => item._id !== _id);
+    },
+    add() {
+      const _id = cuid();
+      this.items.push({
+        _id,
+        schemaInput: {
+          data: this.newInstance()
+        },
+        open: alwaysExpand(this.field)
+      });
+      this.openInlineItem(_id);
+    },
+    newInstance() {
+      const instance = {};
+      for (const field of this.field.schema) {
+        if (field.def !== undefined) {
+          instance[field.name] = klona(field.def);
+        }
+      }
+      return instance;
+    },
+    getLabel(id, index) {
+      const titleField = this.field.titleField || null;
+      const item = this.items.find(item => item._id === id);
+      return item.schemaInput.data[titleField] || `Item ${index + 1}`;
+    },
+    openInlineItem(id) {
+      this.items.forEach(item => {
+        item.open = (item._id === id) || this.alwaysExpand;
+      });
+    },
+    closeInlineItem(id) {
+      this.items.forEach(item => {
+        item.open = this.alwaysExpand;
+      });
     }
   }
 };
+
+function modelItems(items, field) {
+  return items.map(item => {
+    const open = alwaysExpand(field);
+    return {
+      _id: item._id || cuid(),
+      schemaInput: {
+        data: item
+      },
+      open
+    };
+  });
+}
+
+function alwaysExpand(field) {
+  if (!field.inline) {
+    return false;
+  }
+  if (field.inline.alwaysExpand === undefined) {
+    return field.schema.length < 3;
+  }
+  return field.inline.alwaysExpand;
+}
 </script>
+<style lang="scss" scoped>
+  .apos-is-dragging {
+    opacity: 0.5;
+    background: var(--a-base-4);
+  }
+  .apos-input-array-inline-label {
+    transition: background-color 0.3s ease;
+    @include type-label;
+    margin: 0;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  .apos-input-array-inline-item {
+    position: relative;
+    transition: background-color 0.3s ease;
+    display: flex;
+    border-bottom: 1px solid var(--a-base-9);
+    &:hover {
+      background-color: var(--a-base-10);
+    }
+  }
+  .apos-input-array-inline-collapse {
+    position: absolute;
+    top: $spacing-quadruple;
+    left: 7.5px;
+  }
+
+  .apos-input-array-inline-item--active {
+    background-color: var(--a-base-10);
+    border-bottom: 1px solid var(--a-base-6);
+    .apos-input-array-inline-content-wrapper {
+      padding-top: $spacing-base;
+      padding-bottom: $spacing-base;
+    }
+  }
+  .apos-input-array-inline-item-controls {
+    padding: $spacing-base;
+  }
+
+  .apos-input-array-inline-label {
+    padding-top: $spacing-base;
+    padding-bottom: $spacing-base;
+  }
+
+  .apos-input-array-inline-content-wrapper {
+    flex-grow: 1;
+  }
+
+  .apos-input-array-inline-schema-wrapper {
+    max-height: 999px;
+    overflow: hidden;
+    transition: max-height 0.5s;
+  }
+
+  .collapse-enter, .collapse-leave-to {
+    max-height: 0;
+  }
+
+  .collapse-enter-to, .collapse-leave {
+    max-height: 999px;
+  }
+</style>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -49,8 +49,19 @@ export default {
     };
   },
   watch: {
-    schemaInput() {
-      this.next = this.schemaInput.data;
+    schemaInput: {
+      deep: true,
+      handler() {
+        if (!this.schemaInput.hasErrors) {
+          this.next = this.schemaInput.data;
+        }
+        // Our validate method was called first before that of
+        // the subfields, so remedy that by calling again on any
+        // change to the subfield state during validation
+        if (this.triggerValidation) {
+          this.validateAndEmit();
+        }
+      }
     },
     generation() {
       this.next = this.getNext();

package/modules/@apostrophecms/schema/ui/apos/components/AposSchema.vue

@@ -330,10 +330,14 @@ export default {
   .apos-field {
     .apos-schema ::v-deep & {
       margin-bottom: $spacing-quadruple;
+      &.apos-field--small,
       &.apos-field--micro,
       &.apos-field--margin-micro {
         margin-bottom: $spacing-double;
       }
+      &.apos-field--margin-none {
+        margin-bottom: 0;
+      }
     }
 
     .apos-schema ::v-deep .apos-toolbar & {

package/modules/@apostrophecms/submitted-draft/index.js

@@ -60,6 +60,10 @@ module.exports = {
     }
   },
 
+  batchOperations: {
+    remove: [ 'publish' ]
+  },
+
   handlers(self) {
     return {
       'apostrophe:modulesRegistered': {

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -512,6 +512,9 @@ export default {
     &[disabled].apos-button--busy {
       border: 1px solid var(--a-danger-button-disabled);
     }
+    &.apos-button--inline {
+      color: var(--a-danger-button-active);
+    }
     .apos-spinner__svg {
       color: var(--a-danger);
     }

package/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue

@@ -42,6 +42,7 @@
 
 <script>
 import draggable from 'vuedraggable';
+import cuid from 'cuid';
 
 export default {
   name: 'AposSlatList',
@@ -89,7 +90,7 @@ export default {
   },
   computed: {
     listId() {
-      return `sortableList-${(Math.floor(Math.random() * Math.floor(10000)))}`;
+      return `sortableList-${cuid()}`;
     },
     dragOptions() {
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "3.32.0",
+  "version": "3.33.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {

package/test/concurrent-array-relationships.js

@@ -0,0 +1,101 @@
+const t = require('../test-lib/test.js');
+const assert = require('assert');
+const { klona } = require('klona');
+
+describe('Concurrent Array Joins', function() {
+
+  after(async function() {
+    return t.destroy(apos);
+  });
+
+  this.timeout(t.timeout);
+
+  let apos;
+
+  // EXISTENCE
+
+  it('should be a property of the apos object', async function() {
+    apos = await t.create({
+      root: module,
+      modules: {
+        'test-person': {
+          extend: '@apostrophecms/piece-type',
+          options: {
+            alias: 'person'
+          },
+          fields: {
+            add: {
+              hobbies: {
+                type: 'array',
+                fields: {
+                  add: {
+                    name: {
+                      type: 'string'
+                    },
+                    _friends: {
+                      type: 'relationship',
+                      withType: 'test-person'
+                      // builders: {
+                      //   project: {
+                      //     title: 1
+                      //   }
+                      // }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  it('should be able to retrieve hobbies in parallel with all relationships', async function() {
+    const req = apos.task.getReq();
+    const hobbyists = [];
+    for (let i = 0; (i < 10); i++) {
+      hobbyists.push(await apos.person.insert(req, {
+        title: `Hobbyist ${i}`,
+        visibility: 'public'
+      }));
+    }
+    for (let i = 0; (i < 10); i++) {
+      await apos.person.update(req, {
+        ...hobbyists[i],
+        hobbies: [
+          {
+            name: `Hobby ${i}`,
+            _friends: [
+              // Deep clone to avoid infinite recursion during the save operation
+              // as 4 points to 5 and vice versa
+              klona(hobbyists[9 - i])
+            ]
+          }
+        ]
+      });
+    }
+    const promises = [];
+    for (let i = 0; (i < 100); i++) {
+      const req = apos.task.getReq();
+      promises.push(apos.person.find(req).toArray());
+    }
+    const results = await Promise.all(promises);
+    assert.strictEqual(results.length, 100);
+    for (const result of results) {
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+      result.sort((a, b) => a.title.localeCompare(b.title));
+      assert.strictEqual(result.length, 10);
+      for (let i = 0; (i < 10); i++) {
+        const person = result[i];
+        assert.strictEqual(person.title, `Hobbyist ${i}`);
+        console.log(person);
+        assert.strictEqual(person.hobbies.length, 1);
+        assert.strictEqual(person.hobbies[0].name, `Hobby ${i}`);
+        assert(person.hobbies[0]._friends);
+        assert(person.hobbies[0]._friends[0]);
+        assert.strictEqual(person.hobbies[0]._friends[0].title, `Hobbyist ${9 - i}`);
+      }
+    }
+  });
+});