feat: add unique analytics IDs to experiment, metric, and warehouse buttons

frontend/web/components/experiments/CreateMetricForm/CreateMetricForm.tsx

@@ -162,10 +162,16 @@ const CreateMetricForm: FC<CreateMetricFormProps> = ({
       </div>
 
       <div className='create-metric-form__actions d-flex justify-content-end gap-2 pt-2'>
-        <Button theme='outline' onClick={handleCancel} disabled={isSaving}>
+        <Button
+          id='metric-form-cancel'
+          theme='outline'
+          onClick={handleCancel}
+          disabled={isSaving}
+        >
           Cancel
         </Button>
         <Button
+          id='metric-form-submit'
           theme='primary'
           onClick={handleSubmit}
           disabled={!canSubmitMetric(state) || isSaving}

frontend/web/components/experiments/MetricSelectList/MetricSelectList.tsx

@@ -62,7 +62,10 @@ const MetricSelectList: FC<MetricSelectListProps> = ({
         description='Create your first metric to measure experiment outcomes.'
         icon='bar-chart'
         action={
-          <Button onClick={onCreateClick}>
+          <Button
+            id='experiment-wizard-create-metric-empty'
+            onClick={onCreateClick}
+          >
             <Icon name='plus' width={16} />
             Create Metric
           </Button>
@@ -85,7 +88,11 @@ const MetricSelectList: FC<MetricSelectListProps> = ({
             size='small'
           />
         </div>
-        <Button theme='outline' onClick={onCreateClick}>
+        <Button
+          id='experiment-wizard-create-metric'
+          theme='outline'
+          onClick={onCreateClick}
+        >
           <Icon name='plus' width={16} />
           Create Metric
         </Button>

frontend/web/components/experiments/MetricsTable/MetricsTable.tsx

@@ -50,6 +50,7 @@ const MetricsTable: FC<MetricsTableProps> = ({ metrics, onDelete, onEdit }) => {
             </td>
             <td className='metrics-table__actions'>
               <Button
+                id={`metrics-table-edit-${metric.id}`}
                 type='button'
                 size='small'
                 className='btn btn-with-icon'
@@ -58,6 +59,7 @@ const MetricsTable: FC<MetricsTableProps> = ({ metrics, onDelete, onEdit }) => {
                 <Icon name='edit' width={16} fill='#656D7B' />
               </Button>
               <Button
+                id={`metrics-table-delete-${metric.id}`}
                 type='button'
                 size='small'
                 className='btn btn-with-icon'

frontend/web/components/experiments/WizardNavButtons.tsx

@@ -2,6 +2,8 @@ import { FC } from 'react'
 import Button from 'components/base/forms/Button'
 import Icon from 'components/icons/Icon'
 
+const STEP_SLUGS = ['setup', 'rollout', 'measurement', 'review'] as const
+
 type WizardNavButtonsProps = {
   currentStep: number
   totalSteps: number
@@ -22,22 +24,35 @@ const WizardNavButtons: FC<WizardNavButtonsProps> = ({
   totalSteps,
 }) => {
   const isLastStep = currentStep === totalSteps - 1
+  const stepSlug = STEP_SLUGS[currentStep] ?? currentStep
 
   return (
     <div className='d-flex justify-content-end gap-3 mt-4'>
       {currentStep > 0 && (
-        <Button theme='outline' onClick={onBack}>
+        <Button
+          id={`experiment-wizard-${stepSlug}-back`}
+          theme='outline'
+          onClick={onBack}
+        >
           <Icon name='arrow-left' width={16} />
           Back
         </Button>
       )}
       {isLastStep ? (
-        <Button onClick={onLaunch} disabled={isSubmitting || !canContinue}>
+        <Button
+          id='experiment-wizard-review-create'
+          onClick={onLaunch}
+          disabled={isSubmitting || !canContinue}
+        >
           Create Experiment
           <Icon name='rocket' width={16} />
         </Button>
       ) : (
-        <Button onClick={onContinue} disabled={!canContinue}>
+        <Button
+          id={`experiment-wizard-${stepSlug}-continue`}
+          onClick={onContinue}
+          disabled={!canContinue}
+        >
           Continue
         </Button>
       )}

frontend/web/components/experiments/steps/ReviewStep.tsx

@@ -42,7 +42,12 @@ const ReviewStep: FC<ReviewStepProps> = ({
         background='white'
         title='Setup'
         action={
-          <Button theme='text' size='xSmall' onClick={onEditSetup}>
+          <Button
+            id='experiment-wizard-review-edit-setup'
+            theme='text'
+            size='xSmall'
+            onClick={onEditSetup}
+          >
             Edit
           </Button>
         }
@@ -81,7 +86,12 @@ const ReviewStep: FC<ReviewStepProps> = ({
           background='white'
           title='Rollout'
           action={
-            <Button theme='text' size='xSmall' onClick={onEditRollout}>
+            <Button
+              id='experiment-wizard-review-edit-rollout'
+              theme='text'
+              size='xSmall'
+              onClick={onEditRollout}
+            >
               Edit
             </Button>
           }
@@ -99,7 +109,12 @@ const ReviewStep: FC<ReviewStepProps> = ({
         background='white'
         title={selectedMetric ? 'Measurement (1 metric)' : 'Measurement'}
         action={
-          <Button theme='text' size='xSmall' onClick={onEditMeasurement}>
+          <Button
+            id='experiment-wizard-review-edit-measurement'
+            theme='text'
+            size='xSmall'
+            onClick={onEditMeasurement}
+          >
             Edit
           </Button>
         }

frontend/web/components/experiments/steps/RolloutStep.tsx

@@ -51,6 +51,7 @@ const RolloutStep: FC<RolloutStepProps> = ({
         description='Distribute sampled identities across control and treatment variations. Control takes one of the slots; weights must sum to 100.'
         action={
           <Button
+            id='experiment-wizard-rollout-split-evenly'
             theme='outline'
             size='xSmall'
             onClick={() =>

frontend/web/components/pages/MetricsPage.tsx

@@ -223,7 +223,10 @@ const MetricsPage: FC = () => {
           <p className='text-muted mb-4'>
             Create your first metric to measure experiment outcomes.
           </p>
-          <Button onClick={() => history.push(`${metricsPath}?create=true`)}>
+          <Button
+            id='metrics-page-create-empty'
+            onClick={() => history.push(`${metricsPath}?create=true`)}
+          >
             <Icon name='plus' width={16} />
             Create Metric
           </Button>
@@ -261,7 +264,10 @@ const MetricsPage: FC = () => {
               search
             />
           </div>
-          <Button onClick={() => history.push(`${metricsPath}?create=true`)}>
+          <Button
+            id='metrics-page-create'
+            onClick={() => history.push(`${metricsPath}?create=true`)}
+          >
             <Icon name='plus' width={16} />
             Create Metric
           </Button>

frontend/web/components/pages/environment-settings/tabs/warehouse-tab/ConfigForm.tsx

@@ -185,10 +185,17 @@ const ConfigForm: FC<ConfigFormProps> = ({
         )}
 
         <div className='wh-config-form__actions'>
-          <Button theme='outline' size='small' onClick={onCancel} type='button'>
+          <Button
+            id='warehouse-config-cancel'
+            theme='outline'
+            size='small'
+            onClick={onCancel}
+            type='button'
+          >
             Cancel
           </Button>
           <Button
+            id='warehouse-config-save'
             theme='primary'
             size='small'
             type='submit'

frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseConnectionCard.tsx

@@ -96,6 +96,7 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
         <div className='d-flex flex-row align-items-center gap-2'>
           {onEdit && (
             <Button
+              id='warehouse-connection-edit'
               size='xSmall'
               className='btn btn-with-icon'
               onClick={onEdit}
@@ -104,6 +105,7 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
             </Button>
           )}
           <Button
+            id='warehouse-connection-delete'
             size='xSmall'
             className='btn btn-with-icon'
             onClick={handleDelete}
@@ -133,12 +135,18 @@ const WarehouseConnectionCard: FC<WarehouseConnectionCardProps> = ({
       <WarehouseEventCodeHelp />
       <div className='d-flex justify-content-end mt-3'>
         {!isFlagsmith && (
-          <Button theme='outline' size='small' disabled>
+          <Button
+            id='warehouse-connection-test'
+            theme='outline'
+            size='small'
+            disabled
+          >
             Test connection
           </Button>
         )}
         {isFlagsmith && !isPending && !isConnected && (
           <Button
+            id='warehouse-send-first-event'
             theme='primary'
             size='small'
             onClick={onSendTestEvent}

frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx

@@ -90,6 +90,7 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
           </p>
           <div>
             <Button
+              id='warehouse-enable'
               theme='primary'
               size='small'
               disabled={isCreating}