moves widget operations to backend (#5111)

* moves widget operations to backend

* removes logs

* remove frontent operations, adds disabledIf

* uses native operations from backend in widget controls (only remove left)

* removes skipOperations

* uses cascades to remove edit widget operation in layout-widget, updates skipEdit computed

* adds remove to backend config, keep it standalone in frontend

* fixes widgets tests

* emit operation from widget control with name instead of each individual name

* disable and tooltip props for breadcrumb switch

* rework controls / breadcrumb

* breadcrumb switch must have a value even if no def (radio input)

* in area editor get index from payload object (more generic way to use an object)

* uses nativeAction

* action for switch layout

* listen to bus events directly in layout editor

* disabledIdData for layout switch

* renames disabledIfData, makes disable and tooltip "work" for switch choices

* removes breadcrumb switch general tooltip

* removes choiceTooltip

* remove control broken

* breadcrumb switch has null had default value

* uses same table / mobile values than in brekpoint preview

* adds disabled logic in normal widget operations, fix remove button, clean code

* removes useless labels from backend primary widget operations (only tooltip needed)

* removes logs

* moves breakpoint preview mode value into its own store (easy to retrieve, watch, compute etc)

* renames tinyWidgetContainer into tinyScreen

* in breadcrumb switch remove useless div, adds missing classes, reorganizes css

* adds translation key for disabled switch on tiny screen

* missing store update when switching layout mode

* readability

* if switch choice becomes disabled switch to another one or unset it

* styles when entire breadcrumb switch is disabled

* adds style for disabled breadcrumb switch choice

* global disabled for breadcrumb switch

* compare current mobile preview screen with layout-widget mobile and tablet breakpoint

* clean

* be sure table and/or mobile breakpoints are ok

* share operation disable and tooltip in lib file, support disable and disable tooltip on entire switch

* supports only two choices in breadcrumb operations

* passes tooltip for breadcrumb menu

* fixes widget operations native before separator

* removes unsused import

* gets back old tablet and mobile defaults

* fix move breadcrumb operation

* fixes widgets tests

* adds changelog

Author: ValJed

CHANGELOG.md

@@ -11,13 +11,16 @@
 * `widgetOperations` support for `placement: 'breadcrumb'` to add operations to the breadcrumb menu of widgets. Extend the widget operations configuration to support various features when in the breadcrumb menu.
 * Area template (Nunjucks) support for `aposStyle`, `aposClassName`, `aposParentOptions` and `aposAttrs` contextual named variables (`with {}` syntax).
 * New login option `caseInsensitive` to force login usernames and emails to be case insensitive. New task `login-case-insensitive` updating all login names / email to lowercase, used by a new migration when switching to `caseInsensitive`.
+* Adds `disableIfProps` and `disableTooltip` to widget operations and breadcrumb operations.
 
 ### Changes
 
 * Enable `/api/v1/@apostrophecms/login/logout` and `/api/v1/@apostrophecms/login/whoami` routes when `localLogin` is `false`.
 * Refactored complex logic regarding data updates in `AposSchema`.
 * Cleaned up `annotateAreaForExternalFront` logic and added context so developers understand the reason if it fails due to a widget type with no matching module in the project.
 * Color fields now display their preset color swatches in the field UI rather than just the color picker popup
+* Moves widget operations to backend with new `action` and `nativeAction` properties.
+* Moves `mode` from breakpoint preview to it's own store (to be used by layout).
 
 ### Fixes
 

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

@@ -56,6 +56,9 @@
   </div>
 </template>
 <script>
+import { mapState, mapActions } from 'pinia';
+import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
+
 export default {
   name: 'TheAposContextBreakpointPreviewMode',
   props: {
@@ -83,7 +86,6 @@ export default {
   emits: [ 'switch-breakpoint-preview-mode', 'reset-breakpoint-preview-mode' ],
   data() {
     return {
-      mode: null,
       originalBodyBackground: null,
       shortcuts: this.getShortcuts(),
       breakpoints: this.getBreakpointItems(),
@@ -94,6 +96,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useBreakpointPreviewStore, [ 'mode' ]),
     activeScreen() {
       return this.mode && this.screens[this.mode];
     },
@@ -154,6 +157,7 @@ export default {
     );
   },
   methods: {
+    ...mapActions(useBreakpointPreviewStore, [ 'setMode' ]),
     observerCallback(mutationList, observer) {
       for (const mutation of mutationList) {
         if (
@@ -205,7 +209,7 @@ export default {
       refreshableEl.style.width = width;
       refreshableEl.style.height = height;
 
-      this.mode = mode;
+      this.setMode(mode);
       this.$emit('switch-breakpoint-preview-mode', {
         mode,
         label,
@@ -249,7 +253,7 @@ export default {
       refreshableEl.style.removeProperty('width');
       refreshableEl.style.removeProperty('height');
 
-      this.mode = null;
+      this.setMode(null);
       this.$emit('reset-breakpoint-preview-mode');
       this.saveState({ mode: this.mode });
     },

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

@@ -80,13 +80,14 @@
         <AposBreadcrumbOperations
           v-if="widgetBreadcrumbOperations.length > 0"
           :i="i"
+          :tiny-screen="tinyScreen"
           :widget="widget"
           :options="options"
           :disabled="disabled"
           :is-focused="isFocused"
           @widget-focus="getFocus"
           @update="$emit('update', $event)"
-          @operation="onBreadcrumbOperation"
+          @operation="onOperation"
         />
       </div>
       <div
@@ -128,6 +129,7 @@
       >
         <AposWidgetControls
           v-if="!foreign"
+          :index="i"
           :first="i === 0"
           :last="i === next.length - 1"
           :options="{ contextual: isContextual }"
@@ -136,14 +138,8 @@
           :tabbable="isFocused"
           :model-value="widget"
           :widget-options="widgetOptions"
-          @up="$emit('up', i);"
-          @remove="$emit('remove', i);"
-          @edit="$emit('edit', i);"
-          @cut="$emit('cut', i);"
-          @copy="$emit('copy', i);"
-          @clone="$emit('clone', i);"
-          @down="$emit('down', i);"
           @update="$emit('update', $event)"
+          @operation="onOperation"
         />
       </div>
 
@@ -211,7 +207,7 @@
 <script>
 import { mapState, mapActions } from 'pinia';
 import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
-
+import { useBreakpointPreviewStore } from 'Modules/@apostrophecms/ui/stores/breakpointPreview.js';
 export default {
   name: 'AposAreaWidget',
   props: {
@@ -357,6 +353,7 @@ export default {
       'hoveredNonForeignWidget',
       'emphasizedWidgets'
     ]),
+    ...mapState(useBreakpointPreviewStore, { breakpointPreviewMode: 'mode' }),
     // Passed only to the preview layer (custom preview components).
     followingValuesWithParent() {
       return Object.entries(this.followingValues || {})
@@ -402,7 +399,8 @@ export default {
       return (this.widgetModuleOptions.widgetBreadcrumbOperations || []);
     },
     shouldSkipEdit() {
-      return this.widgetModuleOptions.skipOperations?.includes('edit') ?? false;
+      return !this.widgetModuleOptions.widgetOperations
+        .some((op) => op.action === 'edit');
     },
     isFocused() {
       return this.focusedWidget === this.widget._id;
@@ -451,7 +449,29 @@ export default {
     },
     foreign() {
       // Cast to boolean is necessary to satisfy prop typing
-      return !!(this.docId && (window.apos.adminBar.contextId !== this.docId));
+      return !!(this.docId && (apos.adminBar.contextId !== this.docId));
+    },
+    tinyScreen() {
+      if (!this.breakpointPreviewMode) {
+        return false;
+      }
+      // How to detect mobile if users have their own screen names..
+      // Should we consider the tinier the mobile, or should we degine an abstract value?
+      const [ _, curScreen ] = Object.entries(apos.adminBar.breakpointPreviewMode.screens)
+        .find(([ screen, _ ]) => screen === this.breakpointPreviewMode) || [ null, null ];
+      if (!curScreen) {
+        return false;
+      }
+      const screenWidth = parseInt(curScreen.width);
+      const layoutWidgetGrid = apos.modules['@apostrophecms/layout-widget'].grid;
+      if (!layoutWidgetGrid) {
+        return false;
+      }
+      const tinyScreenStart = Math.max(
+        layoutWidgetGrid.tablet?.breakpoint,
+        layoutWidgetGrid.mobile?.breakpoint
+      );
+      return screenWidth <= tinyScreenStart;
     }
   },
   watch: {
@@ -503,7 +523,7 @@ export default {
     }
 
     this.$nextTick(() => {
-      this.adminBarHeight = window.apos.adminBar.height;
+      this.adminBarHeight = apos.adminBar.height;
       this.controlsHeight = this.$refs.modifyControls.getBoundingClientRect().height;
 
       // The height of elements we need to account for when re-attaching the controls
@@ -524,9 +544,9 @@ export default {
   },
   methods: {
     ...mapActions(useWidgetStore, [ 'setFocusedWidget', 'setHoveredWidget' ]),
-    // Emits same actions as the Standard operations,
-    // e.g ('edit', i), ('remove', i), etc.
-    onBreadcrumbOperation({ name, payload }) {
+    // Emits same actions as the native operations,
+    // e.g ('edit', { index }), ('remove', { index }), etc.
+    onOperation({ name, payload }) {
       this.$emit(name, payload);
     },
     updateStickyStyles(newStyles) {

modules/@apostrophecms/area/ui/apos/components/AposBreadcrumbOperations.vue

@@ -48,8 +48,9 @@
 </template>
 
 <script>
-import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
 import { mapActions } from 'pinia';
+import { useWidgetStore } from 'Modules/@apostrophecms/ui/stores/widget';
+import { isOperationDisabled, getOperationTooltip } from '../lib/operations.js';
 
 export default {
   name: 'AposBreadcrumbOperations',
@@ -58,6 +59,10 @@ export default {
       type: Number,
       required: true
     },
+    tinyScreen: {
+      type: Boolean,
+      default: false
+    },
     options: {
       type: Object,
       default() {
@@ -159,21 +164,42 @@ export default {
       return 'AposButton';
     },
     getOperationProps(operation) {
+      const disabled = this.disabled || isOperationDisabled(operation, this.$props);
+      const tooltip = getOperationTooltip(operation, {
+        disabled,
+        placement: 'bottom'
+      });
+
       if (operation.type === 'info') {
         return {
           fillColor: 'var(--a-primary)',
           icon: operation.icon,
-          tooltip: operation.tooltip
+          tooltip: operation.tooltip,
+          disabled
         };
       }
 
       if (operation.type === 'switch') {
+        const choices = operation.choices.map((choice) => {
+          const disabled = isOperationDisabled(choice, this.$props);
+          const tooltip = getOperationTooltip(choice, {
+            disabled,
+            placement: 'bottom'
+          });
+          return {
+            ...choice,
+            disabled,
+            tooltip
+          };
+        });
         return {
           widgetId: this.widget._id,
           name: operation.name,
-          choices: operation.choices,
+          choices,
           value: operation.def,
-          class: 'apos-area-widget--switch'
+          class: 'apos-area-widget--switch',
+          disabled,
+          tooltip
         };
       }
 
@@ -183,8 +209,9 @@ export default {
             ...this.operationButtonDefault,
             icon: operation.icon
           },
-          tooltip: operation.tooltip || null,
-          teleportContent: this.teleportModals
+          teleportContent: this.teleportModals,
+          disabled,
+          tooltip
         };
       }
 
@@ -255,23 +282,23 @@ export default {
 
       this.emitOperation(operation);
     },
-    emitOperation(operation, payload = {}) {
-      if (operation.action || operation.rawEvents?.length) {
+    emitOperation(operation, data = {}) {
+      const payload = {
+        widgetId: this.widget._id,
+        index: this.i,
+        data
+      };
+
+      if (operation.nativeAction) {
         this.$emit('operation', {
-          name: operation.action,
-          payload: this.i,
-          data: {
-            ...payload,
-            ...operation,
-            _id: this.widget._id
-          }
-        });
-      } else {
-        apos.bus.$emit('widget-breadcrumb-operation', {
-          ...payload,
-          ...operation,
-          _id: this.widget._id
+          name: operation.nativeAction,
+          payload
         });
+        return;
+      }
+
+      if (operation.action) {
+        apos.bus.$emit(operation.action, payload);
       }
     },