OS2agora - Hearing Portal Internal UI

This repository contains the internal frontend for OS2agora - used by employees to manage hearings.
The repository is part of the overall solution, which also consists of a public frontend used by companies and citizens and an API/backend

The frontend for the public is located in OS2agora-Public-UI

The Api and backend is located in OS2agora-API

Technical documentation is located in OS2agora-docs

A complete setup for running the entire solution on your local machine is provided in OS2agora-Infrastructure

Technologies

• React
• React Redux
• Redux toolkit
• Redux-Saga
• Fluent UI

Required Tools

• npm
• Git
• NodeJS
• Docker
• WSL2 (Required for Windows)

Getting Started

The solution is seperated into multiple projects, each having a README.md describing how each project is used.

Running the solution locally

1. Install required tools

2. Download solution from GitHub

3. In the /app folder, run one of the following commands to install the required dependencies

   npm install

4. Start the application using the following command

   npm start

   • If you wish to run with a specific theme add --theme=<theme> at the end of the command.

5. Using a browser, navigate to http://localhost:4000 and validate that the site is up and running

Note: Though you may run the Internal Frontend without starting any external dependencies - you need to have to have a running backend to perform any actions. This can be done by following the relevant guide in OS2agora-Infrastructure.

Running the solution locally in Docker

To run the entire OS2Agora solution in Docker, follow the instructions provided in the OS2agora-Infrastructure repository.

Building the agora-fe_internal Docker Image

To run the entire OS2Agora solution, you need to build the agora-fe_internal Docker Image from this repository. To build the image, follow these steps:

1. From the project root, navigate to /docker

2. In the /docker folder, run the following command to build a docker image of the solution

   $ docker-compose -f docker-compose.development.yml build

The Dockerfile is located in the /docker/image/app

Configuration

The application requires a minimum of configuration before it runs. Configuration is done using environment variables. Due to the nature of how webpack handles process.env, some functionality exists to push some environment variables to the browser. The general rule is that variables named with a prefix REACT_APP_EXT are delivered to the browser in window.__ENV. This functionality relies on the npm package @beam-australia/react-env.

The following environment variables can be set:

• With prefix REACT_APP_

  • FAVICON
  • HEARINGS_PER_PAGE
  • COMMENTS_PER_PAGE

• With prefix REACT_APP_EXT_

  • FALLBACKIMAGE
  • MAIN_LOGO
  • HEADER_LOGO
  • BASE_API_URL
  • TARGET_ENV
  • X_API_HEADER
  • DESCRIPTION
  • TITLE
  • FAV_ICON
  • PUBLIC_BASE_URL
  • THEME
  • PAGINATE_HEARINGS
  • PAGINATE_COMMENTS
  • SHOW_RESPONDER_NAME
  • SHOW_DECLINER
  • SHOW_EMPLOYEE_INFORMATION

Theme

The application can run with several themes. Themes consist of configurations, images, texts, fonts. etc. All themes are located in the themes folder. Current themes:

• os2 (default)
• novataris

Adding a new theme

To add new theme, just copy the os2 theme folder and replace images and update relevant texts and environment variables. After building a new docker image, you may use the new theme by setting the environment variable THEME to the folder name of your theme.

Configuring docker images

Provide the variable REACT_APP_EXT_BASE_API_URL to the container once it starts. This has to point to the base api address, for instance http://localhost:5000/api.

Configuring for local development

The @beam-australia/react-env is based on converting .env files, so it looks for these and picks up any environment variables it sees. To provide for the application during development, create a .env.local file in the app folder with the following content. When starting the solution, a prestart script will add theme environment variables to the .env.local, or create it if you did not.

REACT_APP_EXT_BASE_API_URL=https://localhost:5001/api
REACT_APP_EXT_TARGET_ENV=development
REACT_APP_EXT_X_API_HEADER=9d7e6cd1-904f-4124-83b4-5e6965cf2eb7

Note that this assumes the api is running on https://localhost:5001 which is only the case if it runs from Visual Studio. Further, only the base api url is strictly necessary. The remaining variables are for file download functionality if not going through the proxy provided by docker.