Browse Source

chore(hybrid-cloud): Update help text on in-app organization creation (#63439)

Updates help text to be more descriptive. SSO signup will be updated in
a getsentry PR.

**before**

![image](https://github.com/getsentry/sentry/assets/35509934/7325c4a2-a5fa-46e9-a4d1-b34516d8b1a2)

**after**

![image](https://github.com/getsentry/sentry/assets/35509934/8d2a0cd3-e30f-4f6d-b734-3de5e110ab41)
Leander Rodrigues 1 year ago
parent
commit
2ad4200fe1

+ 9 - 1
static/app/views/organizationCreate/index.spec.tsx

@@ -4,7 +4,9 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
 import ConfigStore from 'sentry/stores/configStore';
-import OrganizationCreate from 'sentry/views/organizationCreate';
+import OrganizationCreate, {
+  DATA_STORAGE_DOCS_LINK,
+} from 'sentry/views/organizationCreate';
 
 describe('OrganizationCreate', function () {
   let oldRegions: any[] = [];
@@ -156,6 +158,9 @@ describe('OrganizationCreate', function () {
     const orgCreateMock = multiRegionSetup();
     render(<OrganizationCreate />);
     expect(screen.getByLabelText('Data Storage Location')).toBeInTheDocument();
+    const link = screen.getByText<HTMLAnchorElement>('Learn More');
+    expect(link).toBeInTheDocument();
+    expect(link.href).toBe(DATA_STORAGE_DOCS_LINK);
     await userEvent.type(screen.getByPlaceholderText('e.g. My Company'), 'Good Burger');
     await userEvent.click(screen.getByText('Create Organization'));
 
@@ -213,6 +218,9 @@ describe('OrganizationCreate', function () {
     const orgCreateMock = multiRegionSetup();
     render(<OrganizationCreate />);
     expect(screen.getByLabelText('Data Storage Location')).toBeInTheDocument();
+    const link = screen.getByText<HTMLAnchorElement>('Learn More');
+    expect(link).toBeInTheDocument();
+    expect(link.href).toBe(DATA_STORAGE_DOCS_LINK);
     await userEvent.type(screen.getByPlaceholderText('e.g. My Company'), 'Good Burger');
     await selectEvent.select(
       screen.getByRole('textbox', {name: 'Data Storage Location'}),

+ 8 - 2
static/app/views/organizationCreate/index.tsx

@@ -15,6 +15,9 @@ import {getRegionChoices, shouldDisplayRegions} from 'sentry/utils/regions';
 import useApi from 'sentry/utils/useApi';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 
+export const DATA_STORAGE_DOCS_LINK =
+  'https://docs.sentry.io/product/accounts/choose-your-data-center';
+
 function removeDataStorageLocationFromFormData(
   formData: Record<string, any>
 ): Record<string, any> {
@@ -99,8 +102,11 @@ function OrganizationCreate() {
           {shouldDisplayRegions() && (
             <SelectField
               name="dataStorageLocation"
-              label="Data Storage Location"
-              help="Where will this organization reside?"
+              label={t('Data Storage Location')}
+              help={tct(
+                "Choose where to store your organization's data. Please note, you won't be able to change locations once your organization has been created. [learnMore:Learn More]",
+                {learnMore: <a href={DATA_STORAGE_DOCS_LINK} />}
+              )}
               choices={regionChoices}
               inline={false}
               stacked

+ 2 - 3
static/app/views/settings/organizationGeneralSettings/organizationRegionAction.tsx

@@ -5,6 +5,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Organization} from 'sentry/types';
 import {getRegionDataFromOrganization, shouldDisplayRegions} from 'sentry/utils/regions';
+import {DATA_STORAGE_DOCS_LINK} from 'sentry/views/organizationCreate';
 
 type Props = {
   organization?: Organization;
@@ -37,9 +38,7 @@ export function OrganizationRegionAction({organization, ...props}: Props) {
       </div>
       <FieldHelp>
         {t("Your organization's data storage location. ")}
-        <a href="https://docs.sentry.io/product/accounts/choose-your-data-center">
-          {t('Learn More')}
-        </a>
+        <a href={DATA_STORAGE_DOCS_LINK}>{t('Learn More')}</a>
       </FieldHelp>
     </OrganizationRegionInformationWrapper>
   );