-
Notifications
You must be signed in to change notification settings - Fork 0
Developer Guide
- Select a issue from the IMS issues.
- Pull the latest version of the
developbranch - Create a branch from there called
#{insert label (e.g feature or bug)}/{insert general name of story}-#{story number} - Put the issue into
In Progress - Repeatedly during development:
- Develop code/write tests
- Ensure all tests pass
- Run linter and fix issues
- Commit - ideally, each commit message should have the issue number included, so that we can track the code related to resolving the issue
- (optionally) push to origin
- Merge
origin/developinto your feature branch. - Run unit tests
- Check impact on coverage
- Run e2e tests
- Push to
origin - Make a pull request - the PR description should also point to the relevant issue
- Put the issue into
In Review - Get the pull request reviewed, if more work needs to be done go back to step 4.
- Wait for the automated build (if it exists, otherwise the reviewer should do these steps)
- Once a pull request is approved then it can be merged back into
origin/develop - Wait for the automated build for the merge in to
developto pass. - Move the issue to
Doneand close the issue.
When working on a new feature the branch should follow the naming convention feature/{insert general name of story}-#{story number}. This indicates it is new functionality as well as linking it to the story (for potential future requirement tracing)
If working on a bug from a previous story then the branch should follow the pattern bugfix/{general name of bug}-#{story/bug number}.
To develop the Inventory management system you will need the following tools:
- Node.js (https://nodejs.org/en/) - (LTS version at the time of writing is 20.17.0)
- NPM (comes with the node.js installation)
- An IDE for developing with JavaScript (VS Code is a good cross-platform suggestion)
- Yarn
- Docker
- Docker Compose
Installation instructions are available on the sites for each tool and depend on your operating system, e.g. node can be installed as an msi on a windows machine
Note: if installing Node.js on Linux machines please read https://nodejs.org/en/download/package-manager/ as these detail how to ensure you are able to get the most recent version of Node.js on your machine, rather than an old version in the default package.
- React Dev Tools extension: Chrome Firefox
- Redux Dev Tools extension: http://extension.remotedev.io/
- Interactive e2e testing tools: PuTTY and PuTTYgen, Xming and XLaunch
- Useful VSCode extensions:
- JavaScript development:
- ESLint - displays eslint errors in the editor
- npm Intellisense - autocompletes npm import statements
- npm - validates that dependencies are installed and adds NPM commands to command pallete
- Prettier - can format files using Prettier - I have it set to format on save ;)
- Git:
- GitLens - enhances VSCode git support
- General:
- Code Coverage - highlights uncovered lines of code in the editor
- JavaScript development:
- Generate a public/private key pair with default parameters (RSA, 2048 bits), saving both public and private keys.
- Copy the public key to your VM, under
.ssh/authorized_keysin the formatssh-rsa PUBLIC_KEY rsa-key-YYYYMMDDfilling in the rsa-key-date from the Comment in the key file.
- Under the category: Session, under
host nameenteryour-fed-id@VM-IP-ADDRESS - Under the category: Connection -> SSH -> X11, make sure that
Enable X11 forwardingis enabled. - Under the category: Connection -> SSH -> Auth -> Credentials, add your private key (from the PuttyGen step).
- Return to category: Session, under
Saved Sessionsenter a name to save your VM settings as (i.e Dev VM) and press Save.
IMPORTANT: Make sure to always select the saved session settings and press load whenever starting up Putty.
- Open XLaunch, and select Multiple Windows and continue.
- Select Start no client and continue.
- Select Disable Server Access Control and continue.
- Select Finish
- Load Saved session settings and select open.
- Return to your IDE, connect to your VM, and open the terminal.
- enter
export DISPLAY=localhost:10.0, or any other unused localhost - run
xeyesto make sure everything is working (should open a new window).
You can now run interactive tests with yarn:e2e:interactive and yarn:e2e:interactive:api
Here's a list of useful tutorials to help new developers learn the technologies required:
- Javascript: Intro to Javascript, Async Javascript, JS Handbook
- ES6 Javascript: The ES6 Guide
- React: Official Tutorial, codecademy, React Handbook
- Redux: Official Tutorial, What is a Redux reducer?
- Typescript: Official Typescript docs, React & Redux in TypeScript - Static Typing Guide
- React/Redux, JavaScript, CSS (and more): freeCodeCamp Curriculum
First of all, you will need to clone the repository and navigate to the project directory:
git clone [email protected]:ral-facilities/inventory-management-system.git
cd inventory-management-systemCreate a inventory-management-system-settings.json file
cp public/inventory-management-system-settings.example.json public/inventory-management-system-settings.jsonRun install all the dependancies
yarn installWhen switching branches you may need to run yarn install if the branch you are on has installed extra dependencies
If you get errors about dependencies not being met, especially after switching branches, then this may be due to yarn having mismatching versions and getting stuck and unable to upgrade. This can usually be fixed by deleting the node_modules folder and running yarn install freshly
Start the website
yarn devBuild and start the Docker containers:
docker-compose upThe website should now be running at http://localhost:3000.
Start IMS API (using docker-compose.yml)
- https://github.com/ral-facilities/inventory-management-system-api?tab=readme-ov-file#docker-setup
- Make sure to set
AUTHENTICATION__ENABLEDset tofalsein the.envfile as Scigateway (the parent application) deals with authentication
IMS API should be running http://localhost:8000. To check if it is running correctly you access the open api docs.
Edit the apiUrl in the inventory-management-system-settings.json to be
'http://localhost:8000'
Start the website
yarn devBuild and start the Docker containers:
docker-compose upThe website should now be running at http://localhost:3000.
Start IMS API (using docker-compose.yml)
- https://github.com/ral-facilities/inventory-management-system-api?tab=readme-ov-file#docker-setup
- Make sure to set
AUTHENTICATION__ENABLEDset totruein the.env
IMS API should be running http://localhost:8000.
Edit the apiUrl in the inventory-management-system-settings.json to be
'http://localhost:8000'
Start ldap-jwt-auth (using docker-compose.yml)
- https://github.com/ral-facilities/ldap-jwt-auth?tab=readme-ov-file#docker-setup
- For local setup you want to change port to 8001 so it doesn't clash with IMS API (change in docker-compose.yml)
ldap-jwt-auth should be running http://localhost:8001.
Start Scigateway(on react-18 branch react-18-#1205)
- https://github.com/ral-facilities/scigateway/wiki/Setting-up-a-dev-environment/_edit#starting-parent-app-development
- Make sure to copy over the
inventory-management-system-settings.jsonto the public folder in scigateway - In the
settings.jsonchange the plugins, auth-provider and authUrl settings match the example below
{
"plugins": [
{
"name": "inventory-management-system",
"src": "http://localhost:5001/main.js",
"enable": true,
"location": "main"
}
],
"auth-provider": "jwt",
"authUrl":"http://localhost:8001"
}Starting IMS
Start the website
yarn preview:buildThis should build the main.js on http://localhost:5001.
-
Skip these step
Start ldap-jwt-auth (using docker-compose.yml) -
Make sure that
AUTHENTICATION__ENABLEDset tofalsein the.envin IMS API -
The scigateway
setting.jsonshould look like this
{
"plugins": [
{
"name": "inventory-managment-system",
"src": "http://localhost:5001/main.js",
"enable": true,
"location": "main"
}
],
"auth-provider": null,
"authUrl":""
}IMS utilises authorisation to enable extra functionality for privileged (currently just admin) users. A banner is shown to users if they are currently a privileged role.
The extra functionality of an admin includes
- Creating and deleting units and usage statuses
- Ability to bypass rules when creating, editing, deleting or moving items.
During development, you can enable admin functionality using several different methods. The available options are outlined below.
A Privileged user toggle is available in development mode (positioned in the top right of the screen), which switches between an admin and default user.
By following the instructions in ldap-jwt-auth here, you can create an admin user, and then generate an access token which contains a privileged role. Following this you can then either
a) Follow the Scigateway setup instructions above and login with the admin credentials specified.
b) Follow the IMS API setup instructions above and use the generated access token.
This will grant you privileged functionality in the Inventory Management System.
Here is a list of common commands used in development and a short description of what they do
-
yarn dev- start the development server that does hot reloading -
yarn build- build the final bundled javascript -
yarn test- run the tests and calculate the coverage -
yarn lint- lint (and fix as much as possible) the typescript/javascript code -
yarn e2e- run the end-to-end tests in a headless mode with mock data (useful for CI systems) -
yarn e2e:interactive- run the end-to-end tests interactively with mock data (useful for debugging e2e tests) -
yarn e2e:api- run the end-to-end tests in a headless mode using the api (useful for CI systems) -
yarn e2e:interactive:api- run the end-to-end tests interactively using the api (useful for debugging e2e tests)
More commands can be found in package.json - specifically in the scripts section