Merge branch 'EIDCAPPSUP-16633-javascript-testing' into 'develop'

Trying to get javascript development to work

Closes EIDCAPPSUP-16633

See merge request eip/catalogue!539

.dockerignore

@@ -5,17 +5,15 @@
 !java/lombok.config
 !schemas
 !templates
-!web
-!web/scripts
+!web/css
 !web/dist
+!web/img
+!web/less
+!web/src
 !web/Gruntfile.js
-web/css
-web/scripts/catalogue/test/
-web/scripts/clipboard/test/
-web/scripts/editor/test/
-web/scripts/geometryMap/test/
-web/scripts/hubbub/test/
-web/scripts/permission/test/
-web/scripts/simple-upload/test/
-web/scripts/study-area/test/
+!web/karma.conf.js
+!web/package.json
+!web/package-lock.json
+!web/webpack.js
+
 

.gitlab-ci.yml

@@ -25,7 +25,7 @@ test_java:
 
 test_web:
   stage: test
-  image: ephesoft/headless_chrome:latest
+  image: registry.gitlab.ceh.ac.uk/eip/headless_chrome:0.1
   script:
     - cd web/
     - npm install -g npm
@@ -36,6 +36,15 @@ test_web:
     reports:
       junit: web/TESTS-*.xml
 
+test_application:
+  stage: test
+  image: docker:20.10.5
+  services:
+    - name: docker:20.10.5-dind
+      alias: docker
+  script:
+    - docker build --target prod -t $CI_REGISTRY_IMAGE/app:$CI_COMMIT_SHA .
+
 build_application:
   stage: build
   image: docker:20.10.5

Dockerfile

@@ -1,11 +1,11 @@
 # Build webpack (javascript & css)
-FROM node:17.4.0 AS build-web
+FROM node:18.17.1-alpine3.18 AS build-web
 WORKDIR /web
 COPY web ./
+RUN npm install -g npm
 RUN npm ci --no-audit
-RUN npm run build
-RUN npm install -g grunt-cli
-RUN node_modules/.bin/grunt
+RUN npm run build-css
+RUN npm run build-prod
 
 # Build Java
 FROM gradle:8.2-jdk17-alpine AS build-java
@@ -32,8 +32,8 @@ COPY --from=build-java /app/build/libs/application/ ./
 COPY templates /opt/ceh-catalogue/templates
 COPY --from=build-web /web/img /opt/ceh-catalogue/static/img
 COPY --from=build-web /web/dist /opt/ceh-catalogue/static/scripts
-COPY --from=build-web web/node_modules /opt/ceh-catalogue/static/node_modules
 COPY --from=build-web /web/css /opt/ceh-catalogue/static/css
+COPY --from=build-web /web/node_modules/@fortawesome/fontawesome-free/webfonts /opt/ceh-catalogue/static/fonts
 RUN chown spring:spring -R /app \
  && chown spring:spring -R /opt/ceh-catalogue \
  && chown spring:spring -R /var/ceh-catalogue \

README.md

@@ -105,9 +105,6 @@ Start up the catalogue with `docker-compose up --build` then connect to the dock
 IntelliJ. You might need to add your user to the docker user group before connecting to the service. 
 Now you can make changes to the front end without restarting docker and rebuilding the backend.
 
-Webpack is mostly configured in `webpack.common.js` which is inherited by `webpack.dev.js` for development work and
-`webpack.prod.js` for the production configuration.
-
 #### Note - there are many uses of Jquery's $(document).ready() function in the editor module of the frontend. Do not just remove them as they are there to prevent timing issues with views of existing documents in the editor. Unless of course you can find a better alternative.
 
 ### Test JavaScript using Karma

docker-compose.yml

@@ -25,7 +25,6 @@ services:
       #- ./web/src:/opt/ceh-catalogue/static
       # Uncomment to work on webpack
       # Run 'npm run watch' and connect to the catalogue docker service to have code recompiled while developing
-      # To connect to the docker service, add your user to the docker group
       # Then use the services tab in IntelliJ
       #- ./web/dist:/opt/ceh-catalogue/static/scripts
     environment:

java/src/test/resources/uk/ac/ceh/gateway/catalogue/upload/simple/page.html

@@ -72,6 +72,6 @@ <h2>Files</h2>
 </script>
 </div>
 <div id="message-panel"></div>
-<script src="/static/scripts/main.bundle.js"></script>
+<script src="/static/scripts/main.js"></script>
 </body>
 </html>

templates/html/search/_facets.ftlh

@@ -1,9 +1,9 @@
 <#--
-  The following freemarker macro matches the javascript template 
-    /web/src/scripts/templates/FacetResults.tpl
+  The following freemarker macro matches the javascript template
+    /web/src/scripts/templates/facetResultsTemplate.js
 
   Where as the rest of the template matches up with
-    /web/src/scripts/templates/FacetsPanel.tpl
+    /web/src/scripts/templates/facetsPanelTemplate.js
 -->
 <#macro facetResults results>
   <ul>
@@ -23,7 +23,7 @@
       </#if>
     </#list>
   </ul>
-</#macro> 
+</#macro>
 
 <#list facets as facet>
   <#if facet.results?size gt 0>

templates/html/search/_page.ftlh

@@ -3,7 +3,7 @@
   from the catalogue api.
 
   IMPORTANT: If you change the structure of this, please update the corresponding
-  javascript template /web/src/scripts/templates/SearchPage.tpl
+  javascript template /web/src/scripts/templates/searchPage.js
 -->
 <div class="results__header">
   <span id="num-records">${numFound}</span> records found

templates/html/skeleton.ftlh

@@ -3,7 +3,7 @@
 <#setting date_format = 'yyyy-MM-dd'>
 
 <#assign defaultScripts>
-  <script src="/static/scripts/main.bundle.js"></script>
+  <script src="/static/scripts/main.js"></script>
 </#assign>
 
 <#assign catalogueid="">

web/.gitignore

@@ -1,6 +1,6 @@
 # Ignore the built content
 vendor
-scripts/*-out.js
+src/*-out.js
 css
 dist