Panels, Drawers and CtaDrawers.. oh my. These have been causing us some anxiety, so we need an opportunity to get more familiar with patterns that will help us use them better.
The BetaOptinPanel is a good place to start given the fact it is disabled in production (at time of writing) and simple in its responsibilities. It lives inside mobile.init
For those of you who don't know what a BetaOptInPanel is... it displays on stable and asks you to opt into beta you can enable it using:
```
$wgMFExperiments['betaoptin'] = array(
"name" => "betaoptin",
'buckets' => [
'control' => 0,
'A' => 1,
],
'enabled' => true,
);
```
And visiting a page in the Minerva skin using an incognito window.
{F28296534}
= Acceptance criteria
[
x] BetaOptinPanel should be a Panel rather than extend a Panel.
[
x] Events should be passed in as parameters rather than by extending and overriding class properties
[] The new BetaOptinPanel should not make use of templatePartials - instead it should append a form which contains Button's inside the newly created Panel.
[]
~~The template associated with BetaOptInPanel should be removed.
~~ (template still seems useful)
= Developer notes
The existing template for BetaOptInPanel looks like:
```
<form class="message content" action="{{postUrl}}" method="POST">
<p>{{text}}</p>
<input type="hidden" name="enableBeta" value="true">
<input type="hidden" name="token" value="{{editToken}}">
{{#buttons}}{{>button}}{{/buttons}}
</form>
```
A Drawer is a Panel (and thus a CtaDrawer is too), nothing uses Drawer directly (right now), so be aware of how your changes impact CtaDrawers or ReferenceDrawer
There was an interesting conversation around panel.less that is worth considering as there may be an opportunity to clean code up during the implementation of this task:
https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/493757/3/resources/mobile.startup/panel.less,unified
= QA steps
[] Verify the beta optin panel is still functional (on staging)
[] When anonymous click the watchstar, verify a drawer shows with login/sign in buttons that can be dismissed
[] Find a red link (A link to a page that doesn't exist) and verify that a drawer shows when clicked
[] Find a reference and verify that a black references drawer displays when you click the reference