eehitus-open-data-reports-ui

E-Ehitus open data reports UI is the library for showing public information about buildings
in Estonia and other information related to this registry inside eehitus-ui.

---

Table of Contents

* Getting started with development
* Prerequisites
* Running locally
* Local development
* Development patterns overview
* Common components
* Form validation
* Translations
* API requests
* Testing
* Debugging with source-maps
* Branching

---

Getting started with development

$3

- Node.js (v18.20.6)
- Yarn (v1.x)

* Recommendation:
* Node version manager
* Node version manager for Windows

$3

* npm i yarn -g - If you don't have yarn installed locally for given node version
* yarn install
* yarn start

$3

yarn start opens http://localhost:3000

You have to look for BrowserRouter definition to find the urls you can navigate to.
Usually can be found at ./src/App.tsx or in the component rendered inside it.

* ./public/config.js contains all the endpoint URL-s for different microservices.
* Default endpoint should end with /v1
* You can specify a certain API to point to your projects API /project_ingress

---

Development patterns overview

---

$3

* eehitus-ui-extras
* New common business logic components or enums, should be added to this library
* TEDI library - E-Ehitus is moving to use Estonian TEDI library for react.
* New features should be developed using them, if possible.
* ehr-components Old components
* These are old components and you should not create new functionality with them if possible.
* eehitus-visuaal eehitus-ui has usage of global styles
* When making changes there, make sure your change does not have impact to the rest of the UI libraries
---

$3

For form validation we use Yup.

If you have not used it before look find examples used in eehitus-document-ui.

For an Example find usage of: useYupValidation

---

$3

All the translations exist in ./src/translations

Webpack at build time merges all the translations into 3 specific files:
* example_project_name_et.json
* example_project_name_en.json
* example_project_name_ru.json

To add new translation files under ./src/translations

Follow that the file ends with *_et.json pattern

---

$3

We use axios and we generate the entire API interface for all service requests using OpenApi Generator.

The API clients are located in ./src/services

#### Generating API with OpenApi Generator

openapi-generator version = 6.6.0

version 6 is required for axios 0.x
``cmd
$ npm install -g @openapitools/openapi-generator-cli
`
`cmd
$ openapi-generator-cli version-manager set 6
`
If backend is running and openapi doc is accessible (change the port to your matching BE running port)
`cmd
$ openapi-generator-cli generate -i http://localhost:9000/v3/api-docs -g typescript-axios --additional-properties=modelPropertyNaming=original --type-mappings=DateTime=Date --type-mappings=object=any
`
If you need to update service clients with master yaml
* Find the yaml in Gitlab swagger project and download it
* Create a new folder
* Open terminal in the same folder with the yaml
`cmd
$ openapi-generator-cli generate -i rename-this-to-your-file.yaml -g typescript-axios --additional-properties=modelPropertyNaming=original --type-mappings=DateTime=Date --type-mappings=object=any
`
* Copy the .ts files into your projects ./src/services/you-api folder


---

$3

For library unit testing we use Jest.

E2E Tests are located in this project.

---

$3

If you have developed locally and when you update the library version in eehitus-ui project and start receiving errors,
it's wise to generate local build using yarn cibuild:debug

This generates ./dist folder

Then go into eehitus-ui project
* Remove .cache eehitus-ui/node_modules/.cache
Remove old dist eehitus-ui/node_modules/eehitus-project_name*/dist
Copy your project local debug build dist folder to eehitus-ui/node_modules/eehitus-project_name*
* Start eehitus-ui using yarn start now the error should have source-maps and debugging it, should be easier.

---

$3

For developing we use Git Flow branching pattern

Example branch names
* release/project_name
* fix/TICKET_NR-short-description
* feature/TICKET_NR-short-description
* company_name/feature/TICKET_NR-short-description

We don't recommend creating develop branch.

Good approach is to create a release/ branch and all new development in company_name/feature/ you create a Merge Request against release/*

You create tags on the release/* branch and you have a separate project namespace in rancher where you update eehitus-ui

---

$3

To get new version of the library up.

1. Go to Gitlab
2. Find your project and go to tags page document-ui as example
3. Create a New tag, specify version in semver pattern version-..* add a description of project tag or other description
4. Update your projects eehitus-ui/package.json version and run yarn to generate new yarn.lock file and commit it
5. Create a New tag for eehitus-ui
6. Update the eehitus-ui in rancher project_namespace, you should never update the v1 ingress eehitus-ui. v1` represents master and should always be in stable state.