feat: Add collapsable entries to compartment list

ocd/packages/desktop/src/css/ocd.css

@@ -2315,9 +2315,9 @@ table {
     text-decoration: none;    
 }
 
-.ocd-compartment-picker li > ul {
+/* .ocd-compartment-picker li > ul {
     padding-left: 1em;
-}
+} */
 
 .ocd-compartment-picker li > label,
 .ocd-compartment-picker li > span {

ocd/packages/desktop/src/css/theme.css

@@ -175,6 +175,21 @@ details[open] > summary.summary-background {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0IDR2MTBINE0zNCA0djEwaDEwbTAgMjBIMzR2MTBNNCAzNGgxMHYxMCIgc3Ryb2tlPSIjMTYxNTEzIiBzdHJva2Utd2lkdGg9IjQiLz48L3N2Zz4=");
 }
 
+.ocd-list-collapsed {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE4IDEybDEyIDEyLTEyIDEyIiBzdHJva2U9IiMxNjE1MTMiIHN0cm9rZS13aWR0aD0iNCIvPjwvc3ZnPg==");
+}
+
+.ocd-list-open {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTM2IDE4TDI0IDMwIDEyIDE4IiBzdHJva2U9IiMxNjE1MTMiIHN0cm9rZS13aWR0aD0iNCIvPjwvc3ZnPg==");
+}
+
+.ocd-collapable-list-element {
+    background-position: left top;
+    background-repeat: no-repeat;
+    background-size: 1em;
+    padding-left: 1em;
+}
+
 /*
 ** Element Themes
 */

ocd/packages/query/src/OciResourceManagerQuery.ts

@@ -0,0 +1,22 @@
+/*
+** Copyright (c) 2020, 2024, Oracle and/or its affiliates.
+** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
+*/
+
+import { common, resourcemanager } from "oci-sdk"
+import { OciResource } from "@ocd/model"
+import { OcdUtils } from "@ocd/core"
+import { OciCommonQuery } from './OciQueryCommon.js'
+
+export class OciResourceManagerQuery extends OciCommonQuery {
+    // Clients
+    resourcemanagerClient: resourcemanager.ResourceManagerClient
+    constructor(profile: string='DEFAULT', region?: string) {
+        super(profile, region)
+        console.debug('OciResourceManagerQuery: Region', region)
+        this.resourcemanagerClient = new resourcemanager.ResourceManagerClient(this.authenticationConfiguration, this.clientConfiguration)
+    }
+}
+
+export default OciResourceManagerQuery
+// module.exports = { OciResourceManager }

ocd/packages/react/src/components/dialogs/OcdQueryDialog.tsx

@@ -25,6 +25,7 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps):
     const [selectedProfile, setSelectedProfile] = useState('DEFAULT')
     const [selectedRegion, setSelectedRegion] = useState('')
     const [selectedCompartmentIds, setSelectedCompartmentIds] = useState([])
+    const [collapsedCompartmentIds, setCollapsedCompartmentIds] = useState([])
     const [hierarchy, setHierarchy] = useState('')
     const refs: Record<string, React.RefObject<any>> = compartments.reduce((acc, value: OciModelResources.OciCompartment) => {
         acc[value.hierarchy] = React.createRef();
@@ -46,6 +47,7 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps):
         loadRegions(profile)
         loadCompartments(profile)
         setSelectedCompartmentIds([])
+        setCollapsedCompartmentIds([])
     }
     const onRegionChanged = (e: React.ChangeEvent<HTMLSelectElement>) => {
         console.debug('OcdQueryDialog: Selected Region', e.target.value)
@@ -114,7 +116,7 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps):
         })
     }
     const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        // console.debug('OcdQueryDialog: onChange', e)
+        console.debug('OcdQueryDialog: onChange', e)
         const keys = Object.keys(refs).filter((k) => k.includes(e.target.value))
         // if (keys.length > 0) refs[keys[0]].current.scrollIntoView(true)
         // if (keys.length > 0) refs[keys[0]].current.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
@@ -145,6 +147,8 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps):
                                     compartments={compartments} 
                                     selectedCompartmentIds={selectedCompartmentIds}
                                     setSelectedCompartmentIds={setSelectedCompartmentIds}
+                                    collapsedCompartmentIds={collapsedCompartmentIds} 
+                                    setCollapsedCompartmentIds={setCollapsedCompartmentIds}
                                     root={true}
                                     parentId={''}
                                     setHierarchy={setHierarchy}
@@ -167,11 +171,14 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps):
     )
 }
 
