[COMPASS-5211] SidebarDatabase/SidebarCollections should handle lazy-loaded databases/collections data Created: 20/Oct/21  Updated: 29/Oct/23  Resolved: 30/Nov/21

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

Type: Task Priority: Major - P3
Reporter: Sergey Petushkov Assignee: Sergey Petushkov
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Depends
depends on COMPASS-5210 Refactor mongodb-instance-model to al... Closed
Epic Link: COMPASS-4764
Story Points: 5
Documentation Changes: Not Needed
Sprint: Iteration Orlando, Iteration Phnom Penh, Iteration Q

 Description   

mongodb-instace-model fetch should not wait for databases to resolve when refresing and should not try to resolve collections on it's own. For this to work we want to introduce following changes:

  • Change instance-model fetch/refresh logic to only emit a database fetch, but not wait for it to resolve before emitting instance-refreshed
  • Refactor sidebar db/coll list to handle rendering while data is fetching
  • Refactor collections to be lazy-loaded when selecting a database / expanding list
    • Provide indication that the data is loading

Miro board with changes context



 Comments   
Comment by Githook User [ 03/Dec/21 ]

Author:

{'name': 'Sergey', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: feat(compass-sidebar): Add loading states for collection in sidebar COMPASS-5211 (#2600)

  • fix(collection-model): Do not exctract type as part of the collInfo

It's always there when listing collections

  • misc(compass-components): Move ui colors out of components folder: Add a few helpful deps; Fix testing-lib version collision
  • feat(compass-components): Add hooks for handling focus and hover state in components
  • feat(compass-components): Add hooks that manage treeview navigation behavior following WAI-ARIA spec
  • feat(compass-components): Add helper component to handle loading UI debouncing when dealing wih asyncronously loaded content
  • feat(compass-components): Add new databases navigation tree component for the sidebar
  • feat(compass-sidebar): Replace old navigation tree with the new one and clean-up unused code
  • chore(compass-components): Also provide content-visibility for collection list
  • chore(compass-sidebar): Handle sidebar actions for collections / views
  • Provide new app registry events that instance-store can handle to resolve collections metadata and show collection screens
  • Move collection submenu calls to one place that closest to showing collections on the screen so that we don't need to do it all over the place
  • chore(compass-components, compass-databases-navigation): Move sidebar navigation to its own package
  • chore(e2e): Update sidebar selector
  • chore: Ignore testing-library/dom dependency at the root
  • test(mongodb-compass): Update test for the new menu behavior
  • chore(databases-navigation): Refactor the whole thing to use react-virtualized

Keyboard support is not implemented yet, it also needs full rewrite to work with
virtual lists (and some tests are definitely broken now)

  • chore(databases-navigation): Reimplement most of the keyboard support for virtual list
  • and first letter are still not implemented and the tests need a re-write now
  • chore(databases-navigation): Add rest of the keyboard handlers; Simplify types

Still need to fix tests and remove stuff from compass-components as it is tightly
coupled to the virtual list implementation now

  • chore(databases-navigation): Add back animations for the loading list
  • chore(compass-sidebar): Fetch all collections when user starts to filter
  • chore(databases-navigation): Fix tests
  • chore(databases-navigation): Fix more tests
  • chore(instance-model, database-model, collection-model): Move optional fetching logic and status checks to the models
  • fix(databases-collections): Fix missing initial state
  • chore(compass-components): Remove log statement
  • fix(sidebar): Fix initial state test
  • chore(databases-navigation): Do not use process.env for test values
Comment by Githook User [ 02/Dec/21 ]

Author:

{'name': 'Sergey', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: feat(compass-sidebar): Add loading states for collection in sidebar COMPASS-5211 (#2600)

  • fix(collection-model): Do not exctract type as part of the collInfo

It's always there when listing collections

  • misc(compass-components): Move ui colors out of components folder: Add a few helpful deps; Fix testing-lib version collision
  • feat(compass-components): Add hooks for handling focus and hover state in components
  • feat(compass-components): Add hooks that manage treeview navigation behavior following WAI-ARIA spec
  • feat(compass-components): Add helper component to handle loading UI debouncing when dealing wih asyncronously loaded content
  • feat(compass-components): Add new databases navigation tree component for the sidebar
  • feat(compass-sidebar): Replace old navigation tree with the new one and clean-up unused code
  • chore(compass-components): Also provide content-visibility for collection list
  • chore(compass-sidebar): Handle sidebar actions for collections / views
  • Provide new app registry events that instance-store can handle to resolve collections metadata and show collection screens
  • Move collection submenu calls to one place that closest to showing collections on the screen so that we don't need to do it all over the place
  • chore(compass-components, compass-databases-navigation): Move sidebar navigation to its own package
  • chore(e2e): Update sidebar selector
  • chore: Ignore testing-library/dom dependency at the root
  • test(mongodb-compass): Update test for the new menu behavior
  • chore(databases-navigation): Refactor the whole thing to use react-virtualized

Keyboard support is not implemented yet, it also needs full rewrite to work with
virtual lists (and some tests are definitely broken now)

  • chore(databases-navigation): Reimplement most of the keyboard support for virtual list
  • and first letter are still not implemented and the tests need a re-write now
  • chore(databases-navigation): Add rest of the keyboard handlers; Simplify types

Still need to fix tests and remove stuff from compass-components as it is tightly
coupled to the virtual list implementation now

  • chore(databases-navigation): Add back animations for the loading list
  • chore(compass-sidebar): Fetch all collections when user starts to filter
  • chore(databases-navigation): Fix tests
  • chore(databases-navigation): Fix more tests
  • chore(instance-model, database-model, collection-model): Move optional fetching logic and status checks to the models
  • fix(databases-collections): Fix missing initial state
  • chore(compass-components): Remove log statement
  • fix(sidebar): Fix initial state test
  • chore(databases-navigation): Do not use process.env for test values
Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/7f13e1b148eb54a83a8ee0e2c33249f3d3603d02

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge branch 'compass-5211-async-sidebar' of github.com:mongodb-js/compass into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/24f268ef6ff92d1c5bef282582398737e86c8fcf

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/d8fab7eca5c500f11ee0b28bf97b7cbbd2936a0f

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/d68819beb648913b7c245173645be320576f9490

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/daf94729ad08e28961d978ae24bb7ff9af58c2e4

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/758d5ea29a702fb84222aeab0d4d84406a99610c

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar

Conflicts:
package-lock.json
packages/compass-components/package.json
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/9bfcd9b52e7e33cb768345d3ab256df79539ecf6

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar

Conflicts:
package-lock.json
packages/compass-components/package.json
Branch: compass-5212-databases-collections-async
https://github.com/mongodb-js/compass/commit/437f5041be6e55aedd372844c8c3dccdd5ad7178

Comment by Githook User [ 01/Dec/21 ]

Author:

{'name': 'Sergey', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: feat(compass-sidebar): Add loading states for collection in sidebar COMPASS-5211 (#2600)

  • fix(collection-model): Do not exctract type as part of the collInfo

It's always there when listing collections

  • misc(compass-components): Move ui colors out of components folder: Add a few helpful deps; Fix testing-lib version collision
  • feat(compass-components): Add hooks for handling focus and hover state in components
  • feat(compass-components): Add hooks that manage treeview navigation behavior following WAI-ARIA spec
  • feat(compass-components): Add helper component to handle loading UI debouncing when dealing wih asyncronously loaded content
  • feat(compass-components): Add new databases navigation tree component for the sidebar
  • feat(compass-sidebar): Replace old navigation tree with the new one and clean-up unused code
  • chore(compass-components): Also provide content-visibility for collection list
  • chore(compass-sidebar): Handle sidebar actions for collections / views
  • Provide new app registry events that instance-store can handle to resolve collections metadata and show collection screens
  • Move collection submenu calls to one place that closest to showing collections on the screen so that we don't need to do it all over the place
  • chore(compass-components, compass-databases-navigation): Move sidebar navigation to its own package
  • chore(e2e): Update sidebar selector
  • chore: Ignore testing-library/dom dependency at the root
  • test(mongodb-compass): Update test for the new menu behavior
  • chore(databases-navigation): Refactor the whole thing to use react-virtualized

Keyboard support is not implemented yet, it also needs full rewrite to work with
virtual lists (and some tests are definitely broken now)

  • chore(databases-navigation): Reimplement most of the keyboard support for virtual list
  • and first letter are still not implemented and the tests need a re-write now
  • chore(databases-navigation): Add rest of the keyboard handlers; Simplify types

Still need to fix tests and remove stuff from compass-components as it is tightly
coupled to the virtual list implementation now

  • chore(databases-navigation): Add back animations for the loading list
  • chore(compass-sidebar): Fetch all collections when user starts to filter
  • chore(databases-navigation): Fix tests
  • chore(databases-navigation): Fix more tests
  • chore(instance-model, database-model, collection-model): Move optional fetching logic and status checks to the models
  • fix(databases-collections): Fix missing initial state
  • chore(compass-components): Remove log statement
  • fix(sidebar): Fix initial state test
  • chore(databases-navigation): Do not use process.env for test values
Comment by Githook User [ 30/Nov/21 ]

Author:

{'name': 'Sergey', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: feat(compass-sidebar): Add loading states for collection in sidebar COMPASS-5211 (#2600)

  • fix(collection-model): Do not exctract type as part of the collInfo

It's always there when listing collections

  • misc(compass-components): Move ui colors out of components folder: Add a few helpful deps; Fix testing-lib version collision
  • feat(compass-components): Add hooks for handling focus and hover state in components
  • feat(compass-components): Add hooks that manage treeview navigation behavior following WAI-ARIA spec
  • feat(compass-components): Add helper component to handle loading UI debouncing when dealing wih asyncronously loaded content
  • feat(compass-components): Add new databases navigation tree component for the sidebar
  • feat(compass-sidebar): Replace old navigation tree with the new one and clean-up unused code
  • chore(compass-components): Also provide content-visibility for collection list
  • chore(compass-sidebar): Handle sidebar actions for collections / views
  • Provide new app registry events that instance-store can handle to resolve collections metadata and show collection screens
  • Move collection submenu calls to one place that closest to showing collections on the screen so that we don't need to do it all over the place
  • chore(compass-components, compass-databases-navigation): Move sidebar navigation to its own package
  • chore(e2e): Update sidebar selector
  • chore: Ignore testing-library/dom dependency at the root
  • test(mongodb-compass): Update test for the new menu behavior
  • chore(databases-navigation): Refactor the whole thing to use react-virtualized

Keyboard support is not implemented yet, it also needs full rewrite to work with
virtual lists (and some tests are definitely broken now)

  • chore(databases-navigation): Reimplement most of the keyboard support for virtual list
  • and first letter are still not implemented and the tests need a re-write now
  • chore(databases-navigation): Add rest of the keyboard handlers; Simplify types

Still need to fix tests and remove stuff from compass-components as it is tightly
coupled to the virtual list implementation now

  • chore(databases-navigation): Add back animations for the loading list
  • chore(compass-sidebar): Fetch all collections when user starts to filter
  • chore(databases-navigation): Fix tests
  • chore(databases-navigation): Fix more tests
  • chore(instance-model, database-model, collection-model): Move optional fetching logic and status checks to the models
  • fix(databases-collections): Fix missing initial state
  • chore(compass-components): Remove log statement
  • fix(sidebar): Fix initial state test
  • chore(databases-navigation): Do not use process.env for test values
Comment by Githook User [ 30/Nov/21 ]

Author:

{'name': 'Sergey', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: feat(compass-sidebar): Add loading states for collection in sidebar COMPASS-5211 (#2600)

  • fix(collection-model): Do not exctract type as part of the collInfo

It's always there when listing collections

  • misc(compass-components): Move ui colors out of components folder: Add a few helpful deps; Fix testing-lib version collision
  • feat(compass-components): Add hooks for handling focus and hover state in components
  • feat(compass-components): Add hooks that manage treeview navigation behavior following WAI-ARIA spec
  • feat(compass-components): Add helper component to handle loading UI debouncing when dealing wih asyncronously loaded content
  • feat(compass-components): Add new databases navigation tree component for the sidebar
  • feat(compass-sidebar): Replace old navigation tree with the new one and clean-up unused code
  • chore(compass-components): Also provide content-visibility for collection list
  • chore(compass-sidebar): Handle sidebar actions for collections / views
  • Provide new app registry events that instance-store can handle to resolve collections metadata and show collection screens
  • Move collection submenu calls to one place that closest to showing collections on the screen so that we don't need to do it all over the place
  • chore(compass-components, compass-databases-navigation): Move sidebar navigation to its own package
  • chore(e2e): Update sidebar selector
  • chore: Ignore testing-library/dom dependency at the root
  • test(mongodb-compass): Update test for the new menu behavior
  • chore(databases-navigation): Refactor the whole thing to use react-virtualized

Keyboard support is not implemented yet, it also needs full rewrite to work with
virtual lists (and some tests are definitely broken now)

  • chore(databases-navigation): Reimplement most of the keyboard support for virtual list
  • and first letter are still not implemented and the tests need a re-write now
  • chore(databases-navigation): Add rest of the keyboard handlers; Simplify types

Still need to fix tests and remove stuff from compass-components as it is tightly
coupled to the virtual list implementation now

  • chore(databases-navigation): Add back animations for the loading list
  • chore(compass-sidebar): Fetch all collections when user starts to filter
  • chore(databases-navigation): Fix tests
  • chore(databases-navigation): Fix more tests
  • chore(instance-model, database-model, collection-model): Move optional fetching logic and status checks to the models
  • fix(databases-collections): Fix missing initial state
  • chore(compass-components): Remove log statement
  • fix(sidebar): Fix initial state test
  • chore(databases-navigation): Do not use process.env for test values
Comment by Githook User [ 30/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/7f13e1b148eb54a83a8ee0e2c33249f3d3603d02

Comment by Githook User [ 29/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge branch 'compass-5211-async-sidebar' of github.com:mongodb-js/compass into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/24f268ef6ff92d1c5bef282582398737e86c8fcf

Comment by Githook User [ 29/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/d8fab7eca5c500f11ee0b28bf97b7cbbd2936a0f

Comment by Githook User [ 23/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/d68819beb648913b7c245173645be320576f9490

Comment by Githook User [ 22/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/daf94729ad08e28961d978ae24bb7ff9af58c2e4

Comment by Githook User [ 20/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/758d5ea29a702fb84222aeab0d4d84406a99610c

Comment by Githook User [ 19/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar

Conflicts:
package-lock.json
packages/compass-components/package.json
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/9bfcd9b52e7e33cb768345d3ab256df79539ecf6

Comment by Githook User [ 18/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-async-sidebar

Conflicts:
package-lock.json
packages/compass-components/package.json
Branch: compass-5211-async-sidebar
https://github.com/mongodb-js/compass/commit/437f5041be6e55aedd372844c8c3dccdd5ad7178

Comment by Githook User [ 15/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed

Conflicts:
packages/compass-home/src/components/home.tsx
Branch: compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed
https://github.com/mongodb-js/compass/commit/caf403f1bf787882886765845f5cbab7524a1908

Comment by Githook User [ 12/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed

Conflicts:
packages/collection-model/lib/model.js
packages/compass-connect/src/stores/index.js
packages/database-model/lib/model.js
Branch: compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed
https://github.com/mongodb-js/compass/commit/a63c779fad34b19fe0f1717025cadd5ef835d268

Comment by Githook User [ 10/Nov/21 ]

Author:

{'name': 'Sergey Petushkov', 'email': 'petushkov.sergey@gmail.com', 'username': 'gribnoysup'}

Message: Merge remote-tracking branch 'origin/main' into compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed
Branch: compass-5211-decouple-sidebar-and-db-coll-view-from-instance-refreshed
https://github.com/mongodb-js/compass/commit/aebedae86f603ebe4a1655f7c5a6a3a02f16f3a4

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