THREESCALE-1789: Add "Managed by operator" banner (UI)

[jlledom]

What this PR does / why we need it:

This replaces #3865. That got closed after merging #3857

The operator can manage porta resources through API. When a resource is managed by operator, we must inform the user about that.

#3857 implements the backend support (annotations). This PR implements the frontend, for now, just a banner in the relevant screens:

• http://provider-admin.3scale.localhost:3000/buyers/accounts/4
• http://provider-admin.3scale.localhost:3000/buyers/accounts/4/edit
• http://provider-admin.3scale.localhost:3000/apiconfig/services/2
• http://provider-admin.3scale.localhost:3000/apiconfig/services/2/edit
• http://provider-admin.3scale.localhost:3000/p/admin/backend_apis/2
• http://provider-admin.3scale.localhost:3000/p/admin/backend_apis/2/edit

Examples:

Which issue(s) this PR fixes

https://issues.redhat.com/browse/THREESCALE-1786

Verification steps

1. Marks a resource as managed by operator. Check THREESCALE-1786: Managed by operator #3857 to know how
2. Visit the resource #show or #edit screens
3. You should see the banner

[josemigallas]

It looks good like that, but I would rather follow Patternfly's design guidelines regarding inline alerts: https://www.patternfly.org/components/alert/design-guidelines#plain-inline-alerts:

[jlledom]

It looks good like that, but I would rather follow Patternfly's design guidelines regarding inline alerts: https://www.patternfly.org/components/alert/design-guidelines#plain-inline-alerts:

I made some changes. Now it looks like this:

Now it uses a plan inline alert but there's no spacing between the title and the alert. I've been trying to fix it but I'm spending too much time and I think its better for somebody else with more experience to do it... @josemigallas

[jlledom]

@josemigallas I made some changes, I'd say it looks better now:

[akostadinov]

Maybe make orange or something? Looks good. Just I'm not sure anybody would notice blue stuff :) Blue means all is fine. idk. Just saying.

[jlledom]

Maybe make orange or something? Looks good. Just I'm not sure anybody would notice blue stuff :) Blue means all is fine. idk. Just saying.

It would look like this:

WDYT @josemigallas

We can also have it as info for the #show action and warning for the #edit action

[akostadinov]

Better to me. But just an opinion, do as you want.

[josemigallas]

With the description it now looks weird 😅. Maybe we don't use .pf-m-plain when there is a description? Or never.

We can also have it as info for the #show action and warning for the #edit action

On the other hand, I agree with this ☝🏻

[jlledom]

After the last changes @josemigallas @akostadinov

[lvillen]

I think we could use the inline alert also at the #show action, which would make code climate happy, but beside that LGTM.

[jlledom]

I think we could use the inline alert also at the #show action, which would make code climate happy, but beside that LGTM.

I added the plain style to the #show action as suggested by @josemigallas so I think we should keep it. However, I refactored the code to (hopefully) remove the warning from codeclimate: c5c1999

EDIT: Still a codeclimate error but that one was there before.

[lvillen]

🚀