rabbit_feature_flags: Rework the management UI page

[Why]
The "Feature flags" admin section had several issues:
* It was not designed for experimental feature flags. What was done for
  RabbitMQ 4.0.0 was still unclear as to what a user should expect for
  experimental feature flags.
* The UI uses synchronous requests from the browser main thread. It
  means that for a feature flag that has a long running migration
  callback, the browser tab could freeze for a very long time.

[How]
The feature flags table is reworked and now displays:
* a series of icons to highlight the following:
    * a feature flag that has a migration function and thus that can
      take time to be enabled
    * a feature flag that is experimental
    * whether this experimental feature flag is supported or not
* a toggle to quickly show if a feature flag is enabled or not and let
  the user enable it at the same time.

For stable feature flags, when a user click on the toggle, the toggle
goes into an intermediate state while waiting for the response from the
broker. If the response is successful, the toggle is green. Otherwise it
goes back to red and the error is displayed in a popup as before.

For experimental feature flags, when a user click on the toggle, a popup
is displayed to let the user know of the possible constraints and
consequences, with one or two required checkboxes to tick so the user
confirms they understand the message. The feature flag is enabled only
after the user validates the popup. The displayed message and the
checkboxes depend on if the experimental feature flag is supported or
not (it is a new attribute of experimental feature flags).

The request to enable feature flags now uses the modern `fetch()` API.
Therefore it uses Javascript promises and does not block the main
thread: the UI remains responsive while a migration callback runs.

Finally, an "Enable all stable feature flags" button has been added to
the warning that tells the user some stable feature flags are still
disabled.

V2: Pause auto-refresh while a feature flag is being handled. This fixes
    some display inconsistencies.

Author: dumbbell

deps/rabbitmq_management/priv/www/css/main.css

@@ -232,7 +232,7 @@ div.form-popup-help {
   width: 500px;
   z-index: 2;
 }
-p.warning, div.form-popup-warn { background: #FF9; }
+div.warning, p.warning, div.form-popup-warn { background: #FF9; }
 
 div.form-popup-options { z-index: 3; overflow:auto; max-height:95%; }
 
@@ -255,7 +255,14 @@ div.form-popup-options span:hover {
   cursor: pointer;
 }
 
-p.warning { padding: 15px; border-radius: 5px; -moz-border-radius: 5px; text-align: center; }
+div.warning, p.warning { padding: 15px; border-radius: 5px; -moz-border-radius: 5px; text-align: center; }
+div.warning {
+  margin: 15px 0;
+}
+
+div.warning button {
+  margin: auto;
+}
 
 .highlight { min-width: 120px; font-size: 120%; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 0 0; color: #888; border-radius: 5px; -moz-border-radius: 5px; }
 .highlight strong { font-size: 2em; display: block; color: #444; font-weight: normal; }
@@ -367,3 +374,49 @@ div.bindings-wrapper p.arrow { font-size: 200%; }
 }
 
 table.dynamic-shovels td label {width: 200px; margin-right:10px;padding: 4px 0px 5px 0px}
+
+input[type=checkbox].toggle {
+    display: none;
+}
+
+label.toggle {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 32px;
+    height: 16px;
+    background: #ff5630;
+    display: block;
+    border-radius: 16px;
+    position: relative;
+    margin: auto;
+}
+
+label.toggle:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    border-radius: 12px;
+    transition: 0.3s;
+}
+
+input.toggle:indeterminate + label.toggle {
+    background: #ffab00;
+}
+
+input.toggle:checked + label.toggle {
+    background: #36b37e;
+}
+
+input.toggle:indeterminate + label.toggle:after {
+    left: calc(50%);
+    transform: translateX(-50%);
+}
+
+input.toggle:checked + label.toggle:after {
+    left: calc(100% - 2px);
+    transform: translateX(-100%);
+}

deps/rabbitmq_management/priv/www/js/main.js

@@ -303,6 +303,23 @@ function reset_timer() {
     }
 }
 
+function pause_auto_refresh() {
+    if (typeof globalThis.rmq_webui_auto_refresh_paused == 'undefined')
+        globalThis.rmq_webui_auto_refresh_paused = 0;
+
+    globalThis.rmq_webui_auto_refresh_paused++;
+    if (timer != null) {
+        clearInterval(timer);
+    }
+}
+
+function resume_auto_refresh() {
+    globalThis.rmq_webui_auto_refresh_paused--;
+    if (globalThis.rmq_webui_auto_refresh_paused == 0) {
+        reset_timer();
+    }
+}
+
 function update_manual(div, query) {
     var path;
     var template;