diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44a360ab9092b6386f7adbba1b914709f8fa4b4e
--- /dev/null
+++ b/app/assets/javascripts/ide/components/file_row_extra.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+ {{ changesCount }}
+
+
+
+
+
+
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 00ae5ea2c156cfa8835da817bc845a368a07d277..e658d1bf956dfc14fc9caf569697220ec395faa6 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -2,15 +2,16 @@
import { mapActions, mapGetters, mapState } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import RepoFile from './repo_file.vue';
+import FileRow from '~/vue_shared/components/file_row.vue';
import NavDropdown from './nav_dropdown.vue';
+import FileRowExtra from './file_row_extra.vue';
export default {
components: {
Icon,
- RepoFile,
SkeletonLoadingContainer,
NavDropdown,
+ FileRow,
},
props: {
viewerType: {
@@ -34,8 +35,9 @@ export default {
this.updateViewer(this.viewerType);
},
methods: {
- ...mapActions(['updateViewer']),
+ ...mapActions(['updateViewer', 'toggleTreeOpen']),
},
+ FileRowExtra,
};
@@ -63,11 +65,13 @@ export default {
-
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 110eda83bb4f62b1516e921b0d3da78c95767bd8..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-
-
-
-
-
-
-
-
- {{ file.name }}
-
-
-
-
-
- {{ changesCount }}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6f7bdbc2c4d5132b1e28364a8af2218d5e47c8a5
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -0,0 +1,210 @@
+
+
+
+
+
+
+
+
+ {{ file.name }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 45df8391f9a3cdc4e1fb0dd99eeac9825b1c2273..65f0a0d18e2a09a4a036e1fa593ff4f377d0f63f 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -53,83 +53,9 @@ $ide-commit-header-height: 48px;
flex: 1;
min-height: 0; // firefox fix
- .file {
- height: 32px;
- cursor: pointer;
-
- &.file-active {
- background: $theme-gray-100;
- }
-
- .ide-file-name {
- flex: 1;
- white-space: nowrap;
- text-overflow: ellipsis;
- max-width: inherit;
- line-height: 16px;
- display: inline-block;
- height: 18px;
-
- svg {
- vertical-align: middle;
- margin-right: 2px;
- }
-
- .loading-container {
- margin-right: 4px;
- display: inline-block;
- }
- }
-
- .ide-file-icon-holder {
- display: flex;
- align-items: center;
- color: $theme-gray-700;
- }
-
- .ide-file-changed-icon {
- margin-left: auto;
-
- > svg {
- display: block;
- }
- }
-
- .ide-new-btn {
- display: none;
-
- .btn {
- padding: 2px 5px;
- }
- }
-
- &:hover,
- &:focus {
- .ide-new-btn {
- display: block;
- }
- }
-
- .folder-icon {
- fill: $gl-text-color-secondary;
- }
- }
-
a {
color: $gl-text-color;
}
-
- th {
- position: sticky;
- top: 0;
- }
-}
-
-.file-name {
- display: flex;
- overflow: visible;
- align-items: center;
- width: 100%;
}
.multi-file-loading-container {
@@ -625,8 +551,7 @@ $ide-commit-header-height: 48px;
}
}
-.multi-file-commit-list-path,
-.ide-file-list .file {
+.multi-file-commit-list-path {
display: flex;
align-items: center;
margin-left: -$grid-size;
@@ -634,28 +559,14 @@ $ide-commit-header-height: 48px;
padding: $grid-size / 2 $grid-size;
border-radius: $border-radius-default;
text-align: left;
-
- &:hover,
- &:focus {
- background: $theme-gray-100;
- }
-
- &:active {
- background: $theme-gray-200;
- }
-}
-
-.multi-file-commit-list-path {
cursor: pointer;
height: $ide-commit-row-height;
padding-right: 0;
- &.is-active {
- background-color: $white-normal;
- }
-
&:hover,
&:focus {
+ background: $theme-gray-100;
+
outline: 0;
.multi-file-discard-btn {
@@ -665,6 +576,14 @@ $ide-commit-header-height: 48px;
}
}
+ &:active {
+ background: $theme-gray-200;
+ }
+
+ &.is-active {
+ background-color: $white-normal;
+ }
+
svg {
min-width: 16px;
vertical-align: middle;
@@ -1398,9 +1317,17 @@ $ide-commit-header-height: 48px;
}
}
-.ide-new-btn .dropdown.show .ide-entry-dropdown-toggle {
- color: $white-normal;
- background-color: $blue-500;
+.ide-new-btn {
+ display: none;
+
+ .btn {
+ padding: 2px 5px;
+ }
+
+ .dropdown.show .ide-entry-dropdown-toggle {
+ color: $white-normal;
+ background-color: $blue-500;
+ }
}
.ide-preview-header {
@@ -1465,3 +1392,28 @@ $ide-commit-header-height: 48px;
width: $ide-commit-row-height;
height: $ide-commit-row-height;
}
+
+.ide-file-icon-holder {
+ display: flex;
+ align-items: center;
+ color: $theme-gray-700;
+}
+
+.ide-file-changed-icon {
+ margin-left: auto;
+
+ > svg {
+ display: block;
+ }
+}
+
+.file-row:hover,
+.file-row:focus {
+ .ide-new-btn {
+ display: block;
+ }
+
+ .folder-icon {
+ fill: $gl-text-color-secondary;
+ }
+}
diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..60dabe28045b32fe6fa532cc6ef097940e25cd6b
--- /dev/null
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -0,0 +1,159 @@
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import FileRowExtra from '~/ide/components/file_row_extra.vue';
+import { file, resetStore } from '../helpers';
+
+describe('IDE extra file row component', () => {
+ let Component;
+ let vm;
+ let unstagedFilesCount = 0;
+ let stagedFilesCount = 0;
+ let changesCount = 0;
+
+ beforeAll(() => {
+ Component = Vue.extend(FileRowExtra);
+ });
+
+ beforeEach(() => {
+ vm = createComponentWithStore(Component, createStore(), {
+ file: {
+ ...file('test'),
+ },
+ mouseOver: false,
+ });
+
+ spyOnProperty(vm, 'getUnstagedFilesCountForPath').and.returnValue(() => unstagedFilesCount);
+ spyOnProperty(vm, 'getStagedFilesCountForPath').and.returnValue(() => stagedFilesCount);
+ spyOnProperty(vm, 'getChangesInFolder').and.returnValue(() => changesCount);
+
+ vm.$mount();
+ });
+
+ afterEach(() => {
+ vm.$destroy();
+ resetStore(vm.$store);
+
+ stagedFilesCount = 0;
+ unstagedFilesCount = 0;
+ changesCount = 0;
+ });
+
+ describe('folderChangesTooltip', () => {
+ it('returns undefined when changes count is 0', () => {
+ expect(vm.folderChangesTooltip).toBe(undefined);
+ });
+
+ it('returns unstaged changes text', () => {
+ changesCount = 1;
+ unstagedFilesCount = 1;
+
+ expect(vm.folderChangesTooltip).toBe('1 unstaged change');
+ });
+
+ it('returns staged changes text', () => {
+ changesCount = 1;
+ stagedFilesCount = 1;
+
+ expect(vm.folderChangesTooltip).toBe('1 staged change');
+ });
+
+ it('returns staged and unstaged changes text', () => {
+ changesCount = 1;
+ stagedFilesCount = 1;
+ unstagedFilesCount = 1;
+
+ expect(vm.folderChangesTooltip).toBe('1 unstaged and 1 staged changes');
+ });
+ });
+
+ describe('show tree changes count', () => {
+ it('does not show for blobs', () => {
+ vm.file.type = 'blob';
+
+ expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+ });
+
+ it('does not show when changes count is 0', () => {
+ vm.file.type = 'tree';
+
+ expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+ });
+
+ it('does not show when tree is open', done => {
+ vm.file.type = 'tree';
+ vm.file.opened = true;
+ changesCount = 1;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null);
+
+ done();
+ });
+ });
+
+ it('shows for trees with changes', done => {
+ vm.file.type = 'tree';
+ vm.file.opened = false;
+ changesCount = 1;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ide-tree-changes')).not.toBe(null);
+
+ done();
+ });
+ });
+ });
+
+ describe('changes file icon', () => {
+ it('hides when file is not changed', () => {
+ expect(vm.$el.querySelector('.ide-file-changed-icon')).toBe(null);
+ });
+
+ it('shows when file is changed', done => {
+ vm.file.changed = true;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+ done();
+ });
+ });
+
+ it('shows when file is staged', done => {
+ vm.file.staged = true;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+ done();
+ });
+ });
+
+ it('shows when file is a tempFile', done => {
+ vm.file.tempFile = true;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+
+ done();
+ });
+ });
+ });
+
+ describe('merge request icon', () => {
+ it('hides when not a merge request change', () => {
+ expect(vm.$el.querySelector('.ic-git-merge')).toBe(null);
+ });
+
+ it('shows when a merge request change', done => {
+ vm.file.mrChange = true;
+
+ vm.$nextTick(() => {
+ expect(vm.$el.querySelector('.ic-git-merge')).not.toBe(null);
+
+ done();
+ });
+ });
+ });
+});
diff --git a/spec/javascripts/ide/components/repo_file_spec.js b/spec/javascripts/ide/components/repo_file_spec.js
deleted file mode 100644
index fc639a672e2292cc1b99c272df095d2b4944efbb..0000000000000000000000000000000000000000
--- a/spec/javascripts/ide/components/repo_file_spec.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import Vue from 'vue';
-import store from '~/ide/stores';
-import repoFile from '~/ide/components/repo_file.vue';
-import router from '~/ide/ide_router';
-import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
-import { file } from '../helpers';
-
-describe('RepoFile', () => {
- let vm;
-
- function createComponent(propsData) {
- const RepoFile = Vue.extend(repoFile);
-
- vm = createComponentWithStore(RepoFile, store, propsData);
-
- vm.$mount();
- }
-
- afterEach(() => {
- vm.$destroy();
- });
-
- it('renders link, icon and name', () => {
- createComponent({
- file: file('t4'),
- level: 0,
- });
-
- const name = vm.$el.querySelector('.ide-file-name');
-
- expect(name.href).toMatch('');
- expect(name.textContent.trim()).toEqual(vm.file.name);
- });
-
- it('fires clickFile when the link is clicked', done => {
- spyOn(router, 'push');
- createComponent({
- file: file('t3'),
- level: 0,
- });
-
- vm.$el.querySelector('.file-name').click();
-
- setTimeout(() => {
- expect(router.push).toHaveBeenCalledWith(`/project${vm.file.url}`);
-
- done();
- });
- });
-
- describe('folder', () => {
- it('renders changes count inside folder', () => {
- const f = {
- ...file('folder'),
- path: 'testing',
- type: 'tree',
- branchId: 'master',
- projectId: 'project',
- };
-
- store.state.changedFiles.push({
- ...file('fileName'),
- path: 'testing/fileName',
- });
-
- createComponent({
- file: f,
- level: 0,
- });
-
- const treeChangesEl = vm.$el.querySelector('.ide-tree-changes');
-
- expect(treeChangesEl).not.toBeNull();
- expect(treeChangesEl.textContent).toContain('1');
- });
-
- it('renders action dropdown', done => {
- createComponent({
- file: {
- ...file('t4'),
- type: 'tree',
- branchId: 'master',
- projectId: 'project',
- },
- level: 0,
- });
-
- setTimeout(() => {
- expect(vm.$el.querySelector('.ide-new-btn')).not.toBeNull();
-
- done();
- });
- });
- });
-
- describe('locked file', () => {
- let f;
-
- beforeEach(() => {
- f = file('locked file');
- f.file_lock = {
- user: {
- name: 'testuser',
- updated_at: new Date(),
- },
- };
-
- createComponent({
- file: f,
- level: 0,
- });
- });
-
- it('renders lock icon', () => {
- expect(vm.$el.querySelector('.file-status-icon')).not.toBeNull();
- });
-
- it('renders a tooltip', () => {
- expect(
- vm.$el.querySelector('.ide-file-name span:nth-child(2)').dataset.originalTitle,
- ).toContain('Locked by testuser');
- });
- });
-
- it('calls scrollIntoView if made active', done => {
- createComponent({
- file: {
- ...file(),
- type: 'blob',
- active: false,
- },
- level: 0,
- });
-
- spyOn(vm, 'scrollIntoView');
-
- vm.file.active = true;
-
- vm.$nextTick(() => {
- expect(vm.scrollIntoView).toHaveBeenCalled();
-
- done();
- });
- });
-});
diff --git a/spec/javascripts/vue_shared/components/file_row_spec.js b/spec/javascripts/vue_shared/components/file_row_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..9914c0b70f37f4ea76df9b437fd8424fa59703e5
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/file_row_spec.js
@@ -0,0 +1,74 @@
+import Vue from 'vue';
+import FileRow from '~/vue_shared/components/file_row.vue';
+import { file } from 'spec/ide/helpers';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('RepoFile', () => {
+ let vm;
+
+ function createComponent(propsData) {
+ const FileRowComponent = Vue.extend(FileRow);
+
+ vm = mountComponent(FileRowComponent, propsData);
+ }
+
+ afterEach(() => {
+ vm.$destroy();
+ });
+
+ it('renders name', () => {
+ createComponent({
+ file: file('t4'),
+ level: 0,
+ });
+
+ const name = vm.$el.querySelector('.file-row-name');
+
+ expect(name.textContent.trim()).toEqual(vm.file.name);
+ });
+
+ it('emits toggleTreeOpen on click', () => {
+ createComponent({
+ file: {
+ ...file('t3'),
+ type: 'tree',
+ },
+ level: 0,
+ });
+ spyOn(vm, '$emit').and.stub();
+
+ vm.$el.querySelector('.file-row').click();
+
+ expect(vm.$emit).toHaveBeenCalledWith('toggleTreeOpen', vm.file.path);
+ });
+
+ it('calls scrollIntoView if made active', done => {
+ createComponent({
+ file: {
+ ...file(),
+ type: 'blob',
+ active: false,
+ },
+ level: 0,
+ });
+
+ spyOn(vm, 'scrollIntoView').and.stub();
+
+ vm.file.active = true;
+
+ vm.$nextTick(() => {
+ expect(vm.scrollIntoView).toHaveBeenCalled();
+
+ done();
+ });
+ });
+
+ it('indents row based on level', () => {
+ createComponent({
+ file: file('t4'),
+ level: 2,
+ });
+
+ expect(vm.$el.querySelector('.file-row-name').style.marginLeft).toBe('32px');
+ });
+});