diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-09-27 16:57:30 -0500 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2018-09-28 15:03:39 -0500 |
commit | adbf6149cf1778cd48a9bbf8e97332669dbcb7cb (patch) | |
tree | 01f53873bc7dbe0b04d8de8182af359e21ecc2b4 /app/assets/javascripts/ide/components | |
parent | 1eefdf5da50030fbc342a08155ed4aa56805aea9 (diff) | |
download | gitlab-ce-adbf6149cf1778cd48a9bbf8e97332669dbcb7cb.tar.gz |
Keep IDE RightPane views aliveide-keep-right-pane-tabs-alive
**Why?**
- This is needed for the Web Terminal feature.
https://gitlab.com/gitlab-org/gitlab-ee/issues/5426
**Notes:**
- Introduces a `pane` Vuex module.
- Some views should not be kept alive (i.e. job details).
This is why a `keepAlive` flag was introduced for views.
Diffstat (limited to 'app/assets/javascripts/ide/components')
-rw-r--r-- | app/assets/javascripts/ide/components/ide_status_bar.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/panes/right.vue | 63 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/repo_editor.vue | 6 |
3 files changed, 50 insertions, 25 deletions
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index 715dc1bfb42..a04d09ef374 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -50,7 +50,9 @@ export default { this.stopPipelinePolling(); }, methods: { - ...mapActions(['setRightPane']), + ...mapActions('rightPane', { + openRightPane: 'open', + }), ...mapActions('pipelines', ['fetchLatestPipeline', 'stopPipelinePolling']), startTimer() { this.intervalId = setInterval(() => { @@ -88,7 +90,7 @@ export default { <button type="button" class="p-0 border-0 h-50" - @click="setRightPane($options.rightSidebarViews.pipelines)" + @click="openRightPane($options.rightSidebarViews.pipelines)" > <ci-icon v-tooltip diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index 75a9a9e9b8f..bd07f372177 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 'underscore'; import { __ } from '~/locale'; import tooltip from '../../../vue_shared/directives/tooltip'; import Icon from '../../../vue_shared/components/icon.vue'; @@ -30,14 +31,10 @@ export default { }, }, computed: { - ...mapState(['rightPane', 'currentMergeRequestId', 'clientsidePreviewEnabled']), + ...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled']), + ...mapState('rightPane', ['isOpen', 'currentView']), ...mapGetters(['packageJson']), - pipelinesActive() { - return ( - this.rightPane === rightSidebarViews.pipelines || - this.rightPane === rightSidebarViews.jobsDetail - ); - }, + ...mapGetters('rightPane', ['isActiveView', 'isAliveView']), showLivePreview() { return this.packageJson && this.clientsidePreviewEnabled; }, @@ -46,22 +43,26 @@ export default { { show: this.currentMergeRequestId, title: __('Merge Request'), - isActive: this.rightPane === rightSidebarViews.mergeRequestInfo, - view: rightSidebarViews.mergeRequestInfo, + views: [ + rightSidebarViews.mergeRequestInfo, + ], icon: 'text-description', }, { show: true, title: __('Pipelines'), - isActive: this.pipelinesActive, - view: rightSidebarViews.pipelines, + views: [ + rightSidebarViews.pipelines, + rightSidebarViews.jobsDetail, + ], icon: 'rocket', }, { show: this.showLivePreview, title: __('Live preview'), - isActive: this.rightPane === rightSidebarViews.clientSidePreview, - view: rightSidebarViews.clientSidePreview, + views: [ + rightSidebarViews.clientSidePreview, + ], icon: 'live-preview', }, ]; @@ -71,13 +72,26 @@ export default { .concat(this.extensionTabs) .filter(tab => tab.show); }, + tabViews() { + return _.flatten(this.tabs.map(tab => tab.views)); + }, + aliveTabViews() { + return this.tabViews.filter(view => this.isAliveView(view.name)); + }, }, methods: { - ...mapActions(['setRightPane']), - clickTab(e, view) { + ...mapActions('rightPane', ['toggleOpen', 'open']), + clickTab(e, tab) { e.target.blur(); - this.setRightPane(view); + if (this.isActiveTab(tab)) { + this.toggleOpen(); + } else { + this.open(tab.views[0]); + } + }, + isActiveTab(tab) { + return tab.views.some(view => this.isActiveView(view.name)); }, }, }; @@ -88,15 +102,22 @@ export default { class="multi-file-commit-panel ide-right-sidebar" > <resizable-panel - v-if="rightPane" + v-show="isOpen" :collapsible="false" :initial-width="350" :min-size="350" - :class="`ide-right-sidebar-${rightPane}`" + :class="`ide-right-sidebar-${currentView}`" side="right" class="multi-file-commit-panel-inner" > - <component :is="rightPane" /> + <div + v-for="tabView in aliveTabViews" + v-show="isActiveView(tabView.name)" + :key="tabView.name" + class="h-100" + > + <component :is="tabView.name" /> + </div> </resizable-panel> <nav class="ide-activity-bar"> <ul class="list-unstyled"> @@ -109,13 +130,13 @@ export default { :title="tab.title" :aria-label="tab.title" :class="{ - active: tab.isActive + active: isActiveTab(tab) && isOpen }" data-container="body" data-placement="left" class="ide-sidebar-link is-right" type="button" - @click="clickTab($event, tab.view)" + @click="clickTab($event, tab)" > <icon :size="16" diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index d3a73e84cc7..b2599128213 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -22,12 +22,14 @@ export default { }, }, computed: { + ...mapState('rightPane', { + rightPaneIsOpen: 'isOpen', + }), ...mapState([ 'rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView', - 'rightPane', ]), ...mapGetters([ 'currentMergeRequest', @@ -99,7 +101,7 @@ export default { this.editor.updateDimensions(); } }, - rightPane() { + rightPaneIsOpen() { this.editor.updateDimensions(); }, }, |