From 6dca9c9996b10fc1c60dff52f453d1512ec6f98a Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Tue, 14 Jan 2025 17:48:39 +0100
Subject: [PATCH] fix(DataMapper): Add missing isFilled attributes to debug

---
 .../DataMapper/debug/DebugLayout.tsx          | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/DataMapper/debug/DebugLayout.tsx b/packages/ui/src/components/DataMapper/debug/DebugLayout.tsx
index 444eb96a2..85bc3f333 100644
--- a/packages/ui/src/components/DataMapper/debug/DebugLayout.tsx
+++ b/packages/ui/src/components/DataMapper/debug/DebugLayout.tsx
@@ -13,15 +13,24 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+import {
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadLogo,
+  Page,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';
 import { FunctionComponent, memo, useEffect } from 'react';
-import { Masthead, MastheadContent, Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
-import { ContextToolbar } from './ContextToolbar';
-import './DebugLayout.scss';
-import { DataMapperControl } from '../DataMapperControl';
+import logo from '../../../assets/logo-kaoto.png';
 import { useDataMapper } from '../../../hooks/useDataMapper';
+import { BrowserFilePickerMetadataProvider } from '../../../stubs/BrowserFilePickerMetadataProvider';
+import { DataMapperControl } from '../DataMapperControl';
 import { CanvasMonitor } from './CanvasMonitor';
+import { ContextToolbar } from './ContextToolbar';
 import { DataMapperMonitor } from './DataMapperMonitor';
-import { BrowserFilePickerMetadataProvider } from '../../../stubs/BrowserFilePickerMetadataProvider';
+import './DebugLayout.scss';
 
 export const DebugLayout: FunctionComponent = memo(function DebugLayout() {
   const { setDebug } = useDataMapper()!;
@@ -31,6 +40,11 @@ export const DebugLayout: FunctionComponent = memo(function DebugLayout() {
 
   const header = (
     <Masthead>
+      <MastheadBrand>
+        <MastheadLogo>
+          <img className="shell__logo" src={logo} alt="Kaoto Logo" />
+        </MastheadLogo>
+      </MastheadBrand>
       <MastheadContent>
         <ContextToolbar />
       </MastheadContent>
@@ -38,11 +52,11 @@ export const DebugLayout: FunctionComponent = memo(function DebugLayout() {
   );
 
   return (
-    <Page masthead={header}>
+    <Page isContentFilled masthead={header}>
       <BrowserFilePickerMetadataProvider>
         <DataMapperMonitor />
         <CanvasMonitor />
-        <PageSection hasBodyWrapper={false} variant={PageSectionVariants.default} className="debug-layout">
+        <PageSection isFilled hasBodyWrapper={false} variant={PageSectionVariants.default} className="debug-layout">
           <DataMapperControl />
         </PageSection>
       </BrowserFilePickerMetadataProvider>