spt/Website
spt/Website
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add items id in items frontend url #25

Merged
Ghost merged 21 commits from feat/add_items_id into development 2021-11-14 19:22:59 -05:00
Conversation 1 Commits 21 Files Changed 18 +813 -398
18 changed files with 813 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
.drone-docker.yml
View File

@ -8,25 +8,21 @@ concurrency:
trigger:
event:
- push
branch:
- master
- main
- development
steps:
- name: replace hosts and user variables
- name: replace hosts and user variables
image: ubuntu:impish
environment:
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
DEPLOY_USER:
from_secret: deploy_username
DEPLOY_SSH_KEY_PASSPHRASE:
from_secret: deploy_ssh_key_passphrase
DEPLOY_PRIVATE_KEY:
from_secret: deploy_ssh_key
DEPLOY_SSH_KEY_PASSPHRASE:
from_secret: deploy_ssh_key_passphrase
commands:
- sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example
- mv ./items/frontend/.env.example ./items/frontend/.env
@ -35,19 +31,56 @@ steps:
- 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
- name: build frontend
- 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
- 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
- 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
- name: build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- test frontend
when:
branch:
- main
- master
- development
- name: check ansible syntax
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
@ -58,7 +91,7 @@ steps:
branch:
- development
- name: apply ansible playbook
- name: apply ansible playbook
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
@ -67,16 +100,19 @@ steps:
timeout: 60
verbose: 2
environment:
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
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

52
.drone-kubernetes.yml
View File

@ -8,13 +8,9 @@ concurrency:
trigger:
event:
- push
branch:
- master
- main
- development
steps:
- name: replace hosts and user variables
- name: replace hosts and user variables
image: ubuntu:impish
environment:
SPT_ITEMS_HOSTNAME:
@ -35,19 +31,56 @@ steps:
- 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
- name: build frontend
- 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
- 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
- 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
- name: build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- test frontend
when:
branch:
- main
- master
- development
- name: check ansible syntax
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
@ -58,7 +91,7 @@ steps:
branch:
- development
- name: apply ansible playbook
- name: apply ansible playbook
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
@ -77,6 +110,9 @@ steps:
from_secret: deploy_user_group
SPT_ITEMS_PATH:
from_secret: deploy_path
depends_on:
- check ansible syntax
- build frontend
when:
branch:
- master

5
items/README.md
View File

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

77
items/docs/Walkthrough.md
View File

@ -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)
* [Copy app.blade.php file](#copy-app-blade-php-file)
* [Get file names from find output](#get-file-names-from-find-output)
* [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 kubernetes pipeline [drone-kubernetes.yml](../drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../.ansible)
* The documentation is located in [documentation](../documentation)
* A docker pipeline [drone-docker.yml](../../.drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../../.drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../../.ansible-items)
* 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

1
items/frontend/cypress.json
View File

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

5
items/frontend/cypress/fixtures/example.json
View File

@ -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"
}

23
items/frontend/package.json
View File

@ -13,8 +13,10 @@
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"cross-env": "^7.0.3",
"cypress": "^8.6.0",
"start-server-and-test": "^1.14.0"
"cypress": "9.0.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"],
"exclude": ["src/reportWebVitals.ts"],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"src/reportWebVitals.ts"
],
"excludeAfterRemap": true
}
}

8
items/frontend/src/components/Footer.tsx
View File

@ -1,7 +1,7 @@
import { Box, Theme, Typography } from '@mui/material'
import { makeStyles } from '@mui/styles'
import {Box, Typography} from '@mui/material'
import {makeStyles} from '@mui/styles'
const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles(() => ({
footerHolder: {
display: 'flex',
flex: '0 1 3vh',
@ -17,7 +17,7 @@ export const Footer = () => {
return (
<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>
)
}

84
items/frontend/src/cypress/fixtures/condensed_milk.json Normal file
View File

@ -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"
}
}

4
items/frontend/src/cypress/integration/footer.spec.tsx
View File

@ -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('.makeStyles-footerHolder-63 > .MuiTypography-root').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
cy.get('#footer').should('be.visible')
cy.get('#footer').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
})
})

40
items/frontend/src/cypress/integration/search.spec.tsx
View File

@ -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);
})
})
})

73
items/frontend/src/cypress/integration/url-check.spec.tsx Normal file
View File

@ -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}"`);
})
})
})

2
items/frontend/src/index.tsx
View File

@ -5,7 +5,7 @@ import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
<App/>
</React.StrictMode>,
document.getElementById('root')
);

26
items/frontend/src/pages/InteractiveArea.tsx Normal file
View File

@ -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>
</>
)
}

29
items/frontend/src/pages/MainPage.tsx
View File

@ -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/>
<Box className={classes.searchContainer}>
<SearchArea/>
</Box>
<BrowserRouter>
<Routes>
<Route path="/search" element={<InteractiveArea/>}>
<Route path=":id" element={<InteractiveArea/>}/>
</Route>
<Route path="/" element={<Navigate replace to="/search"/>}/>
<Route path="*" element={<PageNotFound/>}/>
</Routes>
</BrowserRouter>
<Footer/>
</Box>
</>

44
items/frontend/src/pages/PageNotFound.tsx Normal file
View File

@ -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>
</>
)
}

65
items/frontend/src/pages/mainPageComponents/SearchArea.tsx
View File

