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

gulpfile.js

@@ -1,10 +1,5 @@
 const { src, dest, series } = require('gulp');
-const rollup = require('@rollup/stream');
-const rollupPluginCommonjs = require('@rollup/plugin-commonjs');
-const rollupPluginNodeResolve = require('@rollup/plugin-node-resolve');
-const source = require('vinyl-source-stream');
-const buffer = require('vinyl-buffer');
-const gulpMerge = require('gulp-merge');
+const mergeStream = require('merge-stream');
 const uswds = require('@uswds/compile');
 const { exec } = require('child_process');
 const plugins = {};
@@ -19,69 +14,37 @@ plugins.uglify = require('gulp-uglify');
 const paths = {
   src: 'app/assets/',
   dist: 'app/static/',
-  npm: 'node_modules/',
-  toolkit: 'node_modules/govuk_frontend_toolkit/',
-  govuk_frontend: 'node_modules/govuk-frontend/',
+  npm: 'node_modules/'
 };
 
 const javascripts = () => {
-  const vendored = rollup({
-    input: paths.src + 'javascripts/modules/all.mjs',
-    plugins: [
-      rollupPluginNodeResolve({
-        mainFields: ['module', 'main'],
-      }),
-      rollupPluginCommonjs({
-        include: 'node_modules/**',
-      }),
-    ],
-    output: {
-      format: 'iife',
-      name: 'GOVUK',
-    },
-  })
-    .pipe(source('all.mjs'))
-    .pipe(buffer())
-    .pipe(
-      plugins.addSrc.prepend([
-        paths.npm + 'jquery/dist/jquery.min.js',
-        paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
-        paths.npm + 'textarea-caret/index.js',
-        paths.npm + 'cbor-js/cbor.js',
-        paths.npm + 'd3/dist/d3.min.js',
-        paths.npm + 'socket.io-client/dist/socket.io.min.js'
-      ])
-    );
-
+  // Files that don't use NotifyModules and can be uglified
   const local = src([
-    paths.toolkit + 'javascripts/govuk/modules.js',
-    paths.toolkit + 'javascripts/govuk/show-hide-content.js',
-    paths.src + 'javascripts/copyToClipboard.js',
-    paths.src + 'javascripts/enhancedTextbox.js',
-    paths.src + 'javascripts/fileUpload.js',
+    paths.src + 'javascripts/modules/init.js',
+    paths.src + 'javascripts/modules/uswds-modules.js',
+    paths.src + 'javascripts/modules/show-hide-content.js',
     paths.src + 'javascripts/radioSelect.js',
-    paths.src + 'javascripts/listEntry.js',
     paths.src + 'javascripts/liveSearch.js',
-    paths.src + 'javascripts/errorTracking.js',
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
-    paths.src + 'javascripts/fullscreenTable.js',
-    paths.src + 'javascripts/templateFolderForm.js',
-    paths.src + 'javascripts/collapsibleCheckboxes.js',
-    paths.src + 'javascripts/radioSlider.js',
-    paths.src + 'javascripts/updateStatus.js',
     paths.src + 'javascripts/errorBanner.js',
     paths.src + 'javascripts/notifyModal.js',
     paths.src + 'javascripts/timeoutPopup.js',
     paths.src + 'javascripts/date.js',
     paths.src + 'javascripts/loginAlert.js',
-    paths.src + 'javascripts/main.js',
-    paths.src + 'javascripts/totalMessagesChart.js',
-    paths.src + 'javascripts/activityChart.js',
     paths.src + 'javascripts/sidenav.js',
     paths.src + 'javascripts/validation.js',
-    paths.src + 'javascripts/job-polling.js',
     paths.src + 'javascripts/scrollPosition.js',
   ])
+
+  // Files that use NotifyModules - split into two groups to avoid stream issues
+  const notifyModules1 = src([
+    paths.src + 'javascripts/copyToClipboard.js',
+    paths.src + 'javascripts/enhancedTextbox.js',
+    paths.src + 'javascripts/fileUpload.js',
+    paths.src + 'javascripts/errorTracking.js',
+    paths.src + 'javascripts/fullscreenTable.js',
+    paths.src + 'javascripts/templateFolderForm.js',
+  ])
     .pipe(plugins.prettyerror())
     .pipe(
       plugins.babel({
@@ -89,8 +52,49 @@ const javascripts = () => {
       })
     );
 
-  return gulpMerge(vendored, local)
-    .pipe(plugins.uglify())
+  const notifyModules2 = src([
+    paths.src + 'javascripts/collapsibleCheckboxes.js',
+    paths.src + 'javascripts/radioSlider.js',
+    paths.src + 'javascripts/updateStatus.js',
+    paths.src + 'javascripts/main.js',
+  ])
+    .pipe(plugins.prettyerror())
+    .pipe(
+      plugins.babel({
+        presets: ['@babel/preset-env'],
+      })
+    );
+
+  // Apply uglify only to local files
+  const localUglified = local
+    .pipe(
+      plugins.babel({
+        presets: ['@babel/preset-env'],
+      })
+    )
+    .pipe(plugins.uglify());
+
+  // First create vendored with jquery-expose immediately after jQuery
+  const vendoredWithExpose = src([
+    paths.npm + 'jquery/dist/jquery.min.js',
+    paths.src + 'javascripts/jquery-expose.js',
+    paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
+    paths.npm + 'textarea-caret/index.js',
+    paths.npm + 'cbor-js/cbor.js',
+    paths.npm + 'd3/dist/d3.min.js',
+    paths.npm + 'socket.io-client/dist/socket.io.min.js'
+  ]);
+
+  // Concatenate all streams
+  const mainBundle = mergeStream(vendoredWithExpose, localUglified, notifyModules1, notifyModules2);
+
+  // Use the mainBundle as the base and append remaining non-transpiled files at the end
+  return mainBundle
+    .pipe(plugins.addSrc.append(paths.src + 'javascripts/listEntry.js'))
+    .pipe(plugins.addSrc.append(paths.src + 'javascripts/stick-to-window-when-scrolling.js'))
+    .pipe(plugins.addSrc.append(paths.src + 'javascripts/totalMessagesChart.js'))
+    .pipe(plugins.addSrc.append(paths.src + 'javascripts/activityChart.js'))
+    .pipe(plugins.addSrc.append(paths.src + 'javascripts/job-polling.js'))
     .pipe(plugins.concat('all.js'))
     .pipe(dest(paths.dist + 'javascripts/'));
 };