feat(settings): categorize user settings #793

tthvo · 2023-01-06T18:42:14Z

Welcome to Cryostat! 👋

Before contributing, make sure you have:

Read the contributing guidelines
Linked a relevant issue which this PR resolves
Linked any other relevant issues, PR's, or documentation, if any
Resolved all conflicts, if any
Rebased your branch PR on top of the latest upstream main branch
Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
Signed the last commit: git commit --amend --signoff

Fixes: #781
Depends on #789

Description of the change:

Categorize user settings (similar to OCP console). Settings can be ordered based using an order index.
Enable flip and add height constraints for setting menus.
Fix nested forms, anchors warnings.
Tests for setting page.

Motivation for the change:

See #781

How to manually test:

Run CRYOSTAT_IMAGE=quay.io... sh smoketest.sh...
Go to setting page to see new changes.

Screenshots

tthvo · 2023-01-06T18:44:08Z

What do you think? I will start on writing tests if this could be accepted :D Just unfortunately, allowing flip on menu causes the snapshots to fail so we need to remove them.

github-actions · 2023-01-06T18:48:00Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-3990b3fe3810bf1584181e9f4b27f7073d8798e6 sh smoketest.sh

github-actions · 2023-01-06T18:57:29Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-0703229ca2339794237383f403de37c8b3e763e6 sh smoketest.sh

maxcao13 · 2023-01-06T19:03:46Z

I like it, it's very nice!

I don't know if this is just me, but I seem to like the Dashboard coming first before Notification and Messages b/c of alphabetical order but because General and Advanced are "special" cases, I would leave those.

Also, is it just me or did the DEVELOPMENT dropdown in the Feature Level disappear?

tthvo · 2023-01-06T19:11:23Z

I don't know if this is just me, but I seem to like the Dashboard coming first before Notification and Messages b/c of alphabetical order but because General and Advanced are "special" cases, I would leave those.

Thanks I was thinking of putting setting groups that might be more frequently visited to the top. Language & Region is also defined but hidden. I will show it when #789 is merged.

tthvo · 2023-01-06T19:14:12Z

Also, is it just me or did the DEVELOPMENT dropdown in the Feature Level disappear?

Still seeing it tho...

andrewazores · 2023-01-06T20:38:55Z

Development setting seems to be missing for me too.

andrewazores · 2023-01-06T20:40:18Z

I tried in different browsers and in private/incognito modes as well to avoid any effects where it could be from some change to the localstorage format, but in all cases it was the same.

andrewazores · 2023-01-06T20:40:32Z

Anyway other than that I think this looks great.

github-actions · 2023-01-07T00:55:06Z

This PR/issue depends on:

~~feat(i18n): add text localization scaffolding with i18n-react #789~~
By Dependent Issues (🤖). Happy coding!

tthvo · 2023-01-07T03:13:55Z

Ahh I remember it now. DEVELOPMENT is hidden is production build if we use the generated image from github action. This is intended right?

cryostat-web/src/app/Settings/FeatureLevels.tsx

Line 83 in 181e70e

