[COMPASS-5673] Update Query Bar to Leafy Green, implement new designs Created: 04/Apr/22  Updated: 30/Aug/22  Resolved: 14/Jul/22

Status: Closed
Project: Compass
Component/s: None
Affects Version/s: None
Fix Version/s: 1.32.4

Type: Task Priority: Major - P3
Reporter: Rhys Howell Assignee: Rhys Howell
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Depends
depends on COMPASS-5589 Create a toolbar component in compass... Closed
depends on COMPASS-5670 Add `COMPASS_SHOW_NEW_TOOLBARS` featu... Closed
depends on COMPASS-5823 Update `compass-query-bar` package co... Closed
is depended on by COMPASS-5678 Update query history to open as a pop... Closed
Epic Link: COMPASS-5484
Story Points: 5
Documentation Changes: Not Needed
Sprint: Iteration Barnacle, Iteration Cuttlefish, Iteration Dolphin, Iteration Eel, Iteration Fish

 Description   

Let's update the query bar toolbar component to use Leafy Green components and implement the new designs (mocks linked below). Ensure the current toolbar functions as normal and the new toolbar is hidden behind the `COMPASS_SHOW_NEW_TOOLBARS` feature flag.
Let's not change how the query history is shown for now, we can update the button that opens it, however the repositioning will happen in https://jira.mongodb.org/browse/COMPASS-5678

Query bar package: https://github.com/mongodb-js/compass/tree/main/packages/compass-query-bar

Mocks: https://www.figma.com/file/vbjoD4dcisPYRYJ5RRu72k/Compass-LG?node-id=781%3A30876

Let's follows the conventions from: https://docs.google.com/document/d/1ZLz_DJYpwTiS_DiPcQMKoLoz2iNxSsMKRTuXXxHb6ak/edit# when making changes.



 Comments   
Comment by Githook User [ 30/Aug/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: compass-settings
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 18/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: 1.32-releases
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 15/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: 5809-dev
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: COMPASS-5672-update-crud-toolbar-to-lg
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: COMPASS-5678-query-history-as-popover
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: compass-sidebar-merge
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: update-schema-validation-warnings-to-leafygreen
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: move-react-aria-util-to-compass-components-exports
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 14/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: feat(compass-query-bar): update query options and layout COMPASS-5673 (#3151)
Branch: main
https://github.com/mongodb-js/compass/commit/69f09016b74fd553357aa4cd86d83d5a539d7c9a

Comment by Githook User [ 06/Jul/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-query-bar
Branch: COMPASS-5673-query-bar
https://github.com/mongodb-js/compass/commit/10ce4a4da6e2f26172e0aa1c5fd8715d92f9e161

Comment by Githook User [ 17/Jun/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-query-bar
Branch: COMPASS-5673-query-bar
https://github.com/mongodb-js/compass/commit/67407250b5c0b9bf2b373c9d8856ce4af16f678f

Comment by Githook User [ 02/Jun/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-update-ace-theme-for-new-query-bar
Branch: COMPASS-5673-update-ace-theme-for-new-query-bar
https://github.com/mongodb-js/compass/commit/8d5979611a43595b610e4a52eb9a8db6da54ceea

Comment by Githook User [ 02/Jun/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-query-bar
Branch: COMPASS-5673-query-bar
https://github.com/mongodb-js/compass/commit/180ac380770979ae81b8b91665fce5479dbfa5c8

Comment by Githook User [ 01/Jun/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-update-ace-theme-for-new-query-bar
Branch: COMPASS-5673-update-ace-theme-for-new-query-bar
https://github.com/mongodb-js/compass/commit/73570a1e55e2a53992915242f15f1e1ccb60de27

Comment by Githook User [ 19/May/22 ]

Author:

{'name': 'Anemy', 'email': 'rhysh@live.com', 'username': 'Anemy'}

Message: Merge branch 'main' into COMPASS-5673-update-query-bar-buttons-to-leafygreen
Branch: COMPASS-5670-add-toolbars-env-flag
https://github.com/mongodb-js/compass/commit/0c1ab30a05771add1bc0397648cfe20958e365a3

Generated at Wed Feb 07 22:40:23 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.