sentry/tests/js/spec/views/__snapshots__/projectAlertRules.spec.jsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`projectAlertRules renders 1`] = `
<ProjectAlertRules
  params={
    Object {
      "orgId": "org1",
      "projectId": "project1",
    }
  }
  routes={Array []}
>
  <SideEffect(DocumentTitle)
    title="Sentry"
  >
    <DocumentTitle
      title="Sentry"
    >
      <SettingsPageHeading
        action={
          <Tooltip
            disabled={true}
            title="You do not have permission to edit alert rules."
          >
            <Button
              disabled={false}
              icon="icon-circle-add"
              priority="primary"
              size="small"
              to="new/"
            >
              New Alert Rule
            </Button>
          </Tooltip>
        }
        noTitleStyles={false}
        tabs={
          <NavTabs
            underlined={true}
          >
            <ListLink
              activeClassName="active"
              index={false}
              to="alerts"
            >
              Settings
            </ListLink>
            <ListLink
              activeClassName="active"
              index={false}
              to=""
            >
              Rules
            </ListLink>
          </NavTabs>
        }
        title="Alerts"
      >
        <Wrapper
          tabs={
            <NavTabs
              underlined={true}
            >
              <ListLink
                activeClassName="active"
                index={false}
                to="alerts"
              >
                Settings
              </ListLink>
              <ListLink
                activeClassName="active"
                index={false}
                to=""
              >
                Rules
              </ListLink>
            </NavTabs>
          }
        >
          <div
            className="css-1r5ylk7-Wrapper e1kblvez2"
          >
            <Flex
              align="center"
            >
              <Base
                align="center"
                className="css-5ipae5"
              >
                <div
                  className="css-5ipae5"
                  is={null}
                >
                  <Title
                    styled={false}
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={false}
                          to="alerts"
                        >
                          Settings
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={false}
                          to=""
                        >
                          Rules
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <Base
                      className="css-zs9eah-Title e1kblvez0"
                      tabs={
                        <NavTabs
                          underlined={true}
                        >
                          <ListLink
                            activeClassName="active"
                            index={false}
                            to="alerts"
                          >
                            Settings
                          </ListLink>
                          <ListLink
                            activeClassName="active"
                            index={false}
                            to=""
                          >
                            Rules
                          </ListLink>
                        </NavTabs>
                      }
                    >
                      <div
                        className="css-zs9eah-Title e1kblvez0"
                        is={null}
                        tabs={
                          <NavTabs
                            underlined={true}
                          >
                            <ListLink
                              activeClassName="active"
                              index={false}
                              to="alerts"
                            >
                              Settings
                            </ListLink>
                            <ListLink
                              activeClassName="active"
                              index={false}
                              to=""
                            >
                              Rules
                            </ListLink>
                          </NavTabs>
                        }
                      >
                        <HeaderTitle>
                          <h4
                            className="css-1w8ttcn-HeaderTitle e6lvex72"
                          >
                            Alerts
                          </h4>
                        </HeaderTitle>
                      </div>
                    </Base>
                  </Title>
                  <Action
                    tabs={
                      <NavTabs
                        underlined={true}
                      >
                        <ListLink
                          activeClassName="active"
                          index={false}
                          to="alerts"
                        >
                          Settings
                        </ListLink>
                        <ListLink
                          activeClassName="active"
                          index={false}
                          to=""
                        >
                          Rules
                        </ListLink>
                      </NavTabs>
                    }
                  >
                    <div
                      className="css-1lt2zte-Action e1kblvez1"
                    >
                      <Tooltip
                        disabled={true}
                        title="You do not have permission to edit alert rules."
                      >
                        <Button
                          disabled={false}
                          icon="icon-circle-add"
                          priority="primary"
                          size="small"
                          to="new/"
                        >
                          <StyledButton
                            aria-label="New Alert Rule"
                            disabled={false}
                            onClick={[Function]}
                            priority="primary"
                            role="button"
                            size="small"
                            to="new/"
                          >
                            <Component
                              aria-label="New Alert Rule"
                              className="css-zvpqlo-StyledButton-getColors eqrebog0"
                              disabled={false}
                              onClick={[Function]}
                              priority="primary"
                              role="button"
                              size="small"
                              to="new/"
                            >
                              <Link
                                aria-label="New Alert Rule"
                                className="css-zvpqlo-StyledButton-getColors eqrebog0"
                                disabled={false}
                                onClick={[Function]}
                                onlyActiveOnIndex={false}
                                priority="primary"
                                role="button"
                                size="small"
                                style={Object {}}
                                to="new/"
                              >
                                <a
                                  aria-label="New Alert Rule"
                                  className="css-zvpqlo-StyledButton-getColors eqrebog0"
                                  disabled={false}
                                  onClick={[Function]}
                                  priority="primary"
                                  role="button"
                                  size="small"
                                  style={Object {}}
                                >
                                  <ButtonLabel
                                    priority="primary"
                                    size="small"
                                  >
                                    <Component
                                      className="css-7ui8bl-ButtonLabel eqrebog1"
                                      priority="primary"
                                      size="small"
                                    >
                                      <span
                                        className="css-7ui8bl-ButtonLabel eqrebog1"
                                      >
                                        <Icon
                                          hasChildren={true}
                                          size="small"
                                        >
                                          <Component
                                            className="css-1vdnsie-Icon eqrebog2"
                                            hasChildren={true}
                                            size="small"
                                          >
                                            <span
                                              className="css-1vdnsie-Icon eqrebog2"
                                              size="small"
                                            >
                                              <StyledInlineSvg
                                                size="12px"
                                                src="icon-circle-add"
                                              >
                                                <InlineSvg
                                                  className="css-1ov3rcq-StyledInlineSvg eqrebog3"
                                                  size="12px"
                                                  src="icon-circle-add"
                                                >
                                                  <StyledSvg
                                                    className="css-1ov3rcq-StyledInlineSvg eqrebog3"
                                                    height="12px"
                                                    viewBox={Object {}}
                                                    width="12px"
                                                  >
                                                    <svg
                                                      className="eqrebog3 css-1jjmnki-StyledSvg-StyledInlineSvg e2idor0"
                                                      height="12px"
                                                      viewBox={Object {}}
                                                      width="12px"
                                                    >
                                                      <use
                                                        href="#test"
                                                        xlinkHref="#test"
                                                      />
                                                    </svg>
                                                  </StyledSvg>
                                                </InlineSvg>
                                              </StyledInlineSvg>
                                            </span>
                                          </Component>
                                        </Icon>
                                        New Alert Rule
                                      </span>
                                    </Component>
                                  </ButtonLabel>
                                </a>
                              </Link>
                            </Component>
                          </StyledButton>
                        </Button>
                      </Tooltip>
                    </div>
                  </Action>
                </div>
              </Base>
            </Flex>
            <div>
              <NavTabs
                underlined={true}
              >
                <ul
                  className="nav nav-tabs border-bottom"
                >
                  <ListLink
                    activeClassName="active"
                    index={false}
                    to="alerts"
                  >
                    <li
                      className=""
                    >
                      <Link
                        onlyActiveOnIndex={false}
                        style={Object {}}
                        to="alerts"
                      >
                        <a
                          onClick={[Function]}
                          style={Object {}}
                        >
                          Settings
                        </a>
                      </Link>
                    </li>
                  </ListLink>
                  <ListLink
                    activeClassName="active"
                    index={false}
                    to=""
                  >
                    <li
                      className=""
                    >
                      <Link
                        onlyActiveOnIndex={false}
                        style={Object {}}
                        to=""
                      >
                        <a
                          style={Object {}}
                        >
                          Rules
                        </a>
                      </Link>
                    </li>
                  </ListLink>
                </ul>
              </NavTabs>
            </div>
          </div>
        </Wrapper>
      </SettingsPageHeading>
      <PermissionAlert
        access={
          Array [
            "project:write",
          ]
        }
      >
        <AccessContainer
          access={
            Array [
              "project:write",
            ]
          }
        >
          <Access
            access={
              Array [
                "project:write",
              ]
            }
            configUser={
              Object {
                "email": "foo@example.com",
                "flags": Object {
                  "newsletter_consent_prompt": false,
                },
                "hasPasswordAuth": true,
                "id": "1",
                "isAuthenticated": true,
                "name": "Foo Bar",
                "options": Object {
                  "timezone": "UTC",
                },
                "permissions": Set {},
                "username": "foo@example.com",
              }
            }
            organization={
              Object {
                "access": Array [
                  "org:read",
                  "org:write",
                  "org:admin",
                  "project:read",
                  "project:write",
                  "project:admin",
                  "team:read",
                  "team:write",
                  "team:admin",
                ],
                "features": Array [],
                "id": "3",
                "name": "Organization Name",
                "onboardingTasks": Array [],
                "projects": Array [],
                "scrapeJavaScript": true,
                "slug": "org-slug",
                "status": Object {
                  "id": "active",
                  "name": "active",
                },
                "teams": Array [],
              }
            }
            renderNoAccessMessage={false}
            requireAll={true}
          />
        </AccessContainer>
      </PermissionAlert>
      <div
        className="rules-list"
      >
        <RuleRow
          canEdit={true}
          data={
            Object {
              "actions": Array [
                Object {
                  "id": "sentry.rules.actions.notify1",
                  "name": "Send a notification to all services",
                },
              ],
              "conditions": Array [
                Object {
                  "id": "sentry.rules.conditions.1",
                  "name": "An alert is first seen",
                },
              ],
              "environment": "staging",
              "id": "1",
              "name": "My alert rule",
            }
          }
          firstRule={true}
          key="1"
          onDelete={[Function]}
          orgId="org1"
          params={
            Object {
              "orgId": "org1",
              "projectId": "project1",
            }
          }
          projectId="project1"
          routes={Array []}
        >
          <Panel>
            <Component
              className="css-yahxlu-Panel e1laxa7d0"
            >
              <div
                className="css-yahxlu-Panel e1laxa7d0"
              >
                <PanelHeader
                  align="center"
                  hasButtons={true}
                  justify="space-between"
                >
                  <Component
                    align="center"
                    className="css-jmvceg-PanelHeader-getPadding e1p8v8nv0"
                    hasButtons={true}
                    justify="space-between"
                  >
                    <Flex
                      align="center"
                      className="css-jmvceg-PanelHeader-getPadding e1p8v8nv0"
                      justify="space-between"
                    >
                      <Base
                        align="center"
                        className="e1p8v8nv0 css-19i62qd-PanelHeader-getPadding"
                        justify="space-between"
                      >
                        <div
                          className="e1p8v8nv0 css-19i62qd-PanelHeader-getPadding"
                          is={null}
                        >
                          <TextColorLink
                            to="1/"
                          >
                            <Link
                              className="css-1s5bpjc-TextColorLink e1abl5wd0"
                              onlyActiveOnIndex={false}
                              style={Object {}}
                              to="1/"
                            >
                              <a
                                className="css-1s5bpjc-TextColorLink e1abl5wd0"
                                onClick={[Function]}
                                style={Object {}}
                              >
                                My alert rule
                                 - 
                                All Environments
                              </a>
                            </Link>
                          </TextColorLink>
                          <Flex>
                            <Base
                              className="css-sncxrr"
                            >
                              <div
                                className="css-sncxrr"
                                is={null}
                              >
                                <Tooltip
                                  disabled={true}
                                  title="You do not have permission to edit alert rules."
                                >
                                  <Button
                                    data-test-id="edit-rule"
                                    disabled={false}
                                    size="xsmall"
                                    style={
                                      Object {
                                        "marginRight": 5,
                                      }
                                    }
                                    to="1/"
                                  >
                                    <StyledButton
                                      aria-label="Edit Rule"
                                      data-test-id="edit-rule"
                                      disabled={false}
                                      onClick={[Function]}
                                      role="button"
                                      size="xsmall"
                                      style={
                                        Object {
                                          "marginRight": 5,
                                        }
                                      }
                                      to="1/"
                                    >
                                      <Component
                                        aria-label="Edit Rule"
                                        className="css-dkprmi-StyledButton-getColors eqrebog0"
                                        data-test-id="edit-rule"
                                        disabled={false}
                                        onClick={[Function]}
                                        role="button"
                                        size="xsmall"
                                        style={
                                          Object {
                                            "marginRight": 5,
                                          }
                                        }
                                        to="1/"
                                      >
                                        <Link
                                          aria-label="Edit Rule"
                                          className="css-dkprmi-StyledButton-getColors eqrebog0"
                                          data-test-id="edit-rule"
                                          disabled={false}
                                          onClick={[Function]}
                                          onlyActiveOnIndex={false}
                                          role="button"
                                          size="xsmall"
                                          style={
                                            Object {
                                              "marginRight": 5,
                                            }
                                          }
                                          to="1/"
                                        >
                                          <a
                                            aria-label="Edit Rule"
                                            className="css-dkprmi-StyledButton-getColors eqrebog0"
                                            data-test-id="edit-rule"
                                            disabled={false}
                                            onClick={[Function]}
                                            role="button"
                                            size="xsmall"
                                            style={
                                              Object {
                                                "marginRight": 5,
                                              }
                                            }
                                          >
                                            <ButtonLabel
                                              size="xsmall"
                                            >
                                              <Component
                                                className="css-uthd1f-ButtonLabel eqrebog1"
                                                size="xsmall"
                                              >
                                                <span
                                                  className="css-uthd1f-ButtonLabel eqrebog1"
                                                >
                                                  Edit Rule
                                                </span>
                                              </Component>
                                            </ButtonLabel>
                                          </a>
                                        </Link>
                                      </Component>
                                    </StyledButton>
                                  </Button>
                                </Tooltip>
                                <Tooltip
                                  disabled={true}
                                  title="You do not have permission to edit alert rules."
                                >
                                  <Confirm
                                    cancelText="Cancel"
                                    confirmText="Confirm"
                                    disableConfirmButton={false}
                                    disabled={false}
                                    message="Are you sure you want to remove this rule?"
                                    onConfirm={[Function]}
                                    priority="primary"
                                  >
                                    <Button
                                      disabled={false}
                                      icon="icon-trash"
                                      onClick={[Function]}
                                      size="xsmall"
                                    >
                                      <StyledButton
                                        disabled={false}
                                        onClick={[Function]}
                                        role="button"
                                        size="xsmall"
                                      >
                                        <Component
                                          className="css-dkprmi-StyledButton-getColors eqrebog0"
                                          disabled={false}
                                          onClick={[Function]}
                                          role="button"
                                          size="xsmall"
                                        >
                                          <button
                                            className="css-dkprmi-StyledButton-getColors eqrebog0"
                                            disabled={false}
                                            onClick={[Function]}
                                            role="button"
                                            size="xsmall"
                                          >
                                            <ButtonLabel
                                              size="xsmall"
                                            >
                                              <Component
                                                className="css-uthd1f-ButtonLabel eqrebog1"
                                                size="xsmall"
                                              >
                                                <span
                                                  className="css-uthd1f-ButtonLabel eqrebog1"
                                                >
                                                  <Icon
                                                    hasChildren={false}
                                                    size="xsmall"
                                                  >
                                                    <Component
                                                      className="css-ljhpxy-Icon eqrebog2"
                                                      hasChildren={false}
                                                      size="xsmall"
                                                    >
                                                      <span
                                                        className="css-ljhpxy-Icon eqrebog2"
                                                        size="xsmall"
                                                      >
                                                        <StyledInlineSvg
                                                          size="12px"
                                                          src="icon-trash"
                                                        >
                                                          <InlineSvg
                                                            className="css-1ov3rcq-StyledInlineSvg eqrebog3"
                                                            size="12px"
                                                            src="icon-trash"
                                                          >
                                                            <StyledSvg
                                                              className="css-1ov3rcq-StyledInlineSvg eqrebog3"
                                                              height="12px"
                                                              viewBox={Object {}}
                                                              width="12px"
                                                            >
                                                              <svg
                                                                className="eqrebog3 css-1jjmnki-StyledSvg-StyledInlineSvg e2idor0"
                                                                height="12px"
                                                                viewBox={Object {}}
                                                                width="12px"
                                                              >
                                                                <use
                                                                  href="#test"
                                                                  xlinkHref="#test"
                                                                />
                                                              </svg>
                                                            </StyledSvg>
                                                          </InlineSvg>
                                                        </StyledInlineSvg>
                                                      </span>
                                                    </Component>
                                                  </Icon>
                                                </span>
                                              </Component>
                                            </ButtonLabel>
                                          </button>
                                        </Component>
                                      </StyledButton>
                                    </Button>
                                    <Modal
                                      animation={false}
                                      autoFocus={true}
                                      backdrop={true}
                                      bsClass="modal"
                                      dialogComponentClass={[Function]}
                                      enforceFocus={true}
                                      keyboard={true}
                                      manager={
                                        ModalManager {
                                          "add": [Function],
                                          "containers": Array [],
                                          "data": Array [],
                                          "handleContainerOverflow": true,
                                          "hideSiblingNodes": true,
                                          "isTopModal": [Function],
                                          "modals": Array [],
                                          "remove": [Function],
                                        }
                                      }
                                      onHide={[Function]}
                                      renderBackdrop={[Function]}
                                      restoreFocus={true}
                                      show={false}
                                    >
                                      <Modal
                                        autoFocus={true}
                                        backdrop={true}
                                        backdropClassName="modal-backdrop"
                                        containerClassName="modal-open"
                                        enforceFocus={true}
                                        keyboard={true}
                                        manager={
                                          ModalManager {
                                            "add": [Function],
                                            "containers": Array [],
                                            "data": Array [],
                                            "handleContainerOverflow": true,
                                            "hideSiblingNodes": true,
                                            "isTopModal": [Function],
                                            "modals": Array [],
                                            "remove": [Function],
                                          }
                                        }
                                        onEntering={[Function]}
                                        onExited={[Function]}
                                        onHide={[Function]}
                                        renderBackdrop={[Function]}
                                        restoreFocus={true}
                                        show={false}
                                      />
                                    </Modal>
                                  </Confirm>
                                </Tooltip>
                              </div>
                            </Base>
                          </Flex>
                        </div>
                      </Base>
                    </Flex>
                  </Component>
                </PanelHeader>
                <PanelBody
                  direction="column"
                  disablePadding={true}
                  flex={false}
                >
                  <div
                    className="css-9vq8an-textStyles"
                  >
                    <RuleDescriptionRow>
                      <div
                        className="css-16pvk6d-RuleDescriptionRow e1abl5wd1"
                      >
                        <RuleDescriptionColumn>
                          <div
                            className="css-15obcn9-RuleDescriptionColumn e1abl5wd2"
                          >
                            <Condition>
                              <div
                                className="css-1d9hhun-Condition e1abl5wd3"
                              >
                                <h6>
                                  When 
                                  <strong />
                                   of these conditions are met:
                                </h6>
                                <GuideAnchor
                                  target="alert_conditions"
                                  type="text"
                                >
                                  <GuideAnchorContainer
                                    innerRef={[Function]}
                                    type="text"
                                  >
                                    <div
                                      className="css-9u5for-GuideAnchorContainer e130o4350"
                                      type="text"
                                    >
                                      <table
                                        className="conditions-list table"
                                      >
                                        <tbody>
                                          <tr
                                            key="0"
                                          >
                                            <td>
                                              An alert is first seen
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <StyledGuideAnchor
                                        active={false}
                                        className="guide-anchor-ping alert_conditions"
                                      >
                                        <div
                                          className="guide-anchor-ping alert_conditions css-1yndvnf-StyledGuideAnchor e130o4351"
                                        >
                                          <StyledGuideAnchorRipples>
                                            <div
                                              className="css-3zj3g7-StyledGuideAnchorRipples e130o4352"
                                            />
                                          </StyledGuideAnchorRipples>
                                        </div>
                                      </StyledGuideAnchor>
                                    </div>
                                  </GuideAnchorContainer>
                                </GuideAnchor>
                              </div>
                            </Condition>
                          </div>
                        </RuleDescriptionColumn>
                        <RuleDescriptionColumn>
                          <div
                            className="css-15obcn9-RuleDescriptionColumn e1abl5wd2"
                          >
                            <Condition>
                              <div
                                className="css-1d9hhun-Condition e1abl5wd3"
                              >
                                <h6>
                                  Take these actions at most
                                   
                                  <strong>
                                    once every 
                                    <Duration
                                      seconds={NaN}
                                    >
                                      <span>
                                        NaN ms
                                      </span>
                                    </Duration>
                                  </strong>
                                   
                                  for an issue:
                                </h6>
                                <GuideAnchor
                                  target="alert_actions"
                                  type="text"
                                >
                                  <GuideAnchorContainer
                                    innerRef={[Function]}
                                    type="text"
                                  >
                                    <div
                                      className="css-9u5for-GuideAnchorContainer e130o4350"
                                      type="text"
                                    >
                                      <table
                                        className="actions-list table"
                                      >
                                        <tbody>
                                          <tr
                                            key="0"
                                          >
                                            <td>
                                              Send a notification to all services
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <StyledGuideAnchor
                                        active={false}
                                        className="guide-anchor-ping alert_actions"
                                      >
                                        <div
                                          className="guide-anchor-ping alert_actions css-1yndvnf-StyledGuideAnchor e130o4351"
                                        >
                                          <StyledGuideAnchorRipples>
                                            <div
                                              className="css-3zj3g7-StyledGuideAnchorRipples e130o4352"
                                            />
                                          </StyledGuideAnchorRipples>
                                        </div>
                                      </StyledGuideAnchor>
                                    </div>
                                  </GuideAnchorContainer>
                                </GuideAnchor>
                              </div>
                            </Condition>
                          </div>
                        </RuleDescriptionColumn>
                      </div>
                    </RuleDescriptionRow>
                  </div>
                </PanelBody>
              </div>
            </Component>
          </Panel>
        </RuleRow>
      </div>
    </DocumentTitle>
  </SideEffect(DocumentTitle)>
</ProjectAlertRules>
`;