feat: prefill org and project name for first org/project (#29281)

* feat: prefill first org name and first project name

* chore: move prefill logic to new page

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx

@@ -11,7 +11,11 @@ import { useParams } from 'common'
 import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
 import Panel from 'components/ui/Panel'
 import { useOrganizationCreateMutation } from 'data/organizations/organization-create-mutation'
-import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import {
+  invalidateOrganizationsQuery,
+  useOrganizationsQuery,
+} from 'data/organizations/organizations-query'
+import { useProfile } from 'lib/profile'
 import { BASE_PATH, PRICING_TIER_LABELS_ORG } from 'lib/constants'
 import { getURL } from 'lib/helpers'
 import { Button, Input, Listbox, Toggle } from 'ui'
@@ -44,6 +48,8 @@ interface NewOrgFormProps {
  */
 const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
   const router = useRouter()
+  const user = useProfile()
+  const { data: organizations, isSuccess } = useOrganizationsQuery()
   const stripe = useStripe()
   const elements = useElements()
   const queryClient = useQueryClient()
@@ -77,10 +83,20 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
     router.push({ query })
   }, [dbPricingTierKey, orgName, orgKind, orgSize, isSpendCapEnabled])
 
+  useEffect(() => {
+    if (!orgName && organizations?.length === 0 && !user.isLoading) {
+      const prefilledOrgName = user.profile?.username ? user.profile.username + `'s Org` : 'My Org'
+      setOrgName(prefilledOrgName)
+    }
+  }, [isSuccess])
+
   const { mutate: createOrganization } = useOrganizationCreateMutation({
     onSuccess: async (org: any) => {
       await invalidateOrganizationsQuery(queryClient)
-      router.push(`/new/${org.slug}`)
+      const prefilledProjectName = user.profile?.username
+        ? user.profile.username + `'s Project`
+        : 'My Project'
+      router.push(`/new/${org.slug}?projectName=${prefilledProjectName}`)
     },
     onError: () => {
       resetPaymentMethod()

apps/studio/pages/new/[slug].tsx

@@ -190,7 +190,7 @@ const instanceSizeSpecs: Record<
 
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
-  const { slug } = useParams()
+  const { slug, projectName } = useParams()
 
   const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate')
   const cloudProviderEnabled = useFlag('enableFlyCloudProvider')
@@ -307,7 +307,7 @@ const Wizard: NextPageWithLayout = () => {
     mode: 'onChange',
     defaultValues: {
       organization: slug,
-      projectName: '',
+      projectName: projectName || '',
       postgresVersion: '',
       cloudProvider: PROVIDERS[DEFAULT_PROVIDER].id,
       dbPass: '',
@@ -400,6 +400,7 @@ const Wizard: NextPageWithLayout = () => {
     // [Joshen] Cause slug depends on router which doesnt load immediately on render
     // While the form data does load immediately
     if (slug) form.setValue('organization', slug)
+    if (projectName) form.setValue('projectName', projectName || '')
   }, [slug])
 
   useEffect(() => {

apps/studio/pages/projects.tsx

@@ -43,8 +43,9 @@ const ProjectsPage: NextPageWithLayout = () => {
 
     if (orgCreationExperimentGroup === 'group-b' && !navLayoutV2 && isSuccess && hasWindowLoaded) {
       // navigate to new page exactly once
+      const hasNoOrg = organizations.length === 0
       const hasShownNewPage = localStorage.getItem(LOCAL_STORAGE_KEYS.UI_ONBOARDING_NEW_PAGE_SHOWN)
-      if (!hasShownNewPage && organizations.length === 0) {
+      if (hasNoOrg && !hasShownNewPage) {
         localStorage.setItem(LOCAL_STORAGE_KEYS.UI_ONBOARDING_NEW_PAGE_SHOWN, 'true')
         router.push('/new')
       }