PI-1285 Added initial new-tech page (#17)

* PI-1285 Added initial new-tech page + switched to workspaces

* Added in-memory token store for local dev without Docker

* WIP results page based on new-tech

* Remove jquery + use suggestion score

.circleci/config.yml

@@ -70,9 +70,8 @@ jobs:
 
   integration_test:
     executor:
-      name: hmpps/node_redis
-      node_tag: << pipeline.parameters.node-version >>
-      redis_tag: "7.0"
+      name: hmpps/node
+      tag: << pipeline.parameters.node-version >>
     steps:
       - checkout
       - attach_workspace:

README.md

@@ -26,17 +26,14 @@ Install NPM package dependencies:
 npm install
 ```
 
-Pull the latest Docker image versions:
-
-```shell
-docker-compose pull
-```
-
 ### Run the service
 
 To run the service locally, with dependencies in Docker:
 
 ```shell
+# Pull the latest Docker image versions
+docker-compose pull
+
 # Start the dependencies only
 docker-compose up -d --scale=app=0
 
@@ -54,14 +51,16 @@ Open http://localhost:3000 in your browser, and login with the following credent
 Alternatively, you can integrate your local UI with the dev/test services deployed on MOJ Cloud Platform using a personal HMPPS Auth client.
 If you don't already have a personal client, request one in the [#hmpps-auth-audit-registers](https://mojdt.slack.com/archives/C02S71KUBED) Slack channel.
 
+This removes the need for using Docker.
+
 You'll need the following roles:
-* `ROLE_PROBATION_SEARCH` for searching probation cases
+* `ROLE_PROBATION_SEARCH` for searching probation cases (TBC)
 
-Create an `.env` file at the root of the project:
+Create a `.env` file at the root of the project:
 ```properties
 NODE_ENV=development
-REDIS_HOST=localhost
 ENVIRONMENT=dev
+REDIS_ENABLED=false
 HMPPS_AUTH_URL=https://sign-in-dev.hmpps.service.justice.gov.uk/auth
 PROBATION_SEARCH_API_URL=https://probation-offender-search-dev.hmpps.service.justice.gov.uk
 
@@ -74,10 +73,6 @@ SYSTEM_CLIENT_SECRET=clientsecret
 
 Then, start the UI service:
 ```shell
-# Start Redis only
-docker-compose up -d redis
-
-# Start the UI service and watch for changes
 npm run start:dev
 ```
 

assets/scss/new-tech.scss

@@ -0,0 +1,197 @@
+$govuk-global-styles: true;
+$path: "/assets/images/";
+
+$moj-page-width: 1170px;
+$govuk-page-width: $moj-page-width;
+
+@import 'govuk/all';
+@import 'moj/all';
+
+#search-form {
+  background-color: $govuk-brand-colour;
+  padding-top: govuk-spacing(5);
+  .govuk-form-group {
+    margin-bottom: 0;
+  }
+}
+
+#search-input-container {
+  @include govuk-width-container;
+  @include govuk-clearfix;
+  .govuk-label, .govuk-link, .govuk-hint {
+    color: govuk-colour("white");
+  }
+}
+
+#search-results {
+  @include govuk-width-container;
+  padding-top: govuk-spacing(4);
+  & ~ .govuk-width-container > .govuk-main-wrapper {
+    display: none; // hide welcome content when results are rendered
+  }
+}
+
+#search-suggestions {
+  color: govuk-colour("white");
+  float: left;
+  margin-top: govuk-spacing(2)
+}
+
+.govuk-phase-banner {
+  border-bottom: none;
+}
+
+.app-national-search-filter {
+  background-color: govuk-colour("mid-grey");
+  margin-bottom: 10px;
+
+  button {
+    z-index: 100;
+    position: relative;
+    border: none;
+    display: block;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    padding: govuk-spacing(2);
+    background: govuk-colour("mid-grey") url(../images/accordion-arrow.png) no-repeat;
+
+    &.open {
+      background-position: right -50px;
+    }
+
+    &.closed {
+      background-position: right -5px;
+    }
+  }
+
+  .filter-container {
+    border: $govuk-border-colour 5px solid;
+    border-top: 0;
+    background-color: govuk-colour("white");
+    max-height: 20vh;
+
+    position: relative;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.closed {
+      display: none;
+    }
+
+    label {
+      //@include govuk-font($size: 16);
+      display: block;
+      padding: govuk-spacing(2) govuk-spacing(4);
+      cursor: pointer;
+      border-bottom: 1px $govuk-border-colour solid;
+
+      &:hover {
+        background-color: govuk-colour("light-grey");
+      }
+    }
+
+    .filter-option {
+      float: left;
+      width: 20px;
+      height: 20px;
+      margin-left: -10px;
+    }
+  }
+}
+
+.app-national-search-add {
+  float: right;
+  margin-top: 35px;
+}
+
+.app-national-search-help {
+  background: govuk-colour("black");
+  float: right;
+  padding: 15px 20px 20px 20px;
+  margin-bottom: 0;
+  @include govuk-typography-weight-bold
+}
+
+.app-mark {
+  background-color: mix(govuk-colour("yellow"), white, 25%);
+}
+
+.app-risk-icon {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  margin: 0;
+  padding: 0;
+
+  &.app-risk-icon--green {
+    background: govuk-colour("light-green");
+  }
+
+  &.app-risk-icon--amber {
+    background: govuk-colour("yellow");
+  }
+
+  &.app-risk-icon--red {
+    background: $govuk-error-colour;
+  }
+}
+
+.app-icon {
+  display: inline-block;
+
+  &.app-icon__prev-arrow {
+    width: 20px;
+    height: 20px;
+    margin-right: 3px;
+    background: url("../images/icon-prev-arrow.gif") no-repeat bottom;
+    background-size: contain;
+  }
+}
+
+.app-search-hint-middle {
+  padding: 25px 50px 0 70px;
+}
+
+.app-search-input {
+  position: relative;
+  height: auto;
+  z-index: 1;
+  //@include govuk-media-query(mobile, tablet) {
+  //  margin-bottom: 0;
+  //}
+}
+
+.app-offender-image {
+  border: 2px solid $govuk-border-colour;
+}
+
+.app-search-hint {
+  background: linear-gradient(90deg, govuk-colour("black") 0%, govuk-colour("black") 75%, white 100%);
+  display: inline-block;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  padding: 1px;
+  position: relative;
+
+  &:before {
+    background: linear-gradient(90deg, govuk-colour("light-grey") 0%, govuk-colour("light-grey") 75%, white 100%);
+    content: attr(data-hint);
+    display: inline-block;
+    padding: 15px 45px 15px 15px;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    right: -20px;
+    width: 50px;
+    height: 52px;
+    background: url("../images/icon-search-help.png") no-repeat top left / 50px 51px;
+    @media only screen and ( min-resolution: 124.8dpi ) {
+      background: url("../images/icon-search-help-2x.png") no-repeat top left / 50px 51px;
+    }
+  }
+}

docker-compose-test.yml

@@ -1,13 +1,5 @@
 version: '3.1'
 services:
-
-  redis:
-    image: 'redis:7.0'
-    networks:
-      - hmpps_int
-    ports:
-      - '6379:6379'
-
   wiremock:
     image: wiremock/wiremock
     networks:

docker-compose.yml

@@ -1,16 +1,5 @@
 version: '3.1'
 services:
-
-  redis:
-    image: 'redis:7.0'
-    networks:
-      - hmpps
-    container_name: redis
-    environment:
-      - ALLOW_EMPTY_PASSWORD=yes
-    ports:
-      - '6379:6379'
-
   hmpps-auth:
     image: quay.io/hmpps/hmpps-auth:latest
     networks:
@@ -28,11 +17,10 @@ services:
     build: .
     networks:
       - hmpps
-    depends_on: [redis]
     ports:
       - "3000:3000"
     environment:
-      - REDIS_HOST=redis
+      - REDIS_ENABLED=false
       - HMPPS_AUTH_EXTERNAL_URL=http://localhost:9090/auth
       - HMPPS_AUTH_URL=http://hmpps-auth:8080/auth
       # These will need to match new creds in the seed auth service auth

feature.env

@@ -2,6 +2,7 @@ PORT=3007
 HMPPS_AUTH_URL=http://localhost:9091/auth
 TOKEN_VERIFICATION_API_URL=http://localhost:9091/verification
 TOKEN_VERIFICATION_ENABLED=true
+REDIS_ENABLED=false
 NODE_ENV=development
 API_CLIENT_ID=clientid
 API_CLIENT_SECRET=clientsecret

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "copy-views": "cp -R server/views dist/server/",
-    "compile-sass": "sass --quiet-deps --no-source-map --load-path=node_modules/govuk-frontend --load-path=node_modules/@ministryofjustice/frontend --load-path=. assets/scss/application.scss:./assets/stylesheets/application.css assets/scss/application-ie8.scss:./assets/stylesheets/application-ie8.css --style compressed",
+    "compile-sass": "sass --quiet-deps --no-source-map --load-path=node_modules/govuk-frontend --load-path=node_modules/@ministryofjustice/frontend --load-path=. assets/scss/application.scss:./assets/stylesheets/application.css assets/scss/application-ie8.scss:./assets/stylesheets/application-ie8.css assets/scss/new-tech.scss:./assets/stylesheets/new-tech.css --style compressed",
     "watch-ts": "tsc -w",
     "watch-views": "nodemon --watch server/views -e html,njk -x npm run copy-views",
     "watch-node": "DEBUG=gov-starter-server* nodemon -r dotenv/config --watch dist/ dist/server.js | bunyan -o short",
@@ -79,7 +79,10 @@
       "integration_tests/*"
     ],
     "delay": 2500,
-    "ext": "js,json,html,njk"
+    "ext": "js,json,html,njk",
+    "env": {
+      "LIVE_RELOAD": "true"
+    }
   },
   "lint-staged": {
     "*.{ts,js,css}": [