MCP: visualize members and MCP status in header area

public/locales/en.json

@@ -369,6 +369,7 @@
   },
   "common": {
     "all": "All",
+    "status": "Status",
     "documentation": "Documentation",
     "close": "Close",
     "cannotLoadData": "Cannot load data",

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -7,12 +7,14 @@ import {
   Button,
   PopoverDomRef,
   ButtonDomRef,
+  LinkDomRef,
 } from '@ui5/webcomponents-react';
 import { AnalyticalTableColumnDefinition } from '@ui5/webcomponents-react/wrappers';
 import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
 import '@ui5/webcomponents-icons/dist/copy';
 import { JSX, useRef, useState } from 'react';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
+import type { LinkClickEventDetail } from '@ui5/webcomponents/dist/Link.js';
 import {
   ControlPlaneStatusType,
   ReadyStatus,
@@ -30,17 +32,28 @@ type MCPHealthPopoverButtonProps = {
   projectName: string;
   workspaceName: string;
   mcpName: string;
+  large?: boolean;
 };
 
-const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName }: MCPHealthPopoverButtonProps) => {
+const MCPHealthPopoverButton = ({
+  mcpStatus,
+  projectName,
+  workspaceName,
+  mcpName,
+  large = false,
+}: MCPHealthPopoverButtonProps) => {
   const popoverRef = useRef<PopoverDomRef>(null);
+  const buttonRef = useRef<ButtonDomRef>(null);
   const [open, setOpen] = useState(false);
   const { githubIssuesSupportTicket } = useLink();
   const { t } = useTranslation();
 
-  const handleOpenerClick = (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
+  const handleOpenerClick = (
+    event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail> | Ui5CustomEvent<LinkDomRef, LinkClickEventDetail>,
+  ) => {
     if (popoverRef.current) {
-      (popoverRef.current as unknown as { opener: EventTarget | null }).opener = event.target;
+      // Prefer explicit button ref as opener (works reliably); fall back to event.target
+      (popoverRef.current as unknown as { opener: EventTarget | null }).opener = buttonRef.current ?? event.target;
       setOpen((prev) => !prev);
     }
   };
@@ -141,11 +154,13 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
   return (
     <div className="component-title-row">
       <AnimatedHoverTextButton
+        ref={buttonRef}
         icon={getIconForOverallStatus(mcpStatus?.status)}
         text={mcpStatus?.status ?? ''}
+        large={large}
         onClick={handleOpenerClick}
       />
-      <Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
+      <Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom} onClose={() => setOpen(false)}>
         <StatusTable
           status={mcpStatus}
           tableColumns={statusTableColumns}
@@ -184,11 +199,11 @@ const StatusTable = ({ status, tableColumns, githubIssuesLink }: StatusTableProp
 const getIconForOverallStatus = (status: ReadyStatus | undefined): JSX.Element => {
   switch (status) {
     case ReadyStatus.Ready:
-      return <Icon style={{ color: 'green' }} name="sap-icon://sys-enter" />;
+      return <Icon style={{ color: 'var(--sapPositiveColor)' }} name="sap-icon://sys-enter" />;
     case ReadyStatus.NotReady:
-      return <Icon style={{ color: 'red' }} name="sap-icon://pending" />;
+      return <Icon style={{ color: 'var(--sapNegativeColor)' }} name="sap-icon://pending" />;
     case ReadyStatus.InDeletion:
-      return <Icon style={{ color: 'orange' }} name="sap-icon://delete" />;
+      return <Icon style={{ color: 'var(--sapCriticalColor)' }} name="sap-icon://delete" />;
     default:
       return <></>;
   }

src/components/ControlPlane/McpStatusSection.module.css

@@ -0,0 +1,5 @@
+.statusLabel {
+  font-weight: bold;
+  margin-bottom: 0.75rem;
+  margin-left: 0.6rem;
+}

src/components/ControlPlane/McpStatusSection.tsx

@@ -0,0 +1,29 @@
+import { FlexBox, Text } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import MCPHealthPopoverButton from './MCPHealthPopoverButton.tsx';
+import { ControlPlaneStatusType } from '../../lib/api/types/crate/controlPlanes.ts';
+import styles from './McpStatusSection.module.css';
+
+interface McpStatusSectionProps {
+  mcpStatus: ControlPlaneStatusType | undefined;
+  projectName: string;
+  workspaceName: string;
+  mcpName: string;
+}
+
+export function McpStatusSection({ mcpStatus, projectName, workspaceName, mcpName }: McpStatusSectionProps) {
+  const { t } = useTranslation();
+
+  return (
+    <FlexBox direction={'Column'}>
+      <Text className={styles.statusLabel}>{t('common.status')}:</Text>
+      <MCPHealthPopoverButton
+        mcpStatus={mcpStatus}
+        projectName={projectName}
+        workspaceName={workspaceName}
+        mcpName={mcpName}
+        large
+      />
+    </FlexBox>
+  );
+}

src/components/ControlPlane/statusUtils.ts

@@ -0,0 +1,14 @@
+import { ReadyStatus } from '../../lib/api/types/crate/controlPlanes';
+
+export const getClassNameForOverallStatus = (status: ReadyStatus | undefined): string => {
+  switch (status) {
+    case ReadyStatus.Ready:
+      return 'ready';
+    case ReadyStatus.NotReady:
+      return 'not-ready';
+    case ReadyStatus.InDeletion:
+      return 'deleting';
+    default:
+      return '';
+  }
+};

src/components/ControlPlanes/List/MembersAvatarView.tsx

@@ -10,9 +10,10 @@ interface Props {
   project?: string;
   workspace?: string;
   members: Member[];
+  hideNamespaceColumn?: boolean;
 }
 
-export function MembersAvatarView({ members, project, workspace }: Props) {
+export function MembersAvatarView({ members, project, workspace, hideNamespaceColumn = false }: Props) {
   const openerId = useId();
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
   const avatars = [];
@@ -44,7 +45,7 @@ export function MembersAvatarView({ members, project, workspace }: Props) {
           setPopoverIsOpen(false);
         }}
       >
-        <MemberTable members={members} requireAtLeastOneMember={false} />
+        <MemberTable members={members} requireAtLeastOneMember={false} hideNamespaceColumn={hideNamespaceColumn} />
       </Popover>
     </div>
   );

src/components/ControlPlanes/McpMembersAvatarView/McpMembersAvatarView.module.css

@@ -0,0 +1,5 @@
+.membersTitle {
+  margin-left: 5px;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}

src/components/ControlPlanes/McpMembersAvatarView/McpMembersAvatarView.tsx

@@ -0,0 +1,24 @@
+import { MembersAvatarView } from '../List/MembersAvatarView.tsx';
+import { convertRoleBindingsToMembers } from '../../../utils/convertRoleBindingsToMembers.ts';
+import { FlexBox, Text } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import styles from './McpMembersAvatarView.module.css';
+
+interface Props {
+  project?: string;
+  workspace?: string;
+  roleBindings?: { role: string; subjects: { kind: string; name: string }[] }[];
+}
+
+export function McpMembersAvatarView({ roleBindings, project, workspace }: Props) {
+  const members = convertRoleBindingsToMembers(roleBindings);
+  const { t } = useTranslation();
+  return (
+    <FlexBox direction="Column">
+      <Text className={styles.membersTitle}>
+        {t('common.members')} ({members.length}):
+      </Text>
+      <MembersAvatarView members={members} project={project} workspace={workspace} hideNamespaceColumn />
+    </FlexBox>
+  );
+}

src/components/Helper/AnimatedHoverTextButton.module.css

@@ -0,0 +1,24 @@
+.text {
+  margin-right: 0.5rem;
+}
+
+.link:focus-within,
+.link:focus-visible {
+  background-color: transparent;
+}
+
+.ready {
+  color: var(--sapPositiveColor);
+}
+
+.not-ready {
+  color: var(--sapNegativeColor);
+}
+
+.deleting {
+  color: var(--sapCriticalColor);
+}
+
+.large {
+  font-size: 1.25rem;
+}

src/components/Helper/AnimatedHoverTextButton.tsx

@@ -1,34 +1,72 @@
-import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems, Text } from '@ui5/webcomponents-react';
+import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/copy';
-import { JSX, useId, useState } from 'react';
-import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
+import { JSX, useId, useState, forwardRef } from 'react';
 import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 
+import styles from './AnimatedHoverTextButton.module.css';
+import { getClassNameForOverallStatus } from '../ControlPlane/statusUtils';
+import { ReadyStatus } from '../../lib/api/types/crate/controlPlanes.ts';
+import cx from 'clsx';
 type HoverTextButtonProps = {
   id?: string;
   text: string;
   icon: JSX.Element;
   onClick: (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => void;
+  large?: boolean;
 };
-export const AnimatedHoverTextButton = ({ id, text, icon, onClick }: HoverTextButtonProps) => {
-  const [hover, setHover] = useState(false);
 
-  const generatedId = useId();
-  id ??= generatedId;
+export const AnimatedHoverTextButton = forwardRef<ButtonDomRef, HoverTextButtonProps>(
+  ({ id, text, icon, onClick, large = false }: HoverTextButtonProps, ref) => {
+    const [hover, setHover] = useState(false);
 
-  return (
-    <Button
-      id={id}
-      design={ButtonDesign.Transparent}
-      onClick={onClick}
-      onMouseOver={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-    >
+    const generatedId = useId();
+    id ??= generatedId;
+
+    const content = (
       <FlexBox alignItems={FlexBoxAlignItems.Center}>
-        {hover ? <Text style={{ marginRight: '8px' }}> {text}</Text> : null}
+        {hover || large ? (
+          <span
+            className={cx(styles.text, styles[getClassNameForOverallStatus(text as ReadyStatus)], {
+              [styles.large]: large,
+            })}
+          >
+            {text}
+          </span>
+        ) : null}
         {icon}
       </FlexBox>
-    </Button>
-  );
-};
+    );
+
+    if (large) {
+      return (
+        <Button
+          ref={ref}
+          id={id}
+          design={'Transparent'}
+          className={cx(styles.link, styles[getClassNameForOverallStatus(text ? (text as ReadyStatus) : undefined)])}
+          onClick={onClick}
+          onMouseLeave={() => setHover(false)}
+          onMouseOver={() => setHover(true)}
+        >
+          {content}
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        ref={ref}
+        id={id}
+        design={'Transparent'}
+        onClick={onClick}
+        onMouseLeave={() => setHover(false)}
+        onMouseOver={() => setHover(true)}
+      >
+        {content}
+      </Button>
+    );
+  },
+);
+
+AnimatedHoverTextButton.displayName = 'AnimatedHoverTextButton';

src/components/Members/MemberTable.tsx

@@ -20,6 +20,7 @@ type MemberTableProps = {
   onEditMember?: (member: Member) => void;
   isValidationError?: boolean;
   requireAtLeastOneMember: boolean;
+  hideNamespaceColumn?: boolean;
 };
 
 export const MemberTable: FC<MemberTableProps> = ({
@@ -28,6 +29,7 @@ export const MemberTable: FC<MemberTableProps> = ({
   onEditMember,
   isValidationError = false,
   requireAtLeastOneMember,
+  hideNamespaceColumn = false,
 }) => {
   const { t } = useTranslation();
 
@@ -56,11 +58,14 @@ export const MemberTable: FC<MemberTableProps> = ({
       accessor: 'role',
       width: 105,
     },
-    {
+  ];
+
+  if (!hideNamespaceColumn) {
+    columns.push({
       Header: t('MemberTable.columnNamespaceHeader'),
       accessor: 'namespace',
-    },
-  ];
+    });
+  }
 
   if (onEditMember && onDeleteMember) {
     columns.push({

src/spaces/mcp/pages/McpPage.tsx

@@ -1,5 +1,6 @@
 import {
   BusyIndicator,
+  FlexBox,
   ObjectPage,
   ObjectPageHeader,
   ObjectPageSection,
@@ -22,7 +23,7 @@ import { ManagedResources } from '../../../components/ControlPlane/ManagedResour
 import { ProvidersConfig } from '../../../components/ControlPlane/ProvidersConfig.tsx';
 import { Providers } from '../../../components/ControlPlane/Providers.tsx';
 import ComponentList from '../../../components/ControlPlane/ComponentList.tsx';
-import MCPHealthPopoverButton from '../../../components/ControlPlane/MCPHealthPopoverButton.tsx';
+
 import { useApiResource } from '../../../lib/api/useApiResource.ts';
 
 import { YamlViewButton } from '../../../components/Yaml/YamlViewButton.tsx';
@@ -43,6 +44,8 @@ import { McpHeader } from '../components/McpHeader/McpHeader.tsx';
 import { ComponentsDashboard } from '../components/ComponentsDashboard/ComponentsDashboard.tsx';
 import { ManagedControlPlaneAuthorization } from '../authorization/ManagedControlPlaneAuthorization.tsx';
 import { Center } from '../../../components/Ui/Center/Center.tsx';
+import { McpMembersAvatarView } from '../../../components/ControlPlanes/McpMembersAvatarView/McpMembersAvatarView.tsx';
+import { McpStatusSection } from '../../../components/ControlPlane/McpStatusSection.tsx';
 
 export type McpPageSectionId = 'overview' | 'crossplane' | 'flux' | 'landscapers';
 
@@ -114,12 +117,6 @@ export default function McpPage() {
                   //TODO: actionBar should use Toolbar and ToolbarButton for consistent design
                   actionsBar={
                     <div className={styles.actionsBar}>
-                      <MCPHealthPopoverButton
-                        mcpStatus={mcp?.status}
-                        projectName={projectName}
-                        workspaceName={workspaceName}
-                        mcpName={controlPlaneName}
-                      />
                       <YamlViewButton
                         variant="loader"
                         workspaceName={mcp?.status?.access?.namespace}
@@ -145,7 +142,20 @@ export default function McpPage() {
               selectedSectionId={selectedSectionId}
               headerArea={
                 <ObjectPageHeader>
-                  <McpHeader mcp={mcp} />
+                  <FlexBox gap={'2.5rem'}>
+                    <McpHeader mcp={mcp} />
+                    <McpStatusSection
+                      mcpStatus={mcp?.status}
+                      projectName={projectName}
+                      workspaceName={workspaceName}
+                      mcpName={controlPlaneName}
+                    />
+                    <McpMembersAvatarView
+                      roleBindings={mcp.spec?.authorization?.roleBindings}
+                      project={projectName}
+                      workspace={workspaceName}
+                    />
+                  </FlexBox>
                 </ObjectPageHeader>
               }
               onSelectedSectionChange={() => setSelectedSectionId(undefined)}