From 37793d844080a89b791f13a7c041eaf3eb3481a8 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 10:57:33 +0200
Subject: [PATCH 1/9] Templates loaded from file onboardingAPI TBD

---
 public/locales/en.json                        |   3 +
 .../ComponentsSelection.tsx                   |  31 ++-
 .../ComponentsSelectionContainer.tsx          |  70 +++++-
 .../ControlPlanes/ControlPlanesListMenu.tsx   |  27 ++-
 .../ControlPlaneListWorkspaceGridTile.tsx     |  23 +-
 src/components/Dialogs/MetadataForm.tsx       | 158 +++++++++++--
 ...eateManagedControlPlaneWizardContainer.tsx | 213 ++++++++++++++++--
 .../api/types/templates/exampleTemplate.ts    | 106 +++++++++
 src/lib/api/types/templates/mcpTemplate.ts    |  95 ++++++++
 .../buildNameWithPrefixesAndSufixes.spec.ts   |  50 ++++
 src/utils/buildNameWithPrefixesAndSufixes.ts  |  25 ++
 src/utils/stripIdpPrefix.spec.ts              |  36 +++
 src/utils/stripIdpPrefix.ts                   |  11 +
 13 files changed, 808 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/api/types/templates/exampleTemplate.ts
 create mode 100644 src/lib/api/types/templates/mcpTemplate.ts
 create mode 100644 src/utils/buildNameWithPrefixesAndSufixes.spec.ts
 create mode 100644 src/utils/buildNameWithPrefixesAndSufixes.ts
 create mode 100644 src/utils/stripIdpPrefix.spec.ts
 create mode 100644 src/utils/stripIdpPrefix.ts

diff --git a/public/locales/en.json b/public/locales/en.json
index ccea36bc..0559465d 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -87,6 +87,9 @@
     "menuDownload": "Download",
     "menuCopy": "Copy to clipboard"
   },
