no longer needing JS for button functionality + added more content to…

… contentful
DFE-Digital · Aug 12, 2024 · e677afa · e677afa
1 parent 400ac23
commit e677afa
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 35 deletions.
diff --git a/src/Dfe.EarlyYearsQualification.Content/Entities/QualificationListPage.cs b/src/Dfe.EarlyYearsQualification.Content/Entities/QualificationListPage.cs
@@ -33,4 +33,6 @@ public class QualificationListPage
     public Document? NoResultsText { get; init; }
 
     public string ClearSearchText { get; init; } = string.Empty;
+
+    public string NoQualificationsFoundText { get; init; } = string.Empty;
 }
diff --git a/src/Dfe.EarlyYearsQualification.Web/Controllers/QualificationDetailsController.cs b/src/Dfe.EarlyYearsQualification.Web/Controllers/QualificationDetailsController.cs
@@ -253,7 +253,8 @@ private async Task<QualificationListModel> MapList(QualificationListPage content
                    SearchCriteria = userJourneyCookieService.GetSearchCriteria(),
                    Qualifications = basicQualificationsModels.OrderBy(x => x.QualificationName).ToList(),
                    NoResultText = await htmlRenderer.ToHtml(content.NoResultsText),
-                   ClearSearchText = content.ClearSearchText
+                   ClearSearchText = content.ClearSearchText,
+                   NoQualificationsFoundText = content.NoQualificationsFoundText
                };
     }
 

diff --git a/src/Dfe.EarlyYearsQualification.Web/Models/Content/QualificationListModel.cs b/src/Dfe.EarlyYearsQualification.Web/Models/Content/QualificationListModel.cs
@@ -33,4 +33,6 @@ public class QualificationListModel
     public string NoResultText { get; init; } = string.Empty;
 
     public string ClearSearchText { get; init; } = string.Empty;
+
+    public string NoQualificationsFoundText { get; init; } = string.Empty;
 }
diff --git a/src/Dfe.EarlyYearsQualification.Web/Security/SecureHeaderConfiguration.cs b/src/Dfe.EarlyYearsQualification.Web/Security/SecureHeaderConfiguration.cs
@@ -79,18 +79,6 @@ public static SecureHeadersMiddlewareConfiguration CustomConfiguration()
                               CommandType = CspCommandType.Directive,
                               DirectiveOrUri = "sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I="
                           };
-
-        var qualificationSearchClear = new ContentSecurityPolicyElement
-                                       {
-                                           CommandType = CspCommandType.Directive,
-                                           DirectiveOrUri = "sha256-srtO38mCTBDNIatd8nPrAAqKznor3jlT5dLCS/P4iF4="
-                                       };
-
-        var inlineSearchInvocation = new ContentSecurityPolicyElement
-                                       {
-                                           CommandType = CspCommandType.Directive,
-                                           DirectiveOrUri = "sha256-8gEdNcDa9WCfzOPJMd78il56oDlvutN74/V/ZuZUYqc="
-                                       };
 
         configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(backButtonShaCspElement);
         configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(cookiesPageShaCspElement);
@@ -104,8 +92,6 @@ public static SecureHeadersMiddlewareConfiguration CustomConfiguration()
         configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(gtmInjectedScriptCspElement);
         configuration.ContentSecurityPolicyConfiguration.ConnectSrc.Add(ga4CspElement);
         configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(windowPrint);
-        configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(qualificationSearchClear);
-        configuration.ContentSecurityPolicyConfiguration.ScriptSrc.Add(inlineSearchInvocation);
 
         return configuration;
     }

diff --git a/src/Dfe.EarlyYearsQualification.Web/Views/QualificationDetails/Get.cshtml b/src/Dfe.EarlyYearsQualification.Web/Views/QualificationDetails/Get.cshtml
@@ -10,13 +10,6 @@
     }
 }
 
-<script type="text/javascript">
-    function ClearSearch() {
-        $('#refineSearch').val('');
-        $('#search-button').click();
-    }
-</script>
-
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-one-quarter">
         <h2 id="your-search-header" class="govuk-label-wrapper">
@@ -41,21 +34,33 @@
                 }
                 else
                 {
-                    @("No")
+                    @Model.NoQualificationsFoundText
                 } @(Model.Qualifications.Count == 1 ? Model.SingleQualificationFoundText : Model.MultipleQualificationsFoundText)
             </strong>
         </h3>
         <div id="pre-search-content">@Html.Raw(Model.PreSearchBoxContent)</div>
