.drone-docker.yml

@@ -8,76 +8,112 @@ concurrency:
 trigger:
   event:
     - push
-  branch:
-    - master
-    - main
-    - development
 
 steps:
-- name: replace hosts and user variables
+  - name: replace hosts and user variables
-  image: ubuntu:impish
+    image: ubuntu:impish
-  environment:
+    environment:
-    DEPLOY_HOSTNAME:
+      SPT_ITEMS_HOSTNAME:
-      from_secret: deploy_hostname
+        from_secret: spt_items_hostname
-    SPT_ITEMS_HOSTNAME:
+      DEPLOY_HOSTNAME:
-      from_secret: spt_items_hostname
+        from_secret: deploy_hostname
-    DEPLOY_USER:
+      DEPLOY_USER:
-      from_secret: deploy_username
+        from_secret: deploy_username
-    DEPLOY_SSH_KEY_PASSPHRASE:
+      DEPLOY_PRIVATE_KEY:
-      from_secret: deploy_ssh_key_passphrase
+        from_secret: deploy_ssh_key
-    DEPLOY_PRIVATE_KEY:
+      DEPLOY_SSH_KEY_PASSPHRASE:
-      from_secret: deploy_ssh_key
+        from_secret: deploy_ssh_key_passphrase
-  commands:
+    commands:
-    - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
+      - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
-    - mv ./items/frontend/.env.example ./items/frontend/.env
+      - mv ./items/frontend/.env.example ./items/frontend/.env
-    - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key
+      - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key
-    - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory
-    - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
-    - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
 
