Refactor IDE to allow RightPane extension

**Why?**
- This is needed by the Web Terminal EE feature.
  https://gitlab.com/gitlab-org/gitlab-ee/issues/5426

**Notes:**
- RightPane component tabs is now data driven.

1 files changed, 4 insertions, 4 deletions

diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index c90f8694326..c0550116633 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -15,21 +15,21 @@ Vue.use(Translate);
  * @param {Object} options - Extra options for the IDE (Used by EE).
  * @param {(e:Element) => Object} options.extraInitialData -
  *   Function that returns extra properties to seed initial data.
+ * @param {Component} options.rootComponent -
+ *   Component that overrides the root component.
  */
 export function initIde(el, options = {}) {
   if (!el) return null;
 
   const {
     extraInitialData = () => ({}),
+    rootComponent = ide,
   } = options;
 
   return new Vue({
     el,
     store,
     router,
-    components: {
-      ide,
-    },
     created() {
       this.setEmptyStateSvgs({
         emptyStateSvgPath: el.dataset.emptyStateSvgPath,
@@ -51,7 +51,7 @@ export function initIde(el, options = {}) {
       ...mapActions(['setEmptyStateSvgs', 'setLinks', 'setInitialData']),
     },
     render(createElement) {
-      return createElement('ide');
+      return createElement(rootComponent);
     },
   });
 }