fix(DataMapper): Add missing isFilled attributes to debug

KaotoIO · Jan 14, 2025 · 273d1e4 · 273d1e4
1 parent f6cd5ba
commit 273d1e4
Showing 1 changed file with 21 additions and 7 deletions.
diff --git 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,18 +40,23 @@ 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>
     </Masthead>
   );
 
   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>