@ -1,21 +1,12 @@
import { SyntheticEvent, useCallback, useEffect, useState } from 'react'
import {
Autocomplete,
Box,
CircularProgress,
Theme,
Typography,
} from '@mui/material'
import { makeStyles } from '@mui/styles'
import {SyntheticEvent, useCallback, useEffect, useState} from 'react'
import {Autocomplete, 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 {
getItem,
getItemHierarchy,
searchItem,
} from '../../dataaccess/ItemBackend'
import { ItemOption } from '../../dto/ItemOption'
import { useGlobalState } from '../../state/GlobalState'
import {getItem, getItemHierarchy, searchItem,} from '../../dataaccess/ItemBackend'
import {ItemOption} from '../../dto/ItemOption'
import {useGlobalState} from '../../state/GlobalState'
import {useNavigate, useParams} from "react-router-dom";
interface IItemOption {
id?: string
@ -44,6 +35,8 @@ const useStyles = makeStyles((theme: Theme) => ({
export const SearchArea = () => {
const classes = useStyles()
const params = useParams();
const navigate = useNavigate();
const preferedLocale = useGlobalState((state) => state.preferedLocale)
const preferedJsonViewerTheme = useGlobalState(
useCallback((state) => state.preferedJsonViewerTheme, []),
@ -61,7 +54,7 @@ export const SearchArea = () => {
const [isbusy, setIsBusy] = useState<boolean>(false)
const searchThreshold = 3
const handleNameInput = async (input: string) => {
const handleNameInput = useCallback(async (input: string) => {
const searchResults = await searchItem(input, preferedLocale)
const options = searchResults?.map((res) => ({
id: res.item._id,
@ -69,7 +62,7 @@ export const SearchArea = () => {
shortName: JSON.stringify(res.locale.ShortName)
}))
setSelecteOptions(options ? options : [])
}
}, [preferedLocale])
const handleIDInput = useCallback(async (input: string) => {
const itemJson = await getItem(input, preferedLocale)
@ -99,13 +92,19 @@ export const SearchArea = () => {
useEffect(() => initHierarchy(), [initHierarchy])
useEffect(()=>{
if (selectedItem){
navigate(`/search/${selectedItem.item._id}`)
}
},[selectedItem, navigate])
useEffect(() => {
if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
handleIDInput(searchInputState)
}
}, [handleIDInput, searchInputState])
const handleInput = async (input: string) => {
const handleInput = useCallback(async (input: string) => {
if (!input || input.length < searchThreshold || isbusy) {
setSelectedItem(undefined)
setSelecteOptions([])
@ -118,14 +117,23 @@ export const SearchArea = () => {
else await handleNameInput(input)
setIsBusy(false)
}, [handleIDInput, handleNameInput, isbusy, setSelectedItem])
useEffect(() => {
if (!searchInputState && params.id) {
const newId = params.id.trim();
console.log(newId);
setSearchInput(newId);
(async () => await handleInput(newId))();
}
}, [params, searchInputState, setSearchInput, handleInput, navigate])
const formatDisplayItems = () => {
// If loading
if (isbusy) return <CircularProgress size={100} />
if (isbusy) return <CircularProgress size={100}/>
// If finished loading
if (selectedItem){
if (selectedItem) {
return (
<ReactJson
src={selectedItem}
@ -138,8 +146,7 @@ export const SearchArea = () => {
}}
/>
)
}
else return <Typography id='search-no-data'>No data to display</Typography>
} else return <Typography id='search-no-data'>No data to display</Typography>
}
const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
@ -153,7 +160,7 @@ export const SearchArea = () => {
<Autocomplete
id='search-autocomplete'
options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
getOptionLabel={(option)=> option.name ? option.name : option.id}
getOptionLabel={(option) => option.name ? option.name : option.id}
isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
className={classes.autocomplete}
@ -164,7 +171,7 @@ export const SearchArea = () => {
setSearchInput(newValue)
await handleInput(newValue.trim())
}}
value={(()=>{
value={(() => {
const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
return selectedOption ? selectedOption : null;
})()}
@ -176,13 +183,13 @@ export const SearchArea = () => {
if (selectedOption) await handleIDInput(selectedOption.id)
}
}}
renderInput={(params) =>(
<TextField {...params} label="Search by name or ID" />
renderInput={(params) => (
<TextField {...params} label="Search by name or ID"/>
)}
renderOption={(props, option, state) => (
renderOption={(props, option ) => (
<li {...props} key={option.id}><Typography>{option.name}</Typography></li>
)}
filterOptions={(options, state) => options.filter(elt =>{
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()))

55
items/frontend/yarn.lock
View File

@ -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":
version "2.88.6"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.6.tgz#a970dd675befc6bdf8a8921576c01f51cc5798e9"
integrity sha512-z0UxBE/+qaESAHY9p9sM2h8Y4XqtsbDCt0/DPOrqA/RZgKi4PkxdpXyK4wCCnSk1xHqWHZZAE+gV6aDAR6+caQ==
"@cypress/request@^2.88.7":
version "2.88.7"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.7.tgz#386d960ab845a96953723348088525d5a75aaac4"
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:
version "8.6.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
cypress@9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.0.0.tgz#8c496f7f350e611604cc2f77b663fb81d0c235d2"
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==