+  "ComponentsSelection": {
+    "chooseVersion": "Please select version"
+  },
   "IllustratedBanner": {
     "titleMessage": "No Managed Control Planes found",
     "subtitleMessage": "Get started by creating your first Managed Control Plane.",
diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx
index 602602e3..6694aec2 100644
--- a/src/components/ComponentsSelection/ComponentsSelection.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelection.tsx
@@ -22,13 +22,19 @@ import { Infobox } from '../Ui/Infobox/Infobox.tsx';
 import { useTranslation } from 'react-i18next';
 import { ComponentsListItem } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { getSelectedComponents } from './ComponentsSelectionContainer.tsx';
+import IllustratedError from '../Shared/IllustratedError.tsx';
 
 export interface ComponentsSelectionProps {
   componentsList: ComponentsListItem[];
   setComponentsList: (components: ComponentsListItem[]) => void;
+  templateDefaultsError?: string;
 }
 
-export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ componentsList, setComponentsList }) => {
+export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
+  componentsList,
+  setComponentsList,
+  templateDefaultsError,
+}) => {
   const [searchTerm, setSearchTerm] = useState('');
   const { t } = useTranslation();
 
@@ -133,7 +139,23 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ compon
                       disabled={!component.isSelected || providerDisabled}
                       aria-label={`${component.name} version`}
                       onChange={handleVersionChange}
+                      valueState={component.isSelected && !component.selectedVersion ? 'Negative' : 'None'}
+                      valueStateMessage={
+                        component.isSelected && !component.selectedVersion ? (
+                          <span>{t('ComponentsSelection.chooseVersion')}</span>
+                        ) : undefined
+                      }
                     >
+                      {!component.selectedVersion && (
+                        <Option
+                          key="__placeholder"
+                          data-version=""
+                          data-name={component.name}
+                          selected
+                        >
+                          {t('ComponentsSelection.chooseVersion')}
+                        </Option>
+                      )}
                       {component.versions.map((version) => (
                         <Option
                           key={version}
@@ -155,7 +177,14 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({ compon
             </Infobox>
           )}
         </div>
+
         <div data-layout-span="XL4 L4 M4 S4">
+          {templateDefaultsError ? (
+            <div style={{ marginBottom: 8 }}>
+              <IllustratedError title={templateDefaultsError} compact />
+            </div>
+          ) : null}
+
           {selectedComponents.length > 0 ? (
             <List headerText={t('componentsSelection.selectedComponents')}>
               {selectedComponents.map((component) => (
diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
index a836b5e1..a3ffed3c 100644
--- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
 
 import IllustratedError from '../Shared/IllustratedError.tsx';
@@ -9,10 +9,12 @@ import { useApiResource } from '../../lib/api/useApiResource.ts';
 import Loading from '../Shared/Loading.tsx';
 import { ComponentsListItem, removeComponents } from '../../lib/api/types/crate/createManagedControlPlane.ts';
 import { useTranslation } from 'react-i18next';
+import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTemplate.ts';
 
 export interface ComponentsSelectionProps {
   componentsList: ComponentsListItem[];
   setComponentsList: (components: ComponentsListItem[]) => void;
+  managedControlPlaneTemplate?: ManagedControlPlaneTemplate;
 }
 
 /**
@@ -33,10 +35,13 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
   setComponentsList,
   componentsList,
+  managedControlPlaneTemplate,
 }) => {
   const { data: availableManagedComponentsListData, error, isLoading } = useApiResource(ListManagedComponents());
   const { t } = useTranslation();
   const initialized = useRef(false);
+  const [templateDefaultsError, setTemplateDefaultsError] = useState<string | null>(null);
+  const defaultComponents = managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [];
 
   useEffect(() => {
     if (
@@ -50,11 +55,16 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     const newComponentsList = availableManagedComponentsListData.items
       .map((item) => {
         const versions = sortVersions(item.status.versions);
+        const template = defaultComponents.find((dc) => dc.name === item.metadata.name);
+        const templateVersion = template?.version;
+        const selectedVersion = template
+          ? (templateVersion && versions.includes(templateVersion) ? templateVersion : '')
+          : (versions[0] ?? '');
         return {
           name: item.metadata.name,
           versions,
-          selectedVersion: versions[0] ?? '',
-          isSelected: false,
+          selectedVersion,
+          isSelected: !!template,
           documentationUrl: '',
         };
       })
@@ -62,7 +72,51 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
 
     setComponentsList(newComponentsList);
     initialized.current = true;
-  }, [availableManagedComponentsListData, setComponentsList]);
+  }, [availableManagedComponentsListData, setComponentsList, defaultComponents]);
+
+  useEffect(() => {
+    const items = availableManagedComponentsListData?.items ?? [];
+    if (items.length === 0 || !defaultComponents.length) {
+      setTemplateDefaultsError(null);
+      return;
+    }
+
+    const errs: string[] = [];
+    defaultComponents.forEach((dc: any) => {
+      if (!dc?.name) return;
+      const item = items.find((it) => it.metadata.name === dc.name);
+      if (!item) {
+        errs.push(`Component "${dc.name}" from template is not available.`);
+        return;
+      }
+      const versions: string[] = Array.isArray(item.status?.versions) ? item.status.versions : [];
+      if (dc.version && !versions.includes(dc.version)) {
+        errs.push(`Component "${dc.name}" version "${dc.version}" from template is not available.`);
+      }
+    });
+
+    setTemplateDefaultsError(errs.length ? errs.join('\n') : null);
+  }, [availableManagedComponentsListData, defaultComponents]);
+
+  useEffect(() => {
+    if (!initialized.current) return;
+    if (!defaultComponents?.length) return;
+    if (!componentsList?.length) return;
+
+    const anySelected = componentsList.some((c) => c.isSelected);
+    if (anySelected) return;
+
+    const updated = componentsList.map((c) => {
+      const template = defaultComponents.find((dc) => dc.name === c.name);
+      if (!template) return c;
+      const templateVersion = template.version;
+      const selectedVersion =
+        templateVersion && Array.isArray(c.versions) && c.versions.includes(templateVersion) ? templateVersion : '';
+      return { ...c, isSelected: true, selectedVersion };
+    });
+
+    setComponentsList(updated);
+  }, [defaultComponents, componentsList, setComponentsList]);
 
   if (isLoading) {
     return <Loading />;
@@ -77,5 +131,11 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     return <IllustratedError title={t('componentsSelection.cannotLoad')} compact={true} />;
   }
 
-  return <ComponentsSelection componentsList={componentsList} setComponentsList={setComponentsList} />;
+  return (
+    <ComponentsSelection
+      componentsList={componentsList}
+      setComponentsList={setComponentsList}
+      templateDefaultsError={templateDefaultsError || undefined}
+    />
+  );
 };
diff --git a/src/components/ControlPlanes/ControlPlanesListMenu.tsx b/src/components/ControlPlanes/ControlPlanesListMenu.tsx
index a9bb438b..da16022b 100644
--- a/src/components/ControlPlanes/ControlPlanesListMenu.tsx
+++ b/src/components/ControlPlanes/ControlPlanesListMenu.tsx
@@ -5,21 +5,27 @@ import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/accept';
 
 import { useTranslation } from 'react-i18next';
+import { ManagedControlPlaneTemplate } from '../../lib/api/types/templates/mcpTemplate.ts';
 
 type ControlPlanesListMenuProps = {
   setDialogDeleteWsIsOpen: Dispatch<SetStateAction<boolean>>;
   setIsCreateManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+  setInitialTemplateName: Dispatch<SetStateAction<string | undefined>>;
 };
 
 export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
   setDialogDeleteWsIsOpen,
   setIsCreateManagedControlPlaneWizardOpen,
+  setInitialTemplateName, 
 }) => {
   const popoverRef = useRef<MenuDomRef>(null);
   const [open, setOpen] = useState(false);
 
   const { t } = useTranslation();
 
+  // Here we will pass template list from OnboardingAPI
+  const allTemplates: ManagedControlPlaneTemplate[] = [];
+
   const handleOpenerClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
     if (popoverRef.current && e.currentTarget) {
       popoverRef.current.opener = e.currentTarget as HTMLElement;
@@ -34,14 +40,20 @@ export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
         ref={popoverRef}
         open={open}
         onItemClick={(event) => {
-          const action = (event.detail.item as HTMLElement).dataset.action;
+          const item = event.detail.item as HTMLElement;
+          const action = item.dataset.action;
           if (action === 'newManagedControlPlane') {
+            setInitialTemplateName(undefined);
+            setIsCreateManagedControlPlaneWizardOpen(true);
+          }
+          if (action === 'newManagedControlPlaneWithTemplate') {
+            const tplName = item.dataset.templateName || undefined;
+            setInitialTemplateName(tplName);
             setIsCreateManagedControlPlaneWizardOpen(true);
           }
           if (action === 'deleteWorkspace') {
             setDialogDeleteWsIsOpen(true);
           }
-
           setOpen(false);
         }}
       >
@@ -51,6 +63,17 @@ export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
           data-action="newManagedControlPlane"
           icon="add"
         />
+        {allTemplates.map((tpl) => (
+          <MenuItem
+            key={`tpl-${tpl.metadata.name}`}
+            text={tpl.metadata.name}
+            title={tpl.metadata.descriptionText || ''}
+            data-action="newManagedControlPlaneWithTemplate"
+            data-template-name={tpl.metadata.name}
+            icon="document-text"
+          />
+        ))}
+
         <MenuItem
           key={'delete'}
           text={t('ControlPlaneListToolbar.deleteWorkspace')}
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index c7469c7f..bb9a8703 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -5,7 +5,7 @@ import '@ui5/webcomponents-icons/dist/delete';
 import { CopyButton } from '../../Shared/CopyButton.tsx';
 import { ControlPlaneCard } from '../ControlPlaneCard/ControlPlaneCard.tsx';
 import { ListWorkspacesType, isWorkspaceReady } from '../../../lib/api/types/crate/listWorkspaces.ts';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { MembersAvatarView } from './MembersAvatarView.tsx';
 import { DeleteWorkspaceResource, DeleteWorkspaceType } from '../../../lib/api/types/crate/deleteWorkspace.ts';
 import { useApiResourceMutation, useApiResource } from '../../../lib/api/useApiResource.ts';
@@ -32,6 +32,7 @@ interface Props {
 
 export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Props) {
   const [isCreateManagedControlPlaneWizardOpen, setIsCreateManagedControlPlaneWizardOpen] = useState(false);
+  const [initialTemplateName, setInitialTemplateName] = useState<string | undefined>(undefined);
   const workspaceName = workspace.metadata.name;
   const workspaceDisplayName = workspace.metadata.annotations?.[DISPLAY_NAME_ANNOTATION] || '';
   const showDisplayName = workspaceDisplayName.length > 0;
@@ -68,6 +69,22 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
     return null;
   }
 
+  const uniqueMembers = useMemo(() => {
+    const seenKeys = new Set<string>();
+    const fallbackNamespace = workspace.status?.namespace ?? '';
+
+    return (workspace.spec.members ?? []).filter((member: any) => {
+      const memberNamespace = member?.namespace ?? fallbackNamespace;
+      const memberName = String(member?.name ?? '').trim().toLowerCase();
+      if (!memberName) return false;
+
+      const dedupeKey = `${memberNamespace}::${memberName}`;
+      if (seenKeys.has(dedupeKey)) return false;
+      seenKeys.add(dedupeKey);
+      return true;
+    });
+  }, [workspace.spec.members, workspace.status?.namespace]);
+
   return (
     <>
       <ObjectPageSection
@@ -98,7 +115,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
 
               <CopyButton text={workspace.status?.namespace || '-'} style={{ justifyContent: 'start' }} />
 
-              <MembersAvatarView members={workspace.spec.members} project={projectName} workspace={workspaceName} />
+              <MembersAvatarView members={uniqueMembers} project={projectName} workspace={workspaceName} />
               <FlexBox justifyContent={'SpaceBetween'} gap={10}>
                 <YamlViewButtonWithLoader
                   workspaceName={workspace.metadata.namespace}
@@ -108,6 +125,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
                 <ControlPlanesListMenu
                   setDialogDeleteWsIsOpen={setDialogDeleteWsIsOpen}
                   setIsCreateManagedControlPlaneWizardOpen={setIsCreateManagedControlPlaneWizardOpen}
+                  setInitialTemplateName={setInitialTemplateName}
                 />
               </FlexBox>
             </div>
@@ -168,6 +186,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
         setIsOpen={setIsCreateManagedControlPlaneWizardOpen}
         projectName={projectNamespace}
         workspaceName={workspaceName}
+        initialTemplateName={initialTemplateName}
       />
     </>
   );
diff --git a/src/components/Dialogs/MetadataForm.tsx b/src/components/Dialogs/MetadataForm.tsx
index f8b051ee..43ad6f8d 100644
--- a/src/components/Dialogs/MetadataForm.tsx
+++ b/src/components/Dialogs/MetadataForm.tsx
@@ -12,6 +12,11 @@ export interface MetadataFormProps {
   sideFormContent?: React.ReactNode;
   requireChargingTarget?: boolean;
   watch: UseFormWatch<CreateDialogProps>;
+  disableChargingFields?: boolean;
+  namePrefix?: string;
+  displayNamePrefix?: string;
+  nameSuffix?: string;
+  displayNameSuffix?: string;
 }
 
 interface SelectOption {
@@ -26,42 +31,165 @@ export function MetadataForm({
   setValue,
   sideFormContent,
   requireChargingTarget = false,
+  disableChargingFields = false,
+  namePrefix = '',
+  displayNamePrefix = '',
+  nameSuffix: propNameSuffix = '',
+  displayNameSuffix: propDisplayNameSuffix = '',
 }: MetadataFormProps) {
   const { t } = useTranslation();
+
   const handleChargingTargetTypeChange = (event: Ui5CustomEvent<SelectDomRef, { selectedOption: HTMLElement }>) => {
     const selectedOption = event.detail.selectedOption as HTMLElement;
-    setValue('chargingTargetType', selectedOption.dataset.value);
-    if (selectedOption.dataset.value === '') {
-      setValue('chargingTarget', '');
+    const value = selectedOption.dataset.value ?? '';
+    setValue('chargingTargetType', value, { shouldValidate: true, shouldDirty: true });
+    if (value === '') {
+      setValue('chargingTarget', '', { shouldValidate: true, shouldDirty: true });
     }
   };
+
   const chargingTypes: SelectOption[] = [
     ...(!requireChargingTarget ? [{ label: t('common.notSelected'), value: '' }] : []),
     { label: t('common.btp'), value: 'btp' },
   ];
+
+  const currentChargingTargetType = (watch?.('chargingTargetType') ?? '').toLowerCase();
+
+  const currentName = watch?.('name') ?? '';
+  const currentDisplayName = watch?.('displayName') ?? '';
+
+  // Resolve and normalize affixes once (trim + fallback to '')
+  const resolvedNamePrefix = (namePrefix || '').trim();
+  const resolvedDisplayNamePrefix = (displayNamePrefix || '').trim();
+  const resolvedNameSuffix = (propNameSuffix || '').trim();
+  const resolvedDisplayNameSuffix = (propDisplayNameSuffix || '').trim();
+
+  const computeCore = (full: string, prefix: string, suffix: string) => {
+    let v = full ?? '';
+    if (prefix && v.startsWith(prefix)) v = v.slice(prefix.length);
+    if (suffix && v.endsWith(suffix)) v = v.slice(0, v.length - suffix.length);
+    return v;
+  };
+
+  const nameCore = computeCore(currentName, resolvedNamePrefix, resolvedNameSuffix);
+  const displayNameCore = computeCore(currentDisplayName, resolvedDisplayNamePrefix, resolvedDisplayNameSuffix);
+
+  const onNameCoreInput = (e: any) => {
+    const middle =
+      (e?.target && typeof e.target.value === 'string' ? e.target.value : undefined) ??
+      (e?.detail && typeof e.detail.value === 'string' ? e.detail.value : '') ??
+      '';
+    setValue('name', `${resolvedNamePrefix}${middle}${resolvedNameSuffix}`, { shouldValidate: true, shouldDirty: true });
+  };
+
+  const onDisplayNameCoreInput = (e: any) => {
+    const middle =
+      (e?.target && typeof e.target.value === 'string' ? e.target.value : undefined) ??
+      (e?.detail && typeof e.detail.value === 'string' ? e.detail.value : '') ??
+      '';
+    setValue('displayName', `${resolvedDisplayNamePrefix}${middle}${resolvedDisplayNameSuffix}`, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
+  };
+
+  const affixWidth = (val?: string) => (val && val.length ? `${val.length + 1}ch` : 'auto');
+
   return (
     <Form>
       <FormGroup headerText={t('CreateProjectWorkspaceDialog.metadataHeader')} columnSpan={12}>
         <Label for="name" required>
           {t('CreateProjectWorkspaceDialog.nameLabel')}
         </Label>
-        <Input
-          className={styles.input}
-          id="name"
-          {...register('name')}
-          valueState={errors.name ? 'Negative' : 'None'}
-          valueStateMessage={<span>{errors.name?.message}</span>}
-          required
-        />
+
+        {(resolvedNamePrefix || resolvedNameSuffix) ? (
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            {resolvedNamePrefix ? (
+              <Input
+                className={styles.input}
+                id="namePrefix"
+                value={resolvedNamePrefix}
+                disabled
+                style={{ width: affixWidth(resolvedNamePrefix) }}
+              />
+            ) : null}
+            {/* hidden input to keep RHF registration and validation for 'name' */}
+            <input type="hidden" {...register('name')} value={currentName} readOnly />
+            <Input
+              className={styles.input}
+              id="name"
+              value={nameCore}
+              onInput={onNameCoreInput}
+              valueState={errors.name ? 'Negative' : 'None'}
+              valueStateMessage={<span>{errors.name?.message}</span>}
+              required
+            />
+            {resolvedNameSuffix ? (
+              <Input
+                className={styles.input}
+                id="nameSuffix"
+                value={resolvedNameSuffix}
+                disabled
+                style={{ width: affixWidth(resolvedNameSuffix) }}
+              />
+            ) : null}
+          </div>
+        ) : (
+          <Input
+            className={styles.input}
+            id="name"
+            {...register('name')}
+            valueState={errors.name ? 'Negative' : 'None'}
+            valueStateMessage={<span>{errors.name?.message}</span>}
+            required
+          />
+        )}
+
         <Label for={'displayName'}>{t('CreateProjectWorkspaceDialog.displayNameLabel')}</Label>
-        <Input id="displayName" {...register('displayName')} className={styles.input} />
+
+        {(resolvedDisplayNamePrefix || resolvedDisplayNameSuffix) ? (
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            {resolvedDisplayNamePrefix ? (
+              <Input
+                className={styles.input}
+                id="displayNamePrefix"
+                value={resolvedDisplayNamePrefix}
+                disabled
+                style={{ width: affixWidth(resolvedDisplayNamePrefix) }}
+              />
+            ) : null}
+            <input type="hidden" {...register('displayName')} value={currentDisplayName} readOnly />
+            <Input
+              className={styles.input}
+              id="displayName"
+              value={displayNameCore}
+              onInput={onDisplayNameCoreInput}
+            />
+            {resolvedDisplayNameSuffix ? (
+              <Input
+                className={styles.input}
+                id="displayNameSuffix"
+                value={resolvedDisplayNameSuffix}
+                disabled
+                style={{ width: affixWidth(resolvedDisplayNameSuffix) }}
+              />
+            ) : null}
+          </div>
+        ) : (
+          <Input id="displayName" {...register('displayName')} className={styles.input} />
+        )}
 
         <div>
           <Label for={'chargingTargetType'}>{t('CreateProjectWorkspaceDialog.chargingTargetTypeLabel')}</Label>
         </div>
-        <Select id={'chargingTargetType'} className={styles.input} onChange={handleChargingTargetTypeChange}>
+        <Select
+          id={'chargingTargetType'}
+          className={styles.input}
+          onChange={handleChargingTargetTypeChange}
+          disabled={disableChargingFields}
+        >
           {chargingTypes.map((option) => (
-            <Option key={option.value} data-value={option.value}>
+            <Option key={option.value} data-value={option.value} selected={currentChargingTargetType === option.value}>
               {option.label}
             </Option>
           ))}
@@ -76,7 +204,7 @@ export function MetadataForm({
           className={styles.input}
           valueState={errors.chargingTarget ? 'Negative' : 'None'}
           valueStateMessage={<span>{errors.chargingTarget?.message}</span>}
-          disabled={!watch?.('chargingTargetType')}
+          disabled={disableChargingFields || !watch?.('chargingTargetType')}
         />
       </FormGroup>
 
diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 17707c24..840ca2e6 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -39,12 +39,19 @@ import { MetadataForm } from '../../Dialogs/MetadataForm.tsx';
 import { EditMembers } from '../../Members/EditMembers.tsx';
 import { ComponentsSelectionContainer } from '../../ComponentsSelection/ComponentsSelectionContainer.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
+import {
+  ManagedControlPlaneTemplate,
+  noTemplateValue,
+} from '../../../lib/api/types/templates/mcpTemplate.ts';
+import { buildNameWithPrefixesAndSufixes } from '../../../utils/buildNameWithPrefixesAndSufixes.ts';
+import { stripIdpPrefix } from '../../../utils/stripIdpPrefix.ts';
 
 type CreateManagedControlPlaneWizardContainerProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   projectName?: string;
   workspaceName?: string;
+  initialTemplateName?: string;
 };
 
 type WizardStepType = 'metadata' | 'members' | 'componentSelection' | 'summarize' | 'success';
@@ -56,12 +63,49 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   setIsOpen,
   projectName = '',
   workspaceName = '',
+  initialTemplateName,
 }) => {
   const { t } = useTranslation();
   const { user } = useAuthOnboarding();
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
 
   const [selectedStep, setSelectedStep] = useState<WizardStepType>('metadata');
+  const [metadataFormKey, setMetadataFormKey] = useState(0);
+
+  const normalizeChargingTargetType = useCallback((val?: string | null) => (val ?? '').trim().toLowerCase(), []);
+
+  // Here we will use OnboardingAPI to get all avaliable templates
+  const templates: ManagedControlPlaneTemplate[] = [];
+
+  const [selectedTemplateValue, setSelectedTemplateValue] = useState<string>(noTemplateValue);
+
+  const selectedTemplate = useMemo(
+    () => templates.find((t) => t.metadata.name === selectedTemplateValue),
+    [templates, selectedTemplateValue],
+  );
+
+  const templateAffixes = useMemo(
+    () => ({
+      namePrefix: selectedTemplate?.spec.meta.name?.prefix ?? '',
+      nameSuffix: selectedTemplate?.spec.meta.name?.sufix ?? '',
+      displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',
+      displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',
+    }),
+    [selectedTemplate],
+  );
+
+  useEffect(() => {
+    const exists = templates.some((t) => t.metadata.name === selectedTemplateValue);
+    if (!exists && selectedTemplateValue !== noTemplateValue) {
+      setSelectedTemplateValue(noTemplateValue);
+    }
+  }, [templates, selectedTemplateValue]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setSelectedTemplateValue(initialTemplateName ?? noTemplateValue);
+  }, [isOpen, initialTemplateName]);
+
   const validationSchemaCreateManagedControlPlane = useMemo(() => createManagedControlPlaneSchema(t), [t]);
 
   const {
@@ -85,6 +129,26 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     mode: 'onChange',
   });
 
+  useEffect(() => {
+    if (selectedStep !== 'metadata') return;
+
+    if (selectedTemplate) {
+      setValue('chargingTarget', selectedTemplate.spec.meta.chargingTarget.value, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+      setValue('chargingTargetType', normalizeChargingTargetType(selectedTemplate.spec.meta.chargingTarget.type), {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    } else {
+      setValue('chargingTarget', '', { shouldValidate: true, shouldDirty: true });
+      setValue('chargingTargetType', '', { shouldValidate: true, shouldDirty: true });
+    }
+
+    setMetadataFormKey((k) => k + 1);
+  }, [selectedTemplate, selectedStep, setValue, normalizeChargingTargetType]);
+
   const nextButtonText = useMemo(
     () => ({
       metadata: t('buttons.next'),
@@ -123,17 +187,25 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   );
   const componentsList = watch('componentsList');
 
+  const hasMissingComponentVersions = useMemo(() => {
+    const list = (componentsList ?? []) as ComponentsListItem[];
+    return list.some((c) => c?.isSelected && !c?.selectedVersion);
+  }, [componentsList]);
+
   const handleCreateManagedControlPlane = useCallback(
     async ({ name, displayName, chargingTarget, members, chargingTargetType }: OnCreatePayload): Promise<boolean> => {
       try {
+        const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes(name, displayName, templateAffixes);
+
+        const normalizedType = (chargingTargetType ?? '').trim().toUpperCase();
         await trigger(
           CreateManagedControlPlane(
-            name,
+            finalName,
             `${projectName}--ws-${workspaceName}`,
             {
-              displayName,
+              displayName: finalDisplayName,
               chargingTarget,
-              chargingTargetType,
+              chargingTargetType: normalizedType,
               members,
               componentsList,
             },
@@ -151,7 +223,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         return false;
       }
     },
-    [trigger, projectName, workspaceName, componentsList],
+    [trigger, projectName, workspaceName, componentsList, templateAffixes],
   );
 
   const handleStepChange = useCallback((e: Ui5CustomEvent<WizardDomRef, WizardStepChangeEventDetail>) => {
@@ -168,6 +240,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         setSelectedStep('componentSelection');
         break;
       case 'componentSelection':
+        if (hasMissingComponentVersions) {
+          return;
+        }
         setSelectedStep('summarize');
         break;
       case 'summarize':
@@ -179,7 +254,16 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
       default:
         break;
     }
-  }, [selectedStep, handleSubmit, setSelectedStep, handleCreateManagedControlPlane, watch, resetFormAndClose]);
+  }, [selectedStep, handleSubmit, setSelectedStep, handleCreateManagedControlPlane, watch, resetFormAndClose, hasMissingComponentVersions]);
+
+  const normalizeMemberRole = useCallback((r?: string | null) => {
+    const v = (r ?? '').toString().trim().toLowerCase();
+    if (v === 'admin' || v === 'administrator') return MemberRoles.admin;
+    if (v === 'viewer' || v === 'view' || v === 'read' || v === 'readonly' || v === 'read-only') {
+      return MemberRoles.view;
+    }
+    return MemberRoles.view;
+  }, []);
 
   const setMembers = useCallback(
     (members: Member[]) => {
@@ -205,20 +289,18 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         case 'componentSelection':
           return selectedStep === 'metadata' || selectedStep === 'members' || !isValid;
         case 'summarize':
-          return (
-            selectedStep === 'metadata' ||
+          return selectedStep === 'metadata' ||
             selectedStep === 'members' ||
             selectedStep === 'componentSelection' ||
-            !isValid
-          );
-
+            !isValid ||
+            hasMissingComponentVersions;
         case 'success':
           return selectedStep !== 'success';
         default:
           return false;
       }
     },
-    [selectedStep, isValid],
+    [selectedStep, isValid, hasMissingComponentVersions],
   );
 
   const onBackClick = useCallback(() => {
@@ -226,7 +308,93 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     if (currentIndex > 0) {
       setSelectedStep(wizardStepOrder[currentIndex - 1]);
     }
-  }, [selectedStep]);
+  }, [selectedStep, wizardStepOrder]);
+
+  const normalizeMemberKind = useCallback((k?: string | null) => {
+    const v = (k ?? '').toString().trim().toLowerCase();
+    return v === 'group' ? 'Group' : 'User';
+  }, []);
+
+  const appliedTemplateMembersRef = useRef(false);
+  const appliedTemplateComponentsRef = useRef(false);
+
+  useEffect(() => {
+    appliedTemplateMembersRef.current = false;
+    appliedTemplateComponentsRef.current = false;
+  }, [selectedTemplateValue, isOpen]);
+
+  useEffect(() => {
+    if (selectedStep !== 'members') return;
+    if (!selectedTemplate) return;
+    if (appliedTemplateMembersRef.current) return;
+
+    const templateMembers = selectedTemplate?.spec?.spec?.authorization?.defaultMembers ?? [];
+    if (!templateMembers?.length) {
+      appliedTemplateMembersRef.current = true;
+      return;
+    }
+
+    const currentMembers = (watch('members') ?? []) as Member[];
+
+    let merged = currentMembers;
+    if (user?.email && !currentMembers.some((m) => m.name === user.email)) {
+      merged = [{ name: user.email, roles: [MemberRoles.admin], kind: 'User' }, ...currentMembers];
+    }
+
+    const mappedFromTemplate: Member[] = templateMembers
+      .map((m: any) => ({
+        name: stripIdpPrefix(String(m?.name ?? ''), idpPrefix),
+        roles: [normalizeMemberRole(m?.role)],
+        kind: normalizeMemberKind(m?.kind),
+      }))
+      .filter((m) => !!m.name);
+
+    const byName = new Map<string, Member>();
+    merged.forEach((m) => m?.name && byName.set(m.name, m));
+    mappedFromTemplate.forEach((m) => {
+      if (m.name && !byName.has(m.name)) byName.set(m.name, m);
+    });
+
+    const normalizedMembers = Array.from(byName.values()).map((m) => ({
+      ...m,
+      roles: (m.roles ?? []).length ? m.roles.map((r) => normalizeMemberRole(r as unknown as string)) : [MemberRoles.view],
+    }));
+
+    setValue('members', normalizedMembers, { shouldValidate: true });
+    appliedTemplateMembersRef.current = true;
+  }, [selectedStep, selectedTemplate, watch, setValue, user?.email, normalizeMemberRole, normalizeMemberKind, idpPrefix]);
+
+  useEffect(() => {
+    if (selectedStep !== 'componentSelection') return;
+    if (!selectedTemplate) return;
+    if (appliedTemplateComponentsRef.current) return;
+
+    const defaults = selectedTemplate?.spec?.spec?.components?.defaultComponents ?? [];
+    if (!defaults?.length) {
+      appliedTemplateComponentsRef.current = true;
+      return;
+    }
+
+    const current = (watch('componentsList') ?? []) as ComponentsListItem[];
+    if (current.length > 0) {
+      appliedTemplateComponentsRef.current = true;
+      return; 
+    }
+
+    const mapped = defaults
+      .filter((c: any) => !!c?.name && !!c?.version)
+      .map((c: any) => ({
+        name: String(c.name),
+        version: String(c.version),
+        selectedVersion: String(c.version),
+        selected: true,
+        removable: Boolean(c.removable),
+        versionChangeable: Boolean(c.versionChangeable),
+      })) as unknown as ComponentsListItem[];
+
+    setValue('componentsList', mapped, { shouldValidate: false });
+    appliedTemplateComponentsRef.current = true;
+  }, [selectedStep, selectedTemplate, watch, setValue]);
 
   if (!isOpen) return null;
 
@@ -266,7 +434,18 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
           selected={selectedStep === 'metadata'}
           data-step="metadata"
         >
-          <MetadataForm watch={watch} setValue={setValue} register={register} errors={errors} />
+          <MetadataForm
+            key={metadataFormKey}
+            watch={watch}
+            setValue={setValue}
+            register={register}
+            errors={errors}
+            disableChargingFields={!!selectedTemplate}
+            namePrefix={templateAffixes.namePrefix}
+            displayNamePrefix={templateAffixes.displayNamePrefix}
+            nameSuffix={templateAffixes.nameSuffix}
+            displayNameSuffix={templateAffixes.displayNameSuffix}
+          />
         </WizardStep>
         <WizardStep
           icon="user-edit"
@@ -293,7 +472,11 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
           data-step="componentSelection"
           disabled={isStepDisabled('componentSelection')}
         >
-          <ComponentsSelectionContainer componentsList={componentsList ?? []} setComponentsList={setComponentsList} />
+          <ComponentsSelectionContainer
+            componentsList={componentsList ?? []}
+            setComponentsList={setComponentsList}
+            managedControlPlaneTemplate={selectedTemplate}
+          />
         </WizardStep>
         <WizardStep
           icon="activities"
@@ -325,4 +508,4 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
       </Wizard>
     </Dialog>
   );
-};
+};
\ No newline at end of file
diff --git a/src/lib/api/types/templates/exampleTemplate.ts b/src/lib/api/types/templates/exampleTemplate.ts
new file mode 100644
index 00000000..35498af4
--- /dev/null
+++ b/src/lib/api/types/templates/exampleTemplate.ts
@@ -0,0 +1,106 @@
+import { ManagedControlPlaneTemplate } from "./mcpTemplate";
+
+export const managedControlPlaneTemplate: ManagedControlPlaneTemplate = {
+  apiVersion: 'kro.run/v1alpha1',
+  kind: 'ManagedControlPlaneTemplate',
+  metadata: {
+    annotations: {
+      'kubectl.kubernetes.io/last-applied-configuration':
+        '{"apiVersion":"kro.run/v1alpha1","kind":"ManagedControlPlaneTemplate","metadata":{"annotations":{"openmcp.cloud/displayName":"Webapp Test Template"},"name":"testtemplate","namespace":"project-webapp-playground"},"spec":{"meta":{"chargingTarget":{"type":"btp","value":"2319843191984831741"},"displayName":{"prefix":"Webapp "},"name":{"prefix":"webapp-"}},"spec":{"authentication":{"system":{"changeable":false,"enabled":true}},"authorization":{"defaultMembers":[{"name":"openmcp:moritz.reich@sap.com","removable":false},{"name":"openmcp:johannes.ott@sap.com","removable":true}]},"components":{"defaultComponents":[{"name":"crossplane","version":"1.19.0"}]}}}}\n',
+      'openmcp.cloud/displayName': 'Webapp Test Template',
+    },
+    creationTimestamp: '2025-07-09T14:56:45Z',
+    finalizers: ['kro.run/finalizer'],
+    generation: 3,
+    labels: {
+      'kro.run/kro-version': 'devel',
+      'kro.run/owned': 'true',
+      'kro.run/resource-graph-definition-id': '31987a49-8a07-4898-abaa-4f50c8d189f0',
+      'kro.run/resource-graph-definition-name': 'managedcontrolplanetemplate',
+    },
+    name: 'Example Template',
+    namespace: 'project-webapp-playground--ws-development',
+    resourceVersion: '39236607',
+    uid: 'e761cc38-56d3-4fbe-add7-d31a0157c072',
+    descriptionText: 'This is a Template that empowers users of organization ABC',
+  },
+  spec: {
+    meta: {
+      chargingTarget: {
+        type: 'btp',
+        value: '449c6fb8-3504-4515-aa73-efd692cd2077',
+      },
+      displayName: {
+        prefix: 'We-',
+        sufix: '-test',
+      },
+      name: {
+        prefix: 'we-',
+        sufix: '-test',
+      },
+    },
+    spec: {
+      authentication: {
+        allowAdd: true,
+        system: {
+          changeable: false,
+          enabled: true,
+        },
+      },
+      authorization: {
+        allowAddMembers: true,
+        defaultMembers: [
+          {
+            name: 'openmcp:moritz.reich@sap.com',
+            removable: false,
+            kind: 'User',
+            role: 'admin',
+            namespace: 'testnamespace',
+          },
+          {
+            name: 'openmcp:johannes.ott@sap.com',
+            removable: true,
+            kind: 'ServiceAccount',
+            role: 'viewer',
+            namespace: 'testnamespace',
+          },
+        ],
+      },
+      components: {
+        defaultComponents: [
+          {
+            name: 'crossplane',
+            removable: true,
+            version: '1.19.034',
+            versionChangeable: true,
+          },
+          {
+            name: 'external-secrets',
+            removable: true,
+            version: '0.18.224',
+            versionChangeable: true,
+          },
+          {
+            name: 'provider-btp',
+            removable: true,
+            version: '1.0.1',
+            versionChangeable: true,
+          },
+        ],
+      },
+    },
+  },
+  status: {
+    conditions: [
+      {
+        lastTransitionTime: '2025-07-09T17:25:33+02:00',
+        message: 'Instance reconciled successfully',
+        observedGeneration: 3,
+        reason: 'ReconciliationSucceeded',
+        status: 'True',
+        type: 'InstanceSynced',
+      },
+    ],
+    state: 'ACTIVE',
+  },
+};
\ No newline at end of file
diff --git a/src/lib/api/types/templates/mcpTemplate.ts b/src/lib/api/types/templates/mcpTemplate.ts
new file mode 100644
index 00000000..455015b1
--- /dev/null
+++ b/src/lib/api/types/templates/mcpTemplate.ts
@@ -0,0 +1,95 @@
+export type ManagedControlPlaneTemplateList = {
+  apiVersion: string;
+  items: ManagedControlPlaneTemplate[];
+};
+
+export type ManagedControlPlaneTemplate = {
+  apiVersion: string;
+  kind: string;
+  metadata: {
+    annotations?: Record<string, string>;
+    creationTimestamp?: string;
+    finalizers?: string[];
+    generation?: number;
+    labels?: Record<string, string>;
+    name: string;
+    namespace: string;
+    resourceVersion?: string;
+    uid?: string;
+    descriptionText?: string;
+  };
+  spec: {
+    meta: {
+      chargingTarget: {
+        type: string;
+        value: string;
+      };
+      displayName: {
+        prefix?: string;
+        sufix?: string;
+      };
+      name: {
+        prefix?: string;
+        sufix?: string;
+      };
+    };
+    spec: {
+      authentication: {
+        allowAdd?: boolean;
+        system: {
+          changeable: boolean;
+          enabled: boolean;
+        };
+      };
+      authorization: {
+        allowAddMembers?: boolean;
+        defaultMembers: {
+          name: string;
+          removable: boolean;
+          kind?: string;
+          role?: string;
+          namespace?: string;
+        }[];
+      };
+      components: {
+        defaultComponents: {
+          name: string;
+          removable?: boolean;
+          version: string;
+          versionChangeable?: boolean;
+        }[];
+      };
+    };
+  };
+  status?: {
+    conditions?: {
+      lastTransitionTime: string;
+      message: string;
+      observedGeneration: number;
+      reason: string;
+      status: string;
+      type: string;
+    }[];
+    state?: string;
+  };
+};
+
+export type TemplateDropdownOption = {
+  value: string;
+  label: string;
+};
+
+export const noTemplateValue = 'no-template';
+
+export function toTemplateDropdownOptions(
+  templates: ManagedControlPlaneTemplate[],
+  noTemplateLabel: string,
+): TemplateDropdownOption[] {
+  return [
+    { value: noTemplateValue, label: noTemplateLabel },
+    ...templates.map((t) => ({
+      value: t.metadata.name,
+      label: t.metadata.name,
+    })),
+  ];
+}
\ No newline at end of file
diff --git a/src/utils/buildNameWithPrefixesAndSufixes.spec.ts b/src/utils/buildNameWithPrefixesAndSufixes.spec.ts
new file mode 100644
index 00000000..3df3f02b
--- /dev/null
+++ b/src/utils/buildNameWithPrefixesAndSufixes.spec.ts
@@ -0,0 +1,50 @@
+import { buildNameWithPrefixesAndSufixes } from './buildNameWithPrefixesAndSufixes';
+import { describe, it, expect } from 'vitest';
+
+describe('buildNameWithPrefixesAndSufixes', () => {
+  it('returns provided values when no affixes provided', () => {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'Display', {});
+    expect(finalName).to.equal('name');
+    expect(finalDisplayName).to.equal('Display');
+  });
+
+  it('applies prefix only', () => {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+      namePrefix: 'pre-',
+      displayNamePrefix: 'PRE-',
+    });
+    expect(finalName).to.equal('pre-name');
+    expect(finalDisplayName).to.equal('PRE-displayName');
+  });
+
+  it('applies suffix only', () => {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+      nameSuffix: '-suf',
+      displayNameSuffix: 'SUF',
+    });
+    expect(finalName).to.equal('name-suf');
+    expect(finalDisplayName).to.equal('displayNameSUF');
+  });
+
+  it('applies both prefix and suffix', () => {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+      namePrefix: 'pre-',
+      nameSuffix: '-suf',
+      displayNamePrefix: 'PRE',
+      displayNameSuffix: 'SUF',
+    });
+    expect(finalName).to.equal('pre-name-suf');
+    expect(finalDisplayName).to.equal('PREdisplayNameSUF');
+  });
+
+  it('trims whitespace around affixes', () => {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+      namePrefix: '  pre- ',
+      nameSuffix: ' -suf  ',
+      displayNamePrefix: '  PRE ',
+      displayNameSuffix: ' SUF   ',
+    });
+    expect(finalName).to.equal('pre-name-suf');
+    expect(finalDisplayName).to.equal('PREdisplayNameSUF');
+  });
+});
diff --git a/src/utils/buildNameWithPrefixesAndSufixes.ts b/src/utils/buildNameWithPrefixesAndSufixes.ts
new file mode 100644
index 00000000..50a919dd
--- /dev/null
+++ b/src/utils/buildNameWithPrefixesAndSufixes.ts
@@ -0,0 +1,25 @@
+export function buildNameWithPrefixesAndSufixes(
+  name: string | undefined,
+  displayName: string | undefined,
+  affixes?: {
+    namePrefix?: string;
+    nameSuffix?: string;
+    displayNamePrefix?: string;
+    displayNameSuffix?: string;
+  },
+): { finalName: string; finalDisplayName: string } {
+  const applyAffixes = (value: string | undefined, prefix?: string, suffix?: string) => {
+    const p = (prefix ?? '').trim();
+    const s = (suffix ?? '').trim();
+    if (!p && !s) return value ?? '';
+    let middle = value ?? '';
+    if (p && middle.startsWith(p)) middle = middle.slice(p.length);
+    if (s && middle.endsWith(s)) middle = middle.slice(0, middle.length - s.length);
+    return `${p}${middle}${s}`;
+  };
+
+  const finalName = applyAffixes(name, affixes?.namePrefix, affixes?.nameSuffix);
+  const finalDisplayName = applyAffixes(displayName, affixes?.displayNamePrefix, affixes?.displayNameSuffix);
+
+  return { finalName, finalDisplayName };
+}
\ No newline at end of file
diff --git a/src/utils/stripIdpPrefix.spec.ts b/src/utils/stripIdpPrefix.spec.ts
new file mode 100644
index 00000000..10b47f35
--- /dev/null
+++ b/src/utils/stripIdpPrefix.spec.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { stripIdpPrefix } from './stripIdpPrefix';
+
+describe('stripIdpPrefix', () => {
+  it('removes known idp prefix when it matches', () => {
+    expect(stripIdpPrefix('openmcp:john@doe.com', 'openmcp')).to.equal('john@doe.com');
+  });
+
+  it('falls back to removing text before first colon when idpPrefix does not match', () => {
+    expect(stripIdpPrefix('azuread:svc-account', 'openmcp')).to.equal('svc-account');
+  });
+
+  it('removes text before the first colon when idpPrefix is not provided', () => {
+    expect(stripIdpPrefix('anything:rest')).to.equal('rest');
+  });
+
+  it('returns original value when there is no colon', () => {
+    expect(stripIdpPrefix('john@doe.com')).to.equal('john@doe.com');
+  });
+
+  it('handles empty string input', () => {
+    expect(stripIdpPrefix('')).to.equal('');
+  });
+
+  it('removes only the first matching prefix (supports multiple colons)', () => {
+    expect(stripIdpPrefix('p1:p2:val', 'p1')).to.equal('p2:val');
+  });
+
+  it('with empty idpPrefix still uses fallback behavior', () => {
+    expect(stripIdpPrefix('prefix:value', '')).to.equal('value');
+  });
+
+  it('when principal starts with non-matching similar text, uses fallback', () => {
+    expect(stripIdpPrefix('openmcpuser:john', 'openmcp')).to.equal('john');
+  });
+});
diff --git a/src/utils/stripIdpPrefix.ts b/src/utils/stripIdpPrefix.ts
new file mode 100644
index 00000000..3cd78a76
--- /dev/null
+++ b/src/utils/stripIdpPrefix.ts
@@ -0,0 +1,11 @@
+export function stripIdpPrefix(principal: string, idpPrefix?: string): string {
+  const value = String(principal ?? '');
+  const expected = idpPrefix ? `${idpPrefix}:` : '';
+
+  if (expected && value.startsWith(expected)) {
+    return value.slice(expected.length);
+  }
+
+  const firstColonIndex = value.indexOf(':');
+  return firstColonIndex >= 0 ? value.slice(firstColonIndex + 1) : value;
+}

