Update GigaDB file upload author's view to use Javascript Vue components

The Gigadb javascript application (located in ``gigadb/app/client/web``) for uploading files built and then deployed
in ``js/`` directory is added to the view by registering it as client script
in the Yii view layout (uploader_layout.php) used by the view for AuthorisedDatasetController.php's filesUpload.php view.

In the view, we make sure we have a <div> with the same id (#gigadb-fuw) as the Javascript application
(see ``gigadb/app/client/web/src/index.js``) for the Javascript app to work in the page
and inside we can use the JS component
(see ``gigadb/app/client/web/src/components/DatasetInfoComponent.vue``)
as a Custom Element (<dataset-info>).

Updated acceptance test scenario to reflect the variation in terminology so we can show the different stages
in File Upload Wizard.

Updated the FUW docs to indicate the command to test, build and deploy the Javascript application:
```
$ docker-compose run --rm js
```

The deployed Javascript application (js/fuw-*) is .gitignored as it's a build artefact
and dependencies integrity is performed with ``gigadb/app/client/web/package-lock.json``.

Some work in progress (@wip) for acceptance scenario and its implementation was added
to test the flow between the file uploading stage and the file meta-data annotation stage.

Improved the CSS on ``filesUpload.php`` to match the GigaDB's new look for public pages.

.gitignore

@@ -62,6 +62,7 @@ terraform.tfstate*
 output
 *.retry
 vault
+js/fuw-*
 
 # docs
 docs/apidocs/phpdoc-cache-*

docs/fuw/index.md

@@ -38,6 +38,7 @@ $ docker-compose run --rm config
 $ docker-compose up -d gigadb
 $ docker-compose run --rm less
 $ docker-compose run --rm fuw-config
+$ docker-compose run --rm js
 $ docker-compose up -d fuw
 $ docker-compose up -d web
 $ docker-compose exec web /usr/local/bin/enable_sites fuw-backend.dev.http
@@ -66,6 +67,7 @@ Writing REMOTE_DOCKER_HOSTNAME to params-local as 'tcp://host.docker.internal:23
 ```
 $ docker-compose exec database bash -c 'psql -U gigadb < /docker-entrypoint-initdb.d/3-fuw.sql'
 $ docker-compose run --rm fuw-config
+$ docker-compose run --rm js
 $ docker-compose run --rm fuw
 $ docker-compose exec web /usr/local/bin/enable_sites fuw-backend.dev.http
 ```

fuw/app/common/tests/_support/Step/Acceptance/AuthorSteps.php

@@ -5,6 +5,8 @@
 use League\Flysystem\Adapter\Local;
 use \backend\models\FiledropAccount;
 use \Facebook\WebDriver\WebDriverElement;
+use \Behat\Gherkin\Node\TableNode;
+use \Codeception\Util\ActionSequence;
 
 class AuthorSteps #extends \common\tests\AcceptanceTester
 {
@@ -177,5 +179,31 @@ public function iShouldSeeTheFileUploadCompleted()
  }, 30);
  }
 
+ /**
+ * @Given I have uploaded files for dataset
+ */
+ public function iHaveUploadedFilesForDataset(TableNode $files)
+ {
+ // Database record
+ foreach ($files->getRows() as $index => $row) {
+ if ($index === 0) { // first row to define fields
+ $keys = $row;
+ continue;
+ }
+ $this->I->performInDatabase('fuwdb', ActionSequence::build()->haveInDatabase('upload', array_combine($keys, $row))
+ );
+ }
+
+ }
+
+ /**
+ * @Then I should see list of files
+ */
+ public function iShouldSeeListOfFiles()
+ {
+ throw new \Codeception\Exception\Incomplete("Step `I should see list of files` is not defined");
+ }
+
+
 
 }

fuw/app/common/tests/acceptance/file-upload-2-author-upload.feature

@@ -36,7 +36,7 @@ Scenario: Pressing the upload button bring up File Upload Wizard upload screen
  And the "Your Uploaded Datasets" tab is active
  When I press "Upload Dataset Files"
  Then I should be on "/authorisedDataset/uploadFiles/"
- And I should see "File Uploader for dataset 100007"
+ And I should see "Uploading files for the dataset 100007"
  And I should see "Drop files here, paste or browse"
 
 @ok @file-upload
@@ -75,6 +75,22 @@ Scenario: Queued files are all uploaded
  And I wait "1" seconds
  Then I should see the file upload completed
 
