Request v3 access (from the app) and disable v2 projects by default (#…

…1123)

* Added v2Enabled and hasRequestedV3 columns to Organization

* Don’t create a project when you create an org

* Form for requesting v3 access

* Reworked the new project form with the different version states. Refined copy on early access

* If the project isn’t in the org then redirect to the new project page

* Better message for existing users

* Tidy imports

* If it’s not the managed cloud then allow them to create v2 projects

apps/webapp/app/models/organization.server.ts

@@ -21,16 +21,12 @@ export async function createOrganization(
  {
  title,
  userId,
- projectName,
  companySize,
- projectVersion,
  }: Pick<Organization, "title" | "companySize"> & {
  userId: User["id"];
- projectName: string;
- projectVersion: "v2" | "v3";
  },
  attemptCount = 0
-): Promise<Organization & { projects: Project[] }> {
+): Promise<Organization> {
  if (typeof process.env.BLOCKED_USERS === "string" && process.env.BLOCKED_USERS.includes(userId)) {
  throw new Error("Organization could not be created.");
  }
@@ -50,9 +46,7 @@ export async function createOrganization(
  {
  title,
  userId,
- projectName,
  companySize,
- projectVersion,
  },
  attemptCount + 1
  );
@@ -76,14 +70,7 @@ export async function createOrganization(
  },
  });
 
- const project = await createProject({
- organizationSlug: organization.slug,
- name: projectName,
- userId,
- version: projectVersion,
- });
-
- return { ...organization, projects: [project] };
+ return { ...organization };
 }
 
 export async function createEnvironment(

apps/webapp/app/presenters/OrganizationsPresenter.server.ts

@@ -64,6 +64,10 @@ export class OrganizationsPresenter {
  );
  }
 
+ if (project.organizationId !== organization.id) {
+ throw redirect(newProjectPath({ slug: organizationSlug }), request);
+ }
+
  return { organizations, organization, project };
  }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx

@@ -16,13 +16,17 @@ import { FormTitle } from "~/components/primitives/FormTitle";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
+import { Paragraph } from "~/components/primitives/Paragraph";
 import { Select, SelectItem } from "~/components/primitives/Select";
+import { TextLink } from "~/components/primitives/TextLink";
 import { prisma } from "~/db.server";
 import { useFeatures } from "~/hooks/useFeatures";
+import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { createProject } from "~/models/project.server";
 import { requireUserId } from "~/services/session.server";
 import { OrganizationParamsSchema, organizationPath, projectPath } from "~/utils/pathBuilder";
+import { RequestV3Access } from "../resources.orgs.$organizationSlug.v3-access";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
  const userId = await requireUserId(request);
@@ -34,10 +38,14 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
  id: true,
  title: true,
  v3Enabled: true,
+ v2Enabled: true,
+ hasRequestedV3: true,
  _count: {
  select: {
  projects: {
- where: { deletedAt: null },
+ where: {
+ deletedAt: null,
+ },
  },
  },
  },
@@ -57,6 +65,8 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
  slug: organizationSlug,
  projectsCount: organization._count.projects,
  v3Enabled: organization.v3Enabled,
+ v2Enabled: organization.v2Enabled,
+ hasRequestedV3: organization.hasRequestedV3,
  },
  defaultVersion: url.searchParams.get("version") ?? "v2",
  });
