feat: add multiple selection support to Tree component #18086

notgiorgi · 2025-11-13T08:21:43Z

Description:

Added multi-select functionality to the Tree component, allowing users to select multiple items in a tree structure. This enhancement includes:

Added a new type prop to specify whether the tree supports single or multiple selection
Implemented recursive selection/deselection of child nodes when a parent is selected in multi-select mode
Updated the SpaceSelector component to explicitly use single selection mode
Added a new story to demonstrate the multi-select functionality

CleanShot 2025-11-13 at 12.22.06.mp4 (uploaded via Graphite)

notgiorgi · 2025-11-13T08:21:57Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

notgiorgi · 2025-11-13T08:25:08Z

packages/frontend/src/components/common/Tree/Tree.tsx

+            })
+            .filter((item) => item !== null);
+
+        console.log(uuids, values);


notgiorgi · 2025-11-13T08:25:24Z

packages/frontend/src/stories/Tree.stories.tsx

 import type { Meta, StoryObj } from '@storybook/react';

 import Tree from '../components/common/Tree/Tree';
+// import Mantine8Provider from '../providers/Mantine8Provider';


graphite-app · 2025-11-13T08:40:16Z

packages/frontend/src/stories/Tree.stories.tsx

 export const Primary: Story = {
    args: {
        value: 'fake11',
        topLevelLabel: 'All spaces',
-        data: [
-            {
-                uuid: 'fake0',
-                name: 'The most main space',
-                path: 'the_most_main_space',
-            },
-            {
-                uuid: 'fake1',
-                name: 'Main space',
-                path: 'main_space',
-            },
-            {
-                uuid: 'fake2',
-                name: 'Sub space',
-                path: 'main_space.sub',
-            },
-            {
-                uuid: 'fake3',
-                name: 'Sub space 2',
-                path: 'main_space.sub2',
-            },
-            {
-                uuid: 'fake4',
-                name: 'Sub space 3',
-                path: 'main_space.sub3',
-            },
-            {
-                uuid: 'fake5',
-                name: 'Sub of sub space',
-                path: 'main_space.sub.sub_of_sub',
-            },
-            {
-                uuid: 'fake6',
-                name: 'Sub of sub space 2',
-                path: 'main_space.sub.sub_of_sub2',
-            },
-            {
-                uuid: 'fake7',
-                name: 'Sub of sub space 3',
-                path: 'main_space.sub.sub_of_sub3',
-            },
-            {
-                uuid: 'fake10',
-                name: 'Sub of sub of sub space',
-                path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub',
-            },
-            {
-                uuid: 'fake11',
-                name: 'Sub of sub of sub space 2',
-                path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub2',
-            },
-            {
-                uuid: 'fake12',
-                name: 'Sub of sub of sub sub space',
-                path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub.sub_of_sub_of_sub_of_sub',
-            },
-            {
-                uuid: 'fake13',
-                name: 'Sub of sub of sub sub space 2',
-                path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub.sub_of_sub_of_sub_of_sub2',
-            },
-            {
-                uuid: 'fake14',
-                name: 'Kinda top level space',
-                path: 'kinda_top_level_space',
-            },
-            {
-                uuid: 'fake15',
-                name: 'Kinda top level space 2',
-                path: 'kinda_top_level_space2',
-            },
-            {
-                uuid: 'fake16',
-                name: 'Kinda top level space 3',
-                path: 'kinda_top_level_space3',
-            },
-        ],
+        data,
        onChange: (selectedUuid) => {
            console.info('Selected item UUID:', selectedUuid);
        },
    },


The Primary story needs to include type: "single" to align with the updated Props type definition. Since it's using value and onChange, it should explicitly specify the selection type to maintain consistency with the component's new type system.

Suggested change

export const Primary: Story = {

args: {

value: 'fake11',

topLevelLabel: 'All spaces',

data: [

{

uuid: 'fake0',

name: 'The most main space',

path: 'the_most_main_space',

},

{

uuid: 'fake1',

name: 'Main space',

path: 'main_space',

},

{

uuid: 'fake2',

name: 'Sub space',

path: 'main_space.sub',

},

{

uuid: 'fake3',

name: 'Sub space 2',

path: 'main_space.sub2',

},

{

uuid: 'fake4',

name: 'Sub space 3',

path: 'main_space.sub3',

},

{

uuid: 'fake5',

name: 'Sub of sub space',

path: 'main_space.sub.sub_of_sub',

},

{

uuid: 'fake6',

name: 'Sub of sub space 2',

path: 'main_space.sub.sub_of_sub2',

},

{

uuid: 'fake7',

name: 'Sub of sub space 3',

path: 'main_space.sub.sub_of_sub3',

},

{

uuid: 'fake10',

name: 'Sub of sub of sub space',

path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub',

},

{

uuid: 'fake11',

name: 'Sub of sub of sub space 2',

path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub2',

},

{

uuid: 'fake12',

name: 'Sub of sub of sub sub space',

path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub.sub_of_sub_of_sub_of_sub',

},

{

uuid: 'fake13',

name: 'Sub of sub of sub sub space 2',

path: 'main_space.sub.sub_of_sub.sub_of_sub_of_sub.sub_of_sub_of_sub_of_sub2',

},

{

uuid: 'fake14',

name: 'Kinda top level space',

path: 'kinda_top_level_space',

},

{

uuid: 'fake15',

name: 'Kinda top level space 2',

path: 'kinda_top_level_space2',

},

{

uuid: 'fake16',

name: 'Kinda top level space 3',

path: 'kinda_top_level_space3',

},

],

data,

onChange: (selectedUuid) => {

console.info('Selected item UUID:', selectedUuid);

},

},

export const Primary: Story = {

args: {

value: 'fake11',

topLevelLabel: 'All spaces',

data,

type: "single",

onChange: (selectedUuid) => {

console.info('Selected item UUID:', selectedUuid);

},

},

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

github-actions · 2025-11-13T08:50:57Z

Your preview environment pr-18086 has been deployed with errors.

github-actions · 2025-11-13T08:50:58Z

Preview environment logs can be accessed at: https://console.cloud.google.com/logs/query;query=resource.labels.namespace_name%3D%22pr-18086%22;duration=PT30M?project=lightdash-previews

github-actions · 2025-11-13T08:50:59Z

You can ssh into the preview environment by running: ./scripts/okteto-ssh.sh 18086

joaoviana · 2025-11-13T09:33:44Z

packages/frontend/src/components/common/Tree/Tree.tsx

+    const values = useMemo(
+        () =>
+            props.type === 'multiple'
+                ? props.values
+                : props.value
+                ? [props.value]
+                : [],
+        [
+            props.type,
+            // @ts-expect-error - props.values and props.value are only defined if type is 'multiple' or 'single'
+            props.values,
+            // @ts-expect-error - props.values and props.value are only defined if type is 'multiple' or 'single'
+            props.value,
+        ],
+    );


I actually don't think you need to memoize this

But can make the change after - testing now

joaoviana

tested

notgiorgi · 2025-11-13T10:59:16Z

Merge activity

Nov 13, 10:59 AM UTC: A user started a stack merge that includes this pull request via Graphite.
Nov 13, 11:05 AM UTC: Graphite rebased this pull request as part of a merge.
Nov 13, 11:05 AM UTC: @notgiorgi merged this pull request with Graphite.

# [0.2166.0](0.2165.1...0.2166.0) (2025-11-13) ### Bug Fixes * wrap Storybook components with Mantine8Provider ([#18085](#18085)) ([18f67a9](18f67a9)) ### Features * add multiple selection support to Tree component ([#18086](#18086)) ([b78b7eb](b78b7eb)) * add space access control for AI agents ([#18061](#18061)) ([b9cb25a](b9cb25a)), closes [#18044](#18044) * improve oauth page styling ([#18075](#18075)) ([67b322e](67b322e))

lightdash-bot · 2025-11-13T11:13:23Z

🎉 This PR is included in version 0.2166.0 🎉

The release is available on:

0.2166.0
GitHub release

Your semantic-release bot 📦🚀

### Description: Added multi-select functionality to the Tree component, allowing users to select multiple items in a tree structure. This enhancement includes: - Added a new `type` prop to specify whether the tree supports single or multiple selection - Implemented recursive selection/deselection of child nodes when a parent is selected in multi-select mode - Updated the SpaceSelector component to explicitly use single selection mode - Added a new story to demonstrate the multi-select functionality [CleanShot 2025-11-13 at 12.22.06.mp4 <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/4dde0a9f-34c1-4def-b7be-9da78261bd4d.mp4" />](https://app.graphite.com/user-attachments/video/4dde0a9f-34c1-4def-b7be-9da78261bd4d.mp4)

# [0.2166.0](lightdash/lightdash@0.2165.1...0.2166.0) (2025-11-13) ### Bug Fixes * wrap Storybook components with Mantine8Provider ([lightdash#18085](lightdash#18085)) ([18f67a9](lightdash@18f67a9)) ### Features * add multiple selection support to Tree component ([lightdash#18086](lightdash#18086)) ([b78b7eb](lightdash@b78b7eb)) * add space access control for AI agents ([lightdash#18061](lightdash#18061)) ([b9cb25a](lightdash@b9cb25a)), closes [lightdash#18044](lightdash#18044) * improve oauth page styling ([lightdash#18075](lightdash#18075)) ([67b322e](lightdash@67b322e))

graphite-app bot assigned notgiorgi Nov 13, 2025

notgiorgi mentioned this pull request Nov 13, 2025

fix: wrap Storybook components with Mantine8Provider #18085

Merged

lightdash-bot requested a deployment to pr-18086 November 13, 2025 08:22 Pending

notgiorgi commented Nov 13, 2025

View reviewed changes

notgiorgi requested review from IrakliJani and joaoviana November 13, 2025 08:25

notgiorgi force-pushed the feat_add_multiple_selection_support_to_Tree_component branch from d6a78ea to dfa3cc3 Compare November 13, 2025 08:36

lightdash-bot deployed to pr-18086 November 13, 2025 08:37 View deployment

graphite-app bot reviewed Nov 13, 2025

View reviewed changes

joaoviana reviewed Nov 13, 2025

View reviewed changes

joaoviana approved these changes Nov 13, 2025

View reviewed changes

joaoviana mentioned this pull request Nov 13, 2025

feat: add multiselect space selector #18082

Closed

notgiorgi changed the base branch from feat_wrap_Storybook_components_with_Mantine8Provider to graphite-base/18086 November 13, 2025 10:59

notgiorgi changed the base branch from graphite-base/18086 to main November 13, 2025 11:03

feat: add multiple selection support to Tree component

1522a0b

notgiorgi force-pushed the feat_add_multiple_selection_support_to_Tree_component branch from dfa3cc3 to 1522a0b Compare November 13, 2025 11:04

lightdash-bot requested a deployment to pr-18086 November 13, 2025 11:05 Pending

notgiorgi merged commit b78b7eb into main Nov 13, 2025
11 of 13 checks passed

notgiorgi deleted the feat_add_multiple_selection_support_to_Tree_component branch November 13, 2025 11:05

lightdash-bot added the released label Nov 13, 2025

feat: add multiple selection support to Tree component #18086

feat: add multiple selection support to Tree component #18086

Uh oh!

Conversation

notgiorgi commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description:

Uh oh!

notgiorgi commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

notgiorgi Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

notgiorgi Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

graphite-app bot Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 13, 2025

Uh oh!

github-actions bot commented Nov 13, 2025

Uh oh!

joaoviana Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

joaoviana Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

joaoviana left a comment

Choose a reason for hiding this comment

Uh oh!

notgiorgi commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

lightdash-bot commented Nov 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

notgiorgi commented Nov 13, 2025 •

edited

Loading

notgiorgi commented Nov 13, 2025 •

edited

Loading

github-actions bot commented Nov 13, 2025 •

edited

Loading

notgiorgi commented Nov 13, 2025 •

edited

Loading