ref(workflow): Remove unused alert components/types (#27123)

static/app/types/alerts.tsx

@@ -1,6 +1,6 @@
 import {IssueConfigField} from 'app/types/index';
 
-export type IssueAlertRuleFormField =
+type IssueAlertRuleFormField =
   | {
       type: 'choice';
       choices?: [string, string][];

static/app/views/alerts/incidentRules/index.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import Feature from 'app/components/acl/feature';
-
-type Props = {
-  children: React.ReactNode;
-};
-
-const IncidentRules = ({children}: Props) => (
-  <Feature features={['incidents']} renderDisabled>
-    {children}
-  </Feature>
-);
-
-export default IncidentRules;

static/app/views/alerts/incidentRules/list.tsx

@@ -1,176 +0,0 @@
-import {Link, RouteComponentProps} from 'react-router';
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import Button from 'app/components/button';
-import Confirm from 'app/components/confirm';
-import LoadingIndicator from 'app/components/loadingIndicator';
-import {Panel, PanelBody, PanelHeader, PanelItem} from 'app/components/panels';
-import {IconDelete, IconEdit} from 'app/icons';
-import {t} from 'app/locale';
-import space from 'app/styles/space';
-import recreateRoute from 'app/utils/recreateRoute';
-import AsyncView from 'app/views/asyncView';
-import EmptyMessage from 'app/views/settings/components/emptyMessage';
-
-import {deleteRule} from './actions';
-import {SavedIncidentRule} from './types';
-
-type State = {
-  rules: SavedIncidentRule[];
-} & AsyncView['state'];
-
-type RouteParams = {
-  orgId: string;
-  projectId: string;
-};
-
-type Props = RouteComponentProps<RouteParams, {}>;
-
-class IncidentRulesList extends AsyncView<Props, State> {
-  getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
-    const {orgId} = this.props.params;
-
-    return [['rules', `/organizations/${orgId}/alert-rules/`] as [string, string]];
-  }
-
-  handleRemoveRule = async (rule: SavedIncidentRule) => {
-    const {orgId} = this.props.params;
-
-    // Optimistic update
-    const oldRules = this.state.rules.slice(0);
-
-    const newRules = this.state.rules.filter(({id}) => id !== rule.id);
-
-    try {
-      this.setState({
-        rules: newRules,
-      });
-
-      await deleteRule(this.api, orgId, rule);
-    } catch (_err) {
-      this.setState({
-        rules: oldRules,
-      });
-    }
-  };
-
-  renderLoading() {
-    return this.renderBody();
-  }
-
-  renderBody() {
-    const isLoading = this.state.loading;
-    const isEmpty = !isLoading && !this.state.rules.length;
-
-    return (
-      <Panel>
-        <GridPanelHeader>
-          <NameColumn>{t('Name')}</NameColumn>
-
-          <div>{t('Metric')}</div>
-
-          <div>{t('Threshold')}</div>
-        </GridPanelHeader>
-
-        <PanelBody>
-          {isLoading && <LoadingIndicator />}
-
-          {!isLoading &&
-            !isEmpty &&
-            this.state.rules.map(rule => {
-              const ruleLink = recreateRoute(`${rule.id}/`, this.props);
-              return (
-                <RuleRow key={rule.id}>
-                  <RuleLink to={ruleLink}>{rule.name}</RuleLink>
-
-                  <MetricName>{rule.aggregate}</MetricName>
-
-                  <ThresholdColumn>
-                    <Thresholds>
-                      {rule.triggers.map(trigger => trigger.alertThreshold).join(', ')}
-                    </Thresholds>
-
-                    <Actions>
-                      <Button to={ruleLink} size="small" aria-label={t('Edit Rule')}>
-                        <IconEdit size="xs" />
-                        &nbsp;
-                        {t('Edit')}
-                      </Button>
-
-                      <Confirm
-                        priority="danger"
-                        onConfirm={() => this.handleRemoveRule(rule)}
-                        message={t('Are you sure you want to remove this rule?')}
-                      >
-                        <Button
-                          type="button"
-                          size="small"
-                          icon={<IconDelete />}
-                          label={t('Remove Rule')}
-                        />
-                      </Confirm>
-                    </Actions>
-                  </ThresholdColumn>
-                </RuleRow>
-              );
-            })}
-
-          {!isLoading && isEmpty && (
-            <EmptyMessage>{t('No Alert Rules have been created yet.')}</EmptyMessage>
-          )}
-        </PanelBody>
-      </Panel>
-    );
-  }
-}
-
-export default IncidentRulesList;
-
-const gridCss = css`
-  display: grid;
-  grid-template-columns: 3fr 1fr 2fr;
-  align-items: center;
-`;
-
-const nameColumnCss = css`
-  padding: ${space(2)};
-`;
-
-const GridPanelHeader = styled(PanelHeader)`
-  padding: 0;
-  ${gridCss};
-`;
-
-const RuleRow = styled(PanelItem)`
-  padding: 0;
-  align-items: center;
-  ${gridCss};
-`;
-
-const NameColumn = styled('div')`
-  ${nameColumnCss};
-`;
-
-const RuleLink = styled(Link)`
-  ${nameColumnCss}
-`;
-
-// For tests
-const MetricName = styled('div')``;
-
-const ThresholdColumn = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-// For tests
-const Thresholds = styled('div')``;
-
-const Actions = styled('div')`
-  display: grid;
-  grid-auto-flow: column;
-  grid-gap: ${space(1)};
-  margin: ${space(2)};
-`;

static/app/views/alerts/incidentRules/ruleForm/index.tsx

@@ -754,5 +754,4 @@ const AlertInfo = styled('div')`
   color: ${p => p.theme.subText};
 `;
 
-export {RuleFormContainer};
 export default RuleFormContainer;

static/app/views/alerts/incidentRules/ruleRow.tsx

@@ -1,224 +0,0 @@
-import {Component, Fragment} from 'react';
-import {Link, RouteComponentProps} from 'react-router';
-import {css} from '@emotion/react';
-import styled from '@emotion/styled';
-
-import {t, tct} from 'app/locale';
-import space from 'app/styles/space';
-import {IssueAlertRule} from 'app/types/alerts';
-import {getDisplayName} from 'app/utils/environment';
-import recreateRoute from 'app/utils/recreateRoute';
-import {
-  AlertRuleThresholdType,
-  SavedIncidentRule,
-} from 'app/views/alerts/incidentRules/types';
-
-function isIssueAlert(data: IssueAlertRule | SavedIncidentRule): data is IssueAlertRule {
-  return !data.hasOwnProperty('triggers');
-}
-
-type Props = {
-  data: IssueAlertRule | SavedIncidentRule;
-  type: 'issue' | 'metric';
-
-  // Is the alert rule editable?
-  canEdit?: boolean;
-} & Pick<
-  RouteComponentProps<{orgId: string; projectId: string}, {}>,
-  'params' | 'routes' | 'location'
->;
-
-type State = {
-  loading: boolean;
-  error: boolean;
-};
-
-class RuleRow extends Component<Props, State> {
-  state: State = {loading: false, error: false};
-
-  renderIssueRule(data: IssueAlertRule) {
-    const {params, routes, location, canEdit} = this.props;
-    const editLink = recreateRoute(`rules/${data.id}/`, {
-      params,
-      routes,
-      location,
-    });
-
-    const environmentName = data.environment
-      ? getDisplayName({name: data.environment})
-      : t('All Environments');
-
-    return (
-      <Fragment>
-        <RuleType>{t('Issue')}</RuleType>
-        <div>
-          {canEdit ? <RuleName to={editLink}>{data.name}</RuleName> : data.name}
-          <RuleDescription>
-            {t('Environment')}: {environmentName}
-          </RuleDescription>
-        </div>
-
-        <ConditionsWithHeader>
-          <MatchTypeHeader>
-            {tct('[matchType] of the following:', {
-              matchType: data.actionMatch,
-            })}
-          </MatchTypeHeader>
-          {data.conditions.length !== 0 && (
-            <Conditions>
-              {data.conditions.map((condition, i) => (
-                <div key={i}>{condition.name}</div>
-              ))}
-            </Conditions>
-          )}
-        </ConditionsWithHeader>
-
-        <Actions>
-          {data.actions.map((action, i) => (
-            <Action key={i}>{action.name}</Action>
-          ))}
-        </Actions>
-      </Fragment>
-    );
-  }
-
-  renderMetricRule(data: SavedIncidentRule) {
-    const {params, routes, location, canEdit} = this.props;
-    const editLink = recreateRoute(`metric-rules/${data.id}/`, {
-      params,
-      routes,
-      location,
-    });
-
-    const numberOfTriggers = data.triggers.length;
-
-    return (
-      <Fragment>
-        <RuleType rowSpans={numberOfTriggers}>{t('Metric')}</RuleType>
-        <RuleNameAndDescription rowSpans={numberOfTriggers}>
-          {canEdit ? <RuleName to={editLink}>{data.name}</RuleName> : data.name}
-          <RuleDescription />
-        </RuleNameAndDescription>
-
-        {numberOfTriggers !== 0 &&
-          data.triggers.map((trigger, i) => {
-            const hideBorder = i !== numberOfTriggers - 1;
-            return (
-              <Fragment key={i}>
-                <Trigger key={`trigger-${i}`} hideBorder={hideBorder}>
-                  <StatusBadge>{trigger.label}</StatusBadge>
-                  <TriggerDescription>
-                    {data.aggregate}{' '}
-                    {data.thresholdType === AlertRuleThresholdType.ABOVE
-                      ? t('above')
-                      : t('below')}{' '}
-                    {trigger.alertThreshold}/{data.timeWindow}
-                    {t('min')}
-                  </TriggerDescription>
-                </Trigger>
-                <Actions key={`actions-${i}`} hideBorder={hideBorder}>
-                  {trigger.actions?.length
-                    ? trigger.actions.map((action, j) => (
-                        <Action key={j}>{action.desc}</Action>
-                      ))
-                    : t('None')}
-                </Actions>
-              </Fragment>
-            );
-          })}
-      </Fragment>
-    );
-  }
-
-  render() {
-    const {data} = this.props;
-
-    return isIssueAlert(data) ? this.renderIssueRule(data) : this.renderMetricRule(data);
-  }
-}
-
-export default RuleRow;
-
-type RowSpansProp = {
-  rowSpans?: number;
-};
-
-type HasBorderProp = {
-  hideBorder?: boolean;
-};
-
-const RuleType = styled('div')<RowSpansProp>`
-  color: ${p => p.theme.subText};
-  font-size: ${p => p.theme.fontSizeSmall};
-  font-weight: bold;
-  text-transform: uppercase;
-  ${p => p.rowSpans && `grid-row: auto / span ${p.rowSpans}`};
-`;
-
-const RuleNameAndDescription = styled('div')<RowSpansProp>`
-  ${p => p.rowSpans && `grid-row: auto / span ${p.rowSpans}`};
-`;
-
-const RuleName = styled(Link)`
-  font-weight: bold;
-`;
-
-const listingCss = css`
-  display: grid;
-  grid-gap: ${space(1)};
-`;
-
-const Conditions = styled('div')`
-  ${listingCss};
-`;
-
-const Actions = styled('div')<HasBorderProp>`
-  font-size: ${p => p.theme.fontSizeSmall};
-  ${listingCss};
-
-  ${p => p.hideBorder && `border-bottom: none`};
-`;
-
-const Action = styled('div')`
-  line-height: 14px;
-`;
-
-const ConditionsWithHeader = styled('div')`
-  font-size: ${p => p.theme.fontSizeSmall};
-`;
-
-const MatchTypeHeader = styled('div')`
-  font-weight: bold;
-  text-transform: uppercase;
-  color: ${p => p.theme.gray300};
-  margin-bottom: ${space(1)};
-`;
-
-const RuleDescription = styled('div')`
-  font-size: ${p => p.theme.fontSizeSmall};
-  margin: ${space(0.5)} 0;
-  white-space: nowrap;
-`;
-
-const Trigger = styled('div')<HasBorderProp>`
-  display: flex;
-  align-items: flex-start;
-  font-size: ${p => p.theme.fontSizeSmall};
-
-  ${p => p.hideBorder && `border-bottom: none`};
-`;
-
-const TriggerDescription = styled('div')`
-  white-space: nowrap;
-`;
-
-const StatusBadge = styled('div')`
-  background-color: ${p => p.theme.gray200};
-  color: ${p => p.theme.textColor};
-  text-transform: uppercase;
-  padding: ${space(0.25)} ${space(0.5)};
-  font-weight: 600;
-  margin-right: ${space(0.5)};
-  border-radius: ${p => p.theme.borderRadius};
-  font-size: ${p => p.theme.fontSizeRelativeSmall};
-`;

static/app/views/alerts/incidentRules/triggers/constants.tsx

@@ -1,5 +0,0 @@
-export enum Action {
-  EMAIL,
-  SLACK,
-  PAGERDUTY,
-}

static/app/views/alerts/incidentRules/triggers/panelSubHeader.tsx

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-import {PanelHeader} from 'app/components/panels';
-import space from 'app/styles/space';
-
-/**
- * Displays a Panel Header that has less vertical padding as to not draw as much attention but still
- * provide some logical separation
- */
-const PanelSubHeader = styled(PanelHeader)`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: ${space(1)} ${space(2)};
-`;
-
-export default PanelSubHeader;

static/app/views/alerts/incidentRules/types.tsx

@@ -1,10 +1,5 @@
 import {t} from 'app/locale';
 
-export enum AlertRuleThreshold {
-  INCIDENT,
-  RESOLUTION,
-}
-
 export enum AlertRuleThresholdType {
   ABOVE,
   BELOW,
@@ -45,7 +40,7 @@ export type ThresholdControlValue = {
   threshold: number | '' | null;
 };
 
-export type SavedTrigger = Omit<UnsavedTrigger, 'actions'> & {
+type SavedTrigger = Omit<UnsavedTrigger, 'actions'> & {
   id: string;
   dateCreated: string;
   actions: Action[];
@@ -101,11 +96,6 @@ export enum TimeWindow {
   ONE_DAY = 1440,
 }
 
-export type ProjectSelectOption = {
-  label: string;
-  value: number;
-};
-
 export enum ActionType {
   EMAIL = 'email',
   SLACK = 'slack',
@@ -216,7 +206,7 @@ type SavedActionFields = {
   dateCreated: string;
 };
 
-export type UnsavedAction = {
+type UnsavedAction = {
   unsavedId: string;
   /** Used to maintain order of unsaved actions */
   unsavedDateCreated: string;

static/app/views/alerts/rules/details/relatedTransactions.tsx

@@ -16,10 +16,7 @@ import {transactionSummaryRouteWithQuery} from 'app/views/performance/transactio
 
 const COLUMN_TITLES = ['slowest transactions', 'project', 'p95', 'users', 'user misery'];
 
-export function getProjectID(
-  eventData: EventData,
-  projects: Project[]
-): string | undefined {
+function getProjectID(eventData: EventData, projects: Project[]): string | undefined {
   const projectSlug = (eventData?.project as string) || undefined;
 
   if (typeof projectSlug === undefined) {

static/app/views/alerts/rules/filter.tsx

@@ -11,10 +11,6 @@ import space from 'app/styles/space';
 
 type DropdownButtonProps = React.ComponentProps<typeof DropdownButton>;
 
-export type RenderProps = {
-  toggleFilter: (filter: string) => void;
-};
-
 type DropdownSection = {
   id: string;
   label: string;