JS code for apps quick start guide results in a error for /bindings

Summary
The JS quick start guide does not produce to a working app, instead failing with an error that only appears in the server debug log.

Steps to reproduce

  • Follow the quick start guide for JS: Quick start guide (JS)
  • Attempt to install the app on local mattermost server

Webapp commit: 12fdf69300d72d679a1169c707975b371e46dbe6
Server commit: 5bd223c836a71c1148a3b5990fde6f22f2fdc1ed

Expected behavior
I would expect for it to install without error

Observed behavior
No error is shown through the web interface, but this error appears in the server log:

{"timestamp":"2022-04-22 05:23:29.307 +01:00","level":"debug","msg":"Binding errors","caller":"app/plugin_api.go:934","plugin_id":"com.mattermost.apps","request_id":"r9k6ambz1tn4pfdbuwpwfca5ba","user_id":"k657c3bjx3dafdttcop7136udw","path":"/api/v1/bindings","app_id":"hello-world","error":"2 errors occurred:\n\t* /channel_header/send-button: (only) one of  \"submit\", \"form\", or \"bindings\" must be set in a binding\n\t* /channel_header/helloworld/send: (only) one of  \"submit\", \"form\", or \"bindings\" must be set in a binding\n\n"}

This a confusing error message. I don’t know whether one of submit/form/bindings is required, or whether having none of them is acceptable. The quick start app has none of them in the /channel_header/send-button and /channel_header/helloworld/send case, but I can’t find any reference to this behaviour one way or the other in the api docs (Bindings). So what’s going on here? Do the docs and the quick start code need updating, or is this a bug with the api?

In case it’s useful, this is the response from /bindings:

{
	"type": "ok",
	"data": [
		{
			"bindings": [
				{
					"icon": "icon.png",
					"label": "send hello message",
					"call": {
						"path": "/send-modal"
					},
					"location": "send-button"
				}
			],
			"location": "/channel_header"
		},
		{
			"bindings": [
				{
					"icon": "icon.png",
					"label": "helloworld",
					"bindings": [
						{
							"label": "send",
							"call": {
								"path": "/send"
							},
							"location": "send"
						}
					],
					"description": "Hello World app",
					"hint": "[send]"
				}
			],
			"location": "/channel_header"
		}
	]
}

If the problem is still relevant to you, take a look on following issue: Inconsistency in Documentation and Example · Issue #365 · mattermost/mattermost-plugin-apps · GitHub