fix(templates): Fixing overlapping of callouts for v8 and v9 components

e2e/templates/createWorkflowPanel.spec.ts

@@ -21,7 +21,7 @@ test.describe(
       await page.locator('[data-testid="msla-templates-workflowName"]').fill(workflowName);
       await page.getByText('Stateless', { exact: true }).click();
 
-      await page.getByRole('button', { name: 'Next' }).click();
+      await page.getByTestId('template-footer-button-0').click();
 
       await expect(page.getByText('BasicWorkflowOnly', { exact: true })).not.toBeVisible();
       await expect(page.getByText('Stateful', { exact: true })).not.toBeVisible();
@@ -58,7 +58,7 @@ test.describe(
 
       await page.getByRole('tab', { name: 'Parameters' }).click();
       await page.locator('[data-testid="msla-templates-parameter-value-LogicMessage_#workflowname#"]').fill(parameterValue);
-      await page.getByRole('button', { name: 'Next' }).click();
+      await page.getByTestId('template-footer-button-0').click();
 
       await expect(page.getByText('----', { exact: true })).not.toBeVisible();
       await expect(page.getByText(parameterValue, { exact: true })).toBeVisible();

libs/designer/src/lib/ui/panel/templatePanel/__tests__/createWorkflowPanel.spec.tsx

@@ -3,16 +3,15 @@ import type { AppStore } from '../../../../core/state/templates/store';
 import { setupStore } from '../../../../core/state/templates/store';
 import { StandardTemplateService, InitTemplateService, type Template } from '@microsoft/logic-apps-shared';
 import { renderWithProviders } from '../../../../__test__/template-test-utils';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import type { TemplateState } from '../../../../core/state/templates/templateSlice';
 import { TemplatePanelView } from '../../../../core/state/templates/panelSlice';
 import constants from '../../../../common/constants';
 import { MockHttpClient } from '../../../../__test__/mock-http-client';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { getReactQueryClient } from '../../../../core';
-// biome-ignore lint/correctness/noUnusedImports: <explanation>
 import React from 'react';
-import { CreateWorkflowPanel } from '../createWorkflowPanel/createWorkflowPanel';
+import { CreateWorkflowPanel, CreateWorkflowPanelHeader } from '../createWorkflowPanel/createWorkflowPanel';
 
 describe('panel/templatePanel/createWorkflowPanel', () => {
   let store: AppStore;
@@ -158,7 +157,7 @@ describe('panel/templatePanel/createWorkflowPanel', () => {
           errors: {
             workflow: undefined,
             kind: undefined,
-          },
+          } as any,
           connectionKeys: [],
         },
       },
@@ -177,7 +176,7 @@ describe('panel/templatePanel/createWorkflowPanel', () => {
         workflows: {},
         parameters: {},
         connections: undefined,
-      },
+      } as any,
     };
     const minimalStoreData = {
       template: templateSliceData,
@@ -192,10 +191,12 @@ describe('panel/templatePanel/createWorkflowPanel', () => {
 
   beforeEach(() => {
     const queryClient = getReactQueryClient();
-
+    const ref = React.createRef<HTMLDivElement>();
     renderWithProviders(
       <QueryClientProvider client={queryClient}>
-        <CreateWorkflowPanel createWorkflow={vi.fn()} />
+        <div ref={ref}>
+          <CreateWorkflowPanel createWorkflow={vi.fn()} mountNode={ref.current} />
+        </div>
       </QueryClientProvider>,
       { store }
     );
@@ -276,3 +277,73 @@ describe('panel/templatePanel/createWorkflowPanel', () => {
     expect(screen.queryByText(constants.TEMPLATE_PANEL_TAB_NAMES.REVIEW_AND_CREATE)).toBeDefined();
   });
 });
+
+describe('panel/templatePanel/CreateWorkflowPanelHeader', () => {
+  it('Renders header with default title when headerTitle is not provided', () => {
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" />, { store: setupStore({}) });
+    expect(screen.getByText('Create a new workflow from template')).toBeDefined();
+  });
+
+  it('Renders header with custom headerTitle when provided', () => {
+    renderWithProviders(<CreateWorkflowPanelHeader headerTitle="Custom Header" title="Test Template" summary="Test Summary" />, {
+      store: setupStore({}),
+    });
+    expect(screen.getByText('Custom Header')).toBeDefined();
+  });
+
+  it('Shows close button when onClose is provided', () => {
+    const onCloseMock = vi.fn();
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" onClose={onCloseMock} />, {
+      store: setupStore({}),
+    });
+    expect(screen.getByText('Close Panel')).toBeDefined();
+  });
+
+  it('Does not show close button when onClose is not provided', () => {
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" />, { store: setupStore({}) });
+    expect(screen.queryByText('Close Panel')).toBeNull();
+  });
+
+  it('Calls onClose when close button is clicked', () => {
+    const onCloseMock = vi.fn();
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" onClose={onCloseMock} />, {
+      store: setupStore({}),
+    });
+    const closeButton = screen.getByText('Close Panel');
+    fireEvent.click(closeButton);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('Template details section is collapsed by default', () => {
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" />, { store: setupStore({}) });
+    expect(screen.getByText('Template details')).toBeDefined();
+    expect(screen.queryByText('Name')).toBeNull();
+    expect(screen.queryByText('Description')).toBeNull();
+  });
+
+  it('Expands template details when toggle is clicked', async () => {
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" />, { store: setupStore({}) });
+    const toggle = screen.getByText('Template details');
+    fireEvent.click(toggle);
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeDefined();
+      expect(screen.getByText('Description')).toBeDefined();
+      expect(screen.getByText('Test Template')).toBeDefined();
+      expect(screen.getByText('Test Summary')).toBeDefined();
+    });
+  });
+
+  it('Collapses template details when toggle is clicked twice', async () => {
+    renderWithProviders(<CreateWorkflowPanelHeader title="Test Template" summary="Test Summary" />, { store: setupStore({}) });
+    const toggle = screen.getByText('Template details');
+    fireEvent.click(toggle);
+    await waitFor(() => {
+      expect(screen.getByText('Name')).toBeDefined();
+    });
+    fireEvent.click(toggle);
+    await waitFor(() => {
+      expect(screen.queryByText('Name')).toBeNull();
+      expect(screen.queryByText('Description')).toBeNull();
+    });
+  });
+});

libs/designer/src/lib/ui/panel/templatePanel/__tests__/quickViewPanel.spec.tsx

@@ -202,10 +202,12 @@ describe('panel/templatePanel/quickViewPanel', () => {
 
   beforeEach(() => {
     const queryClient = getReactQueryClient();
-
+    const ref = React.createRef<HTMLDivElement>();
     renderWithProviders(
       <QueryClientProvider client={queryClient}>
-        <QuickViewPanel showCreate={true} workflowId={defaultWorkflowId} />
+        <div ref={ref}>
+          <QuickViewPanel showCreate={true} workflowId={defaultWorkflowId} mountNode={ref.current} />
+        </div>
       </QueryClientProvider>,
       { store }
     );

libs/designer/src/lib/ui/panel/templatePanel/createWorkflowPanel/createWorkflowPanel.styles.ts

@@ -4,6 +4,7 @@ export const useStyles = makeStyles({
   drawer: {
     zIndex: 1000,
     height: '100%',
+    position: 'fixed',
   },
   header: {
     ...shorthands.padding('0', tokens.spacingHorizontalL),

libs/designer/src/lib/ui/panel/templatePanel/createWorkflowPanel/createWorkflowPanel.tsx

@@ -30,12 +30,14 @@ export interface CreateWorkflowPanelProps {
   clearDetailsOnClose?: boolean;
   panelWidth?: string;
   showCloseButton?: boolean;
+  mountNode: HTMLElement | null;
   onClose?: () => void;
 }
 
 export const CreateWorkflowPanel = ({
   createWorkflow,
   onClose,
+  mountNode,
   panelWidth = '50%',
   clearDetailsOnClose = true,
   showCloseButton = true,
@@ -125,7 +127,13 @@ export const CreateWorkflowPanel = ({
       open={isOpen && currentPanelView === TemplatePanelView.CreateWorkflow}
       onOpenChange={(_, { open }) => !open && shouldCloseByDefault && dismissPanel()}
       position="end"
-      style={{ width: panelWidth }}
+      style={{
+        width: panelWidth,
+      }}
+      mountNode={{
+        element: mountNode,
+      }}
+      type={'overlay'}
     >
       <DrawerHeader className={styles.header}>{onRenderHeaderContent()}</DrawerHeader>
       <DrawerBody className={styles.body}>

libs/designer/src/lib/ui/panel/templatePanel/quickViewPanel/quickViewPanel.styles.ts

@@ -4,6 +4,7 @@ export const useStyles = makeStyles({
   drawer: {
     zIndex: 1000,
     height: '100%',
+    position: 'fixed',
   },
   header: {
     ...shorthands.padding('0', tokens.spacingHorizontalL),

libs/designer/src/lib/ui/panel/templatePanel/quickViewPanel/quickViewPanel.tsx

@@ -17,6 +17,7 @@ import { useStyles } from './quickViewPanel.styles';
 export interface QuickViewPanelProps {
   showCreate: boolean;
   workflowId: string;
+  mountNode: HTMLElement | null;
   clearDetailsOnClose?: boolean;
   panelWidth?: string;
   showCloseButton?: boolean;
@@ -27,6 +28,7 @@ export const QuickViewPanel = ({
   onClose,
   showCreate,
   workflowId,
+  mountNode,
   panelWidth = '50%',
   showCloseButton = true,
   clearDetailsOnClose = true,
@@ -103,6 +105,10 @@ export const QuickViewPanel = ({
       onOpenChange={(_, { open }) => !open && shouldCloseByDefault && dismissPanel()}
       position="end"
       style={{ width: panelWidth }}
+      mountNode={{
+        element: mountNode,
+      }}
+      type={'overlay'}
     >
       <DrawerHeader className={styles.header}>{onRenderHeaderContent()}</DrawerHeader>
       <DrawerBody className={styles.body}>