fix: Button dropdown with main action creates duplicate performance m…

…ark (#2643)

pages/button-dropdown/main-action.page.tsx

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+
+import ButtonDropdown from '~components/button-dropdown';
+
+export default function ButtonDropdownPage() {
+  return (
+    <>
+      <h1>Button dropdown with main action</h1>
+      <ButtonDropdown
+        items={[
+          {
+            text: 'Launch instance from template',
+            id: 'launch-instance-from-template',
+          },
+        ]}
+        mainAction={{ text: 'Launch instance' }}
+        ariaLabel="More launch options"
+        variant="primary"
+      />
+    </>
+  );
+}

src/button-dropdown/__integ__/performance-marks.test.ts

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+function setupTest(
+  pageName: string,
+  testFn: (parameters: {
+    page: BasePageObject;
+    getMarks: () => Promise<PerformanceMark[]>;
+    getElementByPerformanceMark: (id: string) => Promise<WebdriverIO.Element>;
+  }) => Promise<void>
+) {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url(`#/light/button-dropdown/${pageName}`);
+    const getMarks = async () => {
+      const marks = await browser.execute(() => performance.getEntriesByType('mark') as PerformanceMark[]);
+      return marks.filter(m => m.detail?.source === 'awsui');
+    };
+    const getElementByPerformanceMark = (id: string) => browser.$(`[data-analytics-performance-mark="${id}"]`);
+
+    await testFn({ page, getMarks, getElementByPerformanceMark });
+  });
+}
+
+describe('ButtonDropdown', () => {
+  test(
+    'Emits a single mark',
+    setupTest('main-action', async ({ getMarks, getElementByPerformanceMark }) => {
+      const marks = await getMarks();
+
+      expect(marks).toHaveLength(1);
+      expect(marks[0].name).toBe('primaryButtonRendered');
+      expect(marks[0].detail).toMatchObject({
+        source: 'awsui',
+        instanceIdentifier: expect.any(String),
+        loading: false,
+        disabled: false,
+        text: 'Launch instance',
+      });
+
+      expect(await getElementByPerformanceMark(marks[0].detail.instanceIdentifier).then(e => e.getText())).toBe(
+        'Launch instance'
+      );
+    })
+  );
+});

src/button-dropdown/internal.tsx

@@ -256,7 +256,7 @@ const InternalButtonDropdown = React.forwardRef(
             )}
             {...getAnalyticsMetadataAttribute(analyticsMetadata)}
           >
-            <InternalButton ref={triggerRef} {...baseTriggerProps} />
+            <InternalButton ref={triggerRef} {...baseTriggerProps} __emitPerformanceMarks={false} />
           </div>
         </div>
       );

src/button/internal.tsx

@@ -46,6 +46,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   __focusable?: boolean;
   __injectAnalyticsComponentMetadata?: boolean;
   __title?: string;
+  __emitPerformanceMarks?: boolean;
 } & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement>;
 
 export const InternalButton = React.forwardRef(
@@ -82,6 +83,7 @@ export const InternalButton = React.forwardRef(
       __focusable = false,
       __injectAnalyticsComponentMetadata = false,
       __title,
+      __emitPerformanceMarks = true,
       ...props
     }: InternalButtonProps,
     ref: React.Ref<ButtonProps.Ref>
@@ -108,7 +110,7 @@ export const InternalButton = React.forwardRef(
 
     const performanceMarkAttributes = usePerformanceMarks(
       'primaryButton',
-      variant === 'primary',
+      variant === 'primary' && __emitPerformanceMarks,
       buttonRef,
       () => ({
         loading,