Compare commits

..

1 Commits

Author SHA1 Message Date
Allan Carr
98bff6d8f6 IO-2824 Dev Server Instance Switch
Signed-off-by: Allan Carr <allan.carr@thinkimex.com>
2024-06-20 10:56:07 -07:00
1670 changed files with 66854 additions and 131524 deletions

View File

@@ -5,30 +5,23 @@ orbs:
aws-s3: circleci/aws-s3@4.0.0
aws-cli: circleci/aws-cli@4.0
eb: circleci/aws-elastic-beanstalk@2.0.1
jira: circleci/jira@2.1.0
jobs:
imex-api-deploy:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
steps:
- checkout
- eb/setup
- run:
command: |
eb init imex-online-production-api -r ca-central-1 -p "Node.js 22 running on 64bit Amazon Linux 2023"
eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
eb status --verbose
eb deploy
eb status
- jira/notify:
environment: Production (ImEX) - API
environment_type: production
job_type: deployment
pipeline_id: << pipeline.id >>
pipeline_number: << pipeline.number >>
imex-hasura-migrate:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
parameters:
secret:
type: string
@@ -40,19 +33,14 @@ jobs:
- run:
name: Execute migration
command: |
curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
npm install hasura-cli -g
hasura migrate apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
hasura metadata apply --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
hasura metadata reload --endpoint https://db.imex.online/ --admin-secret << parameters.secret >>
- jira/notify:
environment: Production (ImEX) - Hasura
environment_type: production
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
imex-app-build:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
resource_class: large
working_directory: ~/repo/client
steps:
@@ -74,10 +62,9 @@ jobs:
to: "s3://imex-online-production/"
arguments: "--exclude '*.map'"
imex-app-beta-build:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
resource_class: large
working_directory: ~/repo/client
@@ -88,7 +75,7 @@ jobs:
name: Install Dependencies
command: npm i
- run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:imex
- run: npm run build:production:imex
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -99,12 +86,6 @@ jobs:
from: dist
to: "s3://imex-online-beta/"
arguments: "--exclude '*.map'"
- jira/notify:
environment: Production (ImEX) - Front End
environment_type: production
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
rome-api-deploy:
docker:
@@ -114,19 +95,14 @@ jobs:
- eb/setup
- run:
command: |
eb init romeonline-productionapi -r us-east-2 -p "Node.js 22 running on 64bit Amazon Linux 2023"
eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
eb status --verbose
eb deploy
eb status
- jira/notify:
environment: Production (Rome) - API
environment_type: production
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
rome-hasura-migrate:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
parameters:
secret:
type: string
@@ -138,20 +114,15 @@ jobs:
- run:
name: Execute migration
command: |
curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
npm install hasura-cli -g
hasura migrate apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
hasura metadata apply --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
hasura metadata reload --endpoint https://db.romeonline.io/ --admin-secret << parameters.secret >>
- jira/notify:
environment: Production (Rome) - Hasura
environment_type: production
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
rome-app-build:
docker:
- image: cimg/node:22.13.1
resource_class: large
- image: cimg/node:18.18.2
working_directory: ~/repo/client
steps:
@@ -161,7 +132,7 @@ jobs:
name: Install Dependencies
command: npm i
- run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:production:rome
- run: npm run build:production:rome
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -172,16 +143,35 @@ jobs:
from: dist
to: "s3://rome-online-production/"
arguments: "--exclude '*.map'"
- jira/notify:
environment: Production (Rome) - Front End
environment_type: production
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
promanager-app-build:
docker:
- image: cimg/node:18.18.2
working_directory: ~/repo/client
steps:
- checkout:
path: ~/repo
- run:
name: Install Dependencies
command: npm i
- run: npm run build:production:promanager
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
aws_secret_access_key: AWS_SECRET_ACCESS_KEY
region: AWS_REGION
- aws-s3/sync:
from: dist
to: "s3://promanager-production/"
arguments: "--exclude '*.map'"
test-rome-hasura-migrate:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
parameters:
secret:
type: string
@@ -193,23 +183,15 @@ jobs:
- run:
name: Execute migration
command: |
curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
npm install hasura-cli -g
hasura migrate apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
sleep 5
hasura metadata apply --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
sleep 10
hasura metadata reload --endpoint https://db.test.romeonline.io/ --admin-secret << parameters.secret >>
- jira/notify:
environment: Test (Rome) - Hasura
environment_type: testing
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
test-rome-app-build:
docker:
- image: cimg/node:22.13.1
resource_class: large
- image: cimg/node:18.18.2
working_directory: ~/repo/client
steps:
@@ -219,7 +201,7 @@ jobs:
name: Install Dependencies
command: npm i
- run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:rome
- run: npm run build:test:rome
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -230,16 +212,35 @@ jobs:
from: dist
to: "s3://rome-online-test/"
arguments: "--exclude '*.map'"
- jira/notify:
environment: Test (Rome) - Front End
environment_type: testing
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
test-promanager-app-build:
docker:
- image: cimg/node:18.18.2
working_directory: ~/repo/client
steps:
- checkout:
path: ~/repo
- run:
name: Install Dependencies
command: npm i
- run: npm run build:test:promanager
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
aws_secret_access_key: AWS_SECRET_ACCESS_KEY
region: AWS_REGION
- aws-s3/sync:
from: dist
to: "s3://promanager-testing/"
arguments: "--exclude '*.map'"
test-hasura-migrate:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
parameters:
secret:
type: string
@@ -251,22 +252,14 @@ jobs:
- run:
name: Execute migration
command: |
curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh | bash
npm install hasura-cli -g
hasura migrate apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
sleep 15
hasura metadata apply --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
sleep 30
hasura metadata reload --endpoint https://db.test.bodyshop.app/ --admin-secret << parameters.secret >>
- jira/notify:
environment: Test (ImEX) - Hasura
environment_type: testing
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
imex-test-app-build:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
resource_class: large
working_directory: ~/repo/client
@@ -277,7 +270,7 @@ jobs:
name: Install Dependencies
command: npm i
- run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
- run: npm run build:test:imex
- aws-s3/sync:
from: build
@@ -286,7 +279,7 @@ jobs:
imex-test-app-beta-build:
docker:
- image: cimg/node:22.13.1
- image: cimg/node:18.18.2
resource_class: large
working_directory: ~/repo/client
@@ -298,7 +291,7 @@ jobs:
name: Install Dependencies
command: npm i
- run: NODE_OPTIONS=--max-old-space-size=8192 npm run build:test:imex
- run: npm run build:test:imex
- aws-cli/setup:
aws_access_key_id: AWS_ACCESS_KEY_ID
@@ -309,12 +302,7 @@ jobs:
from: dist
to: "s3://imex-online-test-beta/"
arguments: "--exclude '*.map'"
- jira/notify:
environment: Test (ImEX) - Front End
environment_type: testing
pipeline_id: << pipeline.id >>
job_type: deployment
pipeline_number: << pipeline.number >>
admin-app-build:
docker:
@@ -365,7 +353,7 @@ workflows:
secret: ${HASURA_PROD_SECRET}
filters:
branches:
only: master-AIO
only: master
- rome-api-deploy:
filters:
branches:
@@ -375,7 +363,7 @@ workflows:
branches:
only: master-AIO
- rome-hasura-migrate:
secret: ${HASURA_ROME_PROD_SECRET}
secret: ${HASURA_PROD_SECRET}
filters:
branches:
only: master-AIO
@@ -396,6 +384,14 @@ workflows:
filters:
branches:
only: test-AIO
- test-promanager-app-build:
filters:
branches:
only: test-AIO
- promanager-app-build:
filters:
branches:
only: master-AIO
- test-rome-hasura-migrate:
secret: ${HASURA_ROME_TEST_SECRET}
filters:

View File

@@ -1,23 +0,0 @@
# Directories to exclude
.circleci
.idea
.platform
.vscode
_reference
client
redis/dockerdata
hasura
node_modules
# Files to exclude
.ebignore
.editorconfig
.gitignore
.prettierrc.js
Dockerfile
README.MD
bodyshop_translations.babel
docker-compose.yml
ecosystem.config.js
eslint.config.mjs
# Optional: Exclude logs and temporary files
*.log

19
.eslintrc.json Normal file
View File

@@ -0,0 +1,19 @@
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"no-console": "off"
},
"settings": {}
}

80
.gitattributes vendored
View File

@@ -1,80 +0,0 @@
# Ensure all text files use LF for line endings
* text eol=lf
# Binary files should not be modified by Git
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.ico binary
*.webp binary
*.svg binary
# Fonts
*.woff binary
*.woff2 binary
*.ttf binary
*.otf binary
*.eot binary
# Videos
*.mp4 binary
*.mov binary
*.avi binary
*.mkv binary
*.webm binary
# Audio
*.mp3 binary
*.wav binary
*.ogg binary
*.flac binary
# Archives and compressed files
*.zip binary
*.gz binary
*.tar binary
*.7z binary
*.rar binary
# PDF and documents
*.pdf binary
*.doc binary
*.docx binary
*.xls binary
*.xlsx binary
*.ppt binary
*.pptx binary
# Exclude JSON and other data files from text processing, if necessary
*.json text
*.xml text
*.csv text
# Scripts and code files should maintain LF endings
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.css text eol=lf
*.scss text eol=lf
*.html text eol=lf
*.yml text eol=lf
*.yaml text eol=lf
*.md text eol=lf
*.sh text eol=lf
*.py text eol=lf
*.rb text eol=lf
*.java text eol=lf
*.php text eol=lf
# Git configuration files
.gitattributes text eol=lf
.gitignore text eol=lf
*.gitattributes text eol=lf
# Exclude some other potential binary files
*.db binary
*.sqlite binary
*.exe binary
*.dll binary

13
.gitignore vendored
View File

@@ -114,21 +114,10 @@ firebase/.env
!.elasticbeanstalk/*.cfg.yml
!.elasticbeanstalk/*.global.yml
logs/oAuthClient-log.log
logs/*
.node-persist/**
/*.env.*
.idea/*
.idea
# Vitest
vitest-report*/
vitest-coverage/
*.vitest.log
test-output.txt
server/job/test/fixtures
.github
_reference/ragmate/.ragmate.env
docker_data

View File

View File

@@ -1,5 +0,0 @@
#!/bin/bash
DD_API_KEY=58d91898a70c6fd659f6eea768a57976 DD_SITE="us3.datadoghq.com" bash -c "$(curl -L https://install.datadoghq.com/scripts/install_script_agent7.sh)"
echo "Datadog agent installed."

View File

@@ -1,24 +0,0 @@
#!/bin/bash
# Install required packages
dnf install -y fontconfig freetype
# Move to the /tmp directory for temporary download and extraction
cd /tmp
# Download the Montserrat font zip file
wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip
# Unzip the downloaded font file
unzip montserrat.zip -d montserrat
# Move the font files to the system fonts directory
mv montserrat/montserrat/*.ttf /usr/share/fonts
# Rebuild the font cache
fc-cache -fv
# Clean up
rm -rf /tmp/montserrat /tmp/montserrat.zip
echo "Montserrat fonts installed and cached successfully."

View File

@@ -1,2 +1 @@
client_max_body_size 50M;
client_body_buffer_size 5M;
client_max_body_size 50M;

15
.vscode/launch.json vendored
View File

@@ -14,21 +14,6 @@
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/client/src"
},
{
"name": "Attach to Node.js in Docker",
"type": "node",
"request": "attach",
"address": "localhost",
"port": 9229,
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app",
"protocol": "inspector",
"restart": true,
"sourceMaps": true,
"skipFiles": [
"<node_internals>/**"
]
}
]
}

33
.vscode/settings.json vendored
View File

@@ -8,36 +8,5 @@
"pattern": "**/IMEX.xml",
"systemId": "logs/IMEX.xsd"
}
],
"cSpell.words": [
"antd",
"appointmentconfirmation",
"appt",
"autohouse",
"autohouseid",
"billlines",
"bodyshop",
"bodyshopid",
"bodyshops",
"CIECA",
"claimscorp",
"claimscorpid",
"Dinero",
"driveable",
"IMEX",
"imexshopid",
"jobid",
"joblines",
"Kaizen",
"labhrs",
"larhrs",
"mixdata",
"ownr",
"promanager",
"shopname",
"smartscheduling",
"timetickets",
"touchtime"
],
"eslint.workingDirectories": ["./", "./client"]
]
}

View File

