refactor

Author: lucasgoral

public/locales/en.json

@@ -60,7 +60,7 @@
   "ControlPlaneCard": {
     "deleteConfirmationDialog": "MCP deletion triggered. The list will refresh automatically once completed.",
     "editMCP": "Edit Managed Control Plane",
-    "duplicateMCP": "Duplicate MCP config",
+    "duplicateMCP": "Duplicate ManagedControlPlane",
     "deleteMCP": "Delete Managed Control Plane"
 
   },
@@ -391,13 +391,16 @@
     "dialogTitle": "Edit Managed Control Plane",
     "titleText": "Managed Control Plane Updated Successfully!",
     "subtitleText": "Your Managed Control Plane is being updated. It will be ready to use in just a few minutes. You can safely close this window.",
-    "editComponents": "Edit components"
+    "editComponents": "Edit components",
+    "duplicatingMCPInfo1": "Duplicating a <span>ManagedControlPlane</span> will only create a <span>ManagedControlPlane</span> with the same configuration. ",
+    "duplicatingMCPInfo2": "<b>It will NOT copy the managed resources inside</b>"
   },
   "componentsSelection": {
     "selectComponents": "Select Components",
     "selectedComponents": "Selected Components",
     "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane.",
-    "cannotLoad": "Cannot load components list"
+    "cannotLoad": "Cannot load components list",
+    "noComponentsFound": "No components found matching your search."
   },
   "Hints": {
     "CrossplaneHint": {

src/components/ComponentsSelection/ComponentsSelection.tsx

@@ -167,8 +167,8 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
               );
             })
           ) : (
-            <Infobox fullWidth variant="success">
-              <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
+            <Infobox fullWidth variant="normal" icon="search">
+              <Text>{t('componentsSelection.noComponentsFound')}</Text>
             </Infobox>
           )}
         </div>
@@ -191,7 +191,7 @@ export const ComponentsSelection: React.FC<ComponentsSelectionProps> = ({
               ))}
             </List>
           ) : (
-            <Infobox fullWidth variant="success">
+            <Infobox fullWidth variant="success" icon="add">
               <Text>{t('componentsSelection.pleaseSelectComponents')}</Text>
             </Infobox>
           )}

src/components/Ui/Infobox/Infobox.module.css

