[JS] Only enable action buttons when their associated inputs have changed

[dclaux]

Related Issue

Implements #7103

Description

This change adds support for disabling action buttons unless their associated inputs have changed

• Adds a CardElement.getAllActions method that makes it easy to retrieve a list of all actions in the card
• Adds a CardElement.updateActionsEnabledState that refreshes the visual state of all actions in the card
• Adds the Action.disabledUnlessAssociatedInputsChange: boolean property on Action
  • Add support for that property in the designer
• Changes the logic for a button to be disabled if its isEnabled property is set to false OR if none of its associated inputs have changed
• Adds a SubmitActionBase.updateEnabledState method that refreshes the visual state of an action button according to the current values of its associated inputs
• Adds a SubmitActionBase.resetReferencedInputsDirtyState method that allows a host app to indicate that an action's associated inputs are not "dirty" anymore, i.e. their values are current (and the action should therefore be disabled)
• Adds the GlobalSettings.resetInputsDirtyStateAfterActionExecution: boolean flag that allows a host application to disable the automatic reset of inputs' dirty state after an action button has been clicked

Sample Card

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6",
    "body": [
        {
            "type": "Input.Text",
            "placeholder": "Placeholder text",
            "id": "abc",
            "label": "Enter some text:"
        },
        {
            "type": "Input.ChoiceSet",
            "choices": [
                {
                    "title": "Choice 1",
                    "value": "Choice 1"
                },
                {
                    "title": "Choice 2",
                    "value": "Choice 2"
                }
            ],
            "placeholder": "Placeholder text",
            "id": "def",
            "label": "Make a choice:"
        }
    ],
    "actions": [
        {
            "type": "Action.Execute",
            "title": "Save",
            "disabledUnlessAssociatedInputsChange": true
        }
    ]
}

Initial render:

After the user has updated at least one input:

How verified

Verified manually in adaptivecards-designer-app

Microsoft Reviewers: Open in CodeFlow

[ghost]

Hi @dclaux. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes.

[licanhua]

Code looks good to me. I prefer const over let in some places, but it's not a blocker for this PR