Create Managed Control Plane Wizard - MVP version

public/locales/en.json

@@ -40,7 +40,9 @@
     "tableHeaderUsage": "Usage"
   },
   "ControlPlaneListToolbar": {
-    "buttonText": "Workspace"
+    "buttonText": "Workspace",
+    "deleteWorkspace": "Delete workspace",
+    "createNewManagedControlPlane": "Create new Managed Control Plane"
   },
   "ControlPlaneListWorkspaceGridTile": {
     "deleteConfirmationDialog": "Workspace deletion triggered. The list will refresh automatically once completed.",
@@ -79,8 +81,8 @@
     "menuCopy": "Copy to clipboard"
   },
   "IllustratedBanner": {
-    "titleMessage": "No ManagedControlPlane",
-    "subtitleMessage": "Create a ManagedControlPlane to get started",
+    "titleMessage": "No Managed Control Planes found",
+    "subtitleMessage": "Get started by creating your first Managed Control Plane.",
     "helpButton": "Help"
   },
   "IntelligentBreadcrumbs": {
@@ -256,21 +258,39 @@
   "validationErrors": {
     "required": "This field is required!",
     "properFormatting": "Use A-Z, a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",
+    "properFormattingLowercase": "Use lowercase a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",
     "max25chars": "Max length is 25 characters.",
     "userExists": "User with this email already exists!",
     "atLeastOneUser": "You need to have at least one member assigned."
   },
   "common": {
     "close": "Close",
-    "cannotLoadData": "Cannot load data"
+    "cannotLoadData": "Cannot load data",
+    "metadata": "Metadata",
+    "members": "Members",
+    "summarize": "Summarize",
+    "namespace": "Namespace",
+    "region": "Region",
+    "success": "Success",
+    "displayName": "Display Name",
+    "name": "Name"
   },
   "buttons": {
     "viewResource": "View resource",
     "download": "Download",
-    "copy": "Copy"
+    "copy": "Copy",
+    "next": "Next",
+    "create": "Create",
+    "close": "Close",
+    "back": "Back"
   },
   "yaml": {
     "copiedToClipboard": "YAML copied to clipboard!",
     "YAML": "YAML"
+  },
+  "createMCP": {
+    "dialogTitle": "Create Managed Control Plane",
+    "titleText": "Managed Control Plane Created Successfully!",
+    "subtitleText": "Your Managed Control Plane is being set up. It will be ready to use in just a few minutes. You can safely close this window."
   }
 }

src/components/ControlPlanes/ControlPlanesListMenu.tsx

