EES-5544 Change data set import page accordions into a table #5459
Conversation
bennettstuart
force-pushed
the
EES-5544
branch
from
369e1a3 to
c1cb095
Compare
bennettstuart
force-pushed
the
EES-5544
branch
from
602e242 to
85840e2
Compare
bennettstuart
force-pushed
the
EES-5544
branch
from
2c8ecac to
9a80962
Compare
bennettstuart
force-pushed
the
EES-5544
branch
from
9a80962 to
3024245
Compare
| padding-bottom: govuk-spacing(2); | ||
| padding-top: govuk-spacing(2); |
There was a problem hiding this comment.
Not sure we need this padding?
The default td styling already includes identical vertical padding so this seems redudnant.
| .fileSize { | ||
| width: 5rem; | ||
| text-align: right; | ||
| } | ||
|
|
||
| .fileStatus { | ||
| max-width: 164px; | ||
| } | ||
|
|
||
| .actions { | ||
| margin-bottom: 0; | ||
| } |
There was a problem hiding this comment.
As we're using CSS modules, no need to nest these under the table class. They can be hoisted to the top-level instead.
| <tbody> | ||
| {dataFiles.map(dataFile => ( | ||
| <tr key={dataFile.title}> | ||
| <td data-testid="Subject title">{dataFile.title}</td> |
There was a problem hiding this comment.
Might be good to add a max-width to this column to stop longer titles pushing everything so far to the right.
It'd be nice to stop the action buttons wrapping e.g.
| <table className={styles.table} data-testid="Data files table"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Subject title</th> |
There was a problem hiding this comment.
We've moved away from referencing things as 'subject' quite a while (like years) ago but never got around to updating the data uploads page to reflect this.
Would suggest that we change this to just 'Title' and also update other parts of the UI accordingly as well e.g.
The upload form's title input field:
The details modal:
| /> | ||
| </td> | ||
| <td data-testid="Actions"> | ||
| <ButtonGroup className={styles.actions}> |
There was a problem hiding this comment.
At smaller screen sizes, having the buttons in a row quickly breaks down:
We should style the group so that it moves into the column layout sooner:
| releaseDataFileService | ||
| .getDeleteDataFilePlan(releaseId, dataFile) | ||
| .then(plan => { | ||
| setDeleteDataFile({ | ||
| plan, | ||
| file: dataFile, | ||
| }); | ||
| }); |
| user checks headed table body row contains Data file size 141 Kb ${section} | ||
| user checks headed table body row contains Number of rows 612 ${section} | ||
| user checks headed table body row contains Status Complete ${section} %{WAIT_DATA_FILE_IMPORT} | ||
| user checks table cell contains row=1 column=1 expected=Absence in PRUs parent=testid:Data files table |
There was a problem hiding this comment.
Why use named parameters? This is pretty inconsistent with how we typically use keywords. Including the parameter names makes the lines much more noisy and hinders readability.
In generally, we use named parameters sparingly throughout the tests e.g. to set optional parameters. We don't usually use them for required parameters like this.
Would revert back to using positional arguments only. Same applies for rest of Robot tests where we've made this change.
| ${row}= user gets table row row_cell_text=${SUBJECT_NAME} parent=testid:Data files table | ||
| ... wait=%{WAIT_SMALL} | ||
| ${status_cell}= user gets testid element id=Status wait=%{WAIT_SMALL} parent=${row} | ||
| user scrolls to element ${status_cell} | ||
| user waits until element contains element=${status_cell} text=${IMPORT_STATUS} | ||
| ... wait=%{WAIT_DATA_FILE_IMPORT} |
There was a problem hiding this comment.
Similar to earlier comment - would switch back to using positional arguments for required parameters.
| @@ -23,9 +23,10 @@ user checks table row heading contains | |||
| user waits until element contains xpath://table/tbody/tr[${row}]/th[${column}] ${expected} | |||
|
|
|||
| user checks table cell contains | |||
| [Arguments] ${row} ${column} ${expected} ${parent}=css:table | |||
| [Arguments] ${row} ${column} ${expected} ${parent}=css:table ${wait}=%{WAIT_SMALL} | |||
There was a problem hiding this comment.
Does this need a wait? Typically, we could use some other keyword to check that the table (or something in it) has rendered before checking the table cells.
Most 'check' keywords don't include waits for this reason, so this is fairly inconsistent.
| @@ -58,7 +59,8 @@ user gets table row with heading | |||
| [Return] ${elem} | |||
|
|
|||
| user gets table row | |||
| [Arguments] ${row_cell_text} ${parent}=css:table | |||
| [Arguments] ${row_cell_text} ${parent}=css:table ${wait}=%{WAIT_SMALL} | |||
There was a problem hiding this comment.
As above comment - does this need a wait? Similarly, we should be able to use some other keyword to wait for the table (or something in it) before checking table rows.
See Ticket EES-5544