Skip to content

feat(web): Migration to PatternFly v6, round 1#1900

Merged
dgdavid merged 36 commits intostorage-config-uifrom
pfv6-round-1
Jan 16, 2025
Merged

feat(web): Migration to PatternFly v6, round 1#1900
dgdavid merged 36 commits intostorage-config-uifrom
pfv6-round-1

Conversation

@dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Jan 15, 2025

Problem

On October 31th, 2024 PatternFly released it's 6th version, which comes with interesting changes. It's look&feel has changed a lot and it has started to make use of tokens, which can be an opportunity for sanitizing the Agama CSS overrides and to start a good foundation for allowing themes in the Agama web interface. Especially, having in mind that there is a SUSE branding refinement too.

Solution

Start migrating to PatternFly 6.

This first round of changes covers several code adaptations as well as some Agama refinements like the deletion of dead code.

Testing

  • Added a new unit test
  • Tested manually

Notes

This PR is not against a feature branch directly on top of master branch because we have decided to deliver this together the new storage interface.

Screenshots

This first round does not take too much care about the final result, which makes useless taking screenshots.

dgdavid added 30 commits January 14, 2025 11:22
@dgdavid
chore(web): update PatternFly to latest v5 version
3309391 
As a first step before migrating to PatternFly v6
@dgdavid
chore(web): update PatternFly to v6
c57edbf
@dgdavid
fix(web): migrate EmptyState to PFv6
725e23d
@dgdavid
fix(web): replace PF/Text with PF/Content
8f14e2e 
As part of the migration to PF v6. It also use PF/Content for replacing
a deprecated PF/Chip.
@dgdavid
fix(web): replace values for align props
d9d4cdd 
Use Start and End suffix instead of Left and Right.
@dgdavid
fix(web): drop isRounded PF/Card prop
958bc92 
No longer used in PF v6.
@dgdavid
fix(web): update some variant and color props
8e11e2b 
For using right values for PF v6.
@dgdavid
fix(web): drop hasIcon prop
55f4efb 
No longer needed in PF v6.
@dgdavid
fix(web): stop using spacer prop
56d11b7 
No longer available in PF v6.
@dgdavid
fix(web): rename labelIcon to labelHelp
9f849dd 
As part of the PF v6 migration.
@dgdavid
fix(web): adapt Popup for using the new PF/Modal
a24fb2e
@dgdavid
fix(web): migrate Layout to PF v6
d932bde
@dgdavid
fix(web): adapt layout/Header
76a9d74 
For using PF/Masthead as recommended in PF v6.
@dgdavid
fix(web): migrate core/PasswordInput to PF v6
1935ff9
@dgdavid
fix(web): force WifiSelectorPage to fill all space
d494cc9
@dgdavid
fix(web): put Button icon as prop instead of child
9592a2a 
As recommended by PF v6.
@dgdavid
fix(web): update text color utilities to PF v6
9eaaa81
@dgdavid
fix(web): adapt typing of EmptyState wrapper
738d19d
@dgdavid
fix(web): adapt core/Popup typing
b0485b6 
For accepting the description prop sometimes needed for the header.
@dgdavid
fix(web): upate aria props for core/Popup
84d6c71
@dgdavid
fix(web): use proper roles in EncryptionDialog test
4fc06b1
@dgdavid
fix(web): update tests looking for actions in rows
e828476 
To properly look for the menu actions at the document body instead of
the row where the toggler lives. This change is needed because in PFv6
"The default value of appendTo on Dropdown, Select, and Popper has been
updated to `document.body`"

