[
https://issues.apache.org/jira/browse/ATLAS-5334?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Brijesh Bhalala updated ATLAS-5334:
-----------------------------------
Description:
The current top navigation bar is overly cluttered, containing too many
independent elements side-by-side: a {*}Scope dropdown{*}, a {*}Search
input{*}, a {*}Search button{*}, an {*}Advanced button{*}. This reduces
available horizontal space and creates visual noise. This ticket tracks the
redesign to free up topbar real estate and improve usability.
*Current State (Problem):* The topbar currently has the following elements laid
out independently:
* {{[ Select All ▼ ] [ Search Entities... ] [ Search ] [ Advanced ] [ + Create
] [ Downloads ] [ Stats ] [ User ]}}
This layout:
* Takes up excessive horizontal space
* Pushes the search bar to a very small width
* Makes the topbar feel cluttered and overwhelming
*Proposed Changes:*
# *Merge scope dropdown inside the search bar* — Move the "Select All" scope
selector into the {{startAdornment}} of the search input field (like Google's
search type filter), separated by a subtle vertical divider.
# *Move Search & Advanced actions inside the search bar* — Place the *Search*
icon button and *Advanced* text link as {{endAdornment}} elements inside the
search input, removing the separate standalone buttons.
*Expected Result:*
[ Select All ▼ | Search Entities... Advanced 🔍 ] [ Downloads ] [ Stats ] [ User
]
The topbar becomes clean and spacious, the search bar occupies most of the
available width, and the Create action is contextually placed in the sidebar.
*Type:* {{UI Enhancement / UX Improvement}} *Priority:* {{Medium}} *Component:*
{{{}TopBar{}}}, {{{}Sidebar{}}}, {{QuickSearch}}
was:
The current top navigation bar is overly cluttered, containing too many
independent elements side-by-side: a {*}Scope dropdown{*}, a {*}Search
input{*}, a {*}Search button{*}, an {*}Advanced button{*}, and a {*}+ Create
button{*}. This reduces available horizontal space and creates visual noise.
This ticket tracks the redesign to free up topbar real estate and improve
usability.
*Current State (Problem):* The topbar currently has the following elements laid
out independently:
* {{[ Select All ▼ ] [ Search Entities... ] [ Search ] [ Advanced ] [ + Create
] [ Downloads ] [ Stats ] [ User ]}}
This layout:
* Takes up excessive horizontal space
* Pushes the search bar to a very small width
* Makes the topbar feel cluttered and overwhelming
*Proposed Changes:*
# *Merge scope dropdown inside the search bar* — Move the "Select All" scope
selector into the {{startAdornment}} of the search input field (like Google's
search type filter), separated by a subtle vertical divider.
# *Move Search & Advanced actions inside the search bar* — Place the *Search*
icon button and *Advanced* text link as {{endAdornment}} elements inside the
search input, removing the separate standalone buttons.
# *Relocate the "+ Create" button to the Sidebar* — Move the Create action to
the top of the left sidebar (next to the sidebar search bar, as a compact {{+}}
icon button — similar to Notion's sidebar compose button). This completely
removes it from the topbar without losing discoverability.
*Expected Result:*
[ Select All ▼ | Search Entities... Advanced 🔍 ] [ Downloads ] [ Stats ] [ User
]
The topbar becomes clean and spacious, the search bar occupies most of the
available width, and the Create action is contextually placed in the sidebar.
*Type:* {{UI Enhancement / UX Improvement}} *Priority:* {{Medium}} *Component:*
{{{}TopBar{}}}, {{{}Sidebar{}}}, {{QuickSearch}}
> Atla React UI: [UI Enhancement] Reduce TopBar congestion by consolidating
> Search conrols
> ----------------------------------------------------------------------------------------
>
> Key: ATLAS-5334
> URL: https://issues.apache.org/jira/browse/ATLAS-5334
> Project: Atlas
> Issue Type: Improvement
> Components: atlas-core
> Affects Versions: 2.5.0
> Reporter: Brijesh Bhalala
> Assignee: Brijesh Bhalala
> Priority: Major
> Labels: atlas-react
>
> The current top navigation bar is overly cluttered, containing too many
> independent elements side-by-side: a {*}Scope dropdown{*}, a {*}Search
> input{*}, a {*}Search button{*}, an {*}Advanced button{*}. This reduces
> available horizontal space and creates visual noise. This ticket tracks the
> redesign to free up topbar real estate and improve usability.
> *Current State (Problem):* The topbar currently has the following elements
> laid out independently:
> * {{[ Select All ▼ ] [ Search Entities... ] [ Search ] [ Advanced ] [ +
> Create ] [ Downloads ] [ Stats ] [ User ]}}
> This layout:
> * Takes up excessive horizontal space
> * Pushes the search bar to a very small width
> * Makes the topbar feel cluttered and overwhelming
> *Proposed Changes:*
> # *Merge scope dropdown inside the search bar* — Move the "Select All" scope
> selector into the {{startAdornment}} of the search input field (like Google's
> search type filter), separated by a subtle vertical divider.
> # *Move Search & Advanced actions inside the search bar* — Place the
> *Search* icon button and *Advanced* text link as {{endAdornment}} elements
> inside the search input, removing the separate standalone buttons.
> *Expected Result:*
> [ Select All ▼ | Search Entities... Advanced 🔍 ] [ Downloads ] [ Stats ] [
> User ]
> The topbar becomes clean and spacious, the search bar occupies most of the
> available width, and the Create action is contextually placed in the sidebar.
> *Type:* {{UI Enhancement / UX Improvement}} *Priority:* {{Medium}}
> *Component:* {{{}TopBar{}}}, {{{}Sidebar{}}}, {{QuickSearch}}
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
