Skip to content

Commit

Permalink
TDRD-297 Top level folder UI changes (#4183)
Browse files Browse the repository at this point in the history 
Move top level folder + content changes
  • Loading branch information
@thanhz
thanhz authored Oct 1, 2024
1 parent 2ccf934 commit 4897646
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 48 deletions.
2 changes: 1 addition & 1 deletion app/views/judgment/judgmentUpload.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
<form id="file-upload-form" data-consignment-id="@consignmentId">
<div class="govuk-form-group">
<div class="drag-and-drop">
<div id="success-and-removal-message-container" class="govuk-summary-list govuk-file-upload govuk-visually-hidden">
<div class="success-and-removal-message-container govuk-summary-list govuk-file-upload govuk-visually-hidden">
<div class="govuk-summary-list__row">
<dd class="govuk-summary-list__value drag-and-drop__success"
tabindex="-1" role="alert" aria-describedby="success-message-text">
Expand Down
26 changes: 13 additions & 13 deletions app/views/standard/upload.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,26 +70,26 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">
</label>
</div>
</div>
<div id="success-and-removal-message-container" class="govuk-summary-list govuk-file-upload govuk-visually-hidden">
<div class="js-drag-and-drop-selected drag-and-drop__selected" id="item-selection-success-container">
<p id="success-message-text" aria-live="assertive" aria-atomic="true" class="govuk-!-margin-bottom-3 govuk-!-margin-top-0 drag-and-drop__selected__description">The folder <strong id="files-selected-folder-name" class="folder-name"></strong> (containing <span class="folder-size"></span>) has been selected.</p>
<div class="success-and-removal-message-container govuk-!-margin-bottom-6 govuk-visually-hidden">
<div class="js-drag-and-drop-selected" id="item-selection-success-container">
<p id="success-message-text" aria-live="assertive" aria-atomic="true" class="govuk-body drag-and-drop__selected__description">The folder <strong id="files-selected-folder-name" class="folder-name"></strong> (containing <span class="folder-size"></span>) has been selected.</p>
<a id="remove-file-btn" href="#" aria-describedby="files-selected-folder-name" class="govuk-link govuk-link--no-visited-state govuk-!-font-size-19 govuk-body govuk-!-font-weight-bold">Remove<span class="govuk-visually-hidden">&nbsp; selected files</span></a>
</div>
<div class="js-drag-and-drop-selected drag-and-drop__selected" id="removed-selection-container" hidden="true">
<div class="js-drag-and-drop-selected" id="removed-selection-container" hidden="hidden">
<p id="removed-selection-message-text" class="govuk-error-message">The folder "<span class="folder-name"></span>" (containing <span class="folder-size"></span>) has been removed. Select a folder.</p>
</div>
</div>
<p class="govuk-body">For information on what metadata will be captured during upload, visit the <a href="@routes.FaqController.faq()#metadata-captured" target="_blank" rel="noopener noreferrer" class="govuk-link">FAQ (opens in new tab)</a>.</p>
<div class="govuk-form-group">
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox">
<label class="govuk-label govuk-checkboxes__label" for="includeTopLevelFolder">
Check the box if you want to display the name of your top-level folder in the public catalogue.
</label>
<div class="govuk-form-group govuk-!-margin-bottom-3" id="top-level-folder-checkbox" hidden="hidden">
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox">
<label class="govuk-label govuk-checkboxes__label govuk-!-padding-top-0" for="includeTopLevelFolder">
If you want the folder name <strong class="folder-name"></strong> to be displayed on Discovery/the public catalogue, select this checkbox.
</label>
</div>
</div>
</div>
</div>
<p class="govuk-body">For information on what metadata will be captured during upload, visit the <a href="@routes.FaqController.faq()#metadata-captured" target="_blank" rel="noopener noreferrer" class="govuk-link">FAQ (opens in new tab)</a>.</p>
<div class="govuk-button-group">
<button id="start-upload-button" class="govuk-button" type="submit" data-module="govuk-button" role="button">
Start upload
Expand Down
7 changes: 5 additions & 2 deletions npm/css-src/sass/_drag-and-drop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,14 @@
margin-bottom: 0;
}

