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

exports[`Render should render component 1`] = `
<div>
  <div
    className="page-action-bar"
  >
    <h3
      className="page-sub-heading"
    >
      External group sync
    </h3>
    <Component
      content="Sync LDAP or OAuth groups with your Grafana teams."
      placement="auto"
    >
      <div
        className="page-sub-heading-icon"
      >
        <i
          className="gicon gicon-question gicon--has-hover"
        />
      </div>
    </Component>
    <div
      className="page-action-bar__spacer"
    />
  </div>
  <Component
    in={false}
  >
    <div
      className="cta-form"
    >
      <button
        className="cta-form__close btn btn-transparent"
        onClick={[Function]}
      >
        <i
          className="fa fa-close"
        />
      </button>
      <h5>
        Add External Group
      </h5>
      <form
        className="gf-form-inline"
        onSubmit={[Function]}
      >
        <div
          className="gf-form"
        >
          <Input
            className="gf-form-input width-30"
            onChange={[Function]}
            placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
            type="text"
            value=""
          />
        </div>
        <div
          className="gf-form"
        >
          <button
            className="btn btn-primary gf-form-btn"
            disabled={true}
            type="submit"
          >
            Add group
          </button>
        </div>
      </form>
    </div>
  </Component>
  <EmptyListCTA
    buttonIcon="gicon gicon-team"
    buttonTitle="Add Group"
    onClick={[Function]}
    proTip="Sync LDAP or OAuth groups with your Grafana teams."
    proTipLink="http://docs.grafana.org/auth/enhanced_ldap/"
    proTipLinkTitle="Learn more"
    proTipTarget="_blank"
    title="There are no external groups to sync with"
  />
</div>
`;

exports[`Render should render groups table 1`] = `
<div>
  <div
    className="page-action-bar"
  >
    <h3
      className="page-sub-heading"
    >
      External group sync
    </h3>
    <Component
      content="Sync LDAP or OAuth groups with your Grafana teams."
      placement="auto"
    >
      <div
        className="page-sub-heading-icon"
      >
        <i
          className="gicon gicon-question gicon--has-hover"
        />
      </div>
    </Component>
    <div
      className="page-action-bar__spacer"
    />
    <button
      className="btn btn-primary pull-right"
      onClick={[Function]}
    >
      <i
        className="fa fa-plus"
      />
       Add group
    </button>
  </div>
  <Component
    in={false}
  >
    <div
      className="cta-form"
    >
      <button
        className="cta-form__close btn btn-transparent"
        onClick={[Function]}
      >
        <i
          className="fa fa-close"
        />
      </button>
      <h5>
        Add External Group
      </h5>
      <form
        className="gf-form-inline"
        onSubmit={[Function]}
      >
        <div
          className="gf-form"
        >
          <Input
            className="gf-form-input width-30"
            onChange={[Function]}
            placeholder="cn=ops,ou=groups,dc=grafana,dc=org"
            type="text"
            value=""
          />
        </div>
        <div
          className="gf-form"
        >
          <button
            className="btn btn-primary gf-form-btn"
            disabled={true}
            type="submit"
          >
            Add group
          </button>
        </div>
      </form>
    </div>
  </Component>
  <div
    className="admin-list-table"
  >
    <table
      className="filter-table filter-table--hover form-inline"
    >
      <thead>
        <tr>
          <th>
            External Group ID
          </th>
          <th
            style={
              Object {
                "width": "1%",
              }
            }
          />
        </tr>
      </thead>
      <tbody>
        <tr
          key="group-1"
        >
          <td>
            group-1
          </td>
          <td
            style={
              Object {
                "width": "1%",
              }
            }
          >
            <a
              className="btn btn-danger btn-small"
              onClick={[Function]}
            >
              <i
                className="fa fa-remove"
              />
            </a>
          </td>
        </tr>
        <tr
          key="group-2"
        >
          <td>
            group-2
          </td>
          <td
            style={
              Object {
                "width": "1%",
              }
            }
          >
            <a
              className="btn btn-danger btn-small"
              onClick={[Function]}
            >
              <i
                className="fa fa-remove"
              />
            </a>
          </td>
        </tr>
        <tr
          key="group-3"
        >
          <td>
            group-3
          </td>
          <td
            style={
              Object {
                "width": "1%",
              }
            }
          >
            <a
              className="btn btn-danger btn-small"
              onClick={[Function]}
            >
              <i
                className="fa fa-remove"
              />
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
`;