From 3e601de6099e8205a4aff5590f84d22b0765510a Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 11:09:33 +0200
Subject: [PATCH 2/9] removing example template

---
 .../api/types/templates/exampleTemplate.ts    | 106 ------------------
 1 file changed, 106 deletions(-)
 delete mode 100644 src/lib/api/types/templates/exampleTemplate.ts

diff --git a/src/lib/api/types/templates/exampleTemplate.ts b/src/lib/api/types/templates/exampleTemplate.ts
deleted file mode 100644
index 35498af4..00000000
--- a/src/lib/api/types/templates/exampleTemplate.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ManagedControlPlaneTemplate } from "./mcpTemplate";
-
-export const managedControlPlaneTemplate: ManagedControlPlaneTemplate = {
-  apiVersion: 'kro.run/v1alpha1',
-  kind: 'ManagedControlPlaneTemplate',
-  metadata: {
-    annotations: {
-      'kubectl.kubernetes.io/last-applied-configuration':
-        '{"apiVersion":"kro.run/v1alpha1","kind":"ManagedControlPlaneTemplate","metadata":{"annotations":{"openmcp.cloud/displayName":"Webapp Test Template"},"name":"testtemplate","namespace":"project-webapp-playground"},"spec":{"meta":{"chargingTarget":{"type":"btp","value":"2319843191984831741"},"displayName":{"prefix":"Webapp "},"name":{"prefix":"webapp-"}},"spec":{"authentication":{"system":{"changeable":false,"enabled":true}},"authorization":{"defaultMembers":[{"name":"openmcp:moritz.reich@sap.com","removable":false},{"name":"openmcp:johannes.ott@sap.com","removable":true}]},"components":{"defaultComponents":[{"name":"crossplane","version":"1.19.0"}]}}}}\n',
-      'openmcp.cloud/displayName': 'Webapp Test Template',
-    },
-    creationTimestamp: '2025-07-09T14:56:45Z',
-    finalizers: ['kro.run/finalizer'],
-    generation: 3,
-    labels: {
-      'kro.run/kro-version': 'devel',
-      'kro.run/owned': 'true',
-      'kro.run/resource-graph-definition-id': '31987a49-8a07-4898-abaa-4f50c8d189f0',
-      'kro.run/resource-graph-definition-name': 'managedcontrolplanetemplate',
-    },
-    name: 'Example Template',
-    namespace: 'project-webapp-playground--ws-development',
-    resourceVersion: '39236607',
-    uid: 'e761cc38-56d3-4fbe-add7-d31a0157c072',
-    descriptionText: 'This is a Template that empowers users of organization ABC',
-  },
-  spec: {
-    meta: {
-      chargingTarget: {
-        type: 'btp',
-        value: '449c6fb8-3504-4515-aa73-efd692cd2077',
-      },
-      displayName: {
-        prefix: 'We-',
-        sufix: '-test',
-      },
-      name: {
-        prefix: 'we-',
-        sufix: '-test',
-      },
-    },
-    spec: {
-      authentication: {
-        allowAdd: true,
-        system: {
-          changeable: false,
-          enabled: true,
-        },
-      },
-      authorization: {
-        allowAddMembers: true,
-        defaultMembers: [
-          {
-            name: 'openmcp:moritz.reich@sap.com',
-            removable: false,
-            kind: 'User',
-            role: 'admin',
-            namespace: 'testnamespace',
-          },
-          {
-            name: 'openmcp:johannes.ott@sap.com',
-            removable: true,
-            kind: 'ServiceAccount',
-            role: 'viewer',
-            namespace: 'testnamespace',
-          },
-        ],
-      },
-      components: {
-        defaultComponents: [
-          {
-            name: 'crossplane',
-            removable: true,
-            version: '1.19.034',
-            versionChangeable: true,
-          },
-          {
-            name: 'external-secrets',
-            removable: true,
-            version: '0.18.224',
-            versionChangeable: true,
-          },
-          {
-            name: 'provider-btp',
-            removable: true,
-            version: '1.0.1',
-            versionChangeable: true,
-          },
-        ],
-      },
-    },
-  },
-  status: {
-    conditions: [
-      {
-        lastTransitionTime: '2025-07-09T17:25:33+02:00',
-        message: 'Instance reconciled successfully',
-        observedGeneration: 3,
-        reason: 'ReconciliationSucceeded',
-        status: 'True',
-        type: 'InstanceSynced',
-      },
-    ],
-    state: 'ACTIVE',
-  },
-};
\ No newline at end of file