@@ -1,60 +0,0 @@
# Use Amazon Linux 2023 as the base image
FROM amazonlinux:2023
# Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
RUN dnf install -y git \
&& curl -sL https://rpm.nodesource.com/setup_24.x | bash - \
&& dnf install -y nodejs \
&& dnf clean all
# Install dependencies required by node-canvas
RUN dnf install -y \
gcc \
gcc-c++ \
cairo-devel \
pango-devel \
libjpeg-turbo-devel \
giflib-devel \
libpng-devel \
make \
python3 \
fontconfig \
freetype \
python3-pip \
wget \
unzip \
&& dnf clean all
# Install Montserrat fonts
RUN cd /tmp \
&& wget https://images.imex.online/fonts/montserrat.zip -O montserrat.zip \
&& unzip montserrat.zip -d montserrat \
&& mv montserrat/montserrat/*.ttf /usr/share/fonts \
&& fc-cache -fv \
&& rm -rf /tmp/montserrat /tmp/montserrat.zip \
&& echo "Montserrat fonts installed and cached successfully."
# Set the working directory
WORKDIR /app
# This is because our test route uses a git commit hash
RUN git config --global --add safe.directory /app
# Copy package.json and package-lock.json
COPY package.json ./
# Install Nodemon
RUN npm install -g nodemon
# Install dependencies
RUN npm i --no-package-lock
# Copy the rest of your application code
COPY . .
# Expose the port your app runs on (adjust if necessary)
EXPOSE 4000 9229
# Start the application
RUN echo "Starting the application..."
CMD ["nodemon", "--ignore", "./server/job/test/fixtures", "--legacy-watch", "--inspect=0.0.0.0:9229", "server.js"]

View File

@@ -1,346 +0,0 @@
Fortellis Notes
Subscription ID
- Appears to give us a list of all dealerships we have access to, and `apiDmsInfo` contains the integrations that are enabled for that dealership.
- Will likely need to filter based on the DMS ID or something?
- Should store the whole subscription object. Contains department information needed in subsequent calls.
Department ID
- May have multiple departments. Appears that financial stuff goes to Accounting, History will go to Service.
- TODO: How do we handle the multiple departments that may come up.
###Internal Questions
* Overview of the redis storing mechanism to cache this data.
*
# GL Wip Posting
## Org Helper Return Data
```json
[
{
"acctgLgnID": "DEVWB-A",
"applCode": "V",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRITE BACK VMS",
"logon": "DEVWB-V"
},
{
"acctgLgnID": "DEVWB-A",
"applCode": "F",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRITE BACK F&I SALES",
"logon": "DEVWB-FI"
},
{
"acctgLgnID": "DEVWB-A",
"applCode": "CS",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRITE BACK SERVICE",
"logon": "DEVWB-S"
},
{
"acctgLgnID": "DEVWB-A",
"applCode": "A",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRITE BACK ACCTG",
"logon": "DEVWB-A"
},
{
"acctgLgnID": "DEVWB-A",
"applCode": "SL",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRTIE BACK SLS MGMT",
"logon": "DEVWB-SL"
},
{
"acctgLgnID": "DEVWB-A",
"applCode": "O",
"coID": "77",
"companyName": "TEST SYS C187092 DEVWB",
"lgnDesc": "DEV WRITE BACK PARTS",
"logon": "DEVWB-I"
}
]
```
## Journal Helper Return Data
```json
[
{
"companyNo": "77",
"jrnlID": "32",
"jrnlName": "PARTS SALES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "4",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "92",
"jrnlName": "YTD ADJUSTMENTS",
"jrnlType": "Y",
"intercoFlag": "0",
"defaultDocType": "3",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "12",
"jrnlName": "FLEET SALES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "9",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "57",
"jrnlName": "CASH RECEIPTS (OPEN-ITEM)",
"jrnlType": "R",
"intercoFlag": "0",
"defaultDocType": "1",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "93",
"jrnlName": "SET UP HISTORY",
"jrnlType": "H",
"intercoFlag": "0",
"defaultDocType": "10",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "88",
"jrnlName": "F/S STATISCAL DATA",
"jrnlType": "F",
"intercoFlag": "0",
"defaultDocType": "10",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "58",
"jrnlName": "WARRANTY CREDITS",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "3",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "FC",
"jrnlName": "FINANCE CHARGE",
"jrnlType": "A",
"intercoFlag": "0",
"defaultDocType": "12",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "94",
"jrnlName": "SET UP SCHEDULES",
"jrnlType": "C",
"intercoFlag": "0",
"defaultDocType": "3",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "95",
"jrnlName": "SET UP GENERAL LEDGER",
"jrnlType": "B",
"intercoFlag": "0",
"defaultDocType": "3",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "20",
"jrnlName": "USED VEHICLE SALES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "9",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "60",
"jrnlName": "CASH DISBURSEMENTS",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "2",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "30",
"jrnlName": "SERVICE SALES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "7",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "40",
"jrnlName": "PAYROLL",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "11",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "15",
"jrnlName": "DEALER TRADES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "9",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "70",
"jrnlName": "NEW VEHICLE PURCHASES",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "8",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "25",
"jrnlName": "USED WHOLESALE",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "9",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "75",
"jrnlName": "GENERAL PURCHASES",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "5",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "10",
"jrnlName": "NEW VEHICLE SALES",
"jrnlType": "S",
"intercoFlag": "0",
"defaultDocType": "9",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "80",
"jrnlName": "GENERAL JOURNAL",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "3",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "11",
"jrnlName": "WORK IN PROGRESS",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "10",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "56",
"jrnlName": "CASH RECEIPTS (BALANCE FWD)",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "1",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "81",
"jrnlName": "STANDARD ENTRIES",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "6",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "51",
"jrnlName": "CASH RECEIPTS JOURNAL - EFT",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "10",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "61",
"jrnlName": "CASH DISBURSMENTS -EFT",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "10",
"errCode": "",
"errMsg": ""
},
{
"companyNo": "77",
"jrnlID": "71",
"jrnlName": "USED VEHICLE PURCHASES",
"jrnlType": "G",
"intercoFlag": "0",
"defaultDocType": "8",
"errCode": "",
"errMsg": ""
}
]
```
# Feedback
- Receiving bad request errors, with no details. API errors page doesn't indicate what's wrong for certain types of error codes.
- API Error page works on a several minute delay.

View File

@@ -2,7 +2,7 @@ NGROK TEsting:
./ngrok.exe http http://localhost:4000 -host-header="localhost:4000"
Finding deadfiles - run from client directory
npx deadfile ./src/index.jsx --exclude build templates
npx deadfile ./src/index.js --exclude build templates
#Crushing all hasura migrations by creating a new initialization from the server.
hasura migrate create "Init" --from-server --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
@@ -11,4 +11,4 @@ Production-ImEXOnline!@#'
hasura migrate status --endpoint https://db.imex.online/ --admin-secret 'Production-ImEXOnline!@#'
Generate the license file:
$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite
$ generate-license-file --input package.json --output third-party-licenses.txt --overwrite

View File

@@ -10,8 +10,5 @@
"courtesycars": "date",
"media": "date",
"visualboard": "date",
"scoreboard": "date",
"checklist": "date",
"smartscheduling" :"date",
"roguard": "date"
"scoreboard": "date"
}

View File

@@ -1,64 +0,0 @@
# Setting up External Networking and Static IP for WSL2 using Hyper-V
This guide will walk you through the steps to configure your WSL2 (Windows Subsystem for Linux) instance to use an external Hyper-V virtual switch, enabling it to connect directly to your local network. Additionally, you'll learn how to assign a static IP address to your WSL2 instance.
## Prerequisites
1. **Windows 11**
2. **Docker Desktop For Windows (Latest Version)
# Docker Setup
Inside the root of the project exists the `docker-compose.yaml` file, you can simply run
`docker-compose up` to launch the backend.
Things to note:
- When installing NPM packages, you will need to rebuild the `node-app` container
- Making changes to the server files will restart the `node-app`
# Local Stack
- LocalStack Front end (Optional) - https://apps.microsoft.com/detail/9ntrnft9zws2?hl=en-us&gl=US
- http://localhost:4566/_aws/ses will allow you to see emails sent
# Docker Commands
## General `docker-compose` Commands:
1. Bring up the services, force a rebuild of all services, and do not use the cache: `docker-compose up --build --no-cache`
2. Start Containers in Detached Mode: This will run the containers in the background (detached mode): `docker-compose up -d`
3. Stop and Remove Containers: Stops and removes the containers gracefully: `docker-compose down`
4. Stop containers without removing them: `docker-compose stop`
5. Remove Containers, Volumes, and Networks: `docker-compose down --volumes`
6. Force rebuild of containers: `docker-compose build --no-cache`
7. View running Containers: `docker-compose ps`
8. View a specific containers logs: `docker-compose logs <container-name>`
9. Scale services (multiple instances of a service): `docker-compose up --scale <container-name>=<instances number> -d`
10. Watch a specific containers logs in realtime with timestamps: `docker-compose logs -f --timestamps <container-name>`
## Volume Management Commands
1. List Docker volumes: `docker volume ls`
2. Remove Unused volumes `docker volume prune`
3. Remove specific volumes `docker volume rm <volume-name>`
4. Inspect a volume: `docker volume inspect <volume-name>`
## Container Image Management Commands:
1. List running containers: `docker ps`
2. List all containers: `docker os -a`
3. Remove Stopped containers: `docker container prune`
4. Remove a specific container: `docker container rm <container-name>`
5. Remove a specific image: `docker rmi <image-name>:<version>`
6. Remove all unused images: `docker image prune -a`
## Network Management Commands:
1. List networks: `docker network ls`
2. Inspect a specific network: `docker network inspect <network-name>`
3. Remove a specific network: `docker network rm <network-name>`
4. Remove unused networks: `docker network prune`
## Debugging and maintenance:
1. Enter a Running container: `docker exec -it <container name> /bin/bash` (could also be `/bin/sh` or for example `redis-cli` on a redis node)
2. View container resource usage: `docker stats`
3. Check Disk space used by Docker: `docker system df`
4. Remove all unused Data (Nuclear option): `docker system prune`
## Specific examples
1. To simulate a Clean state, one should run `docker system prune` followed by `docker volume prune -a`
2. You can run `docker-compose up` without the `-d` option, and you will get what is identical to the experience you were used to, this includes being able to control-c and bring the entire stack down

View File

@@ -1,41 +0,0 @@
# Production Board Notes:
## General Notes
- You can single click the lane footer to collapse/un-collapse the lane
- You can double click the lane header to collapse/un-collapse the lane
- If you need to scroll horizontally, you can hold shift and use the mouse scroll wheel, or press the mouse scroll wheel while scrolling
## Board Settings
#### Layout
- Board Orientation (Vertical or Horizontal)
- This determines the orientation of the card layout on the board.
- Horizontal is the default setting, and how the prior board was set up.
- Vertical is the new setting and allows lanes to be displayed vertically, with a grid of cards
- Card Size (Small, Medium, Large)
- This determines the size of the cards on the board.
- Small is the default setting, and how the prior board was set up.
- Medium and Large are new settings and allow for larger cards to be displayed on the board.
- Compact Cards (Tall or Wide)
- Formally called 'Compact'
- When on, data is displayed on the card vertically
- when turned off, some fields may share horizontal space, tightening the card layout
- Colored Cards (On or Off)
- When on, cards are colored based on the Status color
- Kiosk Mode (On or Off)
- This should be turned on if the shop is using it on a tablet (Ipad)
#### Information
These allow users to turn fields on or off, turning them all off will show the card in the most minimal form
### Statistics
- The statistics section allows users to see accumulations of both jobs on the board, and jobs in production.
- you can click a statistic to turn it on and off, and drag and drop the statistics to rearrange them
### Filters
- Allows you to set, and persist filters for estimators and insurance companies

View File

@@ -1 +0,0 @@
node_modules

View File

@@ -1,7 +0,0 @@
This will connect to your dockers local stack session and render the email in HTML.
```shell
node index.js
```
http://localhost:3334

View File

@@ -1,96 +0,0 @@
// index.js
import express from "express";
import fetch from "node-fetch";
import { simpleParser } from "mailparser";
const app = express();
const PORT = 3334;
app.get("/", async (req, res) => {
try {
const response = await fetch("http://localhost:4566/_aws/ses");
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
const messagesHtml = await parseMessages(data.messages);
res.send(renderHtml(messagesHtml));
} catch (error) {
console.error("Error fetching messages:", error);
res.status(500).send("Error fetching messages");
}
});
async function parseMessages(messages) {
const parsedMessages = await Promise.all(
messages.map(async (message, index) => {
try {
const parsed = await simpleParser(message.RawData);
return `
<div class="shadow-md rounded-lg p-4 mb-6" style="background-color: lightgray">
<div class="shadow-md rounded-lg p-4 mb-6" style="background-color: white">
<div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
<div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
<div class="mb-2"><span class="font-semibold">To:</span> ${parsed.to.text || "No To Address"}</div>
<div class="mb-2"><span class="font-semibold">Subject:</span> ${parsed.subject || "No Subject"}</div>
<div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
<div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
</div>
<div class="prose">${parsed.html || parsed.textAsHtml || "No HTML content available"}</div>
</div>
`;
} catch (error) {
console.error("Error parsing email:", error);
return `
<div class="bg-white shadow-md rounded-lg p-4 mb-6">
<div class="mb-2"><span class="font-bold text-lg">Message ${index + 1}</span></div>
<div class="mb-2"><span class="font-semibold">From:</span> ${message.Source}</div>
<div class="mb-2"><span class="font-semibold">Region:</span> ${message.Region}</div>
<div class="mb-2"><span class="font-semibold">Timestamp:</span> ${message.Timestamp}</div>
<div class="text-red-500">Error parsing email content</div>
</div>
`;
}
})
);
return parsedMessages.join("");
}
function renderHtml(messagesHtml) {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Messages Viewer</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #f3f4f6;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
}
.prose {
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container bg-white shadow-lg rounded-lg p-6">
<h1 class="text-2xl font-bold text-center mb-6">Email Messages Viewer</h1>
<div id="messages-container">${messagesHtml}</div>
</div>
</body>
</html>
`;
}
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

File diff suppressed because it is too large Load Diff

View File

@@ -1,18 +0,0 @@
{
"name": "localemailviewer",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^5.1.0",
"mailparser": "^3.7.4",
"node-fetch": "^3.3.2"
}
}

View File

@@ -1,61 +0,0 @@
# PATCH /integrations/parts-management/job/:id/status
Update (patch) the status of a job created under parts management. This endpoint is only available
for jobs whose parent bodyshop has an `external_shop_id` (i.e., is provisioned for parts
management).
## Endpoint
```
PATCH /integrations/parts-management/job/:id/status
```
- `:id` is the UUID of the job to update.
## Request Headers
- `Authorization`: (if required by your integration middleware)
- `Content-Type: application/json`
## Request Body
Send a JSON object with the following field:
- `status` (string, required): The new status for the job.
Example:
```
PATCH /integrations/parts-management/job/123e4567-e89b-12d3-a456-426614174000/status
Content-Type: application/json
{
"status": "IN_PROGRESS"
}
```
## Success Response
- **200 OK**
- Returns the updated job object with the new status.
```
{
"id": "123e4567-e89b-12d3-a456-426614174000",
"status": "IN_PROGRESS",
...
}
```
## Error Responses
- **400 Bad Request**: Missing status field, or parent bodyshop does not have an `external_shop_id`.
- **404 Not Found**: No job found with the given ID.
- **500 Internal Server Error**: Unexpected error.
## Notes
- Only jobs whose parent bodyshop has an `external_shop_id` can be patched via this route.
- Fields other than `status` will be ignored if included in the request body.
- The route is protected by the same middleware as other parts management endpoints.

View File

@@ -1,81 +0,0 @@
# PATCH /integrations/parts-management/provision/:id
Update (patch) select fields for a parts management bodyshop. Only available for shops that have an
`external_shop_id` (i.e., are provisioned for parts management).
## Endpoint
```
PATCH /integrations/parts-management/provision/:id
```
- `:id` is the UUID of the bodyshop to update.
## Request Headers
- `Authorization`: (if required by your integration middleware)
- `Content-Type: application/json`
## Request Body
Send a JSON object with one or more of the following fields to update:
- `shopname` (string)
- `address1` (string)
- `address2` (string, optional)
- `city` (string)
- `state` (string)
- `zip_post` (string)
- `country` (string)
- `email` (string, shop's email, not user email)
- `timezone` (string)
- `phone` (string)
- `logo_img_path` (string)
Any fields not included in the request body will remain unchanged.
## Example Request
```
PATCH /integrations/parts-management/provision/123e4567-e89b-12d3-a456-426614174000
Content-Type: application/json
{
"shopname": "New Shop Name",
"address1": "123 Main St",
"city": "Springfield",
"state": "IL",
"zip_post": "62704",
"country": "USA",
"email": "shop@example.com",
"timezone": "America/Chicago",
"phone": "555-123-4567",
"logo_img_path": "https://example.com/logo.png"
}
```
## Success Response
- **200 OK**
- Returns the updated shop object with the patched fields.
```
{
"id": "123e4567-e89b-12d3-a456-426614174000",
"shopname": "New Shop Name",
...
}
```
## Error Responses
- **400 Bad Request**: No valid fields provided, or shop does not have an `external_shop_id`.
- **404 Not Found**: No shop found with the given ID.
- **500 Internal Server Error**: Unexpected error.
## Notes
- Only shops with an `external_shop_id` can be patched via this route.
- Fields not listed above will be ignored if included in the request body.
- The route is protected by the same middleware as other parts management endpoints.

View File

@@ -1,166 +0,0 @@
openapi: 3.0.3
info:
title: Parts Management Provisioning API
description: API endpoint to provision a new shop and user in the Parts Management system.
version: 1.0.0
paths:
/parts-management/provision:
post:
summary: Provision a new parts management shop and user
operationId: partsManagementProvisioning
tags:
- Parts Management
requestBody:
required: true
content:
application/json:
schema:
type: object
required:
- external_shop_id
- shopname
- address1
- city
- state
- zip_post
- country
- email
- phone
- userEmail
properties:
external_shop_id:
type: string
description: External shop ID (must be unique)
shopname:
type: string
address1:
type: string
address2:
type: string
nullable: true
city:
type: string
state:
type: string
zip_post:
type: string
country:
type: string
email:
type: string
phone:
type: string
userEmail:
type: string
format: email
userPassword:
type: string
description: Optional password for the new user. If provided, the password is set directly, and no password reset link is sent. Must be at least 6 characters.
nullable: true
logoUrl:
type: string
format: uri
nullable: true
timezone:
type: string
nullable: true
vendors:
type: array
items:
type: object
properties:
name:
type: string
street1:
type: string
nullable: true
street2:
type: string
nullable: true
city:
type: string
nullable: true
state:
type: string
nullable: true
zip:
type: string
nullable: true
country:
type: string
nullable: true
email:
type: string
format: email
nullable: true
discount:
type: number
nullable: true
due_date:
type: string
format: date
nullable: true
cost_center:
type: string
nullable: true
favorite:
type: array
items:
type: string
nullable: true
phone:
type: string
nullable: true
active:
type: boolean
nullable: true
dmsid:
type: string
nullable: true
responses:
'200':
description: Shop and user successfully created
content:
application/json:
schema:
type: object
properties:
shop:
type: object
properties:
id:
type: string
format: uuid
shopname:
type: string
user:
type: object
properties:
id:
type: string
email:
type: string
resetLink:
type: string
format: uri
nullable: true
description: Password reset link for the user. Only included if userPassword is not provided in the request.
'400':
description: Bad request (missing or invalid fields)
content:
application/json:
schema:
type: object
properties:
error:
type: string
'500':
description: Internal server error
content:
application/json:
schema:
type: object
properties:
error:
type: string

View File

@@ -1,59 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMEX IO Extractor</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
textarea {
width: 100%;
height: 200px;
}
.output-box {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
min-height: 40px;
}
.copy-button {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>IMEX IO Extractor</h1>
<textarea id="inputText" placeholder="Paste your text here..."></textarea>
<br>
<button onclick="extractIO()">Extract</button>
<div class="output-box" id="outputBox" contenteditable="true"></div>
<button class="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
<script>
function extractIO() {
const inputText = document.getElementById('inputText').value;
const ioNumbers = [...new Set(inputText.match(/IO-\d{4}/g))] // Extract unique IO-#### matches
.map(io => ({ io, num: parseInt(io.split('-')[1]) })) // Extract number part for sorting
.sort((a, b) => a.num - b.num) // Sort by the number
.map(item => item.io); // Extract sorted IO-####
document.getElementById('outputBox').innerText = ioNumbers.join(', '); // Display horizontally
}
function copyToClipboard() {
const outputBox = document.getElementById('outputBox');
const range = document.createRange();
range.selectNodeContents(outputBox);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
</script>
</body>
</html>

View File

@@ -1,10 +0,0 @@
services:
ragmate:
image: ghcr.io/ragmate/ragmate:latest
ports:
- "11434:11434"
env_file:
- .ragmate.env
volumes:
- .:/project
- ./docker_data/ragmate:/apps/cache

View File

@@ -1,236 +0,0 @@
# Production Board Kanban - React 19 & Ant Design 6 Optimizations
## Overview
This document outlines the optimizations made to the production board kanban components to leverage React 19's new compiler and Ant Design 6 capabilities.
## Key Optimizations Implemented
### 1. React Compiler Optimizations
#### Removed Manual Memoization
The React 19 compiler automatically handles memoization, so we removed unnecessary `useMemo`, `useCallback`, and `memo()` wrappers:
**Files Updated:**
**Main Components:**
- `production-board-kanban.component.jsx`
- `production-board-kanban.container.jsx`
- `production-board-kanban-card.component.jsx`
- `production-board-kanban.statistics.jsx`
**Trello-Board Components:**
- `trello-board/controllers/Board.jsx`
- `trello-board/controllers/Lane.jsx`
- `trello-board/controllers/BoardContainer.jsx`
- `trello-board/components/ItemWrapper.jsx`
**Benefits:**
- Cleaner, more readable code
- Reduced bundle size
- Better performance through compiler-optimized memoization
- Fewer function closures and re-creations
### 2. Simplified State Management
#### Removed Unnecessary Deep Cloning
**Before:**
```javascript
setBoardLanes((prevBoardLanes) => {
const deepClonedData = cloneDeep(newBoardData);
if (!isEqual(prevBoardLanes, deepClonedData)) {
return deepClonedData;
}
return prevBoardLanes;
});
```
**After:**
```javascript
setBoardLanes(newBoardData);
```
**Benefits:**
- Removed lodash `cloneDeep` and `isEqual` dependencies from this component
- React 19's compiler handles change detection efficiently
- Reduced memory overhead
- Faster state updates
### 3. Component Simplification
#### Removed `memo()` Wrapper
**Before:**
```javascript
const EllipsesToolTip = memo(({ title, children, kiosk }) => {
// component logic
});
EllipsesToolTip.displayName = "EllipsesToolTip";
```
**After:**
```javascript
function EllipsesToolTip({ title, children, kiosk }) {
// component logic
}
```
**Benefits:**
- Compiler handles optimization automatically
- No need for manual displayName assignment
- Cleaner component definition
### 4. Optimized Computed Values
#### Replaced useMemo with Direct Calculations
**Before:**
```javascript
const totalHrs = useMemo(() => {
if (!cardSettings.totalHrs) return null;
const total = calculateTotal(data, "labhrs", "mod_lb_hrs") + calculateTotal(data, "larhrs", "mod_lb_hrs");
return parseFloat(total.toFixed(2));
}, [data, cardSettings.totalHrs]);
```
**After:**
```javascript
const totalHrs = cardSettings.totalHrs
? parseFloat((calculateTotal(data, "labhrs", "mod_lb_hrs") + calculateTotal(data, "larhrs", "mod_lb_hrs")).toFixed(2))
: null;
```
**Benefits:**
- Compiler automatically memoizes when needed
- More concise code
- Better readability
### 5. Improved Card Rendering
#### Simplified Employee Lookups
**Before:**
```javascript
const { employee_body, employee_prep, employee_refinish, employee_csr } = useMemo(() => {
return {
employee_body: metadata?.employee_body && findEmployeeById(employees, metadata.employee_body),
employee_prep: metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep),
// ...
};
}, [metadata, employees]);
```
**After:**
```javascript
const employee_body = metadata?.employee_body && findEmployeeById(employees, metadata.employee_body);
const employee_prep = metadata?.employee_prep && findEmployeeById(employees, metadata.employee_prep);
// ...
```
**Benefits:**
- Direct assignments are cleaner
- Compiler optimizes automatically
- Easier to debug
### 6. Optimized Trello-Board Controllers
#### BoardContainer Optimizations
- Removed `useCallback` from `wireEventBus`, `onDragStart`, and `onLaneDrag`
- Removed lodash `isEqual` for drag position comparison (uses direct comparison)
- Simplified event binding logic
#### Lane Component Optimizations
- Removed `useCallback` from `toggleLaneCollapsed`, `renderDraggable`, `renderDroppable`, and `renderDragContainer`
- Direct function definitions for all render methods
- Compiler handles render optimization automatically
#### Board Component Optimizations
- Removed `useMemo` for orientation style selection
- Removed `useMemo` for grid item width calculation
- Direct conditional assignment for styles
## React 19 Compiler Benefits
The React 19 compiler provides automatic optimizations:
1. **Automatic Memoization**: Intelligently memoizes component outputs and computed values
2. **Smart Re-rendering**: Only re-renders components when props actually change
3. **Optimized Closures**: Reduces unnecessary closure creation
4. **Better Dead Code Elimination**: Removes unused code paths more effectively
## Ant Design 6 Compatibility
### Current Layout Approach
The current implementation uses `VirtuosoGrid` for vertical layouts, which provides:
- Virtual scrolling for performance
- Responsive grid layout
- Drag-and-drop support
### Potential Masonry Enhancement (Future Consideration)
While Ant Design 6 doesn't have a built-in Masonry component, the current grid layout can be enhanced with CSS Grid or a third-party masonry library if needed. The current implementation already provides:
- Flexible card sizing (small, medium, large)
- Responsive grid columns
- Efficient virtual scrolling
**Note:** The VirtuosoGrid approach is more performant for large datasets due to virtualization, making it preferable over a traditional masonry layout for this use case.
## Third-Party Library Considerations
### DND Library (Drag and Drop)
The `trello-board/dnd` directory contains a vendored drag-and-drop library that uses `use-memo-one` for memoization. **We intentionally did not modify this library** because:
- It's third-party code that should be updated at the source
- It uses a specialized memoization library (`use-memo-one`) for drag-and-drop performance
- Modifying it could introduce bugs or break drag-and-drop functionality
- The library's internal memoization is specifically tuned for DND operations
## Performance Improvements
### Measured Benefits:
1. **Bundle Size**: Reduced by removing lodash deep clone/equal operations from main component
2. **Memory Usage**: Lower memory footprint with direct state updates
3. **Render Performance**: Compiler-optimized re-renders
4. **Code Maintainability**: Cleaner, more readable code
### Optimization Statistics:
- **Removed hooks**: 25+ useMemo/useCallback hooks across components
- **Removed memo wrappers**: 2 (EllipsesToolTip, ItemWrapper)
- **Lines of code reduced**: ~150+ lines of memoization boilerplate
### Virtual Scrolling
The components continue to leverage `Virtuoso` and `VirtuosoGrid` for optimal performance with large card lists:
- Only renders visible cards
- Maintains scroll position during updates
- Handles thousands of cards efficiently
## Testing Recommendations
1. **Visual Regression Testing**: Ensure card layout and interactions work correctly
2. **Performance Testing**: Measure render times with large datasets
3. **Drag-and-Drop Testing**: Verify drag-and-drop functionality remains intact
4. **Responsive Testing**: Test on various screen sizes
5. **Filter Testing**: Ensure all filters work correctly with optimized code
6. **Memory Profiling**: Verify reduced memory usage with React DevTools Profiler
## Migration Notes
### Breaking Changes
None - All optimizations are internal and maintain the same component API.
### Backward Compatibility
The components remain fully compatible with existing usage patterns.
## Future Enhancement Opportunities
1. **CSS Grid Masonry**: Consider CSS Grid masonry when widely supported
2. **Animation Improvements**: Leverage React 19's improved transition APIs
3. **Concurrent Features**: Explore React 19's concurrent rendering for smoother UX
4. **Suspense Integration**: Consider wrapping async operations with Suspense boundaries
5. **DND Library Update**: Monitor for React 19-compatible drag-and-drop libraries
## Conclusion
These optimizations modernize the production board kanban for React 19 while maintaining all functionality. The React Compiler handles memoization intelligently, allowing for cleaner, more maintainable code while achieving better performance. The trello-board directory has been fully optimized except for the vendored DND library, which should remain unchanged until an official React 19-compatible update is available.
---
**Last Updated**: January 2026
**React Version**: 19.2.3
**Ant Design Version**: 6.2.0
**Files Optimized**: 8 custom components + controllers
**DND Library**: Intentionally preserved (use-memo-one based)

View File

@@ -1,593 +0,0 @@
# React 19 & Ant Design 6 Upgrade - Deprecation Fixes Report
## Overview
This document outlines all deprecations fixed during the upgrade from React 18 to React 19 and Ant Design 5 to Ant Design 6 in the branch `feature/IO-3499-React-19` compared to `origin/master-AIO`.
---
## 1. Core Dependency Updates
### React & React DOM
- **Upgraded from:** React ^18.3.1 → React ^19.2.4
- **Upgraded from:** React DOM ^18.3.1 → React DOM ^19.2.4
- **Impact:** Enabled React 19 compiler optimizations and new concurrent features
### Ant Design
- **Upgraded from:** Ant Design ^5.28.1 → ^6.2.2
- **Upgraded from:** @ant-design/icons ^5.6.1 → ^6.1.0
- **Impact:** Access to Ant Design 6 improvements and API changes
### Apollo GraphQL
- **@apollo/client:** ^3.13.9 → ^4.1.3
- **apollo-link-logger:** ^2.0.1 → ^3.0.0
- **graphql-ws:** ^6.0.7 (added for WebSocket subscriptions)
- **Impact:** Major version upgrade with breaking changes to import paths and API
### React Ecosystem Libraries
- **react-router-dom:** ^6.30.0 → ^7.13.0
- **react-i18next:** ^15.7.3 → ^16.5.4
- **react-grid-layout:** 1.3.4 → ^2.2.2
- **@testing-library/react:** ^16.3.1 → ^16.3.2
- **styled-components:** ^6.2.0 → ^6.3.8
### Build Tools
- **Vite:** ^7.3.1 (maintained, peer dependencies updated)
- **vite-plugin-babel:** ^1.3.2 → ^1.4.1
- **vite-plugin-node-polyfills:** ^0.24.0 → ^0.25.0
- **vitest:** ^3.2.4 → ^4.0.18
### Monitoring & Analytics
- **@sentry/react:** ^9.43.0 → ^10.38.0
- **@sentry/cli:** ^2.58.2 → ^3.1.0
- **@sentry/vite-plugin:** ^4.6.1 → ^4.8.0
- **logrocket:** ^9.0.2 → ^12.0.0
- **posthog-js:** ^1.315.1 → ^1.336.4
- **@amplitude/analytics-browser:** ^2.33.1 → ^2.34.0
### Other Key Dependencies
- **axios:** ^1.13.2 → ^1.13.4
- **env-cmd:** ^10.1.0 → ^11.0.0
- **i18next:** ^25.7.4 → ^25.8.0
- **libphonenumber-js:** ^1.12.33 → ^1.12.36
- **lightningcss:** ^1.30.2 → ^1.31.1
- **@fingerprintjs/fingerprintjs:** ^4.6.1 → ^5.0.1
- **@firebase/app:** ^0.14.6 → ^0.14.7
- **@firebase/firestore:** ^4.9.3 → ^4.10.0
### Infrastructure
- **Node.js:** 22.x → 24.x (Dockerfile updated)
---
## 2. React 19 Compiler Optimizations
### Manual Memoization Removed
React 19's new compiler automatically optimizes components, making manual memoization unnecessary and potentially counterproductive.
#### 2.1 `useMemo` Hook Removals
**Example - Job Watchers:**
```javascript
// BEFORE
const jobWatchers = useMemo(() => (watcherData?.job_watchers ? [...watcherData.job_watchers] : []), [watcherData]);
// AFTER
// Do NOT clone arrays; keep referential stability for React Compiler and to reduce rerenders.
const jobWatchers = watcherData?.job_watchers ?? EMPTY_ARRAY;
```
**Benefits:**
- Eliminates unnecessary array cloning
- Maintains referential stability for React Compiler
- Reduces re-renders
- Cleaner, more readable code
**Files Affected:**
- Multiple kanban components
- Production board components
- Job management components
#### 2.2 `useCallback` Hook Removals
**Example - Card Lookup Function:**
```javascript
// BEFORE
const getCardByID = useCallback((data, cardId) => {
for (const lane of data.lanes) {
for (const card of lane.cards) {
// ... logic
}
}
}, [/* dependencies */]);
// AFTER
const getCardByID = (data, cardId) => {
for (const lane of data.lanes) {
for (const card of lane.cards) {
// ... logic
}
}
};
```
**Benefits:**
- React 19 compiler automatically optimizes function references
- Reduced complexity in component code
- No need to manage dependency arrays
**Files Affected:**
- production-board-kanban.component.jsx
- production-board-kanban.container.jsx
- Multiple board controller components
#### 2.3 `React.memo()` Wrapper Removals
**Example - EllipsesToolTip Component:**
```javascript
// BEFORE
const EllipsesToolTip = memo(({ title, children, kiosk }) => {
if (kiosk || !title) {
return <div className="ellipses no-select">{children}</div>;
}
return (
<Tooltip title={title}>
<div className="ellipses no-select">{children}</div>
</Tooltip>
);
});
EllipsesToolTip.displayName = "EllipsesToolTip";
// AFTER
function EllipsesToolTip({ title, children, kiosk }) {
if (kiosk || !title) {
return <div className="ellipses no-select">{children}</div>;
}
return (
<Tooltip title={title}>
<div className="ellipses no-select">{children}</div>
</Tooltip>
);
}
```
**Benefits:**
- Compiler handles optimization automatically
- No need for manual displayName assignment
- Standard function syntax is cleaner
**Files Affected:**
- production-board-kanban-card.component.jsx
- EllipsesToolTip components
- Various utility components
---
## 3. State Management Optimizations
### Deep Cloning Elimination
React 19's compiler efficiently handles change detection, eliminating the need for manual deep cloning.
**Example - Board Lanes State Update:**
```javascript
// BEFORE
setBoardLanes((prevBoardLanes) => {
const deepClonedData = cloneDeep(newBoardData);
if (!isEqual(prevBoardLanes, deepClonedData)) {
return deepClonedData;
}
return prevBoardLanes;
});
// AFTER
setBoardLanes(newBoardData);
```
**Benefits:**
- Removed lodash dependencies (`cloneDeep`, `isEqual`) from components
- Reduced memory overhead
- Faster state updates
- React 19's compiler handles change detection efficiently
---
## 4. Import Cleanup
### React Import Simplifications
**Example - Removed Unnecessary Hook Imports:**
```javascript
// BEFORE
import { useMemo, useState, useEffect, useCallback } from "react";
// AFTER
import { useState, useEffect } from "react";
```
Multiple files had their React imports streamlined by removing `useMemo`, `useCallback`, and `memo` imports that are no longer needed.
---
## 5. Apollo Client 4.x Migration
### Import Path Changes
Apollo Client 4.x requires React-specific imports to come from `@apollo/client/react` instead of the main package.
**Example - Hook Imports:**
```javascript
// BEFORE (Apollo Client 3.x)
import { useQuery, useMutation, useLazyQuery } from "@apollo/client";
import { ApolloProvider } from "@apollo/client";
import { useApolloClient } from "@apollo/client";
// AFTER (Apollo Client 4.x)
import { useQuery, useMutation, useLazyQuery } from "@apollo/client/react";
import { ApolloProvider } from "@apollo/client/react";
import { useApolloClient } from "@apollo/client/react";
```
**Benefits:**
- Better tree-shaking for non-React Apollo Client usage
- Clearer separation between core and React-specific functionality
- Reduced bundle size for React-only applications
**Files Affected:**
- All components using Apollo hooks (50+ files)
- Main app provider component
- GraphQL container components
### `useLazyQuery` API Changes
The return value destructuring pattern for `useLazyQuery` changed in Apollo Client 4.x.
**Example - Query Function Extraction:**
```javascript
// BEFORE (Apollo Client 3.x)
const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
variables: { jobids: [context.jobid] },
skip: !context?.jobid
});
// AFTER (Apollo Client 4.x)
const [loadRoAndOwnerByJobPks, { data, loading: queryLoading, error: queryError, refetch, called }] = useLazyQuery(
QUERY_RO_AND_OWNER_BY_JOB_PKS
);
// Call the query function explicitly when needed
useEffect(() => {
if (context?.jobid) {
loadRoAndOwnerByJobPks({ variables: { jobids: [context.jobid] } });
}
}, [context?.jobid, loadRoAndOwnerByJobPks]);
```
**Key Changes:**
- **Query function must be destructured**: Previously ignored with `,` now must be named
- **Options moved to function call**: `variables` and other options passed when calling the query function
- **`loading` renamed**: More consistent with `useQuery` hook naming
- **`called` property added**: Track if the query has been executed at least once
- **No more `skip` option**: Logic moved to conditional query execution
**Benefits:**
- More explicit control over when queries execute
- Better alignment with `useQuery` API patterns
- Clearer code showing query execution timing
**Files Affected:**
- card-payment-modal.component.jsx
- bill-form.container.jsx
- Multiple job and payment components
---
## 6. forwardRef Pattern Migration
React 19 simplifies ref handling by allowing `ref` to be passed as a regular prop, eliminating the need for `forwardRef` in most cases.
### forwardRef Wrapper Removal
**Example - Component Signature Change:**
```javascript
// BEFORE
import { forwardRef } from "react";
const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
const { t } = useTranslation();
return (
<Select
ref={ref}
options={generateOptions(options, allowRemoved, t)}
disabled={disabled}
{...restProps}
/>
);
};
export default forwardRef(BillLineSearchSelect);
// AFTER
const BillLineSearchSelect = ({ options, disabled, allowRemoved, ref, ...restProps }) => {
const { t } = useTranslation();
return (
<Select
ref={ref}
options={generateOptions(options, allowRemoved, t)}
disabled={disabled}
{...restProps}
/>
);
};
export default BillLineSearchSelect;
```
**Key Changes:**
- **`ref` as regular prop**: Moved from second parameter to first parameter as a regular prop
- **No `forwardRef` import needed**: Removed from React imports
- **No `forwardRef` wrapper**: Export component directly
- **Same ref behavior**: Works identically from parent component perspective
**Benefits:**
- Simpler component API (single parameter instead of two)
- Reduced boilerplate code
- Better TypeScript inference
- More intuitive for developers
**Components Migrated:**
- BillLineSearchSelect
- ContractStatusComponent
- CourtesyCarFuelComponent
- CourtesyCarReadinessComponent
- CourtesyCarStatusComponent
- EmployeeTeamSearchSelect
- FormInputNumberCalculator
- FormItemCurrency
- FormItemEmail
- 10+ additional form components
---
## 7. React.lazy Import Cleanup
React 19 makes `React.lazy` usage more seamless, and in some cases lazy imports were removed where they were no longer beneficial.
**Example - Lazy Import Removal:**
```javascript
// BEFORE
import { lazy, Suspense, useEffect, useRef, useState } from "react";
const LazyComponent = lazy(() => import('./HeavyComponent'));
// AFTER
import { Suspense, useEffect, useRef, useState } from "react";
// Lazy loading handled differently or component loaded directly
```
**Context:**
- Some components had lazy imports removed where the loading behavior wasn't needed
- `Suspense` boundaries maintained for actual lazy-loaded components
- React 19 improves Suspense integration
**Files Affected:**
- Multiple route components
- Dashboard components
- Heavy data visualization components
---
## 8. StrictMode Integration
React 19's StrictMode was explicitly added to help catch potential issues during development.
**Addition:**
```javascript
import { StrictMode } from "react";
root.render(
<StrictMode>
<App />
</StrictMode>
);
```
**Benefits:**
- Detects unexpected side effects
- Warns about deprecated APIs
- Validates React 19 best practices
- Double-invokes effects in development to catch issues
**Impact:**
- Helps ensure components work correctly with React 19 compiler
- Catches potential issues with state management
- Comment added: "This handles React StrictMode double-mounting"
---
## 9. React 19 New Hooks (Added Documentation)
The upgrade includes documentation for React 19's new concurrent hooks:
### `useFormStatus`
Track form submission state for better UX during async operations.
### `useOptimistic`
Implement optimistic UI updates that rollback on failure.
### `useActionState`
Manage server actions with pending states and error handling.
---
## 10. ESLint Configuration Updates
### React Compiler Plugin Added
**Addition to eslint.config.js:**
```javascript
plugins: {
"react-compiler": pluginReactCompiler
},
rules: {
"react-compiler/react-compiler": "error"
}
```
**Purpose:**
- Enforces React 19 compiler best practices
- Warns about patterns that prevent compiler optimizations
- Ensures code is compatible with automatic optimizations
---
## 11. Testing Library Updates
### @testing-library/react
- **Upgraded:** ^16.3.1 → ^16.3.2
- **Impact:** React 19 compatibility maintained
- Tests continue to work with updated React APIs
---
## 12. Peer Dependencies Updates
Multiple packages updated their peer dependency requirements to support React 19:
**Examples:**
```json
// BEFORE
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
}
// AFTER
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
```
**Affected Packages:**
- Multiple internal and external dependencies
- Ensures ecosystem compatibility with React 19
---
## 13. Ant Design 6 Changes
### Icon Package Update
- @ant-design/icons upgraded from ^5.6.1 to ^6.1.0
- Icon imports remain compatible (no breaking changes in usage patterns)
### Component API Compatibility
- Existing Ant Design component usage remains largely compatible
- Form.Item, Button, Modal, Table, and other components work with existing code
- No major API breaking changes required in application code
---
## 14. Validation & Quality Assurance
Based on the optimization summary included in the changes:
### Deprecations Verified as Fixed ✓
- **propTypes:** None found (already removed or using TypeScript)
- **defaultProps:** None found (using default parameters instead)
- **ReactDOM.render:** Already using createRoot
- **componentWillMount/Receive/Update:** No legacy lifecycle methods found
- **String refs:** Migrated to ref objects and useRef hooks
### Performance Improvements
- Cleaner, more readable code
- Reduced bundle size (removed unnecessary memoization wrappers)
- Better performance through compiler-optimized memoization
- Fewer function closures and re-creations
- Reduced memory overhead from eliminated deep cloning
---
## Summary Statistics
### Dependencies Updated
- **Core:** 3 major updates (React, Ant Design, Apollo Client)
- **GraphQL:** 2 packages (Apollo Client 3→4, apollo-link-logger 2→3)
- **Ecosystem:** 10+ related libraries (router, i18next, grid layout, etc.)
- **Build Tools:** 3 plugins/tools (Vite plugins, vitest)
- **Monitoring:** 6 packages (Sentry, LogRocket, PostHog, Amplitude)
- **Infrastructure:** Node.js 22 → 24
### Code Patterns Modernized
- **useMemo removals:** 15+ instances across multiple files
- **useCallback removals:** 10+ instances
- **memo() wrapper removals:** 5+ components
- **Deep clone eliminations:** Multiple state management simplifications
- **Import cleanups:** Dozens of simplified import statements
- **Apollo import migrations:** 50+ files updated to `/react` imports
- **forwardRef removals:** 15+ components migrated to direct ref props
- **useLazyQuery updates:** Multiple query patterns updated for Apollo 4.x API
- **lazy import cleanups:** Several unnecessary lazy imports removed
- **StrictMode integration:** Added to development builds
### Files Impacted
- **Production board kanban components:** Compiler optimization removals
- **Trello-board controllers and components:** Memoization removals
- **Job management components:** State management simplifications
- **All GraphQL components:** Apollo Client 4.x import migrations (50+ files)
- **Form components:** forwardRef pattern migrations (15+ components)
- **Payment components:** useLazyQuery API updates
- **Various utility components:** Import cleanups
- **Build configuration files:** ESLint React compiler plugin
- **Docker infrastructure:** Node.js 22→24 upgrade
- **App root:** StrictMode integration
- **Package manifests:** 30+ dependency upgrades
---
## Recommendations for Future Development
1. **Avoid Manual Memoization:** Let React 19 compiler handle optimization automatically
2. **Use ESLint React Compiler Plugin:** Catch patterns that prevent optimizations
3. **Maintain Referential Stability:** Use constant empty arrays/objects instead of creating new ones
4. **Leverage New React 19 Hooks:** Use `useOptimistic`, `useFormStatus`, and `useActionState` for better UX
5. **Monitor Compiler Warnings:** Address any compiler optimization warnings during development
6. **Apollo Client 4.x Imports:** Always import React hooks from `@apollo/client/react`
7. **Ref as Props:** Use `ref` as a regular prop instead of `forwardRef` wrapper
8. **useLazyQuery Pattern:** Extract query function and call explicitly rather than using `skip` option
9. **StrictMode Aware:** Ensure components handle double-mounting in development properly
10. **Keep Dependencies Updated:** Monitor for peer dependency compatibility as ecosystem evolves
---
## Conclusion
This comprehensive upgrade successfully modernizes the codebase across multiple dimensions:
### Major Achievements
1. **React 19 Migration:** Leveraged new compiler optimizations by removing manual memoization
2. **Apollo Client 4.x:** Updated all GraphQL operations to new import patterns and APIs
3. **Ant Design 6:** Maintained UI consistency while gaining access to latest features
4. **forwardRef Elimination:** Simplified 15+ components by using refs as regular props
5. **Dependency Modernization:** Updated 30+ packages including monitoring, build tools, and ecosystem libraries
6. **Infrastructure Upgrade:** Node.js 24.x support for latest runtime features
### Code Quality Improvements
- **Cleaner code:** Removed unnecessary wrappers and boilerplate
- **Better performance:** Compiler-optimized rendering without manual hints
- **Reduced bundle size:** Removed lodash cloning, unnecessary lazy imports, and redundant memoization
- **Improved maintainability:** Simpler patterns that are easier to understand and modify
- **Enhanced DX:** ESLint integration catches optimization blockers during development
### Migration Completeness
✅ All React 18→19 deprecations addressed
✅ All Apollo Client 3→4 breaking changes handled
✅ All Ant Design 5→6 updates applied
✅ All monitoring libraries updated to latest versions
✅ StrictMode integration for development safety
✅ Comprehensive testing library compatibility maintained
**No breaking changes to application functionality** - The upgrade maintains backward compatibility in behavior while providing forward-looking improvements in implementation.

View File

@@ -1,468 +0,0 @@
# React 19 Features Guide
## Overview
This guide covers the new React 19 features available in our codebase and provides practical examples for implementing them.
---
## 1. New Hooks for Forms
### `useFormStatus` - Track Form Submission State
**What it does:** Provides access to the current form's submission status without manual state management.
**Use Case:** Show loading states on submit buttons, disable inputs during submission.
**Example:**
```jsx
import { useFormStatus } from 'react';
function SubmitButton() {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? 'Saving...' : 'Save'}
</button>
);
}
function JobForm({ onSave }) {
return (
<form action={onSave}>
<input name="jobNumber" />
<SubmitButton />
</form>
);
}
```
**Benefits:**
- No manual `useState` for loading states
- Automatic re-renders when form status changes
- Better separation of concerns (button doesn't need form state)
---
### `useOptimistic` - Instant UI Updates
**What it does:** Updates UI immediately while async operations complete in the background.
**Use Case:** Comments, notes, status updates - anything where you want instant feedback.
**Example:**
```jsx
import { useState, useOptimistic } from 'react';
function JobNotes({ jobId, initialNotes }) {
const [notes, setNotes] = useState(initialNotes);
const [optimisticNotes, addOptimisticNote] = useOptimistic(
notes,
(current, newNote) => [...current, newNote]
);
async function handleAddNote(formData) {
const text = formData.get('note');
const tempNote = { id: Date.now(), text, pending: true };
// Show immediately
addOptimisticNote(tempNote);
// Save to server
const saved = await saveNote(jobId, text);
setNotes([...notes, saved]);
}
return (
<form action={handleAddNote}>
<textarea name="note" />
<button type="submit">Add Note</button>
<ul>
{optimisticNotes.map(note => (
<li key={note.id} style={{ opacity: note.pending ? 0.5 : 1 }}>
{note.text}
</li>
))}
</ul>
</form>
);
}
```
**Benefits:**
- Perceived performance improvement
- Better UX - users see changes instantly
- Automatic rollback on error (if implemented)
---
### `useActionState` - Complete Form State Management
**What it does:** Manages async form submissions with built-in loading, error, and success states.
**Use Case:** Form validation, API submissions, complex form workflows.
**Example:**
```jsx
import { useActionState } from 'react';
async function createContract(prevState, formData) {
const data = {
customerId: formData.get('customerId'),
vehicleId: formData.get('vehicleId'),
};
try {
const result = await fetch('/api/contracts', {
method: 'POST',
body: JSON.stringify(data),
});
if (!result.ok) {
return { error: 'Failed to create contract', data: null };
}
return { error: null, data: await result.json() };
} catch (err) {
return { error: err.message, data: null };
}
}
function ContractForm() {
const [state, submitAction, isPending] = useActionState(
createContract,
{ error: null, data: null }
);
return (
<form action={submitAction}>
<input name="customerId" required />
<input name="vehicleId" required />
<button type="submit" disabled={isPending}>
{isPending ? 'Creating...' : 'Create Contract'}
</button>
{state.error && <div className="error">{state.error}</div>}
{state.data && <div className="success">Contract #{state.data.id} created!</div>}
</form>
);
}
```
**Benefits:**
- Replaces multiple `useState` calls
- Built-in pending state
- Cleaner error handling
- Type-safe with TypeScript
---
## 2. Actions API
The Actions API simplifies form submissions and async operations by using the native `action` prop on forms.
### Traditional Approach (React 18):
```jsx
function OldForm() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
setError(null);
try {
const formData = new FormData(e.target);
await saveData(formData);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
return (
<form onSubmit={handleSubmit}>
{/* form fields */}
</form>
);
}
```
### Modern Approach (React 19):
```jsx
import { useActionState } from 'react';
function NewForm() {
const [state, formAction, isPending] = useActionState(async (_, formData) => {
return await saveData(formData);
}, null);
return (
<form action={formAction}>
{/* form fields */}
</form>
);
}
```
---
## 3. Practical Implementation Examples
### Example 1: Owner/Customer Form with Optimistic UI
```jsx
import { useOptimistic, useActionState } from 'react';
import { Form, Input, Button } from 'antd';
function OwnerFormModern({ owner, onSave }) {
const [optimisticOwner, setOptimisticOwner] = useOptimistic(
owner,
(current, updates) => ({ ...current, ...updates })
);
const [state, submitAction, isPending] = useActionState(
async (_, formData) => {
const updates = {
name: formData.get('name'),
phone: formData.get('phone'),
email: formData.get('email'),
};
// Show changes immediately
setOptimisticOwner(updates);
// Save to server
try {
await onSave(updates);
return { success: true };
} catch (error) {
return { success: false, error: error.message };
}
},
{ success: null }
);
return (
<form action={submitAction}>
<Form.Item label="Name">
<Input name="name" defaultValue={optimisticOwner.name} />
</Form.Item>
<Form.Item label="Phone">
<Input name="phone" defaultValue={optimisticOwner.phone} />
</Form.Item>
<Form.Item label="Email">
<Input name="email" defaultValue={optimisticOwner.email} />
</Form.Item>
<Button type="primary" htmlType="submit" loading={isPending}>
{isPending ? 'Saving...' : 'Save Owner'}
</Button>
{state.error && <div className="error">{state.error}</div>}
</form>
);
}
```
### Example 2: Job Status Update with useFormStatus
```jsx
import { useFormStatus } from 'react';
function JobStatusButton({ status }) {
const { pending } = useFormStatus();
return (
<button disabled={pending}>
{pending ? 'Updating...' : `Mark as ${status}`}
</button>
);
}
function JobStatusForm({ jobId, currentStatus }) {
async function updateStatus(formData) {
const newStatus = formData.get('status');
await fetch(`/api/jobs/${jobId}/status`, {
method: 'PATCH',
body: JSON.stringify({ status: newStatus }),
});
}
return (
<form action={updateStatus}>
<input type="hidden" name="status" value="IN_PROGRESS" />
<JobStatusButton status="In Progress" />
</form>
);
}
```
---
## 4. Third-Party Library Compatibility
### ✅ Fully Compatible (Already in use)
1. **Ant Design 6.2.0**
- ✅ Full React 19 support out of the box
- ✅ No patches or workarounds needed
- 📝 Note: Ant Design 6 was built with React 19 in mind
2. **React-Redux 9.2.0**
- ✅ Full React 19 support
- ✅ All hooks (`useSelector`, `useDispatch`) work correctly
- 📝 Tip: Continue using hooks over `connect()` HOC
3. **Apollo Client 4.0.13**
- ✅ Compatible with React 19
-`useQuery`, `useMutation` work correctly
- 📝 Note: Supports React 19's concurrent features
4. **React Router 7.12.0**
- ✅ Full React 19 support
- ✅ All navigation hooks compatible
- ✅ Future flags enabled for optimal performance
### Integration Notes
All our major dependencies are already compatible with React 19:
- No additional patches needed
- No breaking changes in current code
- All hooks and patterns continue to work
---
## 5. Migration Strategy
### Gradual Adoption Approach
**Phase 1: Learn** (Current)
- Review this guide
- Understand new hooks and patterns
- Identify good candidates for migration
**Phase 2: Pilot** (Recommended)
- Start with new features/forms
- Try `useActionState` in one new form
- Measure developer experience improvement
**Phase 3: Refactor** (Optional)
- Gradually update high-traffic forms
- Add optimistic UI to user-facing features
- Simplify complex form state management
### Good Candidates for React 19 Features
1. **Forms with Complex Loading States**
- Contract creation
- Job creation/editing
- Owner/Vehicle forms
- → Use `useActionState`
2. **Instant Feedback Features**
- Adding job notes
- Status updates
- Comments/messages
- → Use `useOptimistic`
3. **Submit Buttons**
- Any form button that needs loading state
- → Use `useFormStatus`
### Don't Rush to Refactor
**Keep using current patterns for:**
- Ant Design Form components (already excellent)
- Redux for global state
- Apollo Client for GraphQL
- Existing working code
**Only refactor when:**
- Building new features
- Fixing bugs in forms
- Simplifying overly complex state management
---
## 6. Performance Improvements in React 19
### Automatic Optimizations
React 19 includes built-in compiler optimizations that automatically improve performance:
1. **Automatic Memoization**
- Less need for `useMemo` and `useCallback`
- Components automatically optimize re-renders
2. **Improved Concurrent Rendering**
- Better handling of heavy operations
- Smoother UI during data loading
3. **Enhanced Suspense**
- Better loading states
- Improved streaming SSR
**What this means for us:**
- Existing code may run faster without changes
- Future code will be easier to write
- Less manual optimization needed
---
## 7. Resources
### Official Documentation
- [React 19 Release Notes](https://react.dev/blog/2024/12/05/react-19)
- [useActionState](https://react.dev/reference/react/useActionState)
- [useFormStatus](https://react.dev/reference/react-dom/hooks/useFormStatus)
- [useOptimistic](https://react.dev/reference/react/useOptimistic)
### Migration Guides
- [React 18 to 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
- [Actions API Documentation](https://react.dev/reference/react/useActionState)
### Community Resources
- [React 19 Features Tutorial](https://www.freecodecamp.org/news/react-19-actions-simpliy-form-submission-and-loading-states/)
- [Practical Examples](https://blog.logrocket.com/react-useactionstate/)
---
## 8. Summary
### Current Status
**All dependencies compatible with React 19**
- Ant Design 6.2.0 ✓
- React-Redux 9.2.0 ✓
- Apollo Client 4.0.13 ✓
- React Router 7.12.0 ✓
### New Features Available
🎯 **Ready to use in new code:**
- `useFormStatus` - Track form submission state
- `useOptimistic` - Instant UI updates
- `useActionState` - Complete form state management
- Actions API - Cleaner form handling
### Recommendations
1.**No immediate action required** - Everything works
2. 🎯 **Start using new features in new code** - Especially forms
3. 📚 **Learn gradually** - No need to refactor everything
4. 🚀 **Enjoy performance improvements** - Automatic optimizations active
---
## Questions or Need Help?
Feel free to:
- Try examples in a branch first
- Ask the team for code reviews
- Share patterns that work well
- Document new patterns you discover
**Happy coding with React 19! 🎉**

View File

@@ -1,382 +0,0 @@
# React 19 Migration - Complete Summary
**Date:** January 13, 2026
**Project:** Bodyshop Client Application
**Status:** ✅ Complete
---
## Migration Overview
Successfully upgraded from React 18 to React 19 with zero breaking changes and minimal code
modifications.
---
## Changes Made
### 1. Package Updates
| Package | Before | After |
|------------------|--------|------------|
| react | 18.3.1 | **19.2.3** |
| react-dom | 18.3.1 | **19.2.3** |
| react-router-dom | 6.30.3 | **7.12.0** |
**Updated Files:**
- `package.json`
- `package-lock.json`
### 2. Code Changes
**File:** `src/index.jsx`
Added React Router v7 future flags to enable optimal performance:
```javascript
const router = sentryCreateBrowserRouter(
createRoutesFromElements(<Route path="*" element={<AppContainer/>}/>),
{
future: {
v7_startTransition: true, // Smooth transitions
v7_relativeSplatPath: true, // Correct splat path resolution
},
}
);
```
**Why:** These flags enable React Router v7's enhanced transition behavior and fix relative path
resolution in splat routes (`path="*"`).
### 3. Documentation Created
Created comprehensive guides for the team:
1. **REACT_19_FEATURES_GUIDE.md** (12KB)
- Overview of new React 19 hooks
- Practical examples for our codebase
- Third-party library compatibility check
- Migration strategy and recommendations
2. **REACT_19_MODERNIZATION_EXAMPLES.md** (10KB)
- Before/after code comparisons
- Real-world examples from our codebase
- Step-by-step modernization checklist
- Best practices for gradual adoption
---
## Verification Results
### ✅ Build
- **Status:** Success
- **Time:** 42-48 seconds
- **Warnings:** None (only Sentry auth token warnings - expected)
- **Output:** 238 files, 7.6 MB precached
### ✅ Tests
- **Unit Tests:** 5/5 passing
- **Duration:** ~5 seconds
- **Status:** All green
### ✅ Linting
- **Status:** Clean
- **Errors:** 0
- **Warnings:** 0
### ✅ Code Analysis
- **String refs:** None found ✓
- **defaultProps:** None found ✓
- **Legacy context:** None found ✓
- **ReactDOM.render:** Already using createRoot ✓
---
## Third-Party Library Compatibility
All major dependencies are fully compatible with React 19:
### ✅ Ant Design 6.2.0
- **Status:** Full support, no patches needed
- **Notes:** Version 6 was built with React 19 in mind
- **Action Required:** None
### ✅ React-Redux 9.2.0
- **Status:** Full compatibility
- **Notes:** All hooks work correctly
- **Action Required:** None
### ✅ Apollo Client 4.0.13
- **Status:** Compatible
- **Notes:** Supports React 19 concurrent features
- **Action Required:** None
### ✅ React Router 7.12.0
- **Status:** Fully compatible
- **Notes:** Future flags enabled for optimal performance
- **Action Required:** None
---
## New Features Available
React 19 introduces several powerful new features now available in our codebase:
### 1. `useFormStatus`
**Purpose:** Track form submission state without manual state management
**Use Case:** Show loading states on buttons, disable during submission
**Complexity:** Low - drop-in replacement for manual loading states
### 2. `useOptimistic`
**Purpose:** Update UI instantly while async operations complete
**Use Case:** Comments, notes, status updates - instant user feedback
**Complexity:** Medium - requires understanding of optimistic UI patterns
### 3. `useActionState`
**Purpose:** Complete async form state management (loading, error, success)
**Use Case:** Form submissions, API calls, complex workflows
**Complexity:** Medium - replaces multiple useState calls
### 4. Actions API
**Purpose:** Simpler form handling with native `action` prop
**Use Case:** Any form submission or async operation
**Complexity:** Low to Medium - cleaner than traditional onSubmit
---
## Performance Improvements
React 19 includes automatic performance optimizations:
-**Automatic Memoization** - Less need for useMemo/useCallback
-**Improved Concurrent Rendering** - Smoother UI during heavy operations
-**Enhanced Suspense** - Better loading states
-**Compiler Optimizations** - Automatic code optimization
**Impact:** Existing code may run faster without any changes.
---
## Recommendations
### Immediate (No Action Required)
- ✅ Migration is complete
- ✅ All code works as-is
- ✅ Performance improvements are automatic
### Short Term (Optional - For New Code)
1. **Read the Documentation**
- Review `REACT_19_FEATURES_GUIDE.md`
- Understand new hooks and patterns
2. **Try in New Features**
- Use `useActionState` in new forms
- Experiment with `useOptimistic` for notes/comments
- Use `useFormStatus` for submit buttons
3. **Share Knowledge**
- Discuss patterns in code reviews
- Share what works well
- Document team preferences
### Long Term (Optional - Gradual Refactoring)
1. **High-Traffic Forms**
- Add optimistic UI to frequently-used features
- Simplify complex loading state management
2. **New Features**
- Default to React 19 patterns for new code
- Build examples for the team
3. **Team Training**
- Share learnings
- Update coding standards
- Create internal patterns library
---
## What NOT to Do
**Don't rush to refactor everything**
- Current code works perfectly
- Ant Design forms are already excellent
- Only refactor when there's clear benefit
**Don't force new patterns**
- Some forms work better with traditional patterns
- Complex Ant Design forms should stay as-is
- Use new features where they make sense
**Don't break working code**
- If it ain't broke, don't fix it
- New features are additive, not replacements
- Migration is about gradual improvement
---
## Success Metrics
### Migration Quality: A+
- ✅ Zero breaking changes
- ✅ Zero deprecation warnings
- ✅ All tests passing
- ✅ Build successful
- ✅ Linting clean
### Code Health: Excellent
- ✅ Already using React 18+ APIs
- ✅ No deprecated patterns
- ✅ Modern component structure
- ✅ Good separation of concerns
### Future Readiness: High
- ✅ All dependencies compatible
- ✅ Ready for React 19 features
- ✅ No technical debt blocking adoption
- ✅ Clear migration path documented
---
## Timeline
| Date | Action | Status |
|--------------|-----------------------|------------|
| Jan 13, 2026 | Package updates | ✅ Complete |
| Jan 13, 2026 | Future flags added | ✅ Complete |
| Jan 13, 2026 | Build verification | ✅ Complete |
| Jan 13, 2026 | Test verification | ✅ Complete |
| Jan 13, 2026 | Documentation created | ✅ Complete |
| Jan 13, 2026 | Console warning fixed | ✅ Complete |
**Total Time:** ~1 hour
**Issues Encountered:** 0
**Rollback Required:** No
---
## Team Next Steps
### For Developers
1. ✅ Pull latest changes
2. 📚 Read `REACT_19_FEATURES_GUIDE.md`
3. 🎯 Try new patterns in next feature
4. 💬 Share feedback with team
### For Team Leads
1. ✅ Review documentation
2. 📋 Discuss adoption strategy in next standup
3. 🎯 Identify good pilot features
4. 📊 Track developer experience improvements
### For QA
1. ✅ No regression testing needed
2. ✅ All existing tests pass
3. 🎯 Watch for new features using React 19 patterns
4. 📝 Document any issues (none expected)
---
## Support Resources
### Internal Documentation
- [React 19 Features Guide](REACT_19_FEATURES_GUIDE.md)
- [Modernization Examples](REACT_19_MODERNIZATION_EXAMPLES.md)
- This summary document
### Official React Documentation
- [React 19 Release Notes](https://react.dev/blog/2024/12/05/react-19)
- [Migration Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)
- [New Hooks Reference](https://react.dev/reference/react)
### Community Resources
- [LogRocket Guide](https://blog.logrocket.com/react-useactionstate/)
- [FreeCodeCamp Tutorial](https://www.freecodecamp.org/news/react-19-actions-simpliy-form-submission-and-loading-states/)
---
## Conclusion
The migration to React 19 was **successful, seamless, and non-disruptive**.
### Key Achievements
- ✅ Zero downtime
- ✅ Zero breaking changes
- ✅ Zero code refactoring required
- ✅ Enhanced features available
- ✅ Automatic performance improvements
### Why It Went Smoothly
1. **Codebase was already modern**
- Using ReactDOM.createRoot
- No deprecated APIs
- Good patterns in place
2. **Dependencies were ready**
- All libraries React 19 compatible
- No version conflicts
- Smooth upgrade path
3. **React 19 is backward compatible**
- New features are additive
- Old patterns still work
- Gradual adoption possible
**Status: Ready for Production**
---
## Questions?
If you have questions about:
- Using new React 19 features
- Migrating specific components
- Best practices for patterns
- Code review guidance
Feel free to:
- Check the documentation
- Ask in team chat
- Create a POC/branch
- Request code review
**Happy coding with React 19!** 🎉🚀

View File

@@ -1,375 +0,0 @@
# React 19 Form Modernization Example
This document shows a practical example of how existing forms in our codebase could be simplified
using React 19 features.
---
## Example: Sign-In Form Modernization
### Current Implementation (React 18 Pattern)
```jsx
// Current approach using Redux, manual state management
function SignInComponent({emailSignInStart, loginLoading, signInError}) {
const [form] = Form.useForm();
const handleFinish = (values) => {
const {email, password} = values;
emailSignInStart(email, password);
};
return (
<Form form={form} onFinish={handleFinish}>
<Form.Item name="email" rules={[{required: true, type: 'email'}]}>
<Input prefix={<UserOutlined/>} placeholder="Email"/>
</Form.Item>
<Form.Item name="password" rules={[{required: true}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="Password"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loginLoading} block>
{loginLoading ? 'Signing in...' : 'Sign In'}
</Button>
</Form.Item>
{signInError && <AlertComponent type="error" message={signInError}/>}
</Form>
);
}
```
**Characteristics:**
- ✅ Works well with Ant Design
- ✅ Good separation with Redux
- ⚠️ Loading state managed in Redux
- ⚠️ Error state managed in Redux
- ⚠️ Multiple state slices for one operation
---
### Modern Alternative (React 19 Pattern)
**Option 1: Keep Ant Design + Add useActionState for cleaner Redux actions**
```jsx
import {useActionState} from 'react';
import {Form, Input, Button} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
function SignInModern() {
const [form] = Form.useForm();
// Wrap your Redux action with useActionState
const [state, submitAction, isPending] = useActionState(
async (prevState, formData) => {
try {
// Call your Redux action
await emailSignInAsync(
formData.get('email'),
formData.get('password')
);
return {error: null, success: true};
} catch (error) {
return {error: error.message, success: false};
}
},
{error: null, success: false}
);
return (
<Form
form={form}
onFinish={(values) => {
// Convert Ant Design form values to FormData
const formData = new FormData();
formData.append('email', values.email);
formData.append('password', values.password);
submitAction(formData);
}}
>
<Form.Item name="email" rules={[{required: true, type: 'email'}]}>
<Input prefix={<UserOutlined/>} placeholder="Email"/>
</Form.Item>
<Form.Item name="password" rules={[{required: true}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="Password"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={isPending} block>
{isPending ? 'Signing in...' : 'Sign In'}
</Button>
</Form.Item>
{state.error && <AlertComponent type="error" message={state.error}/>}
</Form>
);
}
```
**Benefits:**
- ✅ Loading state is local (no Redux slice needed)
- ✅ Error handling is simpler
- ✅ Still works with Ant Design validation
- ✅ Less Redux boilerplate
---
**Option 2: Native HTML Form + React 19 (for simpler use cases)**
```jsx
import {useActionState} from 'react';
import {signInWithEmailAndPassword} from '@firebase/auth';
import {auth} from '../../firebase/firebase.utils';
function SimpleSignIn() {
const [state, formAction, isPending] = useActionState(
async (prevState, formData) => {
const email = formData.get('email');
const password = formData.get('password');
try {
await signInWithEmailAndPassword(auth, email, password);
return {error: null};
} catch (error) {
return {error: error.message};
}
},
{error: null}
);
return (
<form action={formAction} className="sign-in-form">
<input
type="email"
name="email"
placeholder="Email"
required
/>
<input
type="password"
name="password"
placeholder="Password"
required
/>
<button type="submit" disabled={isPending}>
{isPending ? 'Signing in...' : 'Sign In'}
</button>
{state.error && <div className="error">{state.error}</div>}
</form>
);
}
```
**Benefits:**
- ✅ Minimal code
- ✅ No form library needed
- ✅ Built-in HTML5 validation
- ⚠️ Less feature-rich than Ant Design
---
## Recommendation for Our Codebase
### Keep Current Pattern When:
1. Using complex Ant Design form features (nested forms, dynamic fields, etc.)
2. Form state needs to be in Redux for other reasons
3. Form is working well and doesn't need changes
### Consider React 19 Pattern When:
1. Creating new simple forms
2. Form only needs local state
3. Want to reduce Redux boilerplate
4. Building optimistic UI features
---
## Real-World Example: Job Note Adding
Let's look at a more practical example for our domain:
### Adding Job Notes with Optimistic UI
```jsx
import {useOptimistic, useActionState} from 'react';
import {Form, Input, Button, List} from 'antd';
function JobNotesModern({jobId, initialNotes}) {
const [notes, setNotes] = useState(initialNotes);
// Optimistic UI for instant feedback
const [optimisticNotes, addOptimisticNote] = useOptimistic(
notes,
(currentNotes, newNote) => [newNote, ...currentNotes]
);
// Form submission with loading state
const [state, submitAction, isPending] = useActionState(
async (prevState, formData) => {
const noteText = formData.get('note');
// Show note immediately (optimistic)
const tempNote = {
id: `temp-${Date.now()}`,
text: noteText,
createdAt: new Date().toISOString(),
pending: true,
};
addOptimisticNote(tempNote);
try {
// Save to server
const response = await fetch(`/api/jobs/${jobId}/notes`, {
method: 'POST',
body: JSON.stringify({text: noteText}),
});
const savedNote = await response.json();
// Update with real note
setNotes(prev => [savedNote, ...prev]);
return {error: null, success: true};
} catch (error) {
// Optimistic note will disappear on next render
return {error: error.message, success: false};
}
},
{error: null, success: false}
);
return (
<div className="job-notes">
<Form onFinish={(values) => {
const formData = new FormData();
formData.append('note', values.note);
submitAction(formData);
}}>
<Form.Item name="note" rules={[{required: true}]}>
<Input.TextArea
placeholder="Add a note..."
rows={3}
/>
</Form.Item>
<Button type="primary" htmlType="submit" loading={isPending}>
{isPending ? 'Adding...' : 'Add Note'}
</Button>
{state.error && <div className="error">{state.error}</div>}
</Form>
<List
dataSource={optimisticNotes}
renderItem={note => (
<List.Item style={{opacity: note.pending ? 0.5 : 1}}>
<List.Item.Meta
title={note.text}
description={new Date(note.createdAt).toLocaleString()}
/>
{note.pending && <span className="badge">Saving...</span>}
</List.Item>
)}
/>
</div>
);
}
```
**User Experience:**
1. User types note and clicks "Add Note"
2. Note appears instantly (optimistic)
3. Note is grayed out with "Saving..." badge
4. Once saved, note becomes solid and badge disappears
5. If error, note disappears and error shows
**Benefits:**
- ⚡ Instant feedback (feels faster)
- 🎯 Clear visual indication of pending state
- ✅ Automatic error handling
- 🧹 Clean, readable code
---
## Migration Checklist
When modernizing a form to React 19 patterns:
### Step 1: Analyze Current Form
- [ ] Does it need Redux state? (Multi-component access?)
- [ ] How complex is the validation?
- [ ] Does it benefit from optimistic UI?
- [ ] Is it a good candidate for modernization?
### Step 2: Choose Pattern
- [ ] Keep Ant Design + useActionState (complex forms)
- [ ] Native HTML + Actions (simple forms)
- [ ] Add useOptimistic (instant feedback needed)
### Step 3: Implement
- [ ] Create new branch
- [ ] Update component
- [ ] Test loading states
- [ ] Test error states
- [ ] Test success flow
### Step 4: Review
- [ ] Code is cleaner/simpler?
- [ ] No loss of functionality?
- [ ] Better UX?
- [ ] Team understands pattern?
---
## Conclusion
React 19's new features are **additive** - they give us new tools without breaking existing
patterns.
**Recommended Approach:**
1. ✅ Keep current forms working as-is
2. 🎯 Try React 19 patterns in NEW forms first
3. 📚 Learn by doing in low-risk features
4. 🔄 Gradually adopt where it makes sense
**Don't:**
- ❌ Rush to refactor everything
- ❌ Break working code
- ❌ Force patterns where they don't fit
**Do:**
- ✅ Experiment with new features
- ✅ Share learnings with team
- ✅ Use where it improves code
- ✅ Enjoy better DX (Developer Experience)!
---
## Next Steps
1. Review the main [REACT_19_FEATURES_GUIDE.md](REACT_19_FEATURES_GUIDE.md)
2. Try `useActionState` in one new form
3. Share feedback with the team
4. Consider optimistic UI for high-traffic features
Happy coding! 🚀

View File

@@ -1,251 +0,0 @@
# React Grid Layout Migration Guide
## Current Status: Legacy API (v2.2.2)
### What Changed
- **Package Version**: 1.3.4 → 2.2.2
- **API Strategy**: Using legacy compatibility layer
### Migration Completed ✅
#### Changes Made:
```javascript
// Before (v1.3.4):
import { Responsive, WidthProvider } from "react-grid-layout";
// After (v2.2.2 with legacy API):
import { Responsive, WidthProvider } from "react-grid-layout/legacy";
```
#### Files Updated:
- `src/components/dashboard-grid/dashboard-grid.component.jsx`
#### Why Legacy API?
The v2.x release introduces a completely new hooks-based API with breaking changes. The legacy API provides 100% backward compatibility, allowing us to:
- ✅ Get bug fixes and security updates
- ✅ Maintain existing functionality without code rewrites
- ✅ Plan migration to new API incrementally
---
## Future: Migration to New v2 API
When ready to fully migrate to the modern v2 API, follow this guide:
### Breaking Changes in v2
1. **Width Provider Removed**
- Old: `WidthProvider(Responsive)`
- New: Use `useContainerWidth` hook
2. **Props Restructured**
- Old: Flat props structure
- New: Grouped configs (`gridConfig`, `dragConfig`, `resizeConfig`)
3. **Layout Prop Required**
- Old: Could use `data-grid` attribute
- New: Must provide `layout` prop explicitly
4. **Compaction Changes**
- Old: `verticalCompact` prop
- New: `compactor` prop with pluggable algorithms
### Migration Steps
#### Step 1: Replace WidthProvider with useContainerWidth hook
**Before:**
```javascript
const ResponsiveReactGridLayout = WidthProvider(Responsive);
return (
<ResponsiveReactGridLayout
className="layout"
breakpoints={GRID_BREAKPOINTS}
cols={GRID_COLS}
layouts={state.layouts}
onLayoutChange={handleLayoutChange}
>
{children}
</ResponsiveReactGridLayout>
);
```
**After:**
```javascript
import ReactGridLayout, { useContainerWidth, verticalCompactor } from 'react-grid-layout';
function DashboardGridComponent({ currentUser }) {
const { width, containerRef, mounted } = useContainerWidth();
return (
<div ref={containerRef}>
{mounted && (
<ReactGridLayout
width={width}
layout={state.layout}
gridConfig={{
cols: 12,
rowHeight: 30,
margin: [10, 10]
}}
dragConfig={{
enabled: true,
handle: '.drag-handle' // optional
}}
resizeConfig={{
enabled: true
}}
compactor={verticalCompactor}
onLayoutChange={handleLayoutChange}
>
{children}
</ReactGridLayout>
)}
</div>
);
}
```
#### Step 2: Update Responsive Layouts
For responsive behavior, manage breakpoints manually:
```javascript
function DashboardGridComponent() {
const { width, containerRef, mounted } = useContainerWidth();
const [currentBreakpoint, setCurrentBreakpoint] = useState('lg');
useEffect(() => {
if (width > 1200) setCurrentBreakpoint('lg');
else if (width > 996) setCurrentBreakpoint('md');
else if (width > 768) setCurrentBreakpoint('sm');
else if (width > 480) setCurrentBreakpoint('xs');
else setCurrentBreakpoint('xxs');
}, [width]);
const currentLayout = state.layouts[currentBreakpoint] || state.layout;
const currentCols = GRID_COLS[currentBreakpoint];
return (
<div ref={containerRef}>
{mounted && (
<ReactGridLayout
width={width}
layout={currentLayout}
gridConfig={{
cols: currentCols,
rowHeight: 30
}}
// ... other props
>
{children}
</ReactGridLayout>
)}
</div>
);
}
```
#### Step 3: Update Child Components
The `data-grid` attribute still works, but explicitly managing layout is preferred:
**Before:**
```javascript
<div
key={item.i}
data-grid={{
...item,
minH,
minW
}}
>
{content}
</div>
```
**After (Preferred):**
```javascript
// Manage layout in parent state
const layout = state.items.map(item => ({
i: item.i,
x: item.x,
y: item.y,
w: item.w,
h: item.h,
minW: componentList[item.i]?.minW || 1,
minH: componentList[item.i]?.minH || 1
}));
// Children just need keys
<div key={item.i}>
{content}
</div>
```
#### Step 4: Update Styles (if needed)
The CSS classes remain mostly the same, but check the new documentation for any changes.
### Benefits of New API
- 🚀 **Better Performance**: Optimized rendering with hooks
- 📦 **TypeScript Support**: Full type definitions included
- 🎯 **Better API**: More intuitive props organization
- 🔧 **Extensibility**: Pluggable compactors and strategies
- 📱 **Modern React**: Uses hooks pattern
### Testing Checklist
When migrating to new API:
- [ ] Grid items render correctly
- [ ] Drag functionality works
- [ ] Resize functionality works
- [ ] Responsive breakpoints work
- [ ] Layout persistence works
- [ ] Add/remove components works
- [ ] Min/max constraints respected
- [ ] Performance is acceptable
- [ ] No console errors or warnings
### Resources
- [React Grid Layout v2 Documentation](https://github.com/react-grid-layout/react-grid-layout)
- [Migration Guide](https://www.npmjs.com/package/react-grid-layout)
- [Examples](https://github.com/react-grid-layout/react-grid-layout/tree/master/examples)
---
## Current Implementation Notes
### Component Structure
- **File**: `src/components/dashboard-grid/dashboard-grid.component.jsx`
- **Styles**: `src/components/dashboard-grid/dashboard-grid.styles.scss`
- **Pattern**: Responsive grid with dynamic component loading
### Key Features Used
- ✅ Responsive layouts with breakpoints
- ✅ Drag and drop
- ✅ Resize handles
- ✅ Layout persistence to database
- ✅ Dynamic component add/remove
- ✅ Min/max size constraints
### Configuration
```javascript
const GRID_BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
const GRID_COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 };
```
### Performance Considerations
- Layout changes debounced via database updates
- Memoized dashboard queries to prevent re-fetches
- Memoized menu items and layout keys
---
**Last Updated**: 2026-01-13
**Current Version**: react-grid-layout@2.2.2 (legacy API)
**Target Version**: react-grid-layout@2.2.2 (new API) - Future migration

View File

@@ -4,7 +4,7 @@ Clone Repository for:
{
"name": "node-webhook-scripts",
"version": "1.0.0",
"main": "index.jsx",
"main": "index.js",
"dependencies": {
"express": "^4.16.4"
},

View File

@@ -11,7 +11,7 @@ module.exports = {
{
name: "Bitbucket Webhook",
script: "./webhook/index.jsx",
script: "./webhook/index.js",
env: {
NODE_ENV: "production"
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,20 +0,0 @@
-----BEGIN CERTIFICATE-----
MIIDWzCCAkOgAwIBAgIUD/QBSAXy/AlJ/cS4DaPWJLpChxgwDQYJKoZIhvcNAQEL
BQAwPTELMAkGA1UEBhMCQ0ExCzAJBgNVBAgMAk9OMSEwHwYDVQQKDBhJbnRlcm5l
dCBXaWRnaXRzIFB0eSBMdGQwHhcNMjQwOTA5MTU0MjA1WhcNMjUwOTA5MTU0MjA1
WjA9MQswCQYDVQQGEwJDQTELMAkGA1UECAwCT04xITAfBgNVBAoMGEludGVybmV0
IFdpZGdpdHMgUHR5IEx0ZDCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB
AKSd0l7NJCNBwvtPU+dVPQkteg0AfC3sGqRnZMQteCRVa2oIgC4NoF3A9BK/yHbF
ZF25OnXTck5vzc8yb3v73ndfTD9ASKNoiaZE84/GFBsxqlKR8cs0qVwzuAsdijMv
vlMPNlMRyE1Rb7nR6HXGkPXNyxgMko03NXPkvIje9zRudm0Lf8L4q/hPyPkS7Mrm
/uQfAAJe+xFcupkEX2XY7r0x1C+z6E8lA1UcuhK3SHdW7CWYqp1vU5/dnnUiXwCa
GiC6Y1bCJB0pDAVISzy3JUDdINZdiqGR+y8ho3pstChf2mp/76s3N9eG9KA/qaFK
BrGk2PvCoZ8/Aj1aMsRYFHECAwEAAaNTMFEwHQYDVR0OBBYEFDLJ2fbWP4VUJgOp
PSs+NGHcVgRmMB8GA1UdIwQYMBaAFDLJ2fbWP4VUJgOpPSs+NGHcVgRmMA8GA1Ud
EwEB/wQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABfv5ut/y03atq0NMB0jeDY4
AvW4ukk0k1svyqxFZCw9o7m2lHb/IjmVrZG1Sj4JWrrSv0s02ccb26/t6vazNa5L
Powe3eyfHgfjTZJmgs8hyeMwKS0wWk/SPuu9JDhIJakiquqD+UVBGkHpP+XYvhDv
vhS2XRlW+aEjpUmr1oCyyrc6WbzrYRNadqEsn/AxwcMyUbht3Ugjkg+OpidcTIQp
5lv63waKo6I1vQofzBQ3L7JYsKo8kC0vAP7wkLxvzBii335uZJzzpFYFVOyVNezi
dJdazPbRYbXz4LjltdEn/SNfRuKX8ZRiN2OSo7OfSrZaMTS87SfCSFJGgQM8Yrk=
-----END CERTIFICATE-----

View File

@@ -1,27 +0,0 @@
-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAABFwAAAAdzc2gtcn
NhAAAAAwEAAQAAAQEAvNl5fuVmLNv72BZNxnTqX5CHf5Xi8UxjYaYxHITSCx7blnhpVYLd
qXvcOWXzbsfjch/den73QiW4n2FYz75oGMhUGlOYzdWKA9I9Sj09Qy1R06RhwDiZGd5qaM
swEeXpkNmi2u4Qd2kJeDfUQUigjC09V81O/vrniGtQAJScfiG/itdm+Ufn09Z4MYk0HWjq
iDokNEskoEPsibYIrb+Q6vdtuPkZO+wU/smXhPtgw5ST6oQdmm/gVNsRg5XNzxrire+z1G
WatnnVL3hPnnfpnf8W589dyms7GGJwhPerSGTN1bn0T4+9C69Cd7LBJtxiuFdRmdlGLLLP
RR48Rur71wAAA9AEfVsdBH1bHQAAAAdzc2gtcnNhAAABAQC82Xl+5WYs2/vYFk3GdOpfkI
d/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN
1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1
AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DD
lJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3Vuf
RPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvXAAAAAwEAAQAAAQAQTosSLQbMmtY9S3e9
yjyusdExcCTfhyQRu4MEHmfws+JsNMuLqbgwOVTD1AzYJQR7x0qdmDcLjCxL/uDnV16vvS
Sd/Vf1dhnryIyoS29tzI0DRG94ZKq7tBvmHp1w/jRT4KcSVnovhW9e5Rs74+SRFhr06PKI
S+wQOIv48Nwue9+QUMsMCpWgKXHx7SHNTHvnAfqdhi9O29SWlMA+v+mELZ5Cl+HU0UTt2I
A1BxOe1N8FjN7KE2viJexsl3is1PuqMkpLl/wyHBJTVzUadl6DRALJQIm7/YO5goE72YOV
Lpo27do3zjhC87dlKdATvZUzfKV0LuUVdxq/PNDZMUbBAAAAgQDShAqDZiDrdTUaGXfUVm
QzcnVNbh2/KgZh4uux9QNHST562W6cnN7qxoRwVrM4BCOk1Kl73QQZW4nDvXX3PVC5j038
8AXkcBHS9j9f4h72ue7D2jqlbHFa7aGU9zYgk9mbBF+GX3tDntkAIQjLtwOLfj1iiJ/clX
mHFUAY1V4L8AAAAIEA3E4t/v0yU5D9AOI0r17UNYqfeyDoKAEDR4QbbFjO1l0kLnEJy7Zx
Mhj18GilYg2y0P0v8dSM/oWXS8Hua2t5i9Exlv6gHhGlQ80mwYcVGIxewZ/pPeCPw0U+kt
EKUjt09m9Oe7+6xHQsTBj9hY8/vqPmQwRalZFcLdhHiDiVKTcAAACBANtykaPXdVzEFx7D
UOlsjVL7zM0EVOFXf9JJQ6BhazhmsEI2PYt3IpgGMo8cXkoUofAOIYjf421AabN1BqSO5J
XTMxM0ZV3JmLLi804Mu9h1iFrVTBdLYOMJdc2VCo1EwHWpo9SXOyjxce/znvcIOU04aZhu
TaPg816X+E+gw5JhAAAAFGRhdmVARGF2ZVJpY2hlci1JTUVYAQIDBAUG
-----END OPENSSH PRIVATE KEY-----

View File

@@ -1 +0,0 @@
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC82Xl+5WYs2/vYFk3GdOpfkId/leLxTGNhpjEchNILHtuWeGlVgt2pe9w5ZfNux+NyH916fvdCJbifYVjPvmgYyFQaU5jN1YoD0j1KPT1DLVHTpGHAOJkZ3mpoyzAR5emQ2aLa7hB3aQl4N9RBSKCMLT1XzU7++ueIa1AAlJx+Ib+K12b5R+fT1ngxiTQdaOqIOiQ0SySgQ+yJtgitv5Dq9224+Rk77BT+yZeE+2DDlJPqhB2ab+BU2xGDlc3PGuKt77PUZZq2edUveE+ed+md/xbnz13KazsYYnCE96tIZM3VufRPj70Lr0J3ssEm3GK4V1GZ2UYsss9FHjxG6vvX dave@DaveRicher-IMEX

View File

@@ -1,12 +0,0 @@
-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAArAAAABNlY2RzYS
1zaGEyLW5pc3RwNTIxAAAACG5pc3RwNTIxAAAAhQQBYJnAujo17diR0fM2Ze1d1Ft6XHm5
U31pXdFEN+rGC4SoYTdZE8q3relxMS5GwwBOvgvVUuayfid2XS8ls/CMDiMBJAYqEK4CRY
PbbPB7lLnMWsF7muFhvs+SIpPQC+vtDwM2TKlxF0Y8p+iVRpvCADoggsSze7skmJWKmMTt
8jEdEOcAAAEQIyXsOSMl7DkAAAATZWNkc2Etc2hhMi1uaXN0cDUyMQAAAAhuaXN0cDUyMQ
AAAIUEAWCZwLo6Ne3YkdHzNmXtXdRbelx5uVN9aV3RRDfqxguEqGE3WRPKt63pcTEuRsMA
Tr4L1VLmsn4ndl0vJbPwjA4jASQGKhCuAkWD22zwe5S5zFrBe5rhYb7PkiKT0Avr7Q8DNk
ypcRdGPKfolUabwgA6IILEs3u7JJiVipjE7fIxHRDnAAAAQUO5dO9G7i0bxGTP0zV3eIwv
5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZPwYC0wLMW4bJAf+kjqUnj4wGocoTeAAAAD2
lvLWZ0cC10ZXN0LWtleQECAwQ=
-----END OPENSSH PRIVATE KEY-----

View File

@@ -1 +0,0 @@
ecdsa-sha2-nistp521 AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEXRjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w== io-ftp-test-key

View File

@@ -1,12 +0,0 @@
PuTTY-User-Key-File-3: ecdsa-sha2-nistp521
Encryption: none
Comment: io-ftp-test-key
Public-Lines: 4
AAAAE2VjZHNhLXNoYTItbmlzdHA1MjEAAAAIbmlzdHA1MjEAAACFBAFgmcC6OjXt
2JHR8zZl7V3UW3pceblTfWld0UQ36sYLhKhhN1kTyret6XExLkbDAE6+C9VS5rJ+
J3ZdLyWz8IwOIwEkBioQrgJFg9ts8HuUucxawXua4WG+z5Iik9AL6+0PAzZMqXEX
Rjyn6JVGm8IAOiCCxLN7uySYlYqYxO3yMR0Q5w==
Private-Lines: 2
AAAAQUO5dO9G7i0bxGTP0zV3eIwv5g0NhrQJfW/bMHS6XWwaxdpr+QZ+DbBJVzZP
wYC0wLMW4bJAf+kjqUnj4wGocoTe
Private-MAC: d67001d47e13c43dc8bdb9c68a25356a96c1c4a6714f3c5a1836fca646b78b54

View File

@@ -1,28 +0,0 @@
-----BEGIN PRIVATE KEY-----
MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCkndJezSQjQcL7
T1PnVT0JLXoNAHwt7BqkZ2TELXgkVWtqCIAuDaBdwPQSv8h2xWRduTp103JOb83P
Mm97+953X0w/QEijaImmRPOPxhQbMapSkfHLNKlcM7gLHYozL75TDzZTEchNUW+5
0eh1xpD1zcsYDJKNNzVz5LyI3vc0bnZtC3/C+Kv4T8j5EuzK5v7kHwACXvsRXLqZ
BF9l2O69MdQvs+hPJQNVHLoSt0h3VuwlmKqdb1Of3Z51Il8AmhogumNWwiQdKQwF
SEs8tyVA3SDWXYqhkfsvIaN6bLQoX9pqf++rNzfXhvSgP6mhSgaxpNj7wqGfPwI9
WjLEWBRxAgMBAAECggEAUNpHYlLFxh9dokujPUMreF+Cy/IKDBAkQc2au5RNpyLh
YDIOqw/8TTAhcTgLQPLQygvZP9f8E7RsVLFD+pSJ/v2qmIJ9au1Edor1Sg+S/oxV
SLrwFMunx2aLpcH7iAqSI3+cQg7A3+D4zD7iOz6tIl3Su9wo+v073tFhHKTOrEwv
Qgr9Jf3viIiKV1ym+uQEVQndocfsj46FnFpXTQ2qs7kAF6FgAOLDGfQQwzkiqEBD
NsqsDmbYIx6foZL+DEz1ZVO2M5B+xxpbNK82KwuQilVpimW8ui4LZHCe+RIFzt9+
BK6KGlLpSEwTFliivI3nahy18JzskZsfyah0CPZlQQKBgQDVv+A0qIPGvOP3Sx+9
HyeQCV23SkvvSvw8p8pMB0gvwv63YdJ7N/rJzBGS6YUHFWWZZgEeTgkJ6VJvoe0r
8JL1el9uSUa7f0eayjmFBOGuzpktNVdIn2Tg7A9MWA4JqPNNC69RMOh86ewGD4J3
a8Hz2a1bHxAmy/AZt2ukypY6eQKBgQDFJ7kqeOPkRBz9WbALRgVIXo8YWf5di0sQ
r0HC03GAISHQ725A2IFBPHJWeqj0jaMiIZD0y+Obgp7KAskrJaLfsd7Ug775kFfw
oUI9UAl6kRuPKvm3BaVAm46SQm+56VsgxTi73YN0NUp75THHZgAJjepF9zSpVJxq
VY9DjEGruQKBgQCQCpGIatcCol/tUg69X7VFd0pULhkl1J5OMbQ9r9qRdRI5eg5h
QsQaIQ7mtb8TmvOwf/DY/zVQHI+U8sXlCmW+TwzoQTENQSR7xzMj1LpRFqBaustr
AR72A537kItFLzll/i3SxOam5uxK2UDOQSuerF4KPdCglGXkrpo3nt3F4QKBgQCa
RArPAOjQo7tLQfJN3+wiRFsTYtd1uphx5bA/EdOtvj8HjVFnzADXWsTchf3N3UXY
XwtdgGwIMpys1KEz8a8P+c2x26SDAj7NOmDqOMYx8Xju/WGHpBM6Cn30U6e4gK+d
ZLSPyzQgqdIuP5hDvbwpvbGiLVw3Ys1BJtGCuSxpgQJ/eHnRiuSi5Zq5jGg+GpA+
FEEc9NCy772rR+4uzEOqyIwqewffqzSuVWuIsY/8MP3fh+NDxl/mU6cB5QVeD54Z
JZUKwmpM26muiM6WvVnM4ExPdSGA2+l4pZjby/KKd6F/w0tgZ1jb9Pb2/0vN3qVA
Y4U4XNTMt2fxUACqiL4SHA==
-----END PRIVATE KEY-----

View File

@@ -1,5 +1,5 @@
VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
VITE_APP_GA_CODE=231099835
VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
@@ -8,13 +8,7 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=/api/
VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_INSTANCE=IMEX
TEST_USERNAME="test@imex.dev"
TEST_PASSWORD="test123"
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

View File

@@ -0,0 +1,15 @@
VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
VITE_APP_GA_CODE=231099835
# VITE_APP_FIREBASE_CONFIG={ "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE", "authDomain": "rome-prod-1.firebaseapp.com", "projectId": "rome-prod-1", "storageBucket": "rome-prod-1.appspot.com", "messagingSenderId": "147786367145", "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8", "measurementId": "G-G8Z9DRHTZS"}
VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/io-test
VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/io-test
VITE_APP_CLOUDINARY_API_KEY=957865933348715
VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BG3tzU7L2BXlGZ_3VLK4PNaRceoEXEnmHfxcVbRMF5o5g05ejslhVPki9kBM9cBBT-08Ad9kN3HSpS6JmrWD6h4'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_INSTANCE=PROMANAGER

View File

@@ -1,5 +1,5 @@
VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.imex.online/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.imex.online/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT=https://db.dev.bodyshop.app/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.dev.bodyshop.app/v1/graphql
VITE_APP_GA_CODE=231099835
# VITE_APP_FIREBASE_CONFIG={ "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE", "authDomain": "rome-prod-1.firebaseapp.com", "projectId": "rome-prod-1", "storageBucket": "rome-prod-1.appspot.com", "messagingSenderId": "147786367145", "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8", "measurementId": "G-G8Z9DRHTZS"}
VITE_APP_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"}
@@ -9,14 +9,8 @@ VITE_APP_CLOUDINARY_API_KEY=957865933348715
VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BP1B7ZTYpn-KMt6nOxlld6aS8Skt3Q7ZLEqP0hAvGHxG4UojPYiXZ6kPlzZkUC5jH-EcWXomTLtmadAIxurfcHo'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=/api/
VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
VITE_APP_AXIOS_BASE_API_URL=http://localhost:4000
VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_COUNTRY=USA
VITE_APP_INSTANCE=ROME
TEST_USERNAME="test@imex.dev"
TEST_PASSWORD="test123"
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

View File

@@ -13,7 +13,3 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.imex.online/
VITE_APP_REPORTS_SERVER_URL=https://reports.imex.online
VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
VITE_APP_INSTANCE=IMEX
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

View File

@@ -0,0 +1,15 @@
GENERATE_SOURCEMAP=true
VITE_APP_GRAPHQL_ENDPOINT=https://db.romeonline.io/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.romeonline.io/v1/graphql
VITE_APP_GA_CODE=231103507
VITE_APP_FIREBASE_CONFIG={ "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE", "authDomain": "rome-prod-1.firebaseapp.com", "projectId": "rome-prod-1", "storageBucket": "rome-prod-1.appspot.com", "messagingSenderId": "147786367145", "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8", "measurementId": "G-G8Z9DRHTZS"}
VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
VITE_APP_CLOUDINARY_API_KEY=473322739956866
VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BMgZT1NZztW2DsJl8Mg2L04hgY9FzAg6b8fbzgNAfww2VDzH3VE63Ot9EaP_U7KWS2JT-7HPHaw0T_Tw_5vkZc8'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
VITE_APP_INSTANCE=PROMANAGER

View File

@@ -13,7 +13,3 @@ VITE_APP_AXIOS_BASE_API_URL=https://api.romeonline.io/
VITE_APP_REPORTS_SERVER_URL=https://reports.romeonline.io
VITE_APP_SPLIT_API=et9pjkik6bn67he5evpmpr1agoo7gactphgk
VITE_APP_INSTANCE=ROME
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

View File

@@ -9,11 +9,7 @@ VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=https://api.test.imex.online/
VITE_APP_REPORTS_SERVER_URL=https://reports.test.imex.online
VITE_APP_REPORTS_SERVER_URL=https://reports3.test.imex.online
VITE_APP_IS_TEST=true
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_INSTANCE=IMEX
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891

View File

@@ -0,0 +1,15 @@
VITE_APP_GRAPHQL_ENDPOINT=https://db.test.romeonline.io/v1/graphql
VITE_APP_GRAPHQL_ENDPOINT_WS=wss://db.test.romeonline.io/v1/graphql
VITE_APP_GA_CODE=231099835
VITE_APP_FIREBASE_CONFIG={ "apiKey": "AIzaSyAuLQR9SV5LsVxjU8wh9hvFLdhcAHU6cxE", "authDomain": "rome-prod-1.firebaseapp.com", "projectId": "rome-prod-1", "storageBucket": "rome-prod-1.appspot.com", "messagingSenderId": "147786367145", "appId": "1:147786367145:web:9d4cba68071c3f29a8a9b8", "measurementId": "G-G8Z9DRHTZS"}
VITE_APP_CLOUDINARY_ENDPOINT_API=https://api.cloudinary.com/v1_1/bodyshop
VITE_APP_CLOUDINARY_ENDPOINT=https://res.cloudinary.com/bodyshop
VITE_APP_CLOUDINARY_API_KEY=473322739956866
VITE_APP_CLOUDINARY_THUMB_TRANSFORMATIONS=c_fill,h_250,w_250
VITE_APP_FIREBASE_PUBLIC_VAPID_KEY='BN2GcDPjipR5MTEosO5dT4CfQ3cmrdBIsI4juoOQrRijn_5aRiHlwj1mlq0W145mOusx6xynEKl_tvYJhpCc9lo'
VITE_APP_STRIPE_PUBLIC_KEY=pk_test_51GqB4TJl3nQjrZ0wCQWAxAhlNF8jKe0tipIa6ExBaxwJGitwvFsIZUEua4dUzaMIAuXp4qwYHXx7lgjyQSwP0Pe900vzm38C7g
VITE_APP_AXIOS_BASE_API_URL=https://api.test.romeonline.io/
VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
VITE_APP_IS_TEST=true
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_INSTANCE=PROMANAGER

View File

@@ -13,7 +13,3 @@ VITE_APP_REPORTS_SERVER_URL=https://reports.test.romeonline.io
VITE_APP_IS_TEST=true
VITE_APP_SPLIT_API=ts615lqgnmk84thn72uk18uu5pgce6e0l4rc
VITE_APP_INSTANCE=ROME
VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com
VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78

8
client/.eslintrc Normal file
View File

@@ -0,0 +1,8 @@
{
"extends": [
"react-app"
],
"rules": {
"no-useless-rename": "off"
}
}

15
client/.gitignore vendored
View File

@@ -1,18 +1,3 @@
# Vitest
vitest-report*/
vitest-coverage/
*.vitest.log
test-output.txt
# Playwright
playwright-report/
test-results/
playwright/.cache/
*.playwright.log
# Sentry Config File
.sentryclirc
/dev-dist
# Local environment overrides (not version controlled)
.env.development.local.overrides

53
client/craco.config.js Normal file
View File

@@ -0,0 +1,53 @@
// craco.config.js
const TerserPlugin = require("terser-webpack-plugin");
const CracoLessPlugin = require("craco-less");
const { convertLegacyToken } = require("@ant-design/compatible/lib");
const { theme } = require("antd/lib");
const { defaultAlgorithm, defaultSeed } = theme;
const mapToken = defaultAlgorithm(defaultSeed);
const v4Token = convertLegacyToken(mapToken);
// TODO, At the moment we are using less in the Dashboard. Once we remove this we can remove the less processor entirely.
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { ...v4Token },
javascriptEnabled: true
}
}
}
}
],
webpack: {
configure: (webpackConfig) => {
return {
...webpackConfig,
// Required for Dev Server
devServer: {
...webpackConfig.devServer,
allowedHosts: "all"
},
optimization: {
...webpackConfig.optimization,
// Workaround for CircleCI bug caused by the number of CPUs shown
// https://github.com/facebook/create-react-app/issues/8320
minimizer: webpackConfig.optimization.minimizer.map((item) => {
if (item instanceof TerserPlugin) {
item.options.parallel = 2;
}
return item;
})
}
};
}
},
devtool: "source-map"
};

17
client/cypress.config.js Normal file
View File

@@ -0,0 +1,17 @@
const { defineConfig } = require("cypress");
module.exports = defineConfig({
experimentalStudio: true,
env: {
FIREBASE_USERNAME: "cypress@imex.test",
FIREBASE_PASSWORD: "cypress"
},
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
return require("./cypress/plugins/index.js")(on, config);
},
baseUrl: "http://localhost:3000"
}
});

View File

@@ -0,0 +1,19 @@
/// <reference types="Cypress" />
const { FIREBASE_USERNAME, FIREBASE_PASSWORcD } = Cypress.env();
describe("Renders the General Page", () => {
beforeEach(() => {
cy.visit("/");
});
it("Renders Correctly", () => {});
it("Has the Slogan", () => {
cy.findByText("A whole x22new kind of shop management system.").should("exist");
/* ==== Generated with Cypress Studio ==== */
cy.get(".ant-menu-item-active > .ant-menu-title-content > .header0-item-block").click();
cy.get("#email").clear();
cy.get("#email").type("patrick@imex.dev");
cy.get("#password").clear();
cy.get("#password").type("patrick123{enter}");
cy.get(".ant-form > .ant-btn").click();
/* ==== End Cypress Studio ==== */
});
});

View File

@@ -0,0 +1,124 @@
/// <reference types="cypress" />
// Welcome to Cypress!
//
// This spec file contains a variety of sample tests
// for a todo list app that are designed to demonstrate
// the power of writing tests in Cypress.
//
// To learn more about how Cypress works and
// what makes it such an awesome testing tool,
// please read our getting started guide:
// https://on.cypress.io/introduction-to-cypress
describe("example to-do app", () => {
beforeEach(() => {
// Cypress starts out with a blank slate for each test
// so we must tell it to visit our website with the `cy.visit()` command.
// Since we want to visit the same URL at the start of all our tests,
// we include it in our beforeEach function so that it runs before each test
cy.visit("https://example.cypress.io/todo");
});
it("displays two todo items by default", () => {
// We use the `cy.get()` command to get all elements that match the selector.
// Then, we use `should` to assert that there are two matched items,
// which are the two default items.
cy.get(".todo-list li").should("have.length", 2);
// We can go even further and check that the default todos each contain
// the correct text. We use the `first` and `last` functions
// to get just the first and last matched elements individually,
// and then perform an assertion with `should`.
cy.get(".todo-list li").first().should("have.text", "Pay electric bill");
cy.get(".todo-list li").last().should("have.text", "Walk the dog");
});
it("can add new todo items", () => {
// We'll store our item text in a variable so we can reuse it
const newItem = "Feed the cat";
// Let's get the input element and use the `type` command to
// input our new list item. After typing the content of our item,
// we need to type the enter key as well in order to submit the input.
// This input has a data-test attribute so we'll use that to select the
// element in accordance with best practices:
// https://on.cypress.io/selecting-elements
cy.get("[data-test=new-todo]").type(`${newItem}{enter}`);
// Now that we've typed our new item, let's check that it actually was added to the list.
// Since it's the newest item, it should exist as the last element in the list.
// In addition, with the two default items, we should have a total of 3 elements in the list.
// Since assertions yield the element that was asserted on,
// we can chain both of these assertions together into a single statement.
cy.get(".todo-list li").should("have.length", 3).last().should("have.text", newItem);
});
it("can check off an item as completed", () => {
// In addition to using the `get` command to get an element by selector,
// we can also use the `contains` command to get an element by its contents.
// However, this will yield the <label>, which is lowest-level element that contains the text.
// In order to check the item, we'll find the <input> element for this <label>
// by traversing up the dom to the parent element. From there, we can `find`
// the child checkbox <input> element and use the `check` command to check it.
cy.contains("Pay electric bill").parent().find("input[type=checkbox]").check();
// Now that we've checked the button, we can go ahead and make sure
// that the list element is now marked as completed.
// Again we'll use `contains` to find the <label> element and then use the `parents` command
// to traverse multiple levels up the dom until we find the corresponding <li> element.
// Once we get that element, we can assert that it has the completed class.
cy.contains("Pay electric bill").parents("li").should("have.class", "completed");
});
context("with a checked task", () => {
beforeEach(() => {
// We'll take the command we used above to check off an element
// Since we want to perform multiple tests that start with checking
// one element, we put it in the beforeEach hook
// so that it runs at the start of every test.
cy.contains("Pay electric bill").parent().find("input[type=checkbox]").check();
});
it("can filter for uncompleted tasks", () => {
// We'll click on the "active" button in order to
// display only incomplete items
cy.contains("Active").click();
// After filtering, we can assert that there is only the one
// incomplete item in the list.
cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Walk the dog");
// For good measure, let's also assert that the task we checked off
// does not exist on the page.
cy.contains("Pay electric bill").should("not.exist");
});
it("can filter for completed tasks", () => {
// We can perform similar steps as the test above to ensure
// that only completed tasks are shown
cy.contains("Completed").click();
cy.get(".todo-list li").should("have.length", 1).first().should("have.text", "Pay electric bill");
cy.contains("Walk the dog").should("not.exist");
});
it("can delete all completed tasks", () => {
// First, let's click the "Clear completed" button
// `contains` is actually serving two purposes here.
// First, it's ensuring that the button exists within the dom.
// This button only appears when at least one task is checked
// so this command is implicitly verifying that it does exist.
// Second, it selects the button so we can click it.
cy.contains("Clear completed").click();
// Then we can make sure that there is only one element
// in the list and our element does not exist
cy.get(".todo-list li").should("have.length", 1).should("not.have.text", "Pay electric bill");
// Finally, make sure that the clear button no longer exists.
cy.contains("Clear completed").should("not.exist");
});
});
});

View File

@@ -0,0 +1,284 @@
/// <reference types="cypress" />
context("Actions", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/actions");
});
// https://on.cypress.io/interacting-with-elements
it(".type() - type into a DOM element", () => {
// https://on.cypress.io/type
cy.get(".action-email")
.type("fake@email.com")
.should("have.value", "fake@email.com")
// .type() with special character sequences
.type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
.type("{del}{selectall}{backspace}")
// .type() with key modifiers
.type("{alt}{option}") //these are equivalent
.type("{ctrl}{control}") //these are equivalent
.type("{meta}{command}{cmd}") //these are equivalent
.type("{shift}")
// Delay each keypress by 0.1 sec
.type("slow.typing@email.com", { delay: 100 })
.should("have.value", "slow.typing@email.com");
cy.get(".action-disabled")
// Ignore error checking prior to type
// like whether the input is visible or disabled
.type("disabled error checking", { force: true })
.should("have.value", "disabled error checking");
});
it(".focus() - focus on a DOM element", () => {
// https://on.cypress.io/focus
cy.get(".action-focus").focus().should("have.class", "focus").prev().should("have.attr", "style", "color: orange;");
});
it(".blur() - blur off a DOM element", () => {
// https://on.cypress.io/blur
cy.get(".action-blur")
.type("About to blur")
.blur()
.should("have.class", "error")
.prev()
.should("have.attr", "style", "color: red;");
});
it(".clear() - clears an input or textarea element", () => {
// https://on.cypress.io/clear
cy.get(".action-clear")
.type("Clear this text")
.should("have.value", "Clear this text")
.clear()
.should("have.value", "");
});
it(".submit() - submit a form", () => {
// https://on.cypress.io/submit
cy.get(".action-form").find('[type="text"]').type("HALFOFF");
cy.get(".action-form").submit().next().should("contain", "Your form has been submitted!");
});
it(".click() - click on a DOM element", () => {
// https://on.cypress.io/click
cy.get(".action-btn").click();
// You can click on 9 specific positions of an element:
// -----------------------------------
// | topLeft top topRight |
// | |
// | |
// | |
// | left center right |
// | |
// | |
// | |
// | bottomLeft bottom bottomRight |
// -----------------------------------
// clicking in the center of the element is the default
cy.get("#action-canvas").click();
cy.get("#action-canvas").click("topLeft");
cy.get("#action-canvas").click("top");
cy.get("#action-canvas").click("topRight");
cy.get("#action-canvas").click("left");
cy.get("#action-canvas").click("right");
cy.get("#action-canvas").click("bottomLeft");
cy.get("#action-canvas").click("bottom");
cy.get("#action-canvas").click("bottomRight");
// .click() accepts an x and y coordinate
// that controls where the click occurs :)
cy.get("#action-canvas")
.click(80, 75) // click 80px on x coord and 75px on y coord
.click(170, 75)
.click(80, 165)
.click(100, 185)
.click(125, 190)
.click(150, 185)
.click(170, 165);
// click multiple elements by passing multiple: true
cy.get(".action-labels>.label").click({ multiple: true });
// Ignore error checking prior to clicking
cy.get(".action-opacity>.btn").click({ force: true });
});
it(".dblclick() - double click on a DOM element", () => {
// https://on.cypress.io/dblclick
// Our app has a listener on 'dblclick' event in our 'scripts.js'
// that hides the div and shows an input on double click
cy.get(".action-div").dblclick().should("not.be.visible");
cy.get(".action-input-hidden").should("be.visible");
});
it(".rightclick() - right click on a DOM element", () => {
// https://on.cypress.io/rightclick
// Our app has a listener on 'contextmenu' event in our 'scripts.js'
// that hides the div and shows an input on right click
cy.get(".rightclick-action-div").rightclick().should("not.be.visible");
cy.get(".rightclick-action-input-hidden").should("be.visible");
});
it(".check() - check a checkbox or radio element", () => {
// https://on.cypress.io/check
// By default, .check() will check all
// matching checkbox or radio elements in succession, one after another
cy.get('.action-checkboxes [type="checkbox"]').not("[disabled]").check().should("be.checked");
cy.get('.action-radios [type="radio"]').not("[disabled]").check().should("be.checked");
// .check() accepts a value argument
cy.get('.action-radios [type="radio"]').check("radio1").should("be.checked");
// .check() accepts an array of values
cy.get('.action-multiple-checkboxes [type="checkbox"]').check(["checkbox1", "checkbox2"]).should("be.checked");
// Ignore error checking prior to checking
cy.get(".action-checkboxes [disabled]").check({ force: true }).should("be.checked");
cy.get('.action-radios [type="radio"]').check("radio3", { force: true }).should("be.checked");
});
it(".uncheck() - uncheck a checkbox element", () => {
// https://on.cypress.io/uncheck
// By default, .uncheck() will uncheck all matching
// checkbox elements in succession, one after another
cy.get('.action-check [type="checkbox"]').not("[disabled]").uncheck().should("not.be.checked");
// .uncheck() accepts a value argument
cy.get('.action-check [type="checkbox"]').check("checkbox1").uncheck("checkbox1").should("not.be.checked");
// .uncheck() accepts an array of values
cy.get('.action-check [type="checkbox"]')
.check(["checkbox1", "checkbox3"])
.uncheck(["checkbox1", "checkbox3"])
.should("not.be.checked");
// Ignore error checking prior to unchecking
cy.get(".action-check [disabled]").uncheck({ force: true }).should("not.be.checked");
});
it(".select() - select an option in a <select> element", () => {
// https://on.cypress.io/select
// at first, no option should be selected
cy.get(".action-select").should("have.value", "--Select a fruit--");
// Select option(s) with matching text content
cy.get(".action-select").select("apples");
// confirm the apples were selected
// note that each value starts with "fr-" in our HTML
cy.get(".action-select").should("have.value", "fr-apples");
cy.get(".action-select-multiple")
.select(["apples", "oranges", "bananas"])
// when getting multiple values, invoke "val" method first
.invoke("val")
.should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
// Select option(s) with matching value
cy.get(".action-select")
.select("fr-bananas")
// can attach an assertion right away to the element
.should("have.value", "fr-bananas");
cy.get(".action-select-multiple")
.select(["fr-apples", "fr-oranges", "fr-bananas"])
.invoke("val")
.should("deep.equal", ["fr-apples", "fr-oranges", "fr-bananas"]);
// assert the selected values include oranges
cy.get(".action-select-multiple").invoke("val").should("include", "fr-oranges");
});
it(".scrollIntoView() - scroll an element into view", () => {
// https://on.cypress.io/scrollintoview
// normally all of these buttons are hidden,
// because they're not within
// the viewable area of their parent
// (we need to scroll to see them)
cy.get("#scroll-horizontal button").should("not.be.visible");
// scroll the button into view, as if the user had scrolled
cy.get("#scroll-horizontal button").scrollIntoView().should("be.visible");
cy.get("#scroll-vertical button").should("not.be.visible");
// Cypress handles the scroll direction needed
cy.get("#scroll-vertical button").scrollIntoView().should("be.visible");
cy.get("#scroll-both button").should("not.be.visible");
// Cypress knows to scroll to the right and down
cy.get("#scroll-both button").scrollIntoView().should("be.visible");
});
it(".trigger() - trigger an event on a DOM element", () => {
// https://on.cypress.io/trigger
// To interact with a range input (slider)
// we need to set its value & trigger the
// event to signal it changed
// Here, we invoke jQuery's val() method to set
// the value and trigger the 'change' event
cy.get(".trigger-input-range")
.invoke("val", 25)
.trigger("change")
.get("input[type=range]")
.siblings("p")
.should("have.text", "25");
});
it("cy.scrollTo() - scroll the window or element to a position", () => {
// https://on.cypress.io/scrollto
// You can scroll to 9 specific positions of an element:
// -----------------------------------
// | topLeft top topRight |
// | |
// | |
// | |
// | left center right |
// | |
// | |
// | |
// | bottomLeft bottom bottomRight |
// -----------------------------------
// if you chain .scrollTo() off of cy, we will
// scroll the entire window
cy.scrollTo("bottom");
cy.get("#scrollable-horizontal").scrollTo("right");
// or you can scroll to a specific coordinate:
// (x axis, y axis) in pixels
cy.get("#scrollable-vertical").scrollTo(250, 250);
// or you can scroll to a specific percentage
// of the (width, height) of the element
cy.get("#scrollable-both").scrollTo("75%", "25%");
// control the easing of the scroll (default is 'swing')
cy.get("#scrollable-vertical").scrollTo("center", { easing: "linear" });
// control the duration of the scroll (in ms)
cy.get("#scrollable-both").scrollTo("center", { duration: 2000 });
});
});

View File

@@ -0,0 +1,35 @@
/// <reference types="cypress" />
context("Aliasing", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/aliasing");
});
it(".as() - alias a DOM element for later use", () => {
// https://on.cypress.io/as
// Alias a DOM element for use later
// We don't have to traverse to the element
// later in our code, we reference it with @
cy.get(".as-table").find("tbody>tr").first().find("td").first().find("button").as("firstBtn");
// when we reference the alias, we place an
// @ in front of its name
cy.get("@firstBtn").click();
cy.get("@firstBtn").should("have.class", "btn-success").and("contain", "Changed");
});
it(".as() - alias a route for later use", () => {
// Alias the route to wait for its response
cy.intercept("GET", "**/comments/*").as("getComment");
// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get(".network-btn").click();
// https://on.cypress.io/wait
cy.wait("@getComment").its("response.statusCode").should("eq", 200);
});
});

View File

@@ -0,0 +1,173 @@
/// <reference types="cypress" />
context("Assertions", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/assertions");
});
describe("Implicit Assertions", () => {
it(".should() - make an assertion about the current subject", () => {
// https://on.cypress.io/should
cy.get(".assertion-table")
.find("tbody tr:last")
.should("have.class", "success")
.find("td")
.first()
// checking the text of the <td> element in various ways
.should("have.text", "Column content")
.should("contain", "Column content")
.should("have.html", "Column content")
// chai-jquery uses "is()" to check if element matches selector
.should("match", "td")
// to match text content against a regular expression
// first need to invoke jQuery method text()
// and then match using regular expression
.invoke("text")
.should("match", /column content/i);
// a better way to check element's text content against a regular expression
// is to use "cy.contains"
// https://on.cypress.io/contains
cy.get(".assertion-table")
.find("tbody tr:last")
// finds first <td> element with text content matching regular expression
.contains("td", /column content/i)
.should("be.visible");
// for more information about asserting element's text
// see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-elements-text-contents
});
it(".and() - chain multiple assertions together", () => {
// https://on.cypress.io/and
cy.get(".assertions-link").should("have.class", "active").and("have.attr", "href").and("include", "cypress.io");
});
});
describe("Explicit Assertions", () => {
// https://on.cypress.io/assertions
it("expect - make an assertion about a specified subject", () => {
// We can use Chai's BDD style assertions
expect(true).to.be.true;
const o = { foo: "bar" };
expect(o).to.equal(o);
expect(o).to.deep.equal({ foo: "bar" });
// matching text using regular expression
expect("FooBar").to.match(/bar$/i);
});
it("pass your own callback function to should()", () => {
// Pass a function to should that can have any number
// of explicit assertions within it.
// The ".should(cb)" function will be retried
// automatically until it passes all your explicit assertions or times out.
cy.get(".assertions-p")
.find("p")
.should(($p) => {
// https://on.cypress.io/$
// return an array of texts from all of the p's
// @ts-ignore TS6133 unused variable
const texts = $p.map((i, el) => Cypress.$(el).text());
// jquery map returns jquery object
// and .get() convert this to simple array
const paragraphs = texts.get();
// array should have length of 3
expect(paragraphs, "has 3 paragraphs").to.have.length(3);
// use second argument to expect(...) to provide clear
// message with each assertion
expect(paragraphs, "has expected text in each paragraph").to.deep.eq([
"Some text from first p",
"More text from second p",
"And even more text from third p"
]);
});
});
it("finds element by class name regex", () => {
cy.get(".docs-header")
.find("div")
// .should(cb) callback function will be retried
.should(($div) => {
expect($div).to.have.length(1);
const className = $div[0].className;
expect(className).to.match(/heading-/);
})
// .then(cb) callback is not retried,
// it either passes or fails
.then(($div) => {
expect($div, "text content").to.have.text("Introduction");
});
});
it("can throw any error", () => {
cy.get(".docs-header")
.find("div")
.should(($div) => {
if ($div.length !== 1) {
// you can throw your own errors
throw new Error("Did not find 1 element");
}
const className = $div[0].className;
if (!className.match(/heading-/)) {
throw new Error(`Could not find class "heading-" in ${className}`);
}
});
});
it("matches unknown text between two elements", () => {
/**
* Text from the first element.
* @type {string}
*/
let text;
/**
* Normalizes passed text,
* useful before comparing text with spaces and different capitalization.
* @param {string} s Text to normalize
*/
const normalizeText = (s) => s.replace(/\s/g, "").toLowerCase();
cy.get(".two-elements")
.find(".first")
.then(($first) => {
// save text from the first element
text = normalizeText($first.text());
});
cy.get(".two-elements")
.find(".second")
.should(($div) => {
// we can massage text before comparing
const secondText = normalizeText($div.text());
expect(secondText, "second text").to.equal(text);
});
});
it("assert - assert shape of an object", () => {
const person = {
name: "Joe",
age: 20
};
assert.isObject(person, "value is object");
});
it("retries the should callback until assertions pass", () => {
cy.get("#random-number").should(($div) => {
const n = parseFloat($div.text());
expect(n).to.be.gte(1).and.be.lte(10);
});
});
});
});

View File

@@ -0,0 +1,96 @@
/// <reference types="cypress" />
context("Connectors", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/connectors");
});
it(".each() - iterate over an array of elements", () => {
// https://on.cypress.io/each
cy.get(".connectors-each-ul>li").each(($el, index, $list) => {
console.log($el, index, $list);
});
});
it(".its() - get properties on the current subject", () => {
// https://on.cypress.io/its
cy.get(".connectors-its-ul>li")
// calls the 'length' property yielding that value
.its("length")
.should("be.gt", 2);
});
it(".invoke() - invoke a function on the current subject", () => {
// our div is hidden in our script.js
// $('.connectors-div').hide()
// https://on.cypress.io/invoke
cy.get(".connectors-div")
.should("be.hidden")
// call the jquery method 'show' on the 'div.container'
.invoke("show")
.should("be.visible");
});
it(".spread() - spread an array as individual args to callback function", () => {
// https://on.cypress.io/spread
const arr = ["foo", "bar", "baz"];
cy.wrap(arr).spread((foo, bar, baz) => {
expect(foo).to.eq("foo");
expect(bar).to.eq("bar");
expect(baz).to.eq("baz");
});
});
describe(".then()", () => {
it("invokes a callback function with the current subject", () => {
// https://on.cypress.io/then
cy.get(".connectors-list > li").then(($lis) => {
expect($lis, "3 items").to.have.length(3);
expect($lis.eq(0), "first item").to.contain("Walk the dog");
expect($lis.eq(1), "second item").to.contain("Feed the cat");
expect($lis.eq(2), "third item").to.contain("Write JavaScript");
});
});
it("yields the returned value to the next command", () => {
cy.wrap(1)
.then((num) => {
expect(num).to.equal(1);
return 2;
})
.then((num) => {
expect(num).to.equal(2);
});
});
it("yields the original subject without return", () => {
cy.wrap(1)
.then((num) => {
expect(num).to.equal(1);
// note that nothing is returned from this callback
})
.then((num) => {
// this callback receives the original unchanged value 1
expect(num).to.equal(1);
});
});
it("yields the value yielded by the last Cypress command inside", () => {
cy.wrap(1)
.then((num) => {
expect(num).to.equal(1);
// note how we run a Cypress command
// the result yielded by this Cypress command
// will be passed to the second ".then"
cy.wrap(2);
})
.then((num) => {
// this callback receives the value yielded by "cy.wrap(2)"
expect(num).to.equal(2);
});
});
});
});

View File

@@ -0,0 +1,79 @@
/// <reference types="cypress" />
context("Cookies", () => {
beforeEach(() => {
Cypress.Cookies.debug(true);
cy.visit("https://example.cypress.io/commands/cookies");
// clear cookies again after visiting to remove
// any 3rd party cookies picked up such as cloudflare
cy.clearCookies();
});
it("cy.getCookie() - get a browser cookie", () => {
// https://on.cypress.io/getcookie
cy.get("#getCookie .set-a-cookie").click();
// cy.getCookie() yields a cookie object
cy.getCookie("token").should("have.property", "value", "123ABC");
});
it("cy.getCookies() - get browser cookies", () => {
// https://on.cypress.io/getcookies
cy.getCookies().should("be.empty");
cy.get("#getCookies .set-a-cookie").click();
// cy.getCookies() yields an array of cookies
cy.getCookies()
.should("have.length", 1)
.should((cookies) => {
// each cookie has these properties
expect(cookies[0]).to.have.property("name", "token");
expect(cookies[0]).to.have.property("value", "123ABC");
expect(cookies[0]).to.have.property("httpOnly", false);
expect(cookies[0]).to.have.property("secure", false);
expect(cookies[0]).to.have.property("domain");
expect(cookies[0]).to.have.property("path");
});
});
it("cy.setCookie() - set a browser cookie", () => {
// https://on.cypress.io/setcookie
cy.getCookies().should("be.empty");
cy.setCookie("foo", "bar");
// cy.getCookie() yields a cookie object
cy.getCookie("foo").should("have.property", "value", "bar");
});
it("cy.clearCookie() - clear a browser cookie", () => {
// https://on.cypress.io/clearcookie
cy.getCookie("token").should("be.null");
cy.get("#clearCookie .set-a-cookie").click();
cy.getCookie("token").should("have.property", "value", "123ABC");
// cy.clearCookies() yields null
cy.clearCookie("token").should("be.null");
cy.getCookie("token").should("be.null");
});
it("cy.clearCookies() - clear browser cookies", () => {
// https://on.cypress.io/clearcookies
cy.getCookies().should("be.empty");
cy.get("#clearCookies .set-a-cookie").click();
cy.getCookies().should("have.length", 1);
// cy.clearCookies() yields null
cy.clearCookies();
cy.getCookies().should("be.empty");
});
});

View File

@@ -0,0 +1,208 @@
/// <reference types="cypress" />
context("Cypress.Commands", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
// https://on.cypress.io/custom-commands
it(".add() - create a custom command", () => {
Cypress.Commands.add(
"console",
{
prevSubject: true
},
(subject, method) => {
// the previous subject is automatically received
// and the commands arguments are shifted
// allow us to change the console method used
method = method || "log";
// log the subject to the console
// @ts-ignore TS7017
console[method]("The subject is", subject);
// whatever we return becomes the new subject
// we don't want to change the subject so
// we return whatever was passed in
return subject;
}
);
// @ts-ignore TS2339
cy.get("button")
.console("info")
.then(($button) => {
// subject is still $button
});
});
});
context("Cypress.Cookies", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
// https://on.cypress.io/cookies
it(".debug() - enable or disable debugging", () => {
Cypress.Cookies.debug(true);
// Cypress will now log in the console when
// cookies are set or cleared
cy.setCookie("fakeCookie", "123ABC");
cy.clearCookie("fakeCookie");
cy.setCookie("fakeCookie", "123ABC");
cy.clearCookie("fakeCookie");
cy.setCookie("fakeCookie", "123ABC");
});
it(".preserveOnce() - preserve cookies by key", () => {
// normally cookies are reset after each test
cy.getCookie("fakeCookie").should("not.be.ok");
// preserving a cookie will not clear it when
// the next test starts
cy.setCookie("lastCookie", "789XYZ");
Cypress.Cookies.preserveOnce("lastCookie");
});
it(".defaults() - set defaults for all cookies", () => {
// now any cookie with the name 'session_id' will
// not be cleared before each new test runs
Cypress.Cookies.defaults({
preserve: "session_id"
});
});
});
context("Cypress.arch", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Get CPU architecture name of underlying OS", () => {
// https://on.cypress.io/arch
expect(Cypress.arch).to.exist;
});
});
context("Cypress.config()", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Get and set configuration options", () => {
// https://on.cypress.io/config
let myConfig = Cypress.config();
expect(myConfig).to.have.property("animationDistanceThreshold", 5);
expect(myConfig).to.have.property("baseUrl", null);
expect(myConfig).to.have.property("defaultCommandTimeout", 4000);
expect(myConfig).to.have.property("requestTimeout", 5000);
expect(myConfig).to.have.property("responseTimeout", 30000);
expect(myConfig).to.have.property("viewportHeight", 660);
expect(myConfig).to.have.property("viewportWidth", 1000);
expect(myConfig).to.have.property("pageLoadTimeout", 60000);
expect(myConfig).to.have.property("waitForAnimations", true);
expect(Cypress.config("pageLoadTimeout")).to.eq(60000);
// this will change the config for the rest of your tests!
Cypress.config("pageLoadTimeout", 20000);
expect(Cypress.config("pageLoadTimeout")).to.eq(20000);
Cypress.config("pageLoadTimeout", 60000);
});
});
context("Cypress.dom", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
// https://on.cypress.io/dom
it(".isHidden() - determine if a DOM element is hidden", () => {
let hiddenP = Cypress.$(".dom-p p.hidden").get(0);
let visibleP = Cypress.$(".dom-p p.visible").get(0);
// our first paragraph has css class 'hidden'
expect(Cypress.dom.isHidden(hiddenP)).to.be.true;
expect(Cypress.dom.isHidden(visibleP)).to.be.false;
});
});
context("Cypress.env()", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
// We can set environment variables for highly dynamic values
// https://on.cypress.io/environment-variables
it("Get environment variables", () => {
// https://on.cypress.io/env
// set multiple environment variables
Cypress.env({
host: "veronica.dev.local",
api_server: "http://localhost:8888/v1/"
});
// get environment variable
expect(Cypress.env("host")).to.eq("veronica.dev.local");
// set environment variable
Cypress.env("api_server", "http://localhost:8888/v2/");
expect(Cypress.env("api_server")).to.eq("http://localhost:8888/v2/");
// get all environment variable
expect(Cypress.env()).to.have.property("host", "veronica.dev.local");
expect(Cypress.env()).to.have.property("api_server", "http://localhost:8888/v2/");
});
});
context("Cypress.log", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Control what is printed to the Command Log", () => {
// https://on.cypress.io/cypress-log
});
});
context("Cypress.platform", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Get underlying OS name", () => {
// https://on.cypress.io/platform
expect(Cypress.platform).to.be.exist;
});
});
context("Cypress.version", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Get current version of Cypress being run", () => {
// https://on.cypress.io/version
expect(Cypress.version).to.be.exist;
});
});
context("Cypress.spec", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/cypress-api");
});
it("Get current spec information", () => {
// https://on.cypress.io/spec
// wrap the object so we can inspect it easily by clicking in the command log
cy.wrap(Cypress.spec).should("include.keys", ["name", "relative", "absolute"]);
});
});

View File

@@ -0,0 +1,86 @@
/// <reference types="cypress" />
/// JSON fixture file can be loaded directly using
// the built-in JavaScript bundler
// @ts-ignore
const requiredExample = require("../../fixtures/example");
context("Files", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/files");
});
beforeEach(() => {
// load example.json fixture file and store
// in the test context object
cy.fixture("example.json").as("example");
});
it("cy.fixture() - load a fixture", () => {
// https://on.cypress.io/fixture
// Instead of writing a response inline you can
// use a fixture file's content.
// when application makes an Ajax request matching "GET **/comments/*"
// Cypress will intercept it and reply with the object in `example.json` fixture
cy.intercept("GET", "**/comments/*", { fixture: "example.json" }).as("getComment");
// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get(".fixture-btn").click();
cy.wait("@getComment")
.its("response.body")
.should("have.property", "name")
.and("include", "Using fixtures to represent data");
});
it("cy.fixture() or require - load a fixture", function () {
// we are inside the "function () { ... }"
// callback and can use test context object "this"
// "this.example" was loaded in "beforeEach" function callback
expect(this.example, "fixture in the test context").to.deep.equal(requiredExample);
// or use "cy.wrap" and "should('deep.equal', ...)" assertion
cy.wrap(this.example).should("deep.equal", requiredExample);
});
it("cy.readFile() - read file contents", () => {
// https://on.cypress.io/readfile
// You can read a file and yield its contents
// The filePath is relative to your project's root.
cy.readFile("cypress.json").then((json) => {
expect(json).to.be.an("object");
});
});
it("cy.writeFile() - write to a file", () => {
// https://on.cypress.io/writefile
// You can write to a file
// Use a response from a request to automatically
// generate a fixture file for use later
cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
cy.writeFile("cypress/fixtures/users.json", response.body);
});
cy.fixture("users").should((users) => {
expect(users[0].name).to.exist;
});
// JavaScript arrays and objects are stringified
// and formatted into text.
cy.writeFile("cypress/fixtures/profile.json", {
id: 8739,
name: "Jane",
email: "jane@example.com"
});
cy.fixture("profile").should((profile) => {
expect(profile.name).to.eq("Jane");
});
});
});

View File

@@ -0,0 +1,58 @@
/// <reference types="cypress" />
context("Local Storage", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/local-storage");
});
// Although local storage is automatically cleared
// in between tests to maintain a clean state
// sometimes we need to clear the local storage manually
it("cy.clearLocalStorage() - clear all data in local storage", () => {
// https://on.cypress.io/clearlocalstorage
cy.get(".ls-btn")
.click()
.should(() => {
expect(localStorage.getItem("prop1")).to.eq("red");
expect(localStorage.getItem("prop2")).to.eq("blue");
expect(localStorage.getItem("prop3")).to.eq("magenta");
});
// clearLocalStorage() yields the localStorage object
cy.clearLocalStorage().should((ls) => {
expect(ls.getItem("prop1")).to.be.null;
expect(ls.getItem("prop2")).to.be.null;
expect(ls.getItem("prop3")).to.be.null;
});
cy.get(".ls-btn")
.click()
.should(() => {
expect(localStorage.getItem("prop1")).to.eq("red");
expect(localStorage.getItem("prop2")).to.eq("blue");
expect(localStorage.getItem("prop3")).to.eq("magenta");
});
// Clear key matching string in Local Storage
cy.clearLocalStorage("prop1").should((ls) => {
expect(ls.getItem("prop1")).to.be.null;
expect(ls.getItem("prop2")).to.eq("blue");
expect(ls.getItem("prop3")).to.eq("magenta");
});
cy.get(".ls-btn")
.click()
.should(() => {
expect(localStorage.getItem("prop1")).to.eq("red");
expect(localStorage.getItem("prop2")).to.eq("blue");
expect(localStorage.getItem("prop3")).to.eq("magenta");
});
// Clear keys matching regex in Local Storage
cy.clearLocalStorage(/prop1|2/).should((ls) => {
expect(ls.getItem("prop1")).to.be.null;
expect(ls.getItem("prop2")).to.be.null;
expect(ls.getItem("prop3")).to.eq("magenta");
});
});
});

View File

@@ -0,0 +1,32 @@
/// <reference types="cypress" />
context("Location", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/location");
});
it("cy.hash() - get the current URL hash", () => {
// https://on.cypress.io/hash
cy.hash().should("be.empty");
});
it("cy.location() - get window.location", () => {
// https://on.cypress.io/location
cy.location().should((location) => {
expect(location.hash).to.be.empty;
expect(location.href).to.eq("https://example.cypress.io/commands/location");
expect(location.host).to.eq("example.cypress.io");
expect(location.hostname).to.eq("example.cypress.io");
expect(location.origin).to.eq("https://example.cypress.io");
expect(location.pathname).to.eq("/commands/location");
expect(location.port).to.eq("");
expect(location.protocol).to.eq("https:");
expect(location.search).to.be.empty;
});
});
it("cy.url() - get the current URL", () => {
// https://on.cypress.io/url
cy.url().should("eq", "https://example.cypress.io/commands/location");
});
});

View File

@@ -0,0 +1,98 @@
/// <reference types="cypress" />
context("Misc", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/misc");
});
it(".end() - end the command chain", () => {
// https://on.cypress.io/end
// cy.end is useful when you want to end a chain of commands
// and force Cypress to re-query from the root element
cy.get(".misc-table").within(() => {
// ends the current chain and yields null
cy.contains("Cheryl").click().end();
// queries the entire table again
cy.contains("Charles").click();
});
});
it("cy.exec() - execute a system command", () => {
// execute a system command.
// so you can take actions necessary for
// your test outside the scope of Cypress.
// https://on.cypress.io/exec
// we can use Cypress.platform string to
// select appropriate command
// https://on.cypress/io/platform
cy.log(`Platform ${Cypress.platform} architecture ${Cypress.arch}`);
// on CircleCI Windows build machines we have a failure to run bash shell
// https://github.com/cypress-io/cypress/issues/5169
// so skip some of the tests by passing flag "--env circle=true"
const isCircleOnWindows = Cypress.platform === "win32" && Cypress.env("circle");
if (isCircleOnWindows) {
cy.log("Skipping test on CircleCI");
return;
}
// cy.exec problem on Shippable CI
// https://github.com/cypress-io/cypress/issues/6718
const isShippable = Cypress.platform === "linux" && Cypress.env("shippable");
if (isShippable) {
cy.log("Skipping test on ShippableCI");
return;
}
cy.exec("echo Jane Lane").its("stdout").should("contain", "Jane Lane");
if (Cypress.platform === "win32") {
cy.exec("print cypress.json").its("stderr").should("be.empty");
} else {
cy.exec("cat cypress.json").its("stderr").should("be.empty");
cy.exec("pwd").its("code").should("eq", 0);
}
});
it("cy.focused() - get the DOM element that has focus", () => {
// https://on.cypress.io/focused
cy.get(".misc-form").find("#name").click();
cy.focused().should("have.id", "name");
cy.get(".misc-form").find("#description").click();
cy.focused().should("have.id", "description");
});
context("Cypress.Screenshot", function () {
it("cy.screenshot() - take a screenshot", () => {
// https://on.cypress.io/screenshot
cy.screenshot("my-image");
});
it("Cypress.Screenshot.defaults() - change default config of screenshots", function () {
Cypress.Screenshot.defaults({
blackout: [".foo"],
capture: "viewport",
clip: { x: 0, y: 0, width: 200, height: 200 },
scale: false,
disableTimersAndAnimations: true,
screenshotOnRunFailure: true,
onBeforeScreenshot() {},
onAfterScreenshot() {}
});
});
});
it("cy.wrap() - wrap an object", () => {
// https://on.cypress.io/wrap
cy.wrap({ foo: "bar" }).should("have.property", "foo").and("include", "bar");
});
});

View File

@@ -0,0 +1,56 @@
/// <reference types="cypress" />
context("Navigation", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io");
cy.get(".navbar-nav").contains("Commands").click();
cy.get(".dropdown-menu").contains("Navigation").click();
});
it("cy.go() - go back or forward in the browser's history", () => {
// https://on.cypress.io/go
cy.location("pathname").should("include", "navigation");
cy.go("back");
cy.location("pathname").should("not.include", "navigation");
cy.go("forward");
cy.location("pathname").should("include", "navigation");
// clicking back
cy.go(-1);
cy.location("pathname").should("not.include", "navigation");
// clicking forward
cy.go(1);
cy.location("pathname").should("include", "navigation");
});
it("cy.reload() - reload the page", () => {
// https://on.cypress.io/reload
cy.reload();
// reload the page without using the cache
cy.reload(true);
});
it("cy.visit() - visit a remote url", () => {
// https://on.cypress.io/visit
// Visit any sub-domain of your current domain
// Pass options to the visit
cy.visit("https://example.cypress.io/commands/navigation", {
timeout: 50000, // increase total time for the visit to resolve
onBeforeLoad(contentWindow) {
// contentWindow is the remote page's window object
expect(typeof contentWindow === "object").to.be.true;
},
onLoad(contentWindow) {
// contentWindow is the remote page's window object
expect(typeof contentWindow === "object").to.be.true;
}
});
});
});

View File

@@ -0,0 +1,165 @@
/// <reference types="cypress" />
context("Network Requests", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/network-requests");
});
// Manage HTTP requests in your app
it("cy.request() - make an XHR request", () => {
// https://on.cypress.io/request
cy.request("https://jsonplaceholder.cypress.io/comments").should((response) => {
expect(response.status).to.eq(200);
// the server sometimes gets an extra comment posted from another machine
// which gets returned as 1 extra object
expect(response.body).to.have.property("length").and.be.oneOf([500, 501]);
expect(response).to.have.property("headers");
expect(response).to.have.property("duration");
});
});
it("cy.request() - verify response using BDD syntax", () => {
cy.request("https://jsonplaceholder.cypress.io/comments").then((response) => {
// https://on.cypress.io/assertions
expect(response).property("status").to.equal(200);
expect(response).property("body").to.have.property("length").and.be.oneOf([500, 501]);
expect(response).to.include.keys("headers", "duration");
});
});
it("cy.request() with query parameters", () => {
// will execute request
// https://jsonplaceholder.cypress.io/comments?postId=1&id=3
cy.request({
url: "https://jsonplaceholder.cypress.io/comments",
qs: {
postId: 1,
id: 3
}
})
.its("body")
.should("be.an", "array")
.and("have.length", 1)
.its("0") // yields first element of the array
.should("contain", {
postId: 1,
id: 3
});
});
it("cy.request() - pass result to the second request", () => {
// first, let's find out the userId of the first user we have
cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
.its("body") // yields the response object
.its("0") // yields the first element of the returned list
// the above two commands its('body').its('0')
// can be written as its('body.0')
// if you do not care about TypeScript checks
.then((user) => {
expect(user).property("id").to.be.a("number");
// make a new post on behalf of the user
cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
userId: user.id,
title: "Cypress Test Runner",
body: "Fast, easy and reliable testing for anything that runs in a browser."
});
})
// note that the value here is the returned value of the 2nd request
// which is the new post object
.then((response) => {
expect(response).property("status").to.equal(201); // new entity created
expect(response).property("body").to.contain({
title: "Cypress Test Runner"
});
// we don't know the exact post id - only that it will be > 100
// since JSONPlaceholder has built-in 100 posts
expect(response.body).property("id").to.be.a("number").and.to.be.gt(100);
// we don't know the user id here - since it was in above closure
// so in this test just confirm that the property is there
expect(response.body).property("userId").to.be.a("number");
});
});
it("cy.request() - save response in the shared test context", () => {
// https://on.cypress.io/variables-and-aliases
cy.request("https://jsonplaceholder.cypress.io/users?_limit=1")
.its("body")
.its("0") // yields the first element of the returned list
.as("user") // saves the object in the test context
.then(function () {
// NOTE 👀
// By the time this callback runs the "as('user')" command
// has saved the user object in the test context.
// To access the test context we need to use
// the "function () { ... }" callback form,
// otherwise "this" points at a wrong or undefined object!
cy.request("POST", "https://jsonplaceholder.cypress.io/posts", {
userId: this.user.id,
title: "Cypress Test Runner",
body: "Fast, easy and reliable testing for anything that runs in a browser."
})
.its("body")
.as("post"); // save the new post from the response
})
.then(function () {
// When this callback runs, both "cy.request" API commands have finished
// and the test context has "user" and "post" objects set.
// Let's verify them.
expect(this.post, "post has the right user id").property("userId").to.equal(this.user.id);
});
});
it("cy.intercept() - route responses to matching requests", () => {
// https://on.cypress.io/intercept
let message = "whoa, this comment does not exist";
// Listen to GET to comments/1
cy.intercept("GET", "**/comments/*").as("getComment");
// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get(".network-btn").click();
// https://on.cypress.io/wait
cy.wait("@getComment").its("response.statusCode").should("be.oneOf", [200, 304]);
// Listen to POST to comments
cy.intercept("POST", "**/comments").as("postComment");
// we have code that posts a comment when
// the button is clicked in scripts.js
cy.get(".network-post").click();
cy.wait("@postComment").should(({ request, response }) => {
expect(request.body).to.include("email");
expect(request.headers).to.have.property("content-type");
expect(response && response.body).to.have.property("name", "Using POST in cy.intercept()");
});
// Stub a response to PUT comments/ ****
cy.intercept(
{
method: "PUT",
url: "**/comments/*"
},
{
statusCode: 404,
body: { error: message },
headers: { "access-control-allow-origin": "*" },
delayMs: 500
}
).as("putComment");
// we have code that puts a comment when
// the button is clicked in scripts.js
cy.get(".network-put").click();
cy.wait("@putComment");
// our 404 statusCode logic in scripts.js executed
cy.get(".network-put-comment").should("contain", message);
});
});

View File

@@ -0,0 +1,100 @@
/// <reference types="cypress" />
context("Querying", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/querying");
});
// The most commonly used query is 'cy.get()', you can
// think of this like the '$' in jQuery
it("cy.get() - query DOM elements", () => {
// https://on.cypress.io/get
cy.get("#query-btn").should("contain", "Button");
cy.get(".query-btn").should("contain", "Button");
cy.get("#querying .well>button:first").should("contain", "Button");
// ↲
// Use CSS selectors just like jQuery
cy.get('[data-test-id="test-example"]').should("have.class", "example");
// 'cy.get()' yields jQuery object, you can get its attribute
// by invoking `.attr()` method
cy.get('[data-test-id="test-example"]').invoke("attr", "data-test-id").should("equal", "test-example");
// or you can get element's CSS property
cy.get('[data-test-id="test-example"]').invoke("css", "position").should("equal", "static");
// or use assertions directly during 'cy.get()'
// https://on.cypress.io/assertions
cy.get('[data-test-id="test-example"]')
.should("have.attr", "data-test-id", "test-example")
.and("have.css", "position", "static");
});
it("cy.contains() - query DOM elements with matching content", () => {
// https://on.cypress.io/contains
cy.get(".query-list").contains("bananas").should("have.class", "third");
// we can pass a regexp to `.contains()`
cy.get(".query-list").contains(/^b\w+/).should("have.class", "third");
cy.get(".query-list").contains("apples").should("have.class", "first");
// passing a selector to contains will
// yield the selector containing the text
cy.get("#querying").contains("ul", "oranges").should("have.class", "query-list");
cy.get(".query-button").contains("Save Form").should("have.class", "btn");
});
it(".within() - query DOM elements within a specific element", () => {
// https://on.cypress.io/within
cy.get(".query-form").within(() => {
cy.get("input:first").should("have.attr", "placeholder", "Email");
cy.get("input:last").should("have.attr", "placeholder", "Password");
});
});
it("cy.root() - query the root DOM element", () => {
// https://on.cypress.io/root
// By default, root is the document
cy.root().should("match", "html");
cy.get(".query-ul").within(() => {
// In this within, the root is now the ul DOM element
cy.root().should("have.class", "query-ul");
});
});
it("best practices - selecting elements", () => {
// https://on.cypress.io/best-practices#Selecting-Elements
cy.get("[data-cy=best-practices-selecting-elements]").within(() => {
// Worst - too generic, no context
cy.get("button").click();
// Bad. Coupled to styling. Highly subject to change.
cy.get(".btn.btn-large").click();
// Average. Coupled to the `name` attribute which has HTML semantics.
cy.get("[name=submission]").click();
// Better. But still coupled to styling or JS event listeners.
cy.get("#main").click();
// Slightly better. Uses an ID but also ensures the element
// has an ARIA role attribute
cy.get("#main[role=button]").click();
// Much better. But still coupled to text content that may change.
cy.contains("Submit").click();
// Best. Insulated from all changes.
cy.get("[data-cy=submit]").click();
});
});
});

View File

@@ -0,0 +1,203 @@
/// <reference types="cypress" />
// remove no check once Cypress.sinon is typed
// https://github.com/cypress-io/cypress/issues/6720
context("Spies, Stubs, and Clock", () => {
it("cy.spy() - wrap a method in a spy", () => {
// https://on.cypress.io/spy
cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
const obj = {
foo() {}
};
const spy = cy.spy(obj, "foo").as("anyArgs");
obj.foo();
expect(spy).to.be.called;
});
it("cy.spy() retries until assertions pass", () => {
cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
const obj = {
/**
* Prints the argument passed
* @param x {any}
*/
foo(x) {
console.log("obj.foo called with", x);
}
};
cy.spy(obj, "foo").as("foo");
setTimeout(() => {
obj.foo("first");
}, 500);
setTimeout(() => {
obj.foo("second");
}, 2500);
cy.get("@foo").should("have.been.calledTwice");
});
it("cy.stub() - create a stub and/or replace a function with stub", () => {
// https://on.cypress.io/stub
cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
const obj = {
/**
* prints both arguments to the console
* @param a {string}
* @param b {string}
*/
foo(a, b) {
console.log("a", a, "b", b);
}
};
const stub = cy.stub(obj, "foo").as("foo");
obj.foo("foo", "bar");
expect(stub).to.be.called;
});
it("cy.clock() - control time in the browser", () => {
// https://on.cypress.io/clock
// create the date in UTC so its always the same
// no matter what local timezone the browser is running in
const now = new Date(Date.UTC(2017, 2, 14)).getTime();
cy.clock(now);
cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
cy.get("#clock-div").click().should("have.text", "1489449600");
});
it("cy.tick() - move time in the browser", () => {
// https://on.cypress.io/tick
// create the date in UTC so its always the same
// no matter what local timezone the browser is running in
const now = new Date(Date.UTC(2017, 2, 14)).getTime();
cy.clock(now);
cy.visit("https://example.cypress.io/commands/spies-stubs-clocks");
cy.get("#tick-div").click().should("have.text", "1489449600");
cy.tick(10000); // 10 seconds passed
cy.get("#tick-div").click().should("have.text", "1489449610");
});
it("cy.stub() matches depending on arguments", () => {
// see all possible matchers at
// https://sinonjs.org/releases/latest/matchers/
const greeter = {
/**
* Greets a person
* @param {string} name
*/
greet(name) {
return `Hello, ${name}!`;
}
};
cy.stub(greeter, "greet")
.callThrough() // if you want non-matched calls to call the real method
.withArgs(Cypress.sinon.match.string)
.returns("Hi")
.withArgs(Cypress.sinon.match.number)
.throws(new Error("Invalid name"));
expect(greeter.greet("World")).to.equal("Hi");
// @ts-ignore
expect(() => greeter.greet(42)).to.throw("Invalid name");
expect(greeter.greet).to.have.been.calledTwice;
// non-matched calls goes the actual method
// @ts-ignore
expect(greeter.greet()).to.equal("Hello, undefined!");
});
it("matches call arguments using Sinon matchers", () => {
// see all possible matchers at
// https://sinonjs.org/releases/latest/matchers/
const calculator = {
/**
* returns the sum of two arguments
* @param a {number}
* @param b {number}
*/
add(a, b) {
return a + b;
}
};
const spy = cy.spy(calculator, "add").as("add");
expect(calculator.add(2, 3)).to.equal(5);
// if we want to assert the exact values used during the call
expect(spy).to.be.calledWith(2, 3);
// let's confirm "add" method was called with two numbers
expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number);
// alternatively, provide the value to match
expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3));
// match any value
expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3);
// match any value from a list
expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3);
/**
* Returns true if the given number is event
* @param {number} x
*/
const isEven = (x) => x % 2 === 0;
// expect the value to pass a custom predicate function
// the second argument to "sinon.match(predicate, message)" is
// shown if the predicate does not pass and assertion fails
expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, "isEven"), 3);
/**
* Returns a function that checks if a given number is larger than the limit
* @param {number} limit
* @returns {(x: number) => boolean}
*/
const isGreaterThan = (limit) => (x) => x > limit;
/**
* Returns a function that checks if a given number is less than the limit
* @param {number} limit
* @returns {(x: number) => boolean}
*/
const isLessThan = (limit) => (x) => x < limit;
// you can combine several matchers using "and", "or"
expect(spy).to.be.calledWith(
Cypress.sinon.match.number,
Cypress.sinon.match(isGreaterThan(2), "> 2").and(Cypress.sinon.match(isLessThan(4), "< 4"))
);
expect(spy).to.be.calledWith(
Cypress.sinon.match.number,
Cypress.sinon.match(isGreaterThan(200), "> 200").or(Cypress.sinon.match(3))
);
// matchers can be used from BDD assertions
cy.get("@add").should("have.been.calledWith", Cypress.sinon.match.number, Cypress.sinon.match(3));
// you can alias matchers for shorter test code
const { match: M } = Cypress.sinon;
cy.get("@add").should("have.been.calledWith", M.number, M(3));
});
});

View File

@@ -0,0 +1,97 @@
/// <reference types="cypress" />
context("Traversal", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/traversal");
});
it(".children() - get child DOM elements", () => {
// https://on.cypress.io/children
cy.get(".traversal-breadcrumb").children(".active").should("contain", "Data");
});
it(".closest() - get closest ancestor DOM element", () => {
// https://on.cypress.io/closest
cy.get(".traversal-badge").closest("ul").should("have.class", "list-group");
});
it(".eq() - get a DOM element at a specific index", () => {
// https://on.cypress.io/eq
cy.get(".traversal-list>li").eq(1).should("contain", "siamese");
});
it(".filter() - get DOM elements that match the selector", () => {
// https://on.cypress.io/filter
cy.get(".traversal-nav>li").filter(".active").should("contain", "About");
});
it(".find() - get descendant DOM elements of the selector", () => {
// https://on.cypress.io/find
cy.get(".traversal-pagination").find("li").find("a").should("have.length", 7);
});
it(".first() - get first DOM element", () => {
// https://on.cypress.io/first
cy.get(".traversal-table td").first().should("contain", "1");
});
it(".last() - get last DOM element", () => {
// https://on.cypress.io/last
cy.get(".traversal-buttons .btn").last().should("contain", "Submit");
});
it(".next() - get next sibling DOM element", () => {
// https://on.cypress.io/next
cy.get(".traversal-ul").contains("apples").next().should("contain", "oranges");
});
it(".nextAll() - get all next sibling DOM elements", () => {
// https://on.cypress.io/nextall
cy.get(".traversal-next-all").contains("oranges").nextAll().should("have.length", 3);
});
it(".nextUntil() - get next sibling DOM elements until next el", () => {
// https://on.cypress.io/nextuntil
cy.get("#veggies").nextUntil("#nuts").should("have.length", 3);
});
it(".not() - remove DOM elements from set of DOM elements", () => {
// https://on.cypress.io/not
cy.get(".traversal-disabled .btn").not("[disabled]").should("not.contain", "Disabled");
});
it(".parent() - get parent DOM element from DOM elements", () => {
// https://on.cypress.io/parent
cy.get(".traversal-mark").parent().should("contain", "Morbi leo risus");
});
it(".parents() - get parent DOM elements from DOM elements", () => {
// https://on.cypress.io/parents
cy.get(".traversal-cite").parents().should("match", "blockquote");
});
it(".parentsUntil() - get parent DOM elements from DOM elements until el", () => {
// https://on.cypress.io/parentsuntil
cy.get(".clothes-nav").find(".active").parentsUntil(".clothes-nav").should("have.length", 2);
});
it(".prev() - get previous sibling DOM element", () => {
// https://on.cypress.io/prev
cy.get(".birds").find(".active").prev().should("contain", "Lorikeets");
});
it(".prevAll() - get all previous sibling DOM elements", () => {
// https://on.cypress.io/prevall
cy.get(".fruits-list").find(".third").prevAll().should("have.length", 2);
});
it(".prevUntil() - get all previous sibling DOM elements until el", () => {
// https://on.cypress.io/prevuntil
cy.get(".foods-list").find("#nuts").prevUntil("#veggies").should("have.length", 3);
});
it(".siblings() - get all sibling DOM elements", () => {
// https://on.cypress.io/siblings
cy.get(".traversal-pills .active").siblings().should("have.length", 2);
});
});

View File

@@ -0,0 +1,108 @@
/// <reference types="cypress" />
context("Utilities", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/utilities");
});
it("Cypress._ - call a lodash method", () => {
// https://on.cypress.io/_
cy.request("https://jsonplaceholder.cypress.io/users").then((response) => {
let ids = Cypress._.chain(response.body).map("id").take(3).value();
expect(ids).to.deep.eq([1, 2, 3]);
});
});
it("Cypress.$ - call a jQuery method", () => {
// https://on.cypress.io/$
let $li = Cypress.$(".utility-jquery li:first");
cy.wrap($li).should("not.have.class", "active").click().should("have.class", "active");
});
it("Cypress.Blob - blob utilities and base64 string conversion", () => {
// https://on.cypress.io/blob
cy.get(".utility-blob").then(($div) => {
// https://github.com/nolanlawson/blob-util#imgSrcToDataURL
// get the dataUrl string for the javascript-logo
return Cypress.Blob.imgSrcToDataURL(
"https://example.cypress.io/assets/img/javascript-logo.png",
undefined,
"anonymous"
).then((dataUrl) => {
// create an <img> element and set its src to the dataUrl
let img = Cypress.$("<img />", { src: dataUrl });
// need to explicitly return cy here since we are initially returning
// the Cypress.Blob.imgSrcToDataURL promise to our test
// append the image
$div.append(img);
cy.get(".utility-blob img").click().should("have.attr", "src", dataUrl);
});
});
});
it("Cypress.minimatch - test out glob patterns against strings", () => {
// https://on.cypress.io/minimatch
let matching = Cypress.minimatch("/users/1/comments", "/users/*/comments", {
matchBase: true
});
expect(matching, "matching wildcard").to.be.true;
matching = Cypress.minimatch("/users/1/comments/2", "/users/*/comments", {
matchBase: true
});
expect(matching, "comments").to.be.false;
// ** matches against all downstream path segments
matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/**", {
matchBase: true
});
expect(matching, "comments").to.be.true;
// whereas * matches only the next path segment
matching = Cypress.minimatch("/foo/bar/baz/123/quux?a=b&c=2", "/foo/*", {
matchBase: false
});
expect(matching, "comments").to.be.false;
});
it("Cypress.Promise - instantiate a bluebird promise", () => {
// https://on.cypress.io/promise
let waited = false;
/**
* @return Bluebird<string>
*/
function waitOneSecond() {
// return a promise that resolves after 1 second
// @ts-ignore TS2351 (new Cypress.Promise)
return new Cypress.Promise((resolve, reject) => {
setTimeout(() => {
// set waited to true
waited = true;
// resolve with 'foo' string
resolve("foo");
}, 1000);
});
}
cy.then(() => {
// return a promise to cy.then() that
// is awaited until it resolves
// @ts-ignore TS7006
return waitOneSecond().then((str) => {
expect(str).to.eq("foo");
expect(waited).to.be.true;
});
});
});
});

View File

@@ -0,0 +1,59 @@
/// <reference types="cypress" />
context("Viewport", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/viewport");
});
it("cy.viewport() - set the viewport size and dimension", () => {
// https://on.cypress.io/viewport
cy.get("#navbar").should("be.visible");
cy.viewport(320, 480);
// the navbar should have collapse since our screen is smaller
cy.get("#navbar").should("not.be.visible");
cy.get(".navbar-toggle").should("be.visible").click();
cy.get(".nav").find("a").should("be.visible");
// lets see what our app looks like on a super large screen
cy.viewport(2999, 2999);
// cy.viewport() accepts a set of preset sizes
// to easily set the screen to a device's width and height
// We added a cy.wait() between each viewport change so you can see
// the change otherwise it is a little too fast to see :)
cy.viewport("macbook-15");
cy.wait(200);
cy.viewport("macbook-13");
cy.wait(200);
cy.viewport("macbook-11");
cy.wait(200);
cy.viewport("ipad-2");
cy.wait(200);
cy.viewport("ipad-mini");
cy.wait(200);
cy.viewport("iphone-6+");
cy.wait(200);
cy.viewport("iphone-6");
cy.wait(200);
cy.viewport("iphone-5");
cy.wait(200);
cy.viewport("iphone-4");
cy.wait(200);
cy.viewport("iphone-3");
cy.wait(200);
// cy.viewport() accepts an orientation for all presets
// the default orientation is 'portrait'
cy.viewport("ipad-2", "portrait");
cy.wait(200);
cy.viewport("iphone-4", "landscape");
cy.wait(200);
// The viewport will be reset back to the default dimensions
// in between tests (the default can be set in cypress.json)
});
});

View File

@@ -0,0 +1,31 @@
/// <reference types="cypress" />
context("Waiting", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/waiting");
});
// BE CAREFUL of adding unnecessary wait times.
// https://on.cypress.io/best-practices#Unnecessary-Waiting
// https://on.cypress.io/wait
it("cy.wait() - wait for a specific amount of time", () => {
cy.get(".wait-input1").type("Wait 1000ms after typing");
cy.wait(1000);
cy.get(".wait-input2").type("Wait 1000ms after typing");
cy.wait(1000);
cy.get(".wait-input3").type("Wait 1000ms after typing");
cy.wait(1000);
});
it("cy.wait() - wait for a specific route", () => {
// Listen to GET to comments/1
cy.intercept("GET", "**/comments/*").as("getComment");
// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get(".network-btn").click();
// wait for GET comments/1
cy.wait("@getComment").its("response.statusCode").should("be.oneOf", [200, 304]);
});
});

View File

@@ -0,0 +1,22 @@
/// <reference types="cypress" />
context("Window", () => {
beforeEach(() => {
cy.visit("https://example.cypress.io/commands/window");
});
it("cy.window() - get the global window object", () => {
// https://on.cypress.io/window
cy.window().should("have.property", "top");
});
it("cy.document() - get the document object", () => {
// https://on.cypress.io/document
cy.document().should("have.property", "charset").and("eq", "UTF-8");
});
it("cy.title() - get the title", () => {
// https://on.cypress.io/title
cy.title().should("include", "Kitchen Sink");
});
});

View File

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

View File

@@ -0,0 +1,5 @@
{
"id": 8739,
"name": "Jane",
"email": "jane@example.com"
}

View File

@@ -0,0 +1 @@
[]

View File

@@ -0,0 +1,22 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
/**
* @type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
};

View File

@@ -0,0 +1,27 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
import "@testing-library/cypress/add-commands";

View File

@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import "./commands";
// Alternatively you can use CommonJS syntax:
// require('./commands')

View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "../node_modules",
"types": ["cypress"]
},
"include": ["**/*.*"]
}

View File

@@ -1,40 +0,0 @@
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";
import pluginReactCompiler from "eslint-plugin-react-compiler";
/** @type {import("eslint").Linter.Config[]} */
export default [
{ ignores: [
"node_modules/**",
"dist/**",
"build/**",
"dev-dist/**",
"**/trello-board/dnd/**" // Exclude third-party DnD library
] },
{
files: ["**/*.{js,mjs,cjs,jsx}"]
},
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
{
...pluginReact.configs.flat.recommended,
settings: {
react: { version: "detect" }
},
rules: {
...pluginReact.configs.flat.recommended.rules,
"react/prop-types": 0,
"react/no-children-prop": 0 // Disable react/no-children-prop rule
}
},
pluginReact.configs.flat["jsx-runtime"],
{
plugins: {
"react-compiler": pluginReactCompiler
},
rules: {
"react-compiler/react-compiler": "error"
}
}
];

View File

@@ -1,81 +1,169 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
<link rel="icon" href="/favicon.png" />
<% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
<link rel="icon" href="/ro-favicon.png" />
<% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
<link rel="icon" href="/pm/pm-favicon.ico" />
<% } %>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#1690ff" />
<!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF" />
<!-- TODO:AIo Update the individual logos for each.-->
<link rel="apple-touch-icon" href="public/logo192.png" />
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<% if (env.VITE_APP_INSTANCE === 'IMEX') { %>
<meta name="description" content="ImEX Online" />
<title>ImEX Online</title>
<script type="text/javascript">
window.$crisp = [];
window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
window.CRISP_WEBSITE_ID = '36724f62-2eb0-4b29-9cdd-9905fb99913e';
(function () {
d = document;
s = d.createElement("script");
s.src = "https://client.crisp.chat/l.js";
s = d.createElement('script');
s.src = 'https://client.crisp.chat/l.js';
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
d.getElementsByTagName('head')[0].appendChild(s);
})();
</script>
<% } %> <% if (env.VITE_APP_INSTANCE === 'ROME') { %>
<meta name="description" content="Rome Online" />
<title>Rome Online</title>
<script type="text/javascript" id="zsiqchat">
var $zoho = $zoho || {};
$zoho.salesiq = $zoho.salesiq || {
widgetcode: "siq01bb8ac617280bdacddfeb528f07734dadc64ef3f05efef9f769c1ec171af666",
values: {},
ready: function () {}
};
var d = document;
s = d.createElement("script");
s.type = "text/javascript";
s.id = "zsiqscript";
s.defer = true;
s.src = "https://salesiq.zohopublic.com/widget";
t = d.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s, t);
</script>
<script type="text/javascript">
window.$crisp = [];
window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
(function () {
d = document;
s = d.createElement("script");
s.src = "https://client.crisp.chat/l.js";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
<!--Use the below code snippet to provide real time updates to the live chat plugin without the need of copying and paste each time to your website when changes are made via PBX-->
<call-us-selector phonesystem-url=https://rometech.east.3cx.us:5001 party="LiveChat528346"></call-us-selector>
<!--Incase you don't want real time updates to the live chat plugin when options are changed, use the below code snippet. Please note that each time you change the settings you will need to copy and paste the snippet code to your website-->
<!--<call-us
phonesystem-url=https://rometech.east.3cx.us:5001
style="position:fixed;font-size:16px;line-height:17px;z-index: 99999;right: 20px; bottom: 20px;"
id="wp-live-chat-by-3CX"
minimized="true"
animation-style="noanimation"
party="LiveChat528346"
minimized-style="bubbleright"
allow-call="true"
allow-video="false"
allow-soundnotifications="true"
enable-mute="true"
enable-onmobile="true"
offline-enabled="true"
enable="true"
ignore-queueownership="false"
authentication="both"
show-operator-actual-name="true"
aknowledge-received="true"
gdpr-enabled="false"
message-userinfo-format="name"
message-dateformat="both"
lang="browser"
button-icon-type="default"
greeting-visibility="none"
greeting-offline-visibility="none"
chat-delay="2000"
enable-direct-call="true"
enable-ga="false"
></call-us>-->
<script defer src=https://downloads-global.3cx.com/downloads/livechatandtalk/v1/callus.js id="tcx-callus-js" charset="utf-8"></script>
<% } %> <% if (env.VITE_APP_INSTANCE === 'PROMANAGER') { %>
<title>ProManager</title>
<meta name="description" content="ProManager" />
<% } %>
<script>
!(function () {
'use strict';
var e = [
'debug',
'destroy',
'do',
'help',
'identify',
'is',
'off',
'on',
'ready',
'render',
'reset',
'safe',
'set',
];
if (window.noticeable) console.warn('Noticeable SDK code snippet loaded more than once');
else {
var n = (window.noticeable = window.noticeable || []);
function t(e) {
return function () {
var t = Array.prototype.slice.call(arguments);
return t.unshift(e), n.push(t), n;
};
}
!(function () {
for (var o = 0; o < e.length; o++) {
var r = e[o];
n[r] = t(r);
}
})(),
(function () {
var e = document.createElement('script');
(e.async = !0), (e.src = 'https://sdk.noticeable.io/l.js');
var n = document.head;
n.insertBefore(e, n.firstChild);
})();
}
})();
</script>
<% } %>
<script>!function(w,d,i,s){function l(){if(!d.getElementById(i)){var f=d.getElementsByTagName(s)[0],e=d.createElement(s);e.type="text/javascript",e.async=!0,e.src="https://canny.io/sdk.js",f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.Canny){var c=function(){c.q.push(arguments)};c.q=[],w.Canny=c,"complete"===d.readyState?l():w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}}(window,document,"canny-jssdk","script");</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

29791
client/package-lock.json generated

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More