Commit 8a95266b authored by Phil Hughes's avatar Phil Hughes

Merge branch 'ide-refactor-for-ee-specific' into 'master'

CE Port (Refactor IDE to allow RightPane extension)

See merge request gitlab-org/gitlab-ce!21920
parents a7eaf48d 01a2d0f2
<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>
......
<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>
......
......@@ -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);
},
});
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment