Merge branch 'main' into renovate/node-22

Author: andreaskienle

.env.template

@@ -15,3 +15,6 @@ API_BACKEND_URL=
 # Replace this value with a strong, randomly generated string (at least 32 characters).
 # Example for generation in Node.js: require('crypto').randomBytes(32).toString('hex')
 COOKIE_SECRET=
+
+FEEDBACK_SLACK_URL=
+FEEDBACK_URL_LINK=

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": {
@@ -95,7 +97,15 @@
   },
   "ShellBar": {
     "betaButtonDescription": "This web app is currently in Beta, and may not ready for productive use. We're actively improving the experience and would love your feedback — your input helps shape the future of the app!",
-    "signOutButton": "Sign Out"
+    "signOutButton": "Sign Out",
+    "feedbackMessageLabel": "Message",
+    "feedbackRatingLabel": "Rating",
+    "feedbackHeader": "Your feedback",
+    "feedbackButton": "Send feedback",
+    "feedbackButtonInfo": "Give us your feedback",
+    "feedbackPlaceholder": "Please let us know what you think about our application",
+    "feedbackNotification": "*Slack notification with your email address will be shared with our Operations Team. If you have a special Feature request in mind, please create here.",
+    "feedbackThanks": "Thank you for your feedback!"
   },
   "CreateProjectDialog": {
     "toastMessage": "Project creation triggered. The list will refresh automatically once completed."
@@ -256,21 +266,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."
   }
 }

server/config/env.js

@@ -13,6 +13,8 @@ const schema = {
     POST_LOGIN_REDIRECT: { type: "string" },
     COOKIE_SECRET: { type: "string" },
     API_BACKEND_URL: { type: "string" },
+    FEEDBACK_SLACK_URL: { type: "string" },
+    FEEDBACK_URL_LINK: { type: "string" },
 
     // System variables
     NODE_ENV: { type: "string", enum: ["development", "production"] },

server/routes/feedback.js

@@ -0,0 +1,35 @@
+import fetch from 'node-fetch';
+import fp from "fastify-plugin";
+
+async function feedbackRoute(fastify) {
+  const { FEEDBACK_SLACK_URL } = fastify.config;
+
+  fastify.post('/feedback', async (request, reply) => {
+    const { message, rating, user, environment } = request.body;
+
+    if (!message || !rating || !user || !environment) {
+      return reply.status(400).send({ error: 'Missing required fields' });
+    }
+
+    try {
+      const res = await fetch(FEEDBACK_SLACK_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ message, rating, user, environment }),
+      });
+
+      if (!res.ok) {
+        return reply.status(500).send({ error: 'Slack API error' });
+      }
+      return reply.send({ message: res, });
+    } catch (err) {
+      fastify.log.error('Slack error:', err);
+      return reply.status(500).send({ error: 'Request failed' });
+    }
+  });
+}
+
+export default fp(feedbackRoute);
+

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;
+}