feat(vitals): Show vitals for only frontend platforms temporarily (#22714)

* feat(vitals): Show vitals for only frontend platforms temporarily

This will limit web vitals to only show up if one of the selected projects are frontend. It is a temporary measure before other changes to the landing pages are made.

Refs VIS-459

src/sentry/static/sentry/app/views/performance/vitalsCards.tsx

@@ -8,10 +8,11 @@ import QuestionTooltip from 'app/components/questionTooltip';
 import {t} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
-import {Organization} from 'app/types';
+import {Organization, Project} from 'app/types';
 import EventView from 'app/utils/discover/eventView';
 import {getAggregateAlias, WebVital} from 'app/utils/discover/fields';
 import {decodeList} from 'app/utils/queryString';
+import withProjects from 'app/utils/withProjects';
 import VitalsCardsDiscoverQuery from 'app/views/performance/vitalDetail/vitalsCardsDiscoverQuery';
 
 import ColorBar from './vitalDetail/colorBar';
@@ -37,12 +38,35 @@ type Props = {
   showVitalPercentNames?: boolean;
   showDurationDetail?: boolean;
   hasCondensedVitals?: boolean;
+  projects: Project[];
 };
 
-export default function VitalsCards(props: Props) {
-  const {eventView, organization, location} = props;
+// Temporary list of platforms to only show web vitals for.
+const VITALS_PLATFORMS = [
+  'javascript',
+  'javascript-react',
+  'javascript-angular',
+  'javascript-angularjs',
+  'javascript-backbone',
+  'javascript-ember',
+  'javascript-gatsby',
+  'javascript-vue',
+];
+
+function VitalsCards(props: Props) {
+  const {eventView, organization, location, projects} = props;
   const vitalsView = eventView.clone();
 
+  const showVitalsCard = vitalsView.project.some(projectId =>
+    VITALS_PLATFORMS.includes(
+      projects.find(project => project.id === `${projectId}`)?.platform || ''
+    )
+  );
+
+  if (!showVitalsCard) {
+    return null;
+  }
+
   const shownVitals = [WebVital.FCP, WebVital.LCP, WebVital.FID, WebVital.CLS];
 
   return (
@@ -77,6 +101,8 @@ export default function VitalsCards(props: Props) {
   );
 }
 
+export default withProjects(VitalsCards);
+
 const VitalsContainer = styled('div')`
   display: grid;
   grid-template-columns: 1fr;
@@ -91,7 +117,7 @@ const VitalsContainer = styled('div')`
   }
 `;
 
-type CardProps = Props & {
+type CardProps = Omit<Props, 'projects'> & {
   vitalName: WebVital;
   tableData: any;
   isLoading?: boolean;
@@ -331,7 +357,7 @@ const BlankCard = (props: BlankCardProps) => {
   );
 };
 
-type VitalLinkProps = Props & {
+type VitalLinkProps = Omit<Props, 'projects'> & {
   vitalName: WebVital;
   children: React.ReactNode;
 };

tests/js/spec/views/performance/landing.spec.jsx

@@ -450,7 +450,7 @@ describe('Performance > Landing', function () {
     );
   });
 
-  it('Vitals cards are shown with overview feature', async function () {
+  it('Vitals cards are not shown with overview feature without frontend platform', async function () {
     const projects = [TestStubs.Project({id: '1', firstTransactionEvent: true})];
     const data = initializeData(
       projects,
@@ -468,6 +468,34 @@ describe('Performance > Landing', function () {
     await tick();
     wrapper.update();
 
+    const vitalsContainer = wrapper.find('VitalsContainer');
+    expect(vitalsContainer).toHaveLength(0);
+  });
+
+  it('Vitals cards are shown with overview feature with frontend platform project', async function () {
+    const projects = [
+      TestStubs.Project({
+        id: '1',
+        firstTransactionEvent: true,
+        platform: 'javascript-react',
+      }),
+    ];
+    const data = initializeData(
+      projects,
+      {project: ['1'], query: 'sentry:yes', view: FilterViews.ALL_TRANSACTIONS},
+      [...FEATURES, 'performance-vitals-overview']
+    );
+
+    const wrapper = mountWithTheme(
+      <PerformanceLanding
+        organization={data.organization}
+        location={data.router.location}
+      />,
+      data.routerContext
+    );
+    await tick();
+    wrapper.update();
+
     const vitalsContainer = wrapper.find('VitalsContainer');
     expect(vitalsContainer).toHaveLength(1);