Feature/display resource yaml

package.json

@@ -39,8 +39,10 @@
     "react-i18next": "^15.4.1",
     "react-oidc-context": "^3.2.0",
     "react-router-dom": "^7.2.0",
+    "react-syntax-highlighter": "^15.6.1",
     "react-time-ago": "^7.3.3",
     "swr": "^2.3.0",
+    "yaml": "^2.7.1",
     "zod": "^3.24.2"
   },
   "devDependencies": {
@@ -52,6 +54,7 @@
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.10",
     "@types/react-dom": "19.1.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@ui5/webcomponents-cypress-commands": "^2.7.2",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/eslint-plugin": "^1.1.37",

public/locales/en.json

@@ -239,5 +239,17 @@
     "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"
+  },
+  "buttons": {
+    "viewResource": "View resource",
+    "download": "Download",
+    "copy": "Copy"
+  },
+  "yaml": {
+    "copiedToClipboard": "YAML copied to clipboard!"
   }
 }

src/components/ControlPlanes/ConnectButton.tsx

@@ -55,6 +55,7 @@ export default function ConnectButton(props: Props) {
   if (contexts.length === 1) {
     return (
       <Button
+        endIcon={'navigation-right-arrow'}
         disabled={props.disabled}
         onClick={() =>
           navigate(

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -3,25 +3,27 @@ import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
 import ConnectButton from '../ConnectButton.tsx';
-import { ListWorkspacesType } from '../../../lib/api/types/crate/listWorkspaces.ts';
+
+import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
+import { useState } from 'react';
+
+import { DeleteConfirmationDialog } from '../../Dialogs/DeleteConfirmationDialog.tsx';
+import MCPHealthPopoverButton from '../../ControlPlane/MCPHealthPopoverButton.tsx';
+import styles from './ControlPlaneCard.module.css';
+import { KubectlDeleteMcp } from '../../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx';
 import {
   ListControlPlanesType,
   ReadyStatus,
 } from '../../../lib/api/types/crate/controlPlanes.ts';
-import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
-import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
-import { useState } from 'react';
+import { ListWorkspacesType } from '../../../lib/api/types/crate/listWorkspaces.ts';
 import { useApiResourceMutation } from '../../../lib/api/useApiResource.ts';
 import {
   DeleteMCPResource,
   DeleteMCPType,
   PatchMCPResourceForDeletion,
   PatchMCPResourceForDeletionBody,
 } from '../../../lib/api/types/crate/deleteMCP.ts';
-import { DeleteConfirmationDialog } from '../../Dialogs/DeleteConfirmationDialog.tsx';
-import MCPHealthPopoverButton from '../../ControlPlane/MCPHealthPopoverButton.tsx';
-import styles from './ControlPlaneCard.module.css';
-import { KubectlDeleteMcp } from '../../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteMcp.tsx';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 
 interface Props {
   controlPlane: ListControlPlanesType;
@@ -64,7 +66,6 @@ export function ControlPlaneCard({
               </FlexBox>
               <div>
                 <Button
-                  design={ButtonDesign.Transparent}
                   icon="delete"
                   disabled={
                     controlPlane.status?.status === ReadyStatus.InDeletion
@@ -82,15 +83,27 @@ export function ControlPlaneCard({
               className={styles.row}
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
-              <ConnectButton
-                disabled={controlPlane.status?.status !== ReadyStatus.Ready}
-                controlPlaneName={name}
-                projectName={projectName}
-                workspaceName={workspace.metadata.name ?? ''}
-                namespace={controlPlane.status?.access?.namespace ?? ''}
-                secretName={controlPlane.status?.access?.name ?? ''}
-                secretKey={controlPlane.status?.access?.key ?? ''}
-              />
+              <FlexBox
+                direction="Row"
+                justifyContent="SpaceBetween"
+                alignItems="Center"
+                gap={10}
+              >
+                <YamlViewButton
+                  workspaceName={controlPlane.metadata.namespace}
+                  resourceName={controlPlane.metadata.name}
+                  resourceType={'managedcontrolplanes'}
+                />
+                <ConnectButton
+                  disabled={controlPlane.status?.status !== ReadyStatus.Ready}
+                  controlPlaneName={name}
+                  projectName={projectName}
+                  workspaceName={workspace.metadata.name ?? ''}
+                  namespace={controlPlane.status?.access?.namespace ?? ''}
+                  secretName={controlPlane.status?.access?.name ?? ''}
+                  secretKey={controlPlane.status?.access?.key ?? ''}
+                />
+              </FlexBox>
             </FlexBox>
           </FlexBox>
         </div>

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  FlexBox,
   Grid,
   ObjectPageSection,
   Panel,
@@ -8,7 +9,6 @@ import {
 import '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
 import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';
 import '@ui5/webcomponents-icons/dist/delete';
-import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { CopyButton } from '../../Shared/CopyButton.tsx';
 import { NoManagedControlPlaneBanner } from '../NoManagedControlPlaneBanner.tsx';
 import { ControlPlaneCard } from '../ControlPlaneCard/ControlPlaneCard.tsx';
@@ -34,6 +34,7 @@ import { ListControlPlanes } from '../../../lib/api/types/crate/controlPlanes.ts
 import IllustratedError from '../../Shared/IllustratedError.tsx';
 import { APIError } from '../../../lib/api/error.ts';
 import { useTranslation } from 'react-i18next';
+import { YamlViewButton } from '../../Yaml/YamlViewButton.tsx';
 
 interface Props {
   projectName: string;
@@ -104,8 +105,9 @@ export function ControlPlaneListWorkspaceGridTile({
               style={{
                 width: '100%',
                 display: 'grid',
-                gridTemplateColumns: '0.3fr 0.24fr auto 0.05fr',
+                gridTemplateColumns: '0.3fr 0.3fr 0.24fr auto',
                 gap: '1rem',
+                justifyContent: 'space-between',
                 alignItems: 'center',
               }}
             >
@@ -118,18 +120,25 @@ export function ControlPlaneListWorkspaceGridTile({
                 text={workspace.status?.namespace || '-'}
                 style={{ justifyContent: 'start' }}
               />
+
               <MembersAvatarView
                 members={workspace.spec.members}
                 project={projectName}
                 workspace={workspaceName}
               />
-              <Button
-                design={ButtonDesign.Transparent}
-                icon="delete"
-                onClick={async () => {
-                  setDialogDeleteWsIsOpen(true);
-                }}
-              />
+              <FlexBox justifyContent={'SpaceBetween'} gap={10}>
+                <Button
+                  icon="delete"
+                  onClick={async () => {
+                    setDialogDeleteWsIsOpen(true);
+                  }}
+                />
+                <YamlViewButton
+                  workspaceName={workspace.metadata.namespace}
+                  resourceName={workspaceName}
+                  resourceType={'workspaces'}
+                />
+              </FlexBox>
             </div>
           }
           noAnimation

src/components/Projects/ProjectsList.tsx

@@ -4,17 +4,78 @@ import { CopyButton } from '../Shared/CopyButton.tsx';
 import useLuigiNavigate from '../Shared/useLuigiNavigate.tsx';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import useResource from '../../lib/api/useApiResource';
-import { projectnameToNamespace } from '../../utils/index';
+import { projectnameToNamespace } from '../../utils';
 import '@ui5/webcomponents-icons/dist/copy';
 import '@ui5/webcomponents-icons/dist/arrow-right';
 import { ListProjectNames } from '../../lib/api/types/crate/listProjectNames';
 import { t } from 'i18next';
+import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
+import { useMemo } from 'react';
 
 export default function ProjectsList() {
   const navigate = useLuigiNavigate();
   const { data, error } = useResource(ListProjectNames, {
     refreshInterval: 3000,
   });
+  const stabilizedData = useMemo(
+    () =>
+      data?.map((projectName) => {
+        return {
+          projectName: projectName,
+          nameSpace: projectnameToNamespace(projectName),
+        };
+      }) ?? [],
+    [data, projectnameToNamespace],
+  );
+  const stabilizedColumns = useMemo(
+    () => [
+      {
+        Header: t('ProjectsListView.title'),
+        accessor: 'projectName',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Cell: (instance: any) => (
+          <div
+            style={{
+              cursor: 'pointer',
+              width: '100%',
+              color: ThemingParameters.sapLinkColor,
+              fontWeight: 'bold',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: '1rem',
+              alignItems: 'center',
+            }}
+          >
+            {instance.cell.value}
+            <YamlViewButton
+              resourceType={'projects'}
+              resourceName={instance.cell.value}
+            />
+          </div>
+        ),
+      },
+      {
+        Header: 'Namespace',
+        accessor: 'nameSpace',
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Cell: (instance: any) => (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'start',
+              gap: '0.5rem',
+              alignItems: 'center',
+              width: '100%',
+              cursor: 'pointer',
+            }}
+          >
+            <CopyButton text={instance.cell.value} />
+          </div>
+        ),
+      },
+    ],
+    [],
+  );
   if (error) {
     return <IllustratedError error={error} />;
   }
@@ -23,52 +84,8 @@ export default function ProjectsList() {
     <>
       <AnalyticalTable
         style={{ margin: '12px' }}
-        columns={[
-          {
-            Header: t('ProjectsListView.title'),
-            accessor: 'projectName',
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Cell: (instance: any) => (
-              <div
-                style={{
-                  cursor: 'pointer',
-                  width: '100%',
-                  color: ThemingParameters.sapLinkColor,
-                  fontWeight: 'bold',
-                }}
-              >
-                {instance.cell.value}
-              </div>
-            ),
-          },
-          {
-            Header: 'Namespace',
-            accessor: 'nameSpace',
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            Cell: (instance: any) => (
-              <div
-                style={{
-                  display: 'flex',
-                  justifyContent: 'start',
-                  gap: '0.5rem',
-                  alignItems: 'center',
-                  width: '100%',
-                  cursor: 'pointer',
-                }}
-              >
-                <CopyButton text={instance.cell.value} />
-              </div>
-            ),
-          },
-        ]}
-        data={
-          data?.map((e) => {
-            return {
-              projectName: e,
-              nameSpace: projectnameToNamespace(e),
-            };
-          }) ?? []
-        }
+        columns={stabilizedColumns}
+        data={stabilizedData}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onRowClick={(e: any) => {
           navigate(

src/components/Yaml/YamlLoader.tsx

@@ -0,0 +1,33 @@
+import { YamlViewButtonProps } from './YamlViewButton.tsx';
+import { FC } from 'react';
+
+import { stringify } from 'yaml';
+
+import { useTranslation } from 'react-i18next';
+import { ResourceObject } from '../../lib/api/types/crate/resourceObject.ts';
+import Loading from '../Shared/Loading.tsx';
+import IllustratedError from '../Shared/IllustratedError.tsx';
+import YamlViewer from './YamlViewer.tsx';
+import useResource from '../../lib/api/useApiResource';
+
+export const YamlLoader: FC<YamlViewButtonProps> = ({
+  workspaceName,
+  resourceType,
+  resourceName,
+}) => {
+  const { isLoading, data, error } = useResource(
+    ResourceObject(workspaceName ?? '', resourceType, resourceName),
+  );
+  const { t } = useTranslation();
+  if (isLoading) return <Loading />;
+  if (error) {
+    return <IllustratedError error={t('common.cannotLoadData')} />;
+  }
+
+  return (
+    <YamlViewer
+      yamlString={stringify(data)}
+      filename={`${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`}
+    />
+  );
+};