feat: rebucket "Number of developers" onboarding options (#24573)

cli/login.go

@@ -599,10 +599,22 @@ func promptTrialInfo(inv *serpent.Invocation, fieldName string) (string, error)
 	return value, nil
 }
 
+// developerBuckets are the options offered for the "Number of developers"
+// prompt during first-user setup. Keep in sync with
+// site/src/pages/SetupPage/SetupPageView.tsx (numberOfDevelopersOptions).
+var developerBuckets = []string{
+	"1 - 50",
+	"51 - 100",
+	"101 - 200",
+	"201 - 500",
+	"501 - 1000",
+	"1001 - 2500",
+	"2500+",
+}
+
 func promptDevelopers(inv *serpent.Invocation) (string, error) {
-	options := []string{"1-100", "101-500", "501-1000", "1001-2500", "2500+"}
 	selection, err := cliui.Select(inv, cliui.SelectOptions{
-		Options:    options,
+		Options:    developerBuckets,
 		HideSearch: false,
 		Message:    "Select the number of developers:",
 	})

cli/login_internal_test.go

@@ -0,0 +1,25 @@
+package cli
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/require"
+)
+
+// TestDeveloperBuckets pins the set of options offered for the
+// "Number of developers" prompt. If this test fails, also update the
+// matching list in site/src/pages/SetupPage/SetupPageView.tsx
+// (numberOfDevelopersOptions) and coordinate with the licensor service owner,
+// since the same string is forwarded to v2-licensor.coder.com/trial.
+func TestDeveloperBuckets(t *testing.T) {
+	t.Parallel()
+	require.Equal(t, []string{
+		"1 - 50",
+		"51 - 100",
+		"101 - 200",
+		"201 - 500",
+		"501 - 1000",
+		"1001 - 2500",
+		"2500+",
+	}, developerBuckets)
+}

site/src/pages/SetupPage/SetupPageView.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { chromatic } from "#/testHelpers/chromatic";
 import { mockApiError } from "#/testHelpers/entities";
 import { SetupPageView } from "./SetupPageView";
@@ -46,3 +47,36 @@ export const Loading: Story = {
 		isLoading: true,
 	},
 };
+
+// TrialOpen pins the "Number of developers" bucket list. If this assertion
+// changes, coordinate the new values with the licensor service owner, since
+// the selected bucket is forwarded verbatim to v2-licensor.coder.com/trial.
+export const TrialOpen: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		// Radix Select portals its listbox into document.body.
+		const body = within(canvasElement.ownerDocument.body);
+
+		// Reveal the trial fields by checking the Premium trial checkbox.
+		await userEvent.click(canvas.getByTestId("trial"));
+
+		// Open the "Number of developers" Select.
+		const trigger = await canvas.findByRole("combobox", {
+			name: "Number of developers",
+		});
+		await userEvent.click(trigger);
+
+		await waitFor(() => {
+			const options = body.getAllByRole("option");
+			expect(options.map((o) => o.textContent)).toEqual([
+				"1 - 50",
+				"51 - 100",
+				"101 - 200",
+				"201 - 500",
+				"501 - 1000",
+				"1001 - 2500",
+				"2500+",
+			]);
+		});
+	},
+};

site/src/pages/SetupPage/SetupPageView.tsx

@@ -73,11 +73,14 @@ const validationSchema = Yup.object({
 	}),
 });
 
+// Keep in sync with cli/login.go (developerBuckets).
 const numberOfDevelopersOptions = [
-	"1-100",
-	"101-500",
-	"501-1000",
-	"1001-2500",
+	"1 - 50",
+	"51 - 100",
+	"101 - 200",
+	"201 - 500",
+	"501 - 1000",
+	"1001 - 2500",
 	"2500+",
 ];