feat(nav): Create organization button in the org switcher

src/components/organizations/CreateOrganizationDialog.tsx

@@ -0,0 +1,108 @@
+import { gql, useApolloClient } from '@apollo/client'
+import { useFormik } from 'formik'
+import { forwardRef } from 'react'
+import { object, string } from 'yup'
+
+import { Button } from '~/components/designSystem/Button'
+import { Dialog, DialogRef } from '~/components/designSystem/Dialog'
+import { TextInputField } from '~/components/form'
+import { addToast, hasDefinedGQLError, switchCurrentOrganization } from '~/core/apolloClient'
+import { HOME_ROUTE, useNavigate } from '~/core/router'
+// NOTE: `useCreateOrganizationMutation` is produced by graphql-codegen from the
+// `gql` block below once the matching `createOrganization` mutation exists in
+// the API schema (see ThinkfleetAI/lago-api feat/create-organization-mutation).
+// Run `pnpm codegen` after deploying that API change.
+import { LagoApiError, useCreateOrganizationMutation } from '~/generated/graphql'
+import { useInternationalization } from '~/hooks/core/useInternationalization'
+
+gql`
+  mutation createOrganization($name: String!) {
+    createOrganization(name: $name) {
+      id
+      name
+    }
+  }
+`
+
+export type CreateOrganizationDialogRef = DialogRef
+
+export const CreateOrganizationDialog = forwardRef<DialogRef>((_props, ref) => {
+  const { translate } = useInternationalization()
+  const apolloClient = useApolloClient()
+  const navigate = useNavigate()
+
+  const [createOrganization] = useCreateOrganizationMutation({
+    context: { silentErrorCodes: [LagoApiError.UnprocessableEntity] },
+    onCompleted: async ({ createOrganization: organization }) => {
+      if (!organization?.id) return
+
+      addToast({
+        severity: 'success',
+        // Plain message (no translation key yet); add a key when localizing.
+        message: translate('text_create_organization_success') || 'Organization created',
+      })
+
+      // Re-scope the whole app to the brand-new org, then land on its home.
+      await switchCurrentOrganization(apolloClient, organization.id)
+      navigate(HOME_ROUTE)
+    },
+  })
+
+  const formikProps = useFormik<{ name: string }>({
+    initialValues: { name: '' },
+    validationSchema: object().shape({
+      name: string().required(''),
+    }),
+    validateOnMount: true,
+    enableReinitialize: true,
+    onSubmit: async ({ name }, { resetForm }) => {
+      const result = await createOrganization({ variables: { name: name.trim() } })
+
+      if (result.errors) {
+        if (hasDefinedGQLError('ValueAlreadyExist', result.errors, 'name')) {
+          formikProps.setFieldError('name', 'Organization name is already used')
+        }
+        return
+      }
+
+      resetForm()
+    },
+  })
+
+  return (
+    <Dialog
+      ref={ref}
+      title="Create a new organization"
+      description="Spin up an independent organization with its own plans, customers, billing entity, and API key."
+      onClose={() => formikProps.resetForm()}
+      actions={({ closeDialog }) => (
+        <>
+          <Button variant="quaternary" onClick={closeDialog}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            disabled={!formikProps.isValid || !formikProps.dirty}
+            onClick={async () => {
+              await formikProps.submitForm()
+              closeDialog()
+            }}
+          >
+            Create organization
+          </Button>
+        </>
+      )}
+    >
+      <div className="mb-8">
+        <TextInputField
+          name="name"
+          label="Organization name"
+          placeholder="e.g. Flobyte"
+          formikProps={formikProps}
+        />
+      </div>
+    </Dialog>
+  )
+})
+
+CreateOrganizationDialog.displayName = 'CreateOrganizationDialog'

src/layouts/MainNavLayout/OrganizationSwitcher.tsx

@@ -1,16 +1,18 @@
 import { ApolloClient, ApolloError } from '@apollo/client'
 import { captureException } from '@sentry/react'
 import { ConditionalWrapper, Icon } from 'lago-design-system'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { Avatar } from '~/components/designSystem/Avatar'
 import { Button } from '~/components/designSystem/Button'
+import { DialogRef } from '~/components/designSystem/Dialog'
 import { Popper } from '~/components/designSystem/Popper'
 import { Skeleton } from '~/components/designSystem/Skeleton'
 import { Tooltip } from '~/components/designSystem/Tooltip'
 import { Typography } from '~/components/designSystem/Typography'
 import { VerticalMenuSectionTitle } from '~/components/designSystem/VerticalMenu'
+import { CreateOrganizationDialog } from '~/components/organizations/CreateOrganizationDialog'
 import { addToast, logOut, switchCurrentOrganization } from '~/core/apolloClient'
 import { authenticationMethodsMapping } from '~/core/constants/authenticationMethodsMapping'
 import { HOME_ROUTE, useNavigate } from '~/core/router'
@@ -61,6 +63,7 @@ export const OrganizationSwitcher = ({
   const navigate = useNavigate()
   const { organizationSlug } = useParams<{ organizationSlug: string }>()
   const [isSwitchingOrg, setIsSwitchingOrg] = useState(false)
+  const createOrgDialogRef = useRef<DialogRef>(null)
 
   const organizationList: OrganizationFromMembership[] | undefined = currentUser?.memberships.map(
     (membership) => membership.organization,
@@ -266,6 +269,22 @@ export const OrganizationSwitcher = ({
               </div>
             )}
 
+            <div className="border-t border-grey-200 p-2">
+              <Button
+                variant="quaternary"
+                align="left"
+                size="small"
+                startIcon="plus"
+                fullWidth
+                onClick={() => {
+                  createOrgDialogRef.current?.openDialog()
+                  closePopper()
+                }}
+              >
+                Create organization
+              </Button>
+            </div>
+
             <div className="flex items-center justify-between p-2 first-child:text-left">
               <Button
                 variant="quaternary"
@@ -296,6 +315,8 @@ export const OrganizationSwitcher = ({
           </MenuPopper>
         )}
       </Popper>
+
+      <CreateOrganizationDialog ref={createOrgDialogRef} />
     </NavLayout.NavStickyElementContainer>
   )
 }