Skip to content

Commit 965dbbd

Browse files
author
Filipa Lacerda
committed
Merge branch 'diff-settings-dropdown' into 'master'
Added dropdown for diff settings Closes #55491 See merge request gitlab-org/gitlab-ce!24460
2 parents aabc487 + 2f40aa6 commit 965dbbd

21 files changed

+411
-194
lines changed

‎app/assets/javascripts/diffs/components/compare_versions.vue

+5-44
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22
import { mapActions, mapGetters, mapState } from 'vuex';
33
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
44
import { __ } from '~/locale';
5-
import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
65
import { polyfillSticky } from '~/lib/utils/sticky';
76
import Icon from '~/vue_shared/components/icon.vue';
87
import CompareVersionsDropdown from './compare_versions_dropdown.vue';
8+
import SettingsDropdown from './settings_dropdown.vue';
99
1010
export default {
1111
components: {
1212
CompareVersionsDropdown,
1313
Icon,
1414
GlLink,
1515
GlButton,
16+
SettingsDropdown,
1617
},
1718
directives: {
1819
GlTooltip: GlTooltipDirective,
@@ -35,23 +36,10 @@ export default {
3536
},
3637
computed: {
3738
...mapState('diffs', ['commit', 'showTreeList', 'startVersion', 'latestVersionPath']),
38-
...mapGetters('diffs', ['isInlineView', 'isParallelView', 'hasCollapsedFile']),
39+
...mapGetters('diffs', ['hasCollapsedFile']),
3940
comparableDiffs() {
4041
return this.mergeRequestDiffs.slice(1);
4142
},
42-
toggleWhitespaceText() {
43-
if (this.isWhitespaceVisible()) {
44-
return __('Hide whitespace changes');
45-
}
46-
return __('Show whitespace changes');
47-
},
48-
toggleWhitespacePath() {
49-
if (this.isWhitespaceVisible()) {
50-
return mergeUrlParams({ w: 1 }, window.location.href);
51-
}
52-
53-
return mergeUrlParams({ w: 0 }, window.location.href);
54-
},
5543
showDropdowns() {
5644
return !this.commit && this.mergeRequestDiffs.length;
5745
},
@@ -75,9 +63,6 @@ export default {
7563
'expandAllFiles',
7664
'toggleShowTreeList',
7765
]),
78-
isWhitespaceVisible() {
79-
return getParameterValues('w')[0] !== '1';
80-
},
8166
},
8267
};
8368
</script>
@@ -118,7 +103,7 @@ export default {
118103
{{ __('Viewing commit') }}
119104
<gl-link :href="commit.commit_url" class="monospace">{{ commit.short_id }}</gl-link>
120105
</div>
121-
<div class="inline-parallel-buttons d-none d-lg-flex ml-auto">
106+
<div class="inline-parallel-buttons d-none d-md-flex ml-auto">
122107
<gl-button
123108
v-if="commit || startVersion"
124109
:href="latestVersionPath"
@@ -129,31 +114,7 @@ export default {
129114
<a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
130115
{{ __('Expand all') }}
131116
</a>
132-
<a :href="toggleWhitespacePath" class="btn btn-default qa-toggle-whitespace">
133-
{{ toggleWhitespaceText }}
134-
</a>
135-
<div class="btn-group prepend-left-8">
136-
<button
137-
id="inline-diff-btn"
138-
:class="{ active: isInlineView }"
139-
type="button"
140-
class="btn js-inline-diff-button"
141-
data-view-type="inline"
142-
@click="setInlineDiffViewType"
143-
>
144-
{{ __('Inline') }}
145-
</button>
146-
<button
147-
id="parallel-diff-btn"
148-
:class="{ active: isParallelView }"
149-
type="button"
150-
class="btn js-parallel-diff-button"
151-
data-view-type="parallel"
152-
@click="setParallelDiffViewType"
153-
>
154-
{{ __('Side-by-side') }}
155-
</button>
156-
</div>
117+
<settings-dropdown />
157118
</div>
158119
</div>
159120
</div>

‎app/assets/javascripts/diffs/components/settings_dropdown.vue

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script>
2+
import { mapActions, mapGetters, mapState } from 'vuex';
3+
import { GlButton } from '@gitlab/ui';
4+
import Icon from '~/vue_shared/components/icon.vue';
5+
6+
export default {
7+
components: {
8+
GlButton,
9+
Icon,
10+
},
11+
computed: {
12+
...mapGetters('diffs', ['isInlineView', 'isParallelView']),
13+
...mapState('diffs', ['renderTreeList', 'showWhitespace']),
14+
},
15+
methods: {
16+
...mapActions('diffs', [
17+
'setInlineDiffViewType',
18+
'setParallelDiffViewType',
19+
'setRenderTreeList',
20+
'setShowWhitespace',
21+
]),
22+
},
23+
};
24+
</script>
25+
26+
<template>
27+
<div class="dropdown">
28+
<button
29+
type="button"
30+
class="btn btn-default js-show-diff-settings"
31+
data-toggle="dropdown"
32+
data-display="static"
33+
>
34+
<icon name="settings" /> <icon name="arrow-down" />
35+
</button>
36+
<div class="dropdown-menu dropdown-menu-right p-2 pt-3 pb-3">
37+
<div>
38+
<span class="bold d-block mb-1">{{ __('File browser') }}</span>
39+
<div class="btn-group d-flex">
40+
<gl-button
41+
:class="{ active: !renderTreeList }"
42+
class="w-100 js-list-view"
43+
@click="setRenderTreeList(false)"
44+
>
45+
{{ __('List view') }}
46+
</gl-button>
47+
<gl-button
48+
:class="{ active: renderTreeList }"
49+
class="w-100 js-tree-view"
50+
@click="setRenderTreeList(true)"
51+
>
52+
{{ __('Tree view') }}
53+
</gl-button>
54+
</div>
55+
</div>
56+
<div class="mt-2">
57+
<span class="bold d-block mb-1">{{ __('Compare changes') }}</span>
58+
<div class="btn-group d-flex js-diff-view-buttons">
59+
<gl-button
60+
id="inline-diff-btn"
61+
:class="{ active: isInlineView }"
62+
class="w-100 js-inline-diff-button"
63+
data-view-type="inline"
64+
@click="setInlineDiffViewType"
65+
>
66+
{{ __('Inline') }}
67+
</gl-button>
68+
<gl-button
69+
id="parallel-diff-btn"
70+
:class="{ active: isParallelView }"
71+
class="w-100 js-parallel-diff-button"
72+
data-view-type="parallel"
73+
@click="setParallelDiffViewType"
74+
>
75+
{{ __('Side-by-side') }}
76+
</gl-button>
77+
</div>
78+
</div>
79+
<div class="mt-2">
80+
<label class="mb-0">
81+
<input
82+
id="show-whitespace"
83+
type="checkbox"
84+
:checked="showWhitespace"
85+
@change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
86+
/>
87+
{{ __('Show whitespace changes') }}
88+
</label>
89+
</div>
90+
</div>
91+
</div>
92+
</template>

‎app/assets/javascripts/diffs/components/tree_list.vue

+1-52
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
<script>
22
import { mapActions, mapGetters, mapState } from 'vuex';
33
import { GlTooltipDirective } from '@gitlab/ui';
4-
import { parseBoolean } from '~/lib/utils/common_utils';
54
import Icon from '~/vue_shared/components/icon.vue';
65
import FileRow from '~/vue_shared/components/file_row.vue';
76
import FileRowStats from './file_row_stats.vue';
87
9-
const treeListStorageKey = 'mr_diff_tree_list';
10-
118
export default {
129
directives: {
1310
GlTooltip: GlTooltipDirective,
@@ -17,17 +14,12 @@ export default {
1714
FileRow,
1815
},
1916
data() {
20-
const treeListStored = localStorage.getItem(treeListStorageKey);
21-
const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
22-
2317
return {
2418
search: '',
25-
renderTreeList,
26-
focusSearch: false,
2719
};
2820
},
2921
computed: {
30-
...mapState('diffs', ['tree', 'addedLines', 'removedLines']),
22+
...mapState('diffs', ['tree', 'addedLines', 'removedLines', 'renderTreeList']),
3123
...mapGetters('diffs', ['allBlobs', 'diffFilesLength']),
3224
filteredTreeList() {
3325
const search = this.search.toLowerCase().trim();
@@ -52,19 +44,6 @@ export default {
5244
...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
5345
clearSearch() {
5446
this.search = '';
55-
this.toggleFocusSearch(false);
56-
},
57-
toggleRenderTreeList(toggle) {
58-
this.renderTreeList = toggle;
59-
localStorage.setItem(treeListStorageKey, this.renderTreeList);
60-
},
61-
toggleFocusSearch(toggle) {
62-
this.focusSearch = toggle;
63-
},
64-
blurSearch() {
65-
if (this.search.trim() === '') {
66-
this.toggleFocusSearch(false);
67-
}
6847
},
6948
},
7049
FileRowStats,
@@ -81,8 +60,6 @@ export default {
8160
:placeholder="s__('MergeRequest|Filter files')"
8261
type="search"
8362
class="form-control"
84-
@focus="toggleFocusSearch(true)"
85-
@blur="blurSearch"
8663
/>
8764
<button
8865
v-show="search"
@@ -94,34 +71,6 @@ export default {
9471
<icon name="close" />
9572
</button>
9673
</div>
97-
<div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle">
98-
<button
99-
v-gl-tooltip.hover
100-
:aria-label="__('List view')"
101-
:title="__('List view')"
102-
:class="{
103-
active: !renderTreeList,
104-
}"
105-
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
106-
type="button"
107-
@click="toggleRenderTreeList(false)"
108-
>
109-
<icon name="hamburger" />
110-
</button>
111-
<button
112-
v-gl-tooltip.hover
113-
:aria-label="__('Tree view')"
114-
:title="__('Tree view')"
115-
:class="{
116-
active: renderTreeList,
117-
}"
118-
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
119-
type="button"
120-
@click="toggleRenderTreeList(true)"
121-
>
122-
<icon name="file-tree" />
123-
</button>
124-
</div>
12574
</div>
12675
<div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
12776
<template v-if="filteredTreeList.length">

‎app/assets/javascripts/diffs/constants.js

+2
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,5 @@ export const MAX_LINES_TO_BE_RENDERED = 2000;
3434
export const MR_TREE_SHOW_KEY = 'mr_tree_show';
3535

3636
export const TREE_TYPE = 'tree';
37+
export const TREE_LIST_STORAGE_KEY = 'mr_diff_tree_list';
38+
export const WHITESPACE_STORAGE_KEY = 'mr_show_whitespace';

‎app/assets/javascripts/diffs/index.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import Vue from 'vue';
2-
import { mapState } from 'vuex';
2+
import { mapActions, mapState } from 'vuex';
3+
import { parseBoolean } from '~/lib/utils/common_utils';
4+
import { getParameterValues } from '~/lib/utils/url_utility';
35
import diffsApp from './components/app.vue';
6+
import { TREE_LIST_STORAGE_KEY } from './constants';
47

58
export default function initDiffsApp(store) {
69
return new Vue({
@@ -26,6 +29,16 @@ export default function initDiffsApp(store) {
2629
activeTab: state => state.page.activeTab,
2730
}),
2831
},
32+
created() {
33+
const treeListStored = localStorage.getItem(TREE_LIST_STORAGE_KEY);
34+
const renderTreeList = treeListStored !== null ? parseBoolean(treeListStored) : true;
35+
36+
this.setRenderTreeList(renderTreeList);
37+
this.setShowWhitespace({ showWhitespace: getParameterValues('w')[0] !== '1' });
38+
},
39+
methods: {
40+
...mapActions('diffs', ['setRenderTreeList', 'setShowWhitespace']),
41+
},
2942
render(createElement) {
3043
return createElement('diffs-app', {
3144
props: {

‎app/assets/javascripts/diffs/store/actions.js

+19-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
INLINE_DIFF_VIEW_TYPE,
1515
DIFF_VIEW_COOKIE_NAME,
1616
MR_TREE_SHOW_KEY,
17+
TREE_LIST_STORAGE_KEY,
18+
WHITESPACE_STORAGE_KEY,
1719
} from '../constants';
1820

1921
export const setBaseConfig = ({ commit }, options) => {
@@ -33,7 +35,7 @@ export const fetchDiffFiles = ({ state, commit }) => {
3335
});
3436

3537
return axios
36-
.get(state.endpoint)
38+
.get(state.endpoint, { params: { w: state.showWhitespace ? null : '1' } })
3739
.then(res => {
3840
commit(types.SET_LOADING, false);
3941
commit(types.SET_MERGE_REQUEST_DIFFS, res.data.merge_request_diffs || []);
@@ -278,5 +280,21 @@ export const closeDiffFileCommentForm = ({ commit }, fileHash) => {
278280
commit(types.CLOSE_DIFF_FILE_COMMENT_FORM, fileHash);
279281
};
280282

283+
export const setRenderTreeList = ({ commit }, renderTreeList) => {
284+
commit(types.SET_RENDER_TREE_LIST, renderTreeList);
285+
286+
localStorage.setItem(TREE_LIST_STORAGE_KEY, renderTreeList);
287+
};
288+
289+
export const setShowWhitespace = ({ commit }, { showWhitespace, pushState = false }) => {
290+
commit(types.SET_SHOW_WHITESPACE, showWhitespace);
291+
292+
localStorage.setItem(WHITESPACE_STORAGE_KEY, showWhitespace);
293+
294+
if (pushState) {
295+
historyPushState(showWhitespace ? '?w=0' : '?w=1');
296+
}
297+
};
298+
281299
// prevent babel-plugin-rewire from generating an invalid default during karma tests
282300
export default () => {};

‎app/assets/javascripts/diffs/store/modules/diff_state.js

+2
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,6 @@ export default () => ({
2727
projectPath: '',
2828
commentForms: [],
2929
highlightedRow: null,
30+
renderTreeList: true,
31+
showWhitespace: true,
3032
});

‎app/assets/javascripts/diffs/store/mutation_types.js

+2
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,5 @@ export const CLOSE_DIFF_FILE_COMMENT_FORM = 'CLOSE_DIFF_FILE_COMMENT_FORM';
2020
export const SET_HIGHLIGHTED_ROW = 'SET_HIGHLIGHTED_ROW';
2121

2222
export const SET_TREE_DATA = 'SET_TREE_DATA';
23+
export const SET_RENDER_TREE_LIST = 'SET_RENDER_TREE_LIST';
24+
export const SET_SHOW_WHITESPACE = 'SET_SHOW_WHITESPACE';

‎app/assets/javascripts/diffs/store/mutations.js

+6
Original file line numberDiff line numberDiff line change
@@ -238,4 +238,10 @@ export default {
238238
state.treeEntries = treeEntries;
239239
state.tree = tree;
240240
},
241+
[types.SET_RENDER_TREE_LIST](state, renderTreeList) {
242+
state.renderTreeList = renderTreeList;
243+
},
244+
[types.SET_SHOW_WHITESPACE](state, showWhitespace) {
245+
state.showWhitespace = showWhitespace;
246+
},
241247
};

‎app/assets/javascripts/merge_request_tabs.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ export default class MergeRequestTabs {
428428
}
429429

430430
diffViewType() {
431-
return $('.inline-parallel-buttons button.active').data('viewType');
431+
return $('.js-diff-view-buttons button.active').data('viewType');
432432
}
433433

434434
isDiffAction(action) {

0 commit comments

Comments
 (0)