Fleet UI: Update Setup experience > Users

frontend/pages/ManageControlsPage/SetupExperience/SetupExperienceNavItems.tsx

@@ -4,7 +4,7 @@ import { InjectedRouter } from "react-router";
 
 import { ISideNavItem } from "pages/admin/components/SideNav/SideNav";
 
-import EndUserAuthentication from "./cards/EndUserAuthentication/EndUserAuthentication";
+import Users from "./cards/Users/Users";
 import BootstrapPackage from "./cards/BootstrapPackage";
 import SetupAssistant from "./cards/SetupAssistant";
 import InstallSoftware from "./cards/InstallSoftware";
@@ -18,10 +18,10 @@ export interface ISetupExperienceCardProps {
 
 const SETUP_EXPERIENCE_NAV_ITEMS: ISideNavItem<ISetupExperienceCardProps>[] = [
   {
-    title: "1. End user authentication",
+    title: "1. Users",
     urlSection: "end-user-auth",
     path: PATHS.CONTROLS_END_USER_AUTHENTICATION,
-    Card: EndUserAuthentication,
+    Card: Users,
   },
   {
     title: "2. Bootstrap package",

frontend/pages/ManageControlsPage/SetupExperience/cards/EndUserAuthentication/EndUserAuthentication.tsx → frontend/pages/ManageControlsPage/SetupExperience/cards/Users/Users.tsx

@@ -13,11 +13,31 @@ import GenericMsgWithNavButton from "components/GenericMsgWithNavButton";
 import CustomLink from "components/CustomLink";
 import { LEARN_MORE_ABOUT_BASE_LINK } from "utilities/constants";
 
-import EndUserAuthForm from "./components/EndUserAuthForm/EndUserAuthForm";
+import UsersForm from "./components/UsersForm/UsersForm";
 import SetupExperienceContentContainer from "../../components/SetupExperienceContentContainer";
 import { ISetupExperienceCardProps } from "../../SetupExperienceNavItems";
 
-const baseClass = "end-user-authentication";
+const baseClass = "setup-experience-users";
+
+const getEnabledManagedLocalAccount = (
+  currentTeamId: number,
+  globalConfig?: IConfig,
+  teamConfig?: ITeamConfig
+) => {
+  if (globalConfig === undefined && teamConfig === undefined) {
+    return false;
+  }
+
+  if (currentTeamId === 0) {
+    return (
+      globalConfig?.mdm?.setup_experience?.enable_managed_local_account ?? false
+    );
+  }
+
+  return (
+    teamConfig?.mdm?.setup_experience?.enable_managed_local_account ?? false
+  );
+};
 
 const getEnabledEndUserAuth = (
   currentTeamId: number,
@@ -66,10 +86,7 @@ const isIdPConfigured = ({
   );
 };
 
-const EndUserAuthentication = ({
-  currentTeamId,
-  router,
-}: ISetupExperienceCardProps) => {
+const Users = ({ currentTeamId, router }: ISetupExperienceCardProps) => {
   const { data: globalConfig, isLoading: isLoadingGlobalConfig } = useQuery<
     IConfig,
     Error
@@ -101,6 +118,12 @@ const EndUserAuthentication = ({
     teamConfig
   );
 
+  const defaultEnableManagedLocalAccount = getEnabledManagedLocalAccount(
+    currentTeamId,
+    globalConfig,
+    teamConfig
+  );
+
   const renderContent = () => {
     if (!globalConfig || isLoadingGlobalConfig || isLoadingTeamConfig) {
       return <Spinner />;
@@ -117,10 +140,11 @@ const EndUserAuthentication = ({
             path={PATHS.ADMIN_INTEGRATIONS_SSO_END_USERS}
           />
         ) : (
-          <EndUserAuthForm
+          <UsersForm
             currentTeamId={currentTeamId}
             defaultIsEndUserAuthEnabled={defaultIsEndUserAuthEnabled}
             defaultLockEndUserInfo={defaultLockEndUserInfo}
+            defaultEnableManagedLocalAccount={defaultEnableManagedLocalAccount}
           />
         )}
       </SetupExperienceContentContainer>
@@ -130,7 +154,7 @@ const EndUserAuthentication = ({
   return (
     <section className={baseClass}>
       <SectionHeader
-        title="End user authentication"
+        title="Users"
         details={
           <CustomLink
             newTab
@@ -144,4 +168,4 @@ const EndUserAuthentication = ({
   );
 };
 
-export default EndUserAuthentication;
+export default Users;

frontend/pages/ManageControlsPage/SetupExperience/cards/EndUserAuthentication/_styles.scss → frontend/pages/ManageControlsPage/SetupExperience/cards/Users/_styles.scss

@@ -1,3 +1,3 @@
-.end-user-authentication {
+.setup-experience-users {
   @include vertical-card-layout;
 }

frontend/pages/ManageControlsPage/SetupExperience/cards/Users/components/UsersForm/UsersForm.tests.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { createCustomRenderer } from "test/test-utils";
+
+import UsersForm from "./UsersForm";
+
+describe("UsersForm", () => {
+  const defaultProps = {
+    currentTeamId: 0,
+    defaultIsEndUserAuthEnabled: false,
+    defaultLockEndUserInfo: false,
+    defaultEnableManagedLocalAccount: false,
+  };
+
+  const render = createCustomRenderer({
+    withBackendMock: true,
+  });
+
+  it("renders the end user authentication and managed local account checkboxes", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(screen.getByText("End user authentication")).toBeInTheDocument();
+    expect(screen.getByText("Managed local account")).toBeInTheDocument();
+  });
+
+  it("renders help text for end user authentication with IdP link", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(
+      screen.getByText(/End users are required to authenticate/)
+    ).toBeInTheDocument();
+    expect(screen.getByText("identity provider (IdP)")).toBeInTheDocument();
+  });
+
+  it("renders help text for managed local account", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(
+      screen.getByText(/Fleet generates a user \(_fleetadmin\)/)
+    ).toBeInTheDocument();
+  });
+
+  it("hides lock end user info when end user auth is unchecked", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(screen.queryByText("Lock end user info")).not.toBeInTheDocument();
+  });
+
+  it("shows lock end user info inline when end user auth is checked", () => {
+    render(<UsersForm {...defaultProps} defaultIsEndUserAuthEnabled />);
+    expect(screen.getByText("Lock end user info")).toBeInTheDocument();
+  });
+
+  it("reveals lock end user info when end user auth is toggled on", async () => {
+    const { user } = render(<UsersForm {...defaultProps} />);
+
+    expect(screen.queryByText("Lock end user info")).not.toBeInTheDocument();
+
+    await user.click(
+      screen.getByRole("checkbox", { name: "End user authentication" })
+    );
+
+    expect(screen.getByText("Lock end user info")).toBeInTheDocument();
+  });
+
+  it("renders managed local account checkbox as unchecked by default", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(
+      screen.getByRole("checkbox", { name: "Managed local account" })
+    ).not.toBeChecked();
+  });
+
+  it("renders managed local account checkbox as checked when default is true", () => {
+    render(<UsersForm {...defaultProps} defaultEnableManagedLocalAccount />);
+    expect(
+      screen.getByRole("checkbox", { name: "Managed local account" })
+    ).toBeChecked();
+  });
+
+  it("does not show an 'Advanced options' reveal button", () => {
+    render(<UsersForm {...defaultProps} />);
+    expect(screen.queryByText("Advanced options")).not.toBeInTheDocument();
+  });
+
+  it("renders exactly one Save button", () => {
+    render(<UsersForm {...defaultProps} />);
+    const saveButtons = screen.getAllByRole("button", { name: "Save" });
+    expect(saveButtons).toHaveLength(1);
+  });
+});