From 24b3a83deb1a35a879b8ca30d36c8026fec2d2bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Tue, 17 Jun 2025 13:15:20 +0200 Subject: [PATCH 01/31] init --- .../ComponentsSelection.tsx | 39 +++++++++++++++++++ ...eateManagedControlPlaneWizardContainer.tsx | 28 ++++++++++++- 2 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 src/components/ComponentsSelection/ComponentsSelection.tsx diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx new file mode 100644 index 00000000..869a6f6a --- /dev/null +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { CheckBox, Select, Option, FlexBox } from '@ui5/webcomponents-react'; + +interface ComponentItem { + name: string; + versions: string[]; +} + +interface ComponentsSelectionProps { + items: ComponentItem[]; +} + +export const ComponentsSelection: React.FC = ({ + items, +}) => { + const onChange = (event: any) => { + // event.detail.selectedOption is a reference to the selected HTML Element + // dataset contains all attributes that were passed with the data- prefix. + console.log(event.detail.selectedOption.dataset.id); + }; + return ( +
+ {items.map((item, idx) => ( + + + {item.name} + + + + ))} +
+ ); +}; diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index 5090fae2..bb627c60 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -36,6 +36,7 @@ import { EditMembers } from '../Members/EditMembers.tsx'; import { useTranslation } from 'react-i18next'; import { MetadataForm } from '../Dialogs/MetadataForm.tsx'; import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner.tsx'; +import { ComponentsSelection } from '../ComponentsSelection/ComponentsSelection.tsx'; export type CreateDialogProps = { name: string; @@ -51,11 +52,17 @@ type CreateManagedControlPlaneWizardContainerProps = { workspaceName?: string; }; -type WizardStepType = 'metadata' | 'members' | 'summarize' | 'success'; +type WizardStepType = + | 'metadata' + | 'members' + | 'componentSelection' + | 'summarize' + | 'success'; const wizardStepOrder: WizardStepType[] = [ 'metadata', 'members', + 'componentSelection', 'summarize', 'success', ]; @@ -93,6 +100,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< () => ({ metadata: t('buttons.next'), members: t('buttons.next'), + componentSelection: t('buttons.next'), summarize: t('buttons.create'), success: t('buttons.close'), }), @@ -175,7 +183,10 @@ export const CreateManagedControlPlaneWizardContainer: FC< handleSubmit(() => setSelectedStep('members'))(); break; case 'members': - setSelectedStep('summarize'); + setSelectedStep('componentSelection'); + break; + case 'componentSelection': + setSelectedStep('componentSelection'); break; case 'summarize': handleCreateManagedControlPlane(getValues()); @@ -290,6 +301,19 @@ export const CreateManagedControlPlaneWizardContainer: FC< + + + Date: Wed, 18 Jun 2025 13:15:36 +0200 Subject: [PATCH 02/31] fixes --- .../ComponentsSelection.module.css | 6 ++ .../ComponentsSelection.tsx | 26 ++--- ...eateManagedControlPlaneWizardContainer.tsx | 95 +++++++++++++++++-- .../types/crate/createManagedControlPlane.ts | 55 ++++++++++- 4 files changed, 157 insertions(+), 25 deletions(-) create mode 100644 src/components/ComponentsSelection/ComponentsSelection.module.css diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css new file mode 100644 index 00000000..5de2d904 --- /dev/null +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -0,0 +1,6 @@ +.row { + padding: 1rem; +} +.oddRow { + background-color: rgba(0, 0, 20, 0.05); +} diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 869a6f6a..40504311 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -1,32 +1,34 @@ import React from 'react'; import { CheckBox, Select, Option, FlexBox } from '@ui5/webcomponents-react'; - -interface ComponentItem { +import styles from './ComponentsSelection.module.css'; +import cx from 'clsx'; +export interface ComponentItem { name: string; versions: string[]; } -interface ComponentsSelectionProps { +export interface ComponentsSelectionProps { items: ComponentItem[]; } export const ComponentsSelection: React.FC = ({ - items, + items: components, }) => { const onChange = (event: any) => { - // event.detail.selectedOption is a reference to the selected HTML Element - // dataset contains all attributes that were passed with the data- prefix. console.log(event.detail.selectedOption.dataset.id); }; return (
- {items.map((item, idx) => ( - - - {item.name} - + {components.map((component, idx) => ( + + - {component.versions.map((version) => ( - - ))} - - - ))} + Select components + + Please select components that you would like to have assigned to your + Managed Control Plane{' '} + + + + + +
+ {components.map((component) => ( + + + + + + + + ))} +
); }; From ae5640ba53ca557856b2fc1944bac72a128a06d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 20 Jun 2025 09:48:14 +0200 Subject: [PATCH 04/31] refactor --- .../ComponentsSelectionContainer.tsx | 91 +++++++++++++++++++ ...eateManagedControlPlaneWizardContainer.tsx | 85 +---------------- .../types/crate/createManagedControlPlane.ts | 2 +- 3 files changed, 94 insertions(+), 84 deletions(-) create mode 100644 src/components/ComponentsSelection/ComponentsSelectionContainer.tsx diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx new file mode 100644 index 00000000..40b4f87b --- /dev/null +++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx @@ -0,0 +1,91 @@ +import React from 'react'; +import { ComponentsSelection } from '../ComponentsSelection/ComponentsSelection.tsx'; + +export interface ComponentItem { + name: string; + versions: string[]; +} + +export interface ComponentsSelectionProps {} +export const ComponentsSelectionContainer: React.FC< + ComponentsSelectionProps +> = () => { + const mockedItems: ComponentItem[] = [ + { name: 'cert-manager', versions: ['1.13.1', '1.16.1'] }, + { + name: 'crossplane', + versions: [ + '1.15.0', + '1.15.5', + '1.16.0', + '1.16.1', + '1.16.2', + '1.17.0', + '1.17.1', + '1.17.2', + '1.17.3', + '1.18.0', + '1.18.1', + '1.18.2', + '1.18.3', + '1.19.0', + ], + }, + { + name: 'external-secrets', + versions: [ + '0.10.7', + '0.11.0', + '0.12.1', + '0.13.0', + '0.14.4', + '0.15.1', + '0.16.2', + '0.17.0', + '0.8.0', + ], + }, + { name: 'flux', versions: ['2.12.4', '2.13.0', '2.14.0', '2.15.0'] }, + { name: 'kyverno', versions: ['3.2.4'] }, + { name: 'provider-argocd', versions: ['0.8.0', '0.8.1', '0.9.0', '0.9.1'] }, + { name: 'provider-avs', versions: ['0.1.1', '0.2.0', '0.3.0'] }, + { + name: 'provider-btp', + versions: ['1.0.0', '1.0.1', '1.0.2', '1.0.3', '1.1.0', '1.1.1', '1.1.2'], + }, + { name: 'provider-btp-account', versions: ['0.7.5', '0.7.6'] }, + { name: 'provider-cloudfoundry', versions: ['2.2.3', '2.2.4', '2.2.5'] }, + { name: 'provider-cloudfoundry-opensource', versions: ['0.3.0'] }, + { name: 'provider-destinations', versions: ['1.0.3'] }, + { name: 'provider-dynatrace', versions: ['1.1.2', '1.1.3'] }, + { name: 'provider-gardener-auth', versions: ['0.0.4', '0.0.6'] }, + { name: 'provider-hana', versions: ['0.1.0'] }, + { name: 'provider-helm', versions: ['0.19.0'] }, + { + name: 'provider-hyperscaler', + versions: ['0.0.1', '0.0.2', '0.0.3', '0.0.4'], + }, + { name: 'provider-ias', versions: ['0.2.0', '0.2.1', '0.2.2', '0.2.3'] }, + { name: 'provider-kubernetes', versions: ['0.14.0', '0.14.1', '0.15.0'] }, + { name: 'provider-message-queue', versions: ['1.0.1'] }, + { name: 'provider-onboarding-experimental', versions: ['0.0.3'] }, + { name: 'provider-terraform', versions: ['0.16.0'] }, + { name: 'provider-vault', versions: ['1.0.0'] }, + { + name: 'sap-btp-service-operator', + versions: [ + '0.5.4', + '0.6.0', + '0.6.1', + '0.6.2', + '0.6.3', + '0.6.4', + '0.6.5', + '0.6.6', + '0.6.8', + ], + }, + { name: 'velero', versions: ['7.1.0'] }, + ]; + return ; +}; diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index ff249fd9..ca38ef25 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -36,10 +36,7 @@ import { EditMembers } from '../Members/EditMembers.tsx'; import { useTranslation } from 'react-i18next'; import { MetadataForm } from '../Dialogs/MetadataForm.tsx'; import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner.tsx'; -import { - ComponentItem, - ComponentsSelection, -} from '../ComponentsSelection/ComponentsSelection.tsx'; +import { ComponentsSelectionContainer } from '../ComponentsSelection/ComponentsSelectionContainer.tsx'; export type CreateDialogProps = { name: string; @@ -70,84 +67,6 @@ const wizardStepOrder: WizardStepType[] = [ 'success', ]; -const mockedItems: ComponentItem[] = [ - { name: 'cert-manager', versions: ['1.13.1', '1.16.1'] }, - { - name: 'crossplane', - versions: [ - '1.15.0', - '1.15.5', - '1.16.0', - '1.16.1', - '1.16.2', - '1.17.0', - '1.17.1', - '1.17.2', - '1.17.3', - '1.18.0', - '1.18.1', - '1.18.2', - '1.18.3', - '1.19.0', - ], - }, - { - name: 'external-secrets', - versions: [ - '0.10.7', - '0.11.0', - '0.12.1', - '0.13.0', - '0.14.4', - '0.15.1', - '0.16.2', - '0.17.0', - '0.8.0', - ], - }, - { name: 'flux', versions: ['2.12.4', '2.13.0', '2.14.0', '2.15.0'] }, - { name: 'kyverno', versions: ['3.2.4'] }, - { name: 'provider-argocd', versions: ['0.8.0', '0.8.1', '0.9.0', '0.9.1'] }, - { name: 'provider-avs', versions: ['0.1.1', '0.2.0', '0.3.0'] }, - { - name: 'provider-btp', - versions: ['1.0.0', '1.0.1', '1.0.2', '1.0.3', '1.1.0', '1.1.1', '1.1.2'], - }, - { name: 'provider-btp-account', versions: ['0.7.5', '0.7.6'] }, - { name: 'provider-cloudfoundry', versions: ['2.2.3', '2.2.4', '2.2.5'] }, - { name: 'provider-cloudfoundry-opensource', versions: ['0.3.0'] }, - { name: 'provider-destinations', versions: ['1.0.3'] }, - { name: 'provider-dynatrace', versions: ['1.1.2', '1.1.3'] }, - { name: 'provider-gardener-auth', versions: ['0.0.4', '0.0.6'] }, - { name: 'provider-hana', versions: ['0.1.0'] }, - { name: 'provider-helm', versions: ['0.19.0'] }, - { - name: 'provider-hyperscaler', - versions: ['0.0.1', '0.0.2', '0.0.3', '0.0.4'], - }, - { name: 'provider-ias', versions: ['0.2.0', '0.2.1', '0.2.2', '0.2.3'] }, - { name: 'provider-kubernetes', versions: ['0.14.0', '0.14.1', '0.15.0'] }, - { name: 'provider-message-queue', versions: ['1.0.1'] }, - { name: 'provider-onboarding-experimental', versions: ['0.0.3'] }, - { name: 'provider-terraform', versions: ['0.16.0'] }, - { name: 'provider-vault', versions: ['1.0.0'] }, - { - name: 'sap-btp-service-operator', - versions: [ - '0.5.4', - '0.6.0', - '0.6.1', - '0.6.2', - '0.6.3', - '0.6.4', - '0.6.5', - '0.6.6', - '0.6.8', - ], - }, - { name: 'velero', versions: ['7.1.0'] }, -]; - const idpPrefix = 'openmcp'; export const CreateManagedControlPlaneWizardContainer: FC< @@ -391,7 +310,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< data-step="componentSelection" disabled={isStepDisabled('componentSelection')} > - + ({ - role: member.roles[0], // this is wrong should be admin/view + role: member.roles[0], subjects: [ { kind: 'User', From 8a3ddc6d32c47bd14b40ce28f0fdc571958dae04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 20 Jun 2025 10:35:11 +0200 Subject: [PATCH 05/31] fixes --- .../ComponentsSelection.tsx | 3 +- src/utils/testVersions.spec.ts | 58 +++++++++++++++++++ src/utils/testVersions.ts | 26 +++++++++ 3 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/utils/testVersions.spec.ts create mode 100644 src/utils/testVersions.ts diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 623f7fd2..5f32f372 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -11,6 +11,7 @@ import { Button, } from '@ui5/webcomponents-react'; import styles from './ComponentsSelection.module.css'; +import { sortVersions } from '../../utils/testVersions.ts'; export interface ComponentItem { name: string; @@ -54,7 +55,7 @@ export const ComponentsSelection: React.FC = ({ > -
- {components.map((component) => ( - - + +
+ {components.map((component) => ( - - + + + + + - - ))} -
+ ))} +
+
+ + + {components + .filter((component) => component.isSelected) + .map((component) => ( + + ))} + + +
+ ); }; diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx index 40b4f87b..b1df637c 100644 --- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx +++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx @@ -1,5 +1,11 @@ -import React from 'react'; -import { ComponentsSelection } from '../ComponentsSelection/ComponentsSelection.tsx'; +import React, { useEffect, useState } from 'react'; +import { + ComponentSelectionItem, + ComponentsSelection, +} from './ComponentsSelection.tsx'; + +import IllustratedError from '../Shared/IllustratedError.tsx'; +import { sortVersions } from '../../utils/componentsVersions.ts'; export interface ComponentItem { name: string; @@ -87,5 +93,35 @@ export const ComponentsSelectionContainer: React.FC< }, { name: 'velero', versions: ['7.1.0'] }, ]; - return ; + + const [selectedComponents, setSelectedComponents] = useState< + ComponentSelectionItem[] + >([]); + useEffect(() => { + if (mockedItems.length === 0) return; + + setSelectedComponents( + mockedItems.map((item) => { + const versions = sortVersions(item.versions); + return { + name: item.name, + versions: versions, + selectedVersion: versions[0], + isSelected: false, + }; + }), + ); + }, []); + return ( + <> + {selectedComponents.length > 0 ? ( + + ) : ( + + )} + + ); }; diff --git a/src/components/Ui/Infobox/Infobox.module.css b/src/components/Ui/Infobox/Infobox.module.css index ee3c043c..d07ee287 100644 --- a/src/components/Ui/Infobox/Infobox.module.css +++ b/src/components/Ui/Infobox/Infobox.module.css @@ -4,6 +4,11 @@ margin: 1rem 0; } +.full-width { + display: block; + margin: 0; +} + .size-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; diff --git a/src/components/Ui/Infobox/Infobox.tsx b/src/components/Ui/Infobox/Infobox.tsx index 842754c5..132e6e36 100644 --- a/src/components/Ui/Infobox/Infobox.tsx +++ b/src/components/Ui/Infobox/Infobox.tsx @@ -8,6 +8,7 @@ interface LabelProps { size?: 'sm' | 'md' | 'lg'; variant?: 'normal' | 'success' | 'warning' | 'danger'; children: ReactNode; + fullWidth?: boolean; className?: string; } @@ -16,6 +17,7 @@ export const Infobox: React.FC = ({ size = 'md', // Default to medium size variant = 'normal', // Default to normal variant children, + fullWidth = false, className, }) => { const infoboxClasses = cx( @@ -28,6 +30,7 @@ export const Infobox: React.FC = ({ [styles['variant-success']]: variant === 'success', [styles['variant-warning']]: variant === 'warning', [styles['variant-danger']]: variant === 'danger', + [styles['full-width']]: fullWidth, }, className, ); From 6678290236621afaac781843c8cb08666aad0cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 10:25:18 +0200 Subject: [PATCH 08/31] refactor --- public/locales/en.json | 3 +- .../ComponentsSelection.tsx | 100 +++++++++++------- 2 files changed, 61 insertions(+), 42 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 773d7800..adb4e51c 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -281,7 +281,8 @@ "region": "Region", "success": "Success", "displayName": "Display Name", - "name": "Name" + "name": "Name", + "componentSelection":"Component Selection" }, "buttons": { "viewResource": "View resource", diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 819ac999..0f08b4d7 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -1,4 +1,4 @@ -import React, { Dispatch, SetStateAction } from 'react'; +import React, { Dispatch, SetStateAction, useState } from 'react'; import { CheckBox, Select, @@ -12,6 +12,7 @@ import { Grid, List, ListItemStandard, + Icon, } from '@ui5/webcomponents-react'; import styles from './ComponentsSelection.module.css'; @@ -33,16 +34,23 @@ export const ComponentsSelection: React.FC = ({ components, setSelectedComponents, }) => { + const [searchTerm, setSearchTerm] = useState(''); const onChangeSelection = (event: any) => { - console.log(event.detail.selectedOption.dataset.id); + console.log('event.detail.selectedOption.dataset.id'); + console.log(event.target?.id); + console.log(event); setSelectedComponents( components.map((component) => - component.name === event.detail.selectedOption.dataset.id + component.name === event.target?.id ? { ...component, isSelected: !component.isSelected } : component, ), ); }; + + const handleSearch = (event) => { + setSearchTerm(event.target.value.trim()); + }; const onChangeVersion = (event: any) => { console.log(event.detail.selectedOption.dataset.id); setSelectedComponents( @@ -59,53 +67,56 @@ export const ComponentsSelection: React.FC = ({ return (
Select components - - Please select components that you would like to have assigned to your - Managed Control Plane - + - - - + } + onInput={handleSearch} + /> +
- {components.map((component) => ( - - + {components + .filter(({ name }) => name.includes(searchTerm)) + .map((component) => ( - - + + + + + - - ))} + ))}
- + {components.filter((component) => component.isSelected).length > 0 ? ( {components .filter((component) => component.isSelected) @@ -117,7 +128,14 @@ export const ComponentsSelection: React.FC = ({ /> ))} - + ) : ( + + + Please select components that you would like to have assigned to + your Managed Control Plane + + + )}
From 53864197be1d4e051e2bbbca5692df0867026451 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 10:29:23 +0200 Subject: [PATCH 09/31] Update ComponentsSelection.tsx --- .../ComponentsSelection.tsx | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 0f08b4d7..22d3d855 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -1,4 +1,5 @@ import React, { Dispatch, SetStateAction, useState } from 'react'; + import { CheckBox, Select, @@ -13,6 +14,10 @@ import { List, ListItemStandard, Icon, + CheckBoxDomRef, + SelectDomRef, + InputDomRef, + Ui5CustomEvent, } from '@ui5/webcomponents-react'; import styles from './ComponentsSelection.module.css'; @@ -35,35 +40,42 @@ export const ComponentsSelection: React.FC = ({ setSelectedComponents, }) => { const [searchTerm, setSearchTerm] = useState(''); - const onChangeSelection = (event: any) => { - console.log('event.detail.selectedOption.dataset.id'); - console.log(event.target?.id); - console.log(event); + + const onChangeSelection = ( + event: Ui5CustomEvent, + ) => { + const id = event.target?.id; setSelectedComponents( components.map((component) => - component.name === event.target?.id + component.name === id ? { ...component, isSelected: !component.isSelected } : component, ), ); }; - const handleSearch = (event) => { + const handleSearch = (event: Ui5CustomEvent) => { setSearchTerm(event.target.value.trim()); }; - const onChangeVersion = (event: any) => { - console.log(event.detail.selectedOption.dataset.id); + + const onChangeVersion = ( + event: Ui5CustomEvent, + ) => { + const selectedOption = event.detail.selectedOption as HTMLElement; + const name = selectedOption.dataset.name; + const version = selectedOption.dataset.version; setSelectedComponents( components.map((component) => - component.name === event.detail.selectedOption.dataset.name + component.name === name ? { ...component, - selectedVersion: event.detail.selectedOption.dataset.version, + selectedVersion: version || '', } : component, ), ); }; + return (
Select components From beca37c0f4a710776caf7a520f15ebf5cf532ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 10:31:42 +0200 Subject: [PATCH 10/31] Update ComponentsSelection.tsx --- .../ComponentsSelection.tsx | 138 +++++++++--------- 1 file changed, 70 insertions(+), 68 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 22d3d855..fb12ef6b 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -1,5 +1,4 @@ -import React, { Dispatch, SetStateAction, useState } from 'react'; - +import React, { useState } from 'react'; import { CheckBox, Select, @@ -14,13 +13,12 @@ import { List, ListItemStandard, Icon, + Ui5CustomEvent, CheckBoxDomRef, SelectDomRef, InputDomRef, - Ui5CustomEvent, } from '@ui5/webcomponents-react'; import styles from './ComponentsSelection.module.css'; - import { Infobox } from '../Ui/Infobox/Infobox.tsx'; export interface ComponentSelectionItem { @@ -32,7 +30,9 @@ export interface ComponentSelectionItem { export interface ComponentsSelectionProps { components: ComponentSelectionItem[]; - setSelectedComponents: Dispatch>; + setSelectedComponents: React.Dispatch< + React.SetStateAction + >; } export const ComponentsSelection: React.FC = ({ @@ -41,12 +41,12 @@ export const ComponentsSelection: React.FC = ({ }) => { const [searchTerm, setSearchTerm] = useState(''); - const onChangeSelection = ( - event: Ui5CustomEvent, + const handleSelectionChange = ( + e: Ui5CustomEvent, ) => { - const id = event.target?.id; - setSelectedComponents( - components.map((component) => + const id = e.target?.id; + setSelectedComponents((prev) => + prev.map((component) => component.name === id ? { ...component, isSelected: !component.isSelected } : component, @@ -54,91 +54,93 @@ export const ComponentsSelection: React.FC = ({ ); }; - const handleSearch = (event: Ui5CustomEvent) => { - setSearchTerm(event.target.value.trim()); + const handleSearch = (e: Ui5CustomEvent) => { + setSearchTerm(e.target.value.trim()); }; - const onChangeVersion = ( - event: Ui5CustomEvent, + const handleVersionChange = ( + e: Ui5CustomEvent, ) => { - const selectedOption = event.detail.selectedOption as HTMLElement; + const selectedOption = e.detail.selectedOption as HTMLElement; const name = selectedOption.dataset.name; const version = selectedOption.dataset.version; - setSelectedComponents( - components.map((component) => + setSelectedComponents((prev) => + prev.map((component) => component.name === name - ? { - ...component, - selectedVersion: version || '', - } + ? { ...component, selectedVersion: version || '' } : component, ), ); }; + const filteredComponents = components.filter(({ name }) => + name.includes(searchTerm), + ); + const selectedComponents = components.filter( + (component) => component.isSelected, + ); + return (
Select components - - + } + icon={} onInput={handleSearch} /> -
- {components - .filter(({ name }) => name.includes(searchTerm)) - .map((component) => ( + {filteredComponents.map((component) => ( + + - - Documentation + - {component.versions.map((version) => ( - - ))} - - + {component.versions.map((version) => ( + + ))} + - ))} + + ))}
- {components.filter((component) => component.isSelected).length > 0 ? ( - - {components - .filter((component) => component.isSelected) - .map((component) => ( - - ))} + {selectedComponents.length > 0 ? ( + + {selectedComponents.map((component) => ( + + ))} ) : ( From ca3981cfe64dee34767a4f0ff9c3bc9c106e5191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 14:02:02 +0200 Subject: [PATCH 11/31] fixes --- public/locales/en.json | 3 ++- .../ComponentsSelection.tsx | 19 ++++++++------ .../ComponentsSelectionContainer.tsx | 14 +++++----- ...eateManagedControlPlaneWizardContainer.tsx | 12 +++++++-- .../types/crate/createManagedControlPlane.ts | 26 +++++++++++++++---- 5 files changed, 52 insertions(+), 22 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index adb4e51c..ea8b8825 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -282,7 +282,8 @@ "success": "Success", "displayName": "Display Name", "name": "Name", - "componentSelection":"Component Selection" + "componentSelection":"Component Selection", + "search": "Search" }, "buttons": { "viewResource": "View resource", diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index fb12ef6b..38866c1c 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -20,6 +20,7 @@ import { } from '@ui5/webcomponents-react'; import styles from './ComponentsSelection.module.css'; import { Infobox } from '../Ui/Infobox/Infobox.tsx'; +import { useTranslation } from 'react-i18next'; export interface ComponentSelectionItem { name: string; @@ -40,7 +41,7 @@ export const ComponentsSelection: React.FC = ({ setSelectedComponents, }) => { const [searchTerm, setSearchTerm] = useState(''); - + const { t } = useTranslation(); const handleSelectionChange = ( e: Ui5CustomEvent, ) => { @@ -83,13 +84,15 @@ export const ComponentsSelection: React.FC = ({ return (
Select components - - } - onInput={handleSearch} - /> + + + } + onInput={handleSearch} + /> +
{filteredComponents.map((component) => ( diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx index b1df637c..4a00f955 100644 --- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx +++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { ComponentSelectionItem, ComponentsSelection, @@ -12,10 +12,15 @@ export interface ComponentItem { versions: string[]; } -export interface ComponentsSelectionProps {} +export interface ComponentsSelectionProps { + selectedComponents: ComponentSelectionItem[]; + setSelectedComponents: React.Dispatch< + React.SetStateAction + >; +} export const ComponentsSelectionContainer: React.FC< ComponentsSelectionProps -> = () => { +> = ({ setSelectedComponents, selectedComponents }) => { const mockedItems: ComponentItem[] = [ { name: 'cert-manager', versions: ['1.13.1', '1.16.1'] }, { @@ -94,9 +99,6 @@ export const ComponentsSelectionContainer: React.FC< { name: 'velero', versions: ['7.1.0'] }, ]; - const [selectedComponents, setSelectedComponents] = useState< - ComponentSelectionItem[] - >([]); useEffect(() => { if (mockedItems.length === 0) return; diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index ca38ef25..d6f76ce9 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -37,6 +37,7 @@ import { useTranslation } from 'react-i18next'; import { MetadataForm } from '../Dialogs/MetadataForm.tsx'; import { IllustratedBanner } from '../Ui/IllustratedBanner/IllustratedBanner.tsx'; import { ComponentsSelectionContainer } from '../ComponentsSelection/ComponentsSelectionContainer.tsx'; +import { ComponentSelectionItem } from '../ComponentsSelection/ComponentsSelection.tsx'; export type CreateDialogProps = { name: string; @@ -77,7 +78,9 @@ export const CreateManagedControlPlaneWizardContainer: FC< const errorDialogRef = useRef(null); const [selectedStep, setSelectedStep] = useState('metadata'); - + const [selectedComponents, setSelectedComponents] = useState< + ComponentSelectionItem[] + >([]); const { register, handleSubmit, @@ -152,6 +155,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< displayName, chargingTarget, members, + selectedComponents, }, idpPrefix, ), @@ -310,7 +314,10 @@ export const CreateManagedControlPlaneWizardContainer: FC< data-step="componentSelection" disabled={isStepDisabled('componentSelection')} > - + ; export type Labels = Record; @@ -27,12 +28,14 @@ interface Spec { authorization: { roleBindings: RoleBinding[]; }; - // components: Components; + components: Components; } interface Components { - [key: string]: { - type: string; - }; + [key: string]: + | { + version: string; + } + | { type: 'GardenerDedicated' }; } export interface CreateManagedControlPlaneType { @@ -54,10 +57,20 @@ export const CreateManagedControlPlane = ( displayName?: string; chargingTarget?: string; members?: Member[]; + selectedComponents?: ComponentSelectionItem[]; }, idpPrefix?: string, ): CreateManagedControlPlaneType => { + console.log('optional'); console.log(optional); + const componentsObject: Components = + optional?.selectedComponents + ?.filter((component) => component.isSelected) + .reduce((acc, item) => { + acc[item.name] = { version: item.selectedVersion }; + return acc; + }, {} as Components) ?? {}; + return { apiVersion: 'core.openmcp.cloud/v1alpha1', kind: 'ManagedControlPlane', @@ -79,7 +92,10 @@ export const CreateManagedControlPlane = ( // name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name, // })) ?? [], // }, - // components: {test: {type: 'version'}, + components: { + ...componentsObject, + apiServer: { type: 'GardenerDedicated' }, + }, authorization: { roleBindings: optional?.members?.map((member) => ({ From 8be43e6844cf45c5b911932d2317c80999947e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 14:54:41 +0200 Subject: [PATCH 12/31] refactor --- ...eateManagedControlPlaneWizardContainer.tsx | 54 +++++++------------ .../types/crate/createManagedControlPlane.ts | 18 +++---- 2 files changed, 24 insertions(+), 48 deletions(-) diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index d6f76ce9..deaade33 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -139,27 +139,22 @@ export const CreateManagedControlPlaneWizardContainer: FC< CreateManagedControlPlaneResource(projectName, workspaceName), ); - const handleCreateManagedControlPlane = useCallback( - async ({ - name, - displayName, - chargingTarget, - members, - }: OnCreatePayload): Promise => { + const createManagedControlPlaneObject = CreateManagedControlPlane( + getValues('name'), + `${projectName}--ws-${workspaceName}`, + { + displayName: getValues('displayName'), + chargingTarget: getValues('chargingTarget'), + members: getValues('members'), + selectedComponents: selectedComponents, + }, + idpPrefix, + ); + + const handleCreateManagedControlPlane = + useCallback(async (): Promise => { try { - await trigger( - CreateManagedControlPlane( - name, - `${projectName}--ws-${workspaceName}`, - { - displayName, - chargingTarget, - members, - selectedComponents, - }, - idpPrefix, - ), - ); + await trigger(createManagedControlPlaneObject); setSelectedStep('success'); return true; } catch (e) { @@ -172,9 +167,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< } return false; } - }, - [trigger, projectName, workspaceName], - ); + }, [trigger, projectName, workspaceName]); const handleStepChange = useCallback( (e: Ui5CustomEvent) => { @@ -196,7 +189,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< setSelectedStep('summarize'); break; case 'summarize': - handleCreateManagedControlPlane(getValues()); + handleCreateManagedControlPlane(); break; case 'success': resetFormAndClose(); @@ -360,18 +353,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<
diff --git a/src/lib/api/types/crate/createManagedControlPlane.ts b/src/lib/api/types/crate/createManagedControlPlane.ts index 779636c0..41e184ef 100644 --- a/src/lib/api/types/crate/createManagedControlPlane.ts +++ b/src/lib/api/types/crate/createManagedControlPlane.ts @@ -61,8 +61,7 @@ export const CreateManagedControlPlane = ( }, idpPrefix?: string, ): CreateManagedControlPlaneType => { - console.log('optional'); - console.log(optional); + console.log('components'); const componentsObject: Components = optional?.selectedComponents ?.filter((component) => component.isSelected) @@ -86,16 +85,7 @@ export const CreateManagedControlPlane = ( }, spec: { authentication: { enableSystemIdentityProvider: true }, - // members: - // optional?.members?.map((member) => ({ - // ...member, - // name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name, - // })) ?? [], - // }, - components: { - ...componentsObject, - apiServer: { type: 'GardenerDedicated' }, - }, + authorization: { roleBindings: optional?.members?.map((member) => ({ @@ -108,6 +98,10 @@ export const CreateManagedControlPlane = ( ], })) ?? [], }, + components: { + apiServer: { type: 'GardenerDedicated' }, + ...componentsObject, + }, }, }; }; From 158178201a980848b94981ce91ba0992c07d3ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 15:00:28 +0200 Subject: [PATCH 13/31] Revert "refactor" This reverts commit 8be43e6844cf45c5b911932d2317c80999947e14. --- ...eateManagedControlPlaneWizardContainer.tsx | 54 ++++++++++++------- .../types/crate/createManagedControlPlane.ts | 18 ++++--- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index deaade33..d6f76ce9 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -139,22 +139,27 @@ export const CreateManagedControlPlaneWizardContainer: FC< CreateManagedControlPlaneResource(projectName, workspaceName), ); - const createManagedControlPlaneObject = CreateManagedControlPlane( - getValues('name'), - `${projectName}--ws-${workspaceName}`, - { - displayName: getValues('displayName'), - chargingTarget: getValues('chargingTarget'), - members: getValues('members'), - selectedComponents: selectedComponents, - }, - idpPrefix, - ); - - const handleCreateManagedControlPlane = - useCallback(async (): Promise => { + const handleCreateManagedControlPlane = useCallback( + async ({ + name, + displayName, + chargingTarget, + members, + }: OnCreatePayload): Promise => { try { - await trigger(createManagedControlPlaneObject); + await trigger( + CreateManagedControlPlane( + name, + `${projectName}--ws-${workspaceName}`, + { + displayName, + chargingTarget, + members, + selectedComponents, + }, + idpPrefix, + ), + ); setSelectedStep('success'); return true; } catch (e) { @@ -167,7 +172,9 @@ export const CreateManagedControlPlaneWizardContainer: FC< } return false; } - }, [trigger, projectName, workspaceName]); + }, + [trigger, projectName, workspaceName], + ); const handleStepChange = useCallback( (e: Ui5CustomEvent) => { @@ -189,7 +196,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< setSelectedStep('summarize'); break; case 'summarize': - handleCreateManagedControlPlane(); + handleCreateManagedControlPlane(getValues()); break; case 'success': resetFormAndClose(); @@ -353,7 +360,18 @@ export const CreateManagedControlPlaneWizardContainer: FC<
diff --git a/src/lib/api/types/crate/createManagedControlPlane.ts b/src/lib/api/types/crate/createManagedControlPlane.ts index 41e184ef..779636c0 100644 --- a/src/lib/api/types/crate/createManagedControlPlane.ts +++ b/src/lib/api/types/crate/createManagedControlPlane.ts @@ -61,7 +61,8 @@ export const CreateManagedControlPlane = ( }, idpPrefix?: string, ): CreateManagedControlPlaneType => { - console.log('components'); + console.log('optional'); + console.log(optional); const componentsObject: Components = optional?.selectedComponents ?.filter((component) => component.isSelected) @@ -85,7 +86,16 @@ export const CreateManagedControlPlane = ( }, spec: { authentication: { enableSystemIdentityProvider: true }, - + // members: + // optional?.members?.map((member) => ({ + // ...member, + // name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name, + // })) ?? [], + // }, + components: { + ...componentsObject, + apiServer: { type: 'GardenerDedicated' }, + }, authorization: { roleBindings: optional?.members?.map((member) => ({ @@ -98,10 +108,6 @@ export const CreateManagedControlPlane = ( ], })) ?? [], }, - components: { - apiServer: { type: 'GardenerDedicated' }, - ...componentsObject, - }, }, }; }; From 9688b986d0f9117a6340eff43ed626035c9366fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 15:49:31 +0200 Subject: [PATCH 14/31] Update CreateManagedControlPlaneWizardContainer.tsx --- .../Wizards/CreateManagedControlPlaneWizardContainer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index d6f76ce9..14bdafd3 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -173,7 +173,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< return false; } }, - [trigger, projectName, workspaceName], + [trigger, projectName, workspaceName, selectedComponents], ); const handleStepChange = useCallback( @@ -370,6 +370,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< members: getValues('members'), selectedComponents: selectedComponents, }, + idpPrefix, ), )} filename={`mcp_${projectName}--ws-${workspaceName}`} From fd53f32851a6240853e39a2f3c5ddc853c958a2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 16:34:45 +0200 Subject: [PATCH 15/31] refactor --- ...eateManagedControlPlaneWizardContainer.tsx | 2 +- .../api/types/crate/listManagedComponents.ts | 55 +++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/lib/api/types/crate/listManagedComponents.ts diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index 14bdafd3..293db9bf 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -353,7 +353,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< ))} diff --git a/src/lib/api/types/crate/listManagedComponents.ts b/src/lib/api/types/crate/listManagedComponents.ts new file mode 100644 index 00000000..1f715ab0 --- /dev/null +++ b/src/lib/api/types/crate/listManagedComponents.ts @@ -0,0 +1,55 @@ +import { Resource } from '../resource'; + +interface ManagedComponentList { + apiVersion: string; + kind: string; + items: ManagedComponent[]; + metadata: ListMetadata; +} + +interface ListMetadata { + continue: string; + resourceVersion: string; +} + +interface ManagedComponent { + apiVersion: string; + kind: string; + metadata: ManagedComponentMetadata; + spec: Record; + status: ManagedComponentStatus; +} + +interface ManagedComponentMetadata { + creationTimestamp: string; + generation: number; + managedFields: ManagedField[]; + name: string; + resourceVersion: string; + uid: string; +} + +interface ManagedField { + apiVersion: string; + fieldsType: string; + fieldsV1: FieldsV1; + manager: string; + operation: string; + time: string; + subresource?: string; +} + +interface FieldsV1 { + [key: string]: never; +} + +interface ManagedComponentStatus { + versions: string[]; +} + +export const ListManagedComponents = (): Resource => { + return { + path: `/apis/core.openmcp.cloud/v1alpha1/managedcomponents`, + jq: undefined, + }; +}; From ce59fc58d3f1118980ceaf6d8144f686e88db2cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 16:34:49 +0200 Subject: [PATCH 16/31] Update ComponentsSelectionContainer.tsx --- .../ComponentsSelectionContainer.tsx | 112 +++++------------- 1 file changed, 27 insertions(+), 85 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx index 4a00f955..4affb402 100644 --- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx +++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { ComponentSelectionItem, ComponentsSelection, @@ -7,6 +7,10 @@ import { import IllustratedError from '../Shared/IllustratedError.tsx'; import { sortVersions } from '../../utils/componentsVersions.ts'; +import { ListManagedComponents } from '../../lib/api/types/crate/listManagedComponents.ts'; +import useApiResource from '../../lib/api/useApiResource.ts'; +import Loading from '../Shared/Loading.tsx'; + export interface ComponentItem { name: string; versions: string[]; @@ -21,99 +25,37 @@ export interface ComponentsSelectionProps { export const ComponentsSelectionContainer: React.FC< ComponentsSelectionProps > = ({ setSelectedComponents, selectedComponents }) => { - const mockedItems: ComponentItem[] = [ - { name: 'cert-manager', versions: ['1.13.1', '1.16.1'] }, - { - name: 'crossplane', - versions: [ - '1.15.0', - '1.15.5', - '1.16.0', - '1.16.1', - '1.16.2', - '1.17.0', - '1.17.1', - '1.17.2', - '1.17.3', - '1.18.0', - '1.18.1', - '1.18.2', - '1.18.3', - '1.19.0', - ], - }, - { - name: 'external-secrets', - versions: [ - '0.10.7', - '0.11.0', - '0.12.1', - '0.13.0', - '0.14.4', - '0.15.1', - '0.16.2', - '0.17.0', - '0.8.0', - ], - }, - { name: 'flux', versions: ['2.12.4', '2.13.0', '2.14.0', '2.15.0'] }, - { name: 'kyverno', versions: ['3.2.4'] }, - { name: 'provider-argocd', versions: ['0.8.0', '0.8.1', '0.9.0', '0.9.1'] }, - { name: 'provider-avs', versions: ['0.1.1', '0.2.0', '0.3.0'] }, - { - name: 'provider-btp', - versions: ['1.0.0', '1.0.1', '1.0.2', '1.0.3', '1.1.0', '1.1.1', '1.1.2'], - }, - { name: 'provider-btp-account', versions: ['0.7.5', '0.7.6'] }, - { name: 'provider-cloudfoundry', versions: ['2.2.3', '2.2.4', '2.2.5'] }, - { name: 'provider-cloudfoundry-opensource', versions: ['0.3.0'] }, - { name: 'provider-destinations', versions: ['1.0.3'] }, - { name: 'provider-dynatrace', versions: ['1.1.2', '1.1.3'] }, - { name: 'provider-gardener-auth', versions: ['0.0.4', '0.0.6'] }, - { name: 'provider-hana', versions: ['0.1.0'] }, - { name: 'provider-helm', versions: ['0.19.0'] }, - { - name: 'provider-hyperscaler', - versions: ['0.0.1', '0.0.2', '0.0.3', '0.0.4'], - }, - { name: 'provider-ias', versions: ['0.2.0', '0.2.1', '0.2.2', '0.2.3'] }, - { name: 'provider-kubernetes', versions: ['0.14.0', '0.14.1', '0.15.0'] }, - { name: 'provider-message-queue', versions: ['1.0.1'] }, - { name: 'provider-onboarding-experimental', versions: ['0.0.3'] }, - { name: 'provider-terraform', versions: ['0.16.0'] }, - { name: 'provider-vault', versions: ['1.0.0'] }, - { - name: 'sap-btp-service-operator', - versions: [ - '0.5.4', - '0.6.0', - '0.6.1', - '0.6.2', - '0.6.3', - '0.6.4', - '0.6.5', - '0.6.6', - '0.6.8', - ], - }, - { name: 'velero', versions: ['7.1.0'] }, - ]; - + const { + data: allManagedComponents, + error, + isLoading, + } = useApiResource(ListManagedComponents()); + const [isReady, setIsReady] = useState(false); useEffect(() => { - if (mockedItems.length === 0) return; + if ( + allManagedComponents?.items.length === 0 || + !allManagedComponents?.items || + isReady + ) + return; setSelectedComponents( - mockedItems.map((item) => { - const versions = sortVersions(item.versions); + allManagedComponents?.items?.map((item) => { + const versions = sortVersions(item.status.versions); return { - name: item.name, + name: item.metadata.name, versions: versions, selectedVersion: versions[0], isSelected: false, }; - }), + }) ?? [], ); - }, []); + setIsReady(true); + }, [allManagedComponents, isReady, setSelectedComponents]); + if (isLoading) { + return ; + } + if (error) return ; return ( <> {selectedComponents.length > 0 ? ( From dbf592d2da04dcf30bac82f36ef5a893d5e9c109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Mon, 23 Jun 2025 17:37:41 +0200 Subject: [PATCH 17/31] Update CreateManagedControlPlaneWizardContainer.tsx --- .../Wizards/CreateManagedControlPlaneWizardContainer.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index 293db9bf..b9e695e2 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -227,12 +227,19 @@ export const CreateManagedControlPlaneWizardContainer: FC< return false; case 'members': return selectedStep === 'metadata' || !isValid; + case 'componentSelection': + return ( + selectedStep === 'metadata' || + selectedStep === 'members' || + !isValid + ); case 'summarize': return ( selectedStep === 'metadata' || selectedStep === 'members' || !isValid ); + case 'success': return selectedStep !== 'success'; default: From fe310882d6805d96beb10143b8d60bf76a232477 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 27 Jun 2025 09:10:15 +0200 Subject: [PATCH 18/31] fix --- public/locales/en.json | 3 ++- .../CreateManagedControlPlaneWizardContainer.tsx | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/public/locales/en.json b/public/locales/en.json index aeced91f..b90a4d82 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -283,7 +283,8 @@ "displayName": "Display Name", "name": "Name", "componentSelection":"Component Selection", - "search": "Search" + "search": "Search", + "components": "Components" }, "buttons": { "viewResource": "View resource", diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index b9e695e2..611b2f9f 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -364,6 +364,18 @@ export const CreateManagedControlPlaneWizardContainer: FC< /> ))} +
+ + {selectedComponents + .filter(({ isSelected }) => isSelected) + .map((component) => ( + + ))} +
Date: Fri, 27 Jun 2025 10:05:29 +0200 Subject: [PATCH 19/31] fixes --- public/locales/en.json | 7 ++++- .../ComponentsSelection.tsx | 31 +++++++++---------- .../List/ControlPlaneListAllWorkspaces.tsx | 2 +- src/components/Members/MemberRoleSelect.tsx | 7 +++-- 4 files changed, 27 insertions(+), 20 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index b90a4d82..e5aa328c 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -272,6 +272,7 @@ "atLeastOneUser": "You need to have at least one member assigned." }, "common": { + "documentation": "Documentation", "close": "Close", "cannotLoadData": "Cannot load data", "metadata": "Metadata", @@ -303,5 +304,9 @@ "dialogTitle": "Create Managed Control Plane", "titleText": "Managed Control Plane Created Successfully!", "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window." - } + }, "componentsSelection": { + "selectComponents": "Select Components", + "selectedComponents": "Selected Components", +"pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane." +} } diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 38866c1c..3fe0fb82 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -83,16 +83,16 @@ export const ComponentsSelection: React.FC = ({ return (
- Select components - - - } - onInput={handleSearch} - /> - + {t('componentsSelection.selectComponents')} + + } + onInput={handleSearch} + /> +
{filteredComponents.map((component) => ( @@ -114,7 +114,9 @@ export const ComponentsSelection: React.FC = ({ justifyContent="SpaceBetween" alignItems="Baseline" > - + Date: Fri, 27 Jun 2025 10:47:27 +0200 Subject: [PATCH 20/31] fixes --- public/locales/en.json | 13 +++++++------ .../ComponentsSelection/ComponentsSelection.tsx | 1 - .../CreateManagedControlPlaneWizardContainer.tsx | 3 ++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index e5aa328c..1000af79 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -283,7 +283,7 @@ "success": "Success", "displayName": "Display Name", "name": "Name", - "componentSelection":"Component Selection", + "componentSelection": "Component Selection", "search": "Search", "components": "Components" }, @@ -304,9 +304,10 @@ "dialogTitle": "Create Managed Control Plane", "titleText": "Managed Control Plane Created Successfully!", "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window." - }, "componentsSelection": { - "selectComponents": "Select Components", - "selectedComponents": "Selected Components", -"pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane." -} + }, + "componentsSelection": { + "selectComponents": "Select Components", + "selectedComponents": "Selected Components", + "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane." + } } diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 3fe0fb82..ffe88d77 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -6,7 +6,6 @@ import { FlexBox, Title, Text, - Label, Input, Button, Grid, diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index 611b2f9f..870b8116 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -17,6 +17,7 @@ import { Grid, List, ListItemStandard, + Title, Ui5CustomEvent, Wizard, WizardDomRef, @@ -333,7 +334,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< selected={selectedStep === 'summarize'} data-step="summarize" > -

{t('common.summarize')}

+ {t('common.summarize')}
From 8e28d80e19e1809c520f4fbdf7627cc09fdfe9eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 27 Jun 2025 10:55:50 +0200 Subject: [PATCH 21/31] fix --- .../ComponentsSelection.tsx | 2 +- .../types/crate/createManagedControlPlane.ts | 18 ++++-------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index ffe88d77..0d6d2185 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -147,7 +147,7 @@ export const ComponentsSelection: React.FC = ({ ))} ) : ( - + {t('componentsSelection.pleaseSelectComponents')} )} diff --git a/src/lib/api/types/crate/createManagedControlPlane.ts b/src/lib/api/types/crate/createManagedControlPlane.ts index 779636c0..2f4e12a7 100644 --- a/src/lib/api/types/crate/createManagedControlPlane.ts +++ b/src/lib/api/types/crate/createManagedControlPlane.ts @@ -10,18 +10,14 @@ export type Annotations = Record; export type Labels = Record; interface RoleBinding { - role: string; // The name of the role being bound - subjects: Subject[]; // A list of subjects the role is bound to + role: string; + subjects: Subject[]; } interface Subject { - kind: 'User' | 'Group' | 'ServiceAccount'; // The type of subject - name: string; // The name of the subject + kind: 'User' | 'Group' | 'ServiceAccount'; + name: string; } interface Spec { - // desiredRegion: { - // name: string; - // direction: string; - // }; authentication: { enableSystemIdentityProvider: boolean; }; @@ -86,12 +82,6 @@ export const CreateManagedControlPlane = ( }, spec: { authentication: { enableSystemIdentityProvider: true }, - // members: - // optional?.members?.map((member) => ({ - // ...member, - // name: idpPrefix ? `${idpPrefix}:${member.name}` : member.name, - // })) ?? [], - // }, components: { ...componentsObject, apiServer: { type: 'GardenerDedicated' }, From 613e729e3068a3acab196861c2667216f9b4a93b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 27 Jun 2025 12:48:24 +0200 Subject: [PATCH 22/31] Update CreateManagedControlPlaneWizardContainer.tsx --- .../Wizards/CreateManagedControlPlaneWizardContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx index 870b8116..027e9bab 100644 --- a/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx +++ b/src/components/Wizards/CreateManagedControlPlaneWizardContainer.tsx @@ -257,7 +257,7 @@ export const CreateManagedControlPlaneWizardContainer: FC< } }, [selectedStep]); - return ( + return isOpen ? ( - ); + ) : null; }; From 01339c41fd7d9ae35c4e0e72c1691d39b93ac15f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 27 Jun 2025 13:10:27 +0200 Subject: [PATCH 23/31] Update ComponentsSelection.module.css --- .../ComponentsSelection/ComponentsSelection.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css index 220d0fc2..f8b7ecbf 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.module.css +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -1,5 +1,5 @@ .row { padding: 1rem; - background: #f7f7f7; - border-bottom: 1px solid #d5d5d5; + background: var(--sapBackgroundColor); + border-bottom: 1px solid var(--sapList_BorderColor); } From ab73d54c72b00c42b3f1b22e02b8e24127c1fba4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Goral?= Date: Fri, 27 Jun 2025 13:19:56 +0200 Subject: [PATCH 24/31] Update ComponentsSelection.tsx --- .../ComponentsSelection/ComponentsSelection.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 0d6d2185..cbdd2563 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -26,6 +26,7 @@ export interface ComponentSelectionItem { versions: string[]; isSelected: boolean; selectedVersion: string; + documentationUrl: string; } export interface ComponentsSelectionProps { @@ -113,9 +114,12 @@ export const ComponentsSelection: React.FC = ({ justifyContent="SpaceBetween" alignItems="Baseline" > - + {/*This button will be implemented later*/} + {component.documentationUrl && ( + + )}