feat(aci): add monitor config form (#90501)

Adds the basic metric monitor config form to ACI. Also tackles a bit of
general UI cleanup and adds more monitor-related hooks.

Sorry for the large PR! @ameliahsu graciously split a few smaller
branches off from this, so this is a bit of a catch-all PR.

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Scott Cooper <scttcper@gmail.com>

Author: 3 people

static/app/components/workflowEngine/form/control/priorityControl.tsx

@@ -76,6 +76,7 @@ export default function PriorityControl({
               flexibleControlStateSize
               size="sm"
               suffix="s"
+              placeholder="0"
               // empty string required to keep this as a controlled input
               value={thresholds[PriorityLevel.MEDIUM] ?? ''}
               onChange={threshold => setMediumThreshold(Number(threshold))}
@@ -96,6 +97,7 @@ export default function PriorityControl({
               flexibleControlStateSize
               size="sm"
               suffix="s"
+              placeholder="0"
               // empty string required to keep this as a controlled input
               value={thresholds[PriorityLevel.HIGH] ?? ''}
               onChange={threshold => setHighThreshold(Number(threshold))}

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

@@ -31,12 +31,10 @@ export function ActionCell({actions, disabled}: ActionCellProps) {
       </Flex>
     );
   }
-
   const actionsList = actions
     .map(action => ActionMetadata[action]?.name)
     .filter(x => x)
     .join(', ');
-
   return (
     <ActionContainer align="center" gap={space(0.75)}>
       <IconContainer>

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

@@ -32,7 +32,7 @@ const links: Record<
 };
 
 export function ConnectionCell({
-  ids: items,
+  ids: items = [],
   type,
   disabled = false,
   className,

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

@@ -50,7 +50,7 @@ export default storyBook('Grid Cell Components', story => {
       },
       openIssues: 3,
       creator: '1',
-      type: 'trace',
+      type: 'uptime',
     },
     {
       title: {
@@ -95,7 +95,7 @@ export default storyBook('Grid Cell Components', story => {
       },
       actions: [ActionType.SLACK, ActionType.DISCORD, ActionType.EMAIL],
       creator: 'sentry',
-      type: 'errors',
+      type: 'uptime',
       timeAgo: null,
       linkedItems: {
         ids: [],

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

@@ -2,7 +2,7 @@ import TimeSince from 'sentry/components/timeSince';
 import {EmptyCell} from 'sentry/components/workflowEngine/gridCell/emptyCell';
 
 type TimeAgoCellProps = {
-  date?: Date;
+  date?: string | Date;
 };
 
 export function TimeAgoCell({date}: TimeAgoCellProps) {

static/app/components/workflowEngine/layout/actions.tsx

@@ -1,7 +1,8 @@
 import {createContext, useContext} from 'react';
 
-import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import {Flex} from 'sentry/components/container/flex';
 import {HeaderActions} from 'sentry/components/layouts/thirds';
+import {space} from 'sentry/styles/space';
 
 const ActionContext = createContext<React.ReactNode | undefined>(undefined);
 
@@ -26,9 +27,7 @@ export function ActionsFromContext() {
   }
   return (
     <HeaderActions>
-      <ButtonBar merged={false} gap={1}>
-        {actions}
-      </ButtonBar>
+      <Flex gap={space(1)}>{actions}</Flex>
     </HeaderActions>
   );
 }

static/app/components/workflowEngine/layout/detail.tsx

@@ -25,7 +25,7 @@ function DetailLayout({children, project}: WorkflowEngineDetailLayoutProps) {
   const title = useDocumentTitle();
   return (
     <StyledPage>
-      <Layout.Header>
+      <Layout.Header unified>
         <Layout.HeaderContent>
           <BreadcrumbsFromContext />
           <Layout.Title>{title}</Layout.Title>

static/app/components/workflowEngine/layout/edit.tsx

@@ -24,7 +24,7 @@ function EditLayout({children, onTitleChange}: WorkflowEngineEditLayoutProps) {
   const title = useDocumentTitle();
   return (
     <Layout.Page>
-      <StyledHeader>
+      <Layout.Header unified>
         <Layout.HeaderContent>
           <BreadcrumbsFromContext />
           <Layout.Title>
@@ -37,16 +37,12 @@ function EditLayout({children, onTitleChange}: WorkflowEngineEditLayoutProps) {
           </Layout.Title>
         </Layout.HeaderContent>
         <ActionsFromContext />
-      </StyledHeader>
+      </Layout.Header>
       <Body>{children}</Body>
     </Layout.Page>
   );
 }
 
-const StyledHeader = styled(Layout.Header)`
-  background: ${p => p.theme.background};
-`;
-
 const Body = styled('div')`
   display: flex;
   flex-direction: column;

static/app/components/workflowEngine/layout/list.tsx

@@ -17,7 +17,7 @@ function WorkflowEngineListLayout({children}: WorkflowEngineListLayoutProps) {
   const title = useDocumentTitle();
   return (
     <Layout.Page>
-      <Layout.Header>
+      <Layout.Header unified>
         <Layout.HeaderContent>
           <Layout.Title>{title}</Layout.Title>
         </Layout.HeaderContent>

static/app/components/workflowEngine/ui/container.tsx

@@ -7,12 +7,13 @@ export const Container = styled('div')`
   flex-direction: column;
   gap: ${space(2)};
   justify-content: flex-start;
-  background-color: ${p => p.theme.backgroundSecondary};
+  background-color: ${p => p.theme.background};
   border: 1px solid ${p => p.theme.translucentBorder};
   border-radius: ${p => p.theme.borderRadius};
   padding: ${space(1.5)};
 
   @media (max-width: ${p => p.theme.breakpoints.large}) {
-    width: fit-content;
+    min-width: fit-content;
+    flex: 1;
   }
 `;

static/app/components/workflowEngine/ui/footer.tsx

@@ -5,6 +5,7 @@ import {space} from 'sentry/styles/space';
 export const StickyFooter = styled('div')`
   position: sticky;
   margin-top: auto;
+  margin-bottom: -56px;
   bottom: 0;
   right: 0;
   width: 100%;

static/app/components/workflowEngine/ui/section.tsx

@@ -6,18 +6,28 @@ import {space} from 'sentry/styles/space';
 type SectionProps = {
   children: React.ReactNode;
   title: string;
+  description?: string;
 };
 
-export default function Section({children, title}: SectionProps) {
+export default function Section({children, title, description}: SectionProps) {
   return (
     <Flex column gap={space(1)}>
       <SectionHeading>{title}</SectionHeading>
+      {description && <SectionDescription>{description}</SectionDescription>}
       {children}
     </Flex>
   );
 }
 
-const SectionHeading = styled('h4')`
+export const SectionHeading = styled('h4')`
+  font-size: ${p => p.theme.fontSizeLarge};
+  font-weight: ${p => p.theme.fontWeightBold};
+  margin: 0;
+`;
+
+export const SectionDescription = styled('p')`
   font-size: ${p => p.theme.fontSizeMedium};
+  font-weight: ${p => p.theme.fontWeightNormal};
+  color: ${p => p.theme.subText};
   margin: 0;
 `;

static/app/plugins/components/pluginIcon.tsx

@@ -69,7 +69,7 @@ const PLUGIN_ICONS = {
 } satisfies Record<string, string>;
 
 export interface PluginIconProps extends React.RefAttributes<HTMLDivElement> {
-  pluginId: string | keyof typeof PLUGIN_ICONS;
+  pluginId: keyof typeof PLUGIN_ICONS | (string & {});
   /**
    * @default 20
    */

static/app/types/workflowEngine/automations.tsx

@@ -1,6 +1,6 @@
 import type {DataConditionGroup} from 'sentry/types/workflowEngine/dataConditions';
 
-interface NewAutomation {
+export interface NewAutomation {
   actionFilters: DataConditionGroup[];
   detectorIds: string[];
   name: string;
@@ -10,5 +10,5 @@ interface NewAutomation {
 
 export interface Automation extends Readonly<NewAutomation> {
   readonly id: string;
-  readonly lastTriggered: Date;
+  readonly lastTriggered: string;
 }

static/app/types/workflowEngine/dataConditions.tsx

@@ -73,6 +73,10 @@ export interface NewDataCondition {
   condition_result?: any;
 }
 
+export interface DataCondition extends Readonly<NewDataCondition> {
+  readonly id: string;
+}
+
 export interface DataConditionGroup {
   conditions: NewDataCondition[];
   id: string;

static/app/types/workflowEngine/detectors.tsx

@@ -4,11 +4,12 @@ import type {
 } from 'sentry/types/workflowEngine/dataConditions';
 
 export type DetectorType =
-  | 'metric'
+  | 'crons'
   | 'errors'
+  | 'metric'
   | 'performance'
-  | 'trace'
   | 'replay'
+  | 'trace'
   | 'uptime';
 
 interface NewDetector {
@@ -24,8 +25,8 @@ interface NewDetector {
 
 export interface Detector extends Readonly<NewDetector> {
   readonly createdBy: string;
-  readonly dateCreated: Date;
-  readonly dateUpdated: Date;
+  readonly dateCreated: string;
+  readonly dateUpdated: string;
   readonly id: string;
-  readonly lastTriggered: Date;
+  readonly lastTriggered: string;
 }

static/app/utils/useParams.tsx

@@ -24,6 +24,7 @@ type ParamKeys =
   | 'groupId'
   | 'id'
   | 'installationId'
+  | 'detectorId'
   | 'integrationSlug'
   | 'issueId'
   | 'memberId'

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

@@ -4,14 +4,19 @@ import styled from '@emotion/styled';
 import {Flex} from 'sentry/components/container/flex';
 import {Checkbox} from 'sentry/components/core/checkbox';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
+import {ProjectList} from 'sentry/components/projectList';
 import {ActionCell} from 'sentry/components/workflowEngine/gridCell/actionCell';
 import AutomationTitleCell from 'sentry/components/workflowEngine/gridCell/automationTitleCell';
 import {ConnectionCell} from 'sentry/components/workflowEngine/gridCell/connectionCell';
 import {TimeAgoCell} from 'sentry/components/workflowEngine/gridCell/timeAgoCell';
+import ProjectsStore from 'sentry/stores/projectsStore';
 import {space} from 'sentry/styles/space';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
 import useOrganization from 'sentry/utils/useOrganization';
-import {useAutomationActions} from 'sentry/views/automations/hooks/utils';
+import {
+  useAutomationActions,
+  useAutomationProjectIds,
+} from 'sentry/views/automations/hooks/utils';
 import {makeAutomationDetailsPathname} from 'sentry/views/automations/pathnames';
 
 type AutomationListRowProps = {
@@ -28,6 +33,10 @@ export function AutomationListRow({
   const organization = useOrganization();
   const actions = useAutomationActions(automation);
   const {id, name, disabled, lastTriggered, detectorIds = []} = automation;
+  const projectIds = useAutomationProjectIds(automation);
+  const projectSlugs = projectIds.map(
+    projectId => ProjectsStore.getById(projectId)?.slug
+  ) as string[];
   return (
     <RowWrapper disabled={disabled}>
       <InteractionStateLayer />
@@ -51,6 +60,9 @@ export function AutomationListRow({
       <CellWrapper className="action">
         <ActionCell actions={actions} disabled={disabled} />
       </CellWrapper>
+      <CellWrapper className="projects">
+        <ProjectList projectSlugs={projectSlugs} />
+      </CellWrapper>
       <CellWrapper className="connected-monitors">
         <ConnectionCell ids={detectorIds} type="detector" disabled={disabled} />
       </CellWrapper>

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

@@ -43,14 +43,17 @@ function AutomationListTable() {
           <HeaderDivider />
           <Heading>{t('Actions')}</Heading>
         </Flex>
+        <Flex className="projects">
+          <HeaderDivider />
+          <Heading>{t('Projects')}</Heading>
+        </Flex>
         <Flex className="connected-monitors">
           <HeaderDivider />
           <Heading>{t('Monitors')}</Heading>
         </Flex>
       </StyledPanelHeader>
       <PanelBody>
         {isLoading ? <LoadingIndicator /> : null}
-
         {automations.map(automation => (
           <AutomationListRow
             key={automation.id}

static/app/views/automations/detail.tsx

@@ -38,7 +38,7 @@ function HistoryAndConnectedMonitors() {
 
 function Details() {
   return (
-    <div>
+    <Flex column gap={space(3)}>
       <Flex column gap={space(1)}>
         <SectionHeading>{t('Last Triggered')}</SectionHeading>
         <span>
@@ -78,7 +78,7 @@ function Details() {
           <KeyValueTableRow keyName={t('Team')} value="Platform" />
         </KeyValueTable>
       </Flex>
-    </div>
+    </Flex>
   );
 }
 

static/app/views/automations/hooks/index.tsx

@@ -14,3 +14,8 @@ export function useAutomationsQuery(_options: UseAutomationsQueryOptions = {}) {
     retry: false,
   });
 }
+
+export const makeAutomationQueryKey = (
+  orgSlug: string,
+  automationId = ''
+): [url: string] => [`/organizations/${orgSlug}/workflows/${automationId}/`];

static/app/views/automations/hooks/utils.tsx

@@ -2,6 +2,7 @@ import {useState} from 'react';
 
 import type {ActionType} from 'sentry/types/workflowEngine/actions';
 import type {Automation} from 'sentry/types/workflowEngine/automations';
+import {useDetectorQueriesByIds} from 'sentry/views/detectors/hooks';
 
 export function useAutomationActions(automation: Automation): ActionType[] {
   return [
@@ -47,3 +48,9 @@ export function useConnectedIds({storageKey, initialIds = []}: UseConnectedIdsPr
 }
 
 export const NEW_AUTOMATION_CONNECTED_IDS_KEY = 'new-automation-connected-ids';
+export function useAutomationProjectIds(automation: Automation): string[] {
+  const queries = useDetectorQueriesByIds(automation.detectorIds);
+  return [
+    ...new Set(queries.map(query => query.data?.projectId).filter(x => x)),
+  ] as string[];
+}

static/app/views/automations/list.tsx

@@ -36,7 +36,7 @@ export default function AutomationsList() {
 function TableHeader() {
   return (
     <Flex gap={space(2)}>
-      <ProjectPageFilter />
+      <ProjectPageFilter size="md" />
       <div style={{flexGrow: 1}}>
         <SearchBar placeholder={t('Search for events, users, tags, and more')} />
       </div>

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

@@ -23,7 +23,7 @@ interface DetectorListRowProps {
 }
 
 export function DetectorListRow({
-  detector: {workflowIds, id, name, disabled, projectId},
+  detector: {workflowIds, createdBy, id, projectId, name, disabled, type},
   handleSelect,
   selected,
 }: DetectorListRowProps) {
@@ -51,16 +51,16 @@ export function DetectorListRow({
         <StyledGraphCell />
       </Flex>
       <CellWrapper className="type">
-        <TypeCell type="errors" />
+        <TypeCell type={type} />
       </CellWrapper>
       <CellWrapper className="last-issue">
         <StyledIssueCell
           group={issues.length > 0 ? issues[0] : undefined}
           disabled={disabled}
         />
       </CellWrapper>
-      <CellWrapper className="owner">
-        <UserCell user="sentry" />
+      <CellWrapper className="creator">
+        <UserCell user={createdBy ?? 'sentry'} />
       </CellWrapper>
       <CellWrapper className="connected-automations">
         <ConnectionCell ids={workflowIds} type="workflow" disabled={disabled} />