Merge branch 'main' into ft/hints

Author: Lasserich

public/locales/en.json

@@ -143,7 +143,9 @@
   },
   "MemberTable": {
     "columnEmailHeader": "Email",
-    "columnRoleHeader": "Role"
+    "columnRoleHeader": "Role",
+    "columnTypeHeader": "Type",
+    "columnNamespaceHeader": "Namespace"
   },
   "IllustratedError": {
     "titleText": "Something went wrong",
@@ -163,7 +165,12 @@
     "membersHeader": "Members"
   },
   "EditMembers": {
-    "addButton": "Add"
+    "addButton": "Add new member or service account",
+    "editHeader": "Edit member or service account",
+    "addHeader": "Add new member or service account",
+    "saveButton": "Save changes",
+    "defaultNamespaceInfo": "Leave empty to use <span>default</span> namespace",
+    "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information."
   },
 
   "ProjectsPage": {
@@ -292,20 +299,18 @@
   "Graphs": {
     "colorsProvider": "Provider",
     "colorsProviderConfig": "Provider Config",
-    "colorizedTitle": "Visualize: ",
+    "colorizedTitle": "Group by: ",
+    "colorsFlux": "Flux",
     "loadingError": "Error loading graph data",
     "loadingGraph": "Loading graph data...",
     "noResources": "No resources to display"
   },
-  "GraphsLegend": {
-    "title": "Legend"
-  },
   "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.",
     "maxChars": "Max length is {{maxLength}} characters.",
-    "userExists": "User with this email already exists!",
+    "userExists": "User with this name already exists!",
     "atLeastOneUser": "You need to have at least one member assigned.",
     "notValidChargingTargetFormat": "Use lowercase letters a-f, numbers 0-9, and hyphens (-) in the format: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
   },
@@ -330,7 +335,8 @@
     "ready": "Ready",
     "synced": "Synced",
     "healthy": "Healthy",
