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

@@ -0,0 +1,18 @@
+<table class="bg-whitegrey-l2 ba b--whitegrey br3">
+    <thead>
+        <th><span class="f5">Header</span></th>
+        <th><span class="f5">Data</span><a href="#" {{action "prev"}} data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 ml2" }}</a> <a href="#" {{action "next"}} data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 ml2" }}</a></th>
+    </thead>
+    <tbody>
+        {{#each-in currentlyDisplayedData as |key value|}}
+            <tr>
+                <td><span>{{key}}</span></td>
+                <td><span>{{value}}</span></td>
+            </tr>
+        {{else}}
+            <tr>
+                <td><span>No data</span></td>
+            </tr>
+        {{/each-in}}
+    </tbody>
+</table>

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;
+        }
+    }
+}

app/components/modal-import-members.hbs

@@ -53,12 +53,10 @@
                 </div>
             {{/if}}
             <GhFormGroup>
-                <div class="bg-whitegrey-l2 ba b--whitegrey br3">
-                    <div class="flex flex-column items-center justify-center gh-members-import-file">
-                        {{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}}
-                        <div class="description midgrey">{{this.file.name}}</div>
-                    </div>
-                </div>
+                {{#if this.config.enableDeveloperExperiments}}
+                    <GhMembersImportTable @importData={{this.fileData}}/>
+                {{/if}}
+
                 <div class="mt4">
                     <label for="label-input"><span class="fw6 f8 dib mb1">Labels</span></label>
                     <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />

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`
+            <GhMembersImportTable />
+        `);
+
+        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`
+            <GhMembersImportTable @importData={{this.importData}} />
+        `);
+
+        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`
+            <GhMembersImportTable @importData={{this.importData}} />
+        `);
+
+        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`
+                <GhMembersImportTable @importData={{this.importData}} />
+            `);
+
+            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');
+        });
+    });
+});