# eehitus-my-task-list-ui E-Ehitus my task list UI is the library for ongoing processes that need to be worked on and other user related activities and tasks inside eehitus-ui. --- ## Table of Contents * [Getting started with development](#getting-started-with-development) * [Prerequisites](#prerequisites) * [Running locally](#running-locally) * [Local development](#local-development) * [Development patterns overview](#development-patterns-overview) * [Common components](#common-components) * [Form validation](#form-validation) * [Translations](#translations) * [API requests](#api-requests) * [Testing](#testing) * [Debugging with source-maps](#debugging-with-source-maps) * [Branching](#branching) --- ## Getting started with development ### Prerequisites - Node.js (v18.20.6) - Yarn (v1.x) * Recommendation: * [Node version manager](https://github.com/nvm-sh/nvm) * [Node version manager for Windows](https://github.com/coreybutler/nvm-windows) ### 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](https://git.ehr.ee/ehr/ehr-k8s-pipeline/ui-extras) * New common business logic components or enums, should be added to this library * [TEDI library](https://github.com/TEHIK-EE/tedi-design-system) - E-Ehitus is moving to use Estonian TEDI library for react. * New features should be developed using them, if possible. * [ehr-components](https://git.ehr.ee/ehr/ehr-k8s-pipeline/ehr-components) Old components * These are old components and you should not create new functionality with them if possible. * [eehitus-visuaal](https://git.ehr.ee/ehr/ehr-k8s-pipeline/e-ehitus_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](https://www.npmjs.com/package/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 ```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](https://git.ehr.ee/ehr/ehr-k8s-pipeline/swaggerui/-/tree/master/src/swaggers?ref_type=heads) 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 --- ### Testing For library unit testing we use Jest. [E2E Tests](https://git.ehr.ee/ehr/ehr-k8s-pipeline/ehr-e2e) 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](https://git.ehr.ee/) 2. Find your project and go to tags page [document-ui as example](https://git.ehr.ee/ehr/ehr-k8s-pipeline/ehr-document-ui/-/tags) 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.