ref(ui): Add deprecation warning to useProjects() without slugs

Add a development-time console warning when useProjects() is called
without the slugs parameter. This prepares for removing the all_projects=1
bootstrap fetch by encouraging explicit project fetching.

Updates 18 components to pass specific slugs to useProjects(), ensuring
they will continue working when projects are no longer pre-loaded.

Author: dcramer

static/app/components/profiling/exportProfileButton.tsx

@@ -21,7 +21,8 @@ export function ExportProfileButton(props: ExportProfileButtonProps) {
   const api = useApi();
   const organization = useOrganization();
 
-  const project = useProjects().projects.find(p => {
+  const {projects} = useProjects({slugs: props.projectId ? [props.projectId] : []});
+  const project = projects.find(p => {
     return p.slug === props.projectId;
   });
 

static/app/components/profiling/profilingBreadcrumbs.tsx

@@ -21,7 +21,14 @@ export interface ProfilingBreadcrumbsProps {
 }
 
 function ProfilingBreadcrumbs({organization, trails}: ProfilingBreadcrumbsProps) {
-  const {projects} = useProjects();
+  // Extract project slugs from trails that have them
+  const projectSlugs = trails
+    .filter(
+      (trail): trail is ProfileSummaryTrail | FlamegraphTrail =>
+        trail.type === 'profile summary' || trail.type === 'flamechart'
+    )
+    .map(trail => trail.payload.projectSlug);
+  const {projects} = useProjects({slugs: projectSlugs});
   const crumbs = useMemo(
     () => trails.map(trail => trailToCrumb(trail, {organization, projects})),
     [organization, trails, projects]

static/app/utils/discover/teamKeyTransactionField.tsx

@@ -87,7 +87,7 @@ export default function TeamKeyTransactionFieldWrapper({
   transactionName,
   ...props
 }: WrapperProps) {
-  const {projects} = useProjects();
+  const {projects} = useProjects({slugs: projectSlug ? [projectSlug] : []});
   const project = projects.find(proj => proj.slug === projectSlug);
 
   // All these fields need to be defined in order to toggle a team key

static/app/utils/useProjects.tsx

@@ -149,10 +149,25 @@ async function fetchProjects(
  * This hook also provides a way to select specific project slugs, and search
  * (type-ahead) for more projects that may not be in the project store.
  *
- * NOTE: Currently ALL projects are always loaded, but this hook is designed
- * for future-compat in a world where we do _not_ load all projects.
+ * DEPRECATED USAGE: Calling useProjects() without the `slugs` parameter is
+ * deprecated. This pattern assumes all projects are loaded in the store,
+ * which will not be true once we remove the all_projects=1 bootstrap fetch.
+ *
+ * RECOMMENDED: Always pass specific slugs you need:
+ *   const {projects} = useProjects({slugs: [group.project.slug]});
+ *
+ * This ensures projects are fetched on-demand if not already in the store.
  */
 function useProjects({limit, slugs, orgId: propOrgId}: Options = {}) {
+  if (process.env.NODE_ENV !== 'production' && !slugs) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'useProjects() called without slugs parameter. ' +
+        'This usage is deprecated and may break when all_projects=1 is removed. ' +
+        'Pass specific slugs to ensure projects are fetched on-demand.'
+    );
+  }
+
   const api = useApi();
 
   const organization = useOrganization({allowNull: true});

static/app/views/alerts/rules/issue/details/ruleDetails.tsx

@@ -74,7 +74,7 @@ function AlertRuleDetails({params, location, router}: AlertRuleDetailsProps) {
   const queryClient = useQueryClient();
   const organization = useOrganization();
   const api = useApi();
-  const {projects, fetching: projectIsLoading} = useProjects();
+  const {projects, fetching: projectIsLoading} = useProjects({slugs: [params.projectId]});
   const project = projects.find(({slug}) => slug === params.projectId);
   const {projectId: projectSlug, ruleId} = params;
   const {

static/app/views/insights/common/components/tableCells/starredSegmentCell.tsx

@@ -27,7 +27,7 @@ export const STARRED_SEGMENT_TABLE_QUERY_KEY = ['starred-segment-table'];
 
 export function StarredSegmentCell({segmentName, isStarred, projectSlug}: Props) {
   const queryClient = useQueryClient();
-  const {projects} = useProjects();
+  const {projects} = useProjects({slugs: [projectSlug]});
   const project = projects.find(p => p.slug === projectSlug);
 
   const {setStarredSegment, isPending} = useStarredSegment({

static/app/views/insights/pages/transactionCell.tsx

@@ -16,12 +16,12 @@ interface Props {
 }
 
 export function TransactionCell({project, transaction, transactionMethod}: Props) {
-  const projects = useProjects();
+  const {projects} = useProjects({slugs: project ? [project] : []});
   const organization = useOrganization();
   const location = useLocation();
   const {view} = useDomainViewFilters();
 
-  const projectId = projects.projects.find(p => p.slug === project)?.id;
+  const projectId = projects.find(p => p.slug === project)?.id;
 
   const searchQuery = new MutableSearch('');
   if (transactionMethod) {

static/app/views/issueDetails/groupDetails.tsx

@@ -234,7 +234,6 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
   const navigate = useNavigate();
   const defaultIssueEvent = useDefaultIssueEvent();
   const hasStreamlinedUI = useHasStreamlinedUI();
-  const {projects} = useProjects();
 
   const [allProjectChanged, setAllProjectChanged] = useState<boolean>(false);
 
@@ -261,6 +260,9 @@ function useFetchGroupDetails(): FetchGroupDetailsState {
     refetch: refetchGroupCall,
   } = useGroup({groupId});
 
+  const groupProjectSlug = groupData?.project?.slug;
+  const {projects} = useProjects({slugs: groupProjectSlug ? [groupProjectSlug] : []});
+
   /**
    * TODO(streamline-ui): Remove this whole hook once the legacy UI is removed. The streamlined UI exposes the
    * filters on the page so the user is expected to clear it themselves, and the empty state is actually expected.

static/app/views/issueDetails/groupDistributionsDrawer.tsx

@@ -22,8 +22,8 @@ type Props = {
  */
 export function GroupDistributionsDrawer({group, includeFeatureFlagsTab}: Props) {
   const organization = useOrganization();
-  const {projects} = useProjects();
-  const project = projects.find(p => p.slug === group.project.slug)!;
+  const {projects} = useProjects({slugs: [group.project.slug]});
+  const project = projects.find(p => p.slug === group.project.slug);
 
   const {tab, setTab} = useDrawerTab({enabled: includeFeatureFlagsTab});
 

static/app/views/issueDetails/groupFeatureFlags/flagDrawerContent.tsx

@@ -45,8 +45,8 @@ export default function FlagDrawerContent({
     });
 
   // CTA logic
-  const {projects} = useProjects();
-  const project = projects.find(p => p.slug === group.project.slug)!;
+  const {projects} = useProjects({slugs: [group.project.slug]});
+  const project = projects.find(p => p.slug === group.project.slug);
 
   const showCTA =
     allGroupFlagCount === 0 &&