feat(projects): Allow viewing all projects

static/app/views/alerts/list/rules/teamFilter.tsx

@@ -16,17 +16,13 @@ interface Props {
   handleChangeFilter: (activeFilters: string[]) => void;
   selectedTeams: string[];
   /**
-   * only show teams user is a member of
+   * hide other teams suggestion
    */
-  showIsMemberTeams?: boolean;
+  hideOtherTeams?: boolean;
   /**
-   * show My Teams as the default dropdown description
+   * hide unassigned suggestion
    */
-  showMyTeamsDescription?: boolean;
-  /**
-   * show suggested options (My Teams and Unassigned)
-   */
-  showSuggestedOptions?: boolean;
+  hideUnassigned?: boolean;
 }
 
 const suggestedOptions = [
@@ -49,11 +45,10 @@ const makeTeamOption = (team: Team) => ({
 function TeamFilter({
   selectedTeams,
   handleChangeFilter,
-  showIsMemberTeams = false,
-  showSuggestedOptions = true,
-  showMyTeamsDescription = false,
+  hideUnassigned = false,
+  hideOtherTeams = false,
 }: Props) {
-  const {teams, onSearch, fetching} = useTeams({provideUserTeams: showIsMemberTeams});
+  const {teams, onSearch, fetching} = useTeams();
 
   const [myTeams, otherTeams] = partition(teams, team => team.isMember);
   const myTeamOptions = myTeams.map(makeTeamOption);
@@ -77,11 +72,8 @@ function TeamFilter({
       ];
     }
 
-    return [
-      <IconUser key={0} />,
-      showMyTeamsDescription ? t('My Teams') : t('All Teams'),
-    ];
-  }, [selectedTeams, teams, showMyTeamsDescription]);
+    return [<IconUser key={0} />, t('All Teams')];
+  }, [selectedTeams, teams]);
 
   return (
     <CompactSelect
@@ -91,11 +83,17 @@ function TeamFilter({
       loading={fetching}
       menuTitle={t('Filter teams')}
       options={[
-        ...(showSuggestedOptions
-          ? [{value: '_suggested', label: t('Suggested'), options: suggestedOptions}]
-          : []),
+        {
+          value: '_suggested',
+          label: t('Suggested'),
+          options: suggestedOptions.filter(
+            opt => !hideUnassigned || opt.value !== 'unassigned'
+          ),
+        },
         {value: '_my_teams', label: t('My Teams'), options: myTeamOptions},
-        {value: '_teams', label: t('Other Teams'), options: otherTeamOptions},
+        ...(hideOtherTeams
+          ? []
+          : [{value: '_teams', label: t('Other Teams'), options: otherTeamOptions}]),
       ]}
       value={selectedTeams}
       onSearch={debounce(val => void onSearch(val), DEFAULT_DEBOUNCE_DURATION)}

static/app/views/projectsDashboard/index.tsx

@@ -31,6 +31,7 @@ import {
 } from 'sentry/utils/performanceForSentry';
 import {sortProjects} from 'sentry/utils/project/sortProjects';
 import useOrganization from 'sentry/utils/useOrganization';
+import useProjects from 'sentry/utils/useProjects';
 import withApi from 'sentry/utils/withApi';
 import withOrganization from 'sentry/utils/withOrganization';
 import withTeamsForUser from 'sentry/utils/withTeamsForUser';
@@ -90,31 +91,39 @@ function Dashboard({teams, organization, loadingTeams, error, router, location}:
     () => debounce(handleSearch, DEFAULT_DEBOUNCE_DURATION),
     []
   );
+  const {projects, fetching, fetchError} = useProjects();
 
   const canUserCreateProject = canCreateProject(organization);
-  if (loadingTeams) {
+  if (loadingTeams || fetching) {
     return <LoadingIndicator />;
   }
 
-  if (error) {
+  if (error || fetchError) {
     return <LoadingError message={t('An error occurred while fetching your projects')} />;
   }
   const canJoinTeam = organization.access.includes('team:read');
 
-  const selectedTeams = getTeamParams(location ? location.query.team : '');
-  const filteredTeams = teams.filter(team => selectedTeams.includes(team.id));
+  const selectedTeams = getTeamParams(location.query.team ?? 'myteams');
+  const filteredTeams =
+    selectedTeams[0] === 'myteams'
+      ? teams
+      : teams.filter(team => selectedTeams.includes(team.id));
 
   const filteredTeamProjects = uniqBy(
     (filteredTeams ?? teams).flatMap(team => team.projects),
     'id'
   );
-  const projects = uniqBy(
-    teams.flatMap(teamObj => teamObj.projects),
-    'id'
-  );
   setGroupedEntityTag('projects.total', 1000, projects.length);
 
-  const currentProjects = selectedTeams.length === 0 ? projects : filteredTeamProjects;
+  const currentProjects =
+    // No teams are specifically selected and query parameter is present
+    // Use all projects
+    location.query.team === ''
+      ? projects
+      : // No teams are specifically selected - Use "myteams"
+        selectedTeams.length === 0
+        ? projects
+        : filteredTeamProjects;
   const filteredProjects = (currentProjects ?? projects).filter(project =>
     project.slug.includes(projectQuery)
   );
@@ -126,12 +135,10 @@ function Dashboard({teams, organization, loadingTeams, error, router, location}:
   }
 
   function handleChangeFilter(activeFilters: string[]) {
-    const {...currentQuery} = location.query;
-
     router.push({
       pathname: location.pathname,
       query: {
-        ...currentQuery,
+        ...location.query,
         team: activeFilters.length > 0 ? activeFilters : '',
       },
     });
@@ -190,9 +197,8 @@ function Dashboard({teams, organization, loadingTeams, error, router, location}:
             <TeamFilter
               selectedTeams={selectedTeams}
               handleChangeFilter={handleChangeFilter}
-              showIsMemberTeams
-              showSuggestedOptions={false}
-              showMyTeamsDescription
+              hideUnassigned
+              hideOtherTeams
             />
             <StyledSearchBar
               defaultQuery=""