ref(aci): Add common components for monitor list views (#102842)

Author: malwilley

static/app/router/routes.tsx

@@ -1675,6 +1675,7 @@ function buildRoutes(): RouteObject[] {
   const monitorRoutes: SentryRouteObject = {
     path: '/monitors/',
     withOrgPath: true,
+    component: make(() => import('sentry/views/detectors/detectorViewContainer')),
     children: [
       ...detectorRoutes.children!,
       automationRoutes,

static/app/views/automations/list.spec.tsx

@@ -18,6 +18,7 @@ import {
   within,
 } from 'sentry-test/reactTestingLibrary';
 
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import ProjectsStore from 'sentry/stores/projectsStore';
 import AutomationsList from 'sentry/views/automations/list';
@@ -394,7 +395,13 @@ describe('AutomationsList', () => {
         body: {},
       });
 
-      render(<AutomationsList />, {organization});
+      render(
+        // MonitorViewContainer provides PageFiltersContainer typically
+        <PageFiltersContainer>
+          <AutomationsList />
+        </PageFiltersContainer>,
+        {organization}
+      );
       renderGlobalModal();
 
       // Mock the filtered search results - this will be used when search is applied

static/app/views/automations/list.tsx

@@ -2,7 +2,6 @@ import {useCallback} from 'react';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
-import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
 import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
 import Pagination from 'sentry/components/pagination';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
@@ -80,44 +79,42 @@ export default function AutomationsList() {
 
   return (
     <SentryDocumentTitle title={t('Alerts')}>
-      <PageFiltersContainer>
-        <ListLayout
-          actions={<Actions />}
-          title={t('Alerts')}
-          description={t(
-            'Alerts are triggered when issue changes state, is created, or passes a threshold. They perform external actions like sending notifications, creating tickets, or calling webhooks and integrations.'
-          )}
-          docsUrl="https://docs.sentry.io/product/automations/"
-        >
-          <TableHeader />
-          <div>
-            <VisuallyCompleteWithData
-              hasData={(automations?.length ?? 0) > 0}
-              id="AutomationsList-Table"
-              isLoading={isLoading}
-            >
-              <AutomationListTable
-                automations={automations ?? []}
-                isPending={isLoading}
-                isError={isError}
-                isSuccess={isSuccess}
-                sort={sort}
-                queryCount={hitsInt > maxHitsInt ? `${maxHits}+` : hits}
-                allResultsVisible={allResultsVisible()}
-              />
-            </VisuallyCompleteWithData>
-            <Pagination
-              pageLinks={pageLinks}
-              onCursor={newCursor => {
-                navigate({
-                  pathname: location.pathname,
-                  query: {...location.query, cursor: newCursor},
-                });
-              }}
+      <ListLayout
+        actions={<Actions />}
+        title={t('Alerts')}
+        description={t(
+          'Alerts are triggered when issue changes state, is created, or passes a threshold. They perform external actions like sending notifications, creating tickets, or calling webhooks and integrations.'
+        )}
+        docsUrl="https://docs.sentry.io/product/automations/"
+      >
+        <TableHeader />
+        <div>
+          <VisuallyCompleteWithData
+            hasData={(automations?.length ?? 0) > 0}
+            id="AutomationsList-Table"
+            isLoading={isLoading}
+          >
+            <AutomationListTable
+              automations={automations ?? []}
+              isPending={isLoading}
+              isError={isError}
+              isSuccess={isSuccess}
+              sort={sort}
+              queryCount={hitsInt > maxHitsInt ? `${maxHits}+` : hits}
+              allResultsVisible={allResultsVisible()}
             />
-          </div>
-        </ListLayout>
-      </PageFiltersContainer>
+          </VisuallyCompleteWithData>
+          <Pagination
+            pageLinks={pageLinks}
+            onCursor={newCursor => {
+              navigate({
+                pathname: location.pathname,
+                query: {...location.query, cursor: newCursor},
+              });
+            }}
+          />
+        </div>
+      </ListLayout>
     </SentryDocumentTitle>
   );
 }

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -31,7 +31,7 @@ import {
   DetectorListRow,
   DetectorListRowSkeleton,
 } from 'sentry/views/detectors/components/detectorListTable/detectorListRow';
-import {DETECTOR_LIST_PAGE_LIMIT} from 'sentry/views/detectors/constants';
+import {DETECTOR_LIST_PAGE_LIMIT} from 'sentry/views/detectors/list/common/constants';
 import {
   useMonitorViewContext,
   type MonitorListAdditionalColumn,

static/app/views/detectors/detectorViewContainer.tsx

@@ -0,0 +1,14 @@
+import {Outlet} from 'react-router-dom';
+
+import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import {useWorkflowEngineFeatureGate} from 'sentry/components/workflowEngine/useWorkflowEngineFeatureGate';
+
+export default function DetectorViewContainer() {
+  useWorkflowEngineFeatureGate({redirect: true});
+
+  return (
+    <PageFiltersContainer>
+      <Outlet />
+    </PageFiltersContainer>
+  );
+}