diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
24 files changed, 0 insertions, 1936 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue deleted file mode 100644 index a8459b011df..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import icon from '../../../vue_shared/components/icon.vue'; - import listItem from './list_item.vue'; - import listCollapsed from './list_collapsed.vue'; - - export default { - components: { - icon, - listItem, - listCollapsed, - }, - props: { - title: { - type: String, - required: true, - }, - fileList: { - type: Array, - required: true, - }, - }, - computed: { - ...mapState([ - 'currentProjectId', - 'currentBranchId', - 'rightPanelCollapsed', - ]), - }, - methods: { - toggleCollapsed() { - this.$emit('toggleCollapsed'); - }, - }, - }; -</script> - -<template> - <div class="multi-file-commit-list"> - <list-collapsed - v-if="rightPanelCollapsed" - /> - <template v-else> - <ul - v-if="fileList.length" - class="list-unstyled append-bottom-0" - > - <li - v-for="file in fileList" - :key="file.key" - > - <list-item - :file="file" - /> - </li> - </ul> - <div - v-else - class="help-block prepend-top-0" - > - No changes - </div> - </template> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue deleted file mode 100644 index 6a0262f271b..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue +++ /dev/null @@ -1,35 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - }, - computed: { - ...mapGetters([ - 'addedFiles', - 'modifiedFiles', - ]), - }, - }; -</script> - -<template> - <div - class="multi-file-commit-list-collapsed text-center" - > - <icon - name="file-addition" - :size="18" - css-classes="multi-file-addition append-bottom-10" - /> - {{ addedFiles.length }} - <icon - name="file-modified" - :size="18" - css-classes="multi-file-modified prepend-top-10 append-bottom-10" - /> - {{ modifiedFiles.length }} - </div> -</template> diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue deleted file mode 100644 index 742f746e02f..00000000000 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ /dev/null @@ -1,36 +0,0 @@ -<script> - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - }, - props: { - file: { - type: Object, - required: true, - }, - }, - computed: { - iconName() { - return this.file.tempFile ? 'file-addition' : 'file-modified'; - }, - iconClass() { - return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`; - }, - }, - }; -</script> - -<template> - <div class="multi-file-commit-list-item"> - <icon - :name="iconName" - :size="16" - :css-classes="iconClass" - /> - <span class="multi-file-commit-list-path"> - {{ file.path }} - </span> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue deleted file mode 100644 index 89981ab2c65..00000000000 --- a/app/assets/javascripts/ide/components/ide.vue +++ /dev/null @@ -1,99 +0,0 @@ -<script> - import { mapState, mapGetters } from 'vuex'; - import ideSidebar from './ide_side_bar.vue'; - import ideContextbar from './ide_context_bar.vue'; - import repoTabs from './repo_tabs.vue'; - import repoFileButtons from './repo_file_buttons.vue'; - import ideStatusBar from './ide_status_bar.vue'; - import repoPreview from './repo_preview.vue'; - import repoEditor from './repo_editor.vue'; - - export default { - components: { - ideSidebar, - ideContextbar, - repoTabs, - repoFileButtons, - ideStatusBar, - repoEditor, - repoPreview, - }, - props: { - emptyStateSvgPath: { - type: String, - required: true, - }, - }, - computed: { - ...mapState([ - 'currentBlobView', - 'selectedFile', - ]), - ...mapGetters([ - 'changedFiles', - 'activeFile', - ]), - }, - mounted() { - const returnValue = 'Are you sure you want to lose unsaved changes?'; - window.onbeforeunload = (e) => { - if (!this.changedFiles.length) return undefined; - - Object.assign(e, { - returnValue, - }); - return returnValue; - }; - }, - }; -</script> - -<template> - <div - class="ide-view" - > - <ide-sidebar /> - <div - class="multi-file-edit-pane" - > - <template - v-if="activeFile" - > - <repo-tabs/> - <component - class="multi-file-edit-pane-content" - :is="currentBlobView" - /> - <repo-file-buttons /> - <ide-status-bar - :file="selectedFile" - /> - </template> - <template - v-else - > - <div class="ide-empty-state"> - <div class="row js-empty-state"> - <div class="col-xs-12"> - <div class="svg-content svg-250"> - <img :src="emptyStateSvgPath" /> - </div> - </div> - <div class="col-xs-12"> - <div class="text-content text-center"> - <h4> - Welcome to the GitLab IDE - </h4> - <p> - You can select a file in the left sidebar to begin - editing and use the right sidebar to commit your changes. - </p> - </div> - </div> - </div> - </div> - </template> - </div> - <ide-contextbar/> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue deleted file mode 100644 index 9d933b8891d..00000000000 --- a/app/assets/javascripts/ide/components/ide_context_bar.vue +++ /dev/null @@ -1,108 +0,0 @@ -<script> - import { mapGetters, mapState, mapActions } from 'vuex'; - import icon from '~/vue_shared/components/icon.vue'; - import panelResizer from '~/vue_shared/components/panel_resizer.vue'; - import repoCommitSection from './repo_commit_section.vue'; - - export default { - components: { - repoCommitSection, - icon, - panelResizer, - }, - data() { - return { - width: 290, - }; - }, - computed: { - ...mapState([ - 'rightPanelCollapsed', - ]), - ...mapGetters([ - 'changedFiles', - ]), - currentIcon() { - return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right'; - }, - maxSize() { - return window.innerWidth / 2; - }, - panelStyle() { - if (!this.rightPanelCollapsed) { - return { width: `${this.width}px` }; - } - return {}; - }, - }, - methods: { - ...mapActions([ - 'setPanelCollapsedStatus', - 'setResizingStatus', - ]), - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'right', - collapsed: !this.rightPanelCollapsed, - }); - }, - resizingStarted() { - this.setResizingStatus(true); - }, - resizingEnded() { - this.setResizingStatus(false); - }, - }, - }; -</script> - -<template> - <div - class="multi-file-commit-panel" - :class="{ - 'is-collapsed': rightPanelCollapsed, - }" - :style="panelStyle" - > - <div class="multi-file-commit-panel-section"> - <header - class="multi-file-commit-panel-header" - :class="{ - 'is-collapsed': rightPanelCollapsed, - }" - > - <div - class="multi-file-commit-panel-header-title" - v-if="!rightPanelCollapsed" - > - <icon - name="list-bulleted" - :size="18" - /> - Staged - </div> - <button - type="button" - class="btn btn-transparent multi-file-commit-panel-collapse-btn" - @click="toggleCollapsed" - > - <icon - :name="currentIcon" - :size="18" - /> - </button> - </header> - <repo-commit-section /> - </div> - <panel-resizer - :size.sync="width" - :enabled="!rightPanelCollapsed" - :start-size="290" - :min-size="200" - :max-size="maxSize" - @resize-start="resizingStarted" - @resize-end="resizingEnded" - side="left" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue deleted file mode 100644 index 2fbff2bd789..00000000000 --- a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue +++ /dev/null @@ -1,47 +0,0 @@ -<script> -import icon from '~/vue_shared/components/icon.vue'; -import repoTree from './ide_repo_tree.vue'; -import newDropdown from './new_dropdown/index.vue'; - -export default { - components: { - repoTree, - icon, - newDropdown, - }, - props: { - projectId: { - type: String, - required: true, - }, - branch: { - type: Object, - required: true, - }, - }, -}; -</script> - -<template> - <div class="branch-container"> - <div class="branch-header"> - <div class="branch-header-title"> - <icon - name="branch" - :size="12" - /> - {{ branch.name }} - </div> - <div class="branch-header-btns"> - <new-dropdown - :project-id="projectId" - :branch="branch.name" - path="" - /> - </div> - </div> - <div> - <repo-tree :tree-id="branch.treeId" /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue deleted file mode 100644 index 32bf7175c88..00000000000 --- a/app/assets/javascripts/ide/components/ide_project_tree.vue +++ /dev/null @@ -1,49 +0,0 @@ -<script> -import projectAvatarImage from '~/vue_shared/components/project_avatar/image.vue'; -import branchesTree from './ide_project_branches_tree.vue'; - -export default { - components: { - branchesTree, - projectAvatarImage, - }, - props: { - project: { - type: Object, - required: true, - }, - }, -}; -</script> - -<template> - <div class="projects-sidebar"> - <div class="context-header"> - <a - :title="project.name" - :href="project.web_url" - > - <div class="avatar-container s40 project-avatar"> - <project-avatar-image - class="avatar-container project-avatar" - :link-href="project.path" - :img-src="project.avatar_url" - :img-alt="project.name" - :img-size="40" - /> - </div> - <div class="sidebar-context-title"> - {{ project.name }} - </div> - </a> - </div> - <div class="multi-file-commit-panel-inner-scroll"> - <branches-tree - v-for="branch in project.branches" - :key="branch.name" - :project-id="project.path_with_namespace" - :branch="branch" - /> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue deleted file mode 100644 index 4a324264992..00000000000 --- a/app/assets/javascripts/ide/components/ide_repo_tree.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> -import { mapState } from 'vuex'; -import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; -import repoPreviousDirectory from './repo_prev_directory.vue'; -import repoFile from './repo_file.vue'; -import { treeList } from '../stores/utils'; - -export default { - components: { - repoPreviousDirectory, - repoFile, - skeletonLoadingContainer, - }, - props: { - treeId: { - type: String, - required: true, - }, - }, - computed: { - ...mapState([ - 'trees', - 'isRoot', - ]), - ...mapState({ - projectName(state) { - return state.project.name; - }, - }), - fetchedList() { - return treeList(this.$store.state, this.treeId); - }, - hasPreviousDirectory() { - return !this.isRoot && this.fetchedList.length; - }, - showLoading() { - if (this.trees[this.treeId]) { - return this.trees[this.treeId].loading; - } - return true; - }, - }, -}; -</script> - -<template> - <div> - <div class="ide-file-list"> - <table class="table"> - <tbody - v-if="treeId" - > - <repo-previous-directory - v-if="hasPreviousDirectory" - /> - <template v-if="showLoading"> - <div - class="multi-file-loading-container" - v-for="n in 3" - :key="n" - > - <skeleton-loading-container /> - </div> - </template> - <repo-file - v-for="file in fetchedList" - :key="file.key" - :file="file" - /> - </tbody> - </table> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue deleted file mode 100644 index 18b5059a17f..00000000000 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ /dev/null @@ -1,114 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - import icon from '~/vue_shared/components/icon.vue'; - import panelResizer from '~/vue_shared/components/panel_resizer.vue'; - import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - import projectTree from './ide_project_tree.vue'; - - export default { - components: { - projectTree, - icon, - panelResizer, - skeletonLoadingContainer, - }, - data() { - return { - width: 290, - }; - }, - computed: { - ...mapState([ - 'loading', - 'projects', - 'leftPanelCollapsed', - ]), - currentIcon() { - return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left'; - }, - maxSize() { - return window.innerWidth / 2; - }, - panelStyle() { - if (!this.leftPanelCollapsed) { - return { width: `${this.width}px` }; - } - return {}; - }, - showLoading() { - return this.loading; - }, - }, - methods: { - ...mapActions([ - 'setPanelCollapsedStatus', - 'setResizingStatus', - ]), - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'left', - collapsed: !this.leftPanelCollapsed, - }); - }, - resizingStarted() { - this.setResizingStatus(true); - }, - resizingEnded() { - this.setResizingStatus(false); - }, - }, - }; -</script> - -<template> - <div - class="multi-file-commit-panel" - :class="{ - 'is-collapsed': leftPanelCollapsed, - }" - :style="panelStyle" - > - <div class="multi-file-commit-panel-inner"> - <template v-if="showLoading"> - <div - class="multi-file-loading-container" - v-for="n in 3" - :key="n" - > - <skeleton-loading-container /> - </div> - </template> - <project-tree - v-for="project in projects" - :key="project.id" - :project="project" - /> - </div> - <button - type="button" - class="btn btn-transparent left-collapse-btn" - @click="toggleCollapsed" - > - <icon - :name="currentIcon" - :size="18" - /> - <span - v-if="!leftPanelCollapsed" - class="collapse-text" - > - Collapse sidebar - </span> - </button> - <panel-resizer - :size.sync="width" - :enabled="!leftPanelCollapsed" - :start-size="290" - :min-size="200" - :max-size="maxSize" - @resize-start="resizingStarted" - @resize-end="resizingEnded" - side="right" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue deleted file mode 100644 index 97ae64b206d..00000000000 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ /dev/null @@ -1,66 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import icon from '~/vue_shared/components/icon.vue'; - import tooltip from '~/vue_shared/directives/tooltip'; - import timeAgoMixin from '~/vue_shared/mixins/timeago'; - - export default { - components: { - icon, - }, - directives: { - tooltip, - }, - mixins: [ - timeAgoMixin, - ], - props: { - file: { - type: Object, - required: true, - }, - }, - computed: { - ...mapState([ - 'selectedFile', - ]), - }, - }; -</script> - -<template> - <div class="ide-status-bar"> - <div> - <icon - name="branch" - :size="12" - /> - {{ selectedFile.branchId }} - </div> - <div> - <div v-if="selectedFile.lastCommit && selectedFile.lastCommit.id"> - Last commit: - <a - v-tooltip - :title="selectedFile.lastCommit.message" - :href="selectedFile.lastCommit.url" - > - {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by - {{ selectedFile.lastCommit.author }} - </a> - </div> - </div> - <div class="text-right"> - {{ selectedFile.name }} - </div> - <div class="text-right"> - {{ selectedFile.eol }} - </div> - <div class="text-right"> - {{ file.editorRow }}:{{ file.editorColumn }} - </div> - <div class="text-right"> - {{ selectedFile.fileLanguage }} - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_branch_form.vue b/app/assets/javascripts/ide/components/new_branch_form.vue deleted file mode 100644 index 1e8d5bb6453..00000000000 --- a/app/assets/javascripts/ide/components/new_branch_form.vue +++ /dev/null @@ -1,108 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - import flash, { hideFlash } from '~/flash'; - import loadingIcon from '~/vue_shared/components/loading_icon.vue'; - - export default { - components: { - loadingIcon, - }, - data() { - return { - branchName: '', - loading: false, - }; - }, - computed: { - ...mapState([ - 'currentBranch', - ]), - btnDisabled() { - return this.loading || this.branchName === ''; - }, - }, - created() { - // Dropdown is outside of Vue instance & is controlled by Bootstrap - this.$dropdown = $('.git-revision-dropdown'); - - // text element is outside Vue app - this.dropdownText = document.querySelector('.project-refs-form .dropdown-toggle-text'); - }, - methods: { - ...mapActions([ - 'createNewBranch', - ]), - toggleDropdown() { - this.$dropdown.dropdown('toggle'); - }, - submitNewBranch() { - // need to query as the element is appended outside of Vue - const flashEl = this.$refs.flashContainer.querySelector('.flash-alert'); - - this.loading = true; - - if (flashEl) { - hideFlash(flashEl, false); - } - - this.createNewBranch(this.branchName) - .then(() => { - this.loading = false; - this.branchName = ''; - - if (this.dropdownText) { - this.dropdownText.textContent = this.currentBranchId; - } - - this.toggleDropdown(); - }) - .catch(res => res.json().then((data) => { - this.loading = false; - flash(data.message, 'alert', this.$el); - })); - }, - }, - }; -</script> - -<template> - <div> - <div - class="flash-container" - ref="flashContainer" - > - </div> - <p> - Create from: - <code>{{ currentBranch }}</code> - </p> - <input - class="form-control js-new-branch-name" - type="text" - placeholder="Name new branch" - v-model="branchName" - @keyup.enter.stop.prevent="submitNewBranch" - /> - <div class="prepend-top-default clearfix"> - <button - type="button" - class="btn btn-primary pull-left" - :disabled="btnDisabled" - @click.stop.prevent="submitNewBranch" - > - <loading-icon - v-if="loading" - :inline="true" - /> - <span>Create</span> - </button> - <button - type="button" - class="btn btn-default pull-right" - @click.stop.prevent="toggleDropdown" - > - Cancel - </button> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue deleted file mode 100644 index ef653357f5f..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ /dev/null @@ -1,101 +0,0 @@ -<script> - import newModal from './modal.vue'; - import upload from './upload.vue'; - import icon from '../../../vue_shared/components/icon.vue'; - - export default { - components: { - icon, - newModal, - upload, - }, - props: { - branch: { - type: String, - required: true, - }, - path: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - }, - data() { - return { - openModal: false, - modalType: '', - }; - }, - methods: { - createNewItem(type) { - this.modalType = type; - this.openModal = true; - }, - hideModal() { - this.openModal = false; - }, - }, - }; -</script> - -<template> - <div class="repo-new-btn pull-right"> - <div class="dropdown"> - <button - type="button" - class="btn btn-sm btn-default dropdown-toggle add-to-tree" - data-toggle="dropdown" - aria-label="Create new file or directory" - > - <icon - name="plus" - :size="12" - css-classes="pull-left" - /> - <icon - name="arrow-down" - :size="12" - css-classes="pull-left" - /> - </button> - <ul class="dropdown-menu dropdown-menu-right"> - <li> - <a - href="#" - role="button" - @click.prevent="createNewItem('blob')" - > - {{ __('New file') }} - </a> - </li> - <li> - <upload - :branch-id="branch" - :path="path" - :parent="parent" - /> - </li> - <li> - <a - href="#" - role="button" - @click.prevent="createNewItem('tree')" - > - {{ __('New directory') }} - </a> - </li> - </ul> - </div> - <new-modal - v-if="openModal" - :type="modalType" - :branch-id="branch" - :path="path" - :parent="parent" - @hide="hideModal" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue deleted file mode 100644 index 36cd825c6dd..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ /dev/null @@ -1,112 +0,0 @@ -<script> - import { mapActions, mapState } from 'vuex'; - import { __ } from '../../../locale'; - import modal from '../../../vue_shared/components/modal.vue'; - - export default { - components: { - modal, - }, - props: { - branchId: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - type: { - type: String, - required: true, - }, - path: { - type: String, - required: true, - }, - }, - data() { - return { - entryName: this.path !== '' ? `${this.path}/` : '', - }; - }, - computed: { - ...mapState([ - 'currentProjectId', - ]), - modalTitle() { - if (this.type === 'tree') { - return __('Create new directory'); - } - - return __('Create new file'); - }, - buttonLabel() { - if (this.type === 'tree') { - return __('Create directory'); - } - - return __('Create file'); - }, - formLabelName() { - if (this.type === 'tree') { - return __('Directory name'); - } - - return __('File name'); - }, - }, - mounted() { - this.$refs.fieldName.focus(); - }, - methods: { - ...mapActions([ - 'createTempEntry', - ]), - createEntryInStore() { - this.createTempEntry({ - projectId: this.currentProjectId, - branchId: this.branchId, - parent: this.parent, - name: this.entryName.replace(new RegExp(`^${this.path}/`), ''), - type: this.type, - }); - - this.hideModal(); - }, - hideModal() { - this.$emit('hide'); - }, - }, - }; -</script> - -<template> - <modal - :title="modalTitle" - :primary-button-label="buttonLabel" - kind="success" - @cancel="hideModal" - @submit="createEntryInStore" - > - <form - class="form-horizontal" - slot="body" - @submit.prevent="createEntryInStore" - > - <fieldset class="form-group append-bottom-0"> - <label class="label-light col-sm-3"> - {{ formLabelName }} - </label> - <div class="col-sm-9"> - <input - type="text" - class="form-control" - v-model="entryName" - ref="fieldName" - /> - </div> - </fieldset> - </form> - </modal> -</template> diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue deleted file mode 100644 index 6244737fa43..00000000000 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ /dev/null @@ -1,87 +0,0 @@ -<script> - import { mapActions, mapState } from 'vuex'; - - export default { - props: { - branchId: { - type: String, - required: true, - }, - parent: { - type: Object, - default: null, - }, - }, - computed: { - ...mapState([ - 'trees', - 'currentProjectId', - ]), - }, - mounted() { - this.$refs.fileUpload.addEventListener('change', this.openFile); - }, - beforeDestroy() { - this.$refs.fileUpload.removeEventListener('change', this.openFile); - }, - methods: { - ...mapActions([ - 'createTempEntry', - ]), - createFile(target, file, isText) { - const { name } = file; - let { result } = target; - - if (!isText) { - result = result.split('base64,')[1]; - } - - this.createTempEntry({ - name, - projectId: this.currentProjectId, - branchId: this.branchId, - parent: this.parent, - type: 'blob', - content: result, - base64: !isText, - }); - }, - readFile(file) { - const reader = new FileReader(); - const isText = file.type.match(/text.*/) !== null; - - reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true }); - - if (isText) { - reader.readAsText(file); - } else { - reader.readAsDataURL(file); - } - }, - openFile() { - Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file)); - }, - startFileUpload() { - this.$refs.fileUpload.click(); - }, - }, - }; -</script> - -<template> - <div> - <a - href="#" - role="button" - @click.prevent="startFileUpload" - > - {{ __('Upload file') }} - </a> - <input - id="file-upload" - type="file" - class="hidden" - ref="fileUpload" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue deleted file mode 100644 index 37f2cf30a29..00000000000 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ /dev/null @@ -1,171 +0,0 @@ -<script> -import { mapGetters, mapState, mapActions } from 'vuex'; -import tooltip from '~/vue_shared/directives/tooltip'; -import icon from '~/vue_shared/components/icon.vue'; -import modal from '~/vue_shared/components/modal.vue'; -import commitFilesList from './commit_sidebar/list.vue'; - -export default { - components: { - modal, - icon, - commitFilesList, - }, - directives: { - tooltip, - }, - data() { - return { - showNewBranchModal: false, - submitCommitsLoading: false, - startNewMR: false, - commitMessage: '', - }; - }, - computed: { - ...mapState([ - 'currentProjectId', - 'currentBranchId', - 'rightPanelCollapsed', - ]), - ...mapGetters([ - 'changedFiles', - ]), - commitButtonDisabled() { - return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length; - }, - commitMessageCount() { - return this.commitMessage.length; - }, - }, - methods: { - ...mapActions([ - 'checkCommitStatus', - 'commitChanges', - 'getTreeData', - 'setPanelCollapsedStatus', - ]), - makeCommit(newBranch = false) { - const createNewBranch = newBranch || this.startNewMR; - - const payload = { - branch: createNewBranch ? - `${this.currentBranchId}-${new Date().getTime().toString()}` : - this.currentBranchId, - commit_message: this.commitMessage, - actions: this.changedFiles.map(f => ({ - action: f.tempFile ? 'create' : 'update', - file_path: f.path, - content: f.content, - encoding: f.base64 ? 'base64' : 'text', - })), - start_branch: createNewBranch ? this.currentBranchId : undefined, - }; - - this.showNewBranchModal = false; - this.submitCommitsLoading = true; - - this.commitChanges({ payload, newMr: this.startNewMR }) - .then(() => { - this.submitCommitsLoading = false; - this.commitMessage = ''; - this.startNewMR = false; - }) - .catch(() => { - this.submitCommitsLoading = false; - }); - }, - tryCommit() { - this.submitCommitsLoading = true; - - this.checkCommitStatus() - .then((branchChanged) => { - if (branchChanged) { - this.showNewBranchModal = true; - } else { - this.makeCommit(); - } - }) - .catch(() => { - this.submitCommitsLoading = false; - }); - }, - toggleCollapsed() { - this.setPanelCollapsedStatus({ - side: 'right', - collapsed: !this.rightPanelCollapsed, - }); - }, - }, -}; -</script> - -<template> - <div class="multi-file-commit-panel-section"> - <modal - v-if="showNewBranchModal" - :primary-button-label="__('Create new branch')" - kind="primary" - :title="__('Branch has changed')" - :text="__(`This branch has changed since -you started editing. Would you like to create a new branch?`)" - @cancel="showNewBranchModal = false" - @submit="makeCommit(true)" - /> - <commit-files-list - title="Staged" - :file-list="changedFiles" - :collapsed="rightPanelCollapsed" - @toggleCollapsed="toggleCollapsed" - /> - <form - class="form-horizontal multi-file-commit-form" - @submit.prevent="tryCommit" - v-if="!rightPanelCollapsed" - > - <div class="multi-file-commit-fieldset"> - <textarea - class="form-control multi-file-commit-message" - name="commit-message" - v-model="commitMessage" - placeholder="Commit message" - > - </textarea> - </div> - <div class="multi-file-commit-fieldset"> - <label - v-tooltip - title="Create a new merge request with these changes" - data-container="body" - data-placement="top" - > - <input - type="checkbox" - v-model="startNewMR" - /> - Merge Request - </label> - <button - type="submit" - :disabled="commitButtonDisabled" - class="btn btn-default btn-sm append-right-10 prepend-left-10" - :class="{ disabled: submitCommitsLoading }" - > - <i - v-if="submitCommitsLoading" - class="js-commit-loading-icon fa fa-spinner fa-spin" - aria-hidden="true" - aria-label="loading" - > - </i> - Commit - </button> - <div - class="multi-file-commit-message-count" - > - {{ commitMessageCount }} - </div> - </div> - </form> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue deleted file mode 100644 index fe4320731d9..00000000000 --- a/app/assets/javascripts/ide/components/repo_edit_button.vue +++ /dev/null @@ -1,57 +0,0 @@ -<script> -import { mapGetters, mapActions, mapState } from 'vuex'; -import modal from '~/vue_shared/components/modal.vue'; - -export default { - components: { - modal, - }, - computed: { - ...mapState([ - 'editMode', - 'discardPopupOpen', - ]), - ...mapGetters([ - 'canEditFile', - ]), - buttonLabel() { - return this.editMode ? this.__('Cancel edit') : this.__('Edit'); - }, - }, - methods: { - ...mapActions([ - 'toggleEditMode', - 'closeDiscardPopup', - ]), - }, -}; -</script> - -<template> - <div class="editable-mode"> - <button - v-if="canEditFile" - class="btn btn-default" - type="button" - @click.prevent="toggleEditMode()"> - <i - v-if="!editMode" - class="fa fa-pencil" - aria-hidden="true"> - </i> - <span> - {{ buttonLabel }} - </span> - </button> - <modal - v-if="discardPopupOpen" - class="text-left" - :primary-button-label="__('Discard changes')" - kind="warning" - :title="__('Are you sure?')" - :text="__('Are you sure you want to discard your changes?')" - @cancel="closeDiscardPopup" - @submit="toggleEditMode(true)" - /> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue deleted file mode 100644 index f31cc12339b..00000000000 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ /dev/null @@ -1,136 +0,0 @@ -<script> -/* global monaco */ -import { mapState, mapGetters, mapActions } from 'vuex'; -import flash from '~/flash'; -import monacoLoader from '../monaco_loader'; -import Editor from '../lib/editor'; - -export default { - computed: { - ...mapGetters([ - 'activeFile', - 'activeFileExtension', - ]), - ...mapState([ - 'leftPanelCollapsed', - 'rightPanelCollapsed', - 'panelResizing', - ]), - shouldHideEditor() { - return this.activeFile.binary && !this.activeFile.raw; - }, - }, - watch: { - activeFile(oldVal, newVal) { - if (newVal && !newVal.active) { - this.initMonaco(); - } - }, - leftPanelCollapsed() { - this.editor.updateDimensions(); - }, - rightPanelCollapsed() { - this.editor.updateDimensions(); - }, - panelResizing(isResizing) { - if (isResizing === false) { - this.editor.updateDimensions(); - } - }, - }, - beforeDestroy() { - this.editor.dispose(); - }, - mounted() { - if (this.editor && monaco) { - this.initMonaco(); - } else { - monacoLoader(['vs/editor/editor.main'], () => { - this.editor = Editor.create(monaco); - - this.initMonaco(); - }); - } - }, - methods: { - ...mapActions([ - 'getRawFileData', - 'changeFileContent', - 'setFileLanguage', - 'setEditorPosition', - 'setFileEOL', - ]), - initMonaco() { - if (this.shouldHideEditor) return; - - this.editor.clearEditor(); - - this.getRawFileData(this.activeFile) - .then(() => { - this.editor.createInstance(this.$refs.editor); - }) - .then(() => this.setupEditor()) - .catch((err) => { - flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true); - throw err; - }); - }, - setupEditor() { - if (!this.activeFile) return; - - const model = this.editor.createModel(this.activeFile); - - this.editor.attachModel(model); - - model.onChange((m) => { - this.changeFileContent({ - file: this.activeFile, - content: m.getValue(), - }); - }); - - // Handle Cursor Position - this.editor.onPositionChange((instance, e) => { - this.setEditorPosition({ - editorRow: e.position.lineNumber, - editorColumn: e.position.column, - }); - }); - - this.editor.setPosition({ - lineNumber: this.activeFile.editorRow, - column: this.activeFile.editorColumn, - }); - - // Handle File Language - this.setFileLanguage({ - fileLanguage: model.language, - }); - - // Get File eol - this.setFileEOL({ - eol: model.eol, - }); - }, - }, -}; -</script> - -<template> - <div - id="ide" - class="blob-viewer-container blob-editor-container" - > - <div - v-if="shouldHideEditor" - v-html="activeFile.html" - > - </div> - <div - v-show="!shouldHideEditor" - ref="editor" - class="multi-file-editor-holder" - > - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue deleted file mode 100644 index cbbab765e1c..00000000000 --- a/app/assets/javascripts/ide/components/repo_file.vue +++ /dev/null @@ -1,165 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import timeAgoMixin from '~/vue_shared/mixins/timeago'; - import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - import fileIcon from '~/vue_shared/components/file_icon.vue'; - import newDropdown from './new_dropdown/index.vue'; - - export default { - components: { - skeletonLoadingContainer, - newDropdown, - fileIcon, - }, - mixins: [ - timeAgoMixin, - ], - props: { - file: { - type: Object, - required: true, - }, - showExtraColumns: { - type: Boolean, - default: false, - }, - }, - computed: { - ...mapState([ - 'leftPanelCollapsed', - ]), - isSubmodule() { - return this.file.type === 'submodule'; - }, - isTree() { - return this.file.type === 'tree'; - }, - levelIndentation() { - if (this.file.level > 0) { - return { - marginLeft: `${this.file.level * 16}px`, - }; - } - return {}; - }, - shortId() { - return this.file.id.substr(0, 8); - }, - submoduleColSpan() { - return !this.leftPanelCollapsed && this.isSubmodule ? 3 : 1; - }, - fileClass() { - if (this.file.type === 'blob') { - if (this.file.active) { - return 'file-open file-active'; - } - return this.file.opened ? 'file-open' : ''; - } - return ''; - }, - changedClass() { - return { - 'fa-circle unsaved-icon': this.file.changed || this.file.tempFile, - }; - }, - }, - updated() { - if (this.file.type === 'blob' && this.file.active) { - this.$el.scrollIntoView(); - } - }, - methods: { - clickFile(row) { - // Manual Action if a tree is selected/opened - if (this.file.type === 'tree' && this.$router.currentRoute.path === `/project${row.url}`) { - this.$store.dispatch('toggleTreeOpen', { - endpoint: this.file.url, - tree: this.file, - }); - } - this.$router.push(`/project${row.url}`); - }, - }, - }; -</script> - -<template> - <tr - class="file" - :class="fileClass" - @click="clickFile(file)"> - <td - class="multi-file-table-name" - :colspan="submoduleColSpan" - > - <a - class="repo-file-name" - > - <file-icon - :file-name="file.name" - :loading="file.loading" - :folder="file.type === 'tree'" - :opened="file.opened" - :style="levelIndentation" - :size="16" - /> - {{ file.name }} - </a> - <new-dropdown - v-if="isTree" - :project-id="file.projectId" - :branch="file.branchId" - :path="file.path" - :parent="file" - /> - <i - class="fa" - v-if="file.changed || file.tempFile" - :class="changedClass" - aria-hidden="true" - > - </i> - <template v-if="isSubmodule && file.id"> - @ - <span class="commit-sha"> - <a - @click.stop - :href="file.tree_url" - > - {{ shortId }} - </a> - </span> - </template> - </td> - - <template v-if="showExtraColumns && !isSubmodule"> - <td class="multi-file-table-col-commit-message hidden-sm hidden-xs"> - <a - v-if="file.lastCommit.message" - @click.stop - :href="file.lastCommit.url" - > - {{ file.lastCommit.message }} - </a> - <skeleton-loading-container - v-else - :small="true" - /> - </td> - - <td class="commit-update hidden-xs text-right"> - <span - v-if="file.lastCommit.updatedAt" - :title="tooltipTitle(file.lastCommit.updatedAt)" - > - {{ timeFormated(file.lastCommit.updatedAt) }} - </span> - <skeleton-loading-container - v-else - class="animation-container-right" - :small="true" - /> - </td> - </template> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue deleted file mode 100644 index aabc0d8eada..00000000000 --- a/app/assets/javascripts/ide/components/repo_file_buttons.vue +++ /dev/null @@ -1,60 +0,0 @@ -<script> -import { mapGetters } from 'vuex'; - -export default { - computed: { - ...mapGetters([ - 'activeFile', - ]), - showButtons() { - return this.activeFile.rawPath || - this.activeFile.blamePath || - this.activeFile.commitsPath || - this.activeFile.permalink; - }, - rawDownloadButtonLabel() { - return this.activeFile.binary ? 'Download' : 'Raw'; - }, - }, -}; -</script> - -<template> - <div - v-if="showButtons" - class="multi-file-editor-btn-group" - > - <a - :href="activeFile.rawPath" - target="_blank" - class="btn btn-default btn-sm raw" - rel="noopener noreferrer"> - {{ rawDownloadButtonLabel }} - </a> - - <div - class="btn-group" - role="group" - aria-label="File actions" - > - <a - :href="activeFile.blamePath" - class="btn btn-default btn-sm blame" - > - Blame - </a> - <a - :href="activeFile.commitsPath" - class="btn btn-default btn-sm history" - > - History - </a> - <a - :href="activeFile.permalink" - class="btn btn-default btn-sm permalink" - > - Permalink - </a> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue deleted file mode 100644 index 79af8c0b0c7..00000000000 --- a/app/assets/javascripts/ide/components/repo_loading_file.vue +++ /dev/null @@ -1,42 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; - - export default { - components: { - skeletonLoadingContainer, - }, - computed: { - ...mapState([ - 'leftPanelCollapsed', - ]), - }, - }; -</script> - -<template> - <tr - class="loading-file" - aria-label="Loading files" - > - <td class="multi-file-table-col-name"> - <skeleton-loading-container - :small="true" - /> - </td> - <template v-if="!leftPanelCollapsed"> - <td class="hidden-sm hidden-xs"> - <skeleton-loading-container - :small="true" - /> - </td> - - <td class="hidden-xs"> - <skeleton-loading-container - class="animation-container-right" - :small="true" - /> - </td> - </template> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_prev_directory.vue b/app/assets/javascripts/ide/components/repo_prev_directory.vue deleted file mode 100644 index 7cd359ea4ed..00000000000 --- a/app/assets/javascripts/ide/components/repo_prev_directory.vue +++ /dev/null @@ -1,32 +0,0 @@ -<script> - import { mapState, mapActions } from 'vuex'; - - export default { - computed: { - ...mapState([ - 'parentTreeUrl', - 'leftPanelCollapsed', - ]), - colSpanCondition() { - return this.leftPanelCollapsed ? undefined : 3; - }, - }, - methods: { - ...mapActions([ - 'getTreeData', - ]), - }, - }; -</script> - -<template> - <tr class="file prev-directory"> - <td - :colspan="colSpanCondition" - class="table-cell" - @click.prevent="getTreeData({ endpoint: parentTreeUrl })" - > - <a :href="parentTreeUrl">...</a> - </td> - </tr> -</template> diff --git a/app/assets/javascripts/ide/components/repo_preview.vue b/app/assets/javascripts/ide/components/repo_preview.vue deleted file mode 100644 index a216269e292..00000000000 --- a/app/assets/javascripts/ide/components/repo_preview.vue +++ /dev/null @@ -1,71 +0,0 @@ -<script> - import { mapGetters } from 'vuex'; - import LineHighlighter from '~/line_highlighter'; - import syntaxHighlight from '~/syntax_highlight'; - - export default { - computed: { - ...mapGetters([ - 'activeFile', - ]), - renderErrorTooLarge() { - return this.activeFile.renderError === 'too_large'; - }, - }, - mounted() { - this.highlightFile(); - this.lineHighlighter = new LineHighlighter({ - fileHolderSelector: '.blob-viewer-container', - scrollFileHolder: true, - }); - }, - updated() { - this.$nextTick(() => { - this.highlightFile(); - }); - }, - methods: { - highlightFile() { - syntaxHighlight($(this.$el).find('.file-content')); - }, - }, - }; -</script> - -<template> - <div> - <div - v-if="!activeFile.renderError" - v-html="activeFile.html" - class="multi-file-preview-holder" - > - </div> - <div - v-else-if="activeFile.tempFile" - class="vertical-center render-error"> - <p class="text-center"> - The source could not be displayed for this temporary file. - </p> - </div> - <div - v-else-if="renderErrorTooLarge" - class="vertical-center render-error"> - <p class="text-center"> - The source could not be displayed because it is too large. - You can <a - :href="activeFile.rawPath" - download>download</a> it instead. - </p> - </div> - <div - v-else - class="vertical-center render-error"> - <p class="text-center"> - The source could not be displayed because a rendering error occurred. - You can <a - :href="activeFile.rawPath" - download>download</a> it instead. - </p> - </div> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue deleted file mode 100644 index 5656081c598..00000000000 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ /dev/null @@ -1,74 +0,0 @@ -<script> - import { mapActions } from 'vuex'; - import fileIcon from '~/vue_shared/components/file_icon.vue'; - - export default { - components: { - fileIcon, - }, - props: { - tab: { - type: Object, - required: true, - }, - }, - computed: { - closeLabel() { - if (this.tab.changed || this.tab.tempFile) { - return `${this.tab.name} changed`; - } - return `Close ${this.tab.name}`; - }, - changedClass() { - const tabChangedObj = { - 'fa-times close-icon': !this.tab.changed && !this.tab.tempFile, - 'fa-circle unsaved-icon': this.tab.changed || this.tab.tempFile, - }; - return tabChangedObj; - }, - }, - - methods: { - ...mapActions([ - 'closeFile', - ]), - clickFile(tab) { - this.$router.push(`/project${tab.url}`); - }, - }, - }; -</script> - -<template> - <li @click="clickFile(tab)"> - <button - type="button" - class="multi-file-tab-close" - @click.stop.prevent="closeFile({ file: tab })" - :aria-label="closeLabel" - :class="{ - 'modified': tab.changed, - }" - :disabled="tab.changed" - > - <i - class="fa" - :class="changedClass" - aria-hidden="true" - > - </i> - </button> - - <div - class="multi-file-tab" - :class="{active : tab.active }" - :title="tab.url" - > - <file-icon - :file-name="tab.name" - :size="16" - /> - {{ tab.name }} - </div> - </li> -</template> diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue deleted file mode 100644 index ca363bba0ef..00000000000 --- a/app/assets/javascripts/ide/components/repo_tabs.vue +++ /dev/null @@ -1,27 +0,0 @@ -<script> - import { mapState } from 'vuex'; - import RepoTab from './repo_tab.vue'; - - export default { - components: { - 'repo-tab': RepoTab, - }, - computed: { - ...mapState([ - 'openFiles', - ]), - }, - }; -</script> - -<template> - <ul - class="multi-file-tabs list-unstyled append-bottom-0" - > - <repo-tab - v-for="tab in openFiles" - :key="tab.key" - :tab="tab" - /> - </ul> -</template> |