Add admin page for experimental features

[MAILPOET-2008]

assets/js/src/experimental_features/experimental_features.jsx

@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import MailPoet from 'mailpoet';
+
+const ExperimentalFeatures = () => {
+  const [flags, setFlags] = useState(null);
+
+  useEffect(() => {
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'featureFlags',
+      action: 'getAll',
+    }).done((response) => {
+      const flagsMap = response.data.reduce((obj, item) => ({ ...obj, [item.name]: item }), {});
+      setFlags(flagsMap);
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  }, []);
+
+  function handleChange(event) {
+    const name = event.target.name;
+    const value = event.target.checked;
+
+    MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
+      endpoint: 'featureFlags',
+      action: 'set',
+      data: {
+        [name]: value ? 1 : 0,
+      },
+    }).done(() => {
+      const flag = flags[name];
+      flag.value = value;
+      setFlags({ ...flags, [name]: flag });
+      MailPoet.Notice.success(`Feature '${name}' was ${value ? 'enabled' : 'disabled'}.`);
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(error => error.message),
+          { scroll: true }
+        );
+      }
+    });
+  }
+
+  if (flags === null) {
+    return <p>Loading experimental features...</p>;
+  }
+
+  if (Object.values(flags).length === 0) {
+    return <p>There are no experimental features at the moment.</p>;
+  }
+
+  return (
+    <>
+      {
+        Object.values(flags).map((flag) => {
+          const id = `experimental-feature-${flag.name}`;
+          return (
+            <div key={flag.name}>
+              <label htmlFor={id}>
+                <input
+                  id={id}
+                  type="checkbox"
+                  name={flag.name}
+                  defaultChecked={flag.value}
+                  onChange={handleChange}
+                />
+                {' '}
+                {flag.name}
+              </label>
+            </div>
+          );
+        })
+      }
+    </>
+  );
+};
+
+const experimentalFeaturesContainer = document.getElementById('experimental_features_container');
+if (experimentalFeaturesContainer) {
+  ReactDOM.render(
+    React.createElement(ExperimentalFeatures, {}),
+    experimentalFeaturesContainer
+  );
+}

assets/js/src/webpack_admin_index.jsx

@@ -17,3 +17,4 @@ import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler
 import 'subscribers/importExport/import.jsx'; // side effect - executes on doc ready, adds events
 import 'subscribers/importExport/export.js'; // side effect - executes on doc ready
 import 'wizard/wizard.jsx'; // side effect - renders ReactDOM to document
+import 'experimental_features/experimental_features.jsx'; // side effect - renders ReactDOM to document

lib/Config/Menu.php

@@ -385,6 +385,17 @@ class Menu {
         'migration'
       )
     );
+
+    // Settings page
+    $this->wp->addSubmenuPage(
+      true,
+      $this->setPageTitle('Experimental Features'),
+      '',
+      AccessControl::PERMISSION_MANAGE_FEATURES,
+      'mailpoet-experimental',
+      [$this, 'experimentalFeatures']
+    );
+    //
   }
 
   function disableWPEmojis() {
@@ -542,6 +553,10 @@ class Menu {
     );
   }
 
+  function experimentalFeatures() {
+    $this->displayPage('experimental-features.html', []);
+  }
+
   private function _getFlags() {
     // flags (available features on WP install)
     $flags = array();

views/experimental-features.html

@@ -0,0 +1,24 @@
+<% extends 'layout.html' %>
+
+<% block content %>
+
+<div class="wrap">
+  <h1>Experimental features</h1>
+
+  <div class="mailpoet_notice notice notice-error">
+    <p>
+      <strong>These features are not finished, they are not meant to be used yet.</strong>
+    </p>
+    <p>
+      If you enable them anything can happen: your website may go down,
+      all your data can be deleted.
+    </p>
+    <p>
+      We are not liable.
+    </p>
+  </div>
+
+  <div id="experimental_features_container"></div>
+</div>
+
+<% endblock %>