microsoft / microsoft/AzureTRE

Upgrade UI to use Fluent UI React v9

Open
#2,843 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature ui
Dominant language
Python
Stars
235
Forks
192
Avg merge
1d 23h
Merged PRs (30d)
13

Description

Upgrade UI to use Fluent UI React v9 (now a stable release): https://react.fluentui.dev/

This will require removing the use of Stack and StackItem components to using native html flex boxes, so would not be a small undertaking. There are also some other components that have been removed/changed that we would need to migrate (see migration guide in link above).

Advantages this would give us is a more up-to-date look and feel in line with Microsoft's new design language, as well as giving us a generic card component and other components out of the box where we can remove a lot of the custom code we've added. It also has specific components for Teams integration which could prove beneficial later on.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the UI code and the Fluent UI React v9 migration guide linked in the issue. Inventory uses of Stack, StackItem, and other changed components, then migrate them to the v9 equivalents and native flex layouts. Done means the UI uses Fluent UI React v9 consistently and its existing behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.