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