Make first name and last name optional in user forms (#23327)

frontend/src/metabase-types/api/user.ts

@@ -2,8 +2,8 @@ export type UserId = number;
 
 export interface BaseUser {
   id: UserId;
-  first_name: string;
-  last_name: string;
+  first_name: string | null;
+  last_name: string | null;
   common_name: string;
   email: string;
   locale: string | null;

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

@@ -13,13 +13,15 @@ const getNameFields = () => [
     title: t`First name`,
     placeholder: "Johnny",
     autoFocus: true,
-    validate: validate.required().maxLength(100),
+    validate: validate.maxLength(100),
+    normalize: firstName => firstName || null,
   },
   {
     name: "last_name",
     title: t`Last name`,
     placeholder: "Appleseed",
-    validate: validate.required().maxLength(100),
+    validate: validate.maxLength(100),
+    normalize: lastName => lastName || null,
   },
 ];
 

frontend/src/metabase/home/homepage/components/HomeGreeting/HomeGreeting.tsx

@@ -35,7 +35,7 @@ const HomeGreeting = ({
   );
 };
 
-const getMessage = (name: string): string => {
+const getMessage = (name: string | null): string => {
   const namePart = name ? `, ${name}` : "";
   const options = [
     t`Hey there${namePart}`,

frontend/test/metabase/scenarios/admin/people/people.cy.spec.js

@@ -88,6 +88,23 @@ describe("scenarios > admin > people", () => {
       cy.findByText(FULL_NAME);
     });
 
+    it("should allow admin to create new users without first name or last name (metabase#22754)", () => {
+      const { email } = TEST_USER;
+      cy.visit("/admin/people");
+      clickButton("Invite someone");
+
+      // bit of a hack since there are multiple "Email" nodes
+      cy.findByLabelText("Email").type(email);
+      clickButton("Create");
+
+      // second modal
+      cy.findByText(`${email} has been added`);
+      cy.findByText("Show").click();
+      cy.findByText("Done").click();
+
+      cy.findByText(email);
+    });
+
     it("should disallow admin to create new users with case mutation of existing user", () => {
       const { first_name, last_name, email } = normal;
       cy.visit("/admin/people");

frontend/test/metabase/scenarios/onboarding/setup/user_settings.cy.spec.js

@@ -36,6 +36,19 @@ describe("user > settings", () => {
     cy.signInAsNormalUser();
   });
 
+  it("should be able to remove first name and last name (metabase#22754)", () => {
+    cy.visit("/account/profile");
+    cy.findByText("Account settings");
+    cy.findByLabelText("First name").clear();
+    cy.findByLabelText("Last name").clear();
+    cy.button("Update").click();
+
+    cy.reload();
+
+    cy.findByLabelText("First name").should("be.empty");
+    cy.findByLabelText("Last name").should("be.empty");
+  });
+
   it("should show user details with disabled submit button", () => {
     cy.visit("/account/profile");
     cy.findByText("Account settings");

frontend/test/metabase/scenarios/smoketest/admin.cy.spec.js

@@ -18,6 +18,67 @@ describe("metabase-smoketest > admin", () => {
   before(() => restore("blank"));
 
   describe("Admin can setup an account", () => {
+    beforeEach(() => restore("blank"));
+
+    it("should set up Metabase without first name and last name (metabase#22754)", () => {
+      // This is a simplified version of the "scenarios > setup" test
+      cy.visit("/");
+      cy.findByText("Welcome to Metabase");
+      cy.url().should("not.include", "login");
+      cy.findByTextEnsureVisible("Let's get started").click();
+
+      // Language
+
+      cy.findByText("What's your preferred language?");
+      cy.findByText("English").click();
+      cy.findByText("Next").click();
+
+      // User (with workaround from "scenarios > setup"  document)
+
+      cy.findByText("What should we call you?");
+
+      cy.findByLabelText("Email").type(admin.email);
+      cy.findByLabelText("Company or team name").type("Epic Team");
+
+      cy.findByLabelText("Create a password")
+        .clear()
+        .type(admin.password);
+      cy.findByLabelText("Confirm your password")
+        .clear()
+        .type(admin.password);
+      cy.findByText("Next").click();
+
+      cy.findByText("Hi. Nice to meet you!");
+
+      // Database
+
+      cy.findByText("Add your data");
+      cy.findByText("I'll add my data later");
+
+      cy.findByText("Show more options").click();
+      cy.findByText("H2").click();
+      cy.findByLabelText("Display name").type("Metabase H2");
+
+      const dbFilename = "frontend/test/__runner__/empty.db";
+      const dbPath = Cypress.config("fileServerFolder") + "/" + dbFilename;
+      cy.findByLabelText("Connection String").type(`file:${dbPath}`);
+      cy.findByText("Connect database").click();
+
+      // Turns off anonymous data collection
+      cy.findByLabelText(
+        "Allow Metabase to anonymously collect usage events",
+      ).click();
+      cy.findByText("All collection is completely anonymous.").should(
+        "not.exist",
+      );
+      cy.findByText("Finish").click();
+
+      // Finish & Subscribe
+
+      cy.findByText("Take me to Metabase").click();
+      cy.location("pathname").should("eq", "/");
+    });
+
     it("should set up Metabase", () => {
       // This is a simplified version of the "scenarios > setup" test
       cy.visit("/");