From b28a25a64ead87f6e8810472857992b75b765a02 Mon Sep 17 00:00:00 2001 From: Nazar Gargol Date: Thu, 18 Jun 2020 17:47:04 +1200 Subject: [PATCH] Added imported members csv data preview no issue - Adds a table representation of data present in a CSV file that is about to be imported. Allows to navigate through data to see how exactly the file would be parsed on server --- app/components/gh-members-import-table.hbs | 18 ++++ app/components/gh-members-import-table.js | 33 ++++++ app/components/modal-import-members.hbs | 10 +- .../gh-members-import-table-test.js | 102 ++++++++++++++++++ 4 files changed, 157 insertions(+), 6 deletions(-) create mode 100644 app/components/gh-members-import-table.hbs create mode 100644 app/components/gh-members-import-table.js create mode 100644 tests/integration/components/gh-members-import-table-test.js diff --git a/app/components/gh-members-import-table.hbs b/app/components/gh-members-import-table.hbs new file mode 100644 index 0000000000..7655204be1 --- /dev/null +++ b/app/components/gh-members-import-table.hbs @@ -0,0 +1,18 @@ + + + + + + + {{#each-in currentlyDisplayedData as |key value|}} + + + + + {{else}} + + + + {{/each-in}} + +
HeaderData{{svg-jar "arrow-left" class="w3 h3 ml2" }} {{svg-jar "arrow-right" class="w3 h3 ml2" }}
{{key}}{{value}}
No data
\ No newline at end of file diff --git a/app/components/gh-members-import-table.js b/app/components/gh-members-import-table.js new file mode 100644 index 0000000000..fa73a6ed50 --- /dev/null +++ b/app/components/gh-members-import-table.js @@ -0,0 +1,33 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {tracked} from '@glimmer/tracking'; + +export default class GhMembersImportTable extends Component { + @tracked dataPreviewIndex = 0; + + get currentlyDisplayedData() { + if (this.args && this.args.importData) { + return this.args.importData[this.dataPreviewIndex]; + } + + return {}; + } + + @action + next() { + const nextValue = this.dataPreviewIndex + 1; + + if (this.args.importData[nextValue]) { + this.dataPreviewIndex = nextValue; + } + } + + @action + prev() { + const nextValue = this.dataPreviewIndex - 1; + + if (this.args.importData[nextValue]) { + this.dataPreviewIndex = nextValue; + } + } +} diff --git a/app/components/modal-import-members.hbs b/app/components/modal-import-members.hbs index 412e8200dd..fc194620e3 100644 --- a/app/components/modal-import-members.hbs +++ b/app/components/modal-import-members.hbs @@ -53,12 +53,10 @@ {{/if}} -
-
- {{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}} -
{{this.file.name}}
-
-
+ {{#if this.config.enableDeveloperExperiments}} + + {{/if}} +
diff --git a/tests/integration/components/gh-members-import-table-test.js b/tests/integration/components/gh-members-import-table-test.js new file mode 100644 index 0000000000..f0b6fcefd4 --- /dev/null +++ b/tests/integration/components/gh-members-import-table-test.js @@ -0,0 +1,102 @@ +import hbs from 'htmlbars-inline-precompile'; +import {click, find, findAll, render} from '@ember/test-helpers'; +import {describe, it} from 'mocha'; +import {expect} from 'chai'; +import {setupRenderingTest} from 'ember-mocha'; + +describe('Integration: Component: gh-members-import-table', function () { + setupRenderingTest(); + + it('renders empty without data', async function () { + await render(hbs` + + `); + + expect(find('table')).to.exist; + expect(findAll('table thead th').length).to.equal(2); + expect(findAll('table tbody tr').length).to.equal(1); + expect(find('table tbody tr').textContent).to.equal('No data'); + }); + + it('renders members data with all the properties', async function () { + this.set('importData', [{ + name: 'Kevin', + email: 'kevin@example.com' + }]); + + await render(hbs` + + `); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com'); + }); + + it('navigates through data when next and previous are clicked', async function () { + this.set('importData', [{ + name: 'Kevin', + email: 'kevin@example.com' + }, { + name: 'Rish', + email: 'rish@example.com' + }]); + + await render(hbs` + + `); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com'); + + await click('[data-test-import-next]'); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Rish'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('rish@example.com'); + + await click('[data-test-import-prev]'); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com'); + }); + + it('cannot navigate through data when only one data item is present', async function () { + it('renders members data with all the properties', async function () { + this.set('importData', [{ + name: 'Egg', + email: 'egg@example.com' + }]); + + await render(hbs` + + `); + + await click('[data-test-import-prev]'); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Egg'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('egg@example.com'); + + await click('[data-test-import-next]'); + + expect(findAll('table tbody tr').length).to.equal(2); + expect(findAll('table tbody tr td')[0].textContent).to.equal('name'); + expect(findAll('table tbody tr td')[1].textContent).to.equal('Egg'); + expect(findAll('table tbody tr td')[2].textContent).to.equal('email'); + expect(findAll('table tbody tr td')[3].textContent).to.equal('egg@example.com'); + }); + }); +});