fix(3000): Reconnect submit buttons in PageHeader to forms (#18602)

PostHog · Nov 14, 2023 · b471e02 · b471e02
1 parent 12a7872
commit b471e02
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>