feat: use tree selector to select project

src/components/ProjectSelector.tsx

@@ -1,4 +1,4 @@
-import { Select } from 'antd'
+import { TreeSelect } from 'antd'
 import React from 'react'
 import ProjectDefinition from '../models/ProjectDefinition'
 import { localize } from '../utils/Language'
@@ -10,39 +10,92 @@ interface ProjectSelectorProps {
     excludeProjectId?: string
 }
 
+interface ProjectSelectorTreeNode {
+    title: string
+    key: string
+    value: string
+    disabled?: boolean
+    children?: ProjectSelectorTreeNode[]
+}
+
 class ProjectSelector extends React.Component<ProjectSelectorProps> {
     render() {
-        const { allProjects, selectedProjectId, onChange, excludeProjectId } =
-            this.props
+        const { allProjects, selectedProjectId, onChange } = this.props
+
+        const projectsMap: {
+            [key: string]: ProjectSelectorTreeNode
+        } = {}
+        let root: ProjectSelectorTreeNode[] = []
+        // Create a map of all projects
+        allProjects.forEach((item) => {
+            projectsMap[item.id] = {
+                title: item.name,
+                key: item.id,
+                value: item.id,
+            }
+        })
+
+        // Function to check if a project or its ancestors are excluded
+        const isProjectOrAncestorExcluded = (projectId: string): boolean => {
+            let current: string | null = projectId
+            while (current) {
+                if (current === this.props.excludeProjectId) {
+                    return true
+                }
+                const parentProject = allProjects.find((p) => p.id === current)
+                current = parentProject?.parentProjectId ?? null
+            }
+            return false
+        }
 
-        const projectOptions = [
+        // Distribute projects and apps to their respective parents or to the root
+        allProjects.forEach((item) => {
+            const project = projectsMap[item.id]
+            if (isProjectOrAncestorExcluded(item.id)) {
+                project.disabled = true
+            }
+            if (item.parentProjectId && projectsMap[item.parentProjectId]) {
+                const children =
+                    projectsMap[item.parentProjectId].children || []
+                children.push(project)
+                projectsMap[item.parentProjectId].children = children
+            } else {
+                root.push(project)
+            }
+        })
+
+        root.forEach((project) => {
+            if (project.children)
+                project.children =
+                    project.children.length > 0 ? project.children : undefined
+        })
+        root = [
             {
-                value: '',
-                label: localize(
+                title: localize(
                     'projects.parent_project_selector_default',
                     'root <no parent project>'
                 ),
+                key: '',
+                value: '',
+                children: root,
             },
-            ...allProjects
-                .filter((project) => project.id !== excludeProjectId)
-                .map((project) => ({
-                    value: project.id,
-                    label: project.name,
-                })),
         ]
 
+        console.log('tree', this.props)
+
         return (
-            <Select
-                showSearch
+            <TreeSelect
+                allowClear
                 style={{ width: '100%' }}
+                treeDefaultExpandAll
                 placeholder={localize(
                     'apps.select_parent_project',
                     'Select a parent project'
                 )}
-                optionFilterProp="label"
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 value={selectedProjectId || ''}
                 onChange={onChange}
-                options={projectOptions}
+                treeData={root}
             />
         )
     }