docs(storybook): add versions selector in sidebar - review

Signed-off-by: Francois Eoche <[email protected]>

Author: Francois Eoche

packages/tools/storybook/.storybook/manager.js

@@ -4,42 +4,50 @@ import React from 'react';
 
 import { releases } from '../public/releases.js';
 
-const createHeaderElement = (element) => {
-  const timer = setInterval(function(){
-    let selector = document.querySelector('.sidebar-header');
-    if (selector !== null) {
-      selector.parentNode.insertBefore(element, selector.nextSibling);
-      if(document.querySelector('#release-selector').innerHTML) {
-        clearInterval(timer);
+document.addEventListener('DOMContentLoaded', function() {
+  const callback = function(mutationsList) {
+    for (let i = 0, len = mutationsList.length; i < len; i++) {
+      if (mutationsList[i].type === 'childList') {
+
+          // Add version select
+          if(!document.querySelector('#release-selector')) {
+            const urlVersionRegex = /\/(latest|v(\d\.?){3}[^\/]*)\//gmi;
+            const selector = document.querySelector('.sidebar-header');
+            let element;
+            if (urlVersionRegex.test(location.href)) {
+              const releasesSelector = document.createElement('select');
+              releasesSelector.id = 'release-selector';
+              Object.entries(releases).forEach((value) => {
+                const option = document.createElement('option');
+                option.text = value[0];
+                option.value = value[1];
+                releasesSelector.appendChild(option)
+              });
+              element = releasesSelector;
+
+              releasesSelector.onchange = (selection) => {
+                const version = selection.target.value === 'latest' ? 'latest' : `v${selection.target.value}`;
+                location.pathname = location.pathname.replace(urlVersionRegex, version);
+              };
+            } else {
+              const version = document.createElement('div');
+              version.id = 'release-selector';
+              version.innerText = Object.keys(releases)[0];
+              element = version;
+            }
+            selector.parentNode.insertBefore(element, selector.nextSibling);
+
+          }
+        break;
       }
     }
-  }, 500);
-};
+  };
+  const observer = new MutationObserver(callback);
+  observer.observe(document.body, { childList: true, subtree: false });
+}, false);
+
 
-setTimeout(() => {
-  const urlVersionRegex = /\/(latest|v(\d\.?){3}[^\/]*)\//gmi;
-  if (urlVersionRegex.test(location.href)) {
-    const releasesSelector = document.createElement('select');
-    releasesSelector.id = 'release-selector';
-    Object.entries(releases).map((value) => {
-      const option = document.createElement('option');
-      option.text = value[0];
-      option.value = value[1];
-      releasesSelector.appendChild(option)
-    });
-    createHeaderElement(releasesSelector);
 
-    releasesSelector.onchange = (selection) => {
-      const version = selection.target.value === 'latest' ? 'latest' : `v${selection.target.value}`;
-      location.pathname = location.pathname.replace(urlVersionRegex, version);
-    };
-  } else {
-    const version = document.createElement('div');
-    version.id = 'release-selector';
-    version.innerText = Object.keys(releases)[0];
-    createHeaderElement(version);
-  }
-}, 2000);
 
 addons.setConfig({
   theme,