Merge pull request #4221 from apostrophecms/add-if-feature-to-context…

…_operations

Add if feature to context operations

CHANGELOG.md

@@ -7,6 +7,7 @@
 * Accessibility improved for navigation inside modals and various UI elements.  
 Pages/Docs Manager and Doc Editor modal now have better keyboard accessibility.
 They keep the focus on elements inside modals and give it back to their parent modal when closed.
+* Adds support for a new `if` property in `addContextOperation` in order to show or not a context operation based on the current document properties. 
 
 ### Fixes
 - Fixes a problem in the rich text editor where the slash would not be deleted after item selectin from the insert menu.

lib/check-if-conditions.js

@@ -0,0 +1,34 @@
+
+export default function checkIfConditions(doc, conditions) {
+  return Object.entries(conditions).every(([ key, value ]) => {
+    if (key === '$or') {
+      return checkOrConditions(doc, value);
+    }
+
+    const isNotEqualCondition = typeof value === 'object' &&
+          !Array.isArray(value) &&
+          value !== null &&
+          Object.hasOwn(value, '$ne');
+
+    if (isNotEqualCondition) {
+      return getNestedPropValue(doc, key) !== value.$ne;
+    }
+
+    return getNestedPropValue(doc, key) === value;
+  });
+}
+
+function checkOrConditions(doc, conditions) {
+  return conditions.some((condition) => {
+    return checkIfConditions(doc, condition);
+  });
+}
+
+function getNestedPropValue(doc, key) {
+  if (key.includes('.')) {
+    const keys = key.split('.');
+    return keys.reduce((acc, cur) => acc[cur], doc);
+  }
+
+  return doc[key];
+}

modules/@apostrophecms/doc-type/ui/apos/components/AposDocContextMenu.vue

@@ -23,6 +23,7 @@ import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange'
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
 import AposArchiveMixin from 'Modules/@apostrophecms/ui/mixins/AposArchiveMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
+import checkIfConditions from 'apostrophe/lib/check-if-conditions';
 
 export default {
   name: 'AposDocContextMenu',
@@ -196,7 +197,7 @@ export default {
     },
     customOperationsByContext() {
       return this.customOperations.filter(({
-        manuallyPublished, hasUrl, conditions, context
+        manuallyPublished, hasUrl, conditions, context, if: ifProps
       }) => {
         if (typeof manuallyPublished === 'boolean' && manuallyPublished !== this.manuallyPublished) {
           return false;
@@ -214,6 +215,14 @@ export default {
           }
         }
 
+        if (ifProps) {
+          const canSeeOperation = checkIfConditions(this.doc, ifProps);
+
+          if (!canSeeOperation) {
+            return false;
+          }
+        }
+
         return context === 'update' && this.isUpdateOperation;
       });
     },
@@ -447,6 +456,3 @@ export default {
   }
 };
 </script>
-
-<style lang="scss" scoped>
-</style>

modules/@apostrophecms/doc/index.js

@@ -1184,7 +1184,7 @@ module.exports = {
         ];
 
         function validate ({
-          action, context, label, modal, conditions
+          action, context, label, modal, conditions, if: ifProps
         }) {
           const allowedConditions = [
             'canPublish',
@@ -1199,19 +1199,25 @@ module.exports = {
           ];
 
           if (!action || !context || !label || !modal) {
-            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal properties');
+            throw self.apos.error('invalid', 'addContextOperation requires action, context, label and modal properties.');
           }
 
-          if (!conditions) {
-            return;
+          if (
+            conditions &&
+            (!Array.isArray(conditions) ||
+            conditions.some((perm) => !allowedConditions.includes(perm)))
+          ) {
+            throw self.apos.error(
+              'invalid', `The conditions property in addContextOperation must be an array containing one or multiple of these values:\n\t${allowedConditions.join('\n\t')}.`
+            );
           }
 
           if (
-            !Array.isArray(conditions) ||
-            conditions.some((perm) => !allowedConditions.includes(perm))
+            ifProps &&
+            (typeof ifProps !== 'object' || Array.isArray(ifProps))
           ) {
             throw self.apos.error(
-              'invalid', `The conditions property in addContextOperation must be an array containing one or multiple of these values:\n\t${allowedConditions.join('\n\t')}.`
+              'invalid', 'The if property in addContextOperation must be an object containing properties and values that will be checked against the current document in order to show or not the context operation.'
             );
           }
         }