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

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

exports[`Issues Similar View renders initially with loading component 1`] = `
<div>
  <div
    className="alert alert-block alert-warning"
  >
    <strong>
      Warning
      :
    </strong>
     
    This is an experimental feature. Data may not be immediately available while we process merges.
  </div>
  <LoadingIndicator />
</div>
`;

exports[`Issues Similar View renders with mocked data 1`] = `
<GroupGroupingView
  location={Object {}}
  params={
    Object {
      "groupId": "groupId",
      "orgId": "orgId",
      "projectId": "projectId",
    }
  }
>
  <div>
    <div
      className="alert alert-block alert-warning"
    >
      <strong>
        Warning
        :
      </strong>
       
      This is an experimental feature. Data may not be immediately available while we process merges.
    </div>
    <SimilarList
      filteredItems={
        Array [
          Object {
            "aggregate": Object {
              "exception": 0.375,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "2",
              "culprit": "Constructor.onSimilarUpdate(app/views/groupSimilar/groupingMergedList)",
              "firstSeen": "2017-07-25T02:21:52Z",
              "hasSeen": false,
              "id": "274",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T02:22:19Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "ReferenceError",
                "value": "unmergedList is not defined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/274/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323734",
              "shortId": "INTERNAL-4K",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "ReferenceError: unmergedList is not defined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.375,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.375,
                ],
              ],
            },
          },
          Object {
            "aggregate": Object {
              "exception": 0.01264,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "1",
              "culprit": "size(app/views/groupSimilar/groupingMergedList)",
              "firstSeen": "2017-07-25T02:20:35Z",
              "hasSeen": true,
              "id": "275",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T02:20:35Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'size' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/275/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323735",
              "shortId": "INTERNAL-4M",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "TypeError: Cannot read property 'size' of undefined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.01264,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.01264,
                ],
              ],
            },
          },
          Object {
            "aggregate": Object {
              "exception": 0.0008615,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": Object {
                "avatar": Object {
                  "avatarType": "letter_avatar",
                  "avatarUuid": null,
                },
                "avatarUrl": "https://secure.gravatar.com/avatar/7b544e8eb9d08ed777be5aa82121155a?s=32&d=mm",
                "dateJoined": "2017-06-26T21:02:13.264Z",
                "email": "billy@sentry.io",
                "emails": Array [
                  Object {
                    "email": "billy@sentry.io",
                    "id": "1",
                    "is_verified": false,
                  },
                ],
                "has2fa": false,
                "id": "1",
                "identities": Array [],
                "isActive": true,
                "isManaged": false,
                "lastActive": "2017-07-26T18:28:19.391Z",
                "lastLogin": "2017-07-25T01:00:50.473Z",
                "name": "billy@sentry.io",
                "username": "billy@sentry.io",
              },
              "count": "15",
              "culprit": "stale(app/views/groupDetails)",
              "firstSeen": "2017-07-25T02:20:35Z",
              "hasSeen": true,
              "id": "216",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T23:21:19Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'stale' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/216/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323136",
              "shortId": "INTERNAL-2S",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": Object {
                "reason": "changed_status",
              },
              "title": "TypeError: Cannot read property 'stale' of undefined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:application-chunks": 0.000235,
              "exception:stacktrace:pairs": 0.001488,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:application-chunks",
                  0.000235,
                ],
                Array [
                  "exception:stacktrace:pairs",
                  0.001488,
                ],
              ],
            },
          },
        ]
      }
      groupId="groupId"
      items={
        Array [
          Object {
            "aggregate": Object {
              "exception": 0.875,
            },
            "isBelowThreshold": false,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "90",
              "culprit": "length(app/views/groupSimilar/groupSimilarView)",
              "firstSeen": "2017-07-10T18:32:43Z",
              "hasSeen": false,
              "id": "271",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-24T23:41:44Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'length' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/271/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323731",
              "shortId": "INTERNAL-4G",
              "status": "resolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "TypeError: Cannot read property 'length' of undefined",
              "type": "error",
              "userCount": 3,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.875,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.875,
                ],
              ],
            },
          },
        ]
      }
      onMerge={[Function]}
      orgId="orgId"
      projectId="projectId"
    >
      <div
        className="similar-list-container"
      >
        <SpreadLayout
          center={true}
          className="similar-list-header"
          responsive={false}
        >
          <div
            className="spread-layout similar-list-header center"
          >
            <h2>
              <span>
                Similar Issues
              </span>
              <QueryCount
                count={4}
                hideIfEmpty={true}
                inline={true}
              >
                <div
                  className="query-count inline"
                >
                  <span>
                    (
                  </span>
                  <span
                    className="query-count-value"
                  >
                    4
                  </span>
                  <span>
                    )
                  </span>
                </div>
              </QueryCount>
            </h2>
            <SimilarSpectrum>
              <div
                className="similar-spectrum"
              >
                <span>
                  Similar
                </span>
                <span
                  className="similar-spectrum-box high"
                />
                <span
                  className="similar-spectrum-box med-high"
                />
                <span
                  className="similar-spectrum-box med"
                />
                <span
                  className="similar-spectrum-box low-med"
                />
                <span
                  className="similar-spectrum-box low"
                />
                <span>
                  Not Similar
                </span>
              </div>
            </SimilarSpectrum>
          </div>
        </SpreadLayout>
        <SimilarToolbar
          onMerge={[Function]}
        >
          <Toolbar
            className="similar-toolbar"
          >
            <div
              className="toolbar similar-toolbar"
            >
              <SpreadLayout
                center={true}
                responsive={true}
              >
                <div
                  className="spread-layout center allow-responsive"
                >
                  <FlowLayout
                    style={
                      Object {
                        "flex": 1,
                      }
                    }
                    truncate={true}
                  >
                    <div
                      className="flow-layout is-truncated"
                      style={
                        Object {
                          "flex": 1,
                        }
                      }
                    >
                      <FlowLayout
                        truncate={true}
                      >
                        <div
                          className="flow-layout is-truncated"
                        >
                          <div
                            className="similar-toolbar-actions"
                          >
                            <LinkWithConfirmation
                              className="btn btn-sm btn-default"
                              disabled={true}
                              message="Are you sure you want to merge these issues?"
                              onConfirm={[Function]}
                              title="Merging 0 issues"
                            >
                              <Confirm
                                cancelText="Cancel"
                                confirmText="Confirm"
                                disabled={true}
                                message="Are you sure you want to merge these issues?"
                                onConfirm={[Function]}
                                priority="primary"
                              >
                                <a
                                  className="btn btn-sm btn-default disabled"
                                  disabled={true}
                                  onClick={[Function]}
                                  title="Merging 0 issues"
                                >
                                  Merge
                                   (
                                  0
                                  )
                                  <Modal
                                    animation={false}
                                    autoFocus={true}
                                    backdrop={true}
                                    bsClass="modal"
                                    dialogComponentClass={[Function]}
                                    enforceFocus={true}
                                    keyboard={true}
                                    manager={
                                      ModalManager {
                                        "containers": Array [],
                                        "data": Array [],
                                        "handleContainerOverflow": true,
                                        "hideSiblingNodes": true,
                                        "modals": Array [],
                                      }
                                    }
                                    onHide={[Function]}
                                    renderBackdrop={[Function]}
                                    restoreFocus={true}
                                    show={false}
                                  >
                                    <Modal
                                      autoFocus={true}
                                      backdrop={true}
                                      backdropClassName="modal-backdrop"
                                      backdropTransitionTimeout={150}
                                      containerClassName="modal-open"
                                      dialogTransitionTimeout={300}
                                      enforceFocus={true}
                                      keyboard={true}
                                      manager={
                                        ModalManager {
                                          "containers": Array [],
                                          "data": Array [],
                                          "handleContainerOverflow": true,
                                          "hideSiblingNodes": true,
                                          "modals": Array [],
                                        }
                                      }
                                      onEntering={[Function]}
                                      onExited={[Function]}
                                      onHide={[Function]}
                                      renderBackdrop={[Function]}
                                      restoreFocus={true}
                                      show={false}
                                    />
                                  </Modal>
                                </a>
                              </Confirm>
                            </LinkWithConfirmation>
                          </div>
                        </div>
                      </FlowLayout>
                    </div>
                  </FlowLayout>
                  <div
                    className="similar-score-columns"
                  >
                    <ToolbarHeader
                      className="similar-score-column event-count-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-count-header"
                      >
                        Events
                      </div>
                    </ToolbarHeader>
                    <ToolbarHeader
                      className="similar-score-column event-similar-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-similar-header"
                      >
                        Exception
                      </div>
                    </ToolbarHeader>
                    <ToolbarHeader
                      className="similar-score-column event-similar-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-similar-header"
                      >
                        Message
                      </div>
                    </ToolbarHeader>
                  </div>
                </div>
              </SpreadLayout>
            </div>
          </Toolbar>
        </SimilarToolbar>
        <div
          className="similar-list"
        >
          <SimilarIssueItem
            aggregate={
              Object {
                "exception": 0.875,
              }
            }
            groupId="groupId"
            isBelowThreshold={false}
            issue={
              Object {
                "annotations": Array [],
                "assignedTo": null,
                "count": "90",
                "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                "firstSeen": "2017-07-10T18:32:43Z",
                "hasSeen": false,
                "id": "271",
                "isBookmarked": false,
                "isPublic": false,
                "isSubscribed": true,
                "lastSeen": "2017-07-24T23:41:44Z",
                "level": "error",
                "logger": "javascript",
                "metadata": Object {
                  "type": "TypeError",
                  "value": "Cannot read property 'length' of undefined",
                },
                "numComments": 0,
                "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                "project": Object {
                  "name": "Internal",
                  "slug": "internal",
                },
                "shareId": "312e323731",
                "shortId": "INTERNAL-4G",
                "status": "resolved",
                "statusDetails": Object {},
                "subscriptionDetails": null,
                "title": "TypeError: Cannot read property 'length' of undefined",
                "type": "error",
                "userCount": 3,
              }
            }
            orgId="orgId"
            projectId="projectId"
            score={
              Object {
                "exception:stacktrace:pairs": 0.875,
              }
            }
            scoresByInterface={
              Object {
                "exception": Array [
                  Array [
                    "exception:stacktrace:pairs",
                    0.875,
                  ],
                ],
              }
            }
          >
            <SpreadLayout
              center={true}
              className="group similar-issue isResolved"
              onClick={[Function]}
              responsive={true}
            >
              <div
                className="spread-layout group similar-issue isResolved center allow-responsive"
                onClick={[Function]}
              >
                <FlowLayout
                  truncate={true}
                >
                  <div
                    className="flow-layout is-truncated"
                  >
                    <FlowLayout
                      truncate={true}
                    >
                      <div
                        className="flow-layout is-truncated"
                      >
                        <div
                          className="action-column"
                        >
                          <Checkbox
                            checked={false}
                            id="271"
                            value="271"
                          >
                            <input
                              checked={false}
                              className="chk-select"
                              id="271"
                              type="checkbox"
                              value="271"
                            />
                          </Checkbox>
                        </div>
                        <div
                          className="event-details level-error"
                          style={
                            Object {
                              "flex": 1,
                            }
                          }
                        >
                          <EventOrGroupHeader
                            data={
                              Object {
                                "annotations": Array [],
                                "assignedTo": null,
                                "count": "90",
                                "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                                "firstSeen": "2017-07-10T18:32:43Z",
                                "hasSeen": false,
                                "id": "271",
                                "isBookmarked": false,
                                "isPublic": false,
                                "isSubscribed": true,
                                "lastSeen": "2017-07-24T23:41:44Z",
                                "level": "error",
                                "logger": "javascript",
                                "metadata": Object {
                                  "type": "TypeError",
                                  "value": "Cannot read property 'length' of undefined",
                                },
                                "numComments": 0,
                                "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                                "project": Object {
                                  "name": "Internal",
                                  "slug": "internal",
                                },
                                "shareId": "312e323731",
                                "shortId": "INTERNAL-4G",
                                "status": "resolved",
                                "statusDetails": Object {},
                                "subscriptionDetails": null,
                                "title": "TypeError: Cannot read property 'length' of undefined",
                                "type": "error",
                                "userCount": 3,
                              }
                            }
                            includeLink={true}
                            orgId="orgId"
                            projectId="projectId"
                          >
                            <div
                              className="event-issue-header"
                            >
                              <h3
                                className="truncate"
                              >
                                <Link
                                  onlyActiveOnIndex={false}
                                  style={Object {}}
                                  to="/orgId/projectId/issues/271/"
                                >
                                  <a
                                    onClick={[Function]}
                                    style={Object {}}
                                  >
                                    <span
                                      className="error-level truncate"
                                    >
                                      error
                                    </span>
                                    <span
                                      className="icon icon-soundoff"
                                    />
                                    <span
                                      className="icon icon-star-solid"
                                    />
                                    <EventOrGroupTitle
                                      data={
                                        Object {
                                          "annotations": Array [],
                                          "assignedTo": null,
                                          "count": "90",
                                          "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                                          "firstSeen": "2017-07-10T18:32:43Z",
                                          "hasSeen": false,
                                          "id": "271",
                                          "isBookmarked": false,
                                          "isPublic": false,
                                          "isSubscribed": true,
                                          "lastSeen": "2017-07-24T23:41:44Z",
                                          "level": "error",
                                          "logger": "javascript",
                                          "metadata": Object {
                                            "type": "TypeError",
                                            "value": "Cannot read property 'length' of undefined",
                                          },
                                          "numComments": 0,
                                          "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                                          "project": Object {
                                            "name": "Internal",
                                            "slug": "internal",
                                          },
                                          "shareId": "312e323731",
                                          "shortId": "INTERNAL-4G",
                                          "status": "resolved",
                                          "statusDetails": Object {},
                                          "subscriptionDetails": null,
                                          "title": "TypeError: Cannot read property 'length' of undefined",
                                          "type": "error",
                                          "userCount": 3,
                                        }
                                      }
                                      includeLink={true}
                                      orgId="orgId"
                                      projectId="projectId"
                                    >
                                      <span>
                                        <span
                                          style={
                                            Object {
                                              "marginRight": 10,
                                            }
                                          }
                                        >
                                          TypeError
                                        </span>
                                        <em>
                                          length(app/views/groupSimilar/groupSimilarView)
                                        </em>
                                        <br />
                                      </span>
                                    </EventOrGroupTitle>
                                  </a>
                                </Link>
                              </h3>
                              <div
                                className="event-message truncate"
                              >
                                <span
                                  className="message"
                                >
                                  Cannot read property 'length' of undefined
                                </span>
                              </div>
                            </div>
                          </EventOrGroupHeader>
                          <EventOrGroupExtraDetails
                            annotations={Array []}
                            assignedTo={null}
                            count="90"
                            culprit="length(app/views/groupSimilar/groupSimilarView)"
                            firstSeen="2017-07-10T18:32:43Z"
                            group={true}
                            groupId="271"
                            hasSeen={false}
                            id="271"
                            isBookmarked={false}
                            isPublic={false}
                            isSubscribed={true}
                            lastSeen={null}
                            level="error"
                            logger="javascript"
                            metadata={
                              Object {
                                "type": "TypeError",
                                "value": "Cannot read property 'length' of undefined",
                              }
                            }
                            numComments={0}
                            orgId="orgId"
                            permalink="http://localhost:8000/sentry/internal/issues/271/"
                            project={
                              Object {
                                "name": "Internal",
                                "slug": "internal",
                              }
                            }
                            projectId="projectId"
                            shareId="312e323731"
                            shortId="INTERNAL-4G"
                            showAssignee={true}
                            showStatus={true}
                            status="resolved"
                            statusDetails={Object {}}
                            subscriptionDetails={null}
                            title="TypeError: Cannot read property 'length' of undefined"
                            type="error"
                            userCount={3}
                          >
                            <div
                              className="event-extra"
                            >
                              <ul>
                                <li>
                                  <ShortId
                                    shortId="INTERNAL-4G"
                                  >
                                    <span
                                      className="short-id"
                                      onClick={[Function]}
                                    >
                                      <AutoSelectText>
                                        <div>
                                          INTERNAL-4G
                                        </div>
                                      </AutoSelectText>
                                    </span>
                                  </ShortId>
                                </li>
                                <li>
                                  <span
                                    className="icon icon-clock"
                                  />
                                  <TimeSince
                                    date="2017-07-10T18:32:43Z"
                                    suffix="old"
                                  >
                                    <time
                                      dateTime="2017-07-10T18:32:43.000Z"
                                      title="July 10, 2017 6:32 PM UTC"
                                    >
                                      3 months old
                                    </time>
                                  </TimeSince>
                                </li>
                                <li
                                  className="event-annotation"
                                >
                                  <Link
                                    onlyActiveOnIndex={false}
                                    style={Object {}}
                                    to={
                                      Object {
                                        "pathname": "/orgId/projectId/",
                                        "query": Object {
                                          "query": "logger:javascript",
                                        },
                                      }
                                    }
                                  >
                                    <a
                                      onClick={[Function]}
                                      style={Object {}}
                                    >
                                      javascript
                                    </a>
                                  </Link>
                                </li>
                              </ul>
                            </div>
                          </EventOrGroupExtraDetails>
                        </div>
                      </div>
                    </FlowLayout>
                    <button
                      className="btn btn-default btn-xs"
                      onClick={[Function]}
                      style={
                        Object {
                          "marginRight": 2,
                        }
                      }
                    >
                      Diff
                    </button>
                  </div>
                </FlowLayout>
                <div
                  className="similar-score-columns"
                >
                  <count
                    className="similar-score-column"
                    value="90"
                  >
                    <span
                      className="similar-score-column"
                    >
                      90
                    </span>
                  </count>
                  <div
                    className="similar-score-column"
                  >
                    <Hovercard
                      body={
                        <SimilarScoreCard
                          scoreList={
                            Array [
                              Array [
                                "exception:stacktrace:pairs",
                                0.875,
                              ],
                            ]
                          }
                        />
                      }
                    >
                      <span
                        className="hovercard-container"
                        onMouseEnter={[Function]}
                        onMouseLeave={[Function]}
                      >
                        <ScoreBar
                          palette={Array []}
                          paletteClassNames={
                            Array [
                              "low",
                              "low-med",
                              "med",
                              "med-high",
                              "high",
                            ]
                          }
                          score={4}
                          vertical={true}
                        >
                          <div
                            className="score-bar vertical"
                          >
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                          </div>
                        </ScoreBar>
                      </span>
                    </Hovercard>
                  </div>
                  <div
                    className="similar-score-column"
                  >
                    <Hovercard
                      body={0}
                    >
                      <span
                        className="hovercard-container"
                        onMouseEnter={[Function]}
                        onMouseLeave={[Function]}
                      >
                        <ScoreBar
                          palette={Array []}
                          paletteClassNames={
                            Array [
                              "low",
                              "low-med",
                              "med",
                              "med-high",
                              "high",
                            ]
                          }
                          score={0}
                          vertical={true}
                        >
                          <div
                            className="score-bar vertical"
                          >
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                          </div>
                        </ScoreBar>
                      </span>
                    </Hovercard>
                  </div>
                </div>
              </div>
            </SpreadLayout>
          </SimilarIssueItem>
          <div
            className="similar-items-footer"
          >
            <button
              className="btn btn-default btn-xl"
              onClick={[Function]}
            >
              Show 
              3
               issues below threshold
            </button>
          </div>
        </div>
        <pagination
          onCursor={[Function]}
        />
      </div>
    </SimilarList>
  </div>
</GroupGroupingView>
`;

