feat(view-hierarchy): Do not show wireframe for Unity (#44026)

The wireframe that we're going to ship with will not be useful for Unity
so in this version we are going to hide it until we can improve the
wireframe for Unity's use cases

Closes #44023

static/app/components/events/eventEntries.tsx

@@ -124,7 +124,7 @@ const EventEntries = ({
       {!isShare &&
         organization.features?.includes('mobile-view-hierarchies') &&
         hasEventAttachmentsFeature && (
-          <EventViewHierarchy event={event} projectSlug={projectSlug} />
+          <EventViewHierarchy event={event} project={project} />
         )}
       {!isShare && hasEventAttachmentsFeature && (
         <EventAttachments event={event} projectSlug={projectSlug} />

static/app/components/events/eventViewHierarchy.spec.tsx

@@ -47,14 +47,16 @@ const event = TestStubs.Event();
 
 describe('Event View Hierarchy', function () {
   let mockAttachment;
+  let mockProject;
   beforeEach(function () {
     mockAttachment = TestStubs.EventAttachment({type: 'event.view_hierarchy'});
+    mockProject = TestStubs.Project();
     MockApiClient.addMockResponse({
-      url: `/projects/${organization.slug}/mock/events/${event.id}/attachments/`,
+      url: `/projects/${organization.slug}/${mockProject.slug}/events/${event.id}/attachments/`,
       body: [mockAttachment],
     });
     MockApiClient.addMockResponse({
-      url: `/projects/${organization.slug}/mock/events/${mockAttachment.event_id}/attachments/${mockAttachment.id}/?download`,
+      url: `/projects/${organization.slug}/${mockProject.slug}/events/${mockAttachment.event_id}/attachments/${mockAttachment.id}/?download`,
       body: MOCK_DATA,
     });
   });
@@ -62,13 +64,16 @@ describe('Event View Hierarchy', function () {
   it('renders nothing when no view_hierarchy attachments', async () => {
     MockApiClient.clearMockResponses();
     MockApiClient.addMockResponse({
-      url: `/projects/org-slug/mock/events/${event.id}/attachments/`,
+      url: `/projects/org-slug/${mockProject.slug}/events/${event.id}/attachments/`,
       body: [TestStubs.EventAttachment()],
     });
 
-    const {container} = render(<EventViewHierarchy projectSlug="mock" event={event} />, {
-      organization,
-    });
+    const {container} = render(
+      <EventViewHierarchy project={mockProject} event={event} />,
+      {
+        organization,
+      }
+    );
 
     // No loading state so nothing to wait for
     await tick();
@@ -77,13 +82,16 @@ describe('Event View Hierarchy', function () {
   });
 
   it('does not collapse all nodes when update triggers re-render', async function () {
-    const {rerender} = render(<EventViewHierarchy projectSlug="mock" event={event} />, {
-      organization,
-    });
+    const {rerender} = render(
+      <EventViewHierarchy project={mockProject} event={event} />,
+      {
+        organization,
+      }
+    );
 
     expect(await screen.findByText('Nested Container - nested')).toBeInTheDocument();
 
-    rerender(<EventViewHierarchy projectSlug="mock" event={event} />);
+    rerender(<EventViewHierarchy project={mockProject} event={event} />);
 
     expect(await screen.findByText('Nested Container - nested')).toBeInTheDocument();
   });

static/app/components/events/eventViewHierarchy.tsx

@@ -7,7 +7,7 @@ import ErrorBoundary from 'sentry/components/errorBoundary';
 import {getAttachmentUrl} from 'sentry/components/events/attachmentViewers/utils';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {tn} from 'sentry/locale';
-import {Event, IssueAttachment} from 'sentry/types';
+import {Event, IssueAttachment, Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import {useQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -17,16 +17,16 @@ import {ViewHierarchy, ViewHierarchyData} from './viewHierarchy';
 
 type Props = {
   event: Event;
-  projectSlug: string;
+  project: Project;
 };
 
-function EventViewHierarchy({projectSlug, event}: Props) {
+function EventViewHierarchy({project, event}: Props) {
   const organization = useOrganization();
 
   const {data: attachments} = useFetchEventAttachments(
     {
       orgSlug: organization.slug,
-      projectSlug,
+      projectSlug: project.slug,
       eventId: event.id,
     },
     {notifyOnChangeProps: ['data']}
@@ -43,7 +43,7 @@ function EventViewHierarchy({projectSlug, event}: Props) {
             attachment: hierarchyMeta,
             eventId: hierarchyMeta.event_id,
             orgId: organization.slug,
-            projectSlug,
+            projectSlug: project.slug,
           })
         : '',
     ],
@@ -80,7 +80,7 @@ function EventViewHierarchy({projectSlug, event}: Props) {
       title={tn('View Hierarchy', 'View Hierarchies', viewHierarchies.length)}
     >
       <ErrorBoundary mini>
-        <ViewHierarchy viewHierarchy={hierarchy} />
+        <ViewHierarchy viewHierarchy={hierarchy} project={project} />
       </ErrorBoundary>
     </EventDataSection>
   );

static/app/components/events/viewHierarchy/index.spec.tsx

@@ -42,12 +42,14 @@ const DEFAULT_MOCK_DATA = {
 
 describe('View Hierarchy', function () {
   let MOCK_DATA;
+  let project;
   beforeEach(() => {
     MOCK_DATA = DEFAULT_MOCK_DATA;
+    project = TestStubs.Project();
   });
 
   it('can continue make selections for inspecting data', function () {
-    render(<ViewHierarchy viewHierarchy={MOCK_DATA} />);
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={project} />);
 
     // 1 for the tree node, 1 for the details panel header
     expect(screen.getAllByText('Container - test_identifier')).toHaveLength(2);
@@ -68,7 +70,7 @@ describe('View Hierarchy', function () {
   });
 
   it('can expand and collapse by clicking the icon', function () {
-    render(<ViewHierarchy viewHierarchy={MOCK_DATA} />);
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={project} />);
 
     expect(screen.queryByText('Text')).toBeInTheDocument();
 
@@ -86,7 +88,7 @@ describe('View Hierarchy', function () {
   });
 
   it('can navigate with keyboard shortcuts after a selection', function () {
-    render(<ViewHierarchy viewHierarchy={MOCK_DATA} />);
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={project} />);
 
     userEvent.click(screen.getAllByText('Container - test_identifier')[0]);
 
@@ -97,7 +99,7 @@ describe('View Hierarchy', function () {
   });
 
   it('can expand/collapse with the keyboard', function () {
-    render(<ViewHierarchy viewHierarchy={MOCK_DATA} />);
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={project} />);
 
     userEvent.click(screen.getAllByText('Nested Container - nested')[0]);
 
@@ -125,9 +127,16 @@ describe('View Hierarchy', function () {
         ],
       },
     ];
-    render(<ViewHierarchy viewHierarchy={MOCK_DATA} />);
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={project} />);
 
     expect(screen.getByText('Second Window')).toBeInTheDocument();
     expect(screen.getByText('Second Window Child')).toBeInTheDocument();
   });
+
+  it('does not render the wireframe for the Unity platform', function () {
+    const mockUnityProject = TestStubs.Project({platform: 'unity'});
+    render(<ViewHierarchy viewHierarchy={MOCK_DATA} project={mockUnityProject} />);
+
+    expect(screen.queryByTestId('view-hierarchy-wireframe')).not.toBeInTheDocument();
+  });
 });

static/app/components/events/viewHierarchy/index.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Node} from 'sentry/components/events/viewHierarchy/node';
 import {Wireframe} from 'sentry/components/events/viewHierarchy/wireframe';
 import space from 'sentry/styles/space';
+import {Project} from 'sentry/types';
 import {defined} from 'sentry/utils';
 import {
   useVirtualizedTree,
@@ -36,10 +37,11 @@ export type ViewHierarchyData = {
 };
 
 type ViewHierarchyProps = {
+  project: Project;
   viewHierarchy: ViewHierarchyData;
 };
 
-function ViewHierarchy({viewHierarchy}: ViewHierarchyProps) {
+function ViewHierarchy({viewHierarchy, project}: ViewHierarchyProps) {
   const [scrollContainerRef, setScrollContainerRef] = useState<HTMLDivElement | null>(
     null
   );
@@ -108,11 +110,13 @@ function ViewHierarchy({viewHierarchy}: ViewHierarchyProps) {
     initialSelectedNodeIndex: 0,
   });
 
+  const showWireframe = project?.platform !== 'unity';
+
   return (
     <Fragment>
       <RenderingSystem system={viewHierarchy.rendering_system} />
       <Content>
-        <Left>
+        <Left hasRight={showWireframe}>
           <TreeContainer>
             <GhostRow ref={hoveredGhostRowRef} />
             <GhostRow ref={clickedGhostRowRef} />
@@ -128,9 +132,11 @@ function ViewHierarchy({viewHierarchy}: ViewHierarchyProps) {
             </DetailsContainer>
           )}
         </Left>
-        <Right>
-          <Wireframe hierarchy={hierarchy} />
-        </Right>
+        {showWireframe && (
+          <Right>
+            <Wireframe hierarchy={hierarchy} />
+          </Right>
+        )}
       </Content>
     </Fragment>
   );
@@ -145,12 +151,11 @@ const Content = styled('div')`
   height: 700px;
 `;
 
-const Left = styled('div')`
-  width: 40%;
+const Left = styled('div')<{hasRight?: boolean}>`
+  width: ${p => (p.hasRight ? '40%' : '100%')};
   display: flex;
   gap: ${space(1)};
   flex-direction: column;
-  resize: both;
 `;
 
 const Right = styled('div')`

static/app/components/events/viewHierarchy/wireframe.tsx

@@ -172,6 +172,7 @@ function Wireframe({hierarchy}) {
   return (
     <Container ref={containerRef}>
       <StyledCanvas
+        data-test-id="view-hierarchy-wireframe"
         ref={canvasRef}
         onMouseDown={handlePanStart}
         onMouseUp={handlePanStop}