Convert the newsletter form to the standard form (#19715)

frontend/src/metabase/entities/users/forms.js

@@ -172,4 +172,13 @@ export default {
   password_reset: {
     fields: [...PASSWORD_FORM_FIELDS],
   },
+  newsletter: {
+    fields: [
+      {
+        name: "email",
+        placeholder: "youlooknicetoday@email.com",
+        validate: validate.required().email(),
+      },
+    ],
+  },
 };

frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.styled.tsx

@@ -3,7 +3,7 @@ import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
 import Button from "metabase/components/Button";
 
-export const FormRoot = styled.form`
+export const FormRoot = styled.div`
   position: relative;
   padding: 2rem;
   border: 1px solid ${color("border")};
@@ -46,13 +46,14 @@ export const FormHeader = styled.div`
   margin-bottom: 1.5rem;
 `;
 
-export const FormInputContainer = styled.div`
+export const FormContainer = styled.div`
   display: flex;
 `;
 
-export const FormInputButton = styled(Button)`
-  flex: 0 0 auto;
-  margin-left: 1rem;
+export const FormFieldContainer = styled.div`
+  flex: 1 0 auto;
+  margin-right: 1rem;
+  margin-bottom: -1.5em;
 `;
 
 export const FormSuccessContainer = styled.div`

frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.tsx

-import React, { ChangeEvent, SyntheticEvent, useState } from "react";
+import React, { useState } from "react";
 import { t } from "ttag";
-import Input from "metabase/components/Input";
+import Users from "metabase/entities/users";
+import Form from "metabase/containers/Form";
 import {
-  FormInputButton,
-  FormInputContainer,
+  FormContainer,
+  FormFieldContainer,
+  FormHeader,
   FormLabel,
   FormLabelCard,
   FormLabelIcon,
   FormLabelText,
-  FormHeader,
   FormRoot,
   FormSuccessContainer,
   FormSuccessIcon,
   FormSuccessText,
 } from "./NewsletterForm.styled";
+import { FormProps } from "./types";
+import { SubscribeInfo } from "../../types";
 
 export interface NewsletterFormProps {
   initialEmail?: string;
@@ -24,21 +27,16 @@ const NewsletterForm = ({
   initialEmail = "",
   onSubscribe,
 }: NewsletterFormProps): JSX.Element => {
-  const [email, setEmail] = useState(initialEmail);
+  const initialValues = { email: initialEmail };
   const [isSubscribed, setIsSubscribed] = useState(false);
 
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setEmail(event.currentTarget.value);
-  };
-
-  const onSubmit = (event: SyntheticEvent) => {
-    event.preventDefault();
-    onSubscribe(email);
+  const onSubmit = async ({ email }: SubscribeInfo) => {
+    await onSubscribe(email);
     setIsSubscribed(true);
   };
 
   return (
-    <FormRoot onSubmit={onSubmit}>
+    <FormRoot>
       <FormLabel>
         <FormLabelCard>
           <FormLabelIcon name="mail" />
@@ -49,17 +47,23 @@ const NewsletterForm = ({
         {t`Get infrequent emails about new releases and feature updates.`}
       </FormHeader>
       {!isSubscribed && (
-        <FormInputContainer>
-          <Input
-            name="email"
-            type="email"
-            defaultValue={initialEmail}
-            placeholder={t`Email address`}
-            fullWidth
-            onChange={onChange}
-          />
-          <FormInputButton type="submit">{t`Subscribe`}</FormInputButton>
-        </FormInputContainer>
+        <Form
+          form={Users.forms.newsletter}
+          initialValues={initialValues}
+          submitTitle={t`Subscribe`}
+          onSubmit={onSubmit}
+        >
+          {({ Form, FormField, FormSubmit }: FormProps) => (
+            <Form>
+              <FormContainer>
+                <FormFieldContainer>
+                  <FormField name="email" />
+                </FormFieldContainer>
+                <FormSubmit primary={false} />
+              </FormContainer>
+            </Form>
+          )}
+        </Form>
       )}
       {isSubscribed && (
         <FormSuccessContainer>

frontend/src/metabase/setup/components/NewsletterForm/NewsletterForm.unit.spec.tsx

-import React from "react";
+import React, { FormHTMLAttributes } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import NewsletterForm from "./NewsletterForm";
 
+const FormMock = (props: FormHTMLAttributes<HTMLFormElement>) => (
+  <form {...props}>
+    <button>Subscribe</button>
+  </form>
+);
+
+jest.mock("metabase/containers/Form", () => FormMock);
+
+jest.mock("metabase/entities/users", () => ({
+  forms: { newsletter: jest.fn() },
+}));
+
 describe("NewsletterForm", () => {
-  it("allows to submit the form with an email", () => {
+  it("allows to submit the form with an email", async () => {
     const onSubscribe = jest.fn();
 
     render(<NewsletterForm onSubscribe={onSubscribe} />);
-
-    userEvent.type(screen.getByPlaceholderText("Email address"), "a@b.com");
     userEvent.click(screen.getByText("Subscribe"));
 
-    expect(screen.getByText(/You're subscribed/)).toBeInTheDocument();
-    expect(onSubscribe).toHaveBeenCalledWith("a@b.com");
+    expect(await screen.findByText(/You're subscribed/)).toBeInTheDocument();
   });
 });

frontend/src/metabase/setup/components/NewsletterForm/types.ts

+import { ComponentType } from "react";
+
+export interface FormField {
+  name: string;
+}
+
+export interface FormProps {
+  Form: ComponentType;
+  FormField: ComponentType<FormFieldProps>;
+  FormSubmit: ComponentType<FormSubmitProps>;
+}
+
+export interface FormFieldProps {
+  name: string;
+}
+
+export interface FormSubmitProps {
+  primary?: boolean;
+  submitTitle?: string;
+}

frontend/src/metabase/setup/types.ts

@@ -28,4 +28,8 @@ export interface DatabaseDetails {
   ssl: boolean;
 }
 
+export interface SubscribeInfo {
+  email: string;
+}
+
 export type LocaleData = [string, string];