feat(projects): warn about eventual removal of Project Details

Author: bcoe

static/app/views/projectDetail/index.tsx

@@ -1,3 +1,4 @@
+import {PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
 import useRouteAnalyticsParams from 'sentry/utils/routeAnalytics/useRouteAnalyticsParams';
 import {useParams} from 'sentry/utils/useParams';
 import useProjects from 'sentry/utils/useProjects';
@@ -18,5 +19,9 @@ export default function ProjectDetailContainer() {
       : {}
   );
 
-  return <ProjectDetail />;
+  return (
+    <PageAlertProvider>
+      <ProjectDetail />;
+    </PageAlertProvider>
+  );
 }

static/app/views/projectDetail/projectDetail.spec.tsx

@@ -14,6 +14,7 @@ import * as pageFilters from 'sentry/actionCreators/pageFilters';
 import ProjectsStore from 'sentry/stores/projectsStore';
 
 import ProjectDetail from './projectDetail';
+import ProjectDetailContainer from './';
 
 jest.mock('sentry/actionCreators/organization');
 
@@ -112,6 +113,18 @@ describe('ProjectDetail', () => {
     expect(screen.getByText(project.slug)).toBeInTheDocument();
   });
 
+  it('Render deprecation dialog', async () => {
+    ProjectsStore.loadInitialData([project]);
+    setupMockResponses();
+
+    render(<ProjectDetailContainer />, {
+      organization,
+      initialRouterConfig,
+    });
+
+    expect(await screen.findByText(/similar charts are available/i)).toBeInTheDocument();
+  });
+
   it('Sync project with slug', async () => {
     ProjectsStore.loadInitialData([project]);
     setupMockResponses();

static/app/views/projectDetail/projectDetail.tsx

@@ -9,6 +9,7 @@ import Feature from 'sentry/components/acl/feature';
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Link} from 'sentry/components/core/link';
 import CreateAlertButton from 'sentry/components/createAlertButton';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackButton from 'sentry/components/feedbackButton/feedbackButton';
@@ -21,9 +22,10 @@ import MissingProjectMembership from 'sentry/components/projects/missingProjectM
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {IconSettings} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tctCode} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
+import {PageAlert, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
 import {decodeScalar} from 'sentry/utils/queryString';
 import routeTitleGen from 'sentry/utils/routeTitle';
 import useApi from 'sentry/utils/useApi';
@@ -80,6 +82,31 @@ export default function ProjectDetail() {
     return ['chart1'];
   }, [hasTransactions, hasSessions]);
 
+  const {setPageInfo, pageAlert} = usePageAlert();
+  const msg = useMemo(
+    () =>
+      tctCode(
+        'Project Details will be removed soon. Find this project’s settings under [settingsLink:Settings]. Similar charts are available on the [sessionHealth:Session Health] and [backendOverview:Backend Overview] dashboards.',
+        {
+          settingsLink: (
+            <Link to={`/settings/${params.orgId}/projects/${params.projectId}/`} />
+          ),
+          sessionHealth: (
+            <Link to={`/organizations/${params.orgId}/insights/frontend/sessions/`} />
+          ),
+          backendOverview: (
+            <Link to={`/organizations/${params.orgId}/insights/backend/`} />
+          ),
+        }
+      ),
+    [params]
+  );
+  useEffect(() => {
+    if (pageAlert?.message !== msg) {
+      setPageInfo(msg);
+    }
+  }, [msg, pageAlert, setPageInfo]);
+
   const onRetryProjects = useCallback(() => {
     fetchOrganizationDetails(api, params.orgId);
   }, [api, params.orgId]);
@@ -209,6 +236,7 @@ export default function ProjectDetail() {
 
             <Layout.Body noRowGap>
               <Layout.Main>
+                <PageAlert />
                 <ProjectFiltersWrapper>
                   <ProjectFilters
                     query={query}

static/app/views/projectsDashboard/index.tsx

@@ -7,6 +7,7 @@ import uniqBy from 'lodash/uniqBy';
 
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
+import {Link} from 'sentry/components/core/link';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -16,11 +17,16 @@ import SearchBar from 'sentry/components/searchBar';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants';
 import {IconAdd, IconUser} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tctCode} from 'sentry/locale';
 import ProjectsStatsStore from 'sentry/stores/projectsStatsStore';
 import {space} from 'sentry/styles/space';
 import type {Team} from 'sentry/types/organization';
 import type {Project, TeamWithProjects} from 'sentry/types/project';
+import {
+  PageAlert,
+  PageAlertProvider,
+  usePageAlert,
+} from 'sentry/utils/performance/contexts/pageAlert';
 import {
   onRenderCallback,
   Profiler,
@@ -141,6 +147,25 @@ function Dashboard() {
   const {teams: userTeams, isLoading: loadingTeams, isError} = useUserTeams();
   const isAllTeams = location.query.team === '';
   const selectedTeams = getTeamParams(location.query.team ?? 'myteams');
+  const {setPageInfo, pageAlert} = usePageAlert();
+
+  const msg = useMemo(
+    () =>
+      tctCode(
+        'Project Details pages will be removed soon. You can edit project settings and create new projects in [settingsLink:Settings].',
+        {
+          settingsLink: <Link to={`/settings/${organization.slug}/projects/`} />,
+        }
+      ),
+    [organization.slug]
+  );
+
+  useEffect(() => {
+    if (pageAlert?.message !== msg) {
+      setPageInfo(msg);
+    }
+  }, [setPageInfo, pageAlert, msg]);
+
   const {teams: allTeams} = useTeamsById({
     ids: selectedTeams.filter(team => team !== 'myteams'),
   });
@@ -251,6 +276,7 @@ function Dashboard() {
       </Layout.Header>
       <Layout.Body>
         <Layout.Main width="full">
+          <PageAlert />
           <SearchAndSelectorWrapper>
             <TeamFilter
               selectedTeams={selectedTeams}
@@ -281,7 +307,9 @@ function OrganizationDashboard() {
   return (
     <Layout.Page>
       <NoProjectMessage organization={organization}>
-        <Dashboard />
+        <PageAlertProvider>
+          <Dashboard />
+        </PageAlertProvider>
       </NoProjectMessage>
     </Layout.Page>
   );