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

exports[`renders configure advanced 1`] = `
<div
  className="MainLayout-root"
  data-testid="configure-container"
>
  <form
    autoComplete="off"
    id="configure-form"
    onSubmit={[Function]}
  >
    <div
      className="Box-root Flex-root Layout-root Flex-flex"
    >
      <div
        className="SideBar-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <nav
            className="Navigation-root"
          >
            <ul
              className="Navigation-ul"
            >
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/general"
                  onClick={[Function]}
                >
                  General
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/organization"
                  onClick={[Function]}
                >
                  Organization
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/moderation"
                  onClick={[Function]}
                >
                  Moderation
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/wordList"
                  onClick={[Function]}
                >
                  Banned and Suspect Words
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/auth"
                  onClick={[Function]}
                >
                  Authentication
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/email"
                  onClick={[Function]}
                >
                  Email
                </a>
              </li>
              <li>
                <a
                  className="Link-link"
                  href="/admin/configure/slack"
                  onClick={[Function]}
                >
                  Slack
                </a>
              </li>
              <li>
                <a
                  className="Link-link Link-linkActive"
                  href="/admin/configure/advanced"
                  onClick={[Function]}
                >
                  Advanced
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <button
            className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
            data-color="alt"
            data-testid="configure-sideBar-saveChanges"
            data-variant="regular"
            disabled={true}
            onBlur={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="submit"
          >
            Save Changes
          </button>
        </div>
      </div>
      <div
        className="Main-root"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
          data-testid="configure-advancedContainer"
        >
          <fieldset
            className="FieldSet-root Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <legend
                  className="Header-root"
                >
                  Embed code
                </legend>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <fieldset
                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  Copy and paste the code below into your CMS to embed Coral comment streams in
each of your site’s stories.
                </p>
                <textarea
                  className="Textarea-root EmbedCode-textArea"
                  readOnly={true}
                  rows={24}
                  value="<div id=\\"coral_thread\\"></div>
<script type=\\"text/javascript\\">
  (function() {
      var d = document, s = d.createElement('script');
      s.src = 'http://localhost/assets/js/embed.js';
      s.async = false;
      s.defer = true;
      s.onload = function() {
          Coral.createStreamEmbed({
              id: \\"coral_thread\\",
              autoRender: true,
              rootURL: 'http://localhost',
              // Uncomment these lines and replace with the ID of the
              // story's ID and URL from your CMS to provide the
              // tightest integration. Refer to our documentation at
              // https://docs.coralproject.net for all the configuration
              // options.
              // storyID: '\${storyID}',
              // storyURL: '\${storyURL}',
          });
      };
      (d.head || d.body).appendChild(s);
  })();
</script>"
                />
                <div
                  className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
                >
                  <button
                    className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
                    data-color="mono"
                    data-variant="flat"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <span>
                      Copy
                    </span>
                  </button>
                </div>
              </fieldset>
            </div>
          </fieldset>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <label
                  className="Header-root"
                  htmlFor="configure-advanced-customCSSURL"
                >
                  Custom CSS
                </label>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    URL of a CSS stylesheet that will override default Embed Stream styles.
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-advanced-customCSSURL"
                        name="customCSSURL"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <label
                  className="Header-root"
                  htmlFor="configure-advanced-liveUpdates"
                >
                  Comment stream live updates
                </label>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    When enabled, there will be real-time loading and updating of comments.
When disabled, users will have to refresh the page to see new comments.
                  </p>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="live.enabled-true"
                        name="live.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="live.enabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="live.enabled-false"
                        name="live.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="live.enabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <label
                  className="Header-root"
                  htmlFor="configure-advanced-allowedDomains"
                >
                  Permitted domains
                </label>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <p
                    className="FormFieldDescription-root"
                  >
                    Domains where your Coral instance is allowed to be embedded
including the scheme (ex. http://localhost:3000, https://staging.domain.com,
https://domain.com).
                  </p>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-advanced-allowedDomains"
                        name="allowedDomains"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value="http://localhost:8080"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root ConfigBox-root"
          >
            <div
              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
            >
              <div>
                <h2
                  className="Header-root"
                >
                  Story creation
                </h2>
              </div>
              <div />
            </div>
            <div
              className="ConfigBox-content"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
              >
                <p
                  className="FormFieldDescription-root"
                >
                  Advanced settings for how stories are created within Coral.
                </p>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                    >
                      Lazy story creation
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      Enable stories to be automatically created when they are published from your CMS.
                    </p>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="stories.disableLazy-true"
                        name="stories.disableLazy"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="stories.disableLazy-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="stories.disableLazy-false"
                        name="stories.disableLazy"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="stories.disableLazy-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                    >
                      Story scraping
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      Enable story metadata to be automatically scraped when they are published from your CMS.
                    </p>
                  </div>
                  <div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={true}
                        className="RadioButton-input"
                        disabled={false}
                        id="stories.scraping.enabled-true"
                        name="stories.scraping.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="true"
                      />
                      <label
                        className="RadioButton-label RadioButton-labelChecked"
                        htmlFor="stories.scraping.enabled-true"
                      >
                        <span>
                          On
                        </span>
                      </label>
                    </div>
                    <div
                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                    >
                      <input
                        checked={false}
                        className="RadioButton-input"
                        disabled={false}
                        id="stories.scraping.enabled-false"
                        name="stories.scraping.enabled"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        type="radio"
                        value="false"
                      />
                      <label
                        className="RadioButton-label"
                        htmlFor="stories.scraping.enabled-false"
                      >
                        <span>
                          Off
                        </span>
                      </label>
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                      htmlFor="configure-advanced-stories-proxy-url"
                    >
                      Scraper proxy url
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      When specified, allows scraping requests to use the provided
proxy. All requests will then be passed through the appropriote
proxy as parsed by the 
                      <a
                        className="ExternalLink-root"
                        href="https://www.npmjs.com/package/proxy-agent"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        npm proxy-agent
                      </a>
                       package.
                    </p>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-advanced-stories-proxy-url"
                        name="stories.scraping.proxyURL"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                >
                  <div
                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                  >
                    <label
                      className="Label-root"
                      htmlFor="configure-advanced-stories-custom-user-agent"
                    >
                      Custom Scraper User Agent Header
                    </label>
                    <p
                      className="HelperText-root"
                    >
                      When specified, overrides the 
                      <code>
                        User-Agent
                      </code>
                       header sent with each
scrape request.
                    </p>
                  </div>
                  <div
                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                  >
                    <div
                      className="TextField-root TextField-fullWidth"
                    >
                      <input
                        autoCapitalize="off"
                        autoComplete="off"
                        autoCorrect="off"
                        className="TextField-input TextField-colorRegular"
                        disabled={false}
                        id="configure-advanced-stories-custom-user-agent"
                        name="stories.scraping.customUserAgent"
                        onBlur={[Function]}
                        onChange={[Function]}
                        onFocus={[Function]}
                        placeholder=""
                        spellCheck={false}
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;
