Feature/display resource yaml

[lucasgoral]

What this PR does / why we need it:

Added a feature that displays YAML files for projects ,namespaces and MCPs.

[andreaskienle]

Nice work! It looks really good, and I like how you designed the dialog, especially putting the ⁠isOpen state inside the button component and wrapping the YAML display inside the loader.

I also think the react-syntax-highlighter package is a great choice. I'm only slightly concerned about the bundle size. Since we don't have plans to support mobile users right now, I think it's negligible and we can proceed with this implementation. There's also a light build option (or alternatively prism-react-renderer) that we could keep in mind for future optimization.

I found some minor issues below.

[andreaskienle]

Can this ever be undefined?

Just wondering if we can simply write

Suggested change

	workspaceName?: string;
	workspaceName: string;

[lucasgoral]

Yes, for the Project YAML it is empty.

[andreaskienle]

Ok, in this case I’m wondering what if we made this a bit more generic by decoupling from the workspace/project context? Something like:

export type YamlViewButtonProps = {
  apiPath: string;
  localFilename: string;
}

After all, it’s essentially just a dialog that displays downloads and YAML content. It probably shouldn’t need to know the specifics of how to retrieve that data.

Just thinking out loud here - we’ll likely need to revisit the fetch logic when we implement GraphQL anyway, so we can see how this approach works then.

[andreaskienle]

Any reason for the <span>?

Suggested change

	<span>
	<>

[lucasgoral]

It is wrapped in span so it it display: inline instead of display:block. So I can put it next to some text.

[andreaskienle]

Wouldn’t <> instead of <span> put the UI5 button (<Button>) directly to the top level which has display:inline-block? Anyway, not a big deal, was just wondering.

[lucasgoral]

Nice work! It looks really good, and I like how you designed the dialog, especially putting the ⁠isOpen state inside the button component and wrapping the YAML display inside the loader.

I also think the react-syntax-highlighter package is a great choice. I'm only slightly concerned about the bundle size. Since we don't have plans to support mobile users right now, I think it's negligible and we can proceed with this implementation. There's also a light build option (or alternatively prism-react-renderer) that we could keep in mind for future optimization.

I found some minor issues below.

Thank you. Yes in the future we can easily replace this package if smaller bundle size is needed.

[lucasgoral]

With the separate task I will:

• add MCP's resources preview
• remove horizontal screen scrollbar for YAML view
• remove managedFields property from the YAML object
• extract download function as a separate hook

[andreaskienle]

Looks good!

I added some comment below but we can address the remaining items in a follow-up PR. 👍

[andreaskienle]

Unused import

Suggested change

import { YamlViewButtonProps } from './YamlViewButton.tsx';

[andreaskienle]

Ok, in this case I’m wondering what if we made this a bit more generic by decoupling from the workspace/project context? Something like:

export type YamlViewButtonProps = {
  apiPath: string;
  localFilename: string;
}

After all, it’s essentially just a dialog that displays downloads and YAML content. It probably shouldn’t need to know the specifics of how to retrieve that data.

Just thinking out loud here - we’ll likely need to revisit the fetch logic when we implement GraphQL anyway, so we can see how this approach works then.

[andreaskienle]

Wouldn’t <> instead of <span> put the UI5 button (<Button>) directly to the top level which has display:inline-block? Anyway, not a big deal, was just wondering.