-- name: build frontend
+  - name: install frontend dependencies
-  image: node:lts-alpine3.14
+    image: node:lts-alpine3.14
-  commands:
+    commands:
-    - node -v
+      - node -v
-    - npm -v
+      - npm -v
-    - yarn --version
+      - yarn --version
-    - yarn --cwd ./items/frontend install
+      - yarn --cwd ./items/frontend install
-    - yarn --cwd ./items/frontend build --pure-lockfile
+    depends_on:
-    - rm -rf ./items/api/public/static/*
+      - replace hosts and user variables
-    - mv ./items/frontend/build/* ./items/api/public
-    - rm ./items/api/public/index.html
 
-- name: check ansible syntax
+  - name: frontend
-  image: plugins/ansible:3
+    image: node:lts-alpine3.14
-  settings:
+    commands:
-    playbook: ./.ansible-items/playbook.yml
+      - node -v
-    inventory: ./.ansible-items/inventory
+      - npm -v
-    galaxy: ./.ansible-items/requirements.yml
+      - yarn --version
-    syntax_check: true
+      - yarn --cwd ./items/frontend start
-  when:
+    detach: true
-    branch:
+    depends_on:
-      - development
+      - install frontend dependencies
 
-- name: apply ansible playbook
+  - name: test frontend
-  image: plugins/ansible:3
+    image: cypress/browsers:node16.5.0-chrome94-ff93
-  settings:
+    commands:
-    playbook: ./.ansible-items/playbook.yml
+      - node -v
-    inventory: ./.ansible-items/inventory
+      - npm -v
-    galaxy: ./.ansible-items/requirements.yml
+      - yarn --version
-    timeout: 60
+      - yarn --cwd ./items/frontend cy:run
-    verbose: 2
+    depends_on:
-  environment:
+      - install frontend dependencies
-    DEPLOY_HOSTNAME:
+
-      from_secret: deploy_hostname
+  - name: build frontend
-    SPT_ITEMS_HOSTNAME:
+    image: node:lts-alpine3.14
-      from_secret: spt_items_hostname
+    commands:
-    DEPLOY_USER:
+      - node -v
-      from_secret: deploy_username
+      - npm -v
-    DEPLOY_USER_GROUP:
+      - yarn --version
-      from_secret: deploy_user_group
+      - yarn --cwd ./items/frontend build --pure-lockfile
-    SPT_ITEMS_PATH:
+      - rm -rf ./items/api/public/static/*
-      from_secret: deploy_path
+      - mv ./items/frontend/build/* ./items/api/public
-  when:
+      - rm ./items/api/public/index.html
-    branch:
+    depends_on:
-      - master
+      - test frontend
-      - main
+    when:
+      branch:
+        - main
+        - master
+        - development
+
+  - name: check ansible syntax
+    image: plugins/ansible:3
+    settings:
+      playbook: ./.ansible-items/playbook.yml
+      inventory: ./.ansible-items/inventory
+      galaxy: ./.ansible-items/requirements.yml
+      syntax_check: true
+    when:
+      branch:
+        - development
+
+  - name: apply ansible playbook
+    image: plugins/ansible:3
+    settings:
+      playbook: ./.ansible-items/playbook.yml
+      inventory: ./.ansible-items/inventory
+      galaxy: ./.ansible-items/requirements.yml
+      timeout: 60
+      verbose: 2
+    environment:
+      SPT_ITEMS_HOSTNAME:
+        from_secret: spt_items_hostname
+      DEPLOY_HOSTNAME:
+        from_secret: deploy_hostname
+      DEPLOY_USER:
+        from_secret: deploy_username
+      DEPLOY_USER_GROUP:
+        from_secret: deploy_user_group
+      SPT_ITEMS_PATH:
+        from_secret: deploy_path
+    depends_on:
+      - check ansible syntax
+      - build frontend
+    when:
+      branch:
+        - master
+        - main

.drone-kubernetes.yml

@@ -8,76 +8,112 @@ concurrency:
 trigger:
   event:
     - push
-  branch:
-    - master
-    - main
-    - development
 
 steps:
-- name: replace hosts and user variables
+  - name: replace hosts and user variables
-  image: ubuntu:impish
+    image: ubuntu:impish
-  environment:
+    environment:
-    SPT_ITEMS_HOSTNAME:
+      SPT_ITEMS_HOSTNAME:
-      from_secret: spt_items_hostname
+        from_secret: spt_items_hostname
-    DEPLOY_HOSTNAME:
+      DEPLOY_HOSTNAME:
-      from_secret: deploy_hostname
+        from_secret: deploy_hostname
-    DEPLOY_USER:
+      DEPLOY_USER:
-      from_secret: deploy_username
+        from_secret: deploy_username
-    DEPLOY_PRIVATE_KEY:
+      DEPLOY_PRIVATE_KEY:
-      from_secret: deploy_ssh_key
+        from_secret: deploy_ssh_key
-    DEPLOY_SSH_KEY_PASSPHRASE:
+      DEPLOY_SSH_KEY_PASSPHRASE:
-      from_secret: deploy_ssh_key_passphrase
+        from_secret: deploy_ssh_key_passphrase
-  commands:
+    commands:
-    - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
+      - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
-    - mv ./items/frontend/.env.example ./items/frontend/.env
+      - mv ./items/frontend/.env.example ./items/frontend/.env
-    - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key
+      - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key
-    - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory
-    - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory
-    - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
+      - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory
 
-- name: build frontend
+  - name: install frontend dependencies
-  image: node:lts-alpine3.14
+    image: node:lts-alpine3.14
-  commands:
+    commands:
-    - node -v
+      - node -v
-    - npm -v
+      - npm -v
-    - yarn --version
+      - yarn --version
-    - yarn --cwd ./items/frontend install
+      - yarn --cwd ./items/frontend install
-    - yarn --cwd ./items/frontend build --pure-lockfile
+    depends_on:
-    - rm -rf ./items/api/public/static/*
+      - replace hosts and user variables
-    - mv ./items/frontend/build/* ./items/api/public
-    - rm ./items/api/public/index.html
 
-- name: check ansible syntax
+  - name: frontend
-  image: plugins/ansible:3
+    image: node:lts-alpine3.14
-  settings:
+    commands:
-    playbook: ./.ansible-items/playbook.yml
+      - node -v
-    inventory: ./.ansible-items/inventory
+      - npm -v
-    galaxy: ./.ansible-items/requirements.yml
+      - yarn --version
-    syntax_check: true
+      - yarn --cwd ./items/frontend start
-  when:
+    detach: true
-    branch:
+    depends_on:
-      - development
+      - install frontend dependencies
 
-- name: apply ansible playbook
+  - name: test frontend
-  image: plugins/ansible:3
+    image: cypress/browsers:node16.5.0-chrome94-ff93
-  settings:
+    commands:
-    playbook: ./.ansible-items/playbook.yml
+      - node -v
-    inventory: ./.ansible-items/inventory
+      - npm -v
-    galaxy: ./.ansible-items/requirements.yml
+      - yarn --version
-    timeout: 60
+      - yarn --cwd ./items/frontend cy:run
-    verbose: 2
+    depends_on:
-  environment:
+      - install frontend dependencies
-    SPT_ITEMS_HOSTNAME:
+
-      from_secret: spt_items_hostname
+  - name: build frontend
-    DEPLOY_HOSTNAME:
+    image: node:lts-alpine3.14
-      from_secret: deploy_hostname
+    commands:
-    DEPLOY_USER:
+      - node -v
-      from_secret: deploy_username
+      - npm -v
-    DEPLOY_USER_GROUP:
+      - yarn --version
-      from_secret: deploy_user_group
+      - yarn --cwd ./items/frontend build --pure-lockfile
-    SPT_ITEMS_PATH:
+      - rm -rf ./items/api/public/static/*
-      from_secret: deploy_path
+      - mv ./items/frontend/build/* ./items/api/public
-  when:
+      - rm ./items/api/public/index.html
-    branch:
+    depends_on:
-      - master
+      - test frontend
-      - main
+    when:
+      branch:
+        - main
+        - master
+        - development
+
+  - name: check ansible syntax
+    image: plugins/ansible:3
+    settings:
+      playbook: ./.ansible-items/playbook.yml
+      inventory: ./.ansible-items/inventory
+      galaxy: ./.ansible-items/requirements.yml
+      syntax_check: true
+    when:
+      branch:
+        - development
+
+  - name: apply ansible playbook
+    image: plugins/ansible:3
+    settings:
+      playbook: ./.ansible-items/playbook.yml
+      inventory: ./.ansible-items/inventory
+      galaxy: ./.ansible-items/requirements.yml
+      timeout: 60
+      verbose: 2
+    environment:
+      SPT_ITEMS_HOSTNAME:
+        from_secret: spt_items_hostname
+      DEPLOY_HOSTNAME:
+        from_secret: deploy_hostname
+      DEPLOY_USER:
+        from_secret: deploy_username
+      DEPLOY_USER_GROUP:
+        from_secret: deploy_user_group
+      SPT_ITEMS_PATH:
+        from_secret: deploy_path
+    depends_on:
+      - check ansible syntax
+      - build frontend
+    when:
+      branch:
+        - master
+        - main

items/README.md

@@ -32,9 +32,12 @@
 
 ## The pipeline summary
 1. Each push will:
-    1. Builds the frontend
+    1. Test the frontend
-    1. Move the build frontend in the backend `public` folder
+    2. IF on `development` or `master`/`main` branch
-1. IF Promoted to production, deploys to the server
+       1. Builds the frontend
+    3. IF pushed from `master` or `main` main branch
+       1. Move the build frontend in the backend `public` folder
+       2. Deploys to the server
 
 ## The pipeline walkthrough
 see [Walkthrough.md](./docs/Walkthrough.md)

items/docs/Walkthrough.md

@@ -6,8 +6,10 @@
 * [Pipeline concurrency](#pipeline-concurrency)
 * [Triggers](#triggers)
 * [Steps](#steps)
-    * [Fetch and update submodules](#Fetch-and-update-submodules)
     * [Replace hosts and user variables](#replace-hosts-and-user-variables)
+    * [Install frontend dependencies](#install-frontend-dependencies)
+    * [Run the frontend](#run-the-frontend)
+    * [Test frontend](#test-frontend)
     * [Build frontend](#build-frontend)
     * [Check ansible syntax](#check-ansible-syntax)
     * [Apply ansible playbook](#apply-ansible-playbook)
@@ -16,8 +18,8 @@
         * [Copy the project](#copy-the-project)
         * [Copy PHP env file](#copy-php-env-file)
         * [Get JavaScript chunks name](#get-javascript-chunks-name)
-        * [Get file names from find output](#get-file-from-find-output)
+        * [Get file names from find output](#get-file-names-from-find-output)
-        * [Copy app.blade.php file](#copy-app-blade-php-file)
+        * [Copy app.blade.php file](#copy-appbladephp-file)
         * [Download and install composer dependencies](#download-and-install-composer-dependencies)
 
 ## Overview
@@ -25,10 +27,10 @@
     * the backend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [api](../api) that points towards [https://dev.sp-tarkov.com/Rev/spt-items-api.git](https://dev.sp-tarkov.com/Rev/spt-items-api.git)
     * the frontend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [frontend](../frontend) that points towards [https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git](https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git)
 * There are two Ansible pipelines
-    * A docker pipeline [drone-docker.yml](../drone-docker.yml)
+    * A docker pipeline [drone-docker.yml](../../.drone-docker.yml)
-    * A kubernetes pipeline [drone-kubernetes.yml](../drone-kubernetes.yml)
+    * A kubernetes pipeline [drone-kubernetes.yml](../../.drone-kubernetes.yml)
-* All ansible playbook files are located in [.ansible](../.ansible)
+* All ansible playbook files are located in [.ansible](../../.ansible-items)
-* The documentation is located in [documentation](../documentation)
+* The documentation is located in [documentation](../docs)
 
 ## Pipeline definition
 ```yml
@@ -50,12 +52,8 @@ The pipeline is set to only one build at a time (every subsequent build with be
 trigger:
   event:
     - push
-  branch:
-    - master
-    - main
-    - development
 ```
-The pipeline is run on every push only on branches `master`, `main` and `development`. We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`.
+The pipeline is run on every push We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`.
 ## Steps
 ### Replace hosts and user variables
 ```yml
@@ -90,6 +88,48 @@ The following environment variables are injected using Drone secrets:
 Using `sed` makes temporary changes in the container/pod instead of commiting secrets in the repo in plain text. \
 The changes are never pushed and are discarded when the container/pod is terminated.
 
+### Install frontend dependencies
+```yml
+- name: install frontend dependencies
+  image: node:lts-alpine3.14
+  commands:
+    - node -v
+    - npm -v
+    - yarn --version
+    - yarn --cwd ./items/frontend install
+  depends_on:
+    - replace hosts and user variables
+```
+
+### Run the frontend
+```yaml
+- name: frontend
+  image: node:lts-alpine3.14
+  commands:
+    - node -v
+    - npm -v
+    - yarn --version
+    - yarn --cwd ./items/frontend start
+  detach: true
+  depends_on:
+    - install frontend dependencies
+```
+The frontend is run and `detach` is specified so the End-to-End tests (using cypress) can run on it
+
+### Test frontend
+```yaml
+- name: test frontend
+  image: cypress/browsers:node16.5.0-chrome94-ff93
+  commands:
+    - node -v
+    - npm -v
+    - yarn --version
+    - yarn --cwd ./items/frontend cy:run
+  depends_on:
+    - install frontend dependencies
+```
+Run frontend tests using Cypress
+
 ### Build frontend
 ```yml
 - name: build frontend
@@ -98,7 +138,6 @@ The changes are never pushed and are discarded when the container/pod is termina
     - node -v
     - npm -v
     - yarn --version
-    - yarn --cwd ./items/frontend install
     - yarn --cwd ./items/frontend build --pure-lockfile
     - rm -rf ./items/api/public/static/*
     - mv ./items/frontend/build/* ./items/api/public
@@ -122,7 +161,7 @@ Notes:
     syntax_check: true
 ```
 Executed on every push. \
-Check the Ansible syntax in [playbook.yml](../.ansible/playbook.yml), [inventory](../.ansible/inventory) and [requirements.yml](../.ansible/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
+Check the Ansible syntax in [playbook.yml](../../.ansible-items/playbook.yml), [inventory](../../.ansible-items/inventory) and [requirements.yml](../../.ansible-items/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
 
 ### Apply ansible playbook
 ```yml
@@ -164,7 +203,7 @@ The following environment variables are injected using Drone secrets:
 ```yml
 hosts: sptarkov
 ```
-Uses the host defined in [inventory](../.ansible/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point.
+Uses the host defined in [inventory](../../.ansible-items/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point.
 
 #### Delete old spt-items-api
 ```yml
@@ -192,7 +231,7 @@ Copies the whole project (frontend and backend) from the [api](../api) folder in
     src: ./templates/.php-env.j2
     dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/.env"
 ```
-Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../.ansible/templates/.php_env.j2). \
+Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../../.ansible-items/templates/.php-env.j2). \
 `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) \
 `SPT_ITEMS_HOSTNAME` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook))
 
@@ -203,7 +242,7 @@ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [temp
     cmd: find "{{ lookup('env', 'SPT_ITEMS_PATH') }}" -type f -name "*chunk.js" -printf "%f\n"
   register: find_output
 ```
-Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template. \
+Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template. \
 `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook))
 
 #### Get file names from find output
@@ -212,7 +251,7 @@ Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansi
   set_fact:
     chunk_list: "{{ find_output['stdout'].split('\n') }}"
 ```
-Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template.
+Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template.
 
 #### Copy app.blade.php file
 ```yml
@@ -221,7 +260,7 @@ Splits the string containing the list of all JavaScript chunk files for the [app
     src: ./templates/app.blade.php.j2
     dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/resources/views/app.blade.php"
 ```
-Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../.ansible/templates/app.blade.php.j2). \
+Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../../.ansible-items/templates/app.blade.php.j2). \
 `SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)).
 
 #### Download and install composer dependencies

items/frontend/cypress.json

@@ -1,5 +1,6 @@
 {
     "baseUrl": "http://localhost:3000",
+    "video": false,
     "integrationFolder": "src/cypress/integration",
     "fixtureFolder": "src/cypress/fixtures",
     "supportFile": "src/cypress/support/index.js",

items/frontend/cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

items/frontend/package.json

@@ -13,8 +13,10 @@
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
         "cross-env": "^7.0.3",
-        "cypress": "^8.6.0",
+        "cypress": "9.0.0",
-        "start-server-and-test": "^1.14.0"
+        "start-server-and-test": "^1.14.0",
+        "typescript": "^4.1.2",
+        "wait-on": "^6.0.0"
     },
     "dependencies": {
         "@emotion/react": "^11.4.1",
@@ -22,11 +24,12 @@
         "@mui/icons-material": "^5.0.3",
         "@mui/material": "^5.0.3",
         "@mui/styles": "^5.0.1",
+        "history": "5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-json-view": "^1.21.3",
+        "react-router-dom": "6",
         "react-scripts": "4.0.3",
-        "typescript": "^4.1.2",
         "web-vitals": "^1.0.1",
         "zustand": "^3.5.13"
     },
@@ -36,8 +39,11 @@
         "test:jest": "react-scripts test",
         "cy:start:app": "cross-env BROWSER=none react-scripts -r @cypress/instrument-cra start",
         "cy:start:wait": "start-server-and-test cy:start:app http://localhost:3000",
+        "cy:install": "cypress install",
+        "cy:verify": "cypress verify",
+        "cy:run:ci": "cross-env CYPRESS_BASE_URL=http://frontend:3000 cypress run --browser chrome",
         "cy:open": "yarn run cy:start:wait -- \"cypress open\"",
-        "cy:run": "yarn run cy:start:wait -- \"cypress run\"",
+        "cy:run": "yarn run wait-on http-get://frontend:3000 && yarn run cy:install && yarn run cy:verify && yarn run cy:run:ci",
         "eject": "react-scripts eject"
     },
     "eslintConfig": {
@@ -59,8 +65,13 @@
         ]
     },
     "nyc": {
-        "include":["src/**/*.ts", "src/**/*.tsx"],
+        "include": [
-        "exclude": ["src/reportWebVitals.ts"],
+            "src/**/*.ts",
+            "src/**/*.tsx"
+        ],
+        "exclude": [
+            "src/reportWebVitals.ts"
+        ],
         "excludeAfterRemap": true
     }
 }

