Add option to show only important YAML data

Introduces a 'showOnlyImportantData' prop to YAML viewer components, allowing users to toggle the display of only essential YAML fields. Updates related components and dialog to support this feature and propagate state.

Author: lucasgoral

src/components/Yaml/YamlLoader.tsx

@@ -11,7 +11,18 @@ import YamlViewer from './YamlViewer.tsx';
 import { useApiResource } from '../../lib/api/useApiResource';
 import { removeManagedFieldsProperty, Resource } from '../../utils/removeManagedFieldsProperty.ts';
 
-export const YamlLoader: FC<YamlViewButtonProps> = ({ workspaceName, resourceType, resourceName }) => {
+interface YamlLoaderProps extends YamlViewButtonProps {
+  showOnlyImportantData?: boolean;
+  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
+}
+
+export const YamlLoader: FC<YamlLoaderProps> = ({
+  workspaceName,
+  resourceType,
+  resourceName,
+  showOnlyImportantData = false,
+  setShowOnlyImportantData,
+}) => {
   const { isLoading, data, error } = useApiResource(
     ResourceObject(workspaceName ?? '', resourceType, resourceName),
     undefined,
@@ -25,8 +36,10 @@ export const YamlLoader: FC<YamlViewButtonProps> = ({ workspaceName, resourceTyp
 
   return (
     <YamlViewer
-      yamlString={stringify(removeManagedFieldsProperty(data as Resource, true))}
+      yamlString={stringify(removeManagedFieldsProperty(data as Resource, showOnlyImportantData))}
       filename={`${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`}
+      setShowOnlyImportantData={setShowOnlyImportantData}
+      showOnlyImportantData={showOnlyImportantData}
     />
   );
 };

src/components/Yaml/YamlViewButton.tsx

@@ -13,12 +13,13 @@ export type YamlViewButtonProps = {
 };
 
 export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
+  const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation();
   const resource = resourceObject as Resource;
 
   const yamlString = useMemo(() => {
-    return stringify(removeManagedFieldsProperty(resource));
+    return stringify(removeManagedFieldsProperty(resource, showOnlyImportantData));
   }, [resource]);
   return (
     <span>
@@ -29,6 +30,8 @@ export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
           <YamlViewer
             yamlString={yamlString}
             filename={`${resource?.kind ?? ''}${resource?.metadata?.name ? '_' : ''}${resource?.metadata?.name ?? ''}`}
+            setShowOnlyImportantData={setShowOnlyImportantData}
+            showOnlyImportantData={showOnlyImportantData}
           />
         }
       />

src/components/Yaml/YamlViewButtonWithLoader.tsx

@@ -6,13 +6,14 @@ import styles from './YamlViewer.module.css';
 import { YamlIcon } from './YamlIcon.tsx';
 import { YamlViewDialog } from './YamlViewDialog.tsx';
 
-export type YamlViewButtonProps = {
+export interface YamlViewButtonProps {
   workspaceName?: string;
   resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes';
   resourceName: string;
-};
+}
 
 export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({ workspaceName, resourceType, resourceName }) => {
+  const [showOnlyImportantData, setShowOnlyImportantData] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation();
   return (
@@ -21,8 +22,16 @@ export const YamlViewButtonWithLoader: FC<YamlViewButtonProps> = ({ workspaceNam
         isOpen={isOpen}
         setIsOpen={setIsOpen}
         dialogContent={
-          <YamlLoader workspaceName={workspaceName} resourceName={resourceName} resourceType={resourceType} />
+          <YamlLoader
+            workspaceName={workspaceName}
+            resourceName={resourceName}
+            resourceType={resourceType}
+            showOnlyImportantData={showOnlyImportantData}
+            setShowOnlyImportantData={setShowOnlyImportantData}
+          />
         }
+        setShowOnlyImportantData={setShowOnlyImportantData}
+        showOnlyImportantData={showOnlyImportantData}
       />
 
       <Button

src/components/Yaml/YamlViewDialog.tsx

@@ -1,4 +1,4 @@
-import { Bar, Button, Dialog } from '@ui5/webcomponents-react';
+import { Bar, Button, CheckBox, Dialog } from '@ui5/webcomponents-react';
 
 import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,16 +7,36 @@ export type YamlViewDialogProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   dialogContent: ReactNode;
+  showOnlyImportantData?: boolean;
+  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
 };
 
-export const YamlViewDialog: FC<YamlViewDialogProps> = ({ isOpen, setIsOpen, dialogContent }) => {
+export const YamlViewDialog: FC<YamlViewDialogProps> = ({
+  isOpen,
+  setIsOpen,
+  dialogContent,
+  showOnlyImportantData,
+  setShowOnlyImportantData,
+}) => {
   const { t } = useTranslation();
+  const handleShowOnlyImportantData = () => {
+    setShowOnlyImportantData?.(!showOnlyImportantData);
+  };
   return (
     <Dialog
       open={isOpen}
       stretch
       footer={
         <Bar
+          startContent={
+            setShowOnlyImportantData && (
+              <CheckBox
+                text={t('yaml.showOnlyImportant')}
+                checked={showOnlyImportantData}
+                onChange={handleShowOnlyImportantData}
+              />
+            )
+          }
           design="Footer"
           endContent={
             <Button design="Emphasized" onClick={() => setIsOpen(false)}>

src/components/Yaml/YamlViewer.tsx

@@ -7,7 +7,12 @@ import styles from './YamlViewer.module.css';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard.ts';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../../hooks/useTheme.ts';
-type YamlViewerProps = { yamlString: string; filename: string };
+type YamlViewerProps = {
+  yamlString: string;
+  filename: string;
+  showOnlyImportantData?: boolean;
+  setShowOnlyImportantData?: (showOnlyImportantData: boolean) => void;
+};
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   const { t } = useTranslation();
   const { isDarkTheme } = useTheme();