@@ -1,16 +1,32 @@
 .infobox {
-  display: inline-block;
-  border: 1px solid;
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  padding: 1rem;
   margin: 1rem 0;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  color: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.icon {
+  margin-right: 1rem;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.content {
+  flex-grow: 1;
 }
 
 .full-width {
-  display: block;
-  margin: 0;
+  width: 100%;
+  margin: 1rem 0;
 }
 
 .size-sm {
-  padding: 0.5rem 0.75rem;
+  padding: 0.75rem 1rem;
   font-size: 0.875rem;
 }
 
@@ -21,29 +37,21 @@
 
 .size-lg {
   padding: 1.5rem 2rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 .variant-normal {
-  border-color: var(--sapNeutralTextColor);
-  background-color: var(--sapNeutralBackground);
-  color: var(--sapNeutralTextColor);
+  background: linear-gradient(135deg, #6e8efb, #a777e3);
 }
 
 .variant-success {
-  border-color: var(--sapPositiveTextColor);
-  background-color: var(--sapPositiveBackground);
-  color: var(--sapPositiveTextColor);
+  background: linear-gradient(135deg, #56ab2f, #a8e063);
 }
 
 .variant-warning {
-  border-color: var(--sapCriticalTextColor);
-  background-color: var(--sapCriticalBackground);
-  color: var(--sapCriticalTextColor);
+  background: linear-gradient(135deg, #ffc837, #ff8008);
 }
 
 .variant-danger {
-  border-color: var(--sapNegativeTextColor);
-  background-color: var(--sapErrorBackground);
-  color: var(--sapNegativeTextColor);
+  background: linear-gradient(135deg, #e53935, #e35d5b);
 }

src/components/Ui/Infobox/Infobox.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import cx from 'clsx';
+import { Icon } from '@ui5/webcomponents-react';
 
 import styles from './Infobox.module.css';
 
@@ -10,6 +11,7 @@ interface LabelProps {
   children: ReactNode;
   fullWidth?: boolean;
   className?: string;
+  icon?: string;
 }
 
 export const Infobox: React.FC<LabelProps> = ({
@@ -19,6 +21,7 @@ export const Infobox: React.FC<LabelProps> = ({
   children,
   fullWidth = false,
   className,
+  icon,
 }) => {
   const infoboxClasses = cx(
     styles.infobox,
@@ -36,10 +39,9 @@ export const Infobox: React.FC<LabelProps> = ({
   );
 
   return (
-    <div>
-      <span className={infoboxClasses} id={id}>
-        {children}
-      </span>
+    <div className={infoboxClasses} id={id}>
+      {icon && <Icon name={icon} className={styles.icon} />}
+      <div className={styles.content}>{children}</div>
     </div>
   );
 };

src/components/Wizards/CreateManagedControlPlane/CreateManagedControlPlaneWizardContainer.tsx

@@ -10,16 +10,18 @@ import {
   Bar,
   Button,
   Dialog,
+  FlexBox,
   Form,
   FormGroup,
   Ui5CustomEvent,
   Wizard,
   WizardDomRef,
   WizardStep,
+  Text,
 } from '@ui5/webcomponents-react';
 
 import { SummarizeStep } from './SummarizeStep.tsx';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { useAuthOnboarding } from '../../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
 import { ErrorDialog, ErrorDialogHandle } from '../../Shared/ErrorMessageBox.tsx';
 import { CreateDialogProps } from '../../Dialogs/CreateWorkspaceDialogContainer.tsx';
@@ -57,6 +59,7 @@ import {
 } from '../../../lib/api/types/mcpResource.ts';
 import { stringify } from 'yaml';
 import { useComponentsSelectionData } from './useComponentsSelectionData.ts';
+import { Infobox } from '../../Ui/Infobox/Infobox.tsx';
 
 type CreateManagedControlPlaneWizardContainerProps = {
   isOpen: boolean;
@@ -538,19 +541,38 @@ export const CreateManagedControlPlaneWizardContainer: FC<CreateManagedControlPl
             selected={selectedStep === 'metadata'}
             data-step="metadata"
           >
-            <MetadataForm
-              key={metadataFormKey}
-              watch={watch}
-              setValue={setValue}
-              register={register}
-              errors={errors}
-              isEditMode={isEditMode}
-              disableChargingFields={!!selectedTemplate}
-              namePrefix={templateAffixes.namePrefix}
-              displayNamePrefix={templateAffixes.displayNamePrefix}
-              nameSuffix={templateAffixes.nameSuffix}
-              displayNameSuffix={templateAffixes.displayNameSuffix}
-            />
+            <FlexBox direction={'Row'} justifyContent={'SpaceBetween'} gap={16}>
+              <div style={{ border: '1px solid red', width: '50%' }}>
+                <MetadataForm
+                  key={metadataFormKey}
+                  watch={watch}
+                  setValue={setValue}
+                  register={register}
+                  errors={errors}
+                  isEditMode={isEditMode}
+                  disableChargingFields={!!selectedTemplate}
+                  namePrefix={templateAffixes.namePrefix}
+                  displayNamePrefix={templateAffixes.displayNamePrefix}
+                  nameSuffix={templateAffixes.nameSuffix}
+                  displayNameSuffix={templateAffixes.displayNameSuffix}
+                />
+              </div>
+              {isDuplicateMode && (
+                <div style={{ border: '1px solid red', width: '50%' }}>
+                  <Infobox size={'sm'} variant={'warning'}>
+                    <Text>
+                      <Trans
+                        i18nKey="editMCP.duplicatingMCPInfo1"
+                        components={{ span: <span className="mono-font" /> }}
+                      />
+                    </Text>
+                    <Text>
+                      <Trans i18nKey="editMCP.duplicatingMCPInfo2" components={{ b: <b /> }} />
+                    </Text>
+                  </Infobox>
+                </div>
+              )}
+            </FlexBox>
           </WizardStep>
           <WizardStep
             icon="user-edit"