[2.11] Embed New Backend form into a modal

[josemigallas]

What this PR does / why we need it:

Replaces the link to the Backend's new page with a button that displays a modal containing the form. Once a backend is created it will be selected in the dropdown.

Which issue(s) this PR fixes

Subtask of [3scale][2.11][HI-prio] Improve Select in 'Add Backend to Product' form
THREESCALE-6882: Embed New Backend form into a modal

[thomasmaas]

Is the idea to use this modal everywhere where a user can create a new backend or just here where creating the backend is like a side step in the process of adding a backend to a product?

[cntlsn]

Is the idea to use this modal everywhere where a user can create a new backend or just here where creating the backend is like a side step in the process of adding a backend to a product?

@thomasmaas the idea here is to help a user in the process of selecting a Backend by giving them the option to create a new one without leaving the context. So yes, we will still have a dedicated page featuring the Backend creation form for when a user chooses the traditional creation path (eg. from the Dashboard or the Backends index page)

[cntlsn]

UX looks good to me!

[thomasmaas]

@josemigallas any chance you could add data-testid="newBackendCreateBackend-buttonSubmit" to the button html so we can measure usage?

[josemigallas]

@josemigallas any chance you could add data-testid="newBackendCreateBackend-buttonSubmit" to the button html so we can measure usage?

Do you mean change the current button's data-testid to that specific one? Is there a naming rule behind this?
https://github.com/3scale/porta/blob/2e520e658b0e29b815991f260b01842085761267/app/javascript/src/BackendApis/components/BackendSelect.jsx#L44
or
https://github.com/3scale/porta/blob/97643c0ba781c4265c0e5e74c05769138a0f269e/app/javascript/src/BackendApis/components/NewBackendForm.jsx#L60

[thomasmaas]

For the naming scheme I refer to @cntlsn and @damianpm. In Pendo you can scope it down to a page but even then I'd say 'submit' is not unique enough.

[cntlsn]

@thomasmaas thank you for spotting this!

@josemigallas the naming rule for those ids can be found in this issue THREESCALE-6729

I think we should actually track two buttons in this page:

• the 'Create a Backend' button with icon

data-testid=”newBackendCreateBackend-buttonLink”

• the 'Create Backend' button in the modal form

data-testid=”newBackendCreateBackend-buttonSubmit”

Question: will displaying the modal dialog change the URL of the page?

[josemigallas]

Question: will displaying the modal dialog change the URL of the page?

No it won't. One thing to point out is that the same form is going to be used in its own page, meaning the same data-testid is going to be present in both the modal and the "Create Backend" page. Is this problematic?

[thomasmaas]

It's not. In pendo we can still get the specific numbers for both usages by scoping the click on that button to different page urls. And in case of this modal the scoping page url would be the 'add backend to product' page url.

[damianpm]

LGTM (js side)

[thomasmaas]

I think this explains https://issues.redhat.com/browse/THREESCALE-7480 @josemigallas

[josemigallas]

I can't reproduce the bug