Announcement: FreeIPA/IdM Web UI moving to PatternFly 4

[bdellasc]

Why are we doing this?

We are currently working on a new web user interface (UI) using PatternFly 4. This effort came about for a number of reasons:

• The current version of the web UI is built on PatternFly 2, which is no longer supported. PatternFly 2 makes evolving the product with new functionality and interaction much more difficult to accomplish.
• The current webui is built in Dojo, a frontend framework that, although powerful, is not as popular in use compared to other more modern and secure frameworks. The new webui will use React and other specific framework-related libraries. This, alongside with PatternFly 4, can ensure a better experience for the user and might encourage more collaboration.
• Adopting PatternFly 4 will:
  • move us in the direction of improved accessibility and responsive UI behavior.
  • give developers and designers access to a very active/supportive community and more modern toolkit resources.
  • provide new opportunities to contribute feedback, code and components back to the PatternFly community
  • Better User Experience (UX)/UI alignment with other upstream projects that Red Hat supports, so our users can have more consistent experiences between applications

Our guiding principles for the move to PatternFly 4

• Minimize disruption for our existing users:
  • Maintain the current application structure/Information Architecture (IA), so we can focus more on rebuilding a solid/stable UI in PatternFly 4.
  • The accompanying documentation should not need many major changes if the structure of the UI stays consistent during this transition.
  • Once the new web UI is completed, we will provide more information about the transition period from the PatternFly 2 to PatternFly 4 versions of the UI. Our primary goal is to make sure this transition will be as seamless as possible. More details of this transition will be provided in the future.
• Targeted evolution:
  • Focused opportunities to evolve the user experience without any major disruption of the current application structure during this move to PatternFly 4, including:
  • Improved scrolling, accessibility and responsive GUI behavior
  • Include more contextual documentation links/resources throughout the product (this may differ between FreeIPA and Red Hat IdM versions of the product).
• Identifying and implementing opportunities to evolve contextual help in the GUI
• More upstream engagement:
  • Get more GUI/UX work in the upstream alongside the development work.
  • We will iterate on engagement as we learn about the community's needs.

How are we doing this?

• From a design/doc perspective:

  • Sharing more design work in the upstream as we work, gathering feedback and insights in addition to other user groups.
  • Working closely with Product Management (PM), front-end development and documentation teams as we build this new version of the FreeIPA/IdM Web UI.

• From a development perspective:

  • Current web UI is part of the FreeIPA codebase, for the new version we are starting a new project, named freeipa-webui.
  • That repository will hold a React application that uses Patterfly 4 components, RPM spec file to build Fedora and RHEL packages and a new set of integration tests based on the Cypress framework.
  • Once this new package is installed on a FreeIPA server, a new route will be available serving the new web UI.
  • The new project will continue to have the option to be extended through plugins; however, it will not support the same .js files developed targeting the current version.

• From a testing perspective:

  • Leverage established testing technology and protocols used by other products. This will also give us access to an existing community of developers for support in utilizing these technologies:
    • Standardized test case syntax (Gherkin) will simplify both external and internal contributions and will enable automated testing of requirements.
    • Cypress testing framework integration speeds up the implementation of new tests as well as debugging the failures thanks to the replay mode.

When will I see more?

Targeting early 2023, we are planning to have a live preview of the PatternFly 4 web UI available to view. This will be a very limited/focused section of the application.

Before/After mockups (actual development is a WIP)

In the meantime, we have some before/after comparison mockups of a few FreeIPA/IdM interfaces. The guiding principles from the section above helped to guide us. Note: these mockups are for general direction we're taking the Web UI. Some finer details and interactions will be worked out as we develop the application.

Navigation - PatternFly 2 (Current)

Horizontal navigation that does not align with other upstream products. Tab groupings (“ is a member of”, etc) don’t scale up well when there are multiple tab groupings

Navigation - PatternFly 4

Vertical navigation and detailed views have categories of items grouped under tabs (e.g. “Is a member of”). While this adds an additional click, this approach scales better than the current layout where the view can become quite crowded when there are multiple groupings of item tabs.

Delete Dialog - PatternFly 2 (Current)

Not a lot of detail on the items being acted upon.

Delete Dialog mockup - PatternFly 4

The format of this list within the dialog provides more detail on the items being acted upon.

Scrolling - PatternFly 2 (Current)

Everything on the page scrolls, including the masthead and navigation.

Scrolling - PatternFly 4

Only the page content area scrolls, leaving other page elements always visible.

Settings page - PatternFly 2 (Current)

Everything on the page scrolls, including: masthead, navigation, form actions. Form awkwardly adjusts for narrower screens.

Settings page - PatternFly 4

Masthead, navigation jump links along the right, and form buttons along the bottom are static as the form scrolls. Jump links would allow a user to quickly scroll to a specific section of the form with a single click. The links are marked with required indicators to show which sections have any required fields. We’ll also have improved responsiveness of the form layout

[itlinuxfr]

Hello !

Is there any update for the new UI for the future release ?

Regards. Ben.

[abbra]

@itlinuxfr we are finishing up basic functionality and are planning to provide test builds, hopefully, within Fedora 42 time frame. Initially it will be provided as a separate package to install in parallel with existing IPA Web UI until all functionaly is implemented.