-const CompartmentPicker = ({compartments, selectedCompartmentIds, setSelectedCompartmentIds, root, parentId, setHierarchy, refs}: CompartmentPickerProps): JSX.Element => {
+const CompartmentPicker = ({compartments, selectedCompartmentIds, setSelectedCompartmentIds, root, parentId, setHierarchy, refs, collapsedCompartmentIds, setCollapsedCompartmentIds}: CompartmentPickerProps): JSX.Element => {
+    // const [isOpen, setIsOpen] = useState(true)
+    // const isOpen = collapsedCompartmentIds.includes(parentId)
     const filter = root ? (c: OciModelResources.OciCompartment) => c.root : (c: OciModelResources.OciCompartment) => c.compartmentId === parentId
     const filteredCompartments = compartments.filter(filter)
     console.debug('OcdQueryDialog:', root, parentId, filteredCompartments)
     const onChange = (e: React.ChangeEvent<HTMLInputElement>, id: string) => {
+        e.stopPropagation()
         const selected = e.target.checked
         // console.debug('OcdQueryDialog: Selected', selected)
         const compartmentIds = selected ? [...selectedCompartmentIds, id] : selectedCompartmentIds.filter((i) => i !== id)
@@ -188,15 +195,30 @@ const CompartmentPicker = ({compartments, selectedCompartmentIds, setSelectedCom
         const compartment: OciModelResources.OciCompartment | undefined = compartments.find((c: OciModelResources.OciCompartment) => c.id === id)
         setHierarchy(compartment !== undefined ? compartment.hierarchy : '')
     }
+    const onClick = (e: React.MouseEvent<HTMLLIElement>, id: string) => {
+        e.stopPropagation()
+        const isClosed = collapsedCompartmentIds.includes(id)
+        // Toggle State
+        const compartmentIds = isClosed ? collapsedCompartmentIds.filter((i) => i !== id) : [...collapsedCompartmentIds, id]
+        setCollapsedCompartmentIds(compartmentIds)
+        // setIsOpen(!isOpen)
+    }
+    const onInputClick = (e: React.MouseEvent<HTMLInputElement>) => e.stopPropagation()
+    const subCompartmentsClasses = collapsedCompartmentIds.includes(parentId) ? 'hidden' : ''
     return (
-        <ul>
+        <ul className={subCompartmentsClasses}>
             {filteredCompartments.length > 0 && filteredCompartments.map((c) => {
-                return <li key={c.id} ref={refs[c.hierarchy]}>
-                            <label onMouseEnter={(e) => onMouseOver(c.id)} onMouseLeave={(e) => onMouseOver('')}><input type="checkbox" checked={selectedCompartmentIds.includes(c.id)} onChange={(e) => onChange(e, c.id)}></input>{c.name}</label>
-                            {compartments.filter((cc) => cc.compartmentId === c.id).length > 0 && <CompartmentPicker 
+                const subCompartmentsCount = compartments.filter((cc) => cc.compartmentId === c.id).length
+                const isClosed = collapsedCompartmentIds.includes(c.id)
+                const labelClasses = subCompartmentsCount > 0 ? isClosed ? 'ocd-collapable-list-element ocd-list-collapsed' : 'ocd-collapable-list-element ocd-list-open' : 'ocd-collapable-list-element'
+                return <li className={labelClasses} key={c.id} ref={refs[c.hierarchy]} onClick={(e) => onClick(e, c.id)}>
+                            <label onMouseEnter={(e) => onMouseOver(c.id)} onMouseLeave={(e) => onMouseOver('')}><input type="checkbox" checked={selectedCompartmentIds.includes(c.id)} onChange={(e) => onChange(e, c.id)} onClick={onInputClick}></input>{c.name}</label>
+                            {subCompartmentsCount > 0 && <CompartmentPicker 
                                 compartments={compartments} 
                                 selectedCompartmentIds={selectedCompartmentIds}
                                 setSelectedCompartmentIds={setSelectedCompartmentIds}
+                                collapsedCompartmentIds={collapsedCompartmentIds} 
+                                setCollapsedCompartmentIds={setCollapsedCompartmentIds}
                                 root={false}
                                 parentId={c.id}
                                 setHierarchy={setHierarchy}

ocd/packages/react/src/types/Dialogs.ts

@@ -15,6 +15,8 @@ export interface CompartmentPickerProps {
     compartments: OciModelResources.OciCompartment[]
     selectedCompartmentIds: string[]
     setSelectedCompartmentIds: React.Dispatch<any>
+    collapsedCompartmentIds: string[]
+    setCollapsedCompartmentIds: React.Dispatch<any>
     root: boolean
     parentId: string
     setHierarchy: React.Dispatch<any>