feat(hybrid-cloud): Update create new organization button (#38717)

Co-authored-by: Mark Story <[email protected]>

Author: dashed

static/app/components/sidebar/sidebarDropdown/switchOrganization.tsx

@@ -10,14 +10,48 @@ import {IconAdd, IconChevron} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {OrganizationSummary} from 'sentry/types';
+import useOrganization from 'sentry/utils/useOrganization';
+import useResolveRoute from 'sentry/utils/useResolveRoute';
 import withOrganizations from 'sentry/utils/withOrganizations';
 
 import Divider from './divider.styled';
 
+function CreateOrganization({canCreateOrganization}: {canCreateOrganization: boolean}) {
+  const currentOrganization = useOrganization();
+  const route = useResolveRoute('/organizations/new/');
+
+  if (!canCreateOrganization) {
+    return null;
+  }
+
+  const menuItemProps: Partial<React.ComponentProps<typeof SidebarMenuItem>> = {};
+
+  if (currentOrganization.features.includes('customer-domains')) {
+    menuItemProps.href = route;
+    menuItemProps.openInNewTab = false;
+  } else {
+    menuItemProps.to = route;
+  }
+
+  return (
+    <SidebarMenuItem
+      data-test-id="sidebar-create-org"
+      style={{alignItems: 'center'}}
+      {...menuItemProps}
+    >
+      <MenuItemLabelWithIcon>
+        <StyledIconAdd />
+        <span>{t('Create a new organization')}</span>
+      </MenuItemLabelWithIcon>
+    </SidebarMenuItem>
+  );
+}
+
 type Props = {
   canCreateOrganization: boolean;
   organizations: OrganizationSummary[];
 };
+
 /**
  * Switch Organization Menu Label + Sub Menu
  */
@@ -64,18 +98,7 @@ const SwitchOrganization = ({organizations, canCreateOrganization}: Props) => (
             {organizations && !!organizations.length && canCreateOrganization && (
               <Divider css={{marginTop: 0}} />
             )}
-            {canCreateOrganization && (
-              <SidebarMenuItem
-                data-test-id="sidebar-create-org"
-                to="/organizations/new/"
-                style={{alignItems: 'center'}}
-              >
-                <MenuItemLabelWithIcon>
-                  <StyledIconAdd />
-                  <span>{t('Create a new organization')}</span>
-                </MenuItemLabelWithIcon>
-              </SidebarMenuItem>
-            )}
+            {<CreateOrganization canCreateOrganization={canCreateOrganization} />}
           </SwitchOrganizationMenu>
         )}
       </Fragment>

static/app/components/sidebar/switchOrganization.spec.tsx

@@ -1,18 +1,33 @@
 import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {SwitchOrganization} from 'sentry/components/sidebar/sidebarDropdown/switchOrganization';
