Removed all govuk css (#2814)

* Removed all govuk css

* Updated reference files

* Removing govuk js

* Fixed casing for modules, removed unused page

* Got more reference images

* Updated template page

* Removed govuk padding util

* Updated hint to uswds hint

* More govuk cleanup

* Commiting backstopjs ref files

* Fixed all unit tests that broke due to brittleness around govuk styling

* Added new ref images

* Final removal of govuk

* Officially removed all govuk references

* Updated reference file

* Updated link to button

* UI modernization

* Cleanup

* removed govuk escaping tests since they are no longer needed

* Fix CodeQL security issue in escapeElementName function

- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping

* Found more govuk removal. Fixed unit tests

* Add missing pipeline check to pre-commit

* updated test

* Updated e2e test

* More update to e2e test

* Fixed another e2e test

* Simple PR comments addressed

* More updates

* Updated backstop ref files

* Refactored folder selection for non-admins

* Updated redundant line

* Updated tests to include correct mocks

* Added more ref files

* Addressing carlos comments

* Addressing Carlo comments, cleanup of window initing

* More cleanup and addressing carlo comments

* Fixing a11 scan

* Fixed a few issues with javascript

* Fixed for pr

* Fixing e2e tests

* Tweaking e2e test

* Added more ref files and cleaned up urls.js

* Fixed bug with creating new template

* Removed brittle test - addressed code ql comment

* e2e race condition fix

* More e2e test fixes

* Updated e2e tests to not wait for text sent

* Updated test to not wait for button click response

* Made tear down more resilent if staging is down

* reverted e2e test to what was working before main merge

* Updated backstopRef images

* Updated gulp to include job-polling differently

app/assets/javascripts/templateFolderForm.js

@@ -1,7 +1,7 @@
-(function(Modules) {
+(function(window) {
   "use strict";
 
-  Modules.TemplateFolderForm = function() {
+  window.NotifyModules['template-folder-form'] = function() {
 
     this.start = function(templateFolderForm) {
       this.$form = $(templateFolderForm);
@@ -82,14 +82,15 @@
         this.render();
       }
 
-      this.$form.on('click', 'button.usa-button--event', (event) => this.actionButtonClicked(event));
+      this.$form.on('click', 'button.usa-button', (event) => this.actionButtonClicked(event));
       this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
+      this.$form.on('change', 'input[name="add_template_by_template_type"]', () => this.templateTypeChanged());
     };
 
     this.addDescriptionsToStates = function () {
       let id, description;
 
-      $.each(this.states.filter(state => 'description' in state), (idx, state) => {
+      $.each(this.states.filter(state => 'description' in state), (_, state) => {
         id = `${state.key}__description`;
         description = `<p class="usa-sr-only" id="${id}">${state.description}</p>`;
         state.$el
@@ -191,17 +192,30 @@
     this.$singleChannelService = (document.querySelector('div[id=add_new_template_form]')).getAttribute("data-service");
 
     this.actionButtonClicked = function(event) {
-      event.preventDefault();
       this.currentState = $(event.currentTarget).val();
 
       if (event.currentTarget.value === 'add-new-template' && this.$singleNotificationChannel) {
+        event.preventDefault();
         window.location = "/services/" + this.$singleChannelService + "/templates/add-" + this.$singleNotificationChannel;
-      } else {
-        if (this.currentState === 'add-new-template') {
+      } else if (this.currentState === 'add-new-template') {
+        // Check if a template type is selected
+        const selectedTemplateType = this.$form.find('input[name="add_template_by_template_type"]:checked').val();
+
+        if (selectedTemplateType) {
+          // Template type is selected, let the form submit normally
+          return true;
+        } else {
+          // No template type selected, show the selection UI
+          event.preventDefault();
           this.$form.find('input[type=checkbox]').prop('checked', false);
           this.selectionStatus.update({ total: 0, templates: 0, folders: 0 });
-        }
 
+          if (this.stateChanged()) {
+            this.render();
+          }
+        }
+      } else {
+        event.preventDefault();
         if (this.stateChanged()) {
           this.render();
         }
@@ -260,14 +274,29 @@
 
     };
 
+    this.templateTypeChanged = function() {
+      this.updateContinueButtonState();
+    };
+
+    this.updateContinueButtonState = function() {
+      const selectedTemplateType = this.$form.find('input[name="add_template_by_template_type"]:checked').val();
+      const continueButton = this.$form.find('#add_new_template_form button[value="add-new-template"]');
+
+      if (selectedTemplateType) {
+        continueButton.prop('disabled', false);
+      } else {
+        continueButton.prop('disabled', true);
+      }
+    };
+
     this.hasCheckboxes = function() {
       return !!this.$form.find('input:checkbox').length;
     };
 
     this.countSelectedCheckboxes = function() {
       const allSelected = this.$form.find('input:checkbox:checked');
-      const templates = allSelected.filter((idx, el) => $(el).siblings('.template-list-template').length > 0).length;
-      const folders = allSelected.filter((idx, el) => $(el).siblings('.template-list-folder').length > 0).length;
+      const templates = allSelected.filter((_, el) => $(el).siblings('.template-list-template').length > 0).length;
+      const folders = allSelected.filter((_, el) => $(el).siblings('.template-list-folder').length > 0).length;
       const results = {
         'templates': templates,
         'folders': folders,
@@ -277,7 +306,6 @@
     };
 
     this.render = function() {
-      let mode = 'default';
       let currentStateObj = this.states.filter(state => { return (state.key === this.currentState); })[0];
       let scrollTop;
 
@@ -286,11 +314,6 @@
         state => (state.key === this.currentState ? this.$liveRegionCounter.before(state.$el) : state.$el.detach())
       );
 
-      // use dialog mode for states which contain more than one form control
-      if (['move-to-existing-folder', 'add-new-template'].indexOf(this.currentState) !== -1) {
-        mode = 'dialog';
-      }
-
       if (this.currentState === 'add-new-template') {
         this.$form.find('.template-list-item').addClass('js-hidden');
         $('.live-search').addClass('js-hidden');
@@ -302,6 +325,9 @@
         $('#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';
+
+        // Disable Continue button initially and update based on selection
+        this.updateContinueButtonState();
       } else {
         this.$form.find('.template-list-item').removeClass('js-hidden');
         $('.live-search').removeClass('js-hidden');
@@ -324,10 +350,12 @@
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
           <div class="usa-button-group">
-            <button class="usa-button usa-button--event" value="add-new-template" aria-expanded="false">
+            <button class="usa-button" value="add-new-template" aria-expanded="false" role="button">
               New template
             </button>
-            <button class="usa-button usa-button--event" value="add-new-folder" aria-expanded="false">New folder</button>
+            <button class="usa-button usa-button--outline" value="add-new-folder" aria-expanded="false" role="button">
+              New folder
+            </button>
           </div>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
@@ -342,13 +370,15 @@
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
           <div class="usa-button-group">
-            <button class="usa-button usa-button--event" value="move-to-existing-folder" aria-expanded="false">
+            <button class="usa-button" value="move-to-existing-folder" aria-expanded="false" role="button">
               Move<span class="usa-sr-only"> selection to folder</span>
             </button>
-            <button class="usa-button usa-button--event" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
+            <button class="usa-button usa-button--outline" value="move-to-new-folder" aria-expanded="false" role="button">
+              Add to new folder
+            </button>
           </div>
           <div class="template-list-selected-counter" aria-hidden="true">
-            <span class="template-list-selected-counter__count" aria-hidden="true">
+            <span class="template-list-selected-counter__count text-base" aria-hidden="true">
               ${this.selectionStatus.selected(1)}
             </span>
           </div>
@@ -357,4 +387,4 @@
     `).get(0);
   };
 
-})(window.GOVUK.Modules);
+})(window);