-        <div class="govuk-form-group">
-            @using (Html.BeginForm("Refine", "QualificationDetails", FormMethod.Post))
-            {
-                <input class="govuk-input govuk-!-width-two-thirds" id="refineSearch" name="refineSearch" aria-label="refine search box" type="text" value="@Model.SearchCriteria">
-                <button id="refineSearchButton" type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button">
-                    @Model.SearchButtonText
-                </button>
-                <a id="clear-search" onclick="ClearSearch()" class="govuk-link govuk-!-static-padding-left-3 govuk-!-font-size-19">@Model.ClearSearchText</a>
-            }
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-three-quarters">
+                @using (Html.BeginForm("Refine", "QualificationDetails", FormMethod.Post))
+                {
+                    <div class="display-flex">
+                        <input class="govuk-input" id="refineSearch" name="refineSearch" aria-label="refine search box" type="text" value="@Model.SearchCriteria">
+                        <button id="refineSearchButton" type="submit" class="govuk-button govuk-button--secondary govuk-!-static-margin-left-1" data-module="govuk-button">
+                            @Model.SearchButtonText
+                        </button>
+                    </div>
+
+                }
+            </div>
+            <div class="govuk-grid-column-one-quarter">
+                @using (Html.BeginForm("Refine", "QualificationDetails", FormMethod.Post))
+                {
+                    <input name="refineSearch" type="hidden" value="">
+                    <button id="clear-search" type="submit" class="govuk-link button-as-link float-left govuk-!-static-margin-left-3 govuk-!-static-margin-top-1 govuk-!-font-size-19">@Model.ClearSearchText</button>
+                }
+            </div>
         </div>
+
         @if (Model.Qualifications.Count == 0)
         {
             <div id="no-result-content">

diff --git a/src/Dfe.EarlyYearsQualification.Web/wwwroot/css/site.css b/src/Dfe.EarlyYearsQualification.Web/wwwroot/css/site.css
@@ -82,4 +82,26 @@ body {
 
 .no-padding-right {
     padding-right: 0 !important;
+}
+
+.display-flex {
+    display: flex;
+}
+
+.float-left {
+    float: left;
+}
+
+.button-as-link {
+    background: none!important;
+    border: none;
+    color: #1d70b8;
+}
+
+.button-as-link:focus {
+    outline: 3px solid #0000 !important;
+    background-color: #fd0 !important;
+    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c !important;
+    text-decoration: none !important;
+    -webkit-box-decoration-break: clone !important;
 }
diff --git a/tests/Dfe.EarlyYearsQualification.E2ETests/cypress/e2e/shared/security-header-spec.cy.js b/tests/Dfe.EarlyYearsQualification.E2ETests/cypress/e2e/shared/security-header-spec.cy.js
@@ -21,7 +21,7 @@ describe("A spec that checks for security headers in the response", () => {
         );
         expect(response.headers).to.have.property(
           "content-security-policy",
-          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' 'sha256-srtO38mCTBDNIatd8nPrAAqKznor3jlT5dLCS/P4iF4=' 'sha256-8gEdNcDa9WCfzOPJMd78il56oDlvutN74/V/ZuZUYqc=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
+          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
         );
         expect(response.headers).to.have.property(
           "cross-origin-resource-policy",
@@ -62,7 +62,7 @@ describe("A spec that checks for security headers in the response", () => {
         );
         expect(response.headers).to.have.property(
           "content-security-policy",
-          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' 'sha256-srtO38mCTBDNIatd8nPrAAqKznor3jlT5dLCS/P4iF4=' 'sha256-8gEdNcDa9WCfzOPJMd78il56oDlvutN74/V/ZuZUYqc=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
+          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
         );
         expect(response.headers).to.have.property(
           "cross-origin-resource-policy",
@@ -97,7 +97,7 @@ describe("A spec that checks for security headers in the response", () => {
         );
         expect(response.headers).to.have.property(
           "content-security-policy",
-          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' 'sha256-srtO38mCTBDNIatd8nPrAAqKznor3jlT5dLCS/P4iF4=' 'sha256-8gEdNcDa9WCfzOPJMd78il56oDlvutN74/V/ZuZUYqc=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
+          "script-src 'self' 'sha256-2eCA8tPChvVMeSRvRNqlmBco1wRmAKXWVzJ8Vpb9S6Y=' 'sha256-ibd3+9XjZn7Vg7zojLQbgAN/fA220kK9gifwVI944SI=' 'sha256-Om9RNNoMrdmIZzT4Oo7KaozVNUg6zYxVQuq3CPld2Ms=' 'unsafe-hashes' 'sha256-GUQ5ad8JK5KmEWmROf3LZd9ge94daqNvd8xy9YS1iDw=' 'sha256-l5MP+9OapFXGxjKMNj/89ExAW2TvAFFoADrbsmtSJXo=' 'sha256-pwrEcsLN2o+4gQQDR/0sGCITSf0nhhLAzP4h73+5foc=' 'sha256-1f+6vEGZewP7dkvrYIBD4bqMLOhumfg10mwfKd2jU7I=' https://www.googletagmanager.com/gtm.js https://www.googletagmanager.com/gtag/js;object-src 'self';frame-ancestors https://app.contentful.com;connect-src *.google-analytics.com;block-all-mixed-content;upgrade-insecure-requests;"
         );
         expect(response.headers).to.have.property(
           "cross-origin-resource-policy",