.drag-and-drop__selected {
align-items: baseline;
.success-and-removal-message-container {
border-bottom: 1px solid #b1b4b6;
}

.js-drag-and-drop-selected {
display: flex;
gap: 15px;
align-items: baseline;
}

.drag-and-drop__selected__description {
Expand Down
13 changes: 11 additions & 2 deletions npm/src/upload/form/update-and-display-success-message.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,13 @@ export const addFolderSelectionSuccessMessage = (
const selectedContentFragment = document
.createRange()
.createContextualFragment(e.firstElementChild.innerHTML)
selectedContentFragment.querySelector(".folder-name").textContent =
folderName

const folderElements =
document.querySelectorAll<HTMLElement>(".folder-name")

folderElements.forEach((element) => {
element.textContent = folderName
})
selectedContentFragment.querySelector(".folder-size").textContent =
`${folderSize} ${folderSize === 1 ? "file" : "files"}`

Expand All @@ -39,6 +44,9 @@ export const displaySelectionSuccessMessage = (
const successMessageContainer: HTMLElement | null = document.querySelector(
"#item-selection-success-container"
)
const topLevelFolderCheckBox: HTMLElement | null = document.querySelector(
"#top-level-folder-checkbox"
)

selectionArea?.classList.remove("govuk-form-group--error")

Expand All @@ -49,6 +57,7 @@ export const displaySelectionSuccessMessage = (
)

successMessageContainer?.removeAttribute("hidden")
topLevelFolderCheckBox?.removeAttribute("hidden")
successMessage?.classList.remove("govuk-visually-hidden")
successMessage?.focus()
}
6 changes: 5 additions & 1 deletion npm/src/upload/form/upload-form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,13 @@ export class UploadForm {
const folderSelectionMessage: HTMLElement | null = document.querySelector(
"#item-selection-success-container"
)
const topLevelFolderCheckBox: HTMLElement | null = document.querySelector(
"#top-level-folder-checkbox"
)

this.selectedFiles = []
folderSelectionMessage?.setAttribute("hidden", "true")
topLevelFolderCheckBox?.setAttribute("hidden", "true")
this.warningMessages.removedSelectionMessage?.removeAttribute("hidden")
this.successAndRemovalMessageContainer?.focus()

Expand Down Expand Up @@ -278,7 +282,7 @@ export class UploadForm {
}

readonly successAndRemovalMessageContainer: HTMLElement | null =
document.querySelector("#success-and-removal-message-container")
document.querySelector(".success-and-removal-message-container")

private getParentFolderName(folder: IEntryWithPath[]) {
const firstItem: IEntryWithPath = folder.filter((f) => isFile(f))[0]
Expand Down
8 changes: 6 additions & 2 deletions npm/test/upload-form-files.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ test(`clicking the submit button, without selecting a file, displays a warning m
expect(mockDom.uploadingRecordsSection).toHaveAttribute("hidden")
expect(mockDom.submitButton).not.toHaveAttribute("disabled", "true")
expect(mockDom.hiddenInputButton).not.toHaveAttribute("disabled", "true")
expect(mockDom.topLevelFolderCheckBox).toHaveAttribute("hidden")
})

test("clicking the submit button, without selecting a file, displays a warning message to the user", async () => {
Expand All @@ -82,6 +83,7 @@ test("clicking the submit button, without selecting a file, displays a warning m
mockDom.successAndRemovalMessageContainer!,
false
)
expect(mockDom.topLevelFolderCheckBox).toHaveAttribute("hidden")
})

test("input button updates the page with the file that has been selected, if that file is an .docx file", () => {
Expand Down Expand Up @@ -346,8 +348,8 @@ test("clicking the submit button, after selecting the file, disables the buttons
expect(mockDom.submitButton).toHaveAttribute("disabled", "true")
expect(mockDom.hiddenInputButton).toHaveAttribute("disabled", "true")
/*There is currently no way in Javascript to check if an event has been removed from an element,
therefore it is not possible to see if the submission code removed the drop event from the dropzone
*/
therefore it is not possible to see if the submission code removed the drop event from the dropzone
*/
})

test("clicking the submit button, after selecting a file, hides 'upload file' section and reveals progress bar", async () => {
Expand Down Expand Up @@ -418,6 +420,7 @@ test("removeSelectedItem function should hide the success message row and displa
},
false
)
expect(mockDom.topLevelFolderCheckBox).toHaveAttribute("hidden")
})

test(
Expand Down Expand Up @@ -456,5 +459,6 @@ test(
expect(
mockDom.warningMessages.removedSelectionMessage.messageElement!
).toHaveAttribute("hidden", "true")
expect(mockDom.topLevelFolderCheckBox).not.toHaveAttribute("hidden")
}
)
54 changes: 29 additions & 25 deletions npm/test/upload-form-utils/html-for-upload-forms.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,27 +43,24 @@ export const htmlForFolderUploadForm = `
</label>
</div>
</div>
<div id="success-and-removal-message-container" class="govuk-summary-list govuk-file-upload govuk-visually-hidden">
<div class="js-drag-and-drop-selected drag-and-drop__selected" id="item-selection-success-container">
<p id="success-message-text" aria-live="assertive" aria-atomic="true" class="govuk-!-margin-bottom-3 govuk-!-margin-top-0 drag-and-drop__selected__description">The folder <strong id="files-selected-folder-name" class="folder-name"></strong> (containing <span class="folder-size"></span>) has been selected.</p>
<div class="success-and-removal-message-container govuk-!-margin-bottom-6 govuk-visually-hidden">
<div class="js-drag-and-drop-selected" id="item-selection-success-container">
<p id="success-message-text" aria-live="assertive" aria-atomic="true" class="govuk-body drag-and-drop__selected__description">The folder <strong id="files-selected-folder-name" class="folder-name"></strong> (containing <span class="folder-size"></span>) has been selected.</p>
<a id="remove-file-btn" href="#" aria-describedby="files-selected-folder-name" class="govuk-link govuk-link--no-visited-state govuk-!-font-size-19 govuk-body govuk-!-font-weight-bold">Remove<span class="govuk-visually-hidden">&nbsp; selected files</span></a>
</div>
<div class="js-drag-and-drop-selected drag-and-drop__selected" id="removed-selection-container" hidden="true">
<div class="js-drag-and-drop-selected" id="removed-selection-container" hidden="hidden">
<p id="removed-selection-message-text" class="govuk-error-message">The folder "<span class="folder-name"></span>" (containing <span class="folder-size"></span>) has been removed. Select a folder.</p>
</div>
</div>
<p class="govuk-body">For more information on what metadata will be captured during the upload please visit our FAQ’s page</p>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="waste-hint">
<div class="govuk-checkboxes">
<div class="govuk-form-group govuk-!-margin-bottom-3" id="top-level-folder-checkbox" hidden="hidden">
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="includeTopLevelFolder">
Check the box if you want to display the name of your top-level folder in the public catalogue.
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox">
<label class="govuk-label govuk-checkboxes__label govuk-!-padding-top-0" for="includeTopLevelFolder">
If you want the folder name <strong class="folder-name"></strong> to be displayed on Discovery/the public catalogue, select this checkbox.
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="govuk-button-group">
<button id="start-upload-button" class="govuk-button" type="submit" data-module="govuk-button" role="button">
Expand Down Expand Up @@ -139,18 +136,25 @@ export const htmlForFileUploadForm = `
</label>
</div>
</div>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="waste-hint">
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="includeTopLevelFolder">
Check the box if you want to display the name of your top-level folder in the public catalogue.
</label>
</div>
</div>
</fieldset>
</div>
<div class="success-and-removal-message-container govuk-!-margin-bottom-6 govuk-visually-hidden">
<div class="js-drag-and-drop-selected" id="item-selection-success-container">
<p id="success-message-text" aria-live="assertive" aria-atomic="true" class="govuk-body drag-and-drop__selected__description">The folder <strong id="files-selected-folder-name" class="folder-name"></strong> (containing <span class="folder-size"></span>) has been selected.</p>
<a id="remove-file-btn" href="#" aria-describedby="files-selected-folder-name" class="govuk-link govuk-link--no-visited-state govuk-!-font-size-19 govuk-body govuk-!-font-weight-bold">Remove<span class="govuk-visually-hidden">&nbsp; selected files</span></a>
</div>
<div class="js-drag-and-drop-selected" id="removed-selection-container" hidden="hidden">
<p id="removed-selection-message-text" class="govuk-error-message">The folder "<span class="folder-name"></span>" (containing <span class="folder-size"></span>) has been removed. Select a folder.</p>
</div>
<div class="govuk-form-group govuk-!-margin-bottom-3" id="top-level-folder-checkbox" hidden="hidden">
<div class="govuk-checkboxes govuk-checkboxes--small">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="includeTopLevelFolder" name="includeTopLevelFolder" type="checkbox">
<label class="govuk-label govuk-checkboxes__label govuk-!-padding-top-0" for="includeTopLevelFolder">
If you want the folder name <strong class="folder-name"></strong> to be displayed on Discovery/the public catalogue, select this checkbox.
</label>
</div>
</div>
</div>
</div>
<div class="govuk-button-group">
<button id="start-upload-button" class="govuk-button" type="submit" data-module="govuk-button" role="button">
Start upload
Expand Down
5 changes: 4 additions & 1 deletion npm/test/upload-form-utils/mock-upload-form-dom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,9 @@ export class MockUploadFormDom {
itemRetriever: HTMLInputElement | null =
document.querySelector("#file-selection")

topLevelFolderCheckBox: HTMLInputElement | null =
document.querySelector("#top-level-folder-checkbox")

fileNameElement: HTMLElement | null = document.querySelector(".file-name")

folderNameElement: () => HTMLElement | null = () => document.querySelector(".folder-name")
Expand Down Expand Up @@ -276,7 +279,7 @@ export class MockUploadFormDom {
uploadingRecordsSection = document.querySelector("#upload-progress")

successAndRemovalMessageContainer: HTMLElement | null = document.querySelector(
"#success-and-removal-message-container"
".success-and-removal-message-container"
)

successMessageContainer: HTMLElement | null = document.querySelector(
Expand Down
Loading

0 comments on commit 4897646

Please sign in to comment.