[ENH] Automated upload functionality (#107)

* Test `fetch-repos` workflow

* Added `fetch-repos` script

* Updated `fetch-repos` workflow

* Checking the working directory

* Find the working directory

* Use `actions/checkout@v4`

* Fixed the pathing issue

* Save output file in static folder

* Fixed the `GITHUB_TOKEN` env

* Testing pushing without GH TOKEN

* Trying something

* Using NB_PR_PAT

* Using `NB_PROJECT_PAT`

* Push to feat-80

* Trying something

* Got new error, making progress

* This might be it

* Using `GITHUB_TOKEN`

* Another attempt

* Does this work?

* Updated repos.json with latest repository names

* Iterating

* [BOT] Updated repos.json with latest repository names

* Trying to get the bot name right

* [BOT] Updated repos.json with latest repository names

* [BOT] Updated repos.json with latest repository names

* Trying to get the bot name right

* Updated `fetch-repo` script to check annotation status

* Updated `fetch-repos` script

* Updated repos.json with latest repository names

* Added debug log

* Why is json coming out empty?

* Updated repos.json with latest repository names

* Trying something

* Updated repos.json with latest repository names

* Trying something else

* Updated repos.json with latest repository names

* Added check for valid json response from GH API

* Updated repos.json with latest repository names

* Trying something

* Try this

* Updated repos.json with latest repository names

* Updated `fetch-repos` workflow file

* Implemented `Upload` component

* Updated `simple` e2e test

* Fetch participants.tsv and participants.json

* Try this

* Updated repos.json

* Updated `fetch-repos` script

* Updated repos.json

* Implemented `RepoCard` component

* Implemented `CardContainer` component

* Implemented `RepoInfo` interface

* Implemented filtering functionality

* Implemented `InstructionsDialog` component

* Added instructions dialog and number of available datasets

* Implemented `Download` component

* Addressed linting errors

* Implemented tabs

* Refactored `RepoCard` and added link to the jsonld files

* See if this works

* Updated repos.json

* That works reverting unnecessary changes

* Updated repos.json

* Update `fetch-repos` workflow file

* Refactored `RepoCard` and implemented error handling

* Implemented error handling

* Fixed a typo in condition

* Implemented `DownloadIcon`

* Implemented form for upload workflow

* Refactored `CardContainer` component

* Implemented `Navbar` component

* Fixed the Navbar title and badge layout

* Fixed the alert toggling bug

* Implemented routing and removed tabs

* Made `InstructionDialog` component generic and renamed to `NBDialog`

* Implemented `Instructions` component

* Updated `CardContainer` component

* Small change

* Implemented upload button

* Removed links

* Refactored `Upload` component

- Moved the required logic from `App` to `Upload`
- Updated layout

* Integrated `Upload` component in `NBDialog` as part of `RepoCard`

* Refactored relevant components to reflect the new changes

* Fixed the readOnly issue with the repo name field

* Updated Upload dialog title

* Implemented Affiliations field

* Renamed `Upload` component to `UploadForm`

* Updated `simple` e2e test

* Fixed the performance issue via virtualization

* Updated `UploadForm` component

- Added state variables to retrieve and store user input from input elements
- Updated axios request to align with the new api endpoint

* Implemented a progress bar and success status for the submit button

* Implemented alert to display PR link in case of successful upload

* Addressed PR comments

* Implemented `APIRequests` test

---------

Co-authored-by: GitHub Actions Bot <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Neurobagel Bot <neurobagel-bot[bot]@users.noreply.github.com>
Co-authored-by: Neurobagel Bot <Neurobagel [email protected]>
Co-authored-by: Neurobagel Bot <[email protected]>

cypress.config.ts

@@ -6,6 +6,8 @@ export default defineConfig({
   e2e: {
     experimentalStudio: true,
     baseUrl: 'http://localhost:5173',
+    viewportWidth: 1920,
+    viewportHeight: 1080,
     setupNodeEvents(on, config) {
       codeCoverageTask(on, config);
       return config;

cypress/e2e/APIRequests.cy.ts

@@ -0,0 +1,45 @@
+import { successResponse } from 'cypress/fixtures/mocked-responses';
+
+describe('API Requests', () => {
+  it('Tests the upload request with a mock response and inspects the request body', () => {
+    cy.intercept(
+      {
+        method: 'PUT',
+        url: '/openneuro/upload*',
+      },
+      (req) => {
+        req.reply(successResponse);
+      }
+    ).as('uploadFile');
+
+    cy.visit('http://localhost:5173');
+
+    cy.get('[data-cy="upload-ds000001-button"]').click();
+    cy.get('[data-cy="user-name-field"]').type('John Doe');
+    cy.get('[data-cy="email-field"]').type('[email protected]');
+    cy.get('[data-cy="changes-summary-field"]').type('This is a summary of the changes');
+
+    cy.get('input[type="file"]').attachFile('participants.json');
+
+    cy.contains('File uploaded: participants.json');
+
+    cy.get('[data-cy="submit-button"]').click();
+
+    cy.wait('@uploadFile').then((interception) => {
+      const requestBody = interception.request.body;
+
+      expect(requestBody).to.include(
+        'Content-Disposition: form-data; name="data_dictionary"; filename="participants.json"'
+      );
+
+      expect(requestBody).to.include('Content-Disposition: form-data; name="name"');
+      expect(requestBody).to.include('John Doe');
+
+      expect(requestBody).to.include('Content-Disposition: form-data; name="email"');
+      expect(requestBody).to.include('[email protected]');
+
+      expect(requestBody).to.include('Content-Disposition: form-data; name="changes_summary"');
+      expect(requestBody).to.include('This is a summary of the changes');
+    });
+  });
+});

cypress/e2e/simple.cy.ts

@@ -1,8 +1,8 @@
 describe('Simple Test', () => {
   it('Renders elements', () => {
     cy.visit('http://localhost:5173');
-    cy.get('[data-cy="upload-tab"]').click();
-    cy.get('[data-cy="dataset-id-field"]').should('be.visible');
+    cy.get('[data-cy="upload-ds000001-button"]').click();
+    cy.get('[data-cy="repo-name-field"]').should('be.visible');
     cy.get('[data-cy="upload-file-button"]').should('be.visible');
     cy.get('[data-cy="submit-button"]').should('be.visible');
   });

cypress/fixtures/mocked-responses.ts

@@ -0,0 +1,4 @@
+export const successResponse = {
+  pull_request_url: 'https://someurl.com',
+  message: 'Successfully uploaded file to OpenNeuroDatasets-JSONLD.',
+};

cypress/fixtures/participants.json

@@ -0,0 +1,49 @@
+{
+  "age": {
+    "Annotations": {
+      "IsAbout": {
+        "TermURL": "nb:Age",
+        "Label": ""
+      },
+      "Transformation": {
+        "TermURL": "nb:FromInt",
+        "Label": "integer data"
+      },
+      "MissingValues": ["", "n/a", " "]
+    },
+    "Description": "There should have been a description here, but there wasn't. :("
+  },
+  "participant_id": {
+    "Annotations": {
+      "IsAbout": {
+        "TermURL": "nb:ParticipantID",
+        "Label": ""
+      },
+      "Identifies": "participant"
+    },
+    "Description": "There should have been a description here, but there wasn't. :("
+  },
+  "sex": {
+    "Annotations": {
+      "IsAbout": {
+        "TermURL": "nb:Sex",
+        "Label": ""
+      },
+      "Levels": {
+        "F": {
+          "TermURL": "snomed:248152002",
+          "Label": ""
+        },
+        "M": {
+          "TermURL": "snomed:248153007",
+          "Label": ""
+        },
+        "M,": {
+          "TermURL": "snomed:248153007",
+          "Label": ""
+        }
+      }
+    },
+    "Description": "There should have been a description here, but there wasn't. :("
+  }
+}

cypress/support/commands.ts

@@ -35,3 +35,5 @@
 //     }
 //   }
 // }
+
+import 'cypress-file-upload';