items/frontend/src/components/Footer.tsx

@@ -1,23 +1,23 @@
-import { Box, Theme, Typography } from '@mui/material'
+import {Box, Typography} from '@mui/material'
-import { makeStyles } from '@mui/styles'
+import {makeStyles} from '@mui/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
-  footerHolder: {
+    footerHolder: {
-    display: 'flex',
+        display: 'flex',
-    flex: '0 1 3vh',
+        flex: '0 1 3vh',
-    flexDirection: 'row',
+        flexDirection: 'row',
-    alignItems: 'center',
+        alignItems: 'center',
-    justifyContent: 'center',
+        justifyContent: 'center',
-    padding: '0 10vw 0 10vw'
+        padding: '0 10vw 0 10vw'
-  }
+    }
 }))
 
 export const Footer = () => {
-  const classes = useStyles()
+    const classes = useStyles()
 
-  return (
+    return (
-    <Box className={classes.footerHolder}>
+        <Box className={classes.footerHolder}>
-      <Typography>SPT-Aki ©2021 Created by Rev and Shirito</Typography>
+            <Typography id={"footer"}>SPT-Aki ©2021 Created by Rev and Shirito</Typography>
-    </Box>
+        </Box>
-  )
+    )
 }

items/frontend/src/cypress/fixtures/condensed_milk.json