@@ -0,0 +1,72 @@
+import {
+  Button,
+  ButtonDomRef,
+  Menu,
+  MenuItem,
+  Ui5CustomEvent,
+  MenuDomRef,
+} from '@ui5/webcomponents-react';
+import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
+import { Dispatch, FC, SetStateAction, useRef, useState } from 'react';
+import '@ui5/webcomponents-icons/dist/copy';
+import '@ui5/webcomponents-icons/dist/accept';
+
+import { useTranslation } from 'react-i18next';
+
+type ControlPlanesListMenuProps = {
+  setDialogDeleteWsIsOpen: Dispatch<SetStateAction<boolean>>;
+  setIsCreateManagedControlPlaneWizardOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ControlPlanesListMenu: FC<ControlPlanesListMenuProps> = ({
+  setDialogDeleteWsIsOpen,
+  setIsCreateManagedControlPlaneWizardOpen,
+}) => {
+  const popoverRef = useRef<MenuDomRef>(null);
+  const [open, setOpen] = useState(false);
+
+  const { t } = useTranslation();
+
+  const handleOpenerClick = (
+    e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>,
+  ) => {
+    if (popoverRef.current && e.currentTarget) {
+      popoverRef.current.opener = e.currentTarget as HTMLElement;
+      setOpen((prev) => !prev);
+    }
+  };
+
+  return (
+    <>
+      <Button icon="overflow" icon-end onClick={handleOpenerClick} />
+      <Menu
+        ref={popoverRef}
+        open={open}
+        onItemClick={(event) => {
+          const action = (event.detail.item as HTMLElement).dataset.action;
+          if (action === 'newManagedControlPlane') {
+            setIsCreateManagedControlPlaneWizardOpen(true);
+          }
+          if (action === 'deleteWorkspace') {
+            setDialogDeleteWsIsOpen(true);
+          }
+
+          setOpen(false);
+        }}
+      >
+        <MenuItem
+          key={'add'}
+          text={t('ControlPlaneListToolbar.createNewManagedControlPlane')}
+          data-action="newManagedControlPlane"
+          icon="add"
+        />
+        <MenuItem
+          key={'delete'}
+          text={t('ControlPlaneListToolbar.deleteWorkspace')}
+          data-action="deleteWorkspace"
+          icon="delete"
+        />
+      </Menu>
+    </>
+  );
+};

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -37,6 +37,9 @@ import { YamlViewButtonWithLoader } from '../../Yaml/YamlViewButtonWithLoader.ts
 import { IllustratedBanner } from '../../Ui/IllustratedBanner/IllustratedBanner.tsx';
 import { useLink } from '../../../lib/shared/useLink.ts';
 import IllustrationMessageType from '@ui5/webcomponents-fiori/dist/types/IllustrationMessageType.js';
+import styles from './WorkspacesList.module.css';
+import { ControlPlanesListMenu } from '../ControlPlanesListMenu.tsx';
+import { CreateManagedControlPlaneWizardContainer } from '../../Wizards/CreateManagedControlPlaneWizardContainer.tsx';
 
 interface Props {
   projectName: string;
@@ -47,6 +50,10 @@ export function ControlPlaneListWorkspaceGridTile({
   projectName,
   workspace,
 }: Props) {
+  const [
+    isCreateManagedControlPlaneWizardOpen,
+    setIsCreateManagedControlPlaneWizardOpen,
+  ] = useState(false);
   const workspaceName = workspace.metadata.name;
   const workspaceDisplayName =
     workspace.metadata.annotations?.[DISPLAY_NAME_ANNOTATION] || '';
@@ -103,7 +110,6 @@ export function ControlPlaneListWorkspaceGridTile({
         <Panel
           headerLevel="H2"
           style={{ margin: '12px 12px 12px 0' }}
-          collapsed={controlplanes?.length === 0}
           header={
             <div
               style={{
@@ -131,18 +137,17 @@ export function ControlPlaneListWorkspaceGridTile({
                 workspace={workspaceName}
               />
               <FlexBox justifyContent={'SpaceBetween'} gap={10}>
-                <Button
-                  design={'Transparent'}
-                  icon="delete"
-                  onClick={async () => {
-                    setDialogDeleteWsIsOpen(true);
-                  }}
-                />
                 <YamlViewButtonWithLoader
                   workspaceName={workspace.metadata.namespace}
                   resourceName={workspaceName}
                   resourceType={'workspaces'}
                 />
+                <ControlPlanesListMenu
+                  setDialogDeleteWsIsOpen={setDialogDeleteWsIsOpen}
+                  setIsCreateManagedControlPlaneWizardOpen={
+                    setIsCreateManagedControlPlaneWizardOpen
+                  }
+                />
               </FlexBox>
             </div>
           }
@@ -159,6 +164,18 @@ export function ControlPlaneListWorkspaceGridTile({
                 link: mcpCreationGuide,
                 buttonText: t('IllustratedBanner.helpButton'),
               }}
+              button={
+                <Button
+                  className={styles.createButton}
+                  icon={'add'}
+                  design={'Emphasized'}
+                  onClick={() => {
+                    setIsCreateManagedControlPlaneWizardOpen(true);
+                  }}
+                >
+                  {t('ControlPlaneListToolbar.createNewManagedControlPlane')}
+                </Button>
+              }
             />
           ) : (
             <Grid defaultSpan="XL4 L4 M7 S12">
@@ -191,6 +208,12 @@ export function ControlPlaneListWorkspaceGridTile({
           );
         }}
       />
+      <CreateManagedControlPlaneWizardContainer
+        isOpen={isCreateManagedControlPlaneWizardOpen}
+        setIsOpen={setIsCreateManagedControlPlaneWizardOpen}
+        projectName={projectNamespace}
+        workspaceName={workspaceName}
+      />
     </>
   );
 }

src/components/ControlPlanes/List/MembersAvatarView.tsx

@@ -49,7 +49,7 @@ export function MembersAvatarView({ members, project, workspace }: Props) {
           setPopoverIsOpen(false);
         }}
       >
-        <MemberTable members={members} />
+        <MemberTable members={members} requireAtLeastOneMember={false} />
       </Popover>
     </div>
   );

src/components/ControlPlanes/List/WorkspacesList.module.css

@@ -0,0 +1,3 @@
+.createButton {
+  margin-bottom: 2rem;
+}

src/components/Dialogs/CreateProjectWorkspaceDialog.module.css

@@ -0,0 +1,5 @@
+.input {
+  width: 100%;
+  margin-bottom: 2rem;
+  max-width: 40ch;
+}

src/components/Dialogs/CreateProjectWorkspaceDialog.tsx

@@ -1,13 +1,4 @@
-import {
-  Bar,
-  Button,
-  Dialog,
-  Form,
-  FormGroup,
-  FormItem,
-  Input,
-  Label,
-} from '@ui5/webcomponents-react';
+import { Bar, Button, Dialog, FormGroup } from '@ui5/webcomponents-react';
 
 import { Member } from '../../lib/api/types/shared/members';
 import { ErrorDialog, ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
@@ -18,11 +9,12 @@ import { KubectlCreateWorkspaceDialog } from './KubectlCommandInfo/KubectlCreate
 import { KubectlCreateProjectDialog } from './KubectlCommandInfo/KubectlCreateProjectDialog.tsx';
 
 import { EditMembers } from '../Members/EditMembers.tsx';
-// import { useFrontendConfig } from '../../context/FrontendConfigContext.tsx';
+
 import { useTranslation } from 'react-i18next';
 
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { MetadataForm } from './MetadataForm.tsx';
 
 export type OnCreatePayload = {
   name: string;
@@ -56,12 +48,14 @@ export function CreateProjectWorkspaceDialog({
   setValue,
   projectName,
 }: CreateProjectWorkspaceDialogProps) {
-  // const { links } = useFrontendConfig();
   const { t } = useTranslation();
   const [isKubectlDialogOpen, setIsKubectlDialogOpen] = useState(false);
 
   const openKubectlDialog = () => setIsKubectlDialogOpen(true);
   const closeKubectlDialog = () => setIsKubectlDialogOpen(false);
+  const setMembers = (members: Member[]) => {
+    setValue('members', members);
+  };
 
   return (
     <>
@@ -79,7 +73,6 @@ export function CreateProjectWorkspaceDialog({
               >
                 <KubectlInfoButton onClick={openKubectlDialog} />
                 <Button onClick={() => setIsOpen(false)}>
-                  {' '}
                   {t('CreateProjectWorkspaceDialog.cancelButton')}
                 </Button>
                 <Button design="Emphasized" onClick={() => onCreate()}>
@@ -91,11 +84,20 @@ export function CreateProjectWorkspaceDialog({
         }
         onClose={() => setIsOpen(false)}
       >
-        <CreateProjectWorkspaceDialogContent
-          members={members}
+        <MetadataForm
           register={register}
           errors={errors}
-          setValue={setValue}
+          sideFormContent={
+            <FormGroup
+              headerText={t('CreateProjectWorkspaceDialog.membersHeader')}
+            >
+              <EditMembers
+                members={members}
+                isValidationError={!!errors.members}
+                onMemberChanged={setMembers}
+              />
+            </FormGroup>
+          }
         />
       </Dialog>
       <KubectlCreateWorkspaceDialog
@@ -111,68 +113,3 @@ export function CreateProjectWorkspaceDialog({
     </>
   );
 }
-
-interface CreateProjectWorkspaceDialogContentProps {
-  members: Member[];
-  register: UseFormRegister<CreateDialogProps>;
-  errors: FieldErrors<CreateDialogProps>;
-  setValue: UseFormSetValue<CreateDialogProps>;
-}
-
-function CreateProjectWorkspaceDialogContent({
-  members,
-  register,
-  errors,
-  setValue,
-}: CreateProjectWorkspaceDialogContentProps) {
-  const { t } = useTranslation();
-
-  const setMembers = (members: Member[]) => {
-    setValue('members', members);
-  };
-  return (
-    <Form>
-      <FormGroup headerText={t('CreateProjectWorkspaceDialog.metadataHeader')}>
-        <FormItem
-          labelContent={
-            <Label required>
-              {t('CreateProjectWorkspaceDialog.nameLabel')}
-            </Label>
-          }
-        >
-          <Input
-            id="name"
-            {...register('name')}
-            valueState={errors.name ? 'Negative' : 'None'}
-            valueStateMessage={<span>{errors.name?.message}</span>}
-            required
-          />
-        </FormItem>
-
-        <FormItem
-          labelContent={
-            <Label>{t('CreateProjectWorkspaceDialog.displayNameLabel')}</Label>
-          }
-        >
-          <Input id="displayName" {...register('displayName')} />
-        </FormItem>
-        <FormItem
-          labelContent={
-            <Label>
-              {t('CreateProjectWorkspaceDialog.chargingTargetLabel')}
-            </Label>
-          }
-        >
-          <Input id="chargingTarget" {...register('chargingTarget')} />
-        </FormItem>
-      </FormGroup>
-      <FormGroup headerText={t('CreateProjectWorkspaceDialog.membersHeader')}>
-        <EditMembers
-          members={members}
-          isValidationError={!!errors.members}
-          onMemberChanged={setMembers}
-        />
-      </FormGroup>
-    </Form>
-  );
-}