feat(ui) Restore inbox-zero image (#45472)

This change was reverted because of CI failure related to the video
being referenced elsewhere. These changes delete the code that was
referencing the now deleted video file.

Mulligan on #45427

static/app/views/issueList/noGroupsHandler/congratsRobots.tsx

@@ -1,31 +0,0 @@
-import styled from '@emotion/styled';
-
-import video from 'sentry-images/spot/congrats-robots.mp4';
-
-import {AutoplayVideo} from 'sentry/components/autoplayVideo';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-
-/**
- * Note, video needs `muted` for `autoplay` to work on Chrome
- * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
- */
-function CongratsRobots() {
-  return (
-    <AnimatedScene>
-      <StyledAutoplayVideo aria-label={t('Congratulations video')} src={video} />
-    </AnimatedScene>
-  );
-}
-
-export default CongratsRobots;
-
-const AnimatedScene = styled('div')`
-  max-width: 800px;
-`;
-
-const StyledAutoplayVideo = styled(AutoplayVideo)`
-  max-height: 320px;
-  max-width: 100%;
-  margin-bottom: ${space(1)};
-`;

static/app/views/issueList/noGroupsHandler/noUnresolvedIssues.spec.jsx

@@ -3,10 +3,10 @@ import {render, screen} from 'sentry-test/reactTestingLibrary';
 import NoUnresolvedIssues from 'sentry/views/issueList/noGroupsHandler/noUnresolvedIssues';
 
 describe('NoUnresolvedIssues', function () {
-  it('renders', async function () {
+  it('renders', function () {
     render(<NoUnresolvedIssues title="No issues" />);
 
     expect(screen.getByText('No issues')).toBeInTheDocument();
-    expect(await screen.findByLabelText('Congratulations video')).toBeInTheDocument();
+    expect(screen.getByAltText('No issues found spot illustration')).toBeInTheDocument();
   });
 });

static/app/views/issueList/noGroupsHandler/noUnresolvedIssues.tsx

@@ -1,18 +1,10 @@
-import {Component, Fragment, lazy, Suspense} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import congratsRobotsPlaceholder from 'sentry-images/spot/congrats-robots-placeholder.jpg';
+import zeroInboxIssuesImg from 'sentry-images/spot/zero-inbox-issues.svg';
 
-import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
-const Placeholder = () => (
-  <PlaceholderImage
-    alt={t('Congrats, you have no unresolved issues')}
-    src={congratsRobotsPlaceholder}
-  />
-);
-
 const Message = ({
   title,
   subtitle,
@@ -26,50 +18,14 @@ const Message = ({
   </Fragment>
 );
 
-const CongratsRobotsVideo = lazy(() => import('./congratsRobots'));
-
-type State = {hasError: boolean};
-
-/**
- * Error boundary for loading the robots video.
- * This can error because of the file size of the video
- *
- * Silently ignore the error, this isn't really important enough to
- * capture in Sentry
- */
-class ErrorBoundary extends Component<{children: React.ReactNode}, State> {
-  static getDerivedStateFromError(): State {
-    return {
-      hasError: true,
-    };
-  }
-
-  state: State = {
-    hasError: false,
-  };
-
-  render() {
-    if (this.state.hasError) {
-      return <Placeholder />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const NoUnresolvedIssues = ({
-  title,
-  subtitle,
-}: {
+type Props = {
   subtitle: React.ReactNode;
   title: React.ReactNode;
-}) => (
+};
+
+const NoUnresolvedIssues = ({title, subtitle}: Props) => (
   <Wrapper>
-    <ErrorBoundary>
-      <Suspense fallback={<Placeholder />}>
-        <CongratsRobotsVideo />
-      </Suspense>
-    </ErrorBoundary>
+    <img src={zeroInboxIssuesImg} alt="No issues found spot illustration" />
     <Message title={title} subtitle={subtitle} />
   </Wrapper>
 );
@@ -95,8 +51,4 @@ const EmptyMessage = styled('div')`
   }
 `;
 
-const PlaceholderImage = styled('img')`
-  max-height: 320px; /* This should be same height as video in CongratsRobots */
-`;
-
 export default NoUnresolvedIssues;

static/app/views/issueList/overview.spec.jsx

@@ -23,9 +23,6 @@ import IssueListWithStores, {IssueListOverview} from 'sentry/views/issueList/ove
 // Mock <IssueListActions>
 jest.mock('sentry/views/issueList/actions', () => jest.fn(() => null));
 jest.mock('sentry/components/stream/group', () => jest.fn(() => null));
-jest.mock('sentry/views/issueList/noGroupsHandler/congratsRobots', () =>
-  jest.fn(() => null)
-);
 
 const DEFAULT_LINKS_HEADER =
   '<http://127.0.0.1:8000/api/0/organizations/org-slug/issues/?cursor=1443575731:0:1>; rel="previous"; results="false"; cursor="1443575731:0:1", ' +