Package detail

eehitus-open-data-reports-ui

mkmjs284ISC1.0.9

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.

readme

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

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

Local development

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

Common components

  • 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

Form validation

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

Translations

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

API requests

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

$ npm install -g @openapitools/openapi-generator-cli

$ 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)

$ 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
    $ 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

Testing

For library unit testing we use Jest.

E2E Tests are located in this project.

Debugging with source-maps

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.

Branching

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

Publishing

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.