[UI]: Application Section F: IT Agreement Form & Validation

Goal: To build Section F: IT Agreement section with the agreement validation.

Expected Outcomes

1. Set up all content with proper styles
2. Integrate form checkboxes.
Local validation for the required checkboxes should work. See error state for checkbox component on this mock: https://zpl.io/2EQQ5vx

[UI] Request Revisions modal/form

Goal

To build the modal that is triggered when admin clicks the Request Revisions button from #55

Note, the revisions requested email that gets triggered will be built in this epic: https://github.com/icgc-argo/dac-ui/issues/65)

Endpoint to use

icgc-argo/dac-api#17

Expected Outcomes

Add the Admin UI Bar

When the application loads for the DACO Admin role, they have an extra actions bar with three buttons
Zeplin: https://zpl.io/2jq8Z96

Confirmation Modal

Build the UI for the Request Revisions confirmation modal as seen: https://zpl.io/VOLWoek
1. Include only the sections of the form, as shown below, that do not just have agreement checkboxes (those will never require revisions)
2. The admin can check off the sections that require revisions and add specific details to be revised.
3. If the admin, say, checks off a section like Section E:Ethics, then fills in a reason, then unchecked that section - the text area reason should be cleared.
4. The last "Include general comments in email" item should only be enabled if another section is checked off. i.e. the Admin cannot just send a general comment without requesting revisions to specific sections.
5. The Send Request button will be disabled by default, and only enable when an enabled section is checked off.

[UI]: Application Section A: Applicant Information Form & Validation

Goal: To build Section A: Applicant Info section with working local validation.

Zeplin links:
Form: https://zpl.io/bz3mDAX
Form with errors: https://zpl.io/254W3G3

You can see a lot of these form elements and validation happening on this ARGO form: https://platform-ui.qa.argo.cancercollaboratory.org/submission/program/create

Expected Outcomes

