Commit 748a2f2b authored by Phil Hughes's avatar Phil Hughes

Added fuzzy file finder to web IDE

Closes #44841
parent c3e26860
<script>
import { mapGetters, mapState } from 'vuex';
import fuzzaldrinPlus from 'fuzzaldrin-plus';
import VirtualList from 'vue-virtual-scroll-list';
import Item from './item.vue';
export default {
components: {
Item,
VirtualList,
},
data() {
return {
searchText: '',
};
},
computed: {
...mapGetters(['allBlobs']),
...mapState(['loading']),
filteredBlobs() {
const searchText = this.searchText.trim();
if (searchText === '') return this.allBlobs;
return fuzzaldrinPlus.filter(this.allBlobs, searchText, {
key: 'path',
});
},
listShowCount() {
if (this.filteredBlobs.length === 0) return 1;
return this.filteredBlobs.length > 5 ? 5 : this.filteredBlobs.length;
},
listHeight() {
return this.listShowCount > 1 ? 55 : 33;
},
},
mounted() {
this.$refs.searchInput.focus();
},
};
</script>
<template>
<div class="dropdown-menu diff-file-changes ide-file-finder" style="display: block;">
<div class="dropdown-input">
<input
type="search"
class="dropdown-input-field"
placeholder="Search files"
autocomplete="off"
v-model="searchText"
ref="searchInput"
/>
<i
aria-hidden="true"
class="fa fa-search dropdown-input-search"
></i>
</div>
<div>
<virtual-list
:size="listHeight"
:remain="listShowCount"
wtag="ul"
>
<template v-if="filteredBlobs.length">
<li
v-for="file in filteredBlobs"
:key="file.key"
>
<item
:file="file"
/>
</li>
</template>
<li
v-else
class="dropdown-menu-empty-itemhidden"
>
<a href="">
<template v-if="loading">
Loading...
</template>
<template v-else>
No files found.
</template>
</a>
</li>
</virtual-list>
</div>
</div>
</template>
<style>
.ide-file-finder {
top: 100px;
left: 50%;
transform: translateX(-50%);
}
</style>
<script>
import FileIcon from '../../../vue_shared/components/file_icon.vue';
export default {
components: {
FileIcon,
},
props: {
file: {
type: Object,
required: true,
},
},
};
</script>
<template>
<a
href=""
class="diff-changed-file"
>
<file-icon
:file-name="file.name"
:size="16"
css-classes="diff-file-changed-icon append-right-8"
/>
<span class="diff-changed-file-content append-right-8">
<strong class="diff-changed-file-name">
{{ file.name }}
</strong>
<span class="diff-changed-file-path prepend-top-5">
{{ file.path }}
</span>
</span>
</a>
</template>
......@@ -5,6 +5,7 @@ import ideContextbar from './ide_context_bar.vue';
import repoTabs from './repo_tabs.vue';
import ideStatusBar from './ide_status_bar.vue';
import repoEditor from './repo_editor.vue';
import FindFile from './file_finder/index.vue';
export default {
components: {
......@@ -13,6 +14,7 @@ export default {
repoTabs,
ideStatusBar,
repoEditor,
FindFile,
},
props: {
emptyStateSvgPath: {
......@@ -29,7 +31,13 @@ export default {
},
},
computed: {
...mapState(['changedFiles', 'openFiles', 'viewer', 'currentMergeRequestId']),
...mapState([
'changedFiles',
'openFiles',
'viewer',
'currentMergeRequestId',
'fileFindVisible',
]),
...mapGetters(['activeFile', 'hasChanges']),
},
mounted() {
......@@ -50,6 +58,9 @@ export default {
<div
class="ide-view"
>
<find-file
v-if="fileFindVisible"
/>
<ide-sidebar />
<div
class="multi-file-edit-pane"
......
......@@ -35,3 +35,6 @@ export const currentIcon = state =>
export const hasChanges = state => !!state.changedFiles.length;
export const hasMergeRequest = state => !!state.currentMergeRequestId;
export const allBlobs = state =>
Object.keys(state.entries).reduce((acc, key) => acc.concat(state.entries[key]), []);
......@@ -17,4 +17,5 @@ export default () => ({
entries: {},
viewer: 'editor',
delayViewerUpdated: false,
fileFindVisible: true,
});
......@@ -8683,6 +8683,10 @@ vue-template-es2015-compiler@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
vue-virtual-scroll-list@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.2.5.tgz#bcbd010f7cdb035eba8958ebf807c6214d9a167a"
vue@^2.5.13:
version "2.5.13"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.13.tgz#95bd31e20efcf7a7f39239c9aa6787ce8cf578e1"
......
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