+@wip
+Scenario: Next button to proceed to file metadata annotation form
+ Given I sign in as the user "Artie" "Dodger"
+ And I am on "/authorisedDataset/uploadFiles/"
+ And I have uploaded files for dataset
+ | doi | name | size | location | extension | status|
+ | 100007| TheProof.csv | 112 | ftp://foobar | csv | 1 |
+ | 100007| TheProof2.csv| 112 | ftp://foobar | csv | 1 |
+ When I press "Next"
+ Then I should be on "/authorisedDataset/annotateFiles/"
+ And I should see list of files
+ | doi | name | size | location | extension | status|
+ | 100007| TheProof.csv | 112 | ftp://foobar | csv | 1 |
+ | 100007| TheProof2.csv| 112 | ftp://foobar | csv | 1 |
+ And I should see a "Previous" link
+
 # Scenario: There's no button for uploading files if dataset doesn't have the right status
 # Given I sign in as a user
 # And I am on "/user/view_profile#submitted"

protected/views/authorisedDataset/filesUpload.php

@@ -1,62 +1,58 @@
 <?php ?>
-<div id="gigadb-dataset-uploader">
- <h1>{{ message}} for dataset {{ doi }}</h1>
- <form id="dataset-metadata-form">
- <input id="dataset" type="hidden" v-bind:value="doi">
- </form>
- <div id="drag-drop-area"></div>
- <script>
- document.addEventListener("DOMContentLoaded", function(event) {
+<div class="content">
+ <div class="container">
+ <section class="page-title-section">
+ <div id="gigadb-fuw">
+ <div class="page-title">
+ <ol class="breadcrumb pull-right">
+ <li><a href="/">Home</a></li>
+ <li class="active">File Upload Wizard</li>
+ </ol>
+ <dataset-info identifier="<?= $identifier ?>" />
+ </div>
+ </div>
+ </section>
+ <section>
+ <form id="dataset-metadata-form">
+ <input id="dataset" type="hidden" v-bind:value="doi">
+ </form>
+ <div id="drag-drop-area"></div>
+ <script>
+ document.addEventListener("DOMContentLoaded", function(event) {
 
- var app = new Vue({
- el: '#gigadb-dataset-uploader',
- data: {
- doi: <?php echo "'".$identifier."'"; ?>,
- message: 'GigaDB File Uploader',
- seen: true,
- todos: [
- { text: 'Buy jacket' },
- { text: 'Call Dad' },
- { text: 'Feed the cat' }
- ]
- },
- methods: {
- reverseMessage: function() {
- this.message = this.message.split('').reverse().join('')
- }
- }
- });
+ var uppy = Uppy.Core()
+ .use(Uppy.Dashboard, {
+ inline: true,
+ target: '#drag-drop-area',
+ hideAfterFinish: true,
+ showProgressDetails: true,
+ hideUploadButton: false,
+ hideRetryButton: false,
+ hidePauseResumeButton: false,
+ hideCancelButton: false,
+ proudlyDisplayPoweredByUppy: false,
+ metaFields: [
+ { id: 'name', name: 'Name', placeholder: 'file name' },
+ { id: 'description', name: 'Description', placeholder: 'describe what the file is about' }
+ ],
+ locale: {}
+ })
+ .use(Uppy.Form, {
+ target: "#dataset-metadata-form",
+ getMetaFromForm: true,
+ addResultToForm: false,
+ triggerUploadOnSubmit: false,
+ submitOnSuccess: false
+ })
+ // .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'});
+ .use(Uppy.Tus, { endpoint: '/files/' });
 
- var uppy = Uppy.Core()
- .use(Uppy.Dashboard, {
- inline: true,
- target: '#drag-drop-area',
- hideAfterFinish: true,
- showProgressDetails: true,
- hideUploadButton: false,
- hideRetryButton: false,
- hidePauseResumeButton: false,
- hideCancelButton: false,
- proudlyDisplayPoweredByUppy: false,
- metaFields: [
- { id: 'name', name: 'Name', placeholder: 'file name' },
- { id: 'description', name: 'Description', placeholder: 'describe what the file is about' }
- ],
- locale: {}
- })
- .use(Uppy.Form, {
- target: "#dataset-metadata-form",
- getMetaFromForm: true,
- addResultToForm: false,
- triggerUploadOnSubmit: false,
- submitOnSuccess: false
- })
- // .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'});
- .use(Uppy.Tus, { endpoint: '/files/' });
+ uppy.on('complete', function(result) {
+ console.log('Upload complete! We’ve uploaded these files:', result.successful);
+ });
 
- uppy.on('complete', function(result) {
- console.log('Upload complete! We’ve uploaded these files:', result.successful);
- });
-
- });
- </script>
+ });
+ </script>
+ </section>
+ </div>
+</div>

protected/views/layouts/uploader_layout.php

@@ -6,6 +6,7 @@
  <meta name="language" content="en" />
  <meta name="robots" content="noindex">
  <meta name="googlebot" content="noindex">
+<? Yii::app()->clientScript->registerScriptFile('/js/fuw-1.0.0.js', CClientScript::POS_END); ?>
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">