feat(aci): grid cell components for monitors

static/app/components/group/inboxBadges/shortId.tsx

@@ -21,7 +21,7 @@ function ShortId({shortId, avatar}: Props) {
 
 export default ShortId;
 
-const Wrapper = styled('div')`
+export const Wrapper = styled('div')`
   display: flex;
   align-items: center;
   white-space: nowrap;

static/app/components/workflowEngine/gridCell/monitorsCell.tsx → static/app/components/workflowEngine/gridCell/connectionCell.tsx

@@ -6,32 +6,32 @@ import {Hovercard} from 'sentry/components/hovercard';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Link from 'sentry/components/links/link';
 import {EmptyCell} from 'sentry/components/workflowEngine/gridCell/emptyCell';
-import {tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {AvatarProject} from 'sentry/types/project';
 
-export type Monitor = {
-  id: string;
+export type Item = {
+  link: string;
   name: string;
   project: AvatarProject;
   description?: string;
 };
 
-type MonitorsCellProps = {
-  monitors: Monitor[];
+export type ConnectionCellProps = {
+  items: Item[];
+  renderText: (count: number) => string;
 };
 
-export function MonitorsCell({monitors}: MonitorsCellProps) {
-  if (monitors.length === 0) {
+export function ConnectionCell({items, renderText}: ConnectionCellProps) {
+  if (items.length === 0) {
     return <EmptyCell />;
   }
   return (
     <div>
       <Hovercard
-        body={monitors.map(({name, id, project, description}, index) => (
-          <Fragment key={id}>
+        body={items.map(({name, project, description, link}, index) => (
+          <Fragment key={link}>
             {index > 0 && <Divider />}
-            <HovercardRow to={`/monitors/${id}/`}>
+            <HovercardRow to={link}>
               <strong>{name}</strong>
               <MonitorDetails>
                 <ProjectBadge
@@ -55,7 +55,7 @@ export function MonitorsCell({monitors}: MonitorsCellProps) {
           </Fragment>
         ))}
       >
-        <MonitorCount>{tn('%s monitor', '%s monitors', monitors.length)}</MonitorCount>
+        <MonitorCount>{renderText(items.length)}</MonitorCount>
       </Hovercard>
     </div>
   );

static/app/components/workflowEngine/gridCell/index.spec.tsx

@@ -3,7 +3,8 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import {TooltipContext} from 'sentry/components/tooltip';
 
 import {ActionCell} from './actionCell';
-import {MonitorsCell} from './monitorsCell';
+import {ConnectionCell} from './connectionCell';
+import {NumberCell} from './numberCell';
 import {TimeAgoCell} from './timeAgoCell';
 
 describe('Action Cell Component', function () {
@@ -38,31 +39,38 @@ describe('Time Ago Cell Component', function () {
   });
 });
 
-const renderMonitorCell = () => {
+const renderConnectionCell = (renderText: (count: number) => string) => {
   render(
-    <MonitorsCell
-      monitors={[
+    <ConnectionCell
+      items={[
         {
           name: '/endpoint',
-          id: 'def456',
+          link: 'link/def456',
           project: {slug: 'javascript', platform: 'javascript'},
           description: 'transaction.duration',
         },
       ]}
+      renderText={renderText}
     />
   );
 };
 
-describe('Monitors Cell Component', function () {
-  it('renders children and context values', function () {
-    renderMonitorCell();
+describe('Connection Cell Component', function () {
+  it('renders monitors', function () {
+    renderConnectionCell(count => count + ' monitor');
 
     const text = screen.getByText('1 monitor');
     expect(text).toBeInTheDocument();
   });
 
+  it('renders automations', function () {
+    renderConnectionCell(count => count + ' automation');
+    const text = screen.getByText('1 automation');
+    expect(text).toBeInTheDocument();
+  });
+
   it('renders hovercard', async function () {
-    renderMonitorCell();
+    renderConnectionCell(count => count + ' monitor');
 
     const span = screen.getByText('1 monitor');
     expect(span).toBeInTheDocument();
@@ -72,3 +80,12 @@ describe('Monitors Cell Component', function () {
     expect(await screen.findByText('transaction.duration')).toBeInTheDocument();
   });
 });
+
+describe('Number Cell Component', function () {
+  it('renders', () => {
+    render(<NumberCell number={3} />);
+
+    const text = screen.getByText('3');
+    expect(text).toBeInTheDocument();
+  });
+});