1. Instructions
2. Set up form using components in ARGO component library.
3. The form has two sections separated by headings.
4. Some form elements have blue notes beside them
5. Some form elements have placeholder text to show examples of what to fill out in the field (see this mockup for those: https://zpl.io/bz3mDAX)

Local Validation

6. All fields marked with * are required. If the user doesn't fill out and moves on to a new section they will see this error
7. On top of required, the email fields need to be in a valid email format
8. The website url has to be a valid url.

[UI]: Application Section E: Ethics Form: Table, actions, upload files & Validation

Goal: To build Section E: Ethics: form, validation, empty ethics letter table+full table views + file upload

Zeplin links:
Applicant chooses option 1: https://zpl.io/29mmLkB
Applicant chooses option 2, with empty table: https://zpl.io/VYqqeye
Error state when not uploading a file: https://zpl.io/ad33gDE
Uploaded files table: https://zpl.io/bPEEe5m

Expected Outcomes

1. Instructions
2. Warning note (see https://argo-ui-storybook.netlify.app/?path=/story/uikit-notifications-banner--basic)
3. Add ethics form with radiobutton options. If the applicant chooses option 1, this form is considered valid and complete.

Applicant chooses option 2:
This is similar to what was done in Section C, but with a file upload instead of a modal form.

4. A new form element appears with empty file table: https://zpl.io/29mmLkB
5. Upload File button with the upload flow working
6. When a file is uploaded it gets displayed in a table with the date updated date: https://zpl.io/bPEEe5m
7. Actions: delete file - which, when clicked, will eventually have a confirmation modal similar to the "Remove User" modal in the ARGO section mentioned above). This will remove the file reference from the table.

Local Validations

8. If the applicant doesn't upload a file, then they see this empty table area and button red and error message
https://zpl.io/ad33gDE
Validations for file upload: Has to be a pdf, doc, docx. | Max file size: 200MB @rosibaj confirming if this is right?

DACO: Applicant dashboard + Application form

This epic covers the UI for the following features:

Applicant dashboard empty state
Applicant dashboard with cards for applications in progress and data access status
Can create a new blank application
Can fill out each form section and the local validation will work
Confirmation modals and toasts are set up

[UI]: Toast Infrastructure

Set up the toast infrastructure that can capture the success/failure states and holding it while updating the page.

UI ticket that follows: #414

Login permissions and routes

DACO Applicant Dashboard
URL: daco.icgc-argo.org/applications/
(DACO ADMIN and APPLICANT see different displays on their dashboards)

applications render based on a users ego-id/email

DACO Admin Dashboard
URL: daco.icgc-argo.org/applications/
Scope: DACO-REVIEW.WRITE // can see all applications and update them
Application Page
URL: daco.icgc-argo.org/applications/{APP-ID}

UI Portion for Logged in header

Logged in: https://zpl.io/bz3EN0z
Logged in with User dropdown for logout: https://zpl.io/bW8zNzk

The menu states can be found in this zeplin: https://zpl.io/bW8zNzk

Menu hover state
Menu default state
Menu active state - this is really the only section that will ever be active as the other sections are external links.
When clicking on the user name, a dropdown will appear with a link to logout (similar to the ARGO Platform, but we will not have a user profile page for MVP)

[UI]: Administrator management actions bar and DACO Review application state

Goal: Add the DACO Admin actions bar to the top of the application page, and load the application in DACO REVIEW state with all sections locked.

NOTE: Ignore the Customize Expiry date field for now. To be built after MVP

Expected Outcomes

When the application loads for the DACO Admin role, they have an extra actions bar with three buttons

note done in #61

[UI]: Dashboard: Started application card for multiple states

Goal: To set up the card for a started application, and have multiple states ready with the correct static data.

Expected Outcome

Have the following application cards set up with dummy data:
Draft, Sign&Submit, DACO Review, Approved, Revisions Needed, Rejected, Closed (before approval), Closed (after approval).

Global card elements

1. Application number
2. Institution name. If the applicant hasn't provided this, this can say Institution: to be specified
3. Progress bar as built in #12
4. Last updated date

Custom Elements

5. Status information sentence - this is different for each card. Do we want to hard code this for each state (but then the date is dynamic)?
6.Approved card has an Expiry date on the top right. Zeplin: https://zpl.io/2ZMEE7J

[Data Hookup]: DACO Admin Table: Data Hookup

Goal: Using the endpoint from: icgc-argo/dac-api#1

Hook up the data in this table: #8

Here is the specific endpoint that we have for this available data: https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/get_applications_

For data fetching, use axios. Build the first FE client to fetch data - an abstraction to pass authentication and the endpoints

Expected Outcome

The table fetches all applications and displays the correct data as per the spec
(Copied over from UI ticket): Default table sort: descending alpha order by status

[UI]: Application Section B: Institutional Representative Form & Validation

Goal: To build Section B: Institutional Representative section with working local validation.

Zeplin links:
Form: https://zpl.io/VYqO9yM
Form with errors: I didn't mock this one up but please use same errors from #17

You can see a lot of these form elements and validation happening on this ARGO form: https://platform-ui.qa.argo.cancercollaboratory.org/submission/program/create

Expected Outcomes

1. Instructions
2. Set up form using components in ARGO component library.
3. The form has two sections separated by headings
4. Some form elements have blue notes beside them
5. Some form elements have placeholder text to show examples of what to fill out in the field (see this mockup for those: https://zpl.io/bz3mDAX)

Local Validation

6. All fields marked with * are required. If the user doesn't fill out and moves on to a new section they will see this error
7. On top of required, the email field needs to be in a valid email format

Note: the functionality for the "address same as applicant" will come later when application can be saved

[Data Hookup]: Progress bar on dashboard and application header

Goal

For each application state make sure the progress bar is reflected correctly on the application itself and dashboard card

Use Endpoint

GET endpoint

Expected Outcomes

Each of these states are covered

DRAFT https://zpl.io/a8ngJGJ
SIGN AND SUBMIT https://zpl.io/29mQEYy
DACO REVIEW https://zpl.io/bo3qGrZ
REVISIONS REQUESTED https://zpl.io/Vx3zv5R
APPROVED https://zpl.io/2ZMEE7J

Small access card

For approved, show this card when the DACO scope is available in the user JWT.
For all other states above, show this card

(note: for revisions requested the mockup says "revisions needed". You can keep it as revisions requested. So the above labels are what should be shown in the progress bar UI)

DACO: Admin Approval Flow, Request Revisions Flow and Application states

This epic covers the following features:

The DACO Admin can approve an application, after confirming this action (note. DACO Admin being able to edit will come later, so the state of the application in DACO REVIEW state will be locked)
For an approved application, the DACO Admin and Applicant can edit only the collaborators and ethics section (if a letter was provided)
After approving an application, the DACO Admin actions bar does not display the Approve/Request Revisions/Reject buttons any more (note. rejection will be built later)
The DACO Admin can request revisions and fill out reasons for the sections that need to be reopened for revisions
For an application that requires revisions, the DACO Admin and Applicant can edit only the sections that were specified to revise

[UI]: Application Section C: Add a Collaborator Modal & Validation

Goal: To build Section C: Add/Edit a collaborator modal with working local validation.

Zeplin links:
Blank Modal: https://zpl.io/VDggJG3
Form with errors: https://zpl.io/V4NNpZ4
Valid form: https://zpl.io/bARRJwp

Note: Justin has made a lot of these fields and validations work in section A and B, please reuse what you can.

Expected Outcomes

1. Set up modal with Instructions
2. Set up form using components in ARGO component library.
3. Some form elements have blue notes beside them
4. Some form elements have placeholder text to show examples of what to fill out in the field
- [ ] 5. If the applicant chooses Authorized Personnel then show Position Title field as the last field. If the applicant chooses Authorized Student then show Pursuing Degree field as the last field. This defaults to showing Position Title field. Note: moved to follow-up ticket
~~- [ ] 6. Button is disabled until the applicant fills in the form correctly~~ Note: moved to follow-up ticket

Local Validation See errors in https://zpl.io/V4NNpZ4

7. All fields marked with * are required.
~~- [ ] 8. On top of required, the email field needs to be in a valid email format~~ Note: moved to follow-up ticket
Note: the functionality for the "Primary Affiliation must be the same as the Applicant" will come later when application can be saved #54

Correctly filled out form: https://zpl.io/bARRJwp
~~- [ ] 9. Once the form has valid entries, the "Add Collaborator" button is enabled.~~ Note: moved to follow-up ticket

[UI]: Export table tsv

Goal: Make the export table button work.

Discussed in meeting on Oct 12 with Rosi and Ann - this is probably not necessary anymore. We can revisit other ways to communicate metrics with DACO in the future

Expected Behaviour

Clicking the button should download a tsv of the table columns
The tsv data should reflect the current sort order of the table (if the administrator sorts by application #, for instance)
The tsv data should reflect the filtered table (If the administrator searches the table to view only certain rows of the table, for instance)

[Data Hookup + UI] Sign and Submit section

Goal: Hookup the sign and submit section

UI Updates

update link color;
Open these links as a new tab:
display issue on the PDF name when loading the sign & submit section.
When the Submit application button is clicked, show the confirmation modal: https://zpl.io/b6AlPJy

Data Hookup Updates

The finalized pdf button mid test should download the finalized PDF (same as button at top)
Connect the delete trashcan button on the pdf table
Connect the confirmation modal to the submit endpoint: https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/delete_applications__id__assets__type__assetId__assetId_

[UI]: Application Section C: Collaborator Empty State + Table + actions

Goal: To build Section C: Collaborators: empty table+full table views.

Zeplin links:
Empty View: https://zpl.io/bARRyKP
With Collaborators: https://zpl.io/a7PP8DM

Expected Outcomes

1. Instructions
2. Empty Table
3. "Add Collaborator" button

With collaborators. This is very similar to ARGO Program > Manage Program > Users section table. Please refer to this for implementation.

4. Collaborators table with correct column fields
5. Display count of collaborators above the table
6. Default sort order on "Collaborator Type" with "Authorized Personnel at the top (so can be alpha order)
7. Actions: edit collaborator (which will open the modal in #20 with the form fields filled out).
8. Actions: delete collaborator - which, when clicked, will eventually have a confirmation modal similar to the "Remove User" modal in the ARGO section mentioned above).

[Data Hookup]: Global validation for primary affiliation

Goal

To hookup the primary affiliation validations that span sections A, B, and C.

Expected Outcomes

Applicant, Institutional Rep, Collaborators all have to belong to the same primary affiliation. i.e. the Primary Affiliation filled out in these sections must all be exactly the same (section A is the source of truth)

If Section A primary affiliation is filled out, for section B and any collaborator added in section C - those primary affiliation values must match exactly. If they don't then show the error (listing the Primary Affiliation of section A within the error text)
If Section A primary affiliation is not filled out, and the applicant fills out the primary affiliation in section B, don't show any error. Then if they go back to section A and fill out a different primary affiliation, show the error in the section B primary affiliation field (listing the Primary Affiliation of section A within the error text).
If section A primary affiliation is not filled out, and the applicant adds a collaborator in section C, they can add that collaborator for any primary affiliation they fill out. If the applicant then fills out a different primary affiliation in section A than what was added for that collaborator, show the error in section C that primary affiliations much match.
**So section table would look like this (rows of table with errors are shaded red) **: Zeplin: https://zpl.io/amLBY43

When user clicks the edit pencil for that collaborator, the edit modal would look like:

Show the error on Primary affiliation
disable the save button until they enter the correct afffiliation

[Data Hookup]: Add, Edit, Remove Collaborators

Goal

To be able to add, edit and remove Collaborators to the application, with the correct table of content states shown

Endpoint to use

icgc-argo/dac-api#9
PATCH for Edit: https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/patch_applications__id__collaborators__collaboratorId_

Expected outcomes

Connect the save for the collaborator modal - so only when an applicant fills out this modal form correctly will they be able to save the collaborator to the application
When a collaborator is added, show the correct metadata about them in the Collaborator table here: https://zpl.io/a7PP8DM
Connect the edit (pencil) icon. When clicked:

Show the modal with the saved field values for that collaborator.
Change the purple button label from "ADD COLLABORATOR" to "SAVE COLLABORATOR"
If the applicant removes a value that is required - disable the "SAVE COLLABORATOR" button until they fill out the form correctly.

Connect the remove (trashcan) icon. When clicked:

Show the remove collaborator confirmation modal Zeplin: https://zpl.io/agmGZXQ
when the applicant clicks "Remove collaborator", close the modal, remove the collaborator from the application and from the collaborator table. (success toast will be done in this ticket: #27)

FOR TESTING PURPOSES. Make sure this backend feature works in the UI:
This section gets checked off in the table of contents when:

A collaborator is added
No collaborators are added, and the last section is completed, then check this section off and enable the Sign and Submit section. (wondering if this should be in #59)

Header dashboard label change depending on user role

For the applicant, the header label should be "My Applications"
For DACO admin, the header label should be "Manage Applications"

Refresh bugs

Loading/refresh bugs

when the page refreshes (or say navigating from an application back to dashboard), the header items flash: the logo flashes on and off, and the user items on the right flash to show the logged out state then logged in state
The footer ARGO logo flashes off and on which causes a weird relocation of the middle links.

[DATA Hookup] - Table Search

Connect the SEARCH bar to the table list

Should filter the table as the admin types search keyword
Should filter across the paginated table (not just the items you see in the table "page" you are on)****

[UI]: Application Section G: Data Access Agreement Form & Validation

Goal: To build Section G: Data Access Agreement section with the agreement validation.

Zeplin: https://zpl.io/2EQQ5vx

Expected Outcomes

1. Set up all content with proper styles
2. Integrate form checkboxes.
3. Local validation for the required checkboxes should work.

Add Progress Bar to Application Page

Goal: To set up the basic structure of the application page
Zeplin: https://zpl.io/2y3AnAy

Expected Outcomes

2. Progress bar from: #12

[UI]: Dashboard: Page with basic cards

Goal: To set up the applicant dashboard and basic cards. You will need the following designs:

Empty state: https://zpl.io/aR4J13K
Application started state: https://zpl.io/2ZMEE7J

Page structure

1. Page structure with Titlebar and intro paragraph

Basic cards

2. No data access small card
3. Access to controlled data small card (ignore the link for now)
4. Start a new application (full width)
5. Start a new application (half width)
Ability for multiple cards to stack (if the applicant has multiple applications on the go)

[UI] PDF Application UI with/without watermark

Goal

To build the UI for the pdf with a version that adds a watermark "DRAFT" on top

pdf always exports CURRENT state. if in form, in pdf
Has draft watermark if in draft state, otherwise no watermark
(could be overlap with: #60)

Page designs for UI

Expected Outcomes

a watermark is displayed over the pdf for when it is in DRAFT state
button label is "Draft PDF" (should this be done here?)
the Button label changes based on application state: See “Application Form Download PDF button” specs table here: https://wiki.oicr.on.ca/display/icgcargotech/DACO+Technical+Specifications
(Should those last two items be done elsewhere?)

[Data Hookup+UI] Admin Approval flow + Application state

Goal

To complete the admin approval flow and transition the application to the correct state.

Note, the approval email that gets triggered will be built in the email epic here: https://github.com/icgc-argo/dac-ui/issues/68
(All emails to be built and triggered in this epic: https://github.com/icgc-argo/dac-ui/issues/65)

Endpoint to use

icgc-argo/dac-api#16

Expected Outcomes

Confirmation Modal

build the UI for the approval confirmation modal: When DACO Admin clicks the "Approve" button from #55, they see this modal: https://zpl.io/VkMmDJG that loads in:
a. Application number and institution in brackets
b. Access start date (reporting the current day - i.e. the day this button is clicked)
c. Access end date (reporting one year after the start date)

Application state after approved

1. When confirm approval, the application transitions into the APPROVED state
2. Most sections are locked for editing as shown here for section A: https://zpl.io/aBvEw80
3. For locked sections, all form fields are disabled and uneditable as seen here for section A: https://zpl.io/aBvEw80
4. Section C is unlocked in order to be able to add/remove collaborators

Application state after approved for DACO Admin

Keep the orange bar and disable the buttons in this state.

Section C

6. Section C table: remove the edit icons from each collaborator table row, the applicant cannot edit already existing collaborator information. But they can still add and remove collaborators. Zeplin: https://zpl.io/2jq8pqp

Section E

will be hooked up in this ticket #58

[UI]: Homepage Layout

Goal: The layout and style for the homepage: zeplin: https://zpl.io/aMoJPZR

1. Intro blurb (Apply for Access button will link to the modal built in #7)
2.What will you get access for?. Please link the ARGO logo and ICGC ARGO text link to https://platform.icgc-argo.org/ (open in a new window) and the ICGC logo and ICGC 25K Data Portal links to https://dcc.icgc.org/ (open in a new window). The PCAWG text links to https://dcc.icgc.org/pcawg (open in a new window)
3. Overview (bottom faqs link TBD)
4. Application Process (eligible project team link TBD)

Note: the banner image is still being decided on. Let me know if you need a placeholder image

Ethics section V3 - POST APPROVAL states (ui + data hookup)

Goal

This ticket also includes the Ethics section for after the application is approved.

Endpoint to use

https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/post_applications__id__assets_url

Expected Outcomes after Approval

1) If Applicant has selected option 1 (no ethics letter required), then lock this section shoudl be locked with the grey status in left bar. No actionns can be taken at this point.
2) If Applicant choses option 2 (required ethics letter) then a few things apply:
- this section is unlocked for edits,
- option 1 is disabled
- remove the actions column from the table. The applicant cannot delete files from this section
- the UPLOAD A FILE button should still be enabled.
3) Clicking "Upload a file button triggers the browser file upload window to choose a pdf/doc/docx file, with the validations that were already coded. When the user chooses a file and uploads, implement a new confirmation modal for when they upload a new letter. This triggers the email being sent to DACO admin (https://github.com/icgc-argo/dac-ui/issues/73), so we want them to confirm this action. MOCKUP: https://zpl.io/blOm11X

[UI]: DACO Admin Dashboard: Page and Manage Applications Table

Goal: To set up the DACO Admin Dashboard and build the applications table.
zeplin: https://zpl.io/2v3JkR5

Page structure

1. Page structure with Titlebar

Manage Applications table card

Have a look at the ARGO component library, there are a lot of tables that have already been built.

2. Add the table card + Card title area with static icon status counts
3. Table top - with count of applications, export button, search box
4. Table body - using the usual table component (note - the red text will come in after MVP when we do the expiry user flow)
5. Default table sort: descending alpha order by status
6. Table pagination (showing 20 by default)

[Data Hookup]:Load Application Data + Sidebar States for each section/state of application

Goal

For each application section, the applicant can see the correct data in their application, as well as the correct state of that secion on the left nav bar
Note: the user still cannot use the FE to save data.

Endpoint to use

this relies on the PATCH Applications/id

Expected Outcomes

All behaviours outlined on the wiki are working, which include:

Just clicking through the sections and not interacting with the forms will not save anything, and no icons will be shown in the table of contents
Table of contents shows the green checkmark when a section is valid and complete
Table of contents shows the red ! Icon when a section is incomplete or has saved errors
Sign and Submit section is disabled until all of the other sections are complete
FOR TESTING PURPOSES: logging out and logging back in should show the same saved state (which is connected to this ticket #51)
A local error on a field (red text underneath) only gets saved to that section when a user has filled out that field incorrectly, or filled it out incorrectly and erased the value leaving it blank. Tabbing through the field will show the error but not get saved unless the applicant fills it in incorrectly.

Note: saving and editing for collaborators is broken out into this ticket; #52
And ethics in this ticket; #58

Change the "Download PDF" label

As explained here: https://wiki.oicr.on.ca/display/icgcargotech/DACO+Technical+Specifications
we are going to change the label of the download button depending on the state of the application.

For now please change the label from "DOWNLOAD PDF" to "DRAFT PDF"

DACO: Site scaffolding, Login/permissions, homepage, DACO admin dashboard

This epic covers the following features:

The site is set up with header and footer
Login works for both Applicant and DACO admin and directs them to their correct dashboards
Logged in header works with the user dropdown to logout
Apply for access informational modal works
Homepage is built
DACO admin dashboard is built and is displaying applications
DACO admin dashboard search and export table are functional - CHANGE: it was decided in spring planning that these features can be worked on at the end or post-mvp

UI: Header font change

Can you change the header font to 14px?
These header links aren't super duper important, they seem a bit big to me.

[UI]: Application page with basic titlebar

Goal: To set up the basic structure of the application page
Zeplin: https://zpl.io/2y3AnAy

Expected Outcomes

To have the following elements on the page

1. Page titlebar with application details
My Applications (links back to the dashboard page)
Application Number/ID
Two dates (for now Create on and Last updated date)
A spot to feed in the Applicant name and institution name (when not filled out in the form this will say "to be specified")
2. Progress bar from: #12
3. Various global action buttons (close application and download pdf for now)
4. The card that holds the application with the general application title
5. Set up previous/next buttons for the sections

(table of contents will be built in this ticket #15)

DACO: PDF: generation, upload, storing, download

This epic covers the following features:

The pdf UI is built
An applicant can download a draft pdf at any time in DRAFT state, and a watermark will display over each page of the pdf. Download button label: Draft PDF
The pdf application will reflect the saved data that the applicant has entered into the form at the time of download
An ethics file can be uploaded and stored in S3 to be retrieved
When in SIGN AND SUBMIT state, a finalized pdf can be downloaded with the correct data and no watermark. Download button label: Finalized PDF
A signed pdf can be uploaded and stored in S3 to be retrieved
When an application is submitted and includes an ethics letter, then the "Signed PDF" download would be a zip folder of both the signed application and the ethics letter file. Download button label: Signed PDF

See more information about Application Form Download PDF button on the wiki specs: https://wiki.oicr.on.ca/display/icgcargotech/DACO+Technical+Specifications

[UI]: Application Section H: Appendices Form & Validation

Goal: To build Section H: Appendices section with the agreement validation.

Zeplin: https://zpl.io/aR444oN

Expected Outcomes

1. Set up all content + instructions with proper styles
2. Integrate appendices and agreement checkboxes.
3. Each appendix will have an external link that will link to a policy page on icgc-argo.org. Links TBD (open in a new window)
Local validation for the required checkboxes should work. See error state for checkbox component on this mock: https://zpl.io/2EQQ5vx

[UI]: Apply for Access informative modal

For the user who has never logged in before, there's an informative modal to help them ensure they login with the correct google address.
Zeplin: https://zpl.io/aR4J13K

Expected Outcomes

Build this modal
It should be accessible from these two links

DACO: Application Form Data Hookup: Saving, Validation, Progress Tracking, Ethics, Sign and Submit

This epic covers the following features:

[Data Hookup]: Create Application

Goal

To have the applicant click the "Create an Application" button and link to a blank draft application form with a unique id.

Endpoint to use

https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/post_applications_

Expected Outcomes

Applicant can click create application button from the user dashboard
When clicked, a new application is created in state DRAFT
When the application is created, the user is redirected to the newly created application.

Logged out header

Most of the links will need to wait until when the content is on icgc-argo.org and docs.icgc-argo.org

Links to homepage
TBD - Will link to a page on https://www.icgc-argo.org (open a new window)
TBD - Will link to a page on https://www.docs.icgc-argo.org (open a new window)
TBD - will link to a page on https://www.icgc-argo.org ((open a new window))
Will open a modal (another ticket to come)
Will link to login with google

Footer

Links to https://www.icgc-argo.org (open a new window)
Links to https://www.platform.icgc-argo.org/contact (open a new window)
TBD - Will link to a page on icgc-argo.org (open a new window)
TBD - Will link to a page on docs.icgc-argo.org (open a new window)
TBD - will link to a page on icgc-argo.org ((open a new window))
Links to https://www.icgc-argo.org (open a new window)
Links to https://www.platform.icgc-argo.org/ (open a new window)
Link to https://www.icgc-argo.org/page/2/privacy (open in a new window)
Link to https://www.icgc-argo.org/page/1/terms-and-conditions (open in a new window)
Link to https://www.icgc-argo.org/page/77/e3-publication-policy (open in a new window)
Link to https://www.gla.ac.uk/ (open in a new window)
Link to https://www.oicr.on.ca/ (open in a new window)

[UI]: Application Section I: Sign and Submit with single file upload & Validation

Goal: To build the final "Sign & Submit" section, file upload, validation

Zeplin links:
No file uploaded: https://zpl.io/bL999dM
File uploaded: https://zpl.io/2GjjjAE

NOTE: THE INSTRUCTIONS SHOULD BE 1, 2, 3 NOT 1, 2, 4. oops

Expected Outcomes

1. Instructions
2. Finalized pdf button - will eventually download the finalized application to sign
3. External links open in a new window: https://www.docusign.ca/ and https://acrobat.adobe.com/us/en/sign.html
4. Implement file upload form.
5. Submit application button - this is disabled until the applicant uploads a pdf file.
5b. Next button behaviour...include the next button in section H but disable it until this sign and submit section is available.

Local Validations

Validations for file upload: Has to be a pdf | Max file size: 200MB

Applicant uploads a file:
https://zpl.io/2GjjjAE

6. When a file is uploaded it gets displayed in the spot where the upload file button was with the file name and updated date.
7. Actions: delete file - which, when clicked, will eventually have a confirmation modal similar to the ethics file removal flow. This will remove the file reference from the page and replace with the "upload file" button again.
8. When the applicant has uploaded a pdf file, this button is enabled

[UI]: Application Section: Introduction

Goal: To build the introduction section with the agreement validation.

Zeplin: https://zpl.io/2y3AnAy

Expected Outcomes

Set up all content with proper styles (section title, body content, form section headings, links). Note: content is TBD so I won't provide the link URLS yet.
Form checkbox. This type of form element has already been built: https://argo-ui-storybook.netlify.app/?path=/story/uikit-form-formcheckbox--default
Local validation for the required field should work.

[Data Hookup] Request Revisions flow + Application state

Goal

To complete the request revisions flow and transition the application to the correct state.

Note, the request revisions email that gets triggered will be built in the email epic: https://github.com/icgc-argo/dac-ui/issues/65)

Endpoint to use

icgc-argo/dac-api#17

Expected Outcomes

Confirmation Modal

This was built here: #63

Connect this button:

if you get a failure, do a retry (visual change from @kcullion !)
1. When DACO admin confirms to send the request, the application transitions into the REVISIONS REQUESTED state
Needs endpoint above to be connected to DACO admin button

Application state after requested revisions

2. All sections, that do not require revisions, are locked for editing as shown here for section A: https://zpl.io/Vqzx6DZ
3. For locked sections, all form fields are disabled and uneditable.
4. Unlock the sections that were specified in the request revisions modal, and show an orange pencil edit icon in the table of contents: #63

Application state after revisions were requested for DACO Admin

Once DACO Admin sends revisions request, remove the Approve/Request Revisions/Decline buttons from the orange admin bar.
The application will be in the same state as it is above for the applicant

** Note the custom expiry should not be here - was left in mocks to do late orange bar should just be blank for now in this state.

[UI]: Application state progress bars

Goal: To set up the application progress bar component in storybook.
There's a similar component for ARGO to utilize: https://argo-ui-storybook.netlify.app/?path=/story/uikit-progress--progress-bar

These will be added to the dashboard card and the application page titlebar.

Expected Outcome

Have the following progress bars set up for the following application states

Draft: https://zpl.io/a8ngJGJ
Submit & Sign: https://zpl.io/29mQEYy
DACO Review: https://zpl.io/bo3qGrZ
Approved: https://zpl.io/2ZMEE7J
Revisions Needed: https://zpl.io/Vx3zv5R
Rejected: https://zpl.io/VKdRLY6
Closed (before approving): https://zpl.io/bJDmm8D
Closed (after approving): https://zpl.io/2j366Kx

[Data-Hookup] Generate pdf with applicant data in correct states

always export CURRENT state of the form, in the pdf
Has draft watermark if in draft state, otherwise no watermark
test with 1 section downloading the values based on the investigated method.
(Not sure where to put this) - for all links in the content of the form, display the url in brackets after that link text within the pdf

UI zeplin links can be found: #64

[UI]: Application table of contents with multiple icon states

Goal: To build the table of contents component for the application.

Something similar has been done in the platform, so have a look at this:

Vertical tabs: https://argo-ui-storybook.netlify.app/?path=/story/uikit-verticaltabs--basic
This version of the tabs has the last item disabled, like we will need for the table of contents:
https://argo-ui-storybook.netlify.app/?path=/story/components-pages-submission-system-donor-clinicaltimeline--basic

Note about icons: There's an icon library in storybook you can utilize throughout this Epic. I'm not sure if this is being kept up to date? https://argo-ui-storybook.netlify.app/?path=/story/uikit-icon--all-icons

Zeplin: https://zpl.io/2y3AnAy

Expected Outcomes

1. Default tab state
2. Hover tab state
3. Active tab state
4. Ability to add different icons as seen the screenshot
5. Last "Sign & Submit" item is disabled until all required fields are filled out. This item has a hover tooltip to explain why it's disabled (appears on hover of this item)

@caravinci - here's the added notes about these icons and states:

[Data Hookup] Load Application and correct metadata (header)

Goal

An application loads from the dashboard links or admin dashboard table in the correct state with the correct header metadata.

included implementing the standard Data Provider (also in progress with @samrichca to be discussed)

Endpoint to use

powered by this endpoint: https://dac.qa.argo.cancercollaboratory.org/api/api-docs/#/Application/get_applications__id_

Expected Outcomes

The correct application loads (landing on the introduction/application terms section):

Clicking an application dashboard card
Clicking an application from the admin table dashboard
a direct URL is visited and the user has permission to load it (eg. from an email)

The header information has the expected information (some depends on filling out section A)

Application ID
Show the Creation date and last updated date/time
When applicant fills out the application name - show title, first name, last name in header bar
When applicant fills out primary affiliation in section A, show that with the applicant info too

Link "My Applications" back to the user's dashboard

Progress bar data hookup is covered here: #50

[UI]: Application Section D: Project Information Form & Validation

Goal: To build Section D: Project Info section with working local validation.

Zeplin links:
Blank form: https://zpl.io/br3q8Z1
Form with errors1: https://zpl.io/V0ooDew
Form with errors2: https://zpl.io/aR448MK
Completed form with an extra publication: https://zpl.io/br336o5

You can see a lot of these form elements and validation happening on this ARGO form: https://platform-ui.qa.argo.cancercollaboratory.org/submission/program/create

Expected Outcomes

1. Instructions
2. Set up form using components in ARGO component library.
3. The scientific abstract section has extensive instructions and text area components
4. The publications have 3 items by default (cannot be deleted).
5. Once the applicant correctly fills out all three fields, the "Add another" button will enable and they can add another publication field.
6. The publications fields added after the 3rd one can be deleted.
Note: this "add another" component can be seen on ARGO if you go to a specify program (as an administrator), click Manage Program in the sidebar, then click Add users. The add users modal accepts more than one user at a time.
7. The project lay summary section has extensive instructions and a text area component. The link in the instructions is TBD. (NOTE: the lay summary was added back in on May 27, and for time sake is only shown in this mockup, but behaves like the other text areas: https://zpl.io/br3q8Z1)
emotional codependence: Fix the styling bug that was found with Section A (labels on top of form fields and responsive bugginess)

Local Validation
In this mockup: https://zpl.io/V0ooDew you will see

All fields marked with * are required.
The website url has to be a valid url.
The abstract text areas have a max word count of 200. The word count updates and displays as applicant enters content in the field. Once the applicant hits 200 words, they should not be able to type further.
The lay summary text area has a max word count of 200 and behaves as above.
The publication urls must be unique
There must be at least 3 publications provided

And seen in this mockup: https://zpl.io/aR448MK

The publications must be valid urls.

icgc-argo / dac-ui Goto Github PK

dac-ui's People

Contributors

Watchers

dac-ui's Issues

Expected Outcomes

Goal

Endpoint to use

Expected Outcomes

Add the Admin UI Bar

Confirmation Modal

Expected Outcomes

Expected Outcomes

Login permissions and routes

UI Portion for Logged in header

Expected Outcomes

Expected Outcome

Expected Outcome

Expected Outcomes

Goal

Use Endpoint

Expected Outcomes

Expected Outcomes

Expected Behaviour

UI Updates

Data Hookup Updates

Expected Outcomes

Goal

Expected Outcomes

Goal

Endpoint to use

Expected outcomes

Expected Outcomes

Expected Outcomes

Page structure

Basic cards

Goal

Page designs for UI

Expected Outcomes

Goal

Endpoint to use

Expected Outcomes

Confirmation Modal

Application state after approved

Application state after approved for DACO Admin

Section C

Section E

Goal

Endpoint to use

Expected Outcomes after Approval

Page structure

Manage Applications table card

Goal

Endpoint to use

Expected Outcomes

Expected Outcomes

Expected Outcomes

Expected Outcomes

Goal

Endpoint to use

Expected Outcomes

Logged out header

Footer

Expected Outcomes

Expected Outcomes

Goal

Endpoint to use

Expected Outcomes

Confirmation Modal

Connect this button:

Application state after requested revisions

Application state after revisions were requested for DACO Admin

Expected Outcome

Expected Outcomes

Goal

Endpoint to use

Expected Outcomes

Expected Outcomes

Recommend Projects

Recommend Topics