|
| 1 | +import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; |
| 2 | +import { useApiResource } from '../../lib/api/useApiResource.ts'; |
| 3 | +import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts'; |
| 4 | +import { sortVersions } from '../../utils/componentsVersions.ts'; |
| 5 | +import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts'; |
| 6 | +import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTemplate.ts'; |
| 7 | + |
| 8 | +export type ComponentsSelectionProviderProps = { |
| 9 | + componentsList: ComponentsListItem[]; |
| 10 | + setComponentsList: (components: ComponentsListItem[]) => void; |
| 11 | + setInitialComponentsList: (components: ComponentsListItem[]) => void; |
| 12 | + managedControlPlaneTemplate?: ManagedControlPlaneTemplate; |
| 13 | + initialSelection?: Record<string, { isSelected: boolean; version: string }>; |
| 14 | + isOnMcpPage?: boolean; |
| 15 | + initializedComponents: React.RefObject<boolean>; |
| 16 | + children: React.ReactNode; |
| 17 | +}; |
| 18 | + |
| 19 | +export type ComponentsSelectionContextValue = { |
| 20 | + isLoading: boolean; |
| 21 | + error: unknown; |
| 22 | + templateDefaultsError: string | null; |
| 23 | +}; |
| 24 | + |
| 25 | +const ComponentsSelectionContext = createContext<ComponentsSelectionContextValue | undefined>(undefined); |
| 26 | + |
| 27 | +export const useComponentsSelection = (): ComponentsSelectionContextValue => { |
| 28 | + const ctx = useContext(ComponentsSelectionContext); |
| 29 | + if (!ctx) { |
| 30 | + throw new Error('useComponentsSelection must be used within ComponentsSelectionProvider'); |
| 31 | + } |
| 32 | + return ctx; |
| 33 | +}; |
| 34 | + |
| 35 | +export const ComponentsSelectionProvider: React.FC<ComponentsSelectionProviderProps> = ({ |
| 36 | + componentsList, |
| 37 | + setComponentsList, |
| 38 | + setInitialComponentsList, |
| 39 | + managedControlPlaneTemplate, |
| 40 | + initialSelection, |
| 41 | + isOnMcpPage, |
| 42 | + initializedComponents, |
| 43 | + children, |
| 44 | +}) => { |
| 45 | + type TemplateDefaultComponent = { |
| 46 | + name: string; |
| 47 | + version: string; |
| 48 | + removable?: boolean; |
| 49 | + versionChangeable?: boolean; |
| 50 | + }; |
| 51 | + |
| 52 | + const { |
| 53 | + data: availableManagedComponentsListData, |
| 54 | + error, |
| 55 | + isLoading, |
| 56 | + } = useApiResource(ListManagedComponents(), undefined, !!isOnMcpPage); |
| 57 | + |
| 58 | + const [templateDefaultsError, setTemplateDefaultsError] = useState<string | null>(null); |
| 59 | + |
| 60 | + const defaultComponents = useMemo<TemplateDefaultComponent[]>( |
| 61 | + () => managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [], |
| 62 | + [managedControlPlaneTemplate], |
| 63 | + ); |
| 64 | + |
| 65 | + // Initialize components list from API + template/defaults/initialSelection |
| 66 | + useEffect(() => { |
| 67 | + if ( |
| 68 | + initializedComponents.current || |
| 69 | + !availableManagedComponentsListData?.items || |
| 70 | + availableManagedComponentsListData.items.length === 0 |
| 71 | + ) { |
| 72 | + return; |
| 73 | + } |
| 74 | + |
| 75 | + const newComponentsList = availableManagedComponentsListData.items |
| 76 | + .map((item) => { |
| 77 | + const versions = sortVersions(item.status?.versions ?? []); |
| 78 | + const template = defaultComponents.find((dc) => dc.name === (item.metadata?.name ?? '')); |
| 79 | + const templateVersion = template?.version; |
| 80 | + let selectedVersion = template |
| 81 | + ? templateVersion && versions.includes(templateVersion) |
| 82 | + ? templateVersion |
| 83 | + : '' |
| 84 | + : (versions[0] ?? ''); |
| 85 | + let isSelected = !!template; |
| 86 | + |
| 87 | + const initSel = initialSelection?.[item.metadata?.name ?? '']; |
| 88 | + if (initSel) { |
| 89 | + isSelected = Boolean(initSel.isSelected); |
| 90 | + selectedVersion = initSel.version && versions.includes(initSel.version) ? initSel.version : ''; |
| 91 | + } |
| 92 | + return { |
| 93 | + name: item.metadata?.name ?? '', |
| 94 | + versions, |
| 95 | + selectedVersion, |
| 96 | + isSelected, |
| 97 | + documentationUrl: '', |
| 98 | + } as ComponentsListItem; |
| 99 | + }) |
| 100 | + .filter((component) => !removeComponents.find((item) => item === component.name)); |
| 101 | + |
| 102 | + setInitialComponentsList(newComponentsList); |
| 103 | + setComponentsList(newComponentsList); |
| 104 | + initializedComponents.current = true; |
| 105 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 106 | + }, [setComponentsList, defaultComponents, initialSelection, availableManagedComponentsListData?.items]); |
| 107 | + |
| 108 | + // Validate template default components are available |
| 109 | + useEffect(() => { |
| 110 | + const items = availableManagedComponentsListData?.items ?? []; |
| 111 | + if (items.length === 0 || !defaultComponents.length) { |
| 112 | + setTemplateDefaultsError(null); |
| 113 | + return; |
| 114 | + } |
| 115 | + |
| 116 | + const errors: string[] = []; |
| 117 | + defaultComponents.forEach((dc: TemplateDefaultComponent) => { |
| 118 | + if (!dc?.name) return; |
| 119 | + const item = items.find((it) => it.metadata?.name === dc.name); |
| 120 | + if (!item) { |
| 121 | + errors.push(`Component "${dc.name}" from template is not available.`); |
| 122 | + return; |
| 123 | + } |
| 124 | + const versions: string[] = Array.isArray(item.status?.versions) ? (item.status?.versions as string[]) : []; |
| 125 | + if (dc.version && !versions.includes(dc.version)) { |
| 126 | + errors.push(`Component "${dc.name}" version "${dc.version}" from template is not available.`); |
| 127 | + } |
| 128 | + }); |
| 129 | + |
| 130 | + setTemplateDefaultsError(errors.length ? errors.join('\n') : null); |
| 131 | + }, [availableManagedComponentsListData, defaultComponents]); |
| 132 | + |
| 133 | + // Auto-apply template defaults if none selected and no initialSelection |
| 134 | + useEffect(() => { |
| 135 | + if (!initializedComponents.current) return; |
| 136 | + if (!defaultComponents?.length) return; |
| 137 | + if (!componentsList?.length) return; |
| 138 | + if (initialSelection && Object.keys(initialSelection).length > 0) return; |
| 139 | + |
| 140 | + const anySelected = componentsList.some((c) => c.isSelected); |
| 141 | + if (anySelected) return; |
| 142 | + |
| 143 | + const updated = componentsList.map((c) => { |
| 144 | + const template = defaultComponents.find((dc) => dc.name === c.name); |
| 145 | + if (!template) return c; |
| 146 | + const templateVersion = template.version; |
| 147 | + const selectedVersion = |
| 148 | + templateVersion && Array.isArray(c.versions) && c.versions.includes(templateVersion) ? templateVersion : ''; |
| 149 | + return { ...c, isSelected: true, selectedVersion } as ComponentsListItem; |
| 150 | + }); |
| 151 | + |
| 152 | + setComponentsList(updated); |
| 153 | + // eslint-disable-next-line react-hooks/exhaustive-deps |
| 154 | + }, [defaultComponents, componentsList, setComponentsList, initialSelection]); |
| 155 | + |
| 156 | + const value: ComponentsSelectionContextValue = { |
| 157 | + isLoading: Boolean(isLoading), |
| 158 | + error, |
| 159 | + templateDefaultsError, |
| 160 | + }; |
| 161 | + |
| 162 | + return <ComponentsSelectionContext.Provider value={value}>{children}</ComponentsSelectionContext.Provider>; |
| 163 | +}; |
0 commit comments