Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update navigation pattern within Advanced Settings #4329

Open
KrooshalUX opened this issue Jun 20, 2023 · 9 comments
Open

Update navigation pattern within Advanced Settings #4329

KrooshalUX opened this issue Jun 20, 2023 · 9 comments
Labels
OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks

Comments

@KrooshalUX
Copy link

KrooshalUX commented Jun 20, 2023

Within the Advanced Settings feature, there appears to be a search filter that a user can apply in order to limit the display of the number of settings on the page at any given time. However, the use of the search bar category filter is intended to be for OuiDataGrid or OuiBasicTable, not a described form / content page. This pattern also has the potential to interfere with the search bars incremental search and ultimately cause errors if modified.

Screen Shot 2023-06-19 at 4 53 28 PM
Screen Shot 2023-06-19 at 4 53 32 PM
Screen Shot 2023-06-19 at 4 53 18 PM

To align to more of an expected navigation pattern as well as clearing runway for further improvements to Advanced Settings, what would be ideal is to utilize children within OuiSideNav to surface up these sub categories within Advanced Settings, and providing jump links to those page sections.

The change would appear as:
image

When the user loads the Advanced Settings page, the Advanced Setting category would display its children, with General being the default active section. When a user clicks any of the children, the content within the page would scroll, anchoring the user to the content within the sepcific OuiPanel. See "Nested item options" within OUI Documentation.

This change would ideally result in exposing individual paths (ex: /app/management/opensearch-dashboards/settings/visualization) for each of the panels for deep linking opportunities within documentation, call outs, errors and loading states.

In addition to existing incremental search functionality (hiding irrelevant content within category panels), display match count within OuiSideNav for each section.
image
image

@KrooshalUX
Copy link
Author

cc @kgcreative & @kamingleung - As a heads up - this is the precursor to introducing UI options to Advanced Settings as a new category for managing light mode, dark mode and other UI settings I am going to pull out from General.

@ashwin-pc
Copy link
Member

Can we also add how many settings we have available like this?

Screenshot 2023-06-19 at 5 57 21 PM

The number of setting available reduces in count based on the search field

@KrooshalUX
Copy link
Author

KrooshalUX commented Jun 20, 2023

@ashwin-pc This is a proposal that I would take into serious consideration. I think UX needs to dive a bit deeper into some of the count patterns given that in some cases, counts cost $ or cause pages to hang.

Re: "The number of setting available reduces in count based on the search field" - do you mean an incremental search would dynamically update the count? How would you feel if that is the only time counts would appear - is on incremental search, at least at the launch of this change while we work towards an opinion on counts from the design system overall?

@ananzh ananzh removed the untriaged label Jun 20, 2023
@ananzh ananzh added the OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks label Jun 20, 2023
@joshuarrrr
Copy link
Member

This design guidance should take precedence over other mitigations proposed in #3963

@KrooshalUX
Copy link
Author

@joshuarrrr would we include removing the HOC custom search bar that mitigated the issue from EUI with incremental search in this work as well? It does appear that issue was fixed by the time we forked into OUI, rendering the HOC potentially irrelevant ?

@ashwin-pc
Copy link
Member

@KrooshalUX Thats a neat idea too, I personally dont need the counts until im widdling down my settings. Thats when i need it to tell me if im searching for the right thing

@ashwin-pc
Copy link
Member

Another tangential suggestion i have here is to make that settings tree collapsible and pinned to the side so that when the content scrolls, we dont lose the navigation options.

@KrooshalUX
Copy link
Author

Another tangential suggestion i have here is to make that settings tree collapsible and pinned to the side so that when the content scrolls, we dont lose the navigation options.

@ashwin-pc that is a change we intend to make to OUI page template - and migrate all of these experiences to that page template.

I will update the mockup to include counts on search - and then I think this can be put into queue. I will create the OUI page template stub also.

@KrooshalUX
Copy link
Author

@ashwin-pc - the issue has been updated with incremental search counts in OuiSideNav

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
OUI compliance Issues and PRs to maximize OUI usage and remove style and component hacks
Projects
Status: Todo
Development

No branches or pull requests

4 participants