@@ -98,11 +108,23 @@ export const action: ActionFunction = async ({ request, params }) => {
 };
 
 export default function NewOrganizationPage() {
- const { organization, defaultVersion } = useTypedLoaderData<typeof loader>();
+ const { organization } = useTypedLoaderData<typeof loader>();
  const lastSubmission = useActionData();
- const { v3Enabled } = useFeatures();
+ const { v3Enabled, isManagedCloud } = useFeatures();
 
  const canCreateV3Projects = organization.v3Enabled && v3Enabled;
+ const canCreateV2Projects = organization.v2Enabled || !isManagedCloud;
+ const canCreateProjects = canCreateV2Projects || canCreateV3Projects;
+
+ if (!canCreateProjects) {
+ return (
+ <RequestV3Access
+ hasRequestedV3={organization.hasRequestedV3}
+ organizationSlug={organization.slug}
+ projectsCount={organization.projectsCount}
+ />
+ );
+ }
 
  const [form, { projectName, projectVersion }] = useForm({
  id: "create-project",
@@ -119,7 +141,7 @@ export default function NewOrganizationPage() {
  <FormTitle
  LeadingIcon="folder"
  title="Create a new project"
- description={`This will create a new project in your "${organization.title}" organization. `}
+ description={`This will create a new project in your "${organization.title}" organization.`}
  />
  <Form method="post" {...form.props}>
  {organization.projectsCount === 0 && (
@@ -138,7 +160,7 @@ export default function NewOrganizationPage() {
  />
  <FormError id={projectName.errorId}>{projectName.error}</FormError>
  </InputGroup>
- {canCreateV3Projects ? (
+ {canCreateV2Projects && canCreateV3Projects ? (
  <InputGroup>
  <Label htmlFor={projectVersion.id}>Project version</Label>
  <Select
@@ -161,8 +183,16 @@ export default function NewOrganizationPage() {
  </Select>
  <FormError id={projectVersion.errorId}>{projectVersion.error}</FormError>
  </InputGroup>
+ ) : canCreateV3Projects ? (
+ <>
+ <Callout variant="info">This will be a v3 project</Callout>
+ <input {...conform.input(projectVersion, { type: "hidden" })} value={"v3"} />
+ </>
  ) : (
- <input {...conform.input(projectVersion, { type: "hidden" })} value="v2" />
+ <>
+ <Callout variant="info">This will be a v2 project</Callout>
+ <input {...conform.input(projectVersion, { type: "hidden" })} value={"v2"} />
+ </>
  )}
  <FormButtons
  confirmButton={

apps/webapp/app/routes/_app.orgs.new/route.tsx

@@ -17,19 +17,14 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { RadioGroupItem } from "~/components/primitives/RadioButton";
-import { Select, SelectItem } from "~/components/primitives/Select";
-import { featuresForRequest } from "~/features.server";
 import { useFeatures } from "~/hooks/useFeatures";
 import { createOrganization } from "~/models/organization.server";
 import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
-import { commitCurrentProjectSession, setCurrentProjectId } from "~/services/currentProject.server";
 import { requireUserId } from "~/services/session.server";
-import { projectPath, rootPath, selectPlanPath } from "~/utils/pathBuilder";
+import { organizationPath, rootPath } from "~/utils/pathBuilder";
 
 const schema = z.object({
  orgName: z.string().min(3).max(50),
- projectName: z.string().min(3).max(50),
- projectVersion: z.enum(["v2", "v3"]),
  companySize: z.string().optional(),
 });
 
@@ -57,29 +52,10 @@ export const action: ActionFunction = async ({ request }) => {
  const organization = await createOrganization({
  title: submission.value.orgName,
  userId,
- projectName: submission.value.projectName,
  companySize: submission.value.companySize ?? null,
- projectVersion: submission.value.projectVersion,
  });
 
- const project = organization.projects[0];
- const session = await setCurrentProjectId(project.id, request);
-
- const { isManagedCloud } = featuresForRequest(request);
-
- const headers = {
- "Set-Cookie": await commitCurrentProjectSession(session),
- };
-
- if (isManagedCloud && submission.value.projectVersion === "v2") {
- return redirect(selectPlanPath(organization), {
- headers,
- });
- }
-
- return redirect(projectPath(organization, project), {
- headers,
- });
+ return redirect(organizationPath(organization));
  } catch (error: any) {
  return json({ errors: { body: error.message } }, { status: 400 });
  }
@@ -91,10 +67,7 @@ export default function NewOrganizationPage() {
  const { isManagedCloud } = useFeatures();
  const navigation = useNavigation();
 
- //this is temporary whilst v3 is invite-only. Switch to the useFeatures value when v3 is generally available.
- const v3Enabled = false;
-
- const [form, { orgName, projectName, projectVersion }] = useForm({
+ const [form, { orgName }] = useForm({
  id: "create-organization",
  // TODO: type this
  lastSubmission: lastSubmission as any,
@@ -123,45 +96,9 @@ export default function NewOrganizationPage() {
  <Hint>E.g. your company name or your workspace name.</Hint>
  <FormError id={orgName.errorId}>{orgName.error}</FormError>
  </InputGroup>
- <InputGroup>
- <Label htmlFor={projectName.id}>Project name</Label>
- <Input
- {...conform.input(projectName, { type: "text" })}
- placeholder="Your Project name"
- icon="folder"
- />
- <Hint>Your Jobs will live inside this Project.</Hint>
- <FormError id={projectName.errorId}>{projectName.error}</FormError>
- </InputGroup>
- {v3Enabled ? (
- <InputGroup>
- <Label htmlFor={projectVersion.id}>Project version</Label>
- <Select
- {...conform.select(projectVersion)}
- defaultValue={undefined}
- variant="tertiary/medium"
- placeholder="Select version"
- dropdownIcon
- text={(value) => {
- switch (value) {
- case "v2":
- return "Version 2";
- case "v3":
- return "Version 3";
- }
- }}
- >
- <SelectItem value="v2">Version 2</SelectItem>
- <SelectItem value="v3">Version 3 (Developer Preview)</SelectItem>
- </Select>
- <FormError id={projectVersion.errorId}>{projectVersion.error}</FormError>
- </InputGroup>
- ) : (
- <input {...conform.input(projectVersion, { type: "hidden" })} value="v2" />
- )}
  {isManagedCloud && (
  <InputGroup>
- <Label htmlFor={projectName.id}>Number of employees</Label>
+ <Label htmlFor={"companySize"}>Number of employees</Label>
  <RadioGroup name="companySize" className="flex items-center justify-between gap-2">
  <RadioGroupItem
  id="employees-1-5"