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,15 +32,24 @@ 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 [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;
       setOpen((prev) => !prev);
@@ -143,6 +154,7 @@ const MCPHealthPopoverButton = ({ mcpStatus, projectName, workspaceName, mcpName
       <AnimatedHoverTextButton
         icon={getIconForOverallStatus(mcpStatus?.status)}
         text={mcpStatus?.status ?? ''}
+        large={large}
         onClick={handleOpenerClick}
       />
       <Popover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
@@ -181,14 +193,27 @@ const StatusTable = ({ status, tableColumns, githubIssuesLink }: StatusTableProp
   );
 };
 
+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 '';
+  }
+};
+
 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,4 @@
+.statusLabel {
+  font-weight: bold;
+  margin-bottom: 1rem;
+}

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/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 { useConvertRoleBindingsToMembers } from '../../../hooks/useConvertRoleBindingsToMembers.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 = useConvertRoleBindingsToMembers(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,66 @@
-import { Button, ButtonDomRef, FlexBox, FlexBoxAlignItems, Text } from '@ui5/webcomponents-react';
+import { Button, ButtonDomRef, Link, LinkDomRef, FlexBox, FlexBoxAlignItems, Text } 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 type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
 import type { ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
-
+import type { LinkClickEventDetail } from '@ui5/webcomponents/dist/Link.js';
+import styles from './AnimatedHoverTextButton.module.css';
+import { getClassNameForOverallStatus } from '../ControlPlane/MCPHealthPopoverButton.tsx';
+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;
+  onClick: (
+    event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail> | Ui5CustomEvent<LinkDomRef, LinkClickEventDetail>,
+  ) => void;
+  large?: boolean;
 };
-export const AnimatedHoverTextButton = ({ id, text, icon, onClick }: HoverTextButtonProps) => {
+export const AnimatedHoverTextButton = ({ id, text, icon, onClick, large = false }: HoverTextButtonProps) => {
   const [hover, setHover] = useState(false);
 
   const generatedId = useId();
   id ??= generatedId;
 
+  const content = (
+    <FlexBox alignItems={FlexBoxAlignItems.Center}>
+      {hover || large ? (
+        <Text
+          className={cx(styles.text, styles[getClassNameForOverallStatus(text as ReadyStatus)], {
+            [styles.large]: large,
+          })}
+        >
+          {text}
+        </Text>
+      ) : null}
+      {icon}
+    </FlexBox>
+  );
+
+  if (large) {
+    return (
+      <Link
+        id={id}
+        className={cx(styles.link, styles[getClassNameForOverallStatus(text as ReadyStatus)])}
+        onClick={onClick}
+        onMouseLeave={() => setHover(false)}
+        onMouseOver={() => setHover(true)}
+      >
+        {content}
+      </Link>
+    );
+  }
+
   return (
     <Button
       id={id}
-      design={ButtonDesign.Transparent}
+      design={'Transparent'}
       onClick={onClick}
-      onMouseOver={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      onMouseOver={() => setHover(true)}
     >
-      <FlexBox alignItems={FlexBoxAlignItems.Center}>
-        {hover ? <Text style={{ marginRight: '8px' }}> {text}</Text> : null}
-        {icon}
-      </FlexBox>
+      {content}
     </Button>
   );
 };

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/hooks/useConvertRoleBindingsToMembers.ts

@@ -0,0 +1,31 @@
+import { Member } from '../lib/api/types/shared/members';
+
+export function useConvertRoleBindingsToMembers(
+  roleBindings?: { role: string; subjects: { kind: string; name: string }[] }[],
+): Member[] {
+  if (!roleBindings) return [];
+
+  const memberMap = new Map<string, Member>();
+
+  for (const binding of roleBindings) {
+    for (const subject of binding.subjects) {
+      const key = `${subject.kind}-${subject.name}`;
+      if (memberMap.has(key)) {
+        // Add role to existing member
+        const member = memberMap.get(key)!;
+        if (!member.roles.includes(binding.role)) {
+          member.roles.push(binding.role);
+        }
+      } else {
+        // Create new member
+        memberMap.set(key, {
+          kind: subject.kind,
+          name: subject.name,
+          roles: [binding.role],
+        });
+      }
+    }
+  }
+
+  return Array.from(memberMap.values());
+}