feat(flags): add setup integration modal

static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx

@@ -9,8 +9,10 @@ import {
 
 import {EventFeatureFlagList} from 'sentry/components/events/featureFlags/eventFeatureFlagList';
 import {
+  EMPTY_STATE_SECTION_PROPS,
   MOCK_DATA_SECTION_PROPS,
   MOCK_FLAGS,
+  NO_FLAG_CONTEXT_SECTION_PROPS,
 } from 'sentry/components/events/featureFlags/testUtils';
 
 // Needed to mock useVirtualizer lists.
@@ -192,4 +194,30 @@ describe('EventFeatureFlagList', function () {
         .compareDocumentPosition(screen.getByText(enableReplay.flag))
     ).toBe(document.DOCUMENT_POSITION_FOLLOWING);
   });
+
+  it('renders empty state', function () {
+    render(<EventFeatureFlagList {...EMPTY_STATE_SECTION_PROPS} />);
+
+    const control = screen.queryByRole('button', {name: 'Sort Flags'});
+    expect(control).not.toBeInTheDocument();
+    const search = screen.queryByRole('button', {name: 'Open Feature Flag Search'});
+    expect(search).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Set Up Integration'})).toBeInTheDocument();
+    expect(
+      screen.queryByText('No feature flags were found for this event')
+    ).toBeInTheDocument();
+  });
+
+  it('renders nothing if event.contexts.flags is not set', function () {
+    render(<EventFeatureFlagList {...NO_FLAG_CONTEXT_SECTION_PROPS} />);
+
+    const control = screen.queryByRole('button', {name: 'Sort Flags'});
+    expect(control).not.toBeInTheDocument();
+    const search = screen.queryByRole('button', {name: 'Open Feature Flag Search'});
+    expect(search).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {name: 'Set Up Integration'})
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('Feature Flags')).not.toBeInTheDocument();
+  });
 });

static/app/components/events/featureFlags/eventFeatureFlagList.tsx

@@ -1,14 +1,20 @@
-import {useCallback, useMemo, useRef, useState} from 'react';
+import {Fragment, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {openModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
+import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import {
   CardContainer,
   FeatureFlagDrawer,
 } from 'sentry/components/events/featureFlags/featureFlagDrawer';
 import FeatureFlagSort from 'sentry/components/events/featureFlags/featureFlagSort';
+import {
+  modalCss,
+  SetupIntegrationModal,
+} from 'sentry/components/events/featureFlags/setupIntegrationModal';
 import {
   FlagControlOptions,
   OrderBy,
@@ -86,6 +92,16 @@ export function EventFeatureFlagList({
     event,
   });
 
+  const hasFlagContext = !!event.contexts.flags;
+  const hasFlags = Boolean(hasFlagContext && event?.contexts?.flags?.values.length);
+
+  function handleSetupButtonClick() {
+    trackAnalytics('flags.setup_modal_opened', {organization});
+    openModal(modalProps => <SetupIntegrationModal {...modalProps} />, {
+      modalCss,
+    });
+  }
+
   const suspectFlagNames: Set<string> = useMemo(() => {
     return isSuspectError || isSuspectPending
       ? new Set()
@@ -150,37 +166,63 @@ export function EventFeatureFlagList({
     [openDrawer, event, group, project, hydratedFlags, organization, sortBy, orderBy]
   );
 
-  if (!hydratedFlags.length) {
+  useEffect(() => {
+    if (hasFlags) {
+      trackAnalytics('flags.table_rendered', {
+        organization,
+        numFlags: hydratedFlags.length,
+      });
+    }
+  }, [hasFlags, hydratedFlags.length, organization]);
+
+  // TODO: for LD users, show a CTA in this section instead
+  // if contexts.flags is not set, hide the section
+  if (!hasFlagContext) {
     return null;
   }
 
   const actions = (
     <ButtonBar gap={1}>
       {feedbackButton}
-      <Button
-        size="xs"
-        aria-label={t('View All')}
-        ref={viewAllButtonRef}
-        title={t('View All Flags')}
-        onClick={() => {
-          isDrawerOpen ? closeDrawer() : onViewAllFlags();
-        }}
-      >
-        {t('View All')}
-      </Button>
-      <Button
-        aria-label={t('Open Feature Flag Search')}
-        icon={<IconSearch size="xs" />}
-        size="xs"
-        title={t('Open Search')}
-        onClick={() => onViewAllFlags(FlagControlOptions.SEARCH)}
-      />
-      <FeatureFlagSort
-        orderBy={orderBy}
-        sortBy={sortBy}
-        setSortBy={setSortBy}
-        setOrderBy={setOrderBy}
-      />
+      {hasFlagContext && (
+        <Fragment>
+          <Button
+            aria-label={t('Set Up Integration')}
+            size="xs"
+            onClick={handleSetupButtonClick}
+          >
+            {t('Set Up Integration')}
+          </Button>
+          {hasFlags && (
+            <Fragment>
+              <Button
+                size="xs"
+                aria-label={t('View All')}
+                ref={viewAllButtonRef}
+                title={t('View All Flags')}
+                onClick={() => {
+                  isDrawerOpen ? closeDrawer() : onViewAllFlags();
+                }}
+              >
+                {t('View All')}
+              </Button>
+              <Button
+                aria-label={t('Open Feature Flag Search')}
+                icon={<IconSearch size="xs" />}
+                size="xs"
+                title={t('Open Search')}
+                onClick={() => onViewAllFlags(FlagControlOptions.SEARCH)}
+              />
+              <FeatureFlagSort
+                orderBy={orderBy}
+                sortBy={sortBy}
+                setSortBy={setSortBy}
+                setOrderBy={setOrderBy}
+              />
+            </Fragment>
+          )}
+        </Fragment>
+      )}
     </ButtonBar>
   );
 
@@ -203,10 +245,16 @@ export function EventFeatureFlagList({
         type={SectionKey.FEATURE_FLAGS}
         actions={actions}
       >
-        <CardContainer numCols={columnTwo.length ? 2 : 1}>
-          <KeyValueData.Card contentItems={columnOne} />
-          <KeyValueData.Card contentItems={columnTwo} />
-        </CardContainer>
+        {hasFlags ? (
+          <CardContainer numCols={columnTwo.length ? 2 : 1}>
+            <KeyValueData.Card contentItems={columnOne} />
+            <KeyValueData.Card contentItems={columnTwo} />
+          </CardContainer>
+        ) : (
+          <StyledEmptyStateWarning withIcon>
+            {t('No feature flags were found for this event')}
+          </StyledEmptyStateWarning>
+        )}
       </InterimSection>
     </ErrorBoundary>
   );
@@ -220,3 +268,11 @@ const ValueWrapper = styled('div')`
   display: flex;
   justify-content: space-between;
 `;
+
+const StyledEmptyStateWarning = styled(EmptyStateWarning)`
+  border: ${p => p.theme.border} solid 1px;
+  border-radius: ${p => p.theme.borderRadius};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;

static/app/components/events/featureFlags/featureFlagSort.tsx

@@ -31,6 +31,7 @@ export default function FeatureFlagSort({sortBy, orderBy, setOrderBy, setSortBy}
           aria-label={t('Sort Flags')}
           size="xs"
           icon={<IconSort />}
+          title={t('Sort Flags')}
         />
       )}
     >