# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc-ihe.kereval.cloud/gazelle-applications/user-management-interface/...md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.