@@ -0,0 +1,84 @@
+{
+  "item": {
+    "_id": "5734773724597737fd047c14",
+    "_name": "condensed_milk",
+    "_parent": "5448e8d04bdc2ddf718b4569",
+    "_props": {
+      "AllowSpawnOnLocations": [],
+      "AnimationVariantsNumber": 0,
+      "BackgroundColor": "orange",
+      "CanRequireOnRagfair": true,
+      "CanSellOnRagfair": true,
+      "ChangePriceCoef": 1,
+      "ConflictingItems": [],
+      "CreditsPrice": 24943,
+      "Description": "Condensed milk",
+      "DiscardingBlock": false,
+      "ExamineExperience": 20,
+      "ExamineTime": 1,
+      "ExaminedByDefault": false,
+      "ExtraSizeDown": 0,
+      "ExtraSizeForceAdd": false,
+      "ExtraSizeLeft": 0,
+      "ExtraSizeRight": 0,
+      "ExtraSizeUp": 0,
+      "FixedPrice": false,
+      "Height": 1,
+      "HideEntrails": false,
+      "IsAlwaysAvailableForInsurance": false,
+      "IsLockedafterEquip": false,
+      "IsUnbuyable": false,
+      "IsUndiscardable": false,
+      "IsUngivable": false,
+      "IsUnsaleable": false,
+      "ItemSound": "food_tin_can",
+      "LootExperience": 50,
+      "MaxResource": 1,
+      "MergesWithChildren": false,
+      "Name": "Condensed milk",
+      "NotShownInSlot": false,
+      "Prefab": {
+        "path": "assets/content/weapons/usable_items/item_food_condensed_milk/item_food_condensed_milk_loot.bundle",
+        "rcid": ""
+      },
+      "QuestItem": false,
+      "RagFairCommissionModifier": 1,
+      "Rarity": "Rare",
+      "RepairCost": 0,
+      "RepairSpeed": 0,
+      "SendToClient": false,
+      "ShortName": "Condensed milk",
+      "SpawnChance": 9,
+      "StackMaxSize": 1,
+      "StackObjectsCount": 1,
+      "StimulatorBuffs": "Buffs_food_condensed_milk",
+      "Unlootable": false,
+      "UnlootableFromSide": [],
+      "UnlootableFromSlot": "FirstPrimaryWeapon",
+      "UsePrefab": {
+        "path": "assets/content/weapons/usable_items/item_food_condensed_milk/item_food_condensed_milk_container.bundle",
+        "rcid": ""
+      },
+      "Weight": 0.4,
+      "Width": 1,
+      "effects_damage": [],
+      "effects_health": {
+        "Energy": {
+          "value": 75
+        },
+        "Hydration": {
+          "value": -65
+        }
+      },
+      "foodEffectType": "afterUse",
+      "foodUseTime": 4
+    },
+    "_proto": "5734770f24597738025ee254",
+    "_type": "Item"
+  },
+  "locale": {
+    "Description": "Condensed milk, also called \"Sguschyonka\" in Russia, once was a part of field ration for the Union soldiers in Civil War, but later reached unprecedented popularity in post-Soviet countries, becoming almost a staple product. Canned, it can be stored for decades and remain just as sweet, tasty and nutritious.",
+    "Name": "Condensed milk",
+    "ShortName": "Cond. milk"
+  }
+}