From 49ce9b9f012e0fc1ae0a5b42f3f3a13bfe5eb5b1 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 11:33:34 +0200
Subject: [PATCH 3/9] linter auto fixes

---
 .../ComponentsSelection.tsx                   |  9 +----
 .../ComponentsSelectionContainer.tsx          |  4 +-
 .../ControlPlanes/ControlPlanesListMenu.tsx   |  2 +-
 .../ControlPlaneListWorkspaceGridTile.tsx     |  4 +-
 src/components/Dialogs/MetadataForm.tsx       | 20 +++++-----
 ...eateManagedControlPlaneWizardContainer.tsx | 40 ++++++++++++++-----
 src/lib/api/types/templates/mcpTemplate.ts    |  2 +-
 src/utils/buildNameWithPrefixesAndSufixes.ts  |  2 +-
 8 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx
index 6694aec2..b08fbbec 100644
--- a/src/components/ComponentsSelection/ComponentsSelection.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelection.tsx
@@ -138,21 +138,16 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
                       value={component.selectedVersion}
                       disabled={!component.isSelected || providerDisabled}
                       aria-label={`${component.name} version`}
-                      onChange={handleVersionChange}
                       valueState={component.isSelected && !component.selectedVersion ? 'Negative' : 'None'}
                       valueStateMessage={
                         component.isSelected && !component.selectedVersion ? (
                           <span>{t('ComponentsSelection.chooseVersion')}</span>
                         ) : undefined
                       }
