fix: make Summary2 selectable in developer tools

src/layout/Summary2/SummaryComponent2/ComponentSummary.tsx

@@ -97,12 +97,16 @@ interface SummaryFlexProps extends PropsWithChildren {
 function SummaryFlexInternal({ targetBaseId, children, className }: Omit<SummaryFlexProps, 'content'>) {
   const { pageBreak, grid, type } = useItemFor(targetBaseId);
   const indexedId = useIndexedId(targetBaseId);
+  const summary2BaseId = useSummaryProp('id');
+  const summary2NodeId = useSummaryProp('nodeId');
 
   return (
     <Flex
       item
       className={cn(pageBreakStyles(pageBreak), classes.summaryItem, className)}
       size={grid}
+      data-componentbaseid={summary2BaseId}
+      data-componentid={summary2NodeId}
       data-summary-target={indexedId}
       data-summary-target-type={type}
     >

src/layout/Summary2/SummaryComponent2/SummaryComponent2.test.tsx

@@ -80,6 +80,24 @@ describe('SummaryComponent', () => {
     expect(screen.getByTestId('summary-single-value-component')).toBeInTheDocument();
   });
 
+  test('should expose the Summary2 component identifiers on rendered summary content', async () => {
+    await render({
+      summary2Config: {
+        type: 'Summary2',
+        hideEmptyFields: false,
+        id: 'Summary2',
+        target: {
+          id: 'Input',
+          type: 'component',
+        },
+      },
+    });
+
+    const summaryItem = screen.getByTestId('summary-single-value-component').closest('[data-componentid]');
+    expect(summaryItem).toHaveAttribute('data-componentid', 'mySummary2');
+    expect(summaryItem).toHaveAttribute('data-componentbaseid', 'mySummary2');
+  });
+
   test('should not render component if its set to hide if empty', async () => {
     await render({
       summary2Config: {

src/layout/Summary2/summaryStoreContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext } from 'react';
 import type { PropsWithChildren } from 'react';
 
 import { useLayoutLookups } from 'src/features/form/layout/LayoutsContext';
+import { useIndexedId } from 'src/utils/layout/DataModelLocation';
 import { useItemWhenType } from 'src/utils/layout/useNodeItem';
 import type { ISummaryOverridesCommon } from 'src/layout/common.generated';
 import type { CompSummaryOverrides, CompTypes } from 'src/layout/layout';
@@ -10,17 +11,18 @@ import type { CompSummary2External } from 'src/layout/Summary2/config.generated'
 type Summary2State = Pick<
   CompSummary2External,
   'id' | 'hideEmptyFields' | 'showPageInAccordion' | 'overrides' | 'isCompact'
->;
+> & { nodeId: string };
 const StoreContext = createContext<Summary2State | null>(null);
 
 export function Summary2StoreProvider({ children, baseComponentId }: PropsWithChildren<{ baseComponentId: string }>) {
+  const nodeId = useIndexedId(baseComponentId);
   const { id, hideEmptyFields, showPageInAccordion, overrides, isCompact } = useItemWhenType(
     baseComponentId,
     'Summary2',
   );
 
   return (
-    <StoreContext.Provider value={{ id, hideEmptyFields, showPageInAccordion, overrides, isCompact }}>
+    <StoreContext.Provider value={{ id, nodeId, hideEmptyFields, showPageInAccordion, overrides, isCompact }}>
       {children}
     </StoreContext.Provider>
   );