items/frontend/src/cypress/integration/footer.spec.tsx

@@ -4,7 +4,7 @@ describe('Footer', () => {
     it('footer should be visible', () => {
         cy.visit('/');
 
-        cy.get('.makeStyles-footerHolder-63 > .MuiTypography-root').should('be.visible')
+        cy.get('#footer').should('be.visible')
-        cy.get('.makeStyles-footerHolder-63 > .MuiTypography-root').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
+        cy.get('#footer').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
     })
 })

items/frontend/src/cypress/integration/search.spec.tsx

@@ -1,11 +1,32 @@
+import condensedMilk from "../fixtures/condensed_milk.json";
+
 export {};
 
 describe('Search area', ()=>{
     beforeEach(() => {
-        cy.intercept('GET','**/api/locales', {
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/locales'
+        }, {
             statusCode: 200,
             body: ['locale1', 'locale2']
-        });
+        }).as('getLocalesWithoutData');
+
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/item?*'
+        }, {
+            statusCode: 200,
+            body: condensedMilk
+        })
+
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/item/hierarchy*'
+        }, {
+            statusCode: 200,
+            body: condensedMilk
+        })
 
         cy.visit('/');
     })
@@ -31,4 +52,19 @@ describe('Search area', ()=>{
             .should('be.visible')
             .contains('p', 'No data to display');
     })
+
+    describe('Searching', () => {
+        it('Search using ID displays the json with locale', () => {
+            cy.get('#search-autocomplete')
+                .type(condensedMilk.item._id)
+                .type('{ENTER}')
+                .should('have.value', condensedMilk.locale.Name)
+            cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.item._id}")`)
+                .should('have.length', 1)
+                .invoke('text')
+                .should('eq', `"${condensedMilk.item._id}"`);
+            cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.locale.Name}")`)
+                .should('have.length.above', 0);
+        })
+    })
 })

items/frontend/src/cypress/integration/url-check.spec.tsx

@@ -0,0 +1,73 @@
+export {};
+
+import condensedMilk from '../fixtures/condensed_milk.json'
+
+describe('Url check', () => {
+    beforeEach(() => {
+        cy.window()
+            .its("sessionStorage")
+            .invoke("removeItem", "items.sp-tarkov.com-locales");
+
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/locales'
+        }, {
+            statusCode: 200,
+            body: []
+        }).as('getLocalesWithoutData');
+
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/item?*'
+        }, {
+            statusCode: 200,
+            body: condensedMilk
+        })
+
+        cy.intercept({
+            method: 'GET',
+            url: '**/api/item/hierarchy*'
+        }, {
+            statusCode: 200,
+            body: condensedMilk
+        })
+    })
+
+    afterEach(() => {
+        cy.clearLocalStorage();
+    })
+
+    describe('Check page not found', () => {
+        it('Invalid url should redirect to page not found', () => {
+            cy.visit('/ABC')
+            cy.get('#not-found-message').contains("This page does not exist !");
+        })
+    })
+
+    describe('Check root redirection', () => {
+        it('Root should redirect to search', () => {
+            cy.visit('/')
+            cy.url().should("include", "/search");
+        })
+    })
+
+    describe('Check url changes with search input', () => {
+        it('ID in url applies search', () => {
+            cy.visit(`/search/${condensedMilk.item._id}`);
+            cy.get('#search-autocomplete').should('have.value', condensedMilk.locale.Name)
+        })
+
+        it('Search reflects in url', () => {
+            cy.visit(`/`);
+            cy.get('#search-autocomplete')
+                .type(condensedMilk.item._id)
+                .type('{ENTER}')
+                .should('have.value', condensedMilk.locale.Name);
+            cy.url().should("include", `/search/${condensedMilk.item._id}`);
+            cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.item._id}")`)
+                .should('have.length', 1)
+                .invoke('text')
+                .should('eq', `"${condensedMilk.item._id}"`);
+        })
+    })
+})

items/frontend/src/index.tsx

@@ -4,10 +4,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+    <React.StrictMode>
-    <App />
+        <App/>
-  </React.StrictMode>,
+    </React.StrictMode>,
-  document.getElementById('root')
+    document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function

items/frontend/src/pages/InteractiveArea.tsx

@@ -0,0 +1,26 @@
+import {Box} from '@mui/material'
+import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
+import {SearchArea} from './mainPageComponents/SearchArea'
+import {makeStyles} from "@mui/styles";
+import React from "react";
+
+const useStyles = makeStyles(() => ({
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        padding: '2vh 2vw 1vh 2vw'
+    }
+}))
+
+export const InteractiveArea = () => {
+    const classes = useStyles();
+    return (
+        <>
+            <NavigationBreadcrumb/>
+            <Box className={classes.searchContainer}>
+                <SearchArea/>
+            </Box>
+        </>
+    )
+}

items/frontend/src/pages/MainPage.tsx

@@ -1,11 +1,13 @@
-import {Box, Theme} from '@mui/material'
+import {Box} from '@mui/material'
 import {Footer} from '../components/Footer'
 import {Header} from '../components/Header'
-import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
-import {SearchArea} from './mainPageComponents/SearchArea'
 import {makeStyles} from "@mui/styles";
