feat(aci): Various table fixes and improvements (#94361)

- Fix automation links
- Better sizing for connected detector table when connected button is
hidden
- Use TitleCell for detector links and remove line-height: 1
- Show a dash for unassigned monitors

Author: malwilley

static/app/components/workflowEngine/gridCell/automationTitleCell.tsx

@@ -1,7 +1,7 @@
 import {TitleCell} from 'sentry/components/workflowEngine/gridCell/titleCell';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
 import useOrganization from 'sentry/utils/useOrganization';
-import {makeMonitorDetailsPathname} from 'sentry/views/detectors/pathnames';
+import {makeAutomationDetailsPathname} from 'sentry/views/automations/pathnames';
 
 interface Props {
   automation: Automation;
@@ -13,7 +13,7 @@ export default function AutomationTitleCell({automation}: Props) {
   return (
     <TitleCell
       name={automation.name}
-      link={makeMonitorDetailsPathname(organization.slug, automation.id)}
+      link={makeAutomationDetailsPathname(organization.slug, automation.id)}
       systemCreated={!automation.createdBy}
     />
   );

static/app/components/workflowEngine/gridCell/titleCell.tsx

@@ -73,9 +73,4 @@ const DetailsWrapper = styled('div')`
   align-items: center;
   color: ${p => p.theme.subText};
   white-space: nowrap;
-  line-height: 1.2;
-
-  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
-    line-height: 1;
-  }
 `;

static/app/views/automations/components/connectedMonitorsList.tsx

@@ -83,26 +83,34 @@ const Container = styled('div')`
 `;
 
 const SimpleTableWithColumns = styled(SimpleTable)`
-  grid-template-columns: 1fr auto auto auto 140px;
+  grid-template-columns: 1fr 100px auto auto auto;
+
+  /*
+    The connected column can be added/removed depending on props, so in order to
+    have a constant width we have an auto grid column and set the width here.
+  */
+  .connected {
+    width: 140px;
+  }
 
   @container (max-width: ${p => p.theme.breakpoints.medium}) {
-    grid-template-columns: 1fr auto auto 140px;
+    grid-template-columns: 1fr 100px auto auto;
 
     .last-issue {
       display: none;
     }
   }
 
   @container (max-width: ${p => p.theme.breakpoints.small}) {
-    grid-template-columns: 1fr auto 140px;
+    grid-template-columns: 1fr 100px auto;
 
     .owner {
       display: none;
     }
   }
 
   @container (max-width: ${p => p.theme.breakpoints.xsmall}) {
-    grid-template-columns: 1fr 140px;
+    grid-template-columns: 1fr 100px;
 
     .type {
       display: none;

static/app/views/detectors/components/connectedAutomationList.tsx

@@ -87,11 +87,7 @@ export function ConnectedAutomationsList({
           <SimpleTable.HeaderCell name="action-filters">
             {t('Actions')}
           </SimpleTable.HeaderCell>
-          {canEdit && (
-            <SimpleTable.HeaderCell name="connected">
-              {t('Connected')}
-            </SimpleTable.HeaderCell>
-          )}
+          {canEdit && <SimpleTable.HeaderCell name="connected" />}
         </SimpleTable.Header>
         {isLoading && <Skeletons canEdit={canEdit} />}
         {isError && <LoadingError />}
@@ -114,7 +110,7 @@ export function ConnectedAutomationsList({
                 <ActionCell actions={getAutomationActions(automation)} />
               </SimpleTable.RowCell>
               {canEdit && (
-                <SimpleTable.RowCell name="connected">
+                <SimpleTable.RowCell name="connected" justify="flex-end">
                   <Button onClick={() => toggleConnected?.(automation.id)} size="sm">
                     {connectedAutomationIds?.has(automation.id)
                       ? t('Disconnect')

static/app/views/detectors/components/detectorLink.tsx

@@ -3,10 +3,8 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
-import Link from 'sentry/components/links/link';
-import {IconSentry} from 'sentry/icons';
+import {TitleCell} from 'sentry/components/workflowEngine/gridCell/titleCell';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {DataCondition} from 'sentry/types/workflowEngine/dataConditions';
 import {
   DataConditionType,
@@ -170,81 +168,32 @@ export function DetectorLink({detector, className}: DetectorLinkProps) {
   const project = useProjectFromId({project_id: detector.projectId});
 
   return (
-    <StyledLink
-      to={makeMonitorDetailsPathname(org.slug, detector.id)}
+    <TitleCell
       className={className}
-    >
-      <Name>
-        <NameText>{detector.name}</NameText>
-        {!detector.createdBy && <CreatedBySentryIcon size="xs" color="subText" />}
-        {detector.disabled && <span>&mdash; Disabled</span>}
-      </Name>
-      <DetailsWrapper>
-        {project && (
-          <StyledProjectBadge
-            css={css`
-              && img {
-                box-shadow: none;
-              }
-            `}
-            project={project}
-            avatarSize={16}
-            disableLink
-          />
-        )}
-        <Details detector={detector} />
-      </DetailsWrapper>
-    </StyledLink>
+      name={detector.name}
+      link={makeMonitorDetailsPathname(org.slug, detector.id)}
+      systemCreated={!detector.createdBy}
+      details={
+        <Fragment>
+          {project && (
+            <StyledProjectBadge
+              css={css`
+                && img {
+                  box-shadow: none;
+                }
+              `}
+              project={project}
+              avatarSize={16}
+              disableLink
+            />
+          )}
+          <Details detector={detector} />
+        </Fragment>
+      }
+    />
   );
 }
 
-const Name = styled('div')`
-  color: ${p => p.theme.textColor};
-  display: flex;
-  align-items: center;
-  gap: ${space(0.5)};
-`;
-
-const NameText = styled('span')`
-  font-weight: ${p => p.theme.fontWeightBold};
-  ${p => p.theme.overflowEllipsis};
-  width: auto;
-`;
-
-const CreatedBySentryIcon = styled(IconSentry)`
-  flex-shrink: 0;
-`;
-
-const StyledLink = styled(Link)`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: ${space(0.5)};
-  flex: 1;
-  overflow: hidden;
-
-  &:hover {
-    ${Name} {
-      text-decoration: underline;
-    }
-  }
-`;
-
-const DetailsWrapper = styled('div')`
-  display: inline-grid;
-  grid-auto-flow: column dense;
-  gap: ${space(0.75)};
-  justify-content: start;
-  align-items: center;
-  color: ${p => p.theme.subText};
-  white-space: nowrap;
-  line-height: 1.2;
-
-  @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
-    line-height: 1;
-  }
-`;
-
 const StyledProjectBadge = styled(ProjectBadge)`
   color: ${p => p.theme.subText};
 `;

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

@@ -1,9 +1,6 @@
 import styled from '@emotion/styled';
 
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
-import {Tooltip} from 'sentry/components/core/tooltip';
-import {IconSentry} from 'sentry/icons';
-import {t} from 'sentry/locale';
 import {parseActorIdentifier} from 'sentry/utils/parseActorIdentifier';
 
 type DetectorAssigneeCellProps = {
@@ -16,11 +13,7 @@ function AssigneeContent({assignee}: {assignee: string | null}) {
   const actor = parseActorIdentifier(assignee);
 
   if (!actor) {
-    return (
-      <Tooltip title={t('Sentry')}>
-        <IconSentry size="lg" data-test-id="assignee-sentry" />
-      </Tooltip>
-    );
+    return '—';
   }
 
   return <ActorAvatar actor={actor} size={24} />;

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

@@ -95,8 +95,6 @@ describe('DetectorsList', function () {
     expect(within(row).getByText('Detector 1')).toBeInTheDocument();
     // Type
     expect(within(row).getByText('Metric')).toBeInTheDocument();
-    // Assignee should be Sentry because owner is null
-    expect(within(row).getByTestId('assignee-sentry')).toBeInTheDocument();
 
     // Details under name
     expect(within(row).getByText('production')).toBeInTheDocument();