darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-10 15:13:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2663 from GSA/2253-bug-on-template-page

Browse Source 
Fixes for several bugs on the templates page related to form submission issues
This commit is contained in:
ccostino
2025-06-11 17:52:32 -04:00
committed by GitHub
parent db5c74b861 5bdb4cb3b5
commit 63ec371db1
7 changed files with 68 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/liveSearch.js
View File

@@ -20,7 +20,6 @@
$targets.each(function() {
let content = $('.live-search-relevant', this).text() || $(this).text();
let isMatch = normalize(content).indexOf(normalize(query)) > -1;
if ($(this).has(':checked').length) {
$(this).show();
@@ -29,21 +28,25 @@
}
if (query == '') {
$(this).css('display', '');
$(this).removeClass('js-hidden');
results++;
return;
}
$(this).toggle(isMatch);
if (isMatch) { results++; }
let isMatch = normalize(content).includes(normalize(query));
if (isMatch) {
$(this).removeClass('js-hidden');
results++;
} else {
$(this).addClass('js-hidden');
}
});
if (query !== '' && results === 0) {
$noResultsMessage.show();
$noResultsMessage.removeClass('js-hidden');
} else {
$noResultsMessage.hide();
$noResultsMessage.addClass('js-hidden');
}
if (state === 'loaded') {

29
app/assets/javascripts/templateFolderForm.js
View File

@@ -197,6 +197,11 @@
if (event.currentTarget.value === 'add-new-template' && this.$singleNotificationChannel) {
window.location = "/services/" + this.$singleChannelService + "/templates/add-" + this.$singleNotificationChannel;
} else {
if (this.currentState === 'add-new-template') {
this.$form.find('input[type=checkbox]').prop('checked', false);
this.selectionStatus.update({ total: 0, templates: 0, folders: 0 });
}
if (this.stateChanged()) {
this.render();
}
@@ -286,7 +291,29 @@
mode = 'dialog';
}
if (currentStateObj && ('setFocus' in currentStateObj)) {
if (this.currentState === 'add-new-template') {
this.$form.find('.template-list-item').addClass('js-hidden');
$('.live-search').addClass('js-hidden');
$('#breadcrumb-template-folders').addClass('js-hidden');
$('#template-list').addClass('js-hidden');
this.$form.find('input[type=checkbox]').prop('checked', false);
this.selectionStatus.update({ total: 0, templates: 0, folders: 0 });
$('#page-title').text('New Template');
$('#page-description').text('Every message starts with a template. Choose to start with a blank template or copy an existing template.');
document.title = 'New Templates';
} else {
this.$form.find('.template-list-item').removeClass('js-hidden');
$('.live-search').removeClass('js-hidden');
$('#breadcrumb-template-folders').removeClass('js-hidden');
$('#template-list').removeClass('js-hidden');
$('#page-title').text('Select or create a template');
$('#page-description').text('Every message starts with a template. To send, choose or create a template.');
document.title = 'Select or create a template';
}
if (currentStateObj && 'setFocus' in currentStateObj) {
scrollTop = $(window).scrollTop();
currentStateObj.setFocus();
$(window).scrollTop(scrollTop);

4
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -229,6 +229,10 @@ td.table-empty-message {
display: none;
}
.js-hidden {
display: none !important;
}
.folder-heading a.folder-heading-folder,
.template-list-folder {
background: url(../img/material-icons/folder.svg) no-repeat;

2
app/templates/views/templates/choose-reply.html
View File

@@ -40,7 +40,7 @@
<nav id="template-list" aria-label="Choose reply">
<ul>
{% for item in templates_and_folders %}
<li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
<li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% else %}template-list-item-without-ancestors{% endif %}">
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="usa-link template-list-folder">
{{ ancestor.name }}

8
app/templates/views/templates/choose.html
View File

@@ -32,9 +32,9 @@
{% else %}
<div class="grid-row flex-column">
<h1 class="font-body-2xl line-height-sans-2 margin-bottom-1 margin-top-0">{{page_title}}</h1>
<h1 class="font-body-2xl line-height-sans-2 margin-bottom-1 margin-top-0" id="page-title">{{page_title}}</h1>
<div class="{% if current_user.has_permissions('manage_templates') %} grid-col-10 {% else %} grid-col-12 {% endif %}">
<p class="margin-top-0 margin-bottom-4">
<p class="margin-top-0 margin-bottom-4" id="page-description">
Every message starts with a template. To send, choose or create a template.
</p>
{{ folder_path(
@@ -59,6 +59,10 @@
{{ live_search(target_selector='#template-list .template-list-item', show=show_search_box, form=search_form) }}
<div class="js-live-search-no-results" style="display: none;">
<p class="usa-body margin-top-2">No templates found</p>
</div>
{% if current_user.has_permissions('manage_templates') and user_has_template_folder_permission %}
{% call form_wrapper(
class='sticky-scroll-area',

12
app/templates/views/templates/copy.html
View File

@@ -1,5 +1,6 @@
{% from "components/folder-path.html" import copy_folder_path, page_title_folder_path %}
{% from "components/live-search.html" import live_search %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}
{% extends "withnav_template.html" %}
{% set page_title = "Copy an existing template" %}
@@ -8,6 +9,12 @@
{{ page_title }}
{% endblock %}
{% block backLink %}
{% if not from_service %}
{{ usaBackLink({ "href": url_for('.choose_template', service_id=current_service.id),
"html": "Back to all templates" }) }}
{% endif %}
{% endblock %}
{% block maincolumn_content %}
<div class="">
@@ -25,11 +32,14 @@
form=search_form,
autofocus=True
) }}
<div class="js-live-search-no-results" style="display: none;">
<p class="usa-body margin-top-2">No templates found</p>
</div>
<nav id="template-list" aria-label="Copy template list">
<ul>
{% for item in services_templates_and_folders %}
<li class="template-list-item margin-bottom-2 {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
<li class="template-list-item margin-bottom-2">
{% if item.is_service %}
{% elif item.is_folder %}
{% else %}

16
tests/javascripts/liveSearch.test.js
View File

@@ -135,7 +135,7 @@ describe('Live search', () => {
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(listItems.length);
expect(searchTextbox.hasAttribute('aria-label')).toBe(false);
@@ -150,7 +150,7 @@ describe('Live search', () => {
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(1);
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
@@ -166,7 +166,7 @@ describe('Live search', () => {
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(1);
expect(searchTextbox.hasAttribute('aria-label')).toBe(true);
@@ -182,7 +182,7 @@ describe('Live search', () => {
window.GOVUK.modules.start();
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
// all items contain the "Add and edit templates" permission so would match if all text was matched against the search term
// only the text containing the label and email address is matched against
@@ -207,7 +207,7 @@ describe('Live search', () => {
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(listItems.length);
@@ -225,7 +225,7 @@ describe('Live search', () => {
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(1);
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(1));
@@ -244,7 +244,7 @@ describe('Live search', () => {
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
expect(listItemsShowing.length).toEqual(1);
expect(liveRegion.textContent.trim()).toEqual(liveRegionResults(1));
@@ -263,7 +263,7 @@ describe('Live search', () => {
helpers.triggerEvent(searchTextbox, 'input');
const listItems = list.querySelectorAll('.user-list-item');
const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
const listItemsShowing = Array.from(listItems).filter(item => !item.classList.contains('js-hidden'));
// all items contain the "Add and edit templates" permission so would match if all text was matched against the search term
// only the text containing the label and email address is matched against