-    "installed": "Installed"
+    "installed": "Installed",
+    "none": "None"
   },
   "errors": {
     "installError": "Install error",
@@ -345,7 +351,8 @@
     "next": "Next",
     "create": "Create",
     "close": "Close",
-    "back": "Back"
+    "back": "Back",
+    "cancel": "Cancel"
   },
   "yaml": {
     "copiedToClipboard": "YAML copied to clipboard!",

src/components/ControlPlane/ComponentList.tsx

@@ -41,13 +41,7 @@ export default function ComponentList({ mcp }: { mcp: ControlPlaneType }) {
 
   return (
     <div>
-      <AnalyticalTable
-        scaleWidthMode="Smart"
-        columns={componentTableColumns}
-        minRows={0}
-        data={data}
-        style={{ marginLeft: '12px', marginRight: '12px' }}
-      />
+      <AnalyticalTable scaleWidthMode="Smart" columns={componentTableColumns} minRows={0} data={data} />
     </div>
   );
 }

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -49,6 +49,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
 
   const { mcpCreationGuide } = useLink();
   const errorView = createErrorView(cpsError);
+  const shouldCollapsePanel = !!errorView;
 
   function createErrorView(error: APIError) {
     if (error) {
@@ -76,7 +77,8 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
       >
         <Panel
           headerLevel="H2"
-          style={{ margin: '12px 12px 12px 0' }}
+          style={{ maxWidth: '1280px', margin: '0px auto 0px auto', width: '100%' }}
+          collapsed={shouldCollapsePanel}
           header={
             <div
               style={{

src/components/Dialogs/CreateProjectDialog.cy.tsx

@@ -53,7 +53,7 @@ export function CreateProjectDialogContainer({
 
   useEffect(() => {
     if (username) {
-      setValue('members', [{ name: username, roles: [MemberRoles.admin], kind: 'User' }]);
+      setValue('members', [{ name: username, role: MemberRoles.admin, kind: 'User' }]);
     }
     if (!isOpen) {
       clearForm();

src/components/Dialogs/CreateProjectDialogContainer.tsx

@@ -68,7 +68,7 @@ export function CreateWorkspaceDialogContainer({
 
   useEffect(() => {
     if (username) {
-      setValue('members', [{ name: username, roles: [MemberRoles.admin], kind: 'User' }]);
+      setValue('members', [{ name: username, role: MemberRoles.admin, kind: 'User' }]);
     }
     if (!isOpen) {
       clearForm();

src/components/Dialogs/CreateWorkspaceDialogContainer.tsx

@@ -9,6 +9,7 @@
   position: relative;
   font-family: var(--sapFontFamily);
   pointer-events: auto;
+  color: var(--sapTextColor, #222);
 }
 
 .nodeContent {
@@ -32,7 +33,7 @@
 
 .nodeType {
   font-size: 12px;
-  color: #888;
+  color: var(--sapContent_LabelColor, #888);
   margin-top: 2px;
 }
 
@@ -48,4 +49,12 @@
 
 .handleHidden {
   visibility: hidden;
+}
+
+:global([data-theme='dark']) .nodeContainer {
+  color: #fff;
+}
+
+:global([data-theme='dark']) .nodeType {
+  color: rgba(255, 255, 255, 0.75);
 }

src/components/Graphs/CustomNode.module.css

@@ -1,37 +1,49 @@
 import React from 'react';
 import { Button, Icon } from '@ui5/webcomponents-react';
-import StatusIcon from './StatusIcon';
+import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
 import styles from './CustomNode.module.css';
 import { Handle, Position } from '@xyflow/react';
+import { useTranslation } from 'react-i18next';
 
 export interface CustomNodeProps {
   label: string;
   type?: string;
   status: string;
+  transitionTime?: string;
+  statusMessage?: string;
   onYamlClick: () => void;
 }
 
-const CustomNode: React.FC<CustomNodeProps> = ({ label, type, status, onYamlClick }) => (
-  <div className={styles.nodeContainer}>
-    <Handle type="target" position={Position.Top} className={styles.handleHidden} />
-    <Handle type="source" position={Position.Bottom} className={styles.handleHidden} />
-    <div className={styles.nodeContent}>
-      <div className={styles.statusIcon}>
-        <StatusIcon isOk={status === 'OK'} />
-      </div>
-      <div className={styles.nodeTextContainer}>
-        <div className={styles.nodeLabel} title={label}>
-          {label}
+const CustomNode: React.FC<CustomNodeProps> = ({ label, type, status, transitionTime, statusMessage, onYamlClick }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.nodeContainer}>
+      <Handle type="target" position={Position.Top} className={styles.handleHidden} />
+      <Handle type="source" position={Position.Bottom} className={styles.handleHidden} />
+      <div className={styles.nodeContent}>
+        <div className={styles.statusIcon}>
+          <ResourceStatusCell
+            isOk={status === 'OK'}
+            transitionTime={transitionTime ?? ''}
+            positiveText={t('common.healthy')}
+            negativeText={t('errors.notHealthy')}
+            message={statusMessage}
+          />
+        </div>
+        <div className={styles.nodeTextContainer}>
+          <div className={styles.nodeLabel} title={label}>
+            {label}
+          </div>
+          {type && <div className={styles.nodeType}>{type}</div>}
         </div>
-        {type && <div className={styles.nodeType}>{type}</div>}
+      </div>
+      <div className={styles.yamlButtonWrapper}>
+        <Button design="Transparent" aria-label="YAML" title="YAML" onClick={onYamlClick}>
+          <Icon name="document" design="Information" />
+        </Button>
       </div>
     </div>
-    <div className={styles.yamlButtonWrapper}>
-      <Button design="Transparent" aria-label="YAML" title="YAML" onClick={onYamlClick}>
-        <Icon name="document" design="Information" />
-      </Button>
-    </div>
-  </div>
-);
+  );
+};
 
 export default CustomNode;