apostrophe 4.3.1 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 4.3.2 (2024-05-18)
+
+### Fixes
+
+* Corrects a regression introduced in version 4.3.0 that broke the validation of widget modals, resulting in a confusing
+error on the page. A "required" field in a widget, for instance, once again blocks the save operation properly.
+
+### Changes
+
+* Improves widget tab UI for the hidden entries, improves UX when validation errors are present in non-focused tabs.
+
 ## 4.3.1 (2024-05-17)
 
 ### Fixes

package/modules/@apostrophecms/modal/ui/apos/components/AposWidgetModalTabs.vue

@@ -18,21 +18,22 @@
             v-if="tabErrors[tab.name] && tabErrors[tab.name].length"
             class="apos-modal-tabs__label apos-modal-tabs__label--error"
           >
-            {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
+            {{ tabErrors[tab.name].length }} {{ generateErrorLabel(tabErrors[tab.name].length) }}
           </span>
         </button>
       </li>
       <li
-        v-if="hiddenTabs.length"
+        v-if="menuTabs.length"
         key="placeholder-for-hidden-tabs"
         class="apos-modal-tabs__tab apos-modal-tabs__tab--small"
       />
     </ul>
     <AposContextMenu
-      v-if="hiddenTabs.length"
-      :menu="hiddenTabs"
+      v-if="menuTabs.length"
+      :menu="menuTabs"
       menu-placement="bottom-end"
       :button="moreMenuButton"
+      data-apos-test="context-menu-tabs"
       @item-clicked="moreMenuHandler($event)"
     />
   </div>
@@ -64,7 +65,6 @@ export default {
   emits: [ 'select-tab' ],
   data() {
     const visibleTabs = [];
-    const hiddenTabs = [];
 
     for (let i = 0; i < this.tabs.length; i++) {
       // Shallow clone is sufficient to make mutating
@@ -73,14 +73,11 @@ export default {
       tab.action = tab.name;
       if (i < 5) {
         visibleTabs.push(tab);
-      } else {
-        hiddenTabs.push(tab);
       }
     }
 
     return {
       visibleTabs,
-      hiddenTabs,
       moreMenuButton: {
         icon: 'dots-vertical-icon',
         iconOnly: true,
@@ -100,6 +97,25 @@ export default {
         }
       }
       return errors;
+    },
+    menuTabs() {
+      return this.tabs.map((tab) => {
+        const modifiers = [];
+        if (tab.name === this.current) {
+          modifiers.push('selected');
+          if (!this.tabErrors[tab.name] || !this.tabErrors[tab.name].length) {
+            modifiers.push('primary');
+          }
+        }
+        if (this.tabErrors[tab.name] && this.tabErrors[tab.name].length) {
+          modifiers.push('danger');
+        }
+        return {
+          ...tab,
+          action: tab.name,
+          modifiers
+        };
+      });
     }
   },
   methods: {
@@ -116,12 +132,6 @@ export default {
       this.$emit('select-tab', id);
     },
     moreMenuHandler(item) {
-      const lastVisibleTab = this.visibleTabs[this.visibleTabs.length - 1];
-      const selectedItem = this.hiddenTabs.find((tab) => tab.name === item);
-
-      this.hiddenTabs.splice(this.hiddenTabs.indexOf(selectedItem), 1, lastVisibleTab);
-      this.visibleTabs.splice(this.visibleTabs.length - 1, 1, selectedItem);
-
       this.$emit('select-tab', item);
     }
   }
@@ -219,6 +229,7 @@ export default {
 
 .apos-modal-tabs__label--error {
   border: 1px solid var(--a-danger);
+  margin-left: 5px;
 }
 
 .apos-modal-tabs__btn {

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

@@ -4,6 +4,7 @@
       class="apos-context-menu__button"
       :class="modifiers"
       :tabindex="tabindex"
+      data-apos-test="context-menu-item"
       @click="click"
     >
       {{ $t(label) }}
@@ -91,6 +92,15 @@ export default {
       }
     }
 
+    &--primary {
+      color: var(--a-primary);
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--a-primary);
+      }
+    }
+
     &--disabled {
       color: var(--a-base-5);
       &:hover,

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -52,7 +52,7 @@
       <AposButton
         type="primary"
         :label="saveLabel"
-        :disabled="docFields.hasErrors"
+        :disabled="errorCount > 0"
         @click="save"
       />
     </template>
@@ -62,6 +62,7 @@
 <script>
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
+import AposDocErrorsMixin from 'Modules/@apostrophecms/modal/mixins/AposDocErrorsMixin';
 import AposModalTabsMixin from 'Modules/@apostrophecms/modal/mixins/AposModalTabsMixin';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
 import cuid from 'cuid';
@@ -69,7 +70,7 @@ import { klona } from 'klona';
 
 export default {
   name: 'AposWidgetEditor',
-  mixins: [ AposModifiedMixin, AposEditorMixin, AposModalTabsMixin ],
+  mixins: [ AposModifiedMixin, AposEditorMixin, AposDocErrorsMixin, AposModalTabsMixin ],
   props: {
     type: {
       required: true,
@@ -193,6 +194,7 @@ export default {
   },
   methods: {
     updateDocFields(value) {
+      this.updateFieldErrors(value.fieldState);
       this.docFields.data = {
         ...this.docFields.data,
         ...value.data
@@ -203,8 +205,14 @@ export default {
       this.triggerValidation = true;
       this.$nextTick(async () => {
         const widget = klona(this.docFields.data);
-        if (this.docFields.hasErrors) {
+        if (this.errorCount > 0) {
           this.triggerValidation = false;
+          await apos.notify('apostrophe:resolveErrorsBeforeSaving', {
+            type: 'warning',
+            icon: 'alert-circle-icon',
+            dismiss: true
+          });
+          this.focusNextError();
           return;
         }
         try {
@@ -239,6 +247,9 @@ export default {
           : null;
       });
       return widget;
+    },
+    getAposSchema(field) {
+      return this.$refs[field.group.name][0];
     }
   }
 };

package/package.json

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