+                      onChange={handleVersionChange}
                     >
                       {!component.selectedVersion && (
-                        <Option
-                          key="__placeholder"
-                          data-version=""
-                          data-name={component.name}
-                          selected
-                        >
+                        <Option key="__placeholder" data-version="" data-name={component.name} selected>
                           {t('ComponentsSelection.chooseVersion')}
                         </Option>
                       )}
diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
index a3ffed3c..aaca4264 100644
--- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -58,7 +58,9 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
         const template = defaultComponents.find((dc) => dc.name === item.metadata.name);
         const templateVersion = template?.version;
         const selectedVersion = template
-          ? (templateVersion && versions.includes(templateVersion) ? templateVersion : '')
+          ? templateVersion && versions.includes(templateVersion)
+            ? templateVersion
+            : ''
           : (versions[0] ?? '');
         return {
           name: item.metadata.name,
diff --git a/src/components/ControlPlanes/ControlPlanesListMenu.tsx b/src/components/ControlPlanes/ControlPlanesListMenu.tsx
index da16022b..f5398673 100644
--- a/src/components/ControlPlanes/ControlPlanesListMenu.tsx
+++ b/src/components/ControlPlanes/ControlPlanesListMenu.tsx
@@ -16,7 +16,7 @@ type ControlPlanesListMenuProps = {
 export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
   setDialogDeleteWsIsOpen,
   setIsCreateManagedControlPlaneWizardOpen,
-  setInitialTemplateName, 
+  setInitialTemplateName,
 }) => {
   const popoverRef = useRef<MenuDomRef>(null);
   const [open, setOpen] = useState(false);
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index bb9a8703..b26006cd 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -75,7 +75,9 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
 
     return (workspace.spec.members ?? []).filter((member: any) => {
       const memberNamespace = member?.namespace ?? fallbackNamespace;
-      const memberName = String(member?.name ?? '').trim().toLowerCase();
+      const memberName = String(member?.name ?? '')
+        .trim()
+        .toLowerCase();
       if (!memberName) return false;
 
       const dedupeKey = `${memberNamespace}::${memberName}`;
diff --git a/src/components/Dialogs/MetadataForm.tsx b/src/components/Dialogs/MetadataForm.tsx
index 43ad6f8d..21fcf950 100644
--- a/src/components/Dialogs/MetadataForm.tsx
+++ b/src/components/Dialogs/MetadataForm.tsx
@@ -79,7 +79,10 @@ export function MetadataForm({
       (e?.target && typeof e.target.value === 'string' ? e.target.value : undefined) ??
       (e?.detail && typeof e.detail.value === 'string' ? e.detail.value : '') ??
       '';
-    setValue('name', `${resolvedNamePrefix}${middle}${resolvedNameSuffix}`, { shouldValidate: true, shouldDirty: true });
+    setValue('name', `${resolvedNamePrefix}${middle}${resolvedNameSuffix}`, {
+      shouldValidate: true,
+      shouldDirty: true,
+    });
   };
 
   const onDisplayNameCoreInput = (e: any) => {
@@ -102,7 +105,7 @@ export function MetadataForm({
           {t('CreateProjectWorkspaceDialog.nameLabel')}
         </Label>
 
-        {(resolvedNamePrefix || resolvedNameSuffix) ? (
+        {resolvedNamePrefix || resolvedNameSuffix ? (
           <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
             {resolvedNamePrefix ? (
               <Input
@@ -119,10 +122,10 @@ export function MetadataForm({
               className={styles.input}
               id="name"
               value={nameCore}
-              onInput={onNameCoreInput}
               valueState={errors.name ? 'Negative' : 'None'}
               valueStateMessage={<span>{errors.name?.message}</span>}
               required
+              onInput={onNameCoreInput}
             />
             {resolvedNameSuffix ? (
               <Input
@@ -147,7 +150,7 @@ export function MetadataForm({
 
         <Label for={'displayName'}>{t('CreateProjectWorkspaceDialog.displayNameLabel')}</Label>
 
-        {(resolvedDisplayNamePrefix || resolvedDisplayNameSuffix) ? (
+        {resolvedDisplayNamePrefix || resolvedDisplayNameSuffix ? (
           <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
             {resolvedDisplayNamePrefix ? (
               <Input
@@ -159,12 +162,7 @@ export function MetadataForm({
               />
             ) : null}
             <input type="hidden" {...register('displayName')} value={currentDisplayName} readOnly />
-            <Input
-              className={styles.input}
-              id="displayName"
-              value={displayNameCore}
-              onInput={onDisplayNameCoreInput}
-            />
+            <Input className={styles.input} id="displayName" value={displayNameCore} onInput={onDisplayNameCoreInput} />
             {resolvedDisplayNameSuffix ? (
               <Input
                 className={styles.input}
@@ -185,8 +183,8 @@ export function MetadataForm({
         <Select
           id={'chargingTargetType'}
           className={styles.input}
-          onChange={handleChargingTargetTypeChange}
           disabled={disableChargingFields}
+          onChange={handleChargingTargetTypeChange}
         >
           {chargingTypes.map((option) => (
             <Option key={option.value} data-value={option.value} selected={currentChargingTargetType === option.value}>
diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 0edb44e0..394208a8 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -39,10 +39,7 @@ import { MetadataForm } from '../../Dialogs/MetadataForm.tsx';
 import { EditMembers } from '../../Members/EditMembers.tsx';
 import { ComponentsSelectionContainer } from '../../ComponentsSelection/ComponentsSelectionContainer.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
-import {
-  ManagedControlPlaneTemplate,
-  noTemplateValue,
-} from '../../../lib/api/types/templates/mcpTemplate.ts';
+import { ManagedControlPlaneTemplate, noTemplateValue } from '../../../lib/api/types/templates/mcpTemplate.ts';
 import { buildNameWithPrefixesAndSufixes } from '../../../utils/buildNameWithPrefixesAndSufixes.ts';
 import { stripIdpPrefix } from '../../../utils/stripIdpPrefix.ts';
 
@@ -254,7 +251,15 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
       default:
         break;
     }
-  }, [selectedStep, handleSubmit, setSelectedStep, handleCreateManagedControlPlane, watch, resetFormAndClose, hasMissingComponentVersions]);
+  }, [
+    selectedStep,
+    handleSubmit,
+    setSelectedStep,
+    handleCreateManagedControlPlane,
+    watch,
+    resetFormAndClose,
+    hasMissingComponentVersions,
+  ]);
 
   const normalizeMemberRole = useCallback((r?: string | null) => {
     const v = (r ?? '').toString().trim().toLowerCase();
@@ -289,11 +294,13 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
         case 'componentSelection':
           return selectedStep === 'metadata' || selectedStep === 'members' || !isValid;
         case 'summarize':
-          return selectedStep === 'metadata' ||
+          return (
+            selectedStep === 'metadata' ||
             selectedStep === 'members' ||
             selectedStep === 'componentSelection' ||
             !isValid ||
-            hasMissingComponentVersions;
+            hasMissingComponentVersions
+          );
         case 'success':
           return selectedStep !== 'success';
         default:
@@ -357,12 +364,23 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
     const normalizedMembers = Array.from(byName.values()).map((m) => ({
       ...m,
-      roles: (m.roles ?? []).length ? m.roles.map((r) => normalizeMemberRole(r as unknown as string)) : [MemberRoles.view],
+      roles: (m.roles ?? []).length
+        ? m.roles.map((r) => normalizeMemberRole(r as unknown as string))
+        : [MemberRoles.view],
     }));
 
     setValue('members', normalizedMembers, { shouldValidate: true });
     appliedTemplateMembersRef.current = true;
-  }, [selectedStep, selectedTemplate, watch, setValue, user?.email, normalizeMemberRole, normalizeMemberKind, idpPrefix]);
+  }, [
+    selectedStep,
+    selectedTemplate,
+    watch,
+    setValue,
+    user?.email,
+    normalizeMemberRole,
+    normalizeMemberKind,
+    idpPrefix,
+  ]);
 
   useEffect(() => {
     if (selectedStep !== 'componentSelection') return;
@@ -378,7 +396,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     const current = (watch('componentsList') ?? []) as ComponentsListItem[];
     if (current.length > 0) {
       appliedTemplateComponentsRef.current = true;
-      return; 
+      return;
     }
 
     const mapped = defaults
@@ -511,4 +529,4 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
       </Wizard>
     </Dialog>
   );
-};
\ No newline at end of file
+};
diff --git a/src/lib/api/types/templates/mcpTemplate.ts b/src/lib/api/types/templates/mcpTemplate.ts
index 455015b1..e60f93d1 100644
--- a/src/lib/api/types/templates/mcpTemplate.ts
+++ b/src/lib/api/types/templates/mcpTemplate.ts
@@ -92,4 +92,4 @@ export function toTemplateDropdownOptions(
       label: t.metadata.name,
     })),
   ];
-}
\ No newline at end of file
+}
diff --git a/src/utils/buildNameWithPrefixesAndSufixes.ts b/src/utils/buildNameWithPrefixesAndSufixes.ts
index 50a919dd..8d154c98 100644
--- a/src/utils/buildNameWithPrefixesAndSufixes.ts
+++ b/src/utils/buildNameWithPrefixesAndSufixes.ts
@@ -22,4 +22,4 @@ export function buildNameWithPrefixesAndSufixes(
   const finalDisplayName = applyAffixes(displayName, affixes?.displayNamePrefix, affixes?.displayNameSuffix);
 
   return { finalName, finalDisplayName };
-}
\ No newline at end of file
+}

From fd97f9045de6b24d996f9cee56a1ba31cb0c08bb Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 11:38:21 +0200
Subject: [PATCH 4/9] fixing linter issues

---
 src/components/Dialogs/MetadataForm.tsx | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Dialogs/MetadataForm.tsx b/src/components/Dialogs/MetadataForm.tsx
index 21fcf950..5d0f9135 100644
--- a/src/components/Dialogs/MetadataForm.tsx
+++ b/src/components/Dialogs/MetadataForm.tsx
@@ -1,7 +1,17 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form';
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
 import { useTranslation } from 'react-i18next';
-import { Form, FormGroup, Input, Label, Option, Select, SelectDomRef, Ui5CustomEvent } from '@ui5/webcomponents-react';
+import {
+  Form,
+  FormGroup,
+  Input,
+  Label,
+  Option,
+  Select,
+  SelectDomRef,
+  Ui5CustomEvent,
+  InputDomRef,
+} from '@ui5/webcomponents-react';
 import styles from './CreateProjectWorkspaceDialog.module.css';
 import React from 'react';
 
@@ -58,7 +68,6 @@ export function MetadataForm({
   const currentName = watch?.('name') ?? '';
   const currentDisplayName = watch?.('displayName') ?? '';
 
-  // Resolve and normalize affixes once (trim + fallback to '')
   const resolvedNamePrefix = (namePrefix || '').trim();
   const resolvedDisplayNamePrefix = (displayNamePrefix || '').trim();
   const resolvedNameSuffix = (propNameSuffix || '').trim();
@@ -74,22 +83,16 @@ export function MetadataForm({
   const nameCore = computeCore(currentName, resolvedNamePrefix, resolvedNameSuffix);
   const displayNameCore = computeCore(currentDisplayName, resolvedDisplayNamePrefix, resolvedDisplayNameSuffix);
 
-  const onNameCoreInput = (e: any) => {
-    const middle =
-      (e?.target && typeof e.target.value === 'string' ? e.target.value : undefined) ??
-      (e?.detail && typeof e.detail.value === 'string' ? e.detail.value : '') ??
-      '';
+  const onNameCoreInput = (e: Ui5CustomEvent<InputDomRef, { value: string }>) => {
+    const middle = typeof e.detail?.value === 'string' ? e.detail.value : (e.target.value ?? '');
     setValue('name', `${resolvedNamePrefix}${middle}${resolvedNameSuffix}`, {
       shouldValidate: true,
       shouldDirty: true,
     });
   };
 
-  const onDisplayNameCoreInput = (e: any) => {
-    const middle =
-      (e?.target && typeof e.target.value === 'string' ? e.target.value : undefined) ??
-      (e?.detail && typeof e.detail.value === 'string' ? e.detail.value : '') ??
-      '';
+  const onDisplayNameCoreInput = (e: Ui5CustomEvent<InputDomRef, { value: string }>) => {
+    const middle = typeof e.detail?.value === 'string' ? e.detail.value : (e.target.value ?? '');
     setValue('displayName', `${resolvedDisplayNamePrefix}${middle}${resolvedDisplayNameSuffix}`, {
       shouldValidate: true,
       shouldDirty: true,

From 28965e1f9b21f873fd5d33b46b4542473d8fa107 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 11:54:56 +0200
Subject: [PATCH 5/9] fixing linter

---
 .../ComponentsSelectionContainer.tsx          | 16 ++++++++--
 .../ControlPlaneListWorkspaceGridTile.tsx     |  2 +-
 ...eateManagedControlPlaneWizardContainer.tsx | 29 +++++++------------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
index aaca4264..6451b666 100644
--- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ComponentsSelection } from './ComponentsSelection.tsx';
 
 import IllustratedError from '../Shared/IllustratedError.tsx';
@@ -32,6 +32,13 @@ export const getSelectedComponents = (components: ComponentsListItem[]) => {
   });
 };
 
+type TemplateDefaultComponent = {
+  name: string;
+  version: string;
+  removable?: boolean;
+  versionChangeable?: boolean;
+};
+
 export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> = ({
   setComponentsList,
   componentsList,
@@ -41,7 +48,10 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
   const { t } = useTranslation();
   const initialized = useRef(false);
   const [templateDefaultsError, setTemplateDefaultsError] = useState<string | null>(null);
-  const defaultComponents = managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [];
+  const defaultComponents = useMemo<TemplateDefaultComponent[]>(
+    () => managedControlPlaneTemplate?.spec?.spec?.components?.defaultComponents ?? [],
+    [managedControlPlaneTemplate],
+  );
 
   useEffect(() => {
     if (
@@ -84,7 +94,7 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     }
 
     const errs: string[] = [];
-    defaultComponents.forEach((dc: any) => {
+    defaultComponents.forEach((dc: TemplateDefaultComponent) => {
       if (!dc?.name) return;
       const item = items.find((it) => it.metadata.name === dc.name);
       if (!item) {
diff --git a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
index b26006cd..b3bf9556 100644
--- a/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
+++ b/src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx
@@ -73,7 +73,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
     const seenKeys = new Set<string>();
     const fallbackNamespace = workspace.status?.namespace ?? '';
 
-    return (workspace.spec.members ?? []).filter((member: any) => {
+    return (workspace.spec.members ?? []).filter((member: { name?: string; namespace?: string }) => {
       const memberNamespace = member?.namespace ?? fallbackNamespace;
       const memberName = String(member?.name ?? '')
         .trim()
diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 394208a8..2b8f4921 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -72,7 +72,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   const normalizeChargingTargetType = useCallback((val?: string | null) => (val ?? '').trim().toLowerCase(), []);
 
   // Here we will use OnboardingAPI to get all avaliable templates
-  const templates: ManagedControlPlaneTemplate[] = [];
+  const templates = useMemo<ManagedControlPlaneTemplate[]>(() => [], []);
 
   const [selectedTemplateValue, setSelectedTemplateValue] = useState<string>(noTemplateValue);
 
@@ -315,11 +315,11 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     if (currentIndex > 0) {
       setSelectedStep(wizardStepOrder[currentIndex - 1]);
     }
-  }, [selectedStep, wizardStepOrder]);
+  }, [selectedStep]);
 
   const normalizeMemberKind = useCallback((k?: string | null) => {
     const v = (k ?? '').toString().trim().toLowerCase();
-    return v === 'group' ? 'Group' : 'User';
+    return v === 'serviceaccount' ? 'ServiceAccount' : 'User';
   }, []);
 
   const appliedTemplateMembersRef = useRef(false);
@@ -335,7 +335,8 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     if (!selectedTemplate) return;
     if (appliedTemplateMembersRef.current) return;
 
-    const templateMembers = selectedTemplate?.spec?.spec?.authorization?.defaultMembers ?? [];
+    const templateMembers = (selectedTemplate?.spec?.spec?.authorization?.defaultMembers ??
+      []) as ManagedControlPlaneTemplate['spec']['spec']['authorization']['defaultMembers'];
     if (!templateMembers?.length) {
       appliedTemplateMembersRef.current = true;
       return;
@@ -349,7 +350,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     }
 
     const mappedFromTemplate: Member[] = templateMembers
-      .map((m: any) => ({
+      .map((m) => ({
         name: stripIdpPrefix(String(m?.name ?? ''), idpPrefix),
         roles: [normalizeMemberRole(m?.role)],
         kind: normalizeMemberKind(m?.kind),
@@ -371,23 +372,15 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
     setValue('members', normalizedMembers, { shouldValidate: true });
     appliedTemplateMembersRef.current = true;
-  }, [
-    selectedStep,
-    selectedTemplate,
-    watch,
-    setValue,
-    user?.email,
-    normalizeMemberRole,
-    normalizeMemberKind,
-    idpPrefix,
-  ]);
+  }, [selectedStep, selectedTemplate, watch, setValue, user?.email, normalizeMemberRole, normalizeMemberKind]);
 
   useEffect(() => {
     if (selectedStep !== 'componentSelection') return;
     if (!selectedTemplate) return;
     if (appliedTemplateComponentsRef.current) return;
 
-    const defaults = selectedTemplate?.spec?.spec?.components?.defaultComponents ?? [];
+    const defaults = (selectedTemplate?.spec?.spec?.components?.defaultComponents ??
+      []) as ManagedControlPlaneTemplate['spec']['spec']['components']['defaultComponents'];
     if (!defaults?.length) {
       appliedTemplateComponentsRef.current = true;
       return;
@@ -400,8 +393,8 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     }
 
     const mapped = defaults
-      .filter((c: any) => !!c?.name && !!c?.version)
-      .map((c: any) => ({
+      .filter((c) => !!c?.name && !!c?.version)
+      .map((c) => ({
         name: String(c.name),
         version: String(c.version),
         selectedVersion: String(c.version),

From 207ceac19c420dd4766cf088e92aafa452f26814 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 13:39:12 +0200
Subject: [PATCH 6/9] Fixing spelling

---
 .../CreateManagedControlPlaneWizardContainer.tsx   | 10 +++++-----
 src/lib/api/types/templates/mcpTemplate.ts         |  4 ++--
 ...ts => buildNameWithPrefixesAndSuffixes.spec.ts} | 14 +++++++-------
 ...ixes.ts => buildNameWithPrefixesAndSuffixes.ts} |  2 +-
 4 files changed, 15 insertions(+), 15 deletions(-)
 rename src/utils/{buildNameWithPrefixesAndSufixes.spec.ts => buildNameWithPrefixesAndSuffixes.spec.ts} (82%)
 rename src/utils/{buildNameWithPrefixesAndSufixes.ts => buildNameWithPrefixesAndSuffixes.ts} (94%)

diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 2b8f4921..61e28659 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -40,8 +40,8 @@ import { EditMembers } from '../../Members/EditMembers.tsx';
 import { ComponentsSelectionContainer } from '../../ComponentsSelection/ComponentsSelectionContainer.tsx';
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { ManagedControlPlaneTemplate, noTemplateValue } from '../../../lib/api/types/templates/mcpTemplate.ts';
-import { buildNameWithPrefixesAndSufixes } from '../../../utils/buildNameWithPrefixesAndSufixes.ts';
 import { stripIdpPrefix } from '../../../utils/stripIdpPrefix.ts';
+import { buildNameWithPrefixesAndSuffixes } from '../../../utils/buildNameWithPrefixesAndSuffixes.ts';
 
 type CreateManagedControlPlaneWizardContainerProps = {
   isOpen: boolean;
@@ -71,7 +71,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
   const normalizeChargingTargetType = useCallback((val?: string | null) => (val ?? '').trim().toLowerCase(), []);
 
-  // Here we will use OnboardingAPI to get all avaliable templates
+  // Here we will use OnboardingAPI to get all available templates
   const templates = useMemo<ManagedControlPlaneTemplate[]>(() => [], []);
 
   const [selectedTemplateValue, setSelectedTemplateValue] = useState<string>(noTemplateValue);
@@ -84,9 +84,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   const templateAffixes = useMemo(
     () => ({
       namePrefix: selectedTemplate?.spec.meta.name?.prefix ?? '',
-      nameSuffix: selectedTemplate?.spec.meta.name?.sufix ?? '',
+      nameSuffix: selectedTemplate?.spec.meta.name?.suffix ?? '',
       displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',
-      displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',
+      displayNameSuffix: selectedTemplate?.spec.meta.displayName?.suffix ?? '',
     }),
     [selectedTemplate],
   );
@@ -192,7 +192,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
   const handleCreateManagedControlPlane = useCallback(
     async ({ name, displayName, chargingTarget, members, chargingTargetType }: OnCreatePayload): Promise<boolean> => {
       try {
-        const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes(name, displayName, templateAffixes);
+        const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes(name, displayName, templateAffixes);
 
         const normalizedType = (chargingTargetType ?? '').trim().toUpperCase();
         await trigger(
diff --git a/src/lib/api/types/templates/mcpTemplate.ts b/src/lib/api/types/templates/mcpTemplate.ts
index e60f93d1..d31a5475 100644
--- a/src/lib/api/types/templates/mcpTemplate.ts
+++ b/src/lib/api/types/templates/mcpTemplate.ts
@@ -26,11 +26,11 @@ export type ManagedControlPlaneTemplate = {
       };
       displayName: {
         prefix?: string;
-        sufix?: string;
+        suffix?: string;
       };
       name: {
         prefix?: string;
-        sufix?: string;
+        suffix?: string;
       };
     };
     spec: {
diff --git a/src/utils/buildNameWithPrefixesAndSufixes.spec.ts b/src/utils/buildNameWithPrefixesAndSuffixes.spec.ts
similarity index 82%
rename from src/utils/buildNameWithPrefixesAndSufixes.spec.ts
rename to src/utils/buildNameWithPrefixesAndSuffixes.spec.ts
index 3df3f02b..f3c06ba1 100644
--- a/src/utils/buildNameWithPrefixesAndSufixes.spec.ts
+++ b/src/utils/buildNameWithPrefixesAndSuffixes.spec.ts
@@ -1,15 +1,15 @@
-import { buildNameWithPrefixesAndSufixes } from './buildNameWithPrefixesAndSufixes';
 import { describe, it, expect } from 'vitest';
+import { buildNameWithPrefixesAndSuffixes } from './buildNameWithPrefixesAndSuffixes';
 
-describe('buildNameWithPrefixesAndSufixes', () => {
+describe('buildNameWithPrefixesAndSuffixes', () => {
   it('returns provided values when no affixes provided', () => {
-    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'Display', {});
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes('name', 'Display', {});
     expect(finalName).to.equal('name');
     expect(finalDisplayName).to.equal('Display');
   });
 
   it('applies prefix only', () => {
-    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes('name', 'displayName', {
       namePrefix: 'pre-',
       displayNamePrefix: 'PRE-',
     });
@@ -18,7 +18,7 @@ describe('buildNameWithPrefixesAndSufixes', () => {
   });
 
   it('applies suffix only', () => {
-    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes('name', 'displayName', {
       nameSuffix: '-suf',
       displayNameSuffix: 'SUF',
     });
@@ -27,7 +27,7 @@ describe('buildNameWithPrefixesAndSufixes', () => {
   });
 
   it('applies both prefix and suffix', () => {
-    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes('name', 'displayName', {
       namePrefix: 'pre-',
       nameSuffix: '-suf',
       displayNamePrefix: 'PRE',
@@ -38,7 +38,7 @@ describe('buildNameWithPrefixesAndSufixes', () => {
   });
 
   it('trims whitespace around affixes', () => {
-    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSufixes('name', 'displayName', {
+    const { finalName, finalDisplayName } = buildNameWithPrefixesAndSuffixes('name', 'displayName', {
       namePrefix: '  pre- ',
       nameSuffix: ' -suf  ',
       displayNamePrefix: '  PRE ',
diff --git a/src/utils/buildNameWithPrefixesAndSufixes.ts b/src/utils/buildNameWithPrefixesAndSuffixes.ts
similarity index 94%
rename from src/utils/buildNameWithPrefixesAndSufixes.ts
rename to src/utils/buildNameWithPrefixesAndSuffixes.ts
index 8d154c98..6ff45374 100644
--- a/src/utils/buildNameWithPrefixesAndSufixes.ts
+++ b/src/utils/buildNameWithPrefixesAndSuffixes.ts
@@ -1,4 +1,4 @@
-export function buildNameWithPrefixesAndSufixes(
+export function buildNameWithPrefixesAndSuffixes(
   name: string | undefined,
   displayName: string | undefined,
   affixes?: {

From ac877b93a9c5c5cbab73c100330df6235493ab7c Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Wed, 10 Sep 2025 14:42:17 +0200
Subject: [PATCH 7/9] PR requested changes

---
 ...Dialog.module.css => MetadataForm.module.css} |  6 ++++++
 src/components/Dialogs/MetadataForm.tsx          | 15 ++++++++-------
 .../CreateManagedControlPlaneWizardContainer.tsx | 16 ++++++++--------
 3 files changed, 22 insertions(+), 15 deletions(-)
 rename src/components/Dialogs/{CreateProjectWorkspaceDialog.module.css => MetadataForm.module.css} (50%)

diff --git a/src/components/Dialogs/CreateProjectWorkspaceDialog.module.css b/src/components/Dialogs/MetadataForm.module.css
similarity index 50%
rename from src/components/Dialogs/CreateProjectWorkspaceDialog.module.css
rename to src/components/Dialogs/MetadataForm.module.css
index 05707b43..6baa4d23 100644
--- a/src/components/Dialogs/CreateProjectWorkspaceDialog.module.css
+++ b/src/components/Dialogs/MetadataForm.module.css
@@ -1,3 +1,9 @@
+.affixRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .input {
   width: 100%;
   margin-bottom: 2rem;
diff --git a/src/components/Dialogs/MetadataForm.tsx b/src/components/Dialogs/MetadataForm.tsx
index 5d0f9135..ac9ad207 100644
--- a/src/components/Dialogs/MetadataForm.tsx
+++ b/src/components/Dialogs/MetadataForm.tsx
@@ -12,7 +12,8 @@ import {
   Ui5CustomEvent,
   InputDomRef,
 } from '@ui5/webcomponents-react';
-import styles from './CreateProjectWorkspaceDialog.module.css';
+
+import styles from './MetadataForm.module.css';
 import React from 'react';
 
 export interface MetadataFormProps {
@@ -74,10 +75,10 @@ export function MetadataForm({
   const resolvedDisplayNameSuffix = (propDisplayNameSuffix || '').trim();
 
   const computeCore = (full: string, prefix: string, suffix: string) => {
-    let v = full ?? '';
-    if (prefix && v.startsWith(prefix)) v = v.slice(prefix.length);
-    if (suffix && v.endsWith(suffix)) v = v.slice(0, v.length - suffix.length);
-    return v;
+    let name = full ?? '';
+    if (prefix && name.startsWith(prefix)) name = name.slice(prefix.length);
+    if (suffix && name.endsWith(suffix)) name = name.slice(0, name.length - suffix.length);
+    return name;
   };
 
   const nameCore = computeCore(currentName, resolvedNamePrefix, resolvedNameSuffix);
@@ -109,7 +110,7 @@ export function MetadataForm({
         </Label>
 
         {resolvedNamePrefix || resolvedNameSuffix ? (
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <div className={styles.affixRow}>
             {resolvedNamePrefix ? (
               <Input
                 className={styles.input}
@@ -154,7 +155,7 @@ export function MetadataForm({
         <Label for={'displayName'}>{t('CreateProjectWorkspaceDialog.displayNameLabel')}</Label>
 
         {resolvedDisplayNamePrefix || resolvedDisplayNameSuffix ? (
-          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <div className={styles.affixRow}>
             {resolvedDisplayNamePrefix ? (
               <Input
                 className={styles.input}
diff --git a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
index 61e28659..93c2b72d 100644
--- a/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
+++ b/src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx
@@ -186,7 +186,7 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
 
   const hasMissingComponentVersions = useMemo(() => {
     const list = (componentsList ?? []) as ComponentsListItem[];
-    return list.some((c) => c?.isSelected && !c?.selectedVersion);
+    return list.some(({ isSelected, selectedVersion }) => isSelected && !selectedVersion);
   }, [componentsList]);
 
   const handleCreateManagedControlPlane = useCallback(
@@ -261,10 +261,10 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     hasMissingComponentVersions,
   ]);
 
-  const normalizeMemberRole = useCallback((r?: string | null) => {
-    const v = (r ?? '').toString().trim().toLowerCase();
-    if (v === 'admin' || v === 'administrator') return MemberRoles.admin;
-    if (v === 'viewer' || v === 'view' || v === 'read' || v === 'readonly' || v === 'read-only') {
+  const normalizeMemberRole = useCallback((roleInput?: string | null) => {
+    const normalizedRole = (roleInput ?? '').toString().trim().toLowerCase();
+    if (normalizedRole === 'admin' || normalizedRole === 'administrator') return MemberRoles.admin;
+    if (normalizedRole === 'viewer' || normalizedRole === 'view' || normalizedRole === 'readonly') {
       return MemberRoles.view;
     }
     return MemberRoles.view;
@@ -317,9 +317,9 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
     }
   }, [selectedStep]);
 
-  const normalizeMemberKind = useCallback((k?: string | null) => {
-    const v = (k ?? '').toString().trim().toLowerCase();
-    return v === 'serviceaccount' ? 'ServiceAccount' : 'User';
+  const normalizeMemberKind = useCallback((kindInput?: string | null) => {
+    const normalizedKind = (kindInput ?? '').toString().trim().toLowerCase();
+    return normalizedKind === 'serviceaccount' ? 'ServiceAccount' : 'User';
   }, []);
 
   const appliedTemplateMembersRef = useRef(false);

From b6e6cfd86adf5019c7c2e7daf2cc2a0d7ff45400 Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Thu, 11 Sep 2025 09:53:01 +0200
Subject: [PATCH 8/9] PR comments

---
 .../ComponentsSelectionContainer.tsx          | 71 +++++++++----------
 1 file changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
index 6451b666..17c8b56c 100644
--- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -54,61 +54,60 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
   );
 
   useEffect(() => {
-    if (
-      initialized.current ||
-      !availableManagedComponentsListData?.items ||
-      availableManagedComponentsListData.items.length === 0
-    ) {
+    const items = availableManagedComponentsListData?.items ?? [];
+
+    if (!items.length) {
+      if (!initialized.current) return;
+      setTemplateDefaultsError(null);
       return;
     }
 
-    const newComponentsList = availableManagedComponentsListData.items
-      .map((item) => {
-        const versions = sortVersions(item.status.versions);
-        const template = defaultComponents.find((dc) => dc.name === item.metadata.name);
-        const templateVersion = template?.version;
-        const selectedVersion = template
-          ? templateVersion && versions.includes(templateVersion)
-            ? templateVersion
-            : ''
-          : (versions[0] ?? '');
-        return {
-          name: item.metadata.name,
-          versions,
-          selectedVersion,
-          isSelected: !!template,
-          documentationUrl: '',
-        };
-      })
-      .filter((component) => !removeComponents.find((item) => item === component.name));
-
-    setComponentsList(newComponentsList);
-    initialized.current = true;
-  }, [availableManagedComponentsListData, setComponentsList, defaultComponents]);
+    if (!initialized.current) {
+      const newComponentsList = items
+        .map((item) => {
+          const versions = sortVersions(item.status.versions);
+          const template = defaultComponents.find((dc) => dc.name === item.metadata.name);
+          const templateVersion = template?.version;
+          const selectedVersion = template
+            ? templateVersion && versions.includes(templateVersion)
+              ? templateVersion
+              : ''
+            : (versions[0] ?? '');
+          return {
+            name: item.metadata.name,
+            versions,
+            selectedVersion,
+            isSelected: !!template,
+            documentationUrl: '',
+          };
+        })
+        .filter((component) => !removeComponents.find((item) => item === component.name));
+
+      setComponentsList(newComponentsList);
+      initialized.current = true;
+    }
 
-  useEffect(() => {
-    const items = availableManagedComponentsListData?.items ?? [];
-    if (items.length === 0 || !defaultComponents.length) {
+    if (!defaultComponents.length) {
       setTemplateDefaultsError(null);
       return;
     }
 
-    const errs: string[] = [];
+    const errors: string[] = [];
     defaultComponents.forEach((dc: TemplateDefaultComponent) => {
       if (!dc?.name) return;
       const item = items.find((it) => it.metadata.name === dc.name);
       if (!item) {
-        errs.push(`Component "${dc.name}" from template is not available.`);
+        errors.push(`Component "${dc.name}" from template is not available.`);
         return;
       }
       const versions: string[] = Array.isArray(item.status?.versions) ? item.status.versions : [];
       if (dc.version && !versions.includes(dc.version)) {
-        errs.push(`Component "${dc.name}" version "${dc.version}" from template is not available.`);
+        errors.push(`Component "${dc.name}" version "${dc.version}" from template is not available.`);
       }
     });
 
-    setTemplateDefaultsError(errs.length ? errs.join('\n') : null);
-  }, [availableManagedComponentsListData, defaultComponents]);
+    setTemplateDefaultsError(errors.length ? errors.join('\n') : null);
+  }, [availableManagedComponentsListData, defaultComponents, setComponentsList]);
 
   useEffect(() => {
     if (!initialized.current) return;

From a3b8823c9d7aa5d60583028b8c622e4d42d9fc8a Mon Sep 17 00:00:00 2001
From: Hubert <hubert.szczepanski@sap.com>
Date: Thu, 11 Sep 2025 10:00:13 +0200
Subject: [PATCH 9/9] Removing unnecessary useEffect

---
 .../ComponentsSelectionContainer.tsx          | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
index 17c8b56c..998f8b7b 100644
--- a/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
+++ b/src/components/ComponentsSelection/ComponentsSelectionContainer.tsx
@@ -109,26 +109,6 @@ export const ComponentsSelectionContainer: React.FC<ComponentsSelectionProps> =
     setTemplateDefaultsError(errors.length ? errors.join('\n') : null);
   }, [availableManagedComponentsListData, defaultComponents, setComponentsList]);
 
-  useEffect(() => {
-    if (!initialized.current) return;
-    if (!defaultComponents?.length) return;
-    if (!componentsList?.length) return;
-
-    const anySelected = componentsList.some((c) => c.isSelected);
-    if (anySelected) return;
-
-    const updated = componentsList.map((c) => {
-      const template = defaultComponents.find((dc) => dc.name === c.name);
-      if (!template) return c;
-      const templateVersion = template.version;
-      const selectedVersion =
-        templateVersion && Array.isArray(c.versions) && c.versions.includes(templateVersion) ? templateVersion : '';
-      return { ...c, isSelected: true, selectedVersion };
-    });
-
-    setComponentsList(updated);
-  }, [defaultComponents, componentsList, setComponentsList]);
-
   if (isLoading) {
     return <Loading />;
   }