graphql-engine icon indicating copy to clipboard operation
graphql-engine copied to clipboard

Console: allow user to collapse table treeview node. Close #10320

Open bertyhell opened this issue 1 year ago • 1 comments

Description

With this PR when the user clicks on an expended schema in the data treeview it will collapse that entry in the treeview

Open a schema entry image

Click the schema entry again. This is the result image

Changelog

Component : console

Type: enhancement

Product: community-edition

Short Changelog

Allow users to collapse schema's and their tables after expanding them in the data manager view

Related Issues

#10320

Solution and Design

When the user click on an expanded schema treeview entry, the state for the current schema is set to undefined and the url is redirected to be the global database view

Steps to test and verify

Open a schema Click the schema again to close it

Limitations, known bugs & workarounds

none

Metadata

Does this PR add a new Metadata feature?

  • [x] No

GraphQL

  • [x] No new GraphQL schema is generated

Breaking changes

  • [x] No Breaking changes

bertyhell avatar Jul 08 '24 20:07 bertyhell

Hey @bertyhell, thanks for raising the PR. I tested it out locally and I see a bug where the URL is going to an undefined state which might cause an issue. I have attached the screenshot below to show how the URL is behaving.

https://github.com/user-attachments/assets/5719e732-d3eb-43f6-be54-05901cd855a2

Varun-Choudhary avatar Jul 23 '24 10:07 Varun-Choudhary

Hey @bertyhell, thanks for the submission! The links of the tree-view are tied to the schema routes and data loading behaviour for the corresponding schemas, and the change you've proposed routes to an undefined schema temporarily to simulate a "closed" state for the node. I wouldn't recommend doing this since it can cause unexpected issue while navigating between databases or schemas.

Another alternative would be to stop the redirect while setting undefined, like so -

if (value === currentSchema) {
      dispatch(updateCurrentSchema(undefined, currentDataSource, false)).then(
        () => {
          dispatch(_push(`/data/${currentDataSource}`));
        }
      );
      return;
      // Clicking the same schema again should collapse the treeview node
    }

but this would still cause re-fetching of schema related info every time an open-close action is triggered, which can be quite expensive.

Given this scenario, I'd recommend you check out the new tree view we have in the improved data-tab UI. It's faster and has a filter that can search across schemas. For the time being we'd like to keep the current behaviour for the legacy one.

vijayprasanna13 avatar Sep 16 '24 05:09 vijayprasanna13