diff --git a/ocd/packages/desktop/src/css/ocd.css b/ocd/packages/desktop/src/css/ocd.css index cf796ed5..2a38f960 100644 --- a/ocd/packages/desktop/src/css/ocd.css +++ b/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 { diff --git a/ocd/packages/desktop/src/css/theme.css b/ocd/packages/desktop/src/css/theme.css index e986fcbf..ca14482d 100644 --- a/ocd/packages/desktop/src/css/theme.css +++ b/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 */ diff --git a/ocd/packages/query/src/OciResourceManagerQuery.ts b/ocd/packages/query/src/OciResourceManagerQuery.ts new file mode 100644 index 00000000..832b4c11 --- /dev/null +++ b/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 } diff --git a/ocd/packages/react/src/components/dialogs/OcdQueryDialog.tsx b/ocd/packages/react/src/components/dialogs/OcdQueryDialog.tsx index ae9ab846..116c949a 100644 --- a/ocd/packages/react/src/components/dialogs/OcdQueryDialog.tsx +++ b/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> = 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) => { console.debug('OcdQueryDialog: Selected Region', e.target.value) @@ -114,7 +116,7 @@ export const OcdQueryDialog = ({ocdDocument, setOcdDocument}: QueryDialogProps): }) } const onChange = (e: React.ChangeEvent) => { - // 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, 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, 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) => e.stopPropagation() + const subCompartmentsClasses = collapsedCompartmentIds.includes(parentId) ? 'hidden' : '' return ( -
    +
      {filteredCompartments.length > 0 && filteredCompartments.map((c) => { - return
    • - - {compartments.filter((cc) => cc.compartmentId === c.id).length > 0 && 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
    • onClick(e, c.id)}> + + {subCompartmentsCount > 0 && + collapsedCompartmentIds: string[] + setCollapsedCompartmentIds: React.Dispatch root: boolean parentId: string setHierarchy: React.Dispatch