Maybe in the future the appendTo prop is added to the actions menu
instead.
@dgdavid
fix(web): fix WifiConnectionForm test
19c70ee 
Which was wrongly using getByText instead of getByRole for working with
buttons.
@dgdavid
fix(web): fix core/Page tests
44a4c90
@dgdavid
fix(web): use v6 intead of v5 in test selectors
6b70a42
@dgdavid
fix(web): use expected role in the test
4da23c0 
Switch instead checkbox
@dgdavid
fix(web): skip a useless test
5659c22 
Most probably it will be drop in the short term.
@dgdavid
fix(web): temporary workaround for Layout header
863f2b4 
Renders an emtpy Masthead instead of nothing when there is not header at
all. This is needed in order to have the document structure expected by
PatternFly CSS to make things works as expected (i.e., allowing the
content fill the space reserved for the sidebar).
@dgdavid
fix(web): do not use body wrapper for core/Page.Content
49b264d 
See https://www.patternfly.org/components/page/#pagesection
@dgdavid
fix(web): centers login form at login page
ca9e4f5
@dgdavid dgdavid mentioned this pull request Jan 15, 2025
Closed
@dgdavid dgdavid requested a review from joseivanlopez January 15, 2025 16:13
@dgdavid dgdavid changed the base branch from storage-config-ui-pfv6 to storage-config-ui January 15, 2025 16:26
@dgdavid
fix(web): adapt some text utilities after merge
cd8afc3 
Same than done at 9eaaa81, but for
files not previously adapted.
@dgdavid dgdavid requested a review from imobachgs January 15, 2025 16:32
@dgdavid dgdavid merged commit 8abc6cd into storage-config-ui Jan 16, 2025
0 of 2 checks passed
@dgdavid dgdavid deleted the pfv6-round-1 branch January 16, 2025 11:46
@dgdavid dgdavid mentioned this pull request Jan 19, 2025
Merged
dgdavid added a commit that referenced this pull request Jan 20, 2025
@dgdavid
feat(web): Migration to PatternFly v6, round 2 (#1921)
fb4e04c 
A continuation of #1900 for
basically introducing some bits of brand.suse.com just for an initial
test and feedback from developers putting their hands on the
storage-config-ui branch. For the full list of changes, please see
commit by commit.

Please, merge it ASAP in the feature branch to minimize merge conflicts.
@dgdavid dgdavid mentioned this pull request Jan 28, 2025
Merged
dgdavid added a commit that referenced this pull request Jan 29, 2025
@dgdavid
feat(web): Migration to PatternFly v6, round 3 (#1954)
2bc80bc 
A continuation of #1900 and
#1921. To know more about
introduced changes, please see commit by commit, but it basically still
polishing visual aspects after the migration to PF6

The idea of this PR is to minimize the risk of big merge conflicts by
introducing adjustments done until now in the feature branch ASAP. But
still not being the last migration round.
@dgdavid dgdavid mentioned this pull request Jan 31, 2025
Merged
dgdavid added a commit that referenced this pull request Feb 3, 2025
@dgdavid
feat(web): Migration to PatternFly v6, round 4 (#1961)
3c28326 
A continuation of #1900 and
#1921, and
#1954
dgdavid added a commit to joseivanlopez/agama that referenced this pull request Feb 5, 2025
@dgdavid
fix(web): restore visual behavior of product selection
624f53b 
Lost while deleting all previous CSS during the migration to PF6. I.e.,
related to

  - agama-project#1900
  - agama-project#1921
  - agama-project#1954
  - agama-project#1961
dgdavid added a commit to joseivanlopez/agama that referenced this pull request Feb 6, 2025
@dgdavid
fix(web): bring back CSS fix for form labels
71112ac 
Lost while deleting all previous CSS during the migration to PF6. I.e.,
related to

  - agama-project#1900
  - agama-project#1921
  - agama-project#1954
  - agama-project#1961
@imobachgs imobachgs mentioned this pull request Feb 26, 2025
Merged
imobachgs added a commit that referenced this pull request Feb 26, 2025
@imobachgs
Update to release 12 (#2084)
52d9ff6 
Prepare for releasing Agama 12:

* #1858
* #1887
* #1890
* #1892
* #1893
* #1894
* #1896
* #1898
* #1899
* #1900
* #1901
* #1906
* #1908
* #1909
* #1910
* #1911
* #1912
* #1914
* #1915
* #1917
* #1919
* #1920
* #1921
* #1922
* #1923
* #1924
* #1926
* #1927
* #1928
* #1929
* #1930
* #1931
* #1932
* #1933
* #1934
* #1935
* #1936
* #1937
* #1938
* #1939
* #1942
* #1943
* #1945
* #1948
* #1949
* #1952
* #1953
* #1954
* #1955
* #1957
* #1958
* #1959
* #1961
* #1963
* #1964
* #1967
* #1969
* #1970
* #1971
* #1972
* #1973
* #1974
* #1975
* #1976
* #1977
* #1979
* #1980
* #1981
* #1982
* #1984
* #1986
* #1987
* #1988
* #1990
* #1991
* #1992
* #1993
* #1995
* #1996
* #1997
* #1999
* #2000
* #2001
* #2002
* #2003
* #2004
* #2005
* #2006
* #2007
* #2008
* #2009
* #2010
* #2011
* #2012
* #2013
* #2014
* #2015
* #2016
* #2017
* #2019
* #2021
* #2022
* #2025
* #2027
* #2029
* #2030
* #2031
* #2033
* #2034
* #2035
* #2036
* #2037
* #2038
* #2039
* #2040
* #2045
* #2046
* #2050
* #2053
* #2054
* #2055
* #2056
* #2058
* #2060
* #2061
* #2062
* #2063
* #2064
* #2066
* #2067
* #2068
* #2069
* #2070
* #2071
* #2072
* #2073
* #2075
* #2076
* #2080
* #2082
* #2083
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@imobachgs imobachgs imobachgs approved these changes

@joseivanlopez joseivanlopez Awaiting requested review from joseivanlopez

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dgdavid @imobachgs

Comments