+import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
+import React from "react";
+import {InteractiveArea} from "./InteractiveArea";
+import {PageNotFound} from "./PageNotFound";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
     container: {
         background: 'background.default',
         display: 'flex',
@@ -13,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) => ({
         flexGrow: 1,
         height: '100vh',
         maxheight: '100vh',
-    },
-    searchContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexGrow: 1,
-        padding: '2vh 2vw 1vh 2vw'
     }
 }))
 
@@ -28,10 +24,15 @@ export const MainPage = () => {
         <>
             <Box className={classes.container}>
                 <Header/>
-                <NavigationBreadcrumb/>
+                <BrowserRouter>
-                <Box className={classes.searchContainer}>
+                    <Routes>
-                    <SearchArea/>
+                        <Route path="/search" element={<InteractiveArea/>}>
-                </Box>
+                            <Route path=":id" element={<InteractiveArea/>}/>
+                        </Route>
+                        <Route path="/" element={<Navigate replace to="/search"/>}/>
+                        <Route path="*" element={<PageNotFound/>}/>
+                    </Routes>
+                </BrowserRouter>
                 <Footer/>
             </Box>
         </>

items/frontend/src/pages/PageNotFound.tsx

@@ -0,0 +1,44 @@
+import {Box, Theme, Typography} from '@mui/material'
+import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
+import {makeStyles} from "@mui/styles";
+import React from "react";
+
+const useStyles = makeStyles((theme: Theme) => ({
+    searchContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        padding: '2vh 2vw 1vh 2vw'
+    },
+    notFoundAreaHolder: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        background: theme.palette.background.paper,
+        padding: '2vh 2vw 2vh 2vw',
+    },
+    notFoundContainer: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        width: "100%",
+        alignItems: "center",
+        paddingTop: "10vh"
+    },
+}))
+
+export const PageNotFound = () => {
+    const classes = useStyles();
+    return (
+        <>
+            <NavigationBreadcrumb/>
+            <Box className={classes.searchContainer}>
+                <Box className={classes.notFoundAreaHolder}>
+                    <Box className={classes.notFoundContainer}>
+                        <Typography id={'not-found-message'} variant={"h3"}>This page does not exist !</Typography>
+                    </Box>
+                </Box>
+            </Box>
+        </>
+    )
+}

items/frontend/src/pages/mainPageComponents/SearchArea.tsx

@@ -1,195 +1,202 @@
-import { SyntheticEvent, useCallback, useEffect, useState } from 'react'
+import {SyntheticEvent, useCallback, useEffect, useState} from 'react'
-import {
+import {Autocomplete, Box, CircularProgress, Theme, Typography,} from '@mui/material'
-  Autocomplete,
+import {makeStyles} from '@mui/styles'
-  Box,
-  CircularProgress,
-  Theme,
-  Typography,
-} from '@mui/material'
-import { makeStyles } from '@mui/styles'
 import TextField from '@mui/material/TextField'
 import ReactJson from 'react-json-view'
