From 3908c7cb4fcb951c764b43779f8c581e81e42503 Mon Sep 17 00:00:00 2001
From: Anders <754494+andehen@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:24:36 +0100
Subject: [PATCH] fix(experiments): hide "Participant Type" section if user
 don't use groups (#26823)

---
 .../src/scenes/experiments/ExperimentForm.tsx | 65 ++++++++++---------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx
index d1fd0b140bc4d..125fb2320ddab 100644
--- a/frontend/src/scenes/experiments/ExperimentForm.tsx
+++ b/frontend/src/scenes/experiments/ExperimentForm.tsx
@@ -6,6 +6,7 @@ import { useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
 import { ExperimentVariantNumber } from 'lib/components/SeriesGlyph'
 import { MAX_EXPERIMENT_VARIANTS } from 'lib/constants'
+import { groupsAccessLogic, GroupsAccessStatus } from 'lib/introductions/groupsAccessLogic'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { LemonRadio } from 'lib/lemon-ui/LemonRadio'
@@ -20,6 +21,7 @@ const ExperimentFormFields = (): JSX.Element => {
     const { addExperimentGroup, removeExperimentGroup, setExperiment, createExperiment, setExperimentType } =
         useActions(experimentLogic)
     const { webExperimentsAvailable } = useValues(experimentsLogic)
+    const { groupsAccessStatus } = useValues(groupsAccessLogic)
 
     return (
         <div>
@@ -103,37 +105,40 @@ const ExperimentFormFields = (): JSX.Element => {
                         />
                     </div>
                 )}
-                <div>
-                    <h3 className="mt-10">Participant type</h3>
-                    <div className="text-xs text-muted">
-                        The type on which to aggregate metrics. You can change this at any time during the experiment.
-                    </div>
-                    <LemonDivider />
-                    <LemonRadio
-                        value={
-                            experiment.parameters.aggregation_group_type_index != undefined
-                                ? experiment.parameters.aggregation_group_type_index
-                                : -1
-                        }
-                        onChange={(rawGroupTypeIndex) => {
-                            const groupTypeIndex = rawGroupTypeIndex !== -1 ? rawGroupTypeIndex : undefined
+                {groupsAccessStatus === GroupsAccessStatus.AlreadyUsing && (
+                    <div>
+                        <h3 className="mt-10">Participant type</h3>
+                        <div className="text-xs text-muted">
+                            The type on which to aggregate metrics. You can change this at any time during the
+                            experiment.
+                        </div>
+                        <LemonDivider />
+                        <LemonRadio
+                            value={
+                                experiment.parameters.aggregation_group_type_index != undefined
+                                    ? experiment.parameters.aggregation_group_type_index
+                                    : -1
+                            }
+                            onChange={(rawGroupTypeIndex) => {
+                                const groupTypeIndex = rawGroupTypeIndex !== -1 ? rawGroupTypeIndex : undefined
 
-                            setExperiment({
-                                parameters: {
-                                    ...experiment.parameters,
-                                    aggregation_group_type_index: groupTypeIndex ?? undefined,
-                                },
-                            })
-                        }}
-                        options={[
-                            { value: -1, label: 'Persons' },
-                            ...Array.from(groupTypes.values()).map((groupType) => ({
-                                value: groupType.group_type_index,
-                                label: capitalizeFirstLetter(aggregationLabel(groupType.group_type_index).plural),
-                            })),
-                        ]}
-                    />
-                </div>
+                                setExperiment({
+                                    parameters: {
+                                        ...experiment.parameters,
+                                        aggregation_group_type_index: groupTypeIndex ?? undefined,
+                                    },
+                                })
+                            }}
+                            options={[
+                                { value: -1, label: 'Persons' },
+                                ...Array.from(groupTypes.values()).map((groupType) => ({
+                                    value: groupType.group_type_index,
+                                    label: capitalizeFirstLetter(aggregationLabel(groupType.group_type_index).plural),
+                                })),
+                            ]}
+                        />
+                    </div>
+                )}
                 <div className="mt-10">
                     <h3 className="mb-1">Variants</h3>
                     <div className="text-xs text-muted">Add up to 9 variants to test against your control.</div>