Commit fe572c0e authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'diff-fuzzy-file-finder-feature-flag' into 'master'

Adds a feature flag to the diff fuzzy file finder

Closes #57403

See merge request gitlab-org/gitlab-ce!25006
parents 28dc382d f03a6574
......@@ -13,18 +13,43 @@ export default {
Icon,
FileRow,
},
data() {
return {
search: '',
};
},
computed: {
...mapState('diffs', ['tree', 'renderTreeList']),
...mapGetters('diffs', ['allBlobs']),
filteredTreeList() {
return this.renderTreeList ? this.tree : this.allBlobs;
const search = this.search.toLowerCase().trim();
if (search === '' || this.$options.fuzzyFileFinderEnabled)
return this.renderTreeList ? this.tree : this.allBlobs;
return this.allBlobs.reduce((acc, folder) => {
const tree = folder.tree.filter(f => f.path.toLowerCase().indexOf(search) >= 0);
if (tree.length) {
return acc.concat({
...folder,
tree,
});
}
return acc;
}, []);
},
},
methods: {
...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile', 'toggleFileFinder']),
clearSearch() {
this.search = '';
},
},
shortcutKeyCharacter: `${/Mac/i.test(navigator.userAgent) ? '⌘' : 'Ctrl'}+P`,
FileRowStats,
diffTreeFiltering: gon.features && gon.features.diffTreeFiltering,
};
</script>
......@@ -33,17 +58,36 @@ export default {
<div class="append-bottom-8 position-relative tree-list-search d-flex">
<div class="flex-fill d-flex">
<icon name="search" class="position-absolute tree-list-icon" />
<button
type="button"
class="form-control text-left text-secondary"
@click="toggleFileFinder(true)"
>
{{ s__('MergeRequest|Search files') }}
</button>
<span
class="position-absolute text-secondary diff-tree-search-shortcut"
v-html="$options.shortcutKeyCharacter"
></span>
<template v-if="$options.diffTreeFiltering">
<input
v-model="search"
:placeholder="s__('MergeRequest|Filter files')"
type="search"
class="form-control"
/>
<button
v-show="search"
:aria-label="__('Clear search')"
type="button"
class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
@click="clearSearch"
>
<icon name="close" />
</button>
</template>
<template v-else>
<button
type="button"
class="form-control text-left text-secondary"
@click="toggleFileFinder(true)"
>
{{ s__('MergeRequest|Search files') }}
</button>
<span
class="position-absolute text-secondary diff-tree-search-shortcut"
v-html="$options.shortcutKeyCharacter"
></span>
</template>
</div>
</div>
<div :class="{ 'pt-0 tree-list-blobs': !renderTreeList }" class="tree-list-scroll">
......@@ -79,7 +123,7 @@ export default {
pointer-events: none;
}
.tree-list-icon {
.tree-list-icon:not(button) {
pointer-events: none;
}
</style>
......@@ -16,6 +16,10 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
before_action :authenticate_user!, only: [:assign_related_issues]
before_action :check_user_can_push_to_source_branch!, only: [:rebase]
before_action only: [:show] do
push_frontend_feature_flag(:diff_tree_filtering, default_enabled: true)
end
def index
@merge_requests = @issuables
......
......@@ -4581,6 +4581,9 @@ msgstr ""
msgid "MergeRequest| %{paragraphStart}changed the description %{descriptionChangedTimes} times %{timeDifferenceMinutes}%{paragraphEnd}"
msgstr ""
msgid "MergeRequest|Filter files"
msgstr ""
msgid "MergeRequest|No files found"
msgstr ""
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment