From b471e025deb8b84e0748e3bc97b311bc8e73ad65 Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Tue, 14 Nov 2023 17:41:50 +0100
Subject: [PATCH] fix(3000): Reconnect submit buttons in PageHeader to forms
 (#18602)

---
 frontend/src/scenes/cohorts/CohortEdit.tsx                 | 4 ++--
 .../scenes/early-access-features/EarlyAccessFeature.tsx    | 7 ++++---
 frontend/src/scenes/experiments/Experiment.tsx             | 6 +++---
 frontend/src/scenes/feature-flags/FeatureFlag.tsx          | 5 +++--
 frontend/src/scenes/surveys/Survey.tsx                     | 3 ++-
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/scenes/cohorts/CohortEdit.tsx b/frontend/src/scenes/cohorts/CohortEdit.tsx
index b72a0f20a3a8b..72774547a2057 100644
--- a/frontend/src/scenes/cohorts/CohortEdit.tsx
+++ b/frontend/src/scenes/cohorts/CohortEdit.tsx
@@ -41,7 +41,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
     }
     return (
         <div className="cohort">
-            <Form logic={cohortEditLogic} props={logicProps} formKey="cohort" enableFormOnSubmit>
+            <Form id="cohort" logic={cohortEditLogic} props={logicProps} formKey="cohort" enableFormOnSubmit>
                 <PageHeader
                     title={isNewCohort ? 'New cohort' : cohort.name || 'Untitled'}
                     buttons={
@@ -119,7 +119,7 @@ export function CohortEdit({ id }: CohortLogicProps): JSX.Element {
                                 data-attr="save-cohort"
                                 htmlType="submit"
                                 loading={cohortLoading || cohort.is_calculating}
-                                disabled={cohortLoading || cohort.is_calculating}
+                                form="cohort"
                             >
                                 Save
                             </LemonButton>
diff --git a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
index fe8815c04dfc2..959d57825aae5 100644
--- a/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
+++ b/frontend/src/scenes/early-access-features/EarlyAccessFeature.tsx
@@ -64,7 +64,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
     }
 
     return (
-        <Form formKey="earlyAccessFeature" logic={earlyAccessFeatureLogic}>
+        <Form id="early-access-feature" formKey="earlyAccessFeature" logic={earlyAccessFeatureLogic}>
             <PageHeader
                 title={isNewEarlyAccessFeature ? 'New Feature Release' : earlyAccessFeature.name}
                 buttons={
@@ -95,6 +95,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                                         submitEarlyAccessFeatureRequest(earlyAccessFeature)
                                     }}
                                     loading={isEarlyAccessFeatureSubmitting}
+                                    form="early-access-feature"
                                 >
                                     {isNewEarlyAccessFeature ? 'Save as draft' : 'Save'}
                                 </LemonButton>
@@ -146,7 +147,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                                         type="secondary"
                                         onClick={() => updateStage(EarlyAccessFeatureStage.Beta)}
                                     >
-                                        Reactivate Beta
+                                        Reactivate beta
                                     </LemonButton>
                                 )}
                                 {earlyAccessFeature.stage == EarlyAccessFeatureStage.Draft && (
@@ -155,7 +156,7 @@ export function EarlyAccessFeature({ id }: { id?: string } = {}): JSX.Element {
                                         tooltip={'Make beta feature available'}
                                         type="primary"
                                     >
-                                        Release Beta
+                                        Release beta
                                     </LemonButton>
                                 )}
                                 <LemonDivider vertical />
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
index 0691e0626f1bb..4b114f486fb48 100644
--- a/frontend/src/scenes/experiments/Experiment.tsx
+++ b/frontend/src/scenes/experiments/Experiment.tsx
@@ -165,10 +165,10 @@ export function Experiment(): JSX.Element {
             {experimentId === 'new' || editingExistingExperiment ? (
                 <>
                     <Form
+                        id="experiment"
                         logic={experimentLogic}
                         formKey="experiment"
                         props={props}
-                        id="experiment-form"
                         enableFormOnSubmit
                         className="space-y-4 experiment-form"
                     >
@@ -196,7 +196,7 @@ export function Experiment(): JSX.Element {
                                         data-attr="save-experiment"
                                         htmlType="submit"
                                         loading={experimentLoading}
-                                        disabled={experimentLoading}
+                                        form="experiment"
                                     >
                                         {editingExistingExperiment ? 'Save' : 'Save as draft'}
                                     </LemonButton>
@@ -512,7 +512,7 @@ export function Experiment(): JSX.Element {
                                 data-attr="save-experiment"
                                 htmlType="submit"
                                 loading={experimentLoading}
-                                disabled={experimentLoading}
+                                form="experiment"
                             >
                                 {editingExistingExperiment ? 'Save' : 'Save as draft'}
                             </LemonButton>
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 40b48cf07c94a..1118c87a2b31d 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -219,6 +219,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
             <div className="feature-flag">
                 {isNewFeatureFlag || isEditingFlag ? (
                     <Form
+                        id="feature-flag"
                         logic={featureFlagLogic}
                         props={props}
                         formKey="featureFlag"
@@ -248,8 +249,8 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                         type="primary"
                                         data-attr="save-feature-flag"
                                         htmlType="submit"
+                                        form="feature-flag"
                                         loading={featureFlagLoading}
-                                        disabled={featureFlagLoading}
                                     >
                                         Save
                                     </LemonButton>
@@ -449,8 +450,8 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                 type="primary"
                                 data-attr="save-feature-flag"
                                 htmlType="submit"
+                                form="feature-flag"
                                 loading={featureFlagLoading}
-                                disabled={featureFlagLoading}
                             >
                                 Save
                             </LemonButton>
diff --git a/frontend/src/scenes/surveys/Survey.tsx b/frontend/src/scenes/surveys/Survey.tsx
index a6a74a9ff1877..30ed3fe5e4e34 100644
--- a/frontend/src/scenes/surveys/Survey.tsx
+++ b/frontend/src/scenes/surveys/Survey.tsx
@@ -50,7 +50,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
     const { loadSurvey, editingSurvey } = useActions(surveyLogic)
 
     return (
-        <Form formKey="survey" logic={surveyLogic} className="space-y-4" enableFormOnSubmit>
+        <Form id="survey" formKey="survey" logic={surveyLogic} className="space-y-4" enableFormOnSubmit>
             <PageHeader
                 title={id === 'new' ? 'New survey' : survey.name}
                 buttons={
@@ -75,6 +75,7 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
                             data-attr="save-feature-flag"
                             htmlType="submit"
                             loading={surveyLoading}
+                            form="survey"
                         >
                             {id === 'new' ? 'Save as draft' : 'Save'}
                         </LemonButton>