1697440 - [devtools-rfc] Harmonize representation of async redux actions in devtools codebase

Status: NEW

(DevTools :: Framework, task, P3)

Description

[Julian Descottes [:jdescottes]]

When creating a unique waitForDispatch helper for DevTools tests in Bug 1697391, it became clear that we don't handle async actions in the same way in all panels/uis.

Debugger and DOM panel seem to set a status property on the action and will emit the same actionType several time across the lifecycle of an async action, updating the status along the way.

The common states seemed to be start and error, the final state being called done in the debugger and end in the DOM panel. To make things simpler, the DOM panel is updated to use done as well in Bug 1697391.

However, some actions also define a status property which is not directly related to the "async" status. For instance the "UPDATE_STATUS" action (used for netmonitor & debugger project search) will go through several states defined in https://searchfox.org/mozilla-central/rev/2b99ea2e97eef00a8a1c7e24e5fe51ab5304bc42/devtools/client/netmonitor/src/constants.js#77-81 to finally settle on "DONE" when the action is finished.

Even though it looks similar, the string case is different, so this action can't effectively be used with waitForDispatch at the moment.

Other UIs, for instance about:debugging, don't use status at all to represent async actions. Instead about:debugging emits different actionTypes during the lifecycle of an async actions, always following the same naming convention: ACTION_NAME_START, ACTION_NAME_SUCCESS, ACTION_NAME_FAILURE.

We should decide what to do about the status property of action. Should it be reserved for the async status of actions? Should it be renamed to something less generic eg asyncActionStatus? Should it be dropped in favor of using different actionTypes?

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Could we use a symbol key that would be exported from one of our shared file? I can't remember if Redux can handle that.
This way, we would avoid property name clashing

Comment 2

[Julian Descottes [:jdescottes]]

As mentioned in the DevTools Tools Checkin meeting, in case symbols are not supported, we can use something similar to what the debugger does at https://searchfox.org/mozilla-central/rev/aa9a7136835deb0eeba00c62bb50a4a0e2cdea2d/devtools/client/shared/redux/middleware/promise.js#19

const PROMISE = (exports.PROMISE = "@@dispatch/promise");

Basically a sufficiently unique string, exported as a constant from a module.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Netmonitor' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.