debian-mirror-gitlab/app/assets/javascripts/ide/components/ide.vue

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

203 lines
6.3 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2021-04-29 21:17:54 +05:30
import { GlButton, GlLoadingIcon } from '@gitlab/ui';
2020-03-13 15:44:24 +05:30
import { mapActions, mapGetters, mapState } from 'vuex';
2021-04-17 20:07:23 +05:30
import { __ } from '~/locale';
2021-01-03 14:25:43 +05:30
import {
WEBIDE_MARK_APP_START,
WEBIDE_MARK_FILE_FINISH,
WEBIDE_MARK_FILE_CLICKED,
WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
2021-02-22 17:27:13 +05:30
WEBIDE_MEASURE_BEFORE_VUE,
2021-01-29 00:20:46 +05:30
} from '~/performance/constants';
import { performanceMarkAndMeasure } from '~/performance/utils';
2021-03-11 19:13:27 +05:30
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2020-05-24 23:13:21 +05:30
import { modalTypes } from '../constants';
2021-01-03 14:25:43 +05:30
import eventHub from '../eventhub';
2021-03-11 19:13:27 +05:30
import { measurePerformance } from '../utils';
2021-04-29 21:17:54 +05:30
import CannotPushCodeAlert from './cannot_push_code_alert.vue';
2018-10-15 14:42:47 +05:30
import IdeSidebar from './ide_side_bar.vue';
import RepoEditor from './repo_editor.vue';
2021-01-03 14:25:43 +05:30
eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
measurePerformance(
WEBIDE_MARK_FILE_FINISH,
WEBIDE_MEASURE_FILE_AFTER_INTERACTION,
WEBIDE_MARK_FILE_CLICKED,
),
);
2018-05-09 12:01:36 +05:30
export default {
components: {
2018-10-15 14:42:47 +05:30
IdeSidebar,
RepoEditor,
2021-02-22 17:27:13 +05:30
GlButton,
GlLoadingIcon,
ErrorMessage: () => import(/* webpackChunkName: 'ide_runtime' */ './error_message.vue'),
CommitEditorHeader: () =>
import(/* webpackChunkName: 'ide_runtime' */ './commit_sidebar/editor_header.vue'),
RepoTabs: () => import(/* webpackChunkName: 'ide_runtime' */ './repo_tabs.vue'),
IdeStatusBar: () => import(/* webpackChunkName: 'ide_runtime' */ './ide_status_bar.vue'),
FindFile: () =>
import(/* webpackChunkName: 'ide_runtime' */ '~/vue_shared/components/file_finder/index.vue'),
RightPane: () => import(/* webpackChunkName: 'ide_runtime' */ './panes/right.vue'),
NewModal: () => import(/* webpackChunkName: 'ide_runtime' */ './new_dropdown/modal.vue'),
2021-04-29 21:17:54 +05:30
CannotPushCodeAlert,
2018-05-09 12:01:36 +05:30
},
2020-05-24 23:13:21 +05:30
mixins: [glFeatureFlagsMixin()],
2021-01-29 00:20:46 +05:30
data() {
return {
loadDeferred: false,
};
},
2018-05-09 12:01:36 +05:30
computed: {
2018-10-15 14:42:47 +05:30
...mapState([
'openFiles',
'viewer',
'fileFindVisible',
'emptyStateSvgPath',
2018-11-08 19:23:39 +05:30
'currentProjectId',
'errorMessage',
2019-03-02 22:35:43 +05:30
'loading',
]),
...mapGetters([
2021-04-17 20:07:23 +05:30
'canPushCodeStatus',
2019-03-02 22:35:43 +05:30
'activeFile',
'someUncommittedChanges',
'isCommitModeActive',
'allBlobs',
2019-09-04 21:01:54 +05:30
'emptyRepo',
'currentTree',
2021-03-11 19:13:27 +05:30
'hasCurrentProject',
2020-05-24 23:13:21 +05:30
'editorTheme',
2020-11-24 15:15:51 +05:30
'getUrlForPath',
2018-10-15 14:42:47 +05:30
]),
2020-05-24 23:13:21 +05:30
themeName() {
return window.gon?.user_color_scheme;
},
2018-05-09 12:01:36 +05:30
},
mounted() {
2021-03-08 18:12:59 +05:30
window.onbeforeunload = (e) => this.onBeforeUnload(e);
2020-05-24 23:13:21 +05:30
if (this.themeName)
document.querySelector('.navbar-gitlab').classList.add(`theme-${this.themeName}`);
2018-10-15 14:42:47 +05:30
},
2021-01-03 14:25:43 +05:30
beforeCreate() {
2021-02-22 17:27:13 +05:30
performanceMarkAndMeasure({
mark: WEBIDE_MARK_APP_START,
measures: [
{
name: WEBIDE_MEASURE_BEFORE_VUE,
},
],
});
2021-01-03 14:25:43 +05:30
},
2018-10-15 14:42:47 +05:30
methods: {
2020-05-24 23:13:21 +05:30
...mapActions(['toggleFileFinder']),
2018-11-18 11:00:15 +05:30
onBeforeUnload(e = {}) {
const returnValue = __('Are you sure you want to lose unsaved changes?');
2018-12-13 13:39:08 +05:30
if (!this.someUncommittedChanges) return undefined;
2018-11-18 11:00:15 +05:30
Object.assign(e, {
returnValue,
});
return returnValue;
},
2019-03-02 22:35:43 +05:30
openFile(file) {
2020-11-24 15:15:51 +05:30
this.$router.push(this.getUrlForPath(file.path));
2018-10-15 14:42:47 +05:30
},
2020-05-24 23:13:21 +05:30
createNewFile() {
this.$refs.newModal.open(modalTypes.blob);
},
2021-01-29 00:20:46 +05:30
loadDeferredComponents() {
this.loadDeferred = true;
},
2018-05-09 12:01:36 +05:30
},
};
</script>
<template>
2020-05-24 23:13:21 +05:30
<article
class="ide position-relative d-flex flex-column align-items-stretch"
:class="{ [`theme-${themeName}`]: themeName }"
>
2021-04-29 21:17:54 +05:30
<cannot-push-code-alert
v-if="!canPushCodeStatus.isAllowed"
:message="canPushCodeStatus.message"
:action="canPushCodeStatus.action"
/>
2019-02-15 15:39:39 +05:30
<error-message v-if="errorMessage" :message="errorMessage" />
<div class="ide-view flex-grow d-flex">
2021-01-29 00:20:46 +05:30
<template v-if="loadDeferred">
<find-file
:files="allBlobs"
:visible="fileFindVisible"
:loading="loading"
@toggle="toggleFileFinder"
@click="openFile"
/>
</template>
<ide-sidebar @tree-ready="loadDeferredComponents" />
2019-02-15 15:39:39 +05:30
<div class="multi-file-edit-pane">
<template v-if="activeFile">
2021-01-29 00:20:46 +05:30
<template v-if="loadDeferred">
<commit-editor-header v-if="isCommitModeActive" :active-file="activeFile" />
<repo-tabs v-else :active-file="activeFile" :files="openFiles" :viewer="viewer" />
</template>
2019-02-15 15:39:39 +05:30
<repo-editor :file="activeFile" class="multi-file-edit-pane-content" />
2018-10-15 14:42:47 +05:30
</template>
2019-02-15 15:39:39 +05:30
<template v-else>
2019-09-04 21:01:54 +05:30
<div class="ide-empty-state">
2018-10-15 14:42:47 +05:30
<div class="row js-empty-state">
2018-11-08 19:23:39 +05:30
<div class="col-12">
2019-02-15 15:39:39 +05:30
<div class="svg-content svg-250"><img :src="emptyStateSvgPath" /></div>
2018-05-09 12:01:36 +05:30
</div>
2018-11-08 19:23:39 +05:30
<div class="col-12">
2018-10-15 14:42:47 +05:30
<div class="text-content text-center">
2019-09-04 21:01:54 +05:30
<h4>
{{ __('Make and review changes in the browser with the Web IDE') }}
</h4>
<template v-if="emptyRepo">
<p>
{{
__(
"Create a new file as there are no files yet. Afterwards, you'll be able to commit your changes.",
)
}}
</p>
2020-07-28 23:09:34 +05:30
<gl-button
2022-06-21 17:19:12 +05:30
variant="confirm"
2020-07-28 23:09:34 +05:30
category="primary"
2019-09-04 21:01:54 +05:30
:title="__('New file')"
:aria-label="__('New file')"
2020-06-23 00:09:42 +05:30
data-qa-selector="first_file_button"
2020-05-24 23:13:21 +05:30
@click="createNewFile()"
2019-09-04 21:01:54 +05:30
>
{{ __('New file') }}
2020-07-28 23:09:34 +05:30
</gl-button>
2019-09-04 21:01:54 +05:30
</template>
<gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
<p v-else>
{{
__(
"Select a file from the left sidebar to begin editing. Afterwards, you'll be able to commit your changes.",
)
}}
2018-10-15 14:42:47 +05:30
</p>
</div>
2018-05-09 12:01:36 +05:30
</div>
</div>
</div>
2018-10-15 14:42:47 +05:30
</template>
</div>
2021-01-29 00:20:46 +05:30
<template v-if="loadDeferred">
<right-pane v-if="currentProjectId" />
</template>
2018-05-09 12:01:36 +05:30
</div>
2021-01-29 00:20:46 +05:30
<template v-if="loadDeferred">
<ide-status-bar />
<new-modal ref="newModal" />
</template>
2018-10-15 14:42:47 +05:30
</article>
2018-05-09 12:01:36 +05:30
</template>