+import {Organization} from 'sentry/types';
+import {OrganizationContext} from 'sentry/views/organizationContext';
 
 describe('SwitchOrganization', function () {
+  function mountWithOrg(children, organization?: Organization) {
+    if (!organization) {
+      organization = TestStubs.Organization() as Organization;
+    }
+    return (
+      <OrganizationContext.Provider value={organization}>
+        {children}
+      </OrganizationContext.Provider>
+    );
+  }
+
   it('can list organizations', function () {
     jest.useFakeTimers();
     render(
-      <SwitchOrganization
-        canCreateOrganization={false}
-        organizations={[
-          TestStubs.Organization({name: 'Organization 1'}),
-          TestStubs.Organization({name: 'Organization 2', slug: 'org2'}),
-        ]}
-      />
+      mountWithOrg(
+        <SwitchOrganization
+          canCreateOrganization={false}
+          organizations={[
+            TestStubs.Organization({name: 'Organization 1'}),
+            TestStubs.Organization({name: 'Organization 2', slug: 'org2'}),
+          ]}
+        />
+      )
     );
 
     userEvent.hover(screen.getByTestId('sidebar-switch-org'));
@@ -27,18 +42,26 @@ describe('SwitchOrganization', function () {
 
   it('shows "Create an Org" if they have permission', function () {
     jest.useFakeTimers();
-    render(<SwitchOrganization canCreateOrganization organizations={[]} />);
+    render(mountWithOrg(<SwitchOrganization canCreateOrganization organizations={[]} />));
 
     userEvent.hover(screen.getByTestId('sidebar-switch-org'));
     act(() => void jest.advanceTimersByTime(500));
 
     expect(screen.getByTestId('sidebar-create-org')).toBeInTheDocument();
+
+    const createOrgLink = screen.getByRole('link', {name: 'Create a new organization'});
+    expect(createOrgLink).toBeInTheDocument();
+    expect(createOrgLink).toHaveAttribute('href', '/organizations/new/');
     jest.useRealTimers();
   });
 
   it('does not have "Create an Org" if they do not have permission', function () {
     jest.useFakeTimers();
-    render(<SwitchOrganization canCreateOrganization={false} organizations={[]} />);
+    render(
+      mountWithOrg(
+        <SwitchOrganization canCreateOrganization={false} organizations={[]} />
+      )
+    );
 
     userEvent.hover(screen.getByTestId('sidebar-switch-org'));
     act(() => void jest.advanceTimersByTime(500));
@@ -47,6 +70,36 @@ describe('SwitchOrganization', function () {
     jest.useRealTimers();
   });
 
+  it('uses sentry URL for "Create an Org"', function () {
+    const currentOrg = TestStubs.Organization({
+      name: 'Organization',
+      slug: 'org',
+      links: {
+        organizationUrl: 'http://org.sentry.io',
+        regionUrl: 'http://eu.sentry.io',
+      },
+      features: ['customer-domains'],
+    });
+
+    jest.useFakeTimers();
+    render(
+      mountWithOrg(
+        <SwitchOrganization canCreateOrganization organizations={[]} />,
+        currentOrg
+      )
+    );
+
+    userEvent.hover(screen.getByTestId('sidebar-switch-org'));
+    act(() => void jest.advanceTimersByTime(500));
+
+    expect(screen.getByTestId('sidebar-create-org')).toBeInTheDocument();
+
+    const createOrgLink = screen.getByRole('link', {name: 'Create a new organization'});
+    expect(createOrgLink).toBeInTheDocument();
+    expect(createOrgLink).toHaveAttribute('href', 'https://sentry.io/organizations/new/');
+    jest.useRealTimers();
+  });
+
   it('shows orgs pending deletion with a special icon', function () {
     const orgPendingDeletion = TestStubs.Organization({
       slug: 'org-2',
@@ -55,10 +108,12 @@ describe('SwitchOrganization', function () {
 
     jest.useFakeTimers();
     render(
-      <SwitchOrganization
-        canCreateOrganization
-        organizations={[TestStubs.Organization(), orgPendingDeletion]}
-      />
+      mountWithOrg(
+        <SwitchOrganization
+          canCreateOrganization
+          organizations={[TestStubs.Organization(), orgPendingDeletion]}
+        />
+      )
     );
 
     userEvent.hover(screen.getByTestId('sidebar-switch-org'));

static/app/utils/shouldUseLegacyRoute.tsx

@@ -0,0 +1,8 @@
+import {OrganizationSummary} from 'sentry/types';
+
+function shouldUseLegacyRoute(organization: OrganizationSummary) {
+  const {organizationUrl} = organization.links;
+  return !organizationUrl || !organization.features.includes('customer-domains');
+}
+
+export default shouldUseLegacyRoute;

static/app/utils/useResolveRoute.tsx

@@ -0,0 +1,40 @@
+import ConfigStore from 'sentry/stores/configStore';
+import {OrganizationSummary} from 'sentry/types';
+import useOrganization from 'sentry/utils/useOrganization';
+
+import shouldUseLegacyRoute from './shouldUseLegacyRoute';
+
+/**
+ * If organization is passed, then a URL with the route will be returned with the customer domain prefix attached if the
+ * organization has customer domain feature enabled.
+ * Otherwise, if the organization is not given, then if the current organization has customer domain enabled, then we
+ * use the sentry URL as the prefix.
+ */
+function useResolveRoute(route: string, organization?: OrganizationSummary) {
+  const {sentryUrl} = ConfigStore.get('links');
+  const currentOrganization = useOrganization();
+  const hasCustomerDomain = currentOrganization.features.includes('customer-domains');
+
+  if (!organization) {
+    if (hasCustomerDomain) {
+      return `${sentryUrl}${route}`;
+    }
+    return route;
+  }
+
+  const {organizationUrl} = organization.links;
+
+  const useLegacyRoute = shouldUseLegacyRoute(organization);
+  if (useLegacyRoute) {
+    if (hasCustomerDomain) {
+      // If the current org is a customer domain, then we need to change the hostname in addition to
+      // updating the path.
+
+      return `${sentryUrl}${route}`;
+    }
+    return route;
+  }
+  return `${organizationUrl}${route}`;
+}
+
+export default useResolveRoute;