Actions button disabled instead of hidden (#434)

* actions button disabled instead of hidden * fix test, update documentation * add test for actions block
kendraio · Feb 28, 2024 · 26d0655 · 26d0655
1 parent 34c4fc5
commit 26d0655
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 27 deletions.
diff --git a/cypress/e2e/actions.ts b/cypress/e2e/actions.ts
@@ -0,0 +1,61 @@
+import { loadFlowCode } from '../support/helper';
+
+/// <reference types="Cypress" />
+
+
+describe('Actions block type', () => {
+    it('should display a button with label, id and default color', () => {
+
+        loadFlowCode([
+            {
+                "type": "actions",
+                "buttons": [
+                  {
+                    "label": "OK",
+                    "color": "primary",
+                    "id": "button-primary",
+                    "blocks": [
+                      {
+                        "type": "dispatch",
+                        "action": "resetApp"
+                      }
+                    ]
+                  },
+                  {
+                    "label": "Cancel",
+                    "id": "button-cancel",
+                    "blocks": [
+                      {
+                        "type": "init"
+                      }
+                    ]
+                  }
+                ]
+              }
+        ]);
+        cy.get("#button-primary").should('exist');
+        cy.get("#button-primary").contains('OK');
+        cy.get("#button-primary").should('have.attr', 'ng-reflect-color', 'primary');
+        cy.get("#button-cancel").should('exist');
+        cy.get("#button-cancel").contains('Cancel');
+    });
+
+    it('should display a disabled button', () => {
+        loadFlowCode([
+            {
+                "type": "actions",
+                "buttons": [
+                  {
+                    "label": "Disabled",
+                    "id": "button-disabled",
+                    "blocks": [],
+                    "enabledGetter": false
+                  }
+                ]
+              }
+        ]);
+        cy.get("#button-disabled").should('exist');
+        cy.get("#button-disabled").should('have.attr', 'ng-reflect-disabled');
+    });
+});
+
diff --git a/cypress/e2e/context_and_state.ts b/cypress/e2e/context_and_state.ts
@@ -217,7 +217,7 @@ describe('Kendraio context and state', () => {
           "id": "button-enabled"
         },
         {
-          "label": "Hidden",
+          "label": "Visible and disabled",
           "color": "default",
           "blocks": [],
           "enabledGetter": "state.global.disabled",
@@ -226,7 +226,8 @@ describe('Kendraio context and state', () => {
       ]
     }]);
     cy.get("#button-enabled").should('exist');
-    cy.contains("Hidden").should('not.exist');
+    cy.get("#button-disabled").should('exist');
+    cy.get("#button-disabled").should('have.attr', 'ng-reflect-disabled');
   });
 
   it('should allow the disabling of the datagrid', () => {

diff --git a/docs/workflow/blocks/actions.rst b/docs/workflow/blocks/actions.rst
@@ -14,6 +14,8 @@ Default config
         {
           "label": "Action",
           "color": "default",
+          "enabledGetter": true,
+          "enabled": true,
           "blocks": []
         }
       ]
@@ -26,8 +28,15 @@ Supported properties
 - **buttons** (array) - the list of buttons. Each button in the list has the following properties:
 
   - **label** (string) - the text for the button label
+  - **id** (string) - the unique identifier for the button
   - **color** (string) - passed as the “color” attribute to the material button. Use one of the supported
     Material color values, such as “primary”, “warn”, “accent”. Leave as “default” to use the default button styling for a plain button.
+  - **enabledGetter** (string) - A value from the state or context. Based on this value, it generates an "enabled" property on the button.
+  The button will be shown as disabled (greyed out) or enabled accordingly. The default value of this property is `true`. After 
+  the block is loaded, it will automatically add a property to the block json: `"enabled": true`.
+  If `enabledGetter` is set to `false` the automatic property will be then shown as `"enabled": false`.
+  - **valueGetters** (string) - A value that will be pass as context to whichever action is being executed. 
+  This is a JMESPath mapping.
   - **blocks** (array) - the list of workflow items to run when this button is pressed.
 
 Example
@@ -38,27 +47,109 @@ This example shows two buttons. The first one dispatches an asynchronous command
 block in order to start the inner workflow so that it runs and signals completion to the outer workflow.
 
 .. code-block:: json
+  {
+    "type": "actions",
+    "buttons": [
+      {
+        "label": "OK",
+        "color": "primary",
+        "blocks": [
+          {
+            "type": "dispatch",
+            "action": "resetApp"
+          }
+        ]
+      },
+      {
+        "label": "Cancel",
+        "blocks": [
+          {
+            "type": "init"
+          }
+        ]
+      }
+    ]
+  }
 
-                        {
-                          "type": "actions",
-                          "buttons": [
-                            {
-                              "label": "OK",
-                              "color": "primary",
-                              "blocks": [
-                                {
-                                  "type": "dispatch",
-                                  "action": "resetApp"
-                                }
-                              ]
-                            },
-                            {
-                              "label": "Cancel",
-                              "blocks": [
-                                {
-                                  "type": "init"
-                                }
-                              ]
-                            }
-                          ]
-                        }
+valueGetters
+++++++++++++++++++++++
+In this example, we are specifying which flow to load when the button is clicked. We do so using the `valueGetters` property and specifying an `adapter` and a `workflowId`.
+You can find this example on the `Flow Cloud <https://app.kendra.io/workflowCloud/listWorkflows>`, in the list of workflows.
+
+.. code-block:: json
+  {
+    "type": "actions",
+    "buttons": [
+        {
+            "label": "Launch",
+            "blocks": [
+                {
+                    "type": "launch",
+                    "valueGetters": {
+                        "adapter": "data.adapterName",
+                        "workflowId": "data.id"
+                    }
+                }
+            ],
+            "enabled": true
+        }
+    ]
+}
+
+
+enabledGetter
+++++++++++++++++++++++
+`enabledGetter` determines if the button is enabled or disabled. This is mostly referring to the UI of the button. 
+If the button is disabled, it will be displayed as greyed out and it will not be clickable.
+`enabledGetter` requires a JMESPath mapping value that should return `true` or `false`.
+The value can be added manually or taken from the state or the context.
+In this example we want to display two different buttons, one enabled and another disabled.
+To do so we take values we have saved in the state and assign them to the `enabledGetter` property.
+
+
+.. code-block:: json
+
+  {
+      "type": "actions",
+      "buttons": [
+        {
+          "label": "Visible",
+          "color": "default",
+          "blocks": [],
+          "enabledGetter": "state.global.enabled"
+        },
+        {
+          "label": "Disabled",
+          "color": "default",
+          "blocks": [],
+          "enabledGetter": "state.global.disabled",
+          "enabled": false
+        }
+      ]
+    }
+
+
+After the block as loaded, the `enabled` property will be set on the button:
+.. code-block:: json
+
+  {
+      "type": "actions",
+      "buttons": [
+        {
+          "label": "Visible",
+          "color": "default",
+          "blocks": [],
+          "enabledGetter": "state.global.enabled",
+          "enabled": true
+        },
+        {
+          "label": "Disabled",
+          "color": "default",
+          "blocks": [],
+          "enabledGetter": "state.global.disabled",
+          "enabled": false
+        }
+      ]
+    }
+
+Buttons do not work for external links. Consider the :doc:`Template Block <template>` for external links.
diff --git a/src/app/blocks/actions-block/actions-block.component.html b/src/app/blocks/actions-block/actions-block.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngFor="let b of buttons; let i = index">
-  <button [attr.id]="b.id" type="button" class="actions-button" *ngIf="b.enabled && (!b.color || b.color !== 'link')"
-          mat-flat-button [color]="b.color" (click)="onSubmit(b)">{{ getLabel(b) }}</button>
+  <button [attr.id]="b.id" type="button" class="actions-button" *ngIf="(!b.color || b.color !== 'link')"
+        mat-flat-button [color]="b.color" (click)="onSubmit(b)"  [disabled]="! b.enabled"  >{{ getLabel(b) }}</button>
   <a [attr.id]="b.id" class="actions-button" *ngIf="b.enabled && b.color === 'link'"
      mat-button color="link" (click)="onSubmit(b)">{{ getLabel(b) }}</a>
 </ng-container>