search

Altinn / altinn-access-management-frontend

Frontend for access management
MIT License
3 stars 1 forks source link

readme

Deploy statuses

Frontend for access management

Settin up your dev-environment 🚀

Prerequisits

Alternative 1 - Local-AT hybrid

Access management has a lot of dependencies, which can get tedious to work with when developing locally. If all you are working with is frontend-specific code (that is, the code found in this repo) then this hybrid solution will simplify your setup, allowing you to run the React application and the BFF (Backend For Frontend) locally, while using the access management backend and other dependencies that are deployed in an AT-environment.

However, it has an additional prerequisit as it will require you to log into your IDE (ex: Visual Studio) with a user that has access to the Keyvault used by test environment AT22.

To get these accesses on your ai-dev user, you need to be part of the following Azure team:

Make sure you have the neccecary accesses before proceeding with this setup alternative.

Step 1: Setting up the host file

In order to integrate the local code with AT22 in the most seamless way, using the login method, test data, and sdomain-specific tokens, we need to tell the computer when to divert from the the actual AT environment and instead use the localhoast port where our local BFF will be running from.

You can do this by adding following to the host file on your computer:

   # Subdomain for accessmanagement
   127.0.0.1 am.ui.at22.altinn.cloud

You can find this file in /private/etc/hosts on mac or in c:\Windows\System32\Drivers\etc\hosts on Windows

Remeber to save the host file before proceeding. You might need to flush the dns and clear all cashe in your browser for this change to be set into effect.

Windows:

   ipconfig /flushdns

OBS: Note that overwriting this path in the host file will make you unable to reach the true path from your computer, meaning you will not be able to use AT22 to test the currently deployed version of the frontend code. You will still be able to access the other AT environments.

Step 2: Run the BFF

Open Altinn.AccessManagement.UI.sln in Visual Studio (or another IDE).

A browser window will open on the BFFs swagger documentation, this means the launch was successfull.

OBS: These settings use https which requires a certificate to be uploaded or generated by your IDE (the latter is the easiest solution). This might make your browser flag the site as a possible risk the first time you attempt to navigate to it, but it will not stop you from accessing it.

Now that the BFF is running, you can move on to the react app.

Step 3: Run the React application

Pull the newest version of this repo and navigate to its root

That's it!

Step 4: Accessing the solution

You can now access the regular altinn features enabled in the environment. Once you navigate into a domain that belongs to this repo (am.ui.at22.altinn.cloud), the local code will run instead of the deployed code of this environment.

Happy coding!

Alternative 2 - Running the full solution (with localtest mocking)

Step 1: Getting started

The frontend is the simplest, so let's start with that. Simply run yarn on root to install dependencies and then yarn start to start the development environment. That's it!

PS: To actually see anything on the local environment port you'll need to follow the guide until step 3.

Step 2: Setup localtest to get test users

To add test data to the app, do the following:

   export PATH="$PATH:/Applications/Docker.app/Contents/Resources/bin/"

If readme in localTest doesn't setup things correctly, try the steps below:

#Subdomain for accessmanagement
127.0.0.1 am.ui.local.altinn.cloud #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 am.ui.local.altinn.cloud #ipv6
#
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    localhost #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 localhost #ipv6
255.255.255.255    broadcasthost
127.0.0.1 kubernetes.docker.internal #ipv4
0000:0000:0000:0000:0000:0000:0000:0001 kubernetes.docker.internal #ipv6
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section

Step 3: Setup BFF (Backend for frontend)

Setup backend:

Step 4: Set up database:

Download PostgreSQL v14. (on Mac, use installer and not homebrew). Run stackbuilder and download all packages when being prompted.

image

Run backend and frontend together

You should now see localtest login page with access management as the only application.

Choose an account and click on the button to proceed to react-app

Build, Deploy and Release

Building and deploying 🚚

To create a distributable bundle, run yarn build. Environment variables set at build time will be baked into the bundle (e.g. VITE_DEFAULT_LOCALE=en yarn build). See the resulting dist/index.html. If the bundled files are to be served from a path other than the server root, you must pass the --base=/path/to/folder/ argument to yarn build.

Pull Request Labels

pr-labeler action is triggered for each pull request. Based on the branch name, this action adds a label to the pull request. The configuration for the labels can be found here.

Release

The application has a release every wednesday. scheduled-release action is triggered every wednesday 00.00. This action drafts a release, tags the latest package with the release version, f.ex this package has a release version v2023.1. The action drafts the release on different categories. The changes are categorized based on the pull request label. F.ex, A PR with a label bugfix is categorized under bug. The detailed release draft configuration can be found here The deploy in charge for the week, deploys the application to a specific environment(TT02/Prod) using the action deploy-to-environment. The drafted release is then reviewed manually and published by the deploy in charge.

Project organisation and code conventions 🧩

yarn commands 🧨

Run yarn to setup code.

Run yarn build to create a build file.

Run yarn test to run cypress tests in browser.

Run yarn coverage to see test coverage stats.

Run yarn lint to run lint checks

Run yarn format to format most of the codebase to set standard in config file

The main entry point is /src/main.jsx. You'll find React components under /src/components/.

The components can be placed 2 ways, either:

Repo structure

If the component's only reusable within a specific feature
features\
  featureName\
    components\
    - ComponentName.test.tsx (unit tests)
    - index.ts (public interface for the component)
    - style.css (if needed)

Or:

If the components are reusable and being used by other classes
components/
  ComponentName/
    - ComponentName.tsx
    - ComponentName.test.tsx (unit tests)
    - style.css (if needed)

Coding conventions 👮‍♀️

Naming convention on branches

Start with these names for your branch depending on what your branch includes.

ClassNames

Use PascalCase for component file names.

Code style

We use eslint, prettier, typescript, and automatically set up git hooks to enforce these on commits. To avoid confusion, it is recommended to set this up in your IDE.

Visual Studio Code

Install the eslint extension from the marketplace. Configure your IDE to run eslint --fix on save (prettier will also reformat your code when doing this).

WebStorm and IntelliJ IDEA

Configure your IDE to run eslint --fix on save (prettier will also reformat your code when doing this). It is also recommended to set up Prettier as the default formatter.

CSS

We use standard camelCase for classnames to enable linking of the stylesheets directly and improving simplicity in the process. We separate each Element and Modifier into separate names and use regular css (eks: .accordion.open) to access the combination.

Common problems in VS code

  1. Sometimes it's needed to restart eslint for it to work properly. E.g. When switching branches, eslint hangs sometimes. To fix this problem in vs code: Do the hot key for workbench.action.quickNaviagtePreviousInFilePicker and run command 'restart eslint server' or restart vs code.
  2. It's a common problem when writing reducers in rtk; invalid typescript-errors, prettier and lint-errors occurs. To fix this you could try to restart vs code or ignore the error.