feat(aci): grid cell components for monitors (#84281)

# `TitleCell`
refactored + renamed `AutomationTitleCell` so that it can be used for
monitors and automations

<img width="502" alt="Screenshot 2025-01-29 at 3 33 04 PM"
src="https://github.com/user-attachments/assets/42dd80c5-6047-45cd-abe3-c1b48bd1856a"
/>

# `ConnectionCell`
refactored + renamed `MonitorsCell` so that it can be used for connected
monitors and automations

<img width="278" alt="Screenshot 2025-01-29 at 3 32 49 PM"
src="https://github.com/user-attachments/assets/e2146d8c-283f-4398-a944-fd06fb70aa37"
/>

# `IssueCell`


https://github.com/user-attachments/assets/a17dabb0-e60f-4fe7-992e-c36bd16fb5b7

# `NumberCell`
<img width="170" alt="Screenshot 2025-01-29 at 3 15 00 PM"
src="https://github.com/user-attachments/assets/4fa44018-f2e6-402b-99af-aff4613138b5"
/>

---------

Co-authored-by: Nate Moore <[email protected]>

Author: ameliahsu

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/automationTitleCell.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/monitorsCell.tsx renamed to static/app/components/workflowEngine/gridCell/connectionCell.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();
+  });
+});