> For the complete documentation index, see [llms.txt](https://doc-ihe.kereval.cloud/gazelle-applications/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc-ihe.kereval.cloud/gazelle-applications/user-management-interface/...md).

# Gazelle User Management User interface

This project is using Next.js v.15, React, Typescript and TailwindCSS technologies.

This project needs to be used with\
the [Gazelle User Management](https://gitlab.inria.fr/gazelle/applications/gazelle-user-management) back-end service.

* [Gazelle User Management User Interface](#gazelle-user-management-user-interface)
  * [Configurations](#configurations)
    * [Install dependencies](#install-dependencies)
    * [Environment variables](#environment-variables)
  * [Start application in dev mode](#start-application-in-dev-mode)
  * [Build docker image](#build-docker-image)
  * [Start application](#start-application)
  * [Execute tests](#execute-tests)
    * [End to end tests](#end-to-end-tests)
    * [Unit tests](#unit-tests)
  * [Internationalization](#internationalization)
  * [Learn More](#learn-more)

## Configurations

### Install dependencies

```bash
npm install
```

### Environment variables

You need to create a `.env` file at the root of the project and fill it with the following variables:

| Variable name      | Description                                                           | Example                                            |
| ------------------ | --------------------------------------------------------------------- | -------------------------------------------------- |
| GZL\_GUM\_API\_URL | The URL of the Gazelle User Management back-end service.              | <http://localhost:8080/gum/rest>                   |
| GZL\_TM\_URL       | The URL of TM.                                                        | <https://dev1.ihe.kereval.cloud/gazelle/home.seam> |
| HOSTNAME           | It is possible to update the hostname of the server is running behind | localhost                                          |
| PORT               | It is possible to update the port of the server is running behind     | 3000                                               |

## Start application in dev mode

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

Open <http://localhost:3000/gum-ui> with your browser to see the result.

## Build docker image

```bash
docker build -t rg.fr-par.scw.cloud/gazelle-snapshot/app/gazelle-user-management-ui:${APP_VERSION} .
```

## Start application

```bash
docker-compose up -d
```

## Execute tests

### End to end tests

The end to end tests are using [Cypress](https://www.cypress.io/).

You can open the Cypress test runner with the following command at the root of the project:

```bash
npx cypress open
```

\[WARNING] The application must be started before running the tests.

### Unit tests

The unit tests utilize [React Testing Library](https://testing-library.com/) and [Jest](https://jestjs.io/).

They are located in the `__tests__` folder containing both the unit tests and their associated snapshots.

To execute the tests and view the test coverage report, run:

```bash
npm test
```

If changes occur and you need to update the snapshots, run:

```bash
npm test -- -u
```

## Internationalization

We use Crowdin to manage our translations for internationalization.

To use crowdin CLI, you must install the package in local using the command :

```bash
sudo npm i @crowdin/cli -g
```

If you need to add some translations, Add them manually to the english translations\
file `public/locales/en/translation.json`.

Then, you can upload this translation file to Crowdin with the following command :

```bash
npm run upload-translations
```

Then, translate the elements directly from [Crowdin editor interface](https://crowdin.com/editor/gazelle-ui).

When it's done, you can retrieve all the translations by executing the following command :

```bash
npm run download-translations
```

This command will build the Crowdin project and then download JSON translation files and place them in the\
folder `locales/<locale>/translation.json`.

## Learn More

To learn more about Next.js, take a look at the following resources:

* [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
* [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.