Feat/mcp templates #278

Hubert-Szczepanski-SAP · 2025-09-10T09:56:14Z

What this PR does / why we need it:

This is MCP templates feature without connected API

Which issue(s) this PR fixes:
Fixes #

Special notes for your reviewer:

Copilot

Pull Request Overview

This PR implements MCP (Managed Control Plane) templates feature to provide predefined configurations when creating managed control planes. The feature includes utility functions for handling prefixes/suffixes and IDP prefix stripping, type definitions for templates, and UI components to support template-based creation workflows.

Adds utility functions for name formatting and IDP prefix handling
Implements MCP template type definitions and helper functions
Integrates template support into the creation wizard with form modifications and validation

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/utils/stripIdpPrefix.ts	Utility function to remove IDP prefixes from principal names
src/utils/buildNameWithPrefixesAndSufixes.ts	Function to apply name prefixes and suffixes with deduplication logic
src/lib/api/types/templates/mcpTemplate.ts	Type definitions and helpers for MCP templates
src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx	Main wizard container with template integration and form handling
src/components/Dialogs/MetadataForm.tsx	Enhanced metadata form with prefix/suffix support and charging field controls
src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx	Grid tile component with member deduplication and template support
src/components/ControlPlanes/ControlPlanesListMenu.tsx	Menu component for template selection
src/components/ComponentsSelection/ComponentsSelectionContainer.tsx	Component selection with template defaults and validation
src/components/ComponentsSelection/ComponentsSelection.tsx	Component selection UI with version validation
public/locales/en.json	Localization strings for component version selection

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-10T10:53:07Z

src/lib/api/types/templates/mcpTemplate.ts

+        sufix?: string;
+      };
+      name: {
+        prefix?: string;
+        sufix?: string;


The property name 'sufix' should be spelled 'suffix' for consistency with standard English spelling.

Suggested change

sufix?: string;

};

name: {

prefix?: string;

sufix?: string;

suffix?: string;

};

name: {

prefix?: string;

suffix?: string;

Copilot · 2025-09-10T10:53:08Z

src/lib/api/types/templates/mcpTemplate.ts

+        sufix?: string;
+      };
+      name: {
+        prefix?: string;
+        sufix?: string;


The property name 'sufix' should be spelled 'suffix' for consistency with standard English spelling.

Suggested change

sufix?: string;

};

name: {

prefix?: string;

sufix?: string;

suffix?: string;

};

