refactor

Author: lucasgoral

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.tsx

@@ -85,21 +85,28 @@ export function ControlPlaneCard({
               className={styles.row}
             >
               <MCPHealthPopoverButton mcpStatus={controlPlane.status} />
-              <YamlViewButton
-                workspaceName={controlPlane.metadata.namespace}
-                projectName={controlPlane.metadata.name}
-                resourceName={controlPlane.metadata.name}
-                resourceType={'managedcontrolplane'}
-              />
-              <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}
+                  projectName={controlPlane.metadata.name}
+                  resourceName={controlPlane.metadata.name}
+                  resourceType={'managedcontrolplane'}
+                />
+                <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/Yaml/YamlViewer.module.css

@@ -0,0 +1,10 @@
+.container {
+  position: relative;
+}
+
+.buttons {
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 1;
+}

src/components/Yaml/YamlViewer.tsx

@@ -5,8 +5,8 @@ import {
   materialDark,
 } from 'react-syntax-highlighter/dist/esm/styles/prism'; // You can choose different styles
 import YAML from 'yaml';
-import { Button } from '@ui5/webcomponents-react';
-
+import { Button, FlexBox } from '@ui5/webcomponents-react';
+import styles from './YamlViewer.module.css';
 type YamlViewerProps = { yamlString: string };
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString }) => {
   const copyToClipboard = () => {
@@ -34,54 +34,33 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString }) => {
   }
 
   return (
-    <div style={{ position: 'relative', width: '80%' }}>
-      <Button
-        style={{
-          position: 'absolute',
-          top: '10px',
-          right: '10px',
-          padding: '5px 10px',
-          background: '#007bff',
-          color: 'white',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer',
-          zIndex: 1,
-        }}
-        onClick={copyToClipboard}
+    <div className={styles.container}>
+      <FlexBox
+        className={styles.buttons}
+        direction="Row"
+        justifyContent="End"
+        alignItems="Baseline"
+        gap={16}
       >
-        Copy
-      </Button>
-      <Button
-        // style={{
-        //   position: 'absolute',
-        //   top: '10px',
-        //   right: '90px',
-        //   padding: '5px 10px',
-        //   background: '#28a745',
-        //   color: 'white',
-        //   border: 'none',
-        //   borderRadius: '4px',
-        //   cursor: 'pointer',
-        //   zIndex: 1,
-        // }}
-        onClick={downloadYaml}
-      >
-        Download
-      </Button>
-
+        <Button icon="copy" onClick={copyToClipboard}>
+          Copy
+        </Button>
+        <Button icon="download" onClick={downloadYaml}>
+          Download
+        </Button>
+      </FlexBox>
       <SyntaxHighlighter
         language="yaml"
         style={
           window.matchMedia('(prefers-color-scheme: dark)').matches
             ? materialDark
             : materialLight
         }
-        showLineNumbers={true}
-        wrapLines={true}
+        showLineNumbers
+        wrapLines
+        wrapLongLines
         lineNumberStyle={{
           paddingRight: '20px',
-          color: '#888',
           minWidth: '40px',
           textAlign: 'right',
         }}
@@ -91,6 +70,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString }) => {
           borderRadius: '4px',
           fontSize: '1rem',
           width: '100%',
+          background: 'transparent',
         }}
       >
         {formattedYaml}