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

exports[`<Main /> spec click clear button 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec click run button, and response causes an error 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec click run button, and response is not ok 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec click run button, and response is ok 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec click run button, response fills null and missing values 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec click translation button, and response is ok 1`] = `
<div
  aria-hidden="true"
  data-aria-hidden="true"
>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
                  />
                </svg>
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`<Main /> spec renders the component 1`] = `
<div>
  <div>
    <div
      class="sql-console-query-container"
    >
      <div
        class="query-language-switch"
      >
        <div
          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
        >
          <div
            class="euiFlexItem"
          >
            <h1
              class="euiTitle euiTitle--large"
            >
              Query Workbench
            </h1>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <fieldset
              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
            >
              <legend
                class="euiScreenReaderOnly"
              >
                query-language-swtich
              </legend>
              <div
                class="euiButtonGroup__buttons"
              >
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="SQL"
                      title="SQL"
                    >
                      <input
                        checked=""
                        class="euiScreenReaderOnly"
                        data-test-subj="SQL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      SQL
                    </span>
                  </span>
                </label>
                <label
                  class="euiButtonGroupButton euiButtonGroupButton--text"
                  for="some_html_id"
                >
                  <span
                    class="euiButtonContent euiButton__content"
                  >
                    <span
                      class="euiButton__text euiButtonGroupButton__textShift"
                      data-text="PPL"
                      title="PPL"
                    >
                      <input
                        class="euiScreenReaderOnly"
                        data-test-subj="PPL"
                        id="some_html_id"
                        name="some_html_id"
                        type="radio"
                        value=""
                      />
                      PPL
                    </span>
                  </span>
                </label>
              </div>
            </fieldset>
          </div>
          <div
            class="euiFlexItem euiFlexItem--flexGrowZero"
          >
            <a
              class="euiButton euiButton--primary"
              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
              rel="noopener noreferrer"
              target="_blank"
            >
              <span
                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
              >
                <svg
                  aria-hidden="true"
                  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                  focusable="false"
                  height="16"
                  role="img"
                  viewBox="0 0 16 16"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                />
                <span
                  class="euiButton__text"
                >
                  SQL documentation
                </span>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div>
        <div
          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
        >
          <div
            class="euiText euiText--medium sql-query-panel-header"
          >
            <h3>
              Query editor
            </h3>
          </div>
          <div
            class="euiSpacer euiSpacer--s"
          />
          <div
            class="euiCodeEditorWrapper"
            data-test-subj="codeEditorContainer"
            style="width: 100%; height: 7rem;"
          >
            <button
              class="euiCodeEditorKeyboardHint"
              data-test-subj="codeEditorHint"
              id="some_html_id"
            >
              <p
                class="euiText"
              >
                Press Enter to start editing.
              </p>
              <p
                class="euiText"
              >
                When you're done, press Escape to stop editing.
              </p>
            </button>
            <div
              class=" ace_editor ace-sql-console"
              id="some_html_id"
              style="width: 100%; height: 7rem; font-size: 14px;"
            >
              <textarea
                aria-label="Code Editor"
                autocapitalize="off"
                autocorrect="off"
                class="ace_text-input"
                spellcheck="false"
                style="opacity: 0;"
                tabindex="-1"
                wrap="off"
              />
              <div
                aria-hidden="true"
                class="ace_gutter"
              >
                <div
                  class="ace_layer ace_gutter-layer ace_folding-enabled"
                />
                <div
                  class="ace_gutter-active-line"
                />
              </div>
              <div
                class="ace_scroller"
              >
                <div
                  class="ace_content"
                >
                  <div
                    class="ace_layer ace_print-margin-layer"
                  >
                    <div
                      class="ace_print-margin"
                      style="left: 4px; visibility: hidden;"
                    />
                  </div>
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_text-layer"
                    style="padding: 0px 4px;"
                  />
                  <div
                    class="ace_layer ace_marker-layer"
                  />
                  <div
                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
                  >
                    <div
                      class="ace_cursor"
                    />
                  </div>
                </div>
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-v"
                style="display: none; width: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="width: 20px;"
                />
              </div>
              <div
                class="ace_scrollbar ace_scrollbar-h"
                style="display: none; height: 20px;"
              >
                <div
                  class="ace_scrollbar-inner"
                  style="height: 20px;"
                />
              </div>
              <div
                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
              >
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                />
                <div
                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                >
                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                </div>
              </div>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--l"
          />
          <div
            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
          >
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Run
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Clear
                  </span>
                </span>
              </button>
            </div>
            <div
              class="euiFlexItem euiFlexItem--flexGrowZero"
            >
              <button
                class="euiButton euiButton--primary sql-editor-button"
                type="button"
              >
                <span
                  class="euiButtonContent euiButton__content"
                >
                  <span
                    class="euiButton__text"
                  >
                    Explain
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="euiSpacer euiSpacer--l"
      />
      <div
        class="sql-console-query-result"
      >
        <div
          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
        >
          <div
            style="padding: 20px 20px 0px 20px;"
          >
            <div
              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
            >
              <div
                class="euiFlexItem"
              >
                <div
                  class="euiText euiText--medium query-result-panel-header"
                >
                  <h3>
                    Results
                  </h3>
                </div>
              </div>
              <div
                class="euiFlexItem euiFlexItem--flexGrowZero"
              />
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
          <div
            class="euiText euiText--medium"
            style="color: rgb(63, 63, 63);"
          >
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <h4>
                No result
              </h4>
            </div>
            <div
              class="euiTextAlign euiTextAlign--center"
            >
              <p>
                Enter a query in the query editor above to see results.
              </p>
            </div>
          </div>
          <div
            class="euiSpacer euiSpacer--xxl"
          />
          <div
            class="euiSpacer euiSpacer--xl"
          />
        </div>
      </div>
    </div>
  </div>
</div>
`;