ref(settings): Refactor settings/$project/toolbar/ to not rely on deprecatedRouteProps (#96695)

Author: ryan953

static/app/routes.tsx

@@ -686,7 +686,7 @@ function buildRoutes(): RouteObject[] {
       path: 'toolbar/',
       name: t('Developer Toolbar'),
       component: make(() => import('sentry/views/settings/project/projectToolbar')),
-      deprecatedRouteProps: true,
+      deprecatedRouteProps: true, // Should be false except for ProjectContext passed via `outletContext`
     },
     {
       path: 'source-maps/',

static/app/views/settings/project/projectToolbar.spec.tsx

@@ -4,12 +4,18 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import ProjectToolbarSettings from 'sentry/views/settings/project/projectToolbar';
 
 describe('ProjectToolbarSettings', function () {
-  const {routerProps, organization, project} = initializeOrg({
+  const {organization, project} = initializeOrg({
     organization: {
       features: ['sentry-toolbar-ui'],
     },
   });
-  const url = `/projects/${organization.slug}/${project.slug}/`;
+  const initialRouterConfig = {
+    location: {
+      pathname: `/settings/projects/${project.slug}/toolbar/`,
+    },
+    route: '/settings/projects/:projectId/toolbar/',
+  };
+  const getProjectEndpoint = `/projects/${organization.slug}/${project.slug}/`;
 
   beforeEach(function () {
     MockApiClient.clearMockResponses();
@@ -18,27 +24,21 @@ describe('ProjectToolbarSettings', function () {
   it('displays previously saved setting', function () {
     const initialOptionValue = 'sentry.io';
     project.options = {'sentry:toolbar_allowed_origins': initialOptionValue};
-    render(
-      <ProjectToolbarSettings
-        {...routerProps}
-        organization={organization}
-        project={project}
-      />
-    );
+    render(<ProjectToolbarSettings project={project} />, {
+      initialRouterConfig,
+      organization,
+    });
     expect(screen.getByRole('textbox')).toHaveValue(initialOptionValue);
   });
 
   it('can submit new allowed origins', async function () {
-    render(
-      <ProjectToolbarSettings
-        {...routerProps}
-        organization={organization}
-        project={project}
-      />
-    );
+    render(<ProjectToolbarSettings project={project} />, {
+      initialRouterConfig,
+      organization,
+    });
 
     const mockPut = MockApiClient.addMockResponse({
-      url,
+      url: getProjectEndpoint,
       method: 'PUT',
     });
 
@@ -51,7 +51,7 @@ describe('ProjectToolbarSettings', function () {
     await userEvent.tab(); // unfocus ("blur") the input
 
     expect(mockPut).toHaveBeenCalledWith(
-      url,
+      getProjectEndpoint,
       expect.objectContaining({
         method: 'PUT',
         data: {
@@ -63,25 +63,19 @@ describe('ProjectToolbarSettings', function () {
 
   it('displays nothing when project options are undefined', function () {
     project.options = undefined;
-    render(
-      <ProjectToolbarSettings
-        {...routerProps}
-        organization={organization}
-        project={project}
-      />
-    );
+    render(<ProjectToolbarSettings project={project} />, {
+      initialRouterConfig,
+      organization,
+    });
     expect(screen.getByRole('textbox')).toHaveValue('');
   });
 
   it('displays nothing when project options are empty', function () {
     project.options = {};
-    render(
-      <ProjectToolbarSettings
-        {...routerProps}
-        organization={organization}
-        project={project}
-      />
-    );
+    render(<ProjectToolbarSettings project={project} />, {
+      initialRouterConfig,
+      organization,
+    });
     expect(screen.getByRole('textbox')).toHaveValue('');
   });
 });

static/app/views/settings/project/projectToolbar.tsx

@@ -1,40 +1,34 @@
-import styled from '@emotion/styled';
-
 import Access from 'sentry/components/acl/access';
 import Feature from 'sentry/components/acl/feature';
 import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Text} from 'sentry/components/core/text';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
 import type {JsonFormObject} from 'sentry/components/forms/types';
 import {NoAccess} from 'sentry/components/noAccess';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t, tct} from 'sentry/locale';
-import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
-import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {decodeScalar} from 'sentry/utils/queryString';
-import {useLocation} from 'sentry/utils/useLocation';
+import useLocationQuery from 'sentry/utils/url/useLocationQuery';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useParams} from 'sentry/utils/useParams';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
 import TextBlock from 'sentry/views/settings/components/text/textBlock';
 import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermissionAlert';
 
-type RouteParams = {
-  projectId: string;
-};
-type Props = RouteComponentProps<RouteParams> & {
-  organization: Organization;
-  project: Project;
-};
+interface Props {
+  project: Project; // Passed in by the parent route
+}
 
-export default function ProjectToolbarSettings({
-  organization,
-  project,
-  params: {projectId},
-}: Props) {
-  const location = useLocation();
-  const domain = decodeScalar(location.query.domain);
+export default function ProjectToolbarSettings({project}: Props) {
+  const organization = useOrganization();
+  const {projectId} = useParams();
+  const {domain} = useLocationQuery({
+    fields: {domain: decodeScalar},
+  });
 
   const formGroups: JsonFormObject[] = [
     {
@@ -51,9 +45,9 @@ export default function ProjectToolbarSettings({
           label: t('Allowed Origins'),
           help: (
             <div>
-              <Important>
+              <Text bold size="sm" variant="danger">
                 {t('Only add trusted domains, that you control, to this list.')}
-              </Important>
+              </Text>
               <br />
               {t('Domains where the dev toolbar is allowed to access your data.')}
               <br />
@@ -126,7 +120,3 @@ export default function ProjectToolbarSettings({
     </SentryDocumentTitle>
   );
 }
-
-const Important = styled('strong')`
-  color: ${p => p.theme.red400};
-`;