-import {
+import {getItem, getItemHierarchy, searchItem,} from '../../dataaccess/ItemBackend'
-  getItem,
+import {ItemOption} from '../../dto/ItemOption'
-  getItemHierarchy,
+import {useGlobalState} from '../../state/GlobalState'
-  searchItem,
+import {useNavigate, useParams} from "react-router-dom";
-} from '../../dataaccess/ItemBackend'
-import { ItemOption } from '../../dto/ItemOption'
-import { useGlobalState } from '../../state/GlobalState'
 
 interface IItemOption {
-  id?: string
+    id?: string
-  name?: string
+    name?: string
-  shortName?: string
+    shortName?: string
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
-  searchAreaHolder: {
+    searchAreaHolder: {
-    display: 'flex',
+        display: 'flex',
-    flexGrow: 1,
+        flexGrow: 1,
-    flexDirection: 'column',
+        flexDirection: 'column',
-    background: theme.palette.background.paper,
+        background: theme.palette.background.paper,
-    padding: '2vh 2vw 2vh 2vw',
+        padding: '2vh 2vw 2vh 2vw',
-  },
+    },
-  jsonHolder: {
+    jsonHolder: {
-    display: 'flex',
+        display: 'flex',
-    flexGrow: 1,
+        flexGrow: 1,
-    alignItems: 'center',
+        alignItems: 'center',
-    flexDirection: 'column',
+        flexDirection: 'column',
-    background: theme.palette.background.paper,
+        background: theme.palette.background.paper,
-    maxHeight: '80vh',
+        maxHeight: '80vh',
-  },
+    },
-  autocomplete: {},
+    autocomplete: {},
 }))
 
 export const SearchArea = () => {
-  const classes = useStyles()
+    const classes = useStyles()
-  const preferedLocale = useGlobalState((state) => state.preferedLocale)
+    const params = useParams();
-  const preferedJsonViewerTheme = useGlobalState(
+    const navigate = useNavigate();
-    useCallback((state) => state.preferedJsonViewerTheme, []),
+    const preferedLocale = useGlobalState((state) => state.preferedLocale)
-  )
+    const preferedJsonViewerTheme = useGlobalState(
-  const [searchInputState, setSearchInput] = useGlobalState((state) => [
+        useCallback((state) => state.preferedJsonViewerTheme, []),
-    state.searchInput,
-    state.setSearchInput,
-  ])
-  const [setHierarchy, initHierarchy] = useGlobalState((state) => [state.setHierarchy, state.initHierarchy])
-  const [selectedItem, setSelectedItem] = useGlobalState((state) => [
-    state.selectedItem,
-    state.setSelectedItem,
-  ])
-  const [selectOptions, setSelecteOptions] = useState<ItemOption[]>([])
-  const [isbusy, setIsBusy] = useState<boolean>(false)
-  const searchThreshold = 3
-
-  const handleNameInput = async (input: string) => {
-    const searchResults = await searchItem(input, preferedLocale)
-    const options = searchResults?.map((res) => ({
-      id: res.item._id,
-      name: res.locale.Name ? res.locale.Name : res.item._name,
-      shortName: JSON.stringify(res.locale.ShortName)
-    }))
-    setSelecteOptions(options ? options : [])
-  }
-
-  const handleIDInput = useCallback(async (input: string) => {
-    const itemJson = await getItem(input, preferedLocale)
-    if (!itemJson) {
-      setSelectedItem(undefined)
-      setSearchInput('')
-      return;
-    }
-
-    setSelectedItem(itemJson)
-    const itemObj = {
-      id: itemJson.item._id,
-      name: itemJson.locale.Name ? itemJson.locale.Name : itemJson.item._name,
-      shortName: itemJson.locale.ShortName
-    }
-    setSelecteOptions([itemObj])
-    setSearchInput(itemObj.name)
-
-    // Update hierachy
-    const itemHierarchy = await getItemHierarchy(
-      itemJson.item,
-      preferedLocale,
     )
-    setHierarchy(itemHierarchy ? itemHierarchy : {})
+    const [searchInputState, setSearchInput] = useGlobalState((state) => [
-    // eslint-disable-next-line
+        state.searchInput,
-  }, []) // Need to only be created on startup
+        state.setSearchInput,
+    ])
+    const [setHierarchy, initHierarchy] = useGlobalState((state) => [state.setHierarchy, state.initHierarchy])
+    const [selectedItem, setSelectedItem] = useGlobalState((state) => [
+        state.selectedItem,
+        state.setSelectedItem,
+    ])
+    const [selectOptions, setSelecteOptions] = useState<ItemOption[]>([])
+    const [isbusy, setIsBusy] = useState<boolean>(false)
+    const searchThreshold = 3
 
-  useEffect(() => initHierarchy(), [initHierarchy])
+    const handleNameInput = useCallback(async (input: string) => {
+        const searchResults = await searchItem(input, preferedLocale)
+        const options = searchResults?.map((res) => ({
+            id: res.item._id,
+            name: res.locale.Name ? res.locale.Name : res.item._name,
+            shortName: JSON.stringify(res.locale.ShortName)
+        }))
+        setSelecteOptions(options ? options : [])
+    }, [preferedLocale])
 
-  useEffect(() => {
+    const handleIDInput = useCallback(async (input: string) => {
-    if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
+        const itemJson = await getItem(input, preferedLocale)
-      handleIDInput(searchInputState)
+        if (!itemJson) {
-    }
+            setSelectedItem(undefined)
-  }, [handleIDInput, searchInputState])
+            setSearchInput('')
+            return;
+        }
 
-  const handleInput = async (input: string) => {
+        setSelectedItem(itemJson)
-    if (!input || input.length < searchThreshold || isbusy) {
+        const itemObj = {
-      setSelectedItem(undefined)
+            id: itemJson.item._id,
-      setSelecteOptions([])
+            name: itemJson.locale.Name ? itemJson.locale.Name : itemJson.item._name,
-      setIsBusy(false)
+            shortName: itemJson.locale.ShortName
-      return
+        }
-    }
+        setSelecteOptions([itemObj])
-    setIsBusy(true)
+        setSearchInput(itemObj.name)
 
-    if (input.match(/([a-z0-9]{24})/)) await handleIDInput(input)
+        // Update hierachy
-    else await handleNameInput(input)
+        const itemHierarchy = await getItemHierarchy(
+            itemJson.item,
+            preferedLocale,
+        )
+        setHierarchy(itemHierarchy ? itemHierarchy : {})
+        // eslint-disable-next-line
+    }, []) // Need to only be created on startup
 
-    setIsBusy(false)
+    useEffect(() => initHierarchy(), [initHierarchy])
-  }
 
-  const formatDisplayItems = () => {
+    useEffect(()=>{
-    // If loading
+        if (selectedItem){
-    if (isbusy) return <CircularProgress size={100} />
+            navigate(`/search/${selectedItem.item._id}`)
+        }
+    },[selectedItem, navigate])
 
-    // If finished loading
+    useEffect(() => {
-    if (selectedItem){
+        if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
-      return (
+            handleIDInput(searchInputState)
-        <ReactJson
+        }
-          src={selectedItem}
+    }, [handleIDInput, searchInputState])
-          theme={preferedJsonViewerTheme}
-          style={{
-            marginTop: '2vh',
-            width: '100%',
-            overflowY: 'auto',
-            display: 'flex',
-          }}
-        />
-      )
-    }
-    else return <Typography id='search-no-data'>No data to display</Typography>
-  }
 
