diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-09-27 06:59:02 +0300 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2018-09-27 07:11:29 +0300 |
commit | 01a2d0f201d2a8a1b3d75f686ec93c697a73ed78 (patch) | |
tree | 7d9f9d1e66373412bde9f1a13b80704a00092633 /app/assets/javascripts/ide | |
parent | 912d068dc6411af03af85cabb6bcaacbe64b5e80 (diff) |
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.
Diffstat (limited to 'app/assets/javascripts/ide')
-rw-r--r-- | app/assets/javascripts/ide/components/ide.vue | 12 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/panes/right.vue | 92 | ||||
-rw-r--r-- | app/assets/javascripts/ide/index.js | 8 |
3 files changed, 59 insertions, 53 deletions
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index a3add3b778f..ad6151e3bf6 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,4 +1,5 @@ <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> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index 79df225c432..75a9a9e9b8f 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -1,5 +1,6 @@ <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" + v-for="tab of tabs" + :key="tab.title" > <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)" - > - <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> 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); }, }); } |