name: {

prefix?: string;

suffix?: string;

Copilot · 2025-09-10T10:53:08Z

src/utils/buildNameWithPrefixesAndSufixes.ts

@@ -0,0 +1,25 @@
+export function buildNameWithPrefixesAndSufixes(


The function name should be 'buildNameWithPrefixesAndSuffixes' - 'Sufixes' should be spelled 'Suffixes'.

Suggested change

export function buildNameWithPrefixesAndSufixes(

export function buildNameWithPrefixesAndSuffixes(

Copilot · 2025-09-10T10:53:09Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

+
+  const normalizeChargingTargetType = useCallback((val?: string | null) => (val ?? '').trim().toLowerCase(), []);
+
+  // Here we will use OnboardingAPI to get all avaliable templates


The word 'avaliable' should be spelled 'available'.

Suggested change

// Here we will use OnboardingAPI to get all avaliable templates

// Here we will use OnboardingAPI to get all available templates

Copilot · 2025-09-10T10:53:09Z

src/utils/buildNameWithPrefixesAndSufixes.spec.ts

@@ -0,0 +1,50 @@
+import { buildNameWithPrefixesAndSufixes } from './buildNameWithPrefixesAndSufixes';


The import should be updated to 'buildNameWithPrefixesAndSuffixes' to match the corrected function name.

Copilot · 2025-09-10T10:53:09Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

+      nameSuffix: selectedTemplate?.spec.meta.name?.sufix ?? '',
+      displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',
+      displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',


The property access should be 'suffix' instead of 'sufix' to match the corrected type definition.

Suggested change

nameSuffix: selectedTemplate?.spec.meta.name?.sufix ?? '',

displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',

displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',

nameSuffix: selectedTemplate?.spec.meta.name?.suffix ?? '',

displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',

displayNameSuffix: selectedTemplate?.spec.meta.displayName?.suffix ?? '',

Copilot · 2025-09-10T10:53:10Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

+      namePrefix: selectedTemplate?.spec.meta.name?.prefix ?? '',
+      nameSuffix: selectedTemplate?.spec.meta.name?.sufix ?? '',
+      displayNamePrefix: selectedTemplate?.spec.meta.displayName?.prefix ?? '',
+      displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',


The property access should be 'suffix' instead of 'sufix' to match the corrected type definition.

Suggested change

displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',

displayNameSuffix: selectedTemplate?.spec.meta.displayName?.suffix ?? '',

Copilot · 2025-09-10T10:53:10Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -39,12 +39,16 @@ 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';


The import path should be updated to reflect the corrected function name 'buildNameWithPrefixesAndSuffixes'.

Suggested change

import { buildNameWithPrefixesAndSufixes } from '../../../utils/buildNameWithPrefixesAndSufixes.ts';

import { buildNameWithPrefixesAndSuffixes } from '../../../utils/buildNameWithPrefixesAndSuffixes.ts';

lucasgoral · 2025-09-10T12:18:34Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

+  ]);
+
+  const normalizeMemberRole = useCallback((r?: string | null) => {
+    const v = (r ?? '').toString().trim().toLowerCase();


please use meaningful variable names

lucasgoral · 2025-09-10T12:21:37Z

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -123,17 +184,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);


please use meaningful variable name or destructure object
return list.some(({isSelected,selectedVersion }) => isSelected && !selectedVersion);

lucasgoral · 2025-09-10T12:22:32Z

src/components/Dialogs/MetadataForm.tsx

-        <Input id="displayName" {...register('displayName')} className={styles.input} />
+
+        {resolvedDisplayNamePrefix || resolvedDisplayNameSuffix ? (
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>


Move style to .css file

lucasgoral · 2025-09-10T12:22:59Z

src/components/Dialogs/MetadataForm.tsx

-        />
+
+        {resolvedNamePrefix || resolvedNameSuffix ? (
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>


Move style to .css file

lucasgoral · 2025-09-10T12:23:48Z

src/components/Dialogs/MetadataForm.tsx

+  const resolvedDisplayNameSuffix = (propDisplayNameSuffix || '').trim();
+
+  const computeCore = (full: string, prefix: string, suffix: string) => {
+    let v = full ?? '';


please change to meaningful variable name

andreaskienle · 2025-09-10T12:30:49Z

src/components/ComponentsSelection/ComponentsSelectionContainer.tsx

-  }, [availableManagedComponentsListData, setComponentsList]);
+  }, [availableManagedComponentsListData, setComponentsList, defaultComponents]);
+
+  useEffect(() => {


Can you check if this useEffect is necessary? Also the one below?

with the first one is generating a lot of error in console, without the second one it doesn't work

Maybe you can at least add comments describing what code inside these useEffects do to make it easier to understand

Ok I think I misunderstood this request from @andreaskienle . I simplified it, merged it to one useEffect. The last useEffect was needed when we have template step at the beginning, but in this scenario it's not actually needed.

…ct/ui-frontend into feat/mcp-templates

lucasgoral

LGTM :)

Hubert-Szczepanski-SAP added 6 commits September 10, 2025 10:57

Templates loaded from file onboardingAPI TBD

37793d8

removing example template

3e601de

Merge branch 'main' into feat/mcp-templates

c59c494

linter auto fixes

49ce9b9

fixing linter issues

fd97f90

fixing linter

28965e1

andreaskienle requested a review from Copilot September 10, 2025 10:51

Copilot AI reviewed Sep 10, 2025

View reviewed changes

Hubert-Szczepanski-SAP added 2 commits September 10, 2025 13:39

Fixing spelling

207ceac

Merge branch 'main' into feat/mcp-templates

7c113f7

lucasgoral requested changes Sep 10, 2025

View reviewed changes

andreaskienle reviewed Sep 10, 2025

View reviewed changes

Hubert-Szczepanski-SAP added 6 commits September 10, 2025 14:42

PR requested changes

ac877b9

Merge branch 'feat/mcp-templates' of https://github.com/openmcp-proje…

993de40

…ct/ui-frontend into feat/mcp-templates

Merge branch 'main' into feat/mcp-templates

455bbd5

PR comments

b6e6cfd

Merge branch 'feat/mcp-templates' of https://github.com/openmcp-proje…

a8d4889

…ct/ui-frontend into feat/mcp-templates

Removing unnecessary useEffect

a3b8823

lucasgoral approved these changes Sep 11, 2025

View reviewed changes

		@@ -0,0 +1,25 @@
		export function buildNameWithPrefixesAndSufixes(


		const normalizeChargingTargetType = useCallback((val?: string \| null) => (val ?? '').trim().toLowerCase(), []);

		// Here we will use OnboardingAPI to get all avaliable templates

		@@ -0,0 +1,50 @@
		import { buildNameWithPrefixesAndSufixes } from './buildNameWithPrefixesAndSufixes';

	displayNameSuffix: selectedTemplate?.spec.meta.displayName?.sufix ?? '',
	displayNameSuffix: selectedTemplate?.spec.meta.displayName?.suffix ?? '',

	import { buildNameWithPrefixesAndSufixes } from '../../../utils/buildNameWithPrefixesAndSufixes.ts';
	import { buildNameWithPrefixesAndSuffixes } from '../../../utils/buildNameWithPrefixesAndSuffixes.ts';

Feat/mcp templates #278

Are you sure you want to change the base?

Feat/mcp templates #278

Conversation

Hubert-Szczepanski-SAP commented Sep 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lucasgoral left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!