-  const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
+    const handleInput = useCallback(async (input: string) => {
-    return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase()
+        if (!input || input.length < searchThreshold || isbusy) {
-    || option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase()
+            setSelectedItem(undefined)
-    || option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase()
+            setSelecteOptions([])
-  }
+            setIsBusy(false)
+            return
+        }
+        setIsBusy(true)
 
-  return (
+        if (input.match(/([a-z0-9]{24})/)) await handleIDInput(input)
-    <Box className={classes.searchAreaHolder}>
+        else await handleNameInput(input)
-      <Autocomplete
+
-        id='search-autocomplete'
+        setIsBusy(false)
-        options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
+    }, [handleIDInput, handleNameInput, isbusy, setSelectedItem])
-        getOptionLabel={(option)=> option.name ? option.name : option.id}
+
-        isOptionEqualToValue={(option, value) =>  findOptionValue(option, value)}
+    useEffect(() => {
-        open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
+        if (!searchInputState && params.id) {
-        className={classes.autocomplete}
+            const newId = params.id.trim();
-        inputValue={searchInputState ? searchInputState : ''}
+            console.log(newId);
-        onInputChange={async (evt: SyntheticEvent, newValue: string) => {
+            setSearchInput(newId);
-          if (!evt) return
+            (async () => await handleInput(newId))();
-          setSelectedItem(undefined)
+        }
-          setSearchInput(newValue)
+    }, [params, searchInputState, setSearchInput, handleInput, navigate])
-          await handleInput(newValue.trim())
+
-        }}
+    const formatDisplayItems = () => {
-        value={(()=>{
+        // If loading
-          const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
+        if (isbusy) return <CircularProgress size={100}/>
-          return selectedOption ? selectedOption : null;
+
-        })()}
+        // If finished loading
-        onChange={async (event: SyntheticEvent, newValue: IItemOption | null) => {
+        if (selectedItem) {
-          if (newValue) {
+            return (
-            const selectedOption = selectOptions.find(
+                <ReactJson
-              (elt) => elt.name === newValue.name,
+                    src={selectedItem}
+                    theme={preferedJsonViewerTheme}
+                    style={{
+                        marginTop: '2vh',
+                        width: '100%',
+                        overflowY: 'auto',
+                        display: 'flex',
+                    }}
+                />
             )
-            if (selectedOption) await handleIDInput(selectedOption.id)
+        } else return <Typography id='search-no-data'>No data to display</Typography>
-          }
+    }
-        }}
+
-        renderInput={(params) =>(
+    const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
-          <TextField {...params} label="Search by name or ID" />
+        return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase()
-        )}
+            || option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase()
-        renderOption={(props, option, state) => (
+            || option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase()
-          <li {...props} key={option.id}><Typography>{option.name}</Typography></li>
+    }
-        )}
+
-        filterOptions={(options, state) => options.filter(elt =>{
+    return (
-          return (elt.name?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
+        <Box className={classes.searchAreaHolder}>
-          ||  elt.id?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
+            <Autocomplete
-          ||  elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()))
+                id='search-autocomplete'
-        })}
+                options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
-        filterSelectedOptions
+                getOptionLabel={(option) => option.name ? option.name : option.id}
-      />
+                isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
-      <Box className={classes.jsonHolder}>{formatDisplayItems()}</Box>
+                open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
-    </Box>
+                className={classes.autocomplete}
-  )
+                inputValue={searchInputState ? searchInputState : ''}
+                onInputChange={async (evt: SyntheticEvent, newValue: string) => {
+                    if (!evt) return
+                    setSelectedItem(undefined)
+                    setSearchInput(newValue)
+                    await handleInput(newValue.trim())
+                }}
+                value={(() => {
+                    const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
+                    return selectedOption ? selectedOption : null;
+                })()}
+                onChange={async (event: SyntheticEvent, newValue: IItemOption | null) => {
+                    if (newValue) {
+                        const selectedOption = selectOptions.find(
+                            (elt) => elt.name === newValue.name,
+                        )
+                        if (selectedOption) await handleIDInput(selectedOption.id)
+                    }
+                }}
+                renderInput={(params) => (
+                    <TextField {...params} label="Search by name or ID"/>
+                )}
+                renderOption={(props, option ) => (
+                    <li {...props} key={option.id}><Typography>{option.name}</Typography></li>
+                )}
+                filterOptions={(options, state) => options.filter(elt => {
+                    return (elt.name?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
+                        || elt.id?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
+                        || elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()))
+                })}
+                filterSelectedOptions
+            />
+            <Box className={classes.jsonHolder}>{formatDisplayItems()}</Box>
+        </Box>
+    )
 }

items/frontend/yarn.lock

@@ -1282,6 +1282,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
+  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.15.4", "@babel/template@^7.3.3", "@babel/template@^7.4.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
@@ -1385,10 +1392,10 @@
     debug "4.2.0"
     find-yarn-workspace-root "^2.0.0"
 
-"@cypress/request@^2.88.6":
+"@cypress/request@^2.88.7":
-  version "2.88.6"
+  version "2.88.7"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.6.tgz#a970dd675befc6bdf8a8921576c01f51cc5798e9"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.7.tgz#386d960ab845a96953723348088525d5a75aaac4"
-  integrity sha512-z0UxBE/+qaESAHY9p9sM2h8Y4XqtsbDCt0/DPOrqA/RZgKi4PkxdpXyK4wCCnSk1xHqWHZZAE+gV6aDAR6+caQ==
+  integrity sha512-FTULIP2rnDJvZDT9t6B4nSfYR40ue19tVmv3wUcY05R9/FPCoMl1nAPJkzWzBCo7ltVn5ThQTbxiMoGBN7k0ig==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -4876,12 +4883,12 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@^8.6.0:
+cypress@9.0.0:
-  version "8.6.0"
+  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.0.0.tgz#8c496f7f350e611604cc2f77b663fb81d0c235d2"
-  integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
+  integrity sha512-/93SWBZTw7BjFZ+I9S8SqkFYZx7VhedDjTtRBmXO0VzTeDbmxgK/snMJm/VFjrqk/caWbI+XY4Qr80myDMQvYg==
   dependencies:
-    "@cypress/request" "^2.88.6"
+    "@cypress/request" "^2.88.7"
     "@cypress/xvfb" "^1.2.4"
     "@types/node" "^14.14.31"
     "@types/sinonjs__fake-timers" "^6.0.2"
@@ -4916,7 +4923,6 @@ cypress@^8.6.0:
     ospath "^1.2.2"
     pretty-bytes "^5.6.0"
     proxy-from-env "1.0.0"
-    ramda "~0.27.1"
     request-progress "^3.0.0"
     supports-color "^8.1.1"
     tmp "~0.2.1"
@@ -6802,6 +6808,13 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@5, history@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.1.0.tgz#2e93c09c064194d38d52ed62afd0afc9d9b01ece"
+  integrity sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -10838,11 +10851,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-ramda@~0.27.1:
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
-  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -10969,6 +10977,21 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-router-dom@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.2.tgz#860cefa697b9d4965eced3f91e82cdbc5995f3ad"
+  integrity sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==
+  dependencies:
+    history "^5.1.0"
+    react-router "6.0.2"
+
+react-router@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.2.tgz#bd2b0fa84fd1d152671e9f654d9c0b1f5a7c86da"
+  integrity sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==
+  dependencies:
+    history "^5.1.0"
+
 react-scripts@4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@@ -13172,7 +13195,7 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-wait-on@6.0.0:
+wait-on@6.0.0, wait-on@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-6.0.0.tgz#7e9bf8e3d7fe2daecbb7a570ac8ca41e9311c7e7"
   integrity sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==