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.

app/assets/javascripts/ide/components/ide.vue

 <script>
+import Vue from 'vue';
 import Mousetrap from 'mousetrap';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { __ } from '~/locale';
@@ -22,10 +23,16 @@ export default {
     IdeStatusBar,
     RepoEditor,
     FindFile,
-    RightPane,
     ErrorMessage,
     CommitEditorHeader,
   },
+  props: {
+    rightPaneComponent: {
+      type: Vue.Component,
+      required: false,
+      default: () => RightPane,
+    },
+  },
   computed: {
     ...mapState([
       'openFiles',
@@ -143,7 +150,8 @@ export default {
           </div>
         </template>
       </div>
-      <right-pane
+      <component
+        :is="rightPaneComponent"
         v-if="currentProjectId"
       />
     </div>

app/assets/javascripts/ide/components/panes/right.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import { rightSidebarViews } from '../../constants';
@@ -21,6 +22,13 @@ export default {
     MergeRequestInfo,
     Clientside,
   },
+  props: {
+    extensionTabs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
   computed: {
     ...mapState(['rightPane', 'currentMergeRequestId', 'clientsidePreviewEnabled']),
     ...mapGetters(['packageJson']),
@@ -33,6 +41,36 @@ export default {
     showLivePreview() {
       return this.packageJson && this.clientsidePreviewEnabled;
     },
+    defaultTabs() {
+      return [
+        {
+          show: this.currentMergeRequestId,
+          title: __('Merge Request'),
+          isActive: this.rightPane === rightSidebarViews.mergeRequestInfo,
+          view: rightSidebarViews.mergeRequestInfo,
+          icon: 'text-description',
+        },
+        {
+          show: true,
+          title: __('Pipelines'),
+          isActive: this.pipelinesActive,
+          view: rightSidebarViews.pipelines,
+          icon: 'rocket',
+        },
+        {
+          show: this.showLivePreview,
+          title: __('Live preview'),
+          isActive: this.rightPane === rightSidebarViews.clientSidePreview,
+          view: rightSidebarViews.clientSidePreview,
+          icon: 'live-preview',
+        },
+      ];
+    },
+    tabs() {
+      return this.defaultTabs
+        .concat(this.extensionTabs)
+        .filter(tab => tab.show);
+    },
   },
   methods: {
     ...mapActions(['setRightPane']),
@@ -42,7 +80,6 @@ export default {
       this.setRightPane(view);
     },
   },
-  rightSidebarViews,
 };
 </script>
 
@@ -64,64 +101,25 @@ export default {
     <nav class="ide-activity-bar">
       <ul class="list-unstyled">
         <li
-          v-if="currentMergeRequestId"
-        >
-          <button
-            v-tooltip
-            :title="__('Merge Request')"
-            :aria-label="__('Merge Request')"
-            :class="{
-              active: rightPane === $options.rightSidebarViews.mergeRequestInfo
-            }"
-            data-container="body"
-            data-placement="left"
-            class="ide-sidebar-link is-right"
-            type="button"
-            @click="clickTab($event, $options.rightSidebarViews.mergeRequestInfo)"
+          v-for="tab of tabs"
+          :key="tab.title"
         >
-            <icon
-              :size="16"
-              name="text-description"
-            />
-          </button>
-        </li>
-        <li>
-          <button
-            v-tooltip
-            :title="__('Pipelines')"
-            :aria-label="__('Pipelines')"
-            :class="{
-              active: pipelinesActive
-            }"
-            data-container="body"
-            data-placement="left"
-            class="ide-sidebar-link is-right"
-            type="button"
-            @click="clickTab($event, $options.rightSidebarViews.pipelines)"
-          >
-            <icon
-              :size="16"
-              name="rocket"
-            />
-          </button>
-        </li>
-        <li v-if="showLivePreview">
           <button
             v-tooltip
-            :title="__('Live preview')"
-            :aria-label="__('Live preview')"
+            :title="tab.title"
+            :aria-label="tab.title"
             :class="{
-              active: rightPane === $options.rightSidebarViews.clientSidePreview
+              active: tab.isActive
             }"
             data-container="body"
             data-placement="left"
             class="ide-sidebar-link is-right"
             type="button"
-            @click="clickTab($event, $options.rightSidebarViews.clientSidePreview)"
+            @click="clickTab($event, tab.view)"
           >
             <icon
               :size="16"
-              name="live-preview"
+              :name="tab.icon"
             />
           </button>
         </li>

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);
     },
   });
 }