feat: member card

Author: Lasserich

public/locales/en.json

@@ -15,6 +15,9 @@
   "ComponentList": {
     "tableComponentHeader": "Name",
     "tableVersionHeader": "Version"
+  },
+  "MemberList": {
+    
   },
   "FluxList": {
     "tableNameHeader": "Name",
@@ -416,6 +419,12 @@
         "unmanaged": "Unmanaged"
       }
     },
+    "MembersHint": {
+      "title": "Members",
+      "subtitle": "Manage access to your Managed Control Plane",
+      "users": "Users",
+      "serviceAccounts": "Service Accounts"
+    },
     "ESOHint": {
       "title": "ESO",
       "subtitle": "Secure secrets with rotation",

public/members.svg

@@ -35,7 +35,7 @@ export const ComponentCard: React.FC<GenericHintProps & {
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? `v${version ?? ''}` : undefined}
+            additionalText={enabled && version ? `v${version}` : undefined}
             avatar={
               <img
                 src={config.iconSrc}

src/components/BentoGrid/ComponentCard/ComponentCard.tsx

@@ -3,9 +3,10 @@ import { GenericHintConfig } from '../../../types/types';
 import {
   calculateCrossplaneSegments,
   calculateGitOpsSegments,
+  calculateMembersSegments,
   calculateVaultSegments,
 
-} from '../../../utils/hintsCardsRowCalculations';
+} from '../../../utils/componentCardCalculations';
 
 export const useCrossplaneHintConfig = (): GenericHintConfig => {
   const { t } = useTranslation();
@@ -60,8 +61,23 @@ export const useKyvernoHintConfig = (): GenericHintConfig => {
     subtitle: t('Hints.KyvernoHint.subtitle'),
     iconSrc: '/kyverno.svg',
     iconAlt: 'Kyverno',
-    iconStyle: { borderRadius: '0' }, // Vault icon should not be rounded
+    iconStyle: { borderRadius: '0' }, // Kyverno icon should not be rounded
     calculateSegments: (allItems, isLoading, error, enabled) =>
       calculateVaultSegments(allItems, isLoading, error, enabled, t),
   };
 };
+
+export const useMembersHintConfig = (): GenericHintConfig => {
+  const { t } = useTranslation();
+
+  return {
+    title: t('Hints.MembersHint.title'),
+    subtitle: t('Hints.MembersHint.subtitle'),
+    iconSrc: '/members.svg',
+    iconAlt: 'Members',
+    iconStyle: { borderRadius: '0' }, // Members icon should not be rounded
+    calculateSegments: (allItems, isLoading, error, enabled) =>
+      calculateMembersSegments(allItems, isLoading, error, enabled, t),
+    // calculateHoverData: (allItems, enabled) => calculateGitOpsHoverDataGeneric(allItems, enabled, t),
+  };
+};

src/components/BentoGrid/ComponentCard/componentConfigs.ts

@@ -79,6 +79,5 @@ export const ControlPlane = (
 ): Resource<ControlPlaneType> => {
   return {
     path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}--ws-${workspaceName}/managedcontrolplanes/${controlPlaneName}`,
-    jq: '{ spec: .spec | {components},  status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}],  access: .status.components.authentication.access, status: .status.status }}',
-  };
+    jq: '{ spec: .spec | {components, authorization},  status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}],  access: .status.components.authentication.access, status: .status.status }}',  };
 };

src/lib/api/types/crate/controlPlanes.ts

@@ -8,6 +8,11 @@
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.expandedMembersGrid {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  height: 200px !important; /* Reduced height for members view without graph */
+}
+
 .expandedCard {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   border: 1px solid var(--sapObjectHeader_BorderColor) !important;
@@ -68,3 +73,48 @@
     transform: translateY(0);
   }
 }
+
+/* Action bar styles */
+.actionsBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+/* Main container styles */
+.mainContainer {
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+  padding-top: 16px;
+  padding-bottom: 12px;
+}
+
+/* Card content container */
+.cardContentContainer {
+  position: relative;
+  height: 100%;
+}
+
+/* Details panel bottom spacing */
+.detailsPanelBottom {
+  height: 12px;
+  background-color: #f5f5f5;
+  margin-bottom: 32px;
+  border-radius: 0 0 8px 8px;
+}
+
+/* Table sections spacing */
+.tableSection {
+  margin-top: 24px;
+}
+
+.crossplaneTableElement {
+  margin-top: 16px;
+}
+
+/* First crossplane table element (no top margin) */  
+.crossplaneTableElementFirst {
+  margin-top: 24px;
+}