if (!process.env.CRYOSTAT_AUTHORITY) {

andrewazores · 2023-01-07T17:08:37Z

Ha. Right, good catch. Didn't even think of that when I pulled the GH pkgs PR preview image.

Looks great. Still need to add more tests?

tthvo · 2023-01-09T05:15:51Z

Looks great. Still need to add more tests?

Oh yess! I gonna take this chance to add tests for setting panels. Also need to rebase and move language picker to setting. I will put it as draft for now.

github-actions · 2023-01-09T06:46:12Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-854f7e7e18a2466246ac832935d01a296fbcb07f sh smoketest.sh

github-actions · 2023-01-09T11:58:59Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-17f50cee4a6f2b0d1a294b2a5da74d65d2c6520d sh smoketest.sh

github-actions · 2023-01-09T22:42:57Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-fb3b893caa2cc71d473e40b8188ba00a25b90f43 sh smoketest.sh

github-actions · 2023-01-10T13:02:13Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-e0db724c0fcb91e0b7c1399f25dcaa205ca2ea65 sh smoketest.sh

tthvo · 2023-01-10T13:04:55Z

Ready for review again....Changes since last comments:

Move language select to setting page + comment out zh field so that its not shown as an option.
Wrap setting components in FeatureFlag to hide and show base on current feature level.
- Except for PRODUCTION-leveled settings, others will have a compact label next to its title (try Language setting).
- Only show tabs with at least 1 setting that satisfy current feature level.
Expand setting page to fill available vertical space (avoid jumps and make it similar to OCP console).
Add unit tests for setting components.

Got a bit issue with circular deps in Settings.test.tsx tests, so I disable eslint import for that file for now.

Screenshots:

Signed-off-by: Thuan Vo <thvo@redhat.com>

github-actions · 2023-01-10T23:58:37Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-044eb08ae43f69b0a742dda0771363f1841351f0 sh smoketest.sh

github-actions · 2023-01-11T00:04:42Z

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-793-e7186ef0c0283debdd5a6ad2cb4ab0dba63a5ea8 sh smoketest.sh

tthvo added the feat New feature or request label Jan 6, 2023

tthvo requested review from andrewazores and maxcao13 January 6, 2023 18:42

mergify bot added the safe-to-test label Jan 6, 2023

github-actions bot added the dependent label Jan 6, 2023

github-actions bot removed the dependent label Jan 7, 2023

tthvo marked this pull request as draft January 9, 2023 06:18

tthvo force-pushed the categorize-settings branch from 0703229 to 854f7e7 Compare January 9, 2023 06:41

tthvo force-pushed the categorize-settings branch from 854f7e7 to 17f50ce Compare January 9, 2023 11:52

tthvo force-pushed the categorize-settings branch from fb3b893 to e0db724 Compare January 10, 2023 12:56

tthvo marked this pull request as ready for review January 10, 2023 13:04

tthvo force-pushed the categorize-settings branch from e0db724 to 2ec3fcc Compare January 10, 2023 13:16

Thuan Vo added 20 commits January 10, 2023 18:52

chore(settings): move language select to setting page

5965c32

test(settings): add tests to setting view

3e036a5

test(settings): add tests for auto-refresh setting

df1a212

chore(settings): apply eslint fixes

cee9fb1

test(recordings): update snapshots

fcd744f

test(settings): add tests for deletion dialog control

13b40fd

test(settings): add tests for feature level panel

d46def9

test(settings): add tests for language select

ae058fc

test(settings): add tests for websocket debounce input

a650631

test(settings): add tests for notification control

d0e60a0

test(settings): add tests for automatic analysis config

a613eb3

chore(eslint): apply eslint fixes

7471d59

Signed-off-by: Thuan Vo <thvo@redhat.com>

chore(settings): remove unused classNames

4d526db

feat(settings): add link to language setting on user icon

b65b607

feat(login): add language selector for login page

440cdcb

test(settings): wrap setting comp in router

5345919

chore(eslint): apply eslint fixes

63bf197

!fixup(layout): should select language tab if on /settings route

f4e81fe

fixup(settings): update group name

0c14f63

fix(logout): redirect to / if on /settings

044eb08

tthvo dismissed maxcao13’s stale review via 044eb08 January 10, 2023 23:53

tthvo force-pushed the categorize-settings branch from 068c0ff to 044eb08 Compare January 10, 2023 23:53

chore(prettier): apply prettier

e7186ef

andrewazores approved these changes Jan 11, 2023

View reviewed changes

andrewazores merged commit 8d1a321 into cryostatio:main Jan 11, 2023

tthvo deleted the categorize-settings branch January 11, 2023 20:08

tthvo mentioned this pull request Jan 23, 2023

chore(settings): localize setting page #832

Merged

14 tasks

tthvo mentioned this pull request May 1, 2023

fix(settings): set unmountOnExit behaviour for setting groups #1004

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(settings): categorize user settings #793

feat(settings): categorize user settings #793

tthvo commented Jan 6, 2023 •

edited

Loading

tthvo commented Jan 6, 2023

github-actions bot commented Jan 6, 2023

github-actions bot commented Jan 6, 2023

maxcao13 commented Jan 6, 2023 •

edited

Loading

tthvo commented Jan 6, 2023

tthvo commented Jan 6, 2023

andrewazores commented Jan 6, 2023

andrewazores commented Jan 6, 2023

andrewazores commented Jan 6, 2023

github-actions bot commented Jan 7, 2023

tthvo commented Jan 7, 2023 •

edited

Loading

andrewazores commented Jan 7, 2023

tthvo commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 10, 2023

tthvo commented Jan 10, 2023 •

edited

Loading

github-actions bot commented Jan 10, 2023

github-actions bot commented Jan 11, 2023

feat(settings): categorize user settings #793

feat(settings): categorize user settings #793

Conversation

tthvo commented Jan 6, 2023 • edited Loading

Welcome to Cryostat! 👋

Before contributing, make sure you have:

Description of the change:

Motivation for the change:

How to manually test:

Screenshots

tthvo commented Jan 6, 2023

github-actions bot commented Jan 6, 2023

github-actions bot commented Jan 6, 2023

maxcao13 commented Jan 6, 2023 • edited Loading

tthvo commented Jan 6, 2023

tthvo commented Jan 6, 2023

andrewazores commented Jan 6, 2023

andrewazores commented Jan 6, 2023

andrewazores commented Jan 6, 2023

github-actions bot commented Jan 7, 2023

tthvo commented Jan 7, 2023 • edited Loading

andrewazores commented Jan 7, 2023

tthvo commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 9, 2023

github-actions bot commented Jan 10, 2023

tthvo commented Jan 10, 2023 • edited Loading

github-actions bot commented Jan 10, 2023

github-actions bot commented Jan 11, 2023

tthvo commented Jan 6, 2023 •

edited

Loading

maxcao13 commented Jan 6, 2023 •

edited

Loading

tthvo commented Jan 7, 2023 •

edited

Loading

tthvo commented Jan 10, 2023 •

edited

Loading