feat(workflow): Handle insights users with zero projects/teams

static/app/views/teamInsights/index.tsx

@@ -1,6 +1,7 @@
 import {cloneElement, isValidElement} from 'react';
 
 import Feature from 'app/components/acl/feature';
+import NoProjectMessage from 'app/components/noProjectMessage';
 import SentryDocumentTitle from 'app/components/sentryDocumentTitle';
 import {t} from 'app/locale';
 import {Organization} from 'app/types';
@@ -14,13 +15,15 @@ type Props = {
 function TeamInsightsContainer({children, organization}: Props) {
   return (
     <Feature organization={organization} features={['team-insights']}>
-      <SentryDocumentTitle title={t('Project Reports')} orgSlug={organization.slug}>
-        {children && isValidElement(children)
-          ? cloneElement(children, {
-              organization,
-            })
-          : children}
-      </SentryDocumentTitle>
+      <NoProjectMessage organization={organization}>
+        <SentryDocumentTitle title={t('Project Reports')} orgSlug={organization.slug}>
+          {children && isValidElement(children)
+            ? cloneElement(children, {
+                organization,
+              })
+            : children}
+        </SentryDocumentTitle>
+      </NoProjectMessage>
     </Feature>
   );
 }

static/app/views/teamInsights/teamMisery.tsx

@@ -1,4 +1,5 @@
 import {Fragment} from 'react';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import {Location} from 'history';
 
@@ -67,6 +68,7 @@ function TeamMisery({
 
   return (
     <StyledPanelTable
+      isEmpty={projects.length === 0 || periodTableData?.data.length === 0}
       headers={[
         t('Key transaction'),
         t('Project'),
@@ -135,6 +137,20 @@ function TeamMiseryWrapper({
   start,
   end,
 }: Props) {
+  if (projects.length === 0) {
+    return (
+      <TeamMisery
+        isLoading={false}
+        organization={organization}
+        location={location}
+        projects={[]}
+        period={period}
+        periodTableData={{data: []}}
+        weekTableData={{data: []}}
+      />
+    );
+  }
+
   const commonEventView = {
     id: undefined,
     query: 'transaction.duration:<15m team_key_transaction:true',
@@ -195,7 +211,7 @@ function TeamMiseryWrapper({
 
 export default TeamMiseryWrapper;
 
-const StyledPanelTable = styled(PanelTable)`
+const StyledPanelTable = styled(PanelTable)<{isEmpty: boolean}>`
   grid-template-columns: 1fr 0.5fr 112px 112px 0.25fr;
   font-size: ${p => p.theme.fontSizeMedium};
   white-space: nowrap;
@@ -206,6 +222,14 @@ const StyledPanelTable = styled(PanelTable)`
   & > div {
     padding: ${space(1)} ${space(2)};
   }
+
+  ${p =>
+    p.isEmpty &&
+    css`
+      & > div:last-child {
+        padding: 48px ${space(2)};
+      }
+    `}
 `;
 
 const ProjectBadgeContainer = styled('div')`

static/app/views/teamInsights/teamStability.tsx

@@ -173,6 +173,7 @@ class TeamStability extends AsyncComponent<Props, State> {
 
     return (
       <StyledPanelTable
+        isEmpty={projects.length === 0}
         headers={[
           t('Project'),
           <RightAligned key="last">{tct('Last [period]', {period})}</RightAligned>,

tests/js/spec/views/teamInsights/index.spec.tsx

@@ -1,8 +1,13 @@
 import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
 
+import ProjectsStore from 'app/stores/projectsStore';
 import TeamInsightsContainer from 'app/views/teamInsights';
 
 describe('TeamInsightsContainer', () => {
+  afterEach(() => {
+    ProjectsStore.reset();
+  });
+
   it('blocks access if org is missing flag', () => {
     // @ts-expect-error
     const organization = TestStubs.Organization();
@@ -18,6 +23,10 @@ describe('TeamInsightsContainer', () => {
     expect(wrapper.queryByText('test')).toBeNull();
   });
   it('allows access for orgs with flag', () => {
+    ProjectsStore.loadInitialData([
+      // @ts-expect-error
+      TestStubs.Project(),
+    ]);
     // @ts-expect-error
     const organization = TestStubs.Organization({features: ['team-insights']});
     // @ts-expect-error
@@ -31,4 +40,19 @@ describe('TeamInsightsContainer', () => {
 
     expect(wrapper.getByText('test')).toBeTruthy();
   });
+  it('shows message for users with no teams', () => {
+    ProjectsStore.loadInitialData([]);
+    // @ts-expect-error
+    const organization = TestStubs.Organization({features: ['team-insights']});
+    // @ts-expect-error
+    const context = TestStubs.routerContext([{organization}]);
+    const wrapper = mountWithTheme(
+      <TeamInsightsContainer organization={organization} />,
+      {context}
+    );
+
+    expect(
+      wrapper.getByText('You need at least one project to use this view')
+    ).toBeTruthy();
+  });
 });

tests/js/spec/views/teamInsights/teamMisery.spec.jsx

@@ -59,4 +59,23 @@ describe('TeamMisery', () => {
     expect(wrapper.getAllByText(project.slug)).toHaveLength(2);
     expect(wrapper.getAllByText('0% change')).toHaveLength(2);
   });
+
+  it('should render empty state', async () => {
+    const routerContext = TestStubs.routerContext();
+    const wrapper = mountWithTheme(
+      <TeamMisery
+        organization={TestStubs.Organization()}
+        projects={[]}
+        period="14d"
+        location={routerContext.context}
+      />,
+      {context: routerContext}
+    );
+
+    await waitFor(() => {
+      expect(wrapper.queryByTestId('loading-indicator')).not.toBeInTheDocument();
+    });
+
+    expect(wrapper.getByText('There are no items to display')).toBeTruthy();
+  });
 });

tests/js/spec/views/teamInsights/teamStability.spec.jsx

@@ -43,4 +43,12 @@ describe('TeamStability', () => {
 
     expect(wrapper.getAllByText('\u2014')).toHaveLength(3);
   });
+
+  it('should render no projects', async () => {
+    const wrapper = mountWithTheme(
+      <TeamStability projects={[]} organization={TestStubs.Organization()} period="7d" />
+    );
+
+    expect(wrapper.getByText('There are no items to display')).toBeTruthy();
+  });
 });