exports[`Issues Similar View renders with mocked data 2`] = `
<GroupGroupingView
  location={Object {}}
  params={
    Object {
      "groupId": "groupId",
      "orgId": "orgId",
      "projectId": "projectId",
    }
  }
>
  <div>
    <div
      className="alert alert-block alert-warning"
    >
      <strong>
        Warning
        :
      </strong>
       
      This is an experimental feature. Data may not be immediately available while we process merges.
    </div>
    <SimilarList
      filteredItems={
        Array [
          Object {
            "aggregate": Object {
              "exception": 0.375,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "2",
              "culprit": "Constructor.onSimilarUpdate(app/views/groupSimilar/groupingMergedList)",
              "firstSeen": "2017-07-25T02:21:52Z",
              "hasSeen": false,
              "id": "274",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T02:22:19Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "ReferenceError",
                "value": "unmergedList is not defined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/274/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323734",
              "shortId": "INTERNAL-4K",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "ReferenceError: unmergedList is not defined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.375,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.375,
                ],
              ],
            },
          },
          Object {
            "aggregate": Object {
              "exception": 0.01264,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "1",
              "culprit": "size(app/views/groupSimilar/groupingMergedList)",
              "firstSeen": "2017-07-25T02:20:35Z",
              "hasSeen": true,
              "id": "275",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T02:20:35Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'size' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/275/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323735",
              "shortId": "INTERNAL-4M",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "TypeError: Cannot read property 'size' of undefined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.01264,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.01264,
                ],
              ],
            },
          },
          Object {
            "aggregate": Object {
              "exception": 0.0008615,
            },
            "isBelowThreshold": true,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": Object {
                "avatar": Object {
                  "avatarType": "letter_avatar",
                  "avatarUuid": null,
                },
                "avatarUrl": "https://secure.gravatar.com/avatar/7b544e8eb9d08ed777be5aa82121155a?s=32&d=mm",
                "dateJoined": "2017-06-26T21:02:13.264Z",
                "email": "billy@sentry.io",
                "emails": Array [
                  Object {
                    "email": "billy@sentry.io",
                    "id": "1",
                    "is_verified": false,
                  },
                ],
                "has2fa": false,
                "id": "1",
                "identities": Array [],
                "isActive": true,
                "isManaged": false,
                "lastActive": "2017-07-26T18:28:19.391Z",
                "lastLogin": "2017-07-25T01:00:50.473Z",
                "name": "billy@sentry.io",
                "username": "billy@sentry.io",
              },
              "count": "15",
              "culprit": "stale(app/views/groupDetails)",
              "firstSeen": "2017-07-25T02:20:35Z",
              "hasSeen": true,
              "id": "216",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-25T23:21:19Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'stale' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/216/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323136",
              "shortId": "INTERNAL-2S",
              "status": "unresolved",
              "statusDetails": Object {},
              "subscriptionDetails": Object {
                "reason": "changed_status",
              },
              "title": "TypeError: Cannot read property 'stale' of undefined",
              "type": "error",
              "userCount": 1,
            },
            "score": Object {
              "exception:stacktrace:application-chunks": 0.000235,
              "exception:stacktrace:pairs": 0.001488,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:application-chunks",
                  0.000235,
                ],
                Array [
                  "exception:stacktrace:pairs",
                  0.001488,
                ],
              ],
            },
          },
        ]
      }
      groupId="groupId"
      items={
        Array [
          Object {
            "aggregate": Object {
              "exception": 0.875,
            },
            "isBelowThreshold": false,
            "issue": Object {
              "annotations": Array [],
              "assignedTo": null,
              "count": "90",
              "culprit": "length(app/views/groupSimilar/groupSimilarView)",
              "firstSeen": "2017-07-10T18:32:43Z",
              "hasSeen": false,
              "id": "271",
              "isBookmarked": false,
              "isPublic": false,
              "isSubscribed": true,
              "lastSeen": "2017-07-24T23:41:44Z",
              "level": "error",
              "logger": "javascript",
              "metadata": Object {
                "type": "TypeError",
                "value": "Cannot read property 'length' of undefined",
              },
              "numComments": 0,
              "permalink": "http://localhost:8000/sentry/internal/issues/271/",
              "project": Object {
                "name": "Internal",
                "slug": "internal",
              },
              "shareId": "312e323731",
              "shortId": "INTERNAL-4G",
              "status": "resolved",
              "statusDetails": Object {},
              "subscriptionDetails": null,
              "title": "TypeError: Cannot read property 'length' of undefined",
              "type": "error",
              "userCount": 3,
            },
            "score": Object {
              "exception:stacktrace:pairs": 0.875,
            },
            "scoresByInterface": Object {
              "exception": Array [
                Array [
                  "exception:stacktrace:pairs",
                  0.875,
                ],
              ],
            },
          },
        ]
      }
      onMerge={[Function]}
      orgId="orgId"
      projectId="projectId"
    >
      <div
        className="similar-list-container"
      >
        <SpreadLayout
          center={true}
          className="similar-list-header"
          responsive={false}
        >
          <div
            className="spread-layout similar-list-header center"
          >
            <h2>
              <span>
                Similar Issues
              </span>
              <QueryCount
                count={4}
                hideIfEmpty={true}
                inline={true}
              >
                <div
                  className="query-count inline"
                >
                  <span>
                    (
                  </span>
                  <span
                    className="query-count-value"
                  >
                    4
                  </span>
                  <span>
                    )
                  </span>
                </div>
              </QueryCount>
            </h2>
            <SimilarSpectrum>
              <div
                className="similar-spectrum"
              >
                <span>
                  Similar
                </span>
                <span
                  className="similar-spectrum-box high"
                />
                <span
                  className="similar-spectrum-box med-high"
                />
                <span
                  className="similar-spectrum-box med"
                />
                <span
                  className="similar-spectrum-box low-med"
                />
                <span
                  className="similar-spectrum-box low"
                />
                <span>
                  Not Similar
                </span>
              </div>
            </SimilarSpectrum>
          </div>
        </SpreadLayout>
        <SimilarToolbar
          onMerge={[Function]}
        >
          <Toolbar
            className="similar-toolbar"
          >
            <div
              className="toolbar similar-toolbar"
            >
              <SpreadLayout
                center={true}
                responsive={true}
              >
                <div
                  className="spread-layout center allow-responsive"
                >
                  <FlowLayout
                    style={
                      Object {
                        "flex": 1,
                      }
                    }
                    truncate={true}
                  >
                    <div
                      className="flow-layout is-truncated"
                      style={
                        Object {
                          "flex": 1,
                        }
                      }
                    >
                      <FlowLayout
                        truncate={true}
                      >
                        <div
                          className="flow-layout is-truncated"
                        >
                          <div
                            className="similar-toolbar-actions"
                          >
                            <LinkWithConfirmation
                              className="btn btn-sm btn-default"
                              disabled={true}
                              message="Are you sure you want to merge these issues?"
                              onConfirm={[Function]}
                              title="Merging 0 issues"
                            >
                              <Confirm
                                cancelText="Cancel"
                                confirmText="Confirm"
                                disabled={true}
                                message="Are you sure you want to merge these issues?"
                                onConfirm={[Function]}
                                priority="primary"
                              >
                                <a
                                  className="btn btn-sm btn-default disabled"
                                  disabled={true}
                                  onClick={[Function]}
                                  title="Merging 0 issues"
                                >
                                  Merge
                                   (
                                  0
                                  )
                                  <Modal
                                    animation={false}
                                    autoFocus={true}
                                    backdrop={true}
                                    bsClass="modal"
                                    dialogComponentClass={[Function]}
                                    enforceFocus={true}
                                    keyboard={true}
                                    manager={
                                      ModalManager {
                                        "containers": Array [],
                                        "data": Array [],
                                        "handleContainerOverflow": true,
                                        "hideSiblingNodes": true,
                                        "modals": Array [],
                                      }
                                    }
                                    onHide={[Function]}
                                    renderBackdrop={[Function]}
                                    restoreFocus={true}
                                    show={false}
                                  >
                                    <Modal
                                      autoFocus={true}
                                      backdrop={true}
                                      backdropClassName="modal-backdrop"
                                      backdropTransitionTimeout={150}
                                      containerClassName="modal-open"
                                      dialogTransitionTimeout={300}
                                      enforceFocus={true}
                                      keyboard={true}
                                      manager={
                                        ModalManager {
                                          "containers": Array [],
                                          "data": Array [],
                                          "handleContainerOverflow": true,
                                          "hideSiblingNodes": true,
                                          "modals": Array [],
                                        }
                                      }
                                      onEntering={[Function]}
                                      onExited={[Function]}
                                      onHide={[Function]}
                                      renderBackdrop={[Function]}
                                      restoreFocus={true}
                                      show={false}
                                    />
                                  </Modal>
                                </a>
                              </Confirm>
                            </LinkWithConfirmation>
                          </div>
                        </div>
                      </FlowLayout>
                    </div>
                  </FlowLayout>
                  <div
                    className="similar-score-columns"
                  >
                    <ToolbarHeader
                      className="similar-score-column event-count-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-count-header"
                      >
                        Events
                      </div>
                    </ToolbarHeader>
                    <ToolbarHeader
                      className="similar-score-column event-similar-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-similar-header"
                      >
                        Exception
                      </div>
                    </ToolbarHeader>
                    <ToolbarHeader
                      className="similar-score-column event-similar-header"
                    >
                      <div
                        className="toolbar-header similar-score-column event-similar-header"
                      >
                        Message
                      </div>
                    </ToolbarHeader>
                  </div>
                </div>
              </SpreadLayout>
            </div>
          </Toolbar>
        </SimilarToolbar>
        <div
          className="similar-list"
        >
          <SimilarIssueItem
            aggregate={
              Object {
                "exception": 0.875,
              }
            }
            groupId="groupId"
            isBelowThreshold={false}
            issue={
              Object {
                "annotations": Array [],
                "assignedTo": null,
                "count": "90",
                "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                "firstSeen": "2017-07-10T18:32:43Z",
                "hasSeen": false,
                "id": "271",
                "isBookmarked": false,
                "isPublic": false,
                "isSubscribed": true,
                "lastSeen": "2017-07-24T23:41:44Z",
                "level": "error",
                "logger": "javascript",
                "metadata": Object {
                  "type": "TypeError",
                  "value": "Cannot read property 'length' of undefined",
                },
                "numComments": 0,
                "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                "project": Object {
                  "name": "Internal",
                  "slug": "internal",
                },
                "shareId": "312e323731",
                "shortId": "INTERNAL-4G",
                "status": "resolved",
                "statusDetails": Object {},
                "subscriptionDetails": null,
                "title": "TypeError: Cannot read property 'length' of undefined",
                "type": "error",
                "userCount": 3,
              }
            }
            orgId="orgId"
            projectId="projectId"
            score={
              Object {
                "exception:stacktrace:pairs": 0.875,
              }
            }
            scoresByInterface={
              Object {
                "exception": Array [
                  Array [
                    "exception:stacktrace:pairs",
                    0.875,
                  ],
                ],
              }
            }
          >
            <SpreadLayout
              center={true}
              className="group similar-issue isResolved"
              onClick={[Function]}
              responsive={true}
            >
              <div
                className="spread-layout group similar-issue isResolved center allow-responsive"
                onClick={[Function]}
              >
                <FlowLayout
                  truncate={true}
                >
                  <div
                    className="flow-layout is-truncated"
                  >
                    <FlowLayout
                      truncate={true}
                    >
                      <div
                        className="flow-layout is-truncated"
                      >
                        <div
                          className="action-column"
                        >
                          <Checkbox
                            checked={false}
                            id="271"
                            value="271"
                          >
                            <input
                              checked={false}
                              className="chk-select"
                              id="271"
                              type="checkbox"
                              value="271"
                            />
                          </Checkbox>
                        </div>
                        <div
                          className="event-details level-error"
                          style={
                            Object {
                              "flex": 1,
                            }
                          }
                        >
                          <EventOrGroupHeader
                            data={
                              Object {
                                "annotations": Array [],
                                "assignedTo": null,
                                "count": "90",
                                "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                                "firstSeen": "2017-07-10T18:32:43Z",
                                "hasSeen": false,
                                "id": "271",
                                "isBookmarked": false,
                                "isPublic": false,
                                "isSubscribed": true,
                                "lastSeen": "2017-07-24T23:41:44Z",
                                "level": "error",
                                "logger": "javascript",
                                "metadata": Object {
                                  "type": "TypeError",
                                  "value": "Cannot read property 'length' of undefined",
                                },
                                "numComments": 0,
                                "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                                "project": Object {
                                  "name": "Internal",
                                  "slug": "internal",
                                },
                                "shareId": "312e323731",
                                "shortId": "INTERNAL-4G",
                                "status": "resolved",
                                "statusDetails": Object {},
                                "subscriptionDetails": null,
                                "title": "TypeError: Cannot read property 'length' of undefined",
                                "type": "error",
                                "userCount": 3,
                              }
                            }
                            includeLink={true}
                            orgId="orgId"
                            projectId="projectId"
                          >
                            <div
                              className="event-issue-header"
                            >
                              <h3
                                className="truncate"
                              >
                                <Link
                                  onlyActiveOnIndex={false}
                                  style={Object {}}
                                  to="/orgId/projectId/issues/271/"
                                >
                                  <a
                                    onClick={[Function]}
                                    style={Object {}}
                                  >
                                    <span
                                      className="error-level truncate"
                                    >
                                      error
                                    </span>
                                    <span
                                      className="icon icon-soundoff"
                                    />
                                    <span
                                      className="icon icon-star-solid"
                                    />
                                    <EventOrGroupTitle
                                      data={
                                        Object {
                                          "annotations": Array [],
                                          "assignedTo": null,
                                          "count": "90",
                                          "culprit": "length(app/views/groupSimilar/groupSimilarView)",
                                          "firstSeen": "2017-07-10T18:32:43Z",
                                          "hasSeen": false,
                                          "id": "271",
                                          "isBookmarked": false,
                                          "isPublic": false,
                                          "isSubscribed": true,
                                          "lastSeen": "2017-07-24T23:41:44Z",
                                          "level": "error",
                                          "logger": "javascript",
                                          "metadata": Object {
                                            "type": "TypeError",
                                            "value": "Cannot read property 'length' of undefined",
                                          },
                                          "numComments": 0,
                                          "permalink": "http://localhost:8000/sentry/internal/issues/271/",
                                          "project": Object {
                                            "name": "Internal",
                                            "slug": "internal",
                                          },
                                          "shareId": "312e323731",
                                          "shortId": "INTERNAL-4G",
                                          "status": "resolved",
                                          "statusDetails": Object {},
                                          "subscriptionDetails": null,
                                          "title": "TypeError: Cannot read property 'length' of undefined",
                                          "type": "error",
                                          "userCount": 3,
                                        }
                                      }
                                      includeLink={true}
                                      orgId="orgId"
                                      projectId="projectId"
                                    >
                                      <span>
                                        <span
                                          style={
                                            Object {
                                              "marginRight": 10,
                                            }
                                          }
                                        >
                                          TypeError
                                        </span>
                                        <em>
                                          length(app/views/groupSimilar/groupSimilarView)
                                        </em>
                                        <br />
                                      </span>
                                    </EventOrGroupTitle>
                                  </a>
                                </Link>
                              </h3>
                              <div
                                className="event-message truncate"
                              >
                                <span
                                  className="message"
                                >
                                  Cannot read property 'length' of undefined
                                </span>
                              </div>
                            </div>
                          </EventOrGroupHeader>
                          <EventOrGroupExtraDetails
                            annotations={Array []}
                            assignedTo={null}
                            count="90"
                            culprit="length(app/views/groupSimilar/groupSimilarView)"
                            firstSeen="2017-07-10T18:32:43Z"
                            group={true}
                            groupId="271"
                            hasSeen={false}
                            id="271"
                            isBookmarked={false}
                            isPublic={false}
                            isSubscribed={true}
                            lastSeen={null}
                            level="error"
                            logger="javascript"
                            metadata={
                              Object {
                                "type": "TypeError",
                                "value": "Cannot read property 'length' of undefined",
                              }
                            }
                            numComments={0}
                            orgId="orgId"
                            permalink="http://localhost:8000/sentry/internal/issues/271/"
                            project={
                              Object {
                                "name": "Internal",
                                "slug": "internal",
                              }
                            }
                            projectId="projectId"
                            shareId="312e323731"
                            shortId="INTERNAL-4G"
                            showAssignee={true}
                            showStatus={true}
                            status="resolved"
                            statusDetails={Object {}}
                            subscriptionDetails={null}
                            title="TypeError: Cannot read property 'length' of undefined"
                            type="error"
                            userCount={3}
                          >
                            <div
                              className="event-extra"
                            >
                              <ul>
                                <li>
                                  <ShortId
                                    shortId="INTERNAL-4G"
                                  >
                                    <span
                                      className="short-id"
                                      onClick={[Function]}
                                    >
                                      <AutoSelectText>
                                        <div>
                                          INTERNAL-4G
                                        </div>
                                      </AutoSelectText>
                                    </span>
                                  </ShortId>
                                </li>
                                <li>
                                  <span
                                    className="icon icon-clock"
                                  />
                                  <TimeSince
                                    date="2017-07-10T18:32:43Z"
                                    suffix="old"
                                  >
                                    <time
                                      dateTime="2017-07-10T18:32:43.000Z"
                                      title="July 10, 2017 6:32 PM UTC"
                                    >
                                      3 months old
                                    </time>
                                  </TimeSince>
                                </li>
                                <li
                                  className="event-annotation"
                                >
                                  <Link
                                    onlyActiveOnIndex={false}
                                    style={Object {}}
                                    to={
                                      Object {
                                        "pathname": "/orgId/projectId/",
                                        "query": Object {
                                          "query": "logger:javascript",
                                        },
                                      }
                                    }
                                  >
                                    <a
                                      onClick={[Function]}
                                      style={Object {}}
                                    >
                                      javascript
                                    </a>
                                  </Link>
                                </li>
                              </ul>
                            </div>
                          </EventOrGroupExtraDetails>
                        </div>
                      </div>
                    </FlowLayout>
                    <button
                      className="btn btn-default btn-xs"
                      onClick={[Function]}
                      style={
                        Object {
                          "marginRight": 2,
                        }
                      }
                    >
                      Diff
                    </button>
                  </div>
                </FlowLayout>
                <div
                  className="similar-score-columns"
                >
                  <count
                    className="similar-score-column"
                    value="90"
                  >
                    <span
                      className="similar-score-column"
                    >
                      90
                    </span>
                  </count>
                  <div
                    className="similar-score-column"
                  >
                    <Hovercard
                      body={
                        <SimilarScoreCard
                          scoreList={
                            Array [
                              Array [
                                "exception:stacktrace:pairs",
                                0.875,
                              ],
                            ]
                          }
                        />
                      }
                    >
                      <span
                        className="hovercard-container"
                        onMouseEnter={[Function]}
                        onMouseLeave={[Function]}
                      >
                        <ScoreBar
                          palette={Array []}
                          paletteClassNames={
                            Array [
                              "low",
                              "low-med",
                              "med",
                              "med-high",
                              "high",
                            ]
                          }
                          score={4}
                          vertical={true}
                        >
                          <div
                            className="score-bar vertical"
                          >
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar med-high"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                          </div>
                        </ScoreBar>
                      </span>
                    </Hovercard>
                  </div>
                  <div
                    className="similar-score-column"
                  >
                    <Hovercard
                      body={0}
                    >
                      <span
                        className="hovercard-container"
                        onMouseEnter={[Function]}
                        onMouseLeave={[Function]}
                      >
                        <ScoreBar
                          palette={Array []}
                          paletteClassNames={
                            Array [
                              "low",
                              "low-med",
                              "med",
                              "med-high",
                              "high",
                            ]
                          }
                          score={0}
                          vertical={true}
                        >
                          <div
                            className="score-bar vertical"
                          >
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                            <div
                              className="score-bar-bar empty"
                              style={
                                Object {
                                  "height": undefined,
                                  "width": undefined,
                                }
                              }
                            />
                          </div>
                        </ScoreBar>
                      </span>
                    </Hovercard>
                  </div>
                </div>
              </div>
            </SpreadLayout>
          </SimilarIssueItem>
          <div
            className="similar-items-footer"
          >
            <button
              className="btn btn-default btn-xl"
              onClick={[Function]}
            >
              Show 
              3
               issues below threshold
            </button>
          </div>
        </div>
        <pagination
          onCursor={[Function]}
        />
      </div>
    </SimilarList>
  </div>
</GroupGroupingView>
`;