From 51c64f3fc7180732621d60f939bfe6157165040f Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 21 Mar 2018 10:05:08 +0000 Subject: Added staged files state to IDE Closes https://gitlab.com/gitlab-org/gitlab-ee/issues/4541 --- .../ide/components/commit_sidebar/empty_state.vue | 87 ++++++++++++++++++ .../ide/components/commit_sidebar/list.vue | 94 +++++++++++++++++-- .../components/commit_sidebar/list_collapsed.vue | 53 ++++++++--- .../ide/components/commit_sidebar/list_item.vue | 73 ++++++++------- .../ide/components/commit_sidebar/stage_button.vue | 49 ++++++++++ .../components/commit_sidebar/unstage_button.vue | 38 ++++++++ .../javascripts/ide/components/ide_context_bar.vue | 42 --------- .../ide/components/repo_commit_section.vue | 101 +++++++-------------- app/assets/javascripts/ide/stores/actions.js | 15 +++ app/assets/javascripts/ide/stores/actions/file.js | 8 ++ app/assets/javascripts/ide/stores/getters.js | 2 + .../ide/stores/modules/commit/actions.js | 12 ++- .../javascripts/ide/stores/mutation_types.js | 4 + app/assets/javascripts/ide/stores/mutations.js | 5 + .../javascripts/ide/stores/mutations/file.js | 28 ++++++ app/assets/javascripts/ide/stores/state.js | 1 + app/assets/javascripts/ide/stores/utils.js | 28 +++--- 17 files changed, 453 insertions(+), 187 deletions(-) create mode 100644 app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue create mode 100644 app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue create mode 100644 app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue (limited to 'app/assets/javascripts/ide') diff --git a/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue new file mode 100644 index 00000000000..e69535335d4 --- /dev/null +++ b/app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue @@ -0,0 +1,87 @@ + + + diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 453208f3f19..e3280bbb204 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -1,5 +1,5 @@ diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index 18934af004a..93c8fc00f28 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -1,38 +1,44 @@ diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue new file mode 100644 index 00000000000..0189358d82f --- /dev/null +++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue @@ -0,0 +1,49 @@ + + + diff --git a/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue new file mode 100644 index 00000000000..fd7ec0366a2 --- /dev/null +++ b/app/assets/javascripts/ide/components/commit_sidebar/unstage_button.vue @@ -0,0 +1,38 @@ + + + diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue index 79a83b47994..627fbeb9adf 100644 --- a/app/assets/javascripts/ide/components/ide_context_bar.vue +++ b/app/assets/javascripts/ide/components/ide_context_bar.vue @@ -1,5 +1,4 @@ @@ -41,40 +33,6 @@ export default {
-
-
-
- - Staged -
-
- -
this.commitChanges()); + return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => + this.commitChanges(), + ); }, }, }; @@ -77,9 +60,6 @@ export default { diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js index 7e920aa9f30..639195308b2 100644 --- a/app/assets/javascripts/ide/stores/actions.js +++ b/app/assets/javascripts/ide/stores/actions.js @@ -33,6 +33,13 @@ export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => { } }; +export const toggleRightPanelCollapsed = ({ dispatch, state }) => { + dispatch('setPanelCollapsedStatus', { + side: 'right', + collapsed: !state.rightPanelCollapsed, + }); +}; + export const setResizingStatus = ({ commit }, resizing) => { commit(types.SET_RESIZING_STATUS, resizing); }; @@ -108,6 +115,14 @@ export const scrollToTab = () => { }); }; +export const stageAllChanges = ({ state, commit }) => { + [...state.changedFiles].forEach(file => commit(types.STAGE_CHANGE, file)); +}; + +export const unstageAllChanges = ({ state, commit }) => { + [...state.stagedFiles].forEach(file => commit(types.UNSTAGE_CHANGE, file)); +}; + export const updateViewer = ({ commit }, viewer) => { commit(types.UPDATE_VIEWER, viewer); }; diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js index ddc4b757bf9..61aa0e983fc 100644 --- a/app/assets/javascripts/ide/stores/actions/file.js +++ b/app/assets/javascripts/ide/stores/actions/file.js @@ -144,3 +144,11 @@ export const discardFileChanges = ({ state, commit }, path) => { eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw); }; + +export const stageChange = ({ commit }, file) => { + commit(types.STAGE_CHANGE, file); +}; + +export const unstageChange = ({ commit }, file) => { + commit(types.UNSTAGE_CHANGE, file); +}; diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js index eba325a31df..85f9b75636a 100644 --- a/app/assets/javascripts/ide/stores/getters.js +++ b/app/assets/javascripts/ide/stores/getters.js @@ -28,3 +28,5 @@ export const currentIcon = state => state.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right'; export const hasChanges = state => !!state.changedFiles.length; + +export const unstagedFiles = state => state.changedFiles.filter(f => !f.staged); diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js index f536ce6344b..5346bbcdfd9 100644 --- a/app/assets/javascripts/ide/stores/modules/commit/actions.js +++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js @@ -131,9 +131,10 @@ export const updateFilesAfterCommit = ( ); }); - commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true }); - - if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) { + if ( + state.commitAction === consts.COMMIT_TO_NEW_BRANCH && + rootGetters.activeFile + ) { router.push( `/project/${rootState.currentProjectId}/blob/${branch}/${ rootGetters.activeFile.path @@ -186,7 +187,6 @@ export const commitChanges = ({ } dispatch('setLastCommitMessage', data); - dispatch('updateCommitMessage', ''); if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) { dispatch( @@ -204,6 +204,10 @@ export const commitChanges = ({ branch: getters.branchName, }); } + + commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true }); + + dispatch('discardDraft'); }) .catch(err => { let errMsg = __('Error committing changes. Please try again.'); diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js index e28f190897c..49eb30302c6 100644 --- a/app/assets/javascripts/ide/stores/mutation_types.js +++ b/app/assets/javascripts/ide/stores/mutation_types.js @@ -41,3 +41,7 @@ export const SET_ENTRIES = 'SET_ENTRIES'; export const CREATE_TMP_ENTRY = 'CREATE_TMP_ENTRY'; export const UPDATE_VIEWER = 'UPDATE_VIEWER'; export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE'; + +export const CLEAR_STAGED_CHANGES = 'CLEAR_STAGED_CHANGES'; +export const STAGE_CHANGE = 'STAGE_CHANGE'; +export const UNSTAGE_CHANGE = 'UNSTAGE_CHANGE'; diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js index da41fc9285c..5409ec1ec47 100644 --- a/app/assets/javascripts/ide/stores/mutations.js +++ b/app/assets/javascripts/ide/stores/mutations.js @@ -51,6 +51,11 @@ export default { lastCommitMsg, }); }, + [types.CLEAR_STAGED_CHANGES](state) { + Object.assign(state, { + stagedFiles: [], + }); + }, [types.SET_ENTRIES](state, entries) { Object.assign(state, { entries, diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js index 2500f13db7c..8e739a83270 100644 --- a/app/assets/javascripts/ide/stores/mutations/file.js +++ b/app/assets/javascripts/ide/stores/mutations/file.js @@ -1,4 +1,5 @@ import * as types from '../mutation_types'; +import { findIndexOfFile, findEntry } from '../utils'; export default { [types.SET_FILE_ACTIVE](state, { path, active }) { @@ -75,6 +76,33 @@ export default { changedFiles: state.changedFiles.filter(f => f.path !== path), }); }, + [types.STAGE_CHANGE](state, file) { + const stagedFile = findEntry(state.stagedFiles, 'blob', file.name); + + Object.assign(file, { + staged: true, + }); + + if (stagedFile) { + Object.assign(stagedFile, { + ...file, + }); + } else { + state.stagedFiles.push({ + ...file, + }); + } + }, + [types.UNSTAGE_CHANGE](state, file) { + const indexOfStagedFile = findIndexOfFile(state.stagedFiles, file); + const changedFile = findEntry(state.changedFiles, 'blob', file.name); + + state.stagedFiles.splice(indexOfStagedFile, 1); + + Object.assign(changedFile, { + staged: false, + }); + }, [types.TOGGLE_FILE_CHANGED](state, { file, changed }) { Object.assign(state.entries[file.path], { changed, diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js index 6110f54951c..6c09324e4ba 100644 --- a/app/assets/javascripts/ide/stores/state.js +++ b/app/assets/javascripts/ide/stores/state.js @@ -2,6 +2,7 @@ export default () => ({ currentProjectId: '', currentBranchId: '', changedFiles: [], + stagedFiles: [], endpoints: {}, lastCommitMsg: '', lastCommitPath: '', diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js index 487ea1ead8e..da0069b63a8 100644 --- a/app/assets/javascripts/ide/stores/utils.js +++ b/app/assets/javascripts/ide/stores/utils.js @@ -13,6 +13,7 @@ export const dataStructure = () => ({ opened: false, active: false, changed: false, + staged: false, lastCommitPath: '', lastCommit: { id: '', @@ -38,7 +39,7 @@ export const dataStructure = () => ({ eol: '', }); -export const decorateData = (entity) => { +export const decorateData = entity => { const { id, projectId, @@ -57,7 +58,6 @@ export const decorateData = (entity) => { base64 = false, file_lock, - } = entity; return { @@ -80,24 +80,23 @@ export const decorateData = (entity) => { base64, file_lock, - }; }; -export const findEntry = (tree, type, name, prop = 'name') => tree.find( - f => f.type === type && f[prop] === name, -); +export const findEntry = (tree, type, name, prop = 'name') => + tree.find(f => f.type === type && f[prop] === name); -export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path); +export const findIndexOfFile = (state, file) => + state.findIndex(f => f.path === file.path); -export const setPageTitle = (title) => { +export const setPageTitle = title => { document.title = title; }; export const createCommitPayload = (branch, newBranch, state, rootState) => ({ branch, commit_message: state.commitMessage, - actions: rootState.changedFiles.map(f => ({ + actions: rootState.stagedFiles.map(f => ({ action: f.tempFile ? 'create' : 'update', file_path: f.path, content: f.content, @@ -120,6 +119,11 @@ const sortTreesByTypeAndName = (a, b) => { return 0; }; -export const sortTree = sortedTree => sortedTree.map(entity => Object.assign(entity, { - tree: entity.tree.length ? sortTree(entity.tree) : [], -})).sort(sortTreesByTypeAndName); +export const sortTree = sortedTree => + sortedTree + .map(entity => + Object.assign(entity, { + tree: entity.tree.length ? sortTree(entity.tree) : [], + }), + ) + .sort(sortTreesByTypeAndName); -- cgit v1.2.1