From aa6684cc4d118eaeacade631c3766daa0741e73c Mon Sep 17 00:00:00 2001
From: "Daniel (dB.) Doubrovkine" <dblock@dblock.org>
Date: Fri, 6 Jan 2023 13:12:52 -0500
Subject: [PATCH 01/40] Updated MAINTAINERS.md to match recommended
 opensearch-project format. (#18)

Signed-off-by: dblock <dblock@amazon.com>

Signed-off-by: dblock <dblock@amazon.com>
---
 MAINTAINERS.md | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/MAINTAINERS.md b/MAINTAINERS.md
index 744411de..073b4e20 100644
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@@ -1,14 +1,16 @@
-# OpenSearch dashboards-query-workbench Maintainers
+## Overview
 
-## Maintainers
+This document contains a list of maintainers in this repo. See [opensearch-project/.github/RESPONSIBILITIES.md](https://github.com/opensearch-project/.github/blob/main/RESPONSIBILITIES.md#maintainer-responsibilities) that explains what the role of maintainer means, what maintainers do in this and other repos, and how they should be doing it. If you're interested in contributing, and becoming a maintainer, see [CONTRIBUTING](CONTRIBUTING.md).
 
-| Maintainer | GitHub ID | Affiliation |
-| --------------- | --------- | ----------- |
-| Anirudha (Ani) Jadhav | [anirudha](https://github.com/anirudha) | Amazon |
-| Peng Huo | [penghuo](https://github.com/penghuo) | Amazon |
-| Chen Dai | [dai-chen](https://github.com/dai-chen) | Amazon |
-| Chloe Zhang | [chloe-zh](https://github.com/chloe-zh) | Amazon |
-| Nick Knize | [nknize](https://github.com/nknize) | Amazon |
-| Charlotte Henkle | [CEHENKLE](https://github.com/CEHENKLE) | Amazon |
-| Max Ksyunz |  [MaxKsyunz](https://github.com/MaxKsyunz) | BitQuill |
-| Yury Fridlyand | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill |
\ No newline at end of file
+## Current Maintainers
+
+| Maintainer            | GitHub ID                                           | Affiliation |
+| --------------------- | --------------------------------------------------- | ----------- |
+| Anirudha (Ani) Jadhav | [anirudha](https://github.com/anirudha)             | Amazon      |
+| Peng Huo              | [penghuo](https://github.com/penghuo)               | Amazon      |
+| Chen Dai              | [dai-chen](https://github.com/dai-chen)             | Amazon      |
+| Chloe Zhang           | [chloe-zh](https://github.com/chloe-zh)             | Amazon      |
+| Nick Knize            | [nknize](https://github.com/nknize)                 | Amazon      |
+| Charlotte Henkle      | [CEHENKLE](https://github.com/CEHENKLE)             | Amazon      |
+| Max Ksyunz            | [MaxKsyunz](https://github.com/MaxKsyunz)           | BitQuill    |
+| Yury Fridlyand        | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill    |
\ No newline at end of file

From 61924317453b55df1e923141a14f49e4a29bb52f Mon Sep 17 00:00:00 2001
From: "mend-for-github-com[bot]"
 <50673670+mend-for-github-com[bot]@users.noreply.github.com>
Date: Tue, 10 Jan 2023 11:35:50 -0800
Subject: [PATCH 02/40] Add .whitesource configuration file (#1)

Co-authored-by: mend-for-github-com[bot] <50673670+mend-for-github-com[bot]@users.noreply.github.com>
---
 .whitesource | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 .whitesource

diff --git a/.whitesource b/.whitesource
new file mode 100644
index 00000000..e34827bf
--- /dev/null
+++ b/.whitesource
@@ -0,0 +1,22 @@
+{
+  "scanSettings": {
+    "configMode": "AUTO",
+    "configExternalURL": "",
+    "projectToken": "",
+    "baseBranches": []
+  },
+  "checkRunSettings": {
+    "vulnerableCheckRunConclusionLevel": "failure",
+    "displayMode": "diff",
+    "useMendCheckNames": true
+  },
+  "issueSettings": {
+    "minSeverityLevel": "LOW",
+    "issueType": "DEPENDENCY"
+  },
+  "remediateSettings": {
+    "workflowRules": {
+      "enabled": true
+    }
+  }
+}
\ No newline at end of file

From 1f94be657755640ca0e5a40b2ceba877f3d30424 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 10 Jan 2023 11:51:40 -0800
Subject: [PATCH 03/40] Bump json5 from 2.2.1 to 2.2.3 (#20)

Bumps [json5](https://github.com/json5/json5) from 2.2.1 to 2.2.3.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v2.2.1...v2.2.3)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 026ec307..897339f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1681,9 +1681,9 @@ json-stringify-safe@~5.0.1:
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
 json5@2.x:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
-  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"

From bc2439c81f566f2d73ed1fdc3e92d57950cebd07 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 10 Jan 2023 14:57:59 -0800
Subject: [PATCH 04/40] adding release notes (#28) (#30)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
(cherry picked from commit 5dde647b49a678d9561a53ce2b2ae6b2c18fea29)

Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
---
 ...arch-query-workbench.release-notes-2.5.0.0.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.5.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.5.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.5.0.0.md
new file mode 100644
index 00000000..40ff9877
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.5.0.0.md
@@ -0,0 +1,16 @@
+## 2022-01-10 Version 2.5.0.0
+
+Compatible with OpenSearch and OpenSearch Dashboards Version 2.5.0
+
+### Infrastructure
+
+- Add .whitesource configuration file ([#1](https://github.com/opensearch-project/dashboards-query-workbench/pull/17))
+
+### Maintenance
+
+- Merge 2.x changes into dashboards-query-workbench ([#17](https://github.com/opensearch-project/dashboards-query-workbench/pull/17))
+- Updated MAINTAINERS.md format. ([#18](https://github.com/opensearch-project/dashboards-query-workbench/pull/18))
+
+### Bug Fixes
+
+- Bump json5 from 2.2.1 to 2.2.3 ([#20](https://github.com/opensearch-project/dashboards-query-workbench/pull/20))

From 68d5009c6fb81d8140336f036246448ff40458e4 Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Wed, 11 Jan 2023 13:23:07 -0800
Subject: [PATCH 05/40] Rename plugin_helpers to plugin-helpers (#31)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 672ccff2..482040d0 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
     "test:server": "plugin-helpers test:server",
     "test:browser": "plugin-helpers test:browser",
     "test:jest": "../../node_modules/.bin/jest --config test/jest.config.js",
-    "build": "yarn plugin_helpers build",
-    "plugin_helpers": "node ../../scripts/plugin_helpers"
+    "build": "yarn plugin-helpers build",
+    "plugin-helpers": "node ../../scripts/plugin_helpers"
   },
   "dependencies": {
     "brace": "0.11.1",

From 3557e745f8fb0bf94a59bd9f525325f112e23dbb Mon Sep 17 00:00:00 2001
From: Rupal Mahajan <maharup@amazon.com>
Date: Wed, 8 Feb 2023 09:22:13 -0800
Subject: [PATCH 06/40] Add resolution for ansi-regex (#38)

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
---
 package.json |  1 +
 yarn.lock    | 17 +----------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 482040d0..313ea8fb 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "**/@types/jest": "^24.0.9",
     "**/@types/react-dom": "^16.0.5",
     "**/@types/react-router-dom": "^4.3.1",
+    "ansi-regex": "^5.0.1",
     "eslint-utils": "^2.0.0",
     "json-schema": "^0.4.0",
     "**/@types/react": "16.3.14"
diff --git a/yarn.lock b/yarn.lock
index 897339f8..b4c15aec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -377,22 +377,7 @@ ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
-
-ansi-regex@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
-  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
-
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
-ansi-regex@^5.0.1:
+ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==

From 62c7f4573f06669127460bb53c17116d32c68d9d Mon Sep 17 00:00:00 2001
From: Rupal Mahajan <maharup@amazon.com>
Date: Fri, 10 Feb 2023 14:47:21 -0800
Subject: [PATCH 07/40] Upgrade hapi-latest to fix CVE-2023-25166 (#39)

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
---
 package.json |  2 +-
 yarn.lock    | 35 ++++++++++++++---------------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 313ea8fb..0034fb4f 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@testing-library/user-event": "^13.1.9",
-    "@types/hapi-latest": "npm:@types/hapi@18.0.3",
+    "@types/hapi-latest": "npm:@types/hapi@18.0.7",
     "@types/react-router-dom": "^5.3.2",
     "cypress": "^5.0.0",
     "eslint": "^6.8.0",
diff --git a/yarn.lock b/yarn.lock
index b4c15aec..205e5bd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -123,10 +123,10 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@sideway/formula@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
-  integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
+"@sideway/formula@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
+  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
 
 "@sideway/pinpoint@^2.0.0":
   version "2.0.0"
@@ -155,19 +155,19 @@
   resolved "https://registry.yarnpkg.com/@types/catbox/-/catbox-10.0.7.tgz#50a0f927924ace358cc0193c6d9f1790d4219fa6"
   integrity sha512-8vjnM1eyHKwWfcbq7qb2NN4ltUgm4nVsT9QIM6IW4KqxbQbfQLbRApNTN+B3hvHvuFTHyvhJjZrBY3wNPp4tjA==
 
-"@types/hapi-latest@npm:@types/hapi@18.0.3":
-  version "18.0.3"
-  resolved "https://registry.yarnpkg.com/@types/hapi/-/hapi-18.0.3.tgz#e74c019f6a1b1c7f647fe014d3890adec9c0214a"
-  integrity sha512-UM03myDZ2UWbpqLSZqboK4L98F9r4GCcd9JOr2auhgC3iOd/69mvDggivOHhOYJKWHeCW/dECPHIB7DwQz00dw==
+"@types/hapi-latest@npm:@types/hapi@18.0.7":
+  version "18.0.7"
+  resolved "https://registry.yarnpkg.com/@types/hapi/-/hapi-18.0.7.tgz#890899a7af867cdc3e770b2a03d6e9fd61c11b9a"
+  integrity sha512-rhOtvarF2ka4NAjEURRWEwx98oDtOiaQYLkPdmsA0yXe5U6a9/YJjAI/JtE4SnWQ+vTrCKSDhVGcQngZqHrU7A==
   dependencies:
     "@types/boom" "*"
     "@types/catbox" "*"
     "@types/iron" "*"
-    "@types/joi" "*"
     "@types/mimos" "*"
     "@types/node" "*"
     "@types/podium" "*"
     "@types/shot" "*"
+    joi "^17.3.0"
 
 "@types/history@*":
   version "5.0.0"
@@ -222,13 +222,6 @@
   dependencies:
     jest-diff "^24.3.0"
 
-"@types/joi@*":
-  version "17.2.3"
-  resolved "https://registry.yarnpkg.com/@types/joi/-/joi-17.2.3.tgz#b7768ed9d84f1ebd393328b9f97c1cf3d2b94798"
-  integrity sha512-dGjs/lhrWOa+eO0HwgxCSnDm5eMGCsXuvLglMghJq32F6q5LyyNuXb41DHzrg501CKNOSSAHmfB7FDGeUnDmzw==
-  dependencies:
-    joi "*"
-
 "@types/mime-db@*":
   version "1.43.1"
   resolved "https://registry.yarnpkg.com/@types/mime-db/-/mime-db-1.43.1.tgz#c2a0522453bb9b6e84ee48b7eef765d19bcd519e"
@@ -1611,15 +1604,15 @@ jest-util@^26.1.0:
     is-ci "^2.0.0"
     micromatch "^4.0.2"
 
-joi@*:
-  version "17.6.0"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
-  integrity sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==
+joi@^17.3.0:
+  version "17.7.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-17.7.1.tgz#854fc85c7fa3cfc47c91124d30bffdbb58e06cec"
+  integrity sha512-teoLhIvWE298R6AeJywcjR4sX2hHjB3/xJX4qPjg+gTg+c0mzUDsziYlqPmLomq9gVsfaMcgPaGc7VxtD/9StA==
   dependencies:
     "@hapi/hoek" "^9.0.0"
     "@hapi/topo" "^5.0.0"
     "@sideway/address" "^4.1.3"
-    "@sideway/formula" "^3.0.0"
+    "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
 js-tokens@^4.0.0:

From 0458f9ac29692efcd61b5f7fbe890562c2a62251 Mon Sep 17 00:00:00 2001
From: "Daniel (dB.) Doubrovkine" <dblock@amazon.com>
Date: Fri, 17 Feb 2023 19:00:57 -0500
Subject: [PATCH 08/40] Created untriaged issue workflow. (#42)

Signed-off-by: dblock <dblock@amazon.com>
---
 .github/workflows/add-untriaged.yml | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 .github/workflows/add-untriaged.yml

diff --git a/.github/workflows/add-untriaged.yml b/.github/workflows/add-untriaged.yml
new file mode 100644
index 00000000..9dcc7020
--- /dev/null
+++ b/.github/workflows/add-untriaged.yml
@@ -0,0 +1,19 @@
+name: Apply 'untriaged' label during issue lifecycle
+
+on:
+  issues:
+    types: [opened, reopened, transferred]
+
+jobs:
+  apply-label:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v6
+        with:
+          script: |
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['untriaged']
+            })

From aadf48a9ed0fda4e6a9667291fa275e8e1cf1e09 Mon Sep 17 00:00:00 2001
From: Miki <amoo_miki@yahoo.com>
Date: Wed, 22 Feb 2023 10:32:43 -0800
Subject: [PATCH 09/40] Fix Node.js and Yarn installation in CI (#44)

Signed-off-by: Miki <miki@amazon.com>
---
 .../sql-workbench-test-build-workflow.yml     | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/sql-workbench-test-build-workflow.yml b/.github/workflows/sql-workbench-test-build-workflow.yml
index ed026ff4..ce8c6f73 100644
--- a/.github/workflows/sql-workbench-test-build-workflow.yml
+++ b/.github/workflows/sql-workbench-test-build-workflow.yml
@@ -32,21 +32,20 @@ jobs:
           repository: opensearch-project/OpenSearch-Dashboards
           ref: ${{ env.OPENSEARCH_DASHBOARDS_VERSION }}
           path: OpenSearch-Dashboards
-      - name: Get node and yarn versions
-        id: versions_step
-        run: |
-          echo "::set-output name=node_version::$(node -p "(require('./OpenSearch-Dashboards/package.json').engines.node).match(/[.0-9]+/)[0]")"
-          echo "::set-output name=yarn_version::$(node -p "(require('./OpenSearch-Dashboards/package.json').engines.yarn).match(/[.0-9]+/)[0]")"
-      - name: Setup node
-        uses: actions/setup-node@v1
+      - name: Setup Node
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ steps.versions_step.outputs.node_version }}
+          node-version-file: './OpenSearch-Dashboards/.nvmrc'
           registry-url: 'https://registry.npmjs.org'
-      - name: Install correct yarn version for OpenSearch Dashboards
+      - name: Install Yarn
+        # Need to use bash to avoid having a windows/linux specific step
+        shell: bash
         run: |
-          npm uninstall -g yarn
-          echo "Installing yarn ${{ steps.versions_step.outputs.yarn_version }}"
-          npm i -g yarn@${{ steps.versions_step.outputs.yarn_version }}
+          YARN_VERSION=$(node -p "require('./OpenSearch-Dashboards/package.json').engines.yarn")
+          echo "Installing yarn@$YARN_VERSION"
+          npm i -g yarn@$YARN_VERSION
+      - run: node -v
+      - run: yarn -v
       - name: Checkout workbench OpenSearch Dashboards plugin
         uses: actions/checkout@v2
         with:

From 98d8cf981da21f8fdbaa5456568eef0d2d1df9b1 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 7 Mar 2023 12:59:06 -0500
Subject: [PATCH 10/40] add release notes for 2.6 query workbench (#48) (#50)

* add release notes for 2.6 query workbench

Signed-off-by: Derek Ho <dxho@amazon.com>

* add CI item in infra

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
(cherry picked from commit 5cecd8dd45cfe16b9dd0ef6c44eb7990f71f1d58)

Co-authored-by: Derek Ho <dxho@amazon.com>
---
 ...earch-query-workbench.release-notes-2.6.0.0.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.6.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.6.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.6.0.0.md
new file mode 100644
index 00000000..b21b829c
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.6.0.0.md
@@ -0,0 +1,15 @@
+## Version 2.6.0.0
+
+Compatible with OpenSearch and OpenSearch Dashboards Version 2.6.0
+
+### Maintenance
+
+- Rename plugin_helpers to plugin-helpers ([#32](https://github.com/opensearch-project/dashboards-query-workbench/pull/32))
+- Bump version to 2.6.0 ([#37](https://github.com/opensearch-project/dashboards-query-workbench/pull/37))
+
+### Security Fixes
+
+- Upgrade hapi-latest to fix CVE-2023-25166 ([#40](https://github.com/opensearch-project/dashboards-query-workbench/pull/40))
+
+### Infrastructure
+- Fix Node.js and Yarn installation in CI ([#46](https://github.com/opensearch-project/dashboards-query-workbench/pull/46))

From d4610cfe51aebe13efbc4c936c77ed7bf09f5cb5 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 30 Mar 2023 18:58:04 -0400
Subject: [PATCH 11/40] baseline repo groups (#52)

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .github/CODEOWNERS |  2 +-
 MAINTAINERS.md     | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 7f92a3c6..c74839ac 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,2 +1,2 @@
 # This should match the owning team set up in https://github.com/orgs/opensearch-project/teams
-*   @opensearch-project/sql
\ No newline at end of file
+*   @anirudha @nknize @penghuo @ps48 @kavithacm @derek-ho @joshuali925 @zhongnansu @chloe-zh @sejli @YANG-DB @davidcui1225 @rupal-bq @CEHENKLE @mengweieric @eugenesk24 @brijos @vamsi-amazon
\ No newline at end of file
diff --git a/MAINTAINERS.md b/MAINTAINERS.md
index 073b4e20..5554db20 100644
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@@ -6,11 +6,17 @@ This document contains a list of maintainers in this repo. See [opensearch-proje
 
 | Maintainer            | GitHub ID                                           | Affiliation |
 | --------------------- | --------------------------------------------------- | ----------- |
-| Anirudha (Ani) Jadhav | [anirudha](https://github.com/anirudha)             | Amazon      |
 | Peng Huo              | [penghuo](https://github.com/penghuo)               | Amazon      |
 | Chen Dai              | [dai-chen](https://github.com/dai-chen)             | Amazon      |
-| Chloe Zhang           | [chloe-zh](https://github.com/chloe-zh)             | Amazon      |
-| Nick Knize            | [nknize](https://github.com/nknize)                 | Amazon      |
-| Charlotte Henkle      | [CEHENKLE](https://github.com/CEHENKLE)             | Amazon      |
+| Joshua Li             | [joshuali925](https://github.com/joshuali925        | Amazon      |
+| Vamsi Manohar         | [vamsi-amazon](https://github.com/vamsi-amazon      | Amazon      |
 | Max Ksyunz            | [MaxKsyunz](https://github.com/MaxKsyunz)           | BitQuill    |
-| Yury Fridlyand        | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill    |
\ No newline at end of file
+| Yury Fridlyand        | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill    |
+
+## Emeritus Maintainers
+
+| Maintainer        | GitHub ID                                               | Affiliation |
+| ----------------- | ------------------------------------------------------- | ----------- |
+| Charlotte Henkle  | [CEHENKLE](https://github.com/CEHENKLE)                 | Amazon      |
+| Anirudha Jadhav   | [anirudha](https://github.com/anirudha)                 | Amazon      |
+| Nick Knize        | [nknize](https://github.com/nknize)                     | Amazon      |
\ No newline at end of file

From b785d5b8170fb23fe95595efdea89db989e0ada2 Mon Sep 17 00:00:00 2001
From: Chen Dai <daichen@amazon.com>
Date: Mon, 17 Apr 2023 17:15:52 -0700
Subject: [PATCH 12/40] Add 2.7 release note (#57)

Signed-off-by: Chen Dai <daichen@amazon.com>
---
 .../opensearch-query-workbench.release-notes-2.7.0.0.md   | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.7.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.7.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.7.0.0.md
new file mode 100644
index 00000000..c43ac5e4
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.7.0.0.md
@@ -0,0 +1,8 @@
+## Version 2.7.0.0
+
+Compatible with OpenSearch and OpenSearch Dashboards Version 2.7.0
+
+### Maintenance
+
+- Baseline repo groups ([#52](https://github.com/opensearch-project/dashboards-query-workbench/pull/52))
+

From e8bb51ef5943fcb9a52b35dde8e22685f2be004f Mon Sep 17 00:00:00 2001
From: Rupal Mahajan <maharup@amazon.com>
Date: Wed, 26 Apr 2023 10:33:46 -0700
Subject: [PATCH 13/40] Add fix for CVE-2023-2251 (#60)

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
---
 package.json | 3 ++-
 yarn.lock    | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0034fb4f..ce39f6fd 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "ansi-regex": "^5.0.1",
     "eslint-utils": "^2.0.0",
     "json-schema": "^0.4.0",
-    "**/@types/react": "16.3.14"
+    "**/@types/react": "16.3.14",
+    "yaml": "^2.2.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 205e5bd0..4eec7158 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2852,10 +2852,10 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+yaml@^1.10.0, yaml@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
+  integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
 
 yargs-parser@20.x:
   version "20.2.9"

From f27241909373af034afc5d59a0dd409be08908c7 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 9 May 2023 17:00:01 -0400
Subject: [PATCH 14/40] update maintainers and code owners (#64)

* update maintainers and code owners

Signed-off-by: Derek Ho <dxho@amazon.com>

* add ani to codeowners

Signed-off-by: Derek Ho <dxho@amazon.com>

---------

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .github/CODEOWNERS |  2 +-
 MAINTAINERS.md     | 33 +++++++++++++++++++++++----------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index c74839ac..10b36542 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,2 +1,2 @@
 # This should match the owning team set up in https://github.com/orgs/opensearch-project/teams
-*   @anirudha @nknize @penghuo @ps48 @kavithacm @derek-ho @joshuali925 @zhongnansu @chloe-zh @sejli @YANG-DB @davidcui1225 @rupal-bq @CEHENKLE @mengweieric @eugenesk24 @brijos @vamsi-amazon
\ No newline at end of file
+*   @pjfitzgibbons @ps48 @kavithacm @derek-ho @joshuali925 @dai-chen @YANG-DB @rupal-bq @mengweieric @vamsi-amazon @swiddis @penghuo @seankao-az @MaxKsyunz @Yury-Fridlyand @anirudha
\ No newline at end of file
diff --git a/MAINTAINERS.md b/MAINTAINERS.md
index 5554db20..af8c8837 100644
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@@ -4,19 +4,32 @@ This document contains a list of maintainers in this repo. See [opensearch-proje
 
 ## Current Maintainers
 
-| Maintainer            | GitHub ID                                           | Affiliation |
-| --------------------- | --------------------------------------------------- | ----------- |
-| Peng Huo              | [penghuo](https://github.com/penghuo)               | Amazon      |
-| Chen Dai              | [dai-chen](https://github.com/dai-chen)             | Amazon      |
-| Joshua Li             | [joshuali925](https://github.com/joshuali925        | Amazon      |
-| Vamsi Manohar         | [vamsi-amazon](https://github.com/vamsi-amazon      | Amazon      |
-| Max Ksyunz            | [MaxKsyunz](https://github.com/MaxKsyunz)           | BitQuill    |
-| Yury Fridlyand        | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill    |
+| Maintainer        | GitHub ID                                           | Affiliation |
+| ----------------- | -------------------------------------------------   | ----------- |
+| Eric Wei          | [mengweieric](https://github.com/mengweieric)       | Amazon      |
+| Joshua Li         | [joshuali925](https://github.com/joshuali925)       | Amazon      |
+| Shenoy Pratik     | [ps48](https://github.com/ps48)                     | Amazon      |
+| Kavitha Mohan     | [kavithacm](https://github.com/kavithacm)           | Amazon      |
+| Rupal Mahajan     | [rupal-bq](https://github.com/rupal-bq)             | Amazon      |
+| Derek Ho          | [derek-ho](https://github.com/derek-ho)             | Amazon      |
+| Lior Perry        | [YANG-DB](https://github.com/YANG-DB)               | Amazon      |
+| Peter Fitzgibbons | [pjfitzgibbons](https://github.com/pjfitzgibbons)   | Amazon      |
+| Simeon Widdis     | [swiddis](https://github.com/swiddis)               | Amazon      |
+| Chen Dai          | [dai-chen](https://github.com/dai-chen)             | Amazon      |
+| Vamsi Manohar     | [vamsi-amazon](https://github.com/vamsi-amazon)     | Amazon      |
+| Peng Huo          | [penghuo](https://github.com/penghuo)               | Amazon      |
+| Sean Kao          | [seankao-az](https://github.com/seankao-az)         | Amazon      |
+| Max Ksyunz        | [MaxKsyunz](https://github.com/MaxKsyunz)           | BitQuill    |
+| Yury Fridlyand    | [Yury-Fridlyand](https://github.com/Yury-Fridlyand) | BitQuill    |
+| Anirudha Jadhav   | [anirudha](https://github.com/anirudha)             | Amazon      |
 
 ## Emeritus Maintainers
 
 | Maintainer        | GitHub ID                                               | Affiliation |
 | ----------------- | ------------------------------------------------------- | ----------- |
 | Charlotte Henkle  | [CEHENKLE](https://github.com/CEHENKLE)                 | Amazon      |
-| Anirudha Jadhav   | [anirudha](https://github.com/anirudha)                 | Amazon      |
-| Nick Knize        | [nknize](https://github.com/nknize)                     | Amazon      |
\ No newline at end of file
+| Nick Knize        | [nknize](https://github.com/nknize)                     | Amazon      |
+| David Cui         | [davidcui1225](https://github.com/davidcui1225)         | Amazon      |
+| Eugene Lee        | [eugenesk24](https://github.com/eugenesk24)             | Amazon      |
+| Zhongnan Su       | [zhongnansu](https://github.com/zhongnansu)             | Amazon      |
+| Chloe Zhang       | [chloe-zh](https://github.com/chloe-zh)                 | Amazon      |
\ No newline at end of file

From 13db4cb4057edef74560fedf4d26ee6330297ff1 Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Tue, 30 May 2023 12:54:27 -0700
Subject: [PATCH 15/40] Add release notes for 2.8 (#75)

* Add release notes for 2.8

Signed-off-by: Joshua Li <joshuali925@gmail.com>

* Update release notes

Signed-off-by: Joshua Li <joshuali925@gmail.com>

---------

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 ...opensearch-query-workbench.release-notes-2.8.0.0.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.8.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.8.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.8.0.0.md
new file mode 100644
index 00000000..0f7435f6
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.8.0.0.md
@@ -0,0 +1,10 @@
+## Version 2.8.0.0 Release Notes
+
+Compatible with OpenSearch and OpenSearch Dashboards 2.8.0
+
+### Bug Fixes
+* Add fix for CVE-2023-2251 ([#62](https://github.com/opensearch-project/dashboards-query-workbench/pull/62))
+* Use valid json for mock data in unit tests ([#76](https://github.com/opensearch-project/dashboards-query-workbench/pull/76))
+
+### Maintenance
+* Increment version to 2.8.0.0 ([#67](https://github.com/opensearch-project/dashboards-query-workbench/pull/67))
\ No newline at end of file

From c8016a4f5c42da8c3eb0164968abd1d9bc0fe6c1 Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Tue, 30 May 2023 13:09:47 -0700
Subject: [PATCH 16/40] Use valid json for mock data in unit tests (#76)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
---
 .gitignore             | 1 +
 package.json           | 1 +
 test/mocks/mockData.ts | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index d3fce840..7274d888 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 .cypress/screenshots
 .cypress/videos
 /target/*
+/coverage/
diff --git a/package.json b/package.json
index ce39f6fd..9c80ece2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "test:server": "plugin-helpers test:server",
     "test:browser": "plugin-helpers test:browser",
     "test:jest": "../../node_modules/.bin/jest --config test/jest.config.js",
+    "test": "yarn test:jest",
     "build": "yarn plugin-helpers build",
     "plugin-helpers": "node ../../scripts/plugin_helpers"
   },
diff --git a/test/mocks/mockData.ts b/test/mocks/mockData.ts
index 22b2eaba..1418720e 100644
--- a/test/mocks/mockData.ts
+++ b/test/mocks/mockData.ts
@@ -2331,6 +2331,6 @@ export const mockResultWithNull =
 {
   "data": {
     "ok": true,
-    "resp": "\"schema\":[{\"name\":\"name\",\"type\":\"keyword\"},{\"name\":\"city\",\"type\":\"keyword\"}],\"datarows\":[[\"Hattie\",\"Seattle\"],[\"John\"]]"
+    "resp": "{\"schema\":[{\"name\":\"name\",\"type\":\"keyword\"},{\"name\":\"city\",\"type\":\"keyword\"}],\"datarows\":[[\"Hattie\",\"Seattle\"],[\"John\"]]}"
   }
 }

From a9982a9bcfc6a3e998cca822f6e5c7412a7aeebb Mon Sep 17 00:00:00 2001
From: Yury-Fridlyand <yury.fridlyand@improving.com>
Date: Tue, 13 Jun 2023 09:21:46 -0700
Subject: [PATCH 17/40] Update default query. (#81)

Signed-off-by: Yury-Fridlyand <yury.fridlyand@improving.com>
---
 public/components/Main/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 9e096498..1b458913 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -203,7 +203,7 @@ export class Main extends React.Component<MainProps, MainState> {
     this.onChange = this.onChange.bind(this);
     this.state = {
       language: 'SQL',
-      sqlQueriesString: 'SHOW tables LIKE %;',
+      sqlQueriesString: 'SHOW tables LIKE \'%\';',
       pplQueriesString: '',
       queries: [],
       queryTranslations: [],

From 832b336d5d1c439b428149a1dc9fda9ed9b84255 Mon Sep 17 00:00:00 2001
From: Yury-Fridlyand <yury.fridlyand@improving.com>
Date: Fri, 7 Jul 2023 11:30:34 -0700
Subject: [PATCH 18/40] Update CI. (#82)

Signed-off-by: Yury-Fridlyand <yury.fridlyand@improving.com>
---
 .../sql-workbench-test-build-workflow.yml      | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/sql-workbench-test-build-workflow.yml b/.github/workflows/sql-workbench-test-build-workflow.yml
index ce8c6f73..738aa7c6 100644
--- a/.github/workflows/sql-workbench-test-build-workflow.yml
+++ b/.github/workflows/sql-workbench-test-build-workflow.yml
@@ -5,14 +5,6 @@ on:
   push:
     branches-ignore:
       - 'dependabot/**'
-    paths:
-      - '.'
-      - '.github/workflows/sql-workbench-test-build-workflow.yml'
-
-env:
-  PLUGIN_NAME: dashboards-query-workbench
-  OPENSEARCH_VERSION: 'main'
-  OPENSEARCH_PLUGIN_VERSION: 2.4.0.0
 
 jobs:
   tests:
@@ -27,10 +19,9 @@ jobs:
         if: ${{ matrix.os == 'windows-latest' }}
         run: git config --system core.longpaths true
       - name: Checkout OpenSearch Dashboards
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           repository: opensearch-project/OpenSearch-Dashboards
-          ref: ${{ env.OPENSEARCH_DASHBOARDS_VERSION }}
           path: OpenSearch-Dashboards
       - name: Setup Node
         uses: actions/setup-node@v3
@@ -47,7 +38,7 @@ jobs:
       - run: node -v
       - run: yarn -v
       - name: Checkout workbench OpenSearch Dashboards plugin
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           path: OpenSearch-Dashboards/plugins/dashboards-query-workbench
       - name: Bootstrap plugin/opensearch-dashboards
@@ -66,13 +57,14 @@ jobs:
           directory: OpenSearch-Dashboards/plugins/dashboards-query-workbench
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Build Artifact
+        if: always()
         run: |
           cd OpenSearch-Dashboards/plugins/dashboards-query-workbench
           yarn build
-          mv ./build/*.zip ./build/${{ env.PLUGIN_NAME }}-${{ env.OPENSEARCH_PLUGIN_VERSION }}.zip
+          mv ./build/*.zip ./build/dashboards-query-workbench.zip
       - name: Upload Artifact
         if: always()
-        uses: actions/upload-artifact@v1 # can't update to v3 because upload fails
+        uses: actions/upload-artifact@v3
         with:
           name: dashboards-query-workbench-${{ matrix.os }}
           path: OpenSearch-Dashboards/plugins/dashboards-query-workbench/build

From 9f935975295a27fb695146a64ac199cb124624d2 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 7 Jul 2023 11:32:14 -0700
Subject: [PATCH 19/40] Increment version to 3.0.0.0 (#66)

Signed-off-by: opensearch-ci-bot <opensearch-infra@amazon.com>
Co-authored-by: opensearch-ci-bot <opensearch-infra@amazon.com>
---
 opensearch_dashboards.json | 6 ++++--
 package.json               | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 972bedd4..8ce2b4f6 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -4,6 +4,8 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation"],
+  "requiredPlugins": [
+    "navigation"
+  ],
   "optionalPlugins": []
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 9c80ece2..52cdd83b 100644
--- a/package.json
+++ b/package.json
@@ -56,4 +56,4 @@
     "**/@types/react": "16.3.14",
     "yaml": "^2.2.2"
   }
-}
+}
\ No newline at end of file

From 1d150243b8bc4daeaa77e3905d0a586fb94087f7 Mon Sep 17 00:00:00 2001
From: Rupal Mahajan <maharup@amazon.com>
Date: Tue, 11 Jul 2023 11:00:25 -0700
Subject: [PATCH 20/40] Upgrade tough-cookie and semver (#90)

* Upgrade tough-cookie to fix CVE-2023-26136

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

* Add semver resolution to patch CVE-2022-25883

Signed-off-by: Rupal Mahajan <maharup@amazon.com>

---------

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
---
 package.json |  4 +++-
 yarn.lock    | 55 +++++++++++++++++++++++++++++++++-------------------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 52cdd83b..22c4c61e 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,8 @@
     "eslint-utils": "^2.0.0",
     "json-schema": "^0.4.0",
     "**/@types/react": "16.3.14",
-    "yaml": "^2.2.2"
+    "yaml": "^2.2.2",
+    "tough-cookie": "^4.1.3",
+    "semver": "^7.5.2"
   }
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 4eec7158..28281b11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2153,7 +2153,7 @@ progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-psl@^1.1.28:
+psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
@@ -2186,6 +2186,11 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 ramda@~0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
@@ -2231,6 +2236,11 @@ request-progress@^3.0.0:
   dependencies:
     throttleit "^1.0.0"
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -2332,23 +2342,13 @@ semver-regex@^3.1.2:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.4.tgz#13053c0d4aa11d070a2f2872b6b1e3ae1e1971b4"
   integrity sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==
 
-semver@7.x:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+semver@7.x, semver@^5.3.0, semver@^5.5.0, semver@^6.1.2, semver@^7.5.2:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^5.3.0, semver@^5.5.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@^6.1.2:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -2617,13 +2617,15 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tough-cookie@~2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
-  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+tough-cookie@^4.1.3, tough-cookie@~2.5.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
   dependencies:
-    psl "^1.1.28"
+    psl "^1.1.33"
     punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
 
 ts-jest@^26.1.0:
   version "26.5.6"
@@ -2736,6 +2738,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 universalify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
@@ -2753,6 +2760,14 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"

From 95c35e3496297ca8fc68e7caf3cbd1ba32845522 Mon Sep 17 00:00:00 2001
From: Rupal Mahajan <maharup@amazon.com>
Date: Wed, 12 Jul 2023 09:38:55 -0700
Subject: [PATCH 21/40] Add release notes for 2.9.0 (#93)

Signed-off-by: Rupal Mahajan <maharup@amazon.com>
---
 .../opensearch-query-workbench.release-notes-2.9.0.0.md  | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.9.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.9.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.9.0.0.md
new file mode 100644
index 00000000..a79f2921
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.9.0.0.md
@@ -0,0 +1,9 @@
+## Version 2.9.0.0 Release Notes
+
+Compatible with OpenSearch and OpenSearch Dashboards 2.9.0
+
+### Bug Fixes
+* Upgrade tough-cookie and semver ([#91](https://github.com/opensearch-project/dashboards-query-workbench/pull/91))
+
+### Maintenance
+* Increment version to 2.9.0.0 ([#85](https://github.com/opensearch-project/dashboards-query-workbench/pull/85))
\ No newline at end of file

From f01e5328227c913e3a7828a1598fa8beba8b20be Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 28 Jul 2023 15:14:36 -0700
Subject: [PATCH 22/40] Bump word-wrap from 1.2.3 to 1.2.4 (#99)

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 28281b11..a7ff9aff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2820,9 +2820,9 @@ which@^2.0.1:
     isexe "^2.0.0"
 
 word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+  integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wrap-ansi@^3.0.1:
   version "3.0.1"

From 37aeba7ec2e2122be80d0dcbec39697ab38668de Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 31 Jul 2023 18:28:43 -0400
Subject: [PATCH 23/40] update fail backport (#104)

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .github/workflows/backport.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/backport.yml b/.github/workflows/backport.yml
index e47d8d88..9537ddeb 100644
--- a/.github/workflows/backport.yml
+++ b/.github/workflows/backport.yml
@@ -22,7 +22,9 @@ jobs:
           installation_id: 22958780
 
       - name: Backport
-        uses: VachaShah/backport@v1.1.4
+        uses: VachaShah/backport@v2.2.0
         with:
           github_token: ${{ steps.github_app_token.outputs.token }}
-          branch_name: backport/backport-${{ github.event.number }}
+          head_template: backport/backport-<%= number %>-to-<%= base %>
+          labels_template: "<%= JSON.stringify([...labels, 'autocut']) %>"
+          failure_labels: "failed backport"

From 8583b8db1ebb125800c9b826e8b47c39ca283950 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Thu, 10 Aug 2023 13:51:20 -0700
Subject: [PATCH 24/40] Update backport CI, add PR merged condition (#111)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .github/workflows/backport.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/backport.yml b/.github/workflows/backport.yml
index 9537ddeb..6472a968 100644
--- a/.github/workflows/backport.yml
+++ b/.github/workflows/backport.yml
@@ -7,6 +7,7 @@ on:
 
 jobs:
   backport:
+    if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -26,5 +27,4 @@ jobs:
         with:
           github_token: ${{ steps.github_app_token.outputs.token }}
           head_template: backport/backport-<%= number %>-to-<%= base %>
-          labels_template: "<%= JSON.stringify([...labels, 'autocut']) %>"
-          failure_labels: "failed backport"
+          failure_labels: backport-failed

From 87f51b13f1656ecbeb0e46eeb6dbcb435fadc22b Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Tue, 5 Sep 2023 14:35:43 -0400
Subject: [PATCH 25/40] Update searchbar snapshots according to upstream
 changes (#115)

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../Main/__snapshots__/main.test.tsx.snap     | 12 +--
 .../__snapshots__/QueryResults.test.tsx.snap  | 94 +++++++++----------
 .../QueryResultsBody.test.tsx.snap            | 36 +++----
 3 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index defafbdc..6730126f 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`<Main /> spec click clear button 1`] = `
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
@@ -494,7 +494,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
@@ -878,7 +878,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
@@ -1262,7 +1262,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
@@ -1646,7 +1646,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
@@ -2033,7 +2033,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                   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"
+                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
                   />
                 </svg>
                 <span
diff --git a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
index 3b5dbbc6..cd11dc41 100644
--- a/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M13 3v4h-1V4H9V3h4zM3 3h4v1H4v3H3V3zm10 10H9v-1h3V9h1v4zM3 13V9h1v3h3v1H3zM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0114.006 16H1.994A1.995 1.995 0 010 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 00.994-.994V1.994A.995.995 0 0014.006 1H1.994A.995.995 0 001 1.994z"
+                  d="M13 3v4h-1V4H9V3h4ZM3 3h4v1H4v3H3V3Zm10 10H9v-1h3V9h1v4ZM3 13V9h1v3h3v1H3ZM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994Z"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -241,7 +241,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                     fill-rule="non-zero"
                   />
                 </svg>
@@ -316,7 +316,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                              d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
                             />
                           </svg>
                         </span>
@@ -359,7 +359,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                         fill-rule="non-zero"
                       />
                     </svg>
@@ -844,7 +844,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -1226,7 +1226,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -1608,7 +1608,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -1990,7 +1990,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -2372,7 +2372,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -2754,7 +2754,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -3136,7 +3136,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -3518,7 +3518,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -3900,7 +3900,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -4282,7 +4282,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -4674,7 +4674,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                         fill-rule="non-zero"
                       />
                     </svg>
@@ -4714,7 +4714,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                    d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
@@ -4782,7 +4782,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                    d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
@@ -4839,7 +4839,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M13 3v4h-1V4H9V3h4zM3 3h4v1H4v3H3V3zm10 10H9v-1h3V9h1v4zM3 13V9h1v3h3v1H3zM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0114.006 16H1.994A1.995 1.995 0 010 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 00.994-.994V1.994A.995.995 0 0014.006 1H1.994A.995.995 0 001 1.994z"
+                  d="M13 3v4h-1V4H9V3h4ZM3 3h4v1H4v3H3V3Zm10 10H9v-1h3V9h1v4ZM3 13V9h1v3h3v1H3ZM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994Z"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -5033,7 +5033,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                     fill-rule="non-zero"
                   />
                 </svg>
@@ -5516,7 +5516,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -5898,7 +5898,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -6280,7 +6280,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -6662,7 +6662,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -7044,7 +7044,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -7426,7 +7426,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -7808,7 +7808,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -8190,7 +8190,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -8572,7 +8572,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -8954,7 +8954,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -9346,7 +9346,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                         fill-rule="non-zero"
                       />
                     </svg>
@@ -9386,7 +9386,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                    d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
@@ -9454,7 +9454,7 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                    d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
@@ -14219,7 +14219,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M13 3v4h-1V4H9V3h4zM3 3h4v1H4v3H3V3zm10 10H9v-1h3V9h1v4zM3 13V9h1v3h3v1H3zM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0114.006 16H1.994A1.995 1.995 0 010 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 00.994-.994V1.994A.995.995 0 0014.006 1H1.994A.995.995 0 001 1.994z"
+                  d="M13 3v4h-1V4H9V3h4ZM3 3h4v1H4v3H3V3Zm10 10H9v-1h3V9h1v4ZM3 13V9h1v3h3v1H3ZM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994Z"
                   fill-rule="evenodd"
                 />
               </svg>
@@ -14413,7 +14413,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                     fill-rule="non-zero"
                   />
                 </svg>
@@ -14896,7 +14896,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -15278,7 +15278,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -15660,7 +15660,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -16042,7 +16042,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -16424,7 +16424,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -16806,7 +16806,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -17188,7 +17188,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -17570,7 +17570,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -17952,7 +17952,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -18334,7 +18334,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                                 xmlns="http://www.w3.org/2000/svg"
                               >
                                 <path
-                                  d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                   fill-rule="evenodd"
                                 />
                               </svg>
@@ -18726,7 +18726,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path
-                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                         fill-rule="non-zero"
                       />
                     </svg>
@@ -18766,7 +18766,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                    d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
@@ -18834,7 +18834,7 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                    d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
                     fill-rule="nonzero"
                   />
                 </svg>
diff --git a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
index 5fff13c6..21f700e8 100644
--- a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
@@ -5811,7 +5811,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                           fill-rule="evenodd"
                                         />
                                       </svg>
@@ -5961,7 +5961,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                           fill-rule="evenodd"
                                         />
                                       </svg>
@@ -6001,7 +6001,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                           fill-rule="evenodd"
                                         />
                                       </svg>
@@ -6041,7 +6041,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                                         xmlns="http://www.w3.org/2000/svg"
                                       >
                                         <path
-                                          d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                           fill-rule="evenodd"
                                         />
                                       </svg>
@@ -10407,7 +10407,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -10789,7 +10789,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -11171,7 +11171,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -11553,7 +11553,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -11935,7 +11935,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -12317,7 +12317,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -12699,7 +12699,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -13081,7 +13081,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -13463,7 +13463,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -13845,7 +13845,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -14227,7 +14227,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
                                 fill-rule="evenodd"
                               />
                             </svg>
@@ -14619,7 +14619,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
                       fill-rule="non-zero"
                     />
                   </svg>
@@ -14659,7 +14659,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
+                  d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
                   fill-rule="nonzero"
                 />
               </svg>
@@ -14684,7 +14684,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                  d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
                   fill-rule="nonzero"
                 />
               </svg>

From cbf43eeb56710c21b79beac16d1b6c2ebaeb8a93 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 6 Sep 2023 17:45:21 -0400
Subject: [PATCH 26/40] add release notes for 2.10.0 (#117)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 ...arch-query-workbench.release-notes-2.10.0.0.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 release-notes/opensearch-query-workbench.release-notes-2.10.0.0.md

diff --git a/release-notes/opensearch-query-workbench.release-notes-2.10.0.0.md b/release-notes/opensearch-query-workbench.release-notes-2.10.0.0.md
new file mode 100644
index 00000000..d25260b2
--- /dev/null
+++ b/release-notes/opensearch-query-workbench.release-notes-2.10.0.0.md
@@ -0,0 +1,15 @@
+## Version 2.10.0.0 Release Notes
+
+Compatible with OpenSearch and OpenSearch Dashboards 2.10.0
+
+### Bug Fixes
+
+- Bump word-wrap from 1.2.3 to 1.2.4 ([#99](https://github.com/opensearch-project/dashboards-query-workbench/pull/99))
+
+### Infrastructure
+
+- Update backport CI, add PR merged condition ([#113](https://github.com/opensearch-project/dashboards-query-workbench/pull/113))
+
+### Maintenance
+
+- Increment version to 2.10.0.0 ([#100](https://github.com/opensearch-project/dashboards-query-workbench/pull/100))

From 69a91fb0589c422d162018f9a371d93835d7cf74 Mon Sep 17 00:00:00 2001
From: Simeon Widdis <sawiddis@gmail.com>
Date: Thu, 7 Sep 2023 15:06:01 -0700
Subject: [PATCH 27/40] Upgrade cypress/request (#120)

Signed-off-by: Simeon Widdis <sawiddis@amazon.com>
---
 package.json |  5 ++--
 yarn.lock    | 66 +++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 22c4c61e..a083a0aa 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "**/@types/react": "16.3.14",
     "yaml": "^2.2.2",
     "tough-cookie": "^4.1.3",
-    "semver": "^7.5.2"
+    "semver": "^7.5.2",
+    "@cypress/request": "^3.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index a7ff9aff..651a17b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -45,10 +45,10 @@
     date-fns "^1.27.2"
     figures "^1.7.0"
 
-"@cypress/request@^2.88.5":
-  version "2.88.10"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
-  integrity sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==
+"@cypress/request@^2.88.5", "@cypress/request@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
+  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -63,9 +63,9 @@
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.5.2"
+    qs "6.10.4"
     safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
+    tough-cookie "^4.1.3"
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
@@ -532,6 +532,14 @@ cachedir@^2.3.0:
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
+call-bind@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -1247,6 +1255,16 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
+get-intrinsic@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -1328,6 +1346,16 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
+has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -1963,6 +1991,11 @@ object-assign@^4.1.0:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-inspect@^1.9.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -2176,10 +2209,12 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qs@~6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
-  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+qs@6.10.4:
+  version "6.10.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
+  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+  dependencies:
+    side-channel "^1.0.4"
 
 querystring@0.2.0:
   version "0.2.0"
@@ -2373,6 +2408,15 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
@@ -2617,7 +2661,7 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tough-cookie@^4.1.3, tough-cookie@~2.5.0:
+tough-cookie@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
   integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==

From 09c937377ccee2593447b73dd422e3fe7382ea46 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Mon, 25 Sep 2023 18:45:23 -0400
Subject: [PATCH 28/40] Add table acceleration flyout (#128)

* Add table acceleration flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* comment on hardcoded elements

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* additional comment on hardcoded

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove console logs

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* review fixes

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* revert version changes, inline type declare

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants/index.ts                     |  22 +++
 common/index.ts                               |   8 -
 common/types/index.ts                         |  41 ++++
 opensearch_dashboards.json                    |   6 +-
 .../create/caution_banner_callout.tsx         |  17 ++
 .../create/create_acceleration.tsx            | 113 +++++++++++
 .../create/create_acceleration_header.tsx     |  36 ++++
 .../selectors/index_type_selector.tsx         |  54 +++++
 .../selectors/source_selector.tsx             | 127 ++++++++++++
 .../covering_index/covering_index_builder.tsx |  91 +++++++++
 .../visual_editors/index_setting_options.tsx  | 160 +++++++++++++++
 .../visual_editors/query_builder.tsx          |  62 ++++++
 .../visual_editors/query_visual_editor.tsx    |  43 ++++
 .../skipping_index/add_fields_modal.tsx       | 102 ++++++++++
 .../skipping_index/delete_fields_modal.tsx    | 104 ++++++++++
 .../skipping_index/skipping_index_builder.tsx | 185 ++++++++++++++++++
 public/plugin.ts                              |   3 +-
 17 files changed, 1160 insertions(+), 14 deletions(-)
 create mode 100644 common/constants/index.ts
 delete mode 100644 common/index.ts
 create mode 100644 common/types/index.ts
 create mode 100644 public/components/acceleration/create/caution_banner_callout.tsx
 create mode 100644 public/components/acceleration/create/create_acceleration.tsx
 create mode 100644 public/components/acceleration/create/create_acceleration_header.tsx
 create mode 100644 public/components/acceleration/selectors/index_type_selector.tsx
 create mode 100644 public/components/acceleration/selectors/source_selector.tsx
 create mode 100644 public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
 create mode 100644 public/components/acceleration/visual_editors/index_setting_options.tsx
 create mode 100644 public/components/acceleration/visual_editors/query_builder.tsx
 create mode 100644 public/components/acceleration/visual_editors/query_visual_editor.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx

diff --git a/common/constants/index.ts b/common/constants/index.ts
new file mode 100644
index 00000000..7083779a
--- /dev/null
+++ b/common/constants/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'queryWorkbenchDashboards';
+export const PLUGIN_NAME = 'Query Workbench';
+export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
+
+export const ACCELERATION_INDEX_TYPES = [
+  { label: 'Skipping Index', value: 'skipping' },
+  { label: 'Covering Index', value: 'covering' },
+  { label: 'Materialized View', value: 'materialized' },
+];
+
+export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
+  { label: 'count', value: 'count' },
+  { label: 'sum', value: 'sum' },
+  { label: 'avg', value: 'avg' },
+  { label: 'max', value: 'max' },
+  { label: 'min', value: 'min' },
+];
diff --git a/common/index.ts b/common/index.ts
deleted file mode 100644
index a3d39b17..00000000
--- a/common/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-
-export const PLUGIN_ID = 'queryWorkbenchDashboards';
-export const PLUGIN_NAME = 'Query Workbench';
diff --git a/common/types/index.ts b/common/types/index.ts
new file mode 100644
index 00000000..f07b6cf7
--- /dev/null
+++ b/common/types/index.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface MaterializedViewColumn {
+  id: string;
+  functionName: 'count' | 'sum' | 'avg' | 'min' | 'max';
+  functionParam: string;
+  fieldAlias?: string;
+}
+
+export interface SkippingIndexRowType {
+  id: string;
+  fieldName: string;
+  dataType: string;
+  accelerationMethod: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+}
+
+export interface DataTableFieldsType {
+  id: string;
+  fieldName: string;
+  dataType: string;
+}
+
+export interface CreateAccelerationForm {
+  dataSource: string;
+  dataTable: string;
+  dataTableFields: DataTableFieldsType[];
+  accelerationIndexType: 'skipping' | 'covering' | 'materialized';
+  queryBuilderType: 'visual' | 'code';
+  skippingIndexQueryData: SkippingIndexRowType[];
+  coveringIndexQueryData: string;
+  materializedViewQueryData: string;
+  accelerationIndexName: string;
+  accelerationIndexAlias: string;
+  primaryShardsCount: number;
+  replicaShardsCount: number;
+  refreshType: 'interval' | 'auto';
+  refreshIntervalSeconds: string | undefined;
+}
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 8ce2b4f6..972bedd4 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -4,8 +4,6 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": [
-    "navigation"
-  ],
+  "requiredPlugins": ["navigation"],
   "optionalPlugins": []
-}
\ No newline at end of file
+}
diff --git a/public/components/acceleration/create/caution_banner_callout.tsx b/public/components/acceleration/create/caution_banner_callout.tsx
new file mode 100644
index 00000000..2c97f82a
--- /dev/null
+++ b/public/components/acceleration/create/caution_banner_callout.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+
+export const CautionBannerCallout = () => {
+  return (
+    <EuiCallOut title="Considerations for data indexing" color="warning" iconType="iInCircle">
+      <p>
+        Warning about not indexing personal or sensitive data, something about the cost of indexing.
+      </p>
+    </EuiCallOut>
+  );
+};
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
new file mode 100644
index 00000000..b840f848
--- /dev/null
+++ b/public/components/acceleration/create/create_acceleration.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiSpacer,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { CreateAccelerationHeader } from './create_acceleration_header';
+import { CautionBannerCallout } from './caution_banner_callout';
+import { AccelerationDataSourceSelector } from '../selectors/source_selector';
+import { IndexTypeSelector } from '../selectors/index_type_selector';
+import { CreateAccelerationForm } from '../../../../common/types/';
+import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
+import { accelerationQueryBuilder } from '../visual_editors/query_builder';
+
+export interface CreateAccelerationProps {
+  dataSource: string;
+  setIsFlyoutVisible(visible: boolean): void;
+  updateQueries: (query: string) => void;
+}
+
+export const CreateAcceleration = ({
+  dataSource,
+  setIsFlyoutVisible,
+  updateQueries,
+}: CreateAccelerationProps) => {
+  const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
+    dataSource: '',
+    dataTable: '',
+    dataTableFields: [],
+    accelerationIndexType: 'skipping',
+    queryBuilderType: 'visual',
+    skippingIndexQueryData: [],
+    coveringIndexQueryData: '',
+    materializedViewQueryData: '',
+    accelerationIndexName: '',
+    accelerationIndexAlias: '',
+    primaryShardsCount: 5,
+    replicaShardsCount: 1,
+    refreshType: 'auto',
+    refreshIntervalSeconds: undefined,
+  });
+
+  const copyToEditor = () => {
+    updateQueries(accelerationQueryBuilder(accelerationFormData));
+  };
+
+  return (
+    <>
+      <EuiFlyout
+        ownFocus
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby="flyoutTitle"
+        size="m"
+      >
+        <EuiFlyoutHeader hasBorder>
+          <CreateAccelerationHeader />
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <CautionBannerCallout />
+          <EuiSpacer size="l" />
+          <AccelerationDataSourceSelector
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+          <IndexTypeSelector
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+          <EuiSpacer size="m" />
+          <QueryVisualEditor
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                iconType="cross"
+                onClick={() => setIsFlyoutVisible(false)}
+                flush="left"
+              >
+                Close
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                onClick={() => {
+                  copyToEditor();
+                  setIsFlyoutVisible(false);
+                }}
+                fill
+              >
+                Copy Query to Editor
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </>
+  );
+};
diff --git a/public/components/acceleration/create/create_acceleration_header.tsx b/public/components/acceleration/create/create_acceleration_header.tsx
new file mode 100644
index 00000000..8c4fc968
--- /dev/null
+++ b/public/components/acceleration/create/create_acceleration_header.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
+import React from 'react';
+import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../../common/constants';
+
+export const CreateAccelerationHeader = () => {
+  return (
+    <div>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l" data-test-subj="acceleration-header">
+            <h1>Create Acceleration Index</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Create OpenSearch Indexes from external data connections for better performance.{' '}
+        <EuiLink external={true} href={OPENSEARCH_ACC_DOCUMENTATION_URL} target="_blank">
+          Learn more
+        </EuiLink>
+      </EuiText>
+    </div>
+  );
+};
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
new file mode 100644
index 00000000..33750b52
--- /dev/null
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
+import React, { useState } from 'react';
+import { ACCELERATION_INDEX_TYPES } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
+
+interface Indextypes {
+  label: string;
+  value: string;
+}
+
+interface IndexTypeSelectorProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const IndexTypeSelector = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: IndexTypeSelectorProps) => {
+  const [selectedIndexType, setSelectedIndexType] = useState<Indextypes[]>([
+    ACCELERATION_INDEX_TYPES[0],
+  ]);
+  return (
+    <>
+      <EuiText data-test-subj="index-type-selector-header">
+        <h3>Define index</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiFormRow
+        label="Index Type"
+        helpText="Select the type of index you want to create. Each index type has benefits and costs."
+      >
+        <EuiComboBox
+          placeholder="Acceleration Index Type"
+          singleSelection={{ asPlainText: true }}
+          options={ACCELERATION_INDEX_TYPES}
+          selectedOptions={selectedIndexType}
+          onChange={(indexType) => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              accelerationIndexType: indexType[0].value,
+            });
+            setSelectedIndexType(indexType);
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+};
diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
new file mode 100644
index 00000000..1a82cff6
--- /dev/null
+++ b/public/components/acceleration/selectors/source_selector.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText, htmlIdGenerator } from '@elastic/eui';
+import React, { useState } from 'react';
+import { useEffect } from 'react';
+import { CreateAccelerationForm } from '../../../../common/types';
+
+interface DataSourceTypes {
+  label: string;
+}
+
+interface AccelerationDataSourceSelectorProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const AccelerationDataSourceSelector = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: AccelerationDataSourceSelectorProps) => {
+  const [dataConnections, setDataConnections] = useState<DataSourceTypes[]>([]);
+  const [selectedDataConnection, setSelectedDataConnection] = useState<DataSourceTypes[]>([]);
+  const [tables, setTables] = useState<DataSourceTypes[]>([]);
+  const [selectedTable, setSelectedTable] = useState<DataSourceTypes[]>([]);
+
+  useEffect(() => {
+    setDataConnections([
+      // TODO: remove hardcoded responses
+      {
+        label: 'spark1',
+      },
+      {
+        label: 'spark2',
+      },
+    ]);
+  }, []);
+
+  useEffect(() => {
+    if (accelerationFormData.dataSource !== '') {
+      setTables([
+        // TODO: remove hardcoded responses
+        {
+          label: 'Table1',
+        },
+        {
+          label: 'Table2',
+        },
+      ]);
+    }
+  }, [accelerationFormData.dataSource]);
+
+  useEffect(() => {
+    if (accelerationFormData.dataTable !== '') {
+      const idPrefix = htmlIdGenerator()();
+      setAccelerationFormData({
+        ...accelerationFormData,
+        // TODO: remove hardcoded responses
+        dataTableFields: [
+          { id: `${idPrefix}1`, fieldName: 'Field 1', dataType: 'Integer' },
+          { id: `${idPrefix}2`, fieldName: 'Field 2', dataType: 'Integer' },
+          { id: `${idPrefix}3`, fieldName: 'Field 3', dataType: 'Integer' },
+          { id: `${idPrefix}4`, fieldName: 'Field 4', dataType: 'Integer' },
+          { id: `${idPrefix}5`, fieldName: 'Field 5', dataType: 'Integer' },
+          { id: `${idPrefix}6`, fieldName: 'Field 6', dataType: 'Integer' },
+          { id: `${idPrefix}7`, fieldName: 'Field 7', dataType: 'Integer' },
+          { id: `${idPrefix}8`, fieldName: 'Field 8', dataType: 'Integer' },
+          { id: `${idPrefix}9`, fieldName: 'Field 9', dataType: 'Integer' },
+          { id: `${idPrefix}10`, fieldName: 'Field 10', dataType: 'Integer' },
+          { id: `${idPrefix}11`, fieldName: 'Field 11', dataType: 'Integer' },
+        ],
+      });
+    }
+  }, [accelerationFormData.dataTable]);
+
+  return (
+    <>
+      <EuiText data-test-subj="datasource-selector-header">
+        <h3>Select data connection</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiText size="s" color="subdued">
+        Select data connection where the data you want to accelerate resides.{' '}
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiFormRow
+        label="Data connection"
+        helpText="A data connection has to be configured and active to be able to select it and index data from."
+      >
+        <EuiComboBox
+          placeholder="Data connection name"
+          singleSelection={{ asPlainText: true }}
+          options={dataConnections}
+          selectedOptions={selectedDataConnection}
+          onChange={(dataConnectionOptions) => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              dataSource: dataConnectionOptions[0].label,
+            });
+            setSelectedDataConnection(dataConnectionOptions);
+          }}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Select Table"
+        helpText="Select the Spark table that has the data you would like to index."
+      >
+        <EuiComboBox
+          placeholder="Table name"
+          singleSelection={{ asPlainText: true }}
+          options={tables}
+          selectedOptions={selectedTable}
+          onChange={(tableOptions) => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              dataTable: tableOptions[0].label,
+            });
+            setSelectedTable(tableOptions);
+          }}
+        />
+      </EuiFormRow>
+      <EuiSpacer size="xxl" />
+    </>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
new file mode 100644
index 00000000..1e980650
--- /dev/null
+++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiComboBox,
+  EuiExpression,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import _ from 'lodash';
+
+interface CoveringIndexBuilderProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const CoveringIndexBuilder = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: CoveringIndexBuilderProps) => {
+  const [isPopOverOpen, setIsPopOverOpen] = useState(false);
+  const [columnsValue, setColumnsValue] = useState('(add columns here)');
+  const [selectedOptions, setSelected] = useState([]);
+
+  const onChange = (selectedOptions: any[]) => {
+    let expresseionValue = '(add columns here)';
+    if (selectedOptions.length > 0) {
+      expresseionValue =
+        '(' +
+        _.reduce(
+          selectedOptions,
+          function (columns, n, index) {
+            const columnValue = columns + `${n.label}`;
+            if (index !== selectedOptions.length - 1) return `${columnValue}, `;
+            else return columnValue;
+          },
+          ''
+        ) +
+        ')';
+    }
+    setColumnsValue(expresseionValue);
+    setSelected(selectedOptions);
+  };
+
+  return (
+    <>
+      <EuiText data-test-subj="covering-index-builder">
+        <h3>Covering index definition</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiExpression
+        description="CREATE INDEX"
+        value={accelerationFormData.accelerationIndexName}
+      />
+      <EuiExpression description="ON" value={accelerationFormData.dataTable} />
+      <EuiPopover
+        id="popover1"
+        button={
+          <EuiExpression
+            description=""
+            value={columnsValue}
+            isActive={isPopOverOpen}
+            onClick={() => setIsPopOverOpen(true)}
+          />
+        }
+        isOpen={isPopOverOpen}
+        closePopover={() => setIsPopOverOpen(false)}
+        panelPaddingSize="s"
+        anchorPosition="downLeft"
+      >
+        <>
+          <EuiPopoverTitle paddingSize="l">Columns</EuiPopoverTitle>
+          <EuiComboBox
+            placeholder="Select one or more options"
+            options={accelerationFormData.dataTableFields.map((x) => {
+              return { label: x.fieldName };
+            })}
+            selectedOptions={selectedOptions}
+            onChange={onChange}
+          />
+        </>
+      </EuiPopover>
+    </>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/index_setting_options.tsx b/public/components/acceleration/visual_editors/index_setting_options.tsx
new file mode 100644
index 00000000..e895c862
--- /dev/null
+++ b/public/components/acceleration/visual_editors/index_setting_options.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, ChangeEvent } from 'react';
+import { CreateAccelerationForm } from '../../../../common/types';
+import {
+  EuiFieldNumber,
+  EuiFieldText,
+  EuiFormRow,
+  EuiRadioGroup,
+  htmlIdGenerator,
+} from '@elastic/eui';
+
+const idPrefix = htmlIdGenerator()();
+
+interface IndexSettingOptionsProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const IndexSettingOptions = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: IndexSettingOptionsProps) => {
+  const refreshOptions = [
+    {
+      id: `${idPrefix}0`,
+      label: 'Auto Refresh',
+    },
+    {
+      id: `${idPrefix}1`,
+      label: 'Refresh by interval',
+    },
+  ];
+  const [indexName, setIndexName] = useState('');
+  const [indexAlias, setIndexAlias] = useState('');
+  const [primaryShards, setPrimaryShards] = useState(5);
+  const [replicaCount, setReplicaCount] = useState(1);
+  const [refreshTypeSelected, setRefreshTypeSelected] = useState(`${idPrefix}0`);
+  const [refreshIntervalSeconds, setRefreshIntervalSeconds] = useState('1');
+
+  const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
+    setIndexName(e.target.value);
+  };
+
+  const onChangeindexAlias = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({ ...accelerationFormData, accelerationIndexAlias: e.target.value });
+    setIndexAlias(e.target.value);
+  };
+
+  const onChangePrimaryShards = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({ ...accelerationFormData, primaryShardsCount: +e.target.value });
+    setPrimaryShards(+e.target.value);
+  };
+
+  const onChangeReplicaCount = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({ ...accelerationFormData, replicaShardsCount: +e.target.value });
+    setReplicaCount(+e.target.value);
+  };
+
+  const onChangeRefreshType = (optionId: React.SetStateAction<string>) => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      refreshType: optionId === `${idPrefix}0` ? 'auto' : 'interval',
+    });
+    setRefreshTypeSelected(optionId);
+  };
+
+  const onChangeRefreshIntervalSeconds = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      refreshIntervalSeconds: e.target.value + 's',
+    });
+    setRefreshIntervalSeconds(e.target.value);
+  };
+
+  return (
+    <>
+      <EuiFormRow
+        label="Index name"
+        helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, > are not allowed. Skipping Index names are pre-generated and cannot be changed.'
+      >
+        <EuiFieldText
+          placeholder="Enter Index Name"
+          value={indexName}
+          onChange={onChangeIndexName}
+          aria-label="Enter Index Name"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Index alias"
+        helpText="Allow this index to be referenced by existing aliases or specify a new alias."
+      >
+        <EuiFieldText
+          placeholder="Enter Index alias - Optional"
+          value={indexAlias}
+          onChange={(e) => onChangeindexAlias(e)}
+          aria-label="Enter Index alias"
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Number of primary shards"
+        helpText="Specify the number of primary shards for the index. Default is 5. 
+        The number of primary shards cannot be changed after the index is created."
+      >
+        <EuiFieldNumber
+          placeholder="Number of primary shards"
+          value={primaryShards}
+          onChange={(e) => onChangePrimaryShards(e)}
+          aria-label="Number of primary shards"
+          min={1}
+          max={100}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Number of replicas"
+        helpText="Specify the number of replicas each primary shard should have. Default is 1."
+      >
+        <EuiFieldNumber
+          placeholder="Number of replicas"
+          value={replicaCount}
+          onChange={onChangeReplicaCount}
+          aria-label="Number of replicas"
+          min={0}
+          max={100}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Refresh type"
+        helpText="Indicate the refresh method required to update the data in acceleration index."
+      >
+        <EuiRadioGroup
+          options={refreshOptions}
+          idSelected={refreshTypeSelected}
+          onChange={onChangeRefreshType}
+          name="refresh type radio group"
+        />
+      </EuiFormRow>
+
+      {refreshTypeSelected === `${idPrefix}1` && (
+        <EuiFormRow
+          label="Refresh interval"
+          helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is 1 second."
+        >
+          <EuiFieldNumber
+            placeholder="Refresh interval"
+            value={refreshIntervalSeconds}
+            onChange={onChangeRefreshIntervalSeconds}
+            aria-label="Refresh interval"
+            append={'second(s)'}
+            min={1}
+          />
+        </EuiFormRow>
+      )}
+    </>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
new file mode 100644
index 00000000..c4e5b47f
--- /dev/null
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../common/types';
+
+const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[]) => {
+  return _.reduce(
+    skippingIndexQueryData,
+    function (columns, n, index) {
+      const columnValue = columns + `   ${n.fieldName} ${n.accelerationMethod}`;
+      if (index !== skippingIndexQueryData.length - 1) return `${columnValue}, \n`;
+      else return `${columnValue} \n`;
+    },
+    ''
+  );
+};
+
+const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
+  /*
+   * Skipping Index Example
+   *
+   * CREATE SKIPPING INDEX ON table_name
+   * FOR COLUMNS (
+   *    field1 VALUE_SET,
+   *    field2 PARTITION,
+   *    field3 MIN_MAX,
+   * )
+   */
+  let codeQuery = 'CREATE SKIPPING INDEX ON ' + accelerationformData.dataTable;
+  codeQuery = codeQuery + '\n FOR COLUMNS ( \n';
+  codeQuery = codeQuery + buildSkippingIndexColumns(accelerationformData.skippingIndexQueryData);
+  codeQuery = codeQuery + ')';
+  return codeQuery;
+};
+
+const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
+  return '';
+};
+
+const materializedQueryViewBuilder = (accelerationformData: CreateAccelerationForm) => {
+  return '';
+};
+
+export const accelerationQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
+  switch (accelerationformData.accelerationIndexType) {
+    case 'skipping': {
+      return skippingIndexQueryBuilder(accelerationformData);
+    }
+    case 'covering': {
+      return coveringIndexQueryBuilder(accelerationformData);
+    }
+    case 'materialized': {
+      return materializedQueryViewBuilder(accelerationformData);
+    }
+    default: {
+      return '';
+    }
+  }
+};
diff --git a/public/components/acceleration/visual_editors/query_visual_editor.tsx b/public/components/acceleration/visual_editors/query_visual_editor.tsx
new file mode 100644
index 00000000..d8f933f8
--- /dev/null
+++ b/public/components/acceleration/visual_editors/query_visual_editor.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiSpacer } from '@elastic/eui';
+import { CreateAccelerationForm } from '../../../../common/types';
+import { IndexSettingOptions } from './index_setting_options';
+import { SkippingIndexBuilder } from './skipping_index/skipping_index_builder';
+import { CoveringIndexBuilder } from './covering_index/covering_index_builder';
+
+interface QueryVisualEditorProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const QueryVisualEditor = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: QueryVisualEditorProps) => {
+  return (
+    <>
+      <IndexSettingOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+      <EuiSpacer size="l" />
+      {accelerationFormData.accelerationIndexType === 'skipping' && (
+        <SkippingIndexBuilder
+          accelerationFormData={accelerationFormData}
+          setAccelerationFormData={setAccelerationFormData}
+        />
+      )}
+      {accelerationFormData.accelerationIndexType === 'covering' && (
+        <CoveringIndexBuilder
+          accelerationFormData={accelerationFormData}
+          setAccelerationFormData={setAccelerationFormData}
+        />
+      )}
+    </>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
new file mode 100644
index 00000000..92e7c498
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButton,
+  EuiInMemoryTable,
+  EuiTableFieldDataColumnType,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { CreateAccelerationForm, DataTableFieldsType } from '../../../../../common/types';
+import _ from 'lodash';
+
+interface AddFieldsModalProps {
+  setIsAddModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const AddFieldsModal = ({
+  setIsAddModalVisible,
+  accelerationFormData,
+  setAccelerationFormData,
+}: AddFieldsModalProps) => {
+  const [selectedFields, setSelectedFields] = useState([]);
+
+  const tableColumns: Array<EuiTableFieldDataColumnType<DataTableFieldsType>> = [
+    {
+      field: 'fieldName',
+      name: 'Field name',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'dataType',
+      name: 'Datatype',
+      sortable: true,
+      truncateText: true,
+    },
+  ];
+
+  const pagination = {
+    initialPageSize: 20,
+    pageSizeOptions: [10, 20, 50],
+  };
+
+  return (
+    <EuiModal onClose={() => setIsAddModalVisible(false)}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h1>Add fields</h1>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiInMemoryTable
+          items={_.differenceBy(
+            accelerationFormData.dataTableFields,
+            accelerationFormData.skippingIndexQueryData,
+            'id'
+          )}
+          itemId="id"
+          columns={tableColumns}
+          search={true}
+          pagination={pagination}
+          sorting={true}
+          isSelectable={true}
+          selection={{
+            onSelectionChange: (items) => setSelectedFields(items),
+          }}
+        />
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiButton>
+        <EuiButton
+          onClick={() => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              skippingIndexQueryData: [
+                ...accelerationFormData.skippingIndexQueryData,
+                ...selectedFields.map((x) => {
+                  return { ...x, accelerationMethod: 'PARTITION' };
+                }),
+              ],
+            });
+            setIsAddModalVisible(false);
+          }}
+          fill
+        >
+          Add
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
new file mode 100644
index 00000000..58a6fa79
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiTableFieldDataColumnType,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiInMemoryTable,
+  EuiModalFooter,
+  EuiButton,
+} from '@elastic/eui';
+import _ from 'lodash';
+import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../../common/types';
+
+interface AddFieldsModalProps {
+  setIsDeleteModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const DeleteFieldsModal = ({
+  setIsDeleteModalVisible,
+  accelerationFormData,
+  setAccelerationFormData,
+}: AddFieldsModalProps) => {
+  const [selectedFields, setSelectedFields] = useState([]);
+
+  const tableColumns: Array<EuiTableFieldDataColumnType<SkippingIndexRowType>> = [
+    {
+      field: 'fieldName',
+      name: 'Field name',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'dataType',
+      name: 'Datatype',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'accelerationMethod',
+      name: 'Acceleration method',
+      sortable: true,
+      truncateText: true,
+    },
+  ];
+
+  const pagination = {
+    initialPageSize: 20,
+    pageSizeOptions: [10, 20, 50],
+  };
+
+  return (
+    <EuiModal onClose={() => setIsDeleteModalVisible(false)}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h1>Bulk delete</h1>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiInMemoryTable
+          items={accelerationFormData.skippingIndexQueryData}
+          itemId="id"
+          columns={tableColumns}
+          search={true}
+          pagination={pagination}
+          sorting={true}
+          isSelectable={true}
+          selection={{
+            onSelectionChange: (items) => setSelectedFields(items),
+          }}
+        />
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButton onClick={() => setIsDeleteModalVisible(false)}>Cancel</EuiButton>
+        <EuiButton
+          onClick={() => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              skippingIndexQueryData: _.differenceBy(
+                accelerationFormData.skippingIndexQueryData,
+                selectedFields,
+                'id'
+              ),
+            });
+            setIsDeleteModalVisible(false);
+          }}
+          color="danger"
+          fill
+        >
+          Delete
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
new file mode 100644
index 00000000..0c22baf2
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
@@ -0,0 +1,185 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  EuiBasicTable,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+  EuiButtonIcon,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+import _ from 'lodash';
+import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../../common/types';
+import { AddFieldsModal } from './add_fields_modal';
+import { DeleteFieldsModal } from './delete_fields_modal';
+
+interface SkippingIndexBuilderProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const SkippingIndexBuilder = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: SkippingIndexBuilderProps) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
+  const [totalItemCount, setTotalItemCount] = useState(0);
+
+  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+
+  const accelerationMethods = [
+    { value: 'PARTITION', text: 'Partition' },
+    { value: 'VALUE_SET', text: 'Value Set' },
+    { value: 'MIN_MAX', text: 'Min Max' },
+  ];
+
+  let modal;
+
+  if (isAddModalVisible)
+    modal = (
+      <AddFieldsModal
+        setIsAddModalVisible={setIsAddModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+
+  if (isDeleteModalVisible)
+    modal = (
+      <DeleteFieldsModal
+        setIsDeleteModalVisible={setIsDeleteModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+
+  const onTableChange = (page: { index: number; size: number }) => {
+    setPageIndex(page.index);
+    setPageSize(page.size);
+  };
+
+  const onChangeAccelerationMethod = (
+    e: { target: { value: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX' } },
+    updateRow: SkippingIndexRowType
+  ) => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      skippingIndexQueryData: _.map(accelerationFormData.skippingIndexQueryData, (row) =>
+        row.id === updateRow.id ? { ...row, accelerationMethod: e.target.value } : row
+      ),
+    });
+  };
+
+  const columns = [
+    {
+      field: 'fieldName',
+      name: 'Field name',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'dataType',
+      name: 'Datatype',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      name: 'Acceleration method',
+      render: (item: SkippingIndexRowType) => (
+        <EuiSelect
+          id="selectDocExample"
+          options={accelerationMethods}
+          value={item.accelerationMethod}
+          onChange={(e) => onChangeAccelerationMethod(e, item)}
+          aria-label="Use aria labels when no actual label is in use"
+        />
+      ),
+    },
+    {
+      name: 'Delete',
+      render: (item: SkippingIndexRowType) => {
+        return (
+          <EuiButtonIcon
+            onClick={() => {
+              setAccelerationFormData({
+                ...accelerationFormData,
+                skippingIndexQueryData: _.filter(
+                  accelerationFormData.skippingIndexQueryData,
+                  (o) => item.id !== o.id
+                ),
+              });
+            }}
+            iconType="trash"
+            color="danger"
+          />
+        );
+      },
+    },
+  ];
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount,
+    pageSizeOptions: [10, 20, 50],
+  };
+
+  useEffect(() => {
+    if (accelerationFormData.dataTableFields.length > 0) {
+      const tableRows: SkippingIndexRowType[] = [
+        {
+          ...accelerationFormData.dataTableFields[0],
+          accelerationMethod: 'PARTITION',
+        },
+      ];
+      setAccelerationFormData({ ...accelerationFormData, skippingIndexQueryData: tableRows });
+    } else {
+      setAccelerationFormData({ ...accelerationFormData, skippingIndexQueryData: [] });
+    }
+  }, [accelerationFormData.dataTableFields]);
+
+  useEffect(() => {
+    setTotalItemCount(accelerationFormData.skippingIndexQueryData.length);
+  }, [accelerationFormData.skippingIndexQueryData]);
+
+  return (
+    <>
+      <EuiText data-test-subj="skipping-index-builder">
+        <h3>Skipping Index Builder</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiBasicTable
+        itemID="id"
+        items={accelerationFormData.skippingIndexQueryData.slice(
+          pageSize * pageIndex,
+          pageSize * (pageIndex + 1)
+        )}
+        columns={columns}
+        pagination={pagination}
+        onChange={({ page }) => onTableChange(page)}
+        hasActions={true}
+      />
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
+        <EuiFlexItem grow={false}>
+          <EuiButton fill onClick={() => setIsAddModalVisible(true)}>
+            Add fields
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={() => setIsDeleteModalVisible(true)} color="danger">
+            Bulk delete
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {modal}
+    </>
+  );
+};
diff --git a/public/plugin.ts b/public/plugin.ts
index 11a082df..10836ae1 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
 import { WorkbenchPluginSetup, WorkbenchPluginStart, AppPluginStartDependencies } from './types';
-import { PLUGIN_NAME } from '../common';
+import { PLUGIN_NAME } from '../common/constants';
 
 export class WorkbenchPlugin implements Plugin<WorkbenchPluginSetup, WorkbenchPluginStart> {
   public setup(core: CoreSetup): WorkbenchPluginSetup {

From 77967beb0fcf7d024a1add63039f93bcc044d3a5 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Fri, 29 Sep 2023 12:18:46 -0400
Subject: [PATCH 29/40] Increment version to 3.0.0.0 (#121)

Signed-off-by: opensearch-ci-bot <opensearch-infra@amazon.com>
Co-authored-by: opensearch-ci-bot <opensearch-infra@amazon.com>
---
 opensearch_dashboards.json | 6 ++++--
 package.json               | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
index 972bedd4..8ce2b4f6 100644
--- a/opensearch_dashboards.json
+++ b/opensearch_dashboards.json
@@ -4,6 +4,8 @@
   "opensearchDashboardsVersion": "3.0.0",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation"],
+  "requiredPlugins": [
+    "navigation"
+  ],
   "optionalPlugins": []
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a083a0aa..d57ac78b 100644
--- a/package.json
+++ b/package.json
@@ -59,4 +59,4 @@
     "semver": "^7.5.2",
     "@cypress/request": "^3.0.0"
   }
-}
+}
\ No newline at end of file

From 5fcf9a292257d0595e6782b433008ba7d0614fd0 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Fri, 29 Sep 2023 15:37:51 -0700
Subject: [PATCH 30/40] Add materialized view visual builder and query builders
 (#129)

* add materialized view visual builder and query builders

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* organize header and PR comments

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants/index.ts                     |  35 +++-
 common/types/index.ts                         |  34 +++-
 .../create/create_acceleration.tsx            |  50 +++--
 .../create/create_acceleration_header.tsx     |   6 +-
 .../components/acceleration/create/utils.tsx  |  15 ++
 .../selectors/define_index_options.tsx        | 119 +++++++++++
 .../selectors/index_setting_options.tsx       | 188 +++++++++++++++++
 .../selectors/index_type_selector.tsx         |  35 ++--
 .../selectors/source_selector.tsx             | 112 ++++++----
 .../covering_index/covering_index_builder.tsx | 104 +++++-----
 .../visual_editors/index_setting_options.tsx  | 160 ---------------
 .../materialized_view/add_column_popover.tsx  | 143 +++++++++++++
 .../materialized_view/column_expression.tsx   | 180 ++++++++++++++++
 .../group_by_tumble_expression.tsx            | 117 +++++++++++
 .../materialized_view_builder.tsx             | 114 +++++++++++
 .../visual_editors/query_builder.tsx          | 192 +++++++++++++++---
 .../visual_editors/query_visual_editor.tsx    |  16 +-
 .../skipping_index/add_fields_modal.tsx       |  10 +-
 .../skipping_index/delete_fields_modal.tsx    |  12 +-
 .../skipping_index/skipping_index_builder.tsx |  10 +-
 20 files changed, 1313 insertions(+), 339 deletions(-)
 create mode 100644 public/components/acceleration/create/utils.tsx
 create mode 100644 public/components/acceleration/selectors/define_index_options.tsx
 create mode 100644 public/components/acceleration/selectors/index_setting_options.tsx
 delete mode 100644 public/components/acceleration/visual_editors/index_setting_options.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 7083779a..3ca8dd41 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -6,6 +6,7 @@
 export const PLUGIN_ID = 'queryWorkbenchDashboards';
 export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
+export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
@@ -14,9 +15,33 @@ export const ACCELERATION_INDEX_TYPES = [
 ];
 
 export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
-  { label: 'count', value: 'count' },
-  { label: 'sum', value: 'sum' },
-  { label: 'avg', value: 'avg' },
-  { label: 'max', value: 'max' },
-  { label: 'min', value: 'min' },
+  { label: 'count' },
+  { label: 'sum' },
+  { label: 'avg' },
+  { label: 'max' },
+  { label: 'min' },
 ];
+
+export const ACCELERATION_TIME_INTERVAL = [
+  { text: 'millisecond(s)', value: 'millisecond' },
+  { text: 'second(s)', value: 'second' },
+  { text: 'hour(s)', value: 'hour' },
+  { text: 'day(s)', value: 'day' },
+  { text: 'week(s)', value: 'week' },
+];
+
+export const ACCELERATION_ADD_FIELDS_TEXT = '(add fields here)';
+
+export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices have a naming format of pattern: \`prefix_<index name>_suffix\`. They share a common prefix structure, which is \`flint_<data source name>_<database name>_<table name>_\`. Additionally, they may have a suffix that varies based on the index type. 
+##### Skipping Index
+- For 'Skipping' indices, a fixed index name 'skipping' is used, and this name cannot be modified by the user. The suffix added to this type is \`_index\`.
+  - An example of a 'Skipping' index name would be: \`flint_mydatasource_mydb_mytable_skipping_index\`.
+##### Covering Index
+- 'Covering' indices allow users to specify their index name. The suffix added to this type is \`_index\`.
+  - For instance, a 'Covering' index name could be: \`flint_mydatasource_mydb_mytable_myindexname_index\`.
+##### Materialized View Index
+- 'Materialized View' indices also enable users to define their index name, but they do not have a suffix.
+  - An example of a 'Materialized View' index name might look like: \`flint_mydatasource_mydb_mytable_myindexname\`.
+##### Note:
+- All user given index names must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed.  
+  `;
diff --git a/common/types/index.ts b/common/types/index.ts
index f07b6cf7..ed1783a9 100644
--- a/common/types/index.ts
+++ b/common/types/index.ts
@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export type AggregationFunctionType = 'count' | 'sum' | 'avg' | 'max' | 'min';
+
 export interface MaterializedViewColumn {
   id: string;
-  functionName: 'count' | 'sum' | 'avg' | 'min' | 'max';
+  functionName: AggregationFunctionType;
   functionParam: string;
   fieldAlias?: string;
 }
@@ -23,19 +25,37 @@ export interface DataTableFieldsType {
   dataType: string;
 }
 
+export interface RefreshIntervalType {
+  refreshWindow: number;
+  refreshInterval: string;
+}
+
+export type AccelerationIndexType = 'skipping' | 'covering' | 'materialized';
+
+export interface GroupByTumbleType {
+  timeField: string;
+  tumbleWindow: number;
+  tumbleInterval: string;
+}
+
+export interface materializedViewQueryType {
+  columnsValues: MaterializedViewColumn[];
+  groupByTumbleValue: GroupByTumbleType;
+}
+
 export interface CreateAccelerationForm {
   dataSource: string;
+  database: string;
   dataTable: string;
   dataTableFields: DataTableFieldsType[];
-  accelerationIndexType: 'skipping' | 'covering' | 'materialized';
-  queryBuilderType: 'visual' | 'code';
+  accelerationIndexType: AccelerationIndexType;
   skippingIndexQueryData: SkippingIndexRowType[];
-  coveringIndexQueryData: string;
-  materializedViewQueryData: string;
+  coveringIndexQueryData: string[];
+  materializedViewQueryData: materializedViewQueryType;
   accelerationIndexName: string;
-  accelerationIndexAlias: string;
   primaryShardsCount: number;
   replicaShardsCount: number;
   refreshType: 'interval' | 'auto';
-  refreshIntervalSeconds: string | undefined;
+  checkpointLocation: string | undefined;
+  refreshIntervalOptions: RefreshIntervalType | undefined;
 }
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
index b840f848..e726adf0 100644
--- a/public/components/acceleration/create/create_acceleration.tsx
+++ b/public/components/acceleration/create/create_acceleration.tsx
@@ -4,24 +4,26 @@
  */
 
 import {
-  EuiSpacer,
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiFlyoutFooter,
   EuiButton,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { CreateAccelerationHeader } from './create_acceleration_header';
-import { CautionBannerCallout } from './caution_banner_callout';
-import { AccelerationDataSourceSelector } from '../selectors/source_selector';
-import { IndexTypeSelector } from '../selectors/index_type_selector';
+import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../common/types/';
-import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
+import { DefineIndexOptions } from '../selectors/define_index_options';
+import { IndexSettingOptions } from '../selectors/index_setting_options';
+import { AccelerationDataSourceSelector } from '../selectors/source_selector';
 import { accelerationQueryBuilder } from '../visual_editors/query_builder';
+import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
+import { CautionBannerCallout } from './caution_banner_callout';
+import { CreateAccelerationHeader } from './create_acceleration_header';
 
 export interface CreateAccelerationProps {
   dataSource: string;
@@ -37,18 +39,28 @@ export const CreateAcceleration = ({
   const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
     dataSource: '',
     dataTable: '',
+    database: '',
     dataTableFields: [],
     accelerationIndexType: 'skipping',
-    queryBuilderType: 'visual',
     skippingIndexQueryData: [],
-    coveringIndexQueryData: '',
-    materializedViewQueryData: '',
+    coveringIndexQueryData: [],
+    materializedViewQueryData: {
+      columnsValues: [],
+      groupByTumbleValue: {
+        timeField: '',
+        tumbleWindow: 0,
+        tumbleInterval: '',
+      },
+    },
     accelerationIndexName: '',
-    accelerationIndexAlias: '',
     primaryShardsCount: 5,
     replicaShardsCount: 1,
     refreshType: 'auto',
-    refreshIntervalSeconds: undefined,
+    checkpointLocation: undefined,
+    refreshIntervalOptions: {
+      refreshWindow: 1,
+      refreshInterval: ACCELERATION_TIME_INTERVAL[1].value,
+    },
   });
 
   const copyToEditor = () => {
@@ -73,7 +85,13 @@ export const CreateAcceleration = ({
             accelerationFormData={accelerationFormData}
             setAccelerationFormData={setAccelerationFormData}
           />
-          <IndexTypeSelector
+          <EuiSpacer size="xxl" />
+          <IndexSettingOptions
+            accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
+          />
+          <EuiSpacer size="xxl" />
+          <DefineIndexOptions
             accelerationFormData={accelerationFormData}
             setAccelerationFormData={setAccelerationFormData}
           />
diff --git a/public/components/acceleration/create/create_acceleration_header.tsx b/public/components/acceleration/create/create_acceleration_header.tsx
index 8c4fc968..d21f87d6 100644
--- a/public/components/acceleration/create/create_acceleration_header.tsx
+++ b/public/components/acceleration/create/create_acceleration_header.tsx
@@ -4,12 +4,12 @@
  */
 
 import {
+  EuiLink,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiTitle,
   EuiSpacer,
   EuiText,
-  EuiLink,
+  EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
 import { OPENSEARCH_ACC_DOCUMENTATION_URL } from '../../../../common/constants';
@@ -20,7 +20,7 @@ export const CreateAccelerationHeader = () => {
       <EuiPageHeader>
         <EuiPageHeaderSection>
           <EuiTitle size="l" data-test-subj="acceleration-header">
-            <h1>Create Acceleration Index</h1>
+            <h1>Accelerate data</h1>
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
diff --git a/public/components/acceleration/create/utils.tsx b/public/components/acceleration/create/utils.tsx
new file mode 100644
index 00000000..798a94ae
--- /dev/null
+++ b/public/components/acceleration/create/utils.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ACCELERATION_INDEX_NAME_REGEX } from '../../../../common/constants';
+
+export const pluralizeTime = (timeWindow: number) => {
+  return timeWindow > 1 ? 's' : '';
+};
+
+export const validateIndexName = (value: string) => {
+  // Check if the value does not begin with underscores or hyphens and all characters are lower case
+  return ACCELERATION_INDEX_NAME_REGEX.test(value);
+};
diff --git a/public/components/acceleration/selectors/define_index_options.tsx b/public/components/acceleration/selectors/define_index_options.tsx
new file mode 100644
index 00000000..e43f7258
--- /dev/null
+++ b/public/components/acceleration/selectors/define_index_options.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIconTip,
+  EuiLink,
+  EuiMarkdownFormat,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { ChangeEvent, useState } from 'react';
+import { ACCELERATION_INDEX_NAME_INFO } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
+import { validateIndexName } from '../create/utils';
+
+interface DefineIndexOptionsProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const DefineIndexOptions = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: DefineIndexOptionsProps) => {
+  const [indexName, setIndexName] = useState('');
+  const [modalComponent, setModalComponent] = useState(<></>);
+
+  const modalValue = (
+    <EuiModal maxWidth={850} onClose={() => setModalComponent(<></>)}>
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          <h1>Acceleration index naming</h1>
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiMarkdownFormat>{ACCELERATION_INDEX_NAME_INFO}</EuiMarkdownFormat>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalBody>
+      <EuiModalFooter>
+        <EuiButton onClick={() => setModalComponent(<></>)} fill>
+          Close
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+
+  const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
+    setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
+    setIndexName(e.target.value);
+  };
+
+  const getPreprend = () => {
+    const dataSource =
+      accelerationFormData.dataSource !== ''
+        ? accelerationFormData.dataSource
+        : '{Datasource Name}';
+    const database =
+      accelerationFormData.database !== '' ? accelerationFormData.database : '{Database Name}';
+    const dataTable =
+      accelerationFormData.dataTable !== '' ? accelerationFormData.dataTable : '{Table Name}';
+    const prependValue = `flint_${dataSource}_${database}_${dataTable}_`;
+    return [
+      prependValue,
+      <EuiIconTip type="iInCircle" color="subdued" content={prependValue} position="top" />,
+    ];
+  };
+
+  const getAppend = () => {
+    const appendValue =
+      accelerationFormData.accelerationIndexType === 'materialized' ? '' : '_index';
+    return appendValue;
+  };
+
+  return (
+    <>
+      <EuiText data-test-subj="define-index-header">
+        <h3>Index settings</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiFormRow
+        label="Index name"
+        helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed. 
+        Prefix and suffix are added to the name of generated OpenSearch index.'
+        labelAppend={
+          <EuiText size="xs">
+            <EuiLink onClick={() => setModalComponent(modalValue)}>Help</EuiLink>
+          </EuiText>
+        }
+      >
+        <EuiFieldText
+          placeholder="Enter index name"
+          value={accelerationFormData.accelerationIndexType === 'skipping' ? 'skipping' : indexName}
+          onChange={onChangeIndexName}
+          aria-label="Enter Index Name"
+          prepend={getPreprend()}
+          append={getAppend()}
+          disabled={accelerationFormData.accelerationIndexType === 'skipping'}
+          isInvalid={validateIndexName(indexName)}
+        />
+      </EuiFormRow>
+      {modalComponent}
+    </>
+  );
+};
diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx
new file mode 100644
index 00000000..02ec6a2a
--- /dev/null
+++ b/public/components/acceleration/selectors/index_setting_options.tsx
@@ -0,0 +1,188 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFieldNumber,
+  EuiFieldText,
+  EuiFormRow,
+  EuiRadioGroup,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { ChangeEvent, useState } from 'react';
+import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
+import { IndexTypeSelector } from './index_type_selector';
+
+interface IndexSettingOptionsProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const IndexSettingOptions = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: IndexSettingOptionsProps) => {
+  const autoRefreshId = 'refresh-option-1';
+  const intervalRefreshId = 'refresh-option-2';
+  const refreshOptions = [
+    {
+      id: autoRefreshId,
+      label: 'Auto Refresh',
+    },
+    {
+      id: intervalRefreshId,
+      label: 'Refresh by interval',
+    },
+  ];
+
+  const [primaryShards, setPrimaryShards] = useState(5);
+  const [replicaCount, setReplicaCount] = useState(1);
+  const [refreshTypeSelected, setRefreshTypeSelected] = useState(autoRefreshId);
+  const [refreshWindow, setRefreshWindow] = useState(1);
+  const [refreshInterval, setRefreshInterval] = useState(ACCELERATION_TIME_INTERVAL[1].value);
+  const [checkpoint, setCheckpoint] = useState('');
+
+  const onChangePrimaryShards = (e: ChangeEvent<HTMLInputElement>) => {
+    const countPrimaryShards = +e.target.value;
+    setAccelerationFormData({ ...accelerationFormData, primaryShardsCount: countPrimaryShards });
+    setPrimaryShards(countPrimaryShards);
+  };
+
+  const onChangeReplicaCount = (e: ChangeEvent<HTMLInputElement>) => {
+    const replicaCount = +e.target.value;
+    setAccelerationFormData({ ...accelerationFormData, replicaShardsCount: replicaCount });
+    setReplicaCount(replicaCount);
+  };
+
+  const onChangeRefreshType = (optionId: React.SetStateAction<string>) => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      refreshType: optionId === autoRefreshId ? 'auto' : 'interval',
+    });
+    setRefreshTypeSelected(optionId);
+  };
+
+  const onChangeRefreshWindow = (e: ChangeEvent<HTMLInputElement>) => {
+    const windowCount = +e.target.value;
+    setAccelerationFormData({
+      ...accelerationFormData,
+      refreshIntervalOptions: {
+        ...accelerationFormData.refreshIntervalOptions,
+        refreshWindow: windowCount,
+      },
+    });
+    setRefreshWindow(windowCount);
+  };
+
+  const onChangeRefreshInterval = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const refreshIntervalValue = e.target.value;
+    setAccelerationFormData({
+      ...accelerationFormData,
+      refreshIntervalOptions: {
+        ...accelerationFormData.refreshIntervalOptions,
+        refreshInterval: refreshIntervalValue,
+      },
+    });
+    setRefreshInterval(refreshIntervalValue);
+  };
+
+  const onChangeCheckpoint = (e: ChangeEvent<HTMLInputElement>) => {
+    const checkpointLocation = e.target.value;
+    setAccelerationFormData({ ...accelerationFormData, checkpointLocation: checkpointLocation });
+    setCheckpoint(checkpointLocation);
+  };
+
+  return (
+    <>
+      <EuiText data-test-subj="index-settings-header">
+        <h3>Index settings</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <IndexTypeSelector
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+      <EuiFormRow
+        label="Number of primary shards"
+        helpText="Specify the number of primary shards for the index. Default is 5. 
+        The number of primary shards cannot be changed after the index is created."
+      >
+        <EuiFieldNumber
+          placeholder="Number of primary shards"
+          value={primaryShards}
+          onChange={onChangePrimaryShards}
+          aria-label="Number of primary shards"
+          min={1}
+          max={100}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Number of replicas"
+        helpText="Specify the number of replicas each primary shard should have. Default is 1."
+      >
+        <EuiFieldNumber
+          placeholder="Number of replicas"
+          value={replicaCount}
+          onChange={onChangeReplicaCount}
+          aria-label="Number of replicas"
+          min={0}
+          max={100}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Refresh type"
+        helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes."
+      >
+        <EuiRadioGroup
+          options={refreshOptions}
+          idSelected={refreshTypeSelected}
+          onChange={onChangeRefreshType}
+          name="refresh type radio group"
+        />
+      </EuiFormRow>
+      {refreshTypeSelected === intervalRefreshId && (
+        <EuiFormRow
+          label="Refresh interval"
+          helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search"
+        >
+          <EuiFieldNumber
+            placeholder="Refresh interval"
+            value={refreshWindow}
+            onChange={onChangeRefreshWindow}
+            aria-label="Refresh interval"
+            min={1}
+            append={
+              <EuiSelect
+                value={refreshInterval}
+                onChange={onChangeRefreshInterval}
+                options={ACCELERATION_TIME_INTERVAL}
+              />
+            }
+          />
+        </EuiFormRow>
+      )}
+      <EuiFormRow
+        label={
+          accelerationFormData.accelerationIndexType === 'materialized'
+            ? 'Checkpoint location'
+            : 'Checkpoint location - optional'
+        }
+        helpText="The HDFS compatible file system location path for incremental refresh job checkpoint."
+      >
+        <EuiFieldText
+          placeholder="s3://checkpoint/location"
+          value={checkpoint}
+          onChange={onChangeCheckpoint}
+          aria-label="Use aria labels when no actual label is in use"
+          isInvalid={
+            accelerationFormData.accelerationIndexType === 'materialized' && checkpoint === ''
+          }
+        />
+      </EuiFormRow>
+    </>
+  );
+};
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 33750b52..fe822322 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -3,15 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
 import React, { useState } from 'react';
-import { ACCELERATION_INDEX_TYPES } from '../../../../common/constants';
-import { CreateAccelerationForm } from '../../../../common/types';
-
-interface Indextypes {
-  label: string;
-  value: string;
-}
+import {
+  ACCELERATION_INDEX_TYPES,
+  ACC_INDEX_TYPE_DOCUMENTATION_URL,
+} from '../../../../common/constants';
+import { AccelerationIndexType, CreateAccelerationForm } from '../../../../common/types';
 
 interface IndexTypeSelectorProps {
   accelerationFormData: CreateAccelerationForm;
@@ -22,31 +20,36 @@ export const IndexTypeSelector = ({
   accelerationFormData,
   setAccelerationFormData,
 }: IndexTypeSelectorProps) => {
-  const [selectedIndexType, setSelectedIndexType] = useState<Indextypes[]>([
+  const [selectedIndexType, setSelectedIndexType] = useState<EuiComboBoxOptionOption<string>[]>([
     ACCELERATION_INDEX_TYPES[0],
   ]);
   return (
     <>
-      <EuiText data-test-subj="index-type-selector-header">
-        <h3>Define index</h3>
-      </EuiText>
-      <EuiSpacer size="s" />
       <EuiFormRow
-        label="Index Type"
+        label="Index type"
         helpText="Select the type of index you want to create. Each index type has benefits and costs."
+        labelAppend={
+          <EuiText size="xs">
+            <EuiLink href={ACC_INDEX_TYPE_DOCUMENTATION_URL} target="_blank">
+              Help
+            </EuiLink>
+          </EuiText>
+        }
       >
         <EuiComboBox
-          placeholder="Acceleration Index Type"
+          placeholder="Select an index type"
           singleSelection={{ asPlainText: true }}
           options={ACCELERATION_INDEX_TYPES}
           selectedOptions={selectedIndexType}
           onChange={(indexType) => {
             setAccelerationFormData({
               ...accelerationFormData,
-              accelerationIndexType: indexType[0].value,
+              accelerationIndexType: indexType[0].value as AccelerationIndexType,
             });
             setSelectedIndexType(indexType);
           }}
+          isInvalid={selectedIndexType.length === 0}
+          isClearable={false}
         />
       </EuiFormRow>
     </>
diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
index 1a82cff6..02ffc251 100644
--- a/public/components/acceleration/selectors/source_selector.tsx
+++ b/public/components/acceleration/selectors/source_selector.tsx
@@ -3,15 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiFormRow, EuiSpacer, EuiText, htmlIdGenerator } from '@elastic/eui';
-import React, { useState } from 'react';
-import { useEffect } from 'react';
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFormRow,
+  EuiSpacer,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
 import { CreateAccelerationForm } from '../../../../common/types';
 
-interface DataSourceTypes {
-  label: string;
-}
-
 interface AccelerationDataSourceSelectorProps {
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
@@ -21,14 +23,18 @@ export const AccelerationDataSourceSelector = ({
   accelerationFormData,
   setAccelerationFormData,
 }: AccelerationDataSourceSelectorProps) => {
-  const [dataConnections, setDataConnections] = useState<DataSourceTypes[]>([]);
-  const [selectedDataConnection, setSelectedDataConnection] = useState<DataSourceTypes[]>([]);
-  const [tables, setTables] = useState<DataSourceTypes[]>([]);
-  const [selectedTable, setSelectedTable] = useState<DataSourceTypes[]>([]);
+  const [dataConnections, setDataConnections] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [selectedDataConnection, setSelectedDataConnection] = useState<
+    EuiComboBoxOptionOption<string>[]
+  >([]);
+  const [databases, setDatabases] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [selectedDatabase, setSelectedDatabase] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [tables, setTables] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [selectedTable, setSelectedTable] = useState<EuiComboBoxOptionOption<string>[]>([]);
 
   useEffect(() => {
+    // TODO: remove hardcoded responses
     setDataConnections([
-      // TODO: remove hardcoded responses
       {
         label: 'spark1',
       },
@@ -39,9 +45,23 @@ export const AccelerationDataSourceSelector = ({
   }, []);
 
   useEffect(() => {
+    // TODO: remove hardcoded responses
     if (accelerationFormData.dataSource !== '') {
+      setDatabases([
+        {
+          label: 'Database1',
+        },
+        {
+          label: 'Database2',
+        },
+      ]);
+    }
+  }, [accelerationFormData.dataSource]);
+
+  useEffect(() => {
+    // TODO: remove hardcoded responses
+    if (accelerationFormData.database !== '') {
       setTables([
-        // TODO: remove hardcoded responses
         {
           label: 'Table1',
         },
@@ -50,26 +70,27 @@ export const AccelerationDataSourceSelector = ({
         },
       ]);
     }
-  }, [accelerationFormData.dataSource]);
+  }, [accelerationFormData.database]);
 
   useEffect(() => {
+    // TODO: remove hardcoded responses
     if (accelerationFormData.dataTable !== '') {
       const idPrefix = htmlIdGenerator()();
       setAccelerationFormData({
         ...accelerationFormData,
-        // TODO: remove hardcoded responses
         dataTableFields: [
-          { id: `${idPrefix}1`, fieldName: 'Field 1', dataType: 'Integer' },
-          { id: `${idPrefix}2`, fieldName: 'Field 2', dataType: 'Integer' },
-          { id: `${idPrefix}3`, fieldName: 'Field 3', dataType: 'Integer' },
-          { id: `${idPrefix}4`, fieldName: 'Field 4', dataType: 'Integer' },
-          { id: `${idPrefix}5`, fieldName: 'Field 5', dataType: 'Integer' },
-          { id: `${idPrefix}6`, fieldName: 'Field 6', dataType: 'Integer' },
-          { id: `${idPrefix}7`, fieldName: 'Field 7', dataType: 'Integer' },
-          { id: `${idPrefix}8`, fieldName: 'Field 8', dataType: 'Integer' },
-          { id: `${idPrefix}9`, fieldName: 'Field 9', dataType: 'Integer' },
-          { id: `${idPrefix}10`, fieldName: 'Field 10', dataType: 'Integer' },
-          { id: `${idPrefix}11`, fieldName: 'Field 11', dataType: 'Integer' },
+          { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' },
+          { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' },
+          { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' },
+          { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' },
+          { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' },
+          { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' },
+          { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' },
+          { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' },
+          { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' },
+          { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' },
+          { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' },
+          { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' },
         ],
       });
     }
@@ -78,19 +99,19 @@ export const AccelerationDataSourceSelector = ({
   return (
     <>
       <EuiText data-test-subj="datasource-selector-header">
-        <h3>Select data connection</h3>
+        <h3>Select data source</h3>
       </EuiText>
       <EuiSpacer size="s" />
       <EuiText size="s" color="subdued">
-        Select data connection where the data you want to accelerate resides.{' '}
+        Select data connection where the data you want to accelerate resides.
       </EuiText>
       <EuiSpacer size="s" />
       <EuiFormRow
-        label="Data connection"
-        helpText="A data connection has to be configured and active to be able to select it and index data from."
+        label="Data source"
+        helpText="A data source has to be configured and active to be able to select it and index data from."
       >
         <EuiComboBox
-          placeholder="Data connection name"
+          placeholder="Select a data source"
           singleSelection={{ asPlainText: true }}
           options={dataConnections}
           selectedOptions={selectedDataConnection}
@@ -101,14 +122,36 @@ export const AccelerationDataSourceSelector = ({
             });
             setSelectedDataConnection(dataConnectionOptions);
           }}
+          isInvalid={selectedDataConnection.length === 0}
+          isClearable={false}
+        />
+      </EuiFormRow>
+      <EuiFormRow
+        label="Database"
+        helpText="Select the database that contains the tables you'd like to use."
+      >
+        <EuiComboBox
+          placeholder="Select a database"
+          singleSelection={{ asPlainText: true }}
+          options={databases}
+          selectedOptions={selectedDatabase}
+          onChange={(tableOptions) => {
+            setAccelerationFormData({
+              ...accelerationFormData,
+              database: tableOptions[0].label,
+            });
+            setSelectedDatabase(tableOptions);
+          }}
+          isInvalid={selectedDatabase.length === 0}
+          isClearable={false}
         />
       </EuiFormRow>
       <EuiFormRow
-        label="Select Table"
+        label="Table"
         helpText="Select the Spark table that has the data you would like to index."
       >
         <EuiComboBox
-          placeholder="Table name"
+          placeholder="Select a table"
           singleSelection={{ asPlainText: true }}
           options={tables}
           selectedOptions={selectedTable}
@@ -119,9 +162,10 @@ export const AccelerationDataSourceSelector = ({
             });
             setSelectedTable(tableOptions);
           }}
+          isInvalid={selectedTable.length === 0}
+          isClearable={false}
         />
       </EuiFormRow>
-      <EuiSpacer size="xxl" />
     </>
   );
 };
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
index 1e980650..0335f498 100644
--- a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -5,15 +5,18 @@
 
 import {
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiExpression,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiPopover,
   EuiPopoverTitle,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import React, { useState } from 'react';
+import { ACCELERATION_ADD_FIELDS_TEXT } from '../../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../../common/types';
-import _ from 'lodash';
 
 interface CoveringIndexBuilderProps {
   accelerationFormData: CreateAccelerationForm;
@@ -25,27 +28,20 @@ export const CoveringIndexBuilder = ({
   setAccelerationFormData,
 }: CoveringIndexBuilderProps) => {
   const [isPopOverOpen, setIsPopOverOpen] = useState(false);
-  const [columnsValue, setColumnsValue] = useState('(add columns here)');
-  const [selectedOptions, setSelected] = useState([]);
+  const [columnsValue, setColumnsValue] = useState(ACCELERATION_ADD_FIELDS_TEXT);
+  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([]);
 
-  const onChange = (selectedOptions: any[]) => {
-    let expresseionValue = '(add columns here)';
+  const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => {
+    let expressionValue = ACCELERATION_ADD_FIELDS_TEXT;
     if (selectedOptions.length > 0) {
-      expresseionValue =
-        '(' +
-        _.reduce(
-          selectedOptions,
-          function (columns, n, index) {
-            const columnValue = columns + `${n.label}`;
-            if (index !== selectedOptions.length - 1) return `${columnValue}, `;
-            else return columnValue;
-          },
-          ''
-        ) +
-        ')';
+      expressionValue = `(${selectedOptions.map((option) => option.label).join(', ')})`;
     }
-    setColumnsValue(expresseionValue);
-    setSelected(selectedOptions);
+    setAccelerationFormData({
+      ...accelerationFormData,
+      coveringIndexQueryData: selectedOptions.map((option) => option.label),
+    });
+    setColumnsValue(expressionValue);
+    setSelectedOptions(selectedOptions);
   };
 
   return (
@@ -54,38 +50,50 @@ export const CoveringIndexBuilder = ({
         <h3>Covering index definition</h3>
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiExpression
-        description="CREATE INDEX"
-        value={accelerationFormData.accelerationIndexName}
-      />
-      <EuiExpression description="ON" value={accelerationFormData.dataTable} />
-      <EuiPopover
-        id="popover1"
-        button={
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        <EuiFlexItem grow={false}>
           <EuiExpression
-            description=""
-            value={columnsValue}
-            isActive={isPopOverOpen}
-            onClick={() => setIsPopOverOpen(true)}
+            description="CREATE INDEX"
+            value={accelerationFormData.accelerationIndexName}
           />
-        }
-        isOpen={isPopOverOpen}
-        closePopover={() => setIsPopOverOpen(false)}
-        panelPaddingSize="s"
-        anchorPosition="downLeft"
-      >
-        <>
-          <EuiPopoverTitle paddingSize="l">Columns</EuiPopoverTitle>
-          <EuiComboBox
-            placeholder="Select one or more options"
-            options={accelerationFormData.dataTableFields.map((x) => {
-              return { label: x.fieldName };
-            })}
-            selectedOptions={selectedOptions}
-            onChange={onChange}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiExpression description="[IF NOT EXISTS]" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiExpression
+            description="ON"
+            color="accent"
+            value={`${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`}
           />
-        </>
-      </EuiPopover>
+          <EuiPopover
+            id="coveringIndexFieldsPopOver"
+            button={
+              <EuiExpression
+                description=""
+                value={columnsValue}
+                isActive={isPopOverOpen}
+                onClick={() => setIsPopOverOpen(true)}
+                isInvalid={columnsValue === ACCELERATION_ADD_FIELDS_TEXT}
+              />
+            }
+            isOpen={isPopOverOpen}
+            closePopover={() => setIsPopOverOpen(false)}
+            panelPaddingSize="s"
+            anchorPosition="downLeft"
+          >
+            <>
+              <EuiPopoverTitle paddingSize="l">Columns</EuiPopoverTitle>
+              <EuiComboBox
+                placeholder="Select one or more options"
+                options={accelerationFormData.dataTableFields.map((x) => ({ label: x.fieldName }))}
+                selectedOptions={selectedOptions}
+                onChange={onChange}
+              />
+            </>
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </>
   );
 };
diff --git a/public/components/acceleration/visual_editors/index_setting_options.tsx b/public/components/acceleration/visual_editors/index_setting_options.tsx
deleted file mode 100644
index e895c862..00000000
--- a/public/components/acceleration/visual_editors/index_setting_options.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, ChangeEvent } from 'react';
-import { CreateAccelerationForm } from '../../../../common/types';
-import {
-  EuiFieldNumber,
-  EuiFieldText,
-  EuiFormRow,
-  EuiRadioGroup,
-  htmlIdGenerator,
-} from '@elastic/eui';
-
-const idPrefix = htmlIdGenerator()();
-
-interface IndexSettingOptionsProps {
-  accelerationFormData: CreateAccelerationForm;
-  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
-}
-
-export const IndexSettingOptions = ({
-  accelerationFormData,
-  setAccelerationFormData,
-}: IndexSettingOptionsProps) => {
-  const refreshOptions = [
-    {
-      id: `${idPrefix}0`,
-      label: 'Auto Refresh',
-    },
-    {
-      id: `${idPrefix}1`,
-      label: 'Refresh by interval',
-    },
-  ];
-  const [indexName, setIndexName] = useState('');
-  const [indexAlias, setIndexAlias] = useState('');
-  const [primaryShards, setPrimaryShards] = useState(5);
-  const [replicaCount, setReplicaCount] = useState(1);
-  const [refreshTypeSelected, setRefreshTypeSelected] = useState(`${idPrefix}0`);
-  const [refreshIntervalSeconds, setRefreshIntervalSeconds] = useState('1');
-
-  const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
-    setIndexName(e.target.value);
-  };
-
-  const onChangeindexAlias = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccelerationFormData({ ...accelerationFormData, accelerationIndexAlias: e.target.value });
-    setIndexAlias(e.target.value);
-  };
-
-  const onChangePrimaryShards = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccelerationFormData({ ...accelerationFormData, primaryShardsCount: +e.target.value });
-    setPrimaryShards(+e.target.value);
-  };
-
-  const onChangeReplicaCount = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccelerationFormData({ ...accelerationFormData, replicaShardsCount: +e.target.value });
-    setReplicaCount(+e.target.value);
-  };
-
-  const onChangeRefreshType = (optionId: React.SetStateAction<string>) => {
-    setAccelerationFormData({
-      ...accelerationFormData,
-      refreshType: optionId === `${idPrefix}0` ? 'auto' : 'interval',
-    });
-    setRefreshTypeSelected(optionId);
-  };
-
-  const onChangeRefreshIntervalSeconds = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccelerationFormData({
-      ...accelerationFormData,
-      refreshIntervalSeconds: e.target.value + 's',
-    });
-    setRefreshIntervalSeconds(e.target.value);
-  };
-
-  return (
-    <>
-      <EuiFormRow
-        label="Index name"
-        helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, > are not allowed. Skipping Index names are pre-generated and cannot be changed.'
-      >
-        <EuiFieldText
-          placeholder="Enter Index Name"
-          value={indexName}
-          onChange={onChangeIndexName}
-          aria-label="Enter Index Name"
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label="Index alias"
-        helpText="Allow this index to be referenced by existing aliases or specify a new alias."
-      >
-        <EuiFieldText
-          placeholder="Enter Index alias - Optional"
-          value={indexAlias}
-          onChange={(e) => onChangeindexAlias(e)}
-          aria-label="Enter Index alias"
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label="Number of primary shards"
-        helpText="Specify the number of primary shards for the index. Default is 5. 
-        The number of primary shards cannot be changed after the index is created."
-      >
-        <EuiFieldNumber
-          placeholder="Number of primary shards"
-          value={primaryShards}
-          onChange={(e) => onChangePrimaryShards(e)}
-          aria-label="Number of primary shards"
-          min={1}
-          max={100}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label="Number of replicas"
-        helpText="Specify the number of replicas each primary shard should have. Default is 1."
-      >
-        <EuiFieldNumber
-          placeholder="Number of replicas"
-          value={replicaCount}
-          onChange={onChangeReplicaCount}
-          aria-label="Number of replicas"
-          min={0}
-          max={100}
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        label="Refresh type"
-        helpText="Indicate the refresh method required to update the data in acceleration index."
-      >
-        <EuiRadioGroup
-          options={refreshOptions}
-          idSelected={refreshTypeSelected}
-          onChange={onChangeRefreshType}
-          name="refresh type radio group"
-        />
-      </EuiFormRow>
-
-      {refreshTypeSelected === `${idPrefix}1` && (
-        <EuiFormRow
-          label="Refresh interval"
-          helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is 1 second."
-        >
-          <EuiFieldNumber
-            placeholder="Refresh interval"
-            value={refreshIntervalSeconds}
-            onChange={onChangeRefreshIntervalSeconds}
-            aria-label="Refresh interval"
-            append={'second(s)'}
-            min={1}
-          />
-        </EuiFormRow>
-      )}
-    </>
-  );
-};
diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
new file mode 100644
index 00000000..f61bdf99
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiComboBox,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiPopoverTitle,
+  EuiSpacer,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
+import {
+  AggregationFunctionType,
+  CreateAccelerationForm,
+  MaterializedViewColumn,
+} from '../../../../../common/types';
+
+interface AddColumnPopOverProps {
+  isColumnPopOverOpen: boolean;
+  setIsColumnPopOverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  columnExpressionValues: MaterializedViewColumn[];
+  setColumnExpressionValues: React.Dispatch<React.SetStateAction<MaterializedViewColumn[]>>;
+  accelerationFormData: CreateAccelerationForm;
+}
+
+export const AddColumnPopOver = ({
+  isColumnPopOverOpen,
+  setIsColumnPopOverOpen,
+  columnExpressionValues,
+  setColumnExpressionValues,
+  accelerationFormData,
+}: AddColumnPopOverProps) => {
+  const [selectedFunction, setSelectedFunction] = useState([
+    ACCELERATION_AGGREGRATION_FUNCTIONS[0],
+  ]);
+  const [selectedField, setSelectedField] = useState([]);
+  const [selectedAlias, setSeletedAlias] = useState('');
+
+  const resetSelectedField = () => {
+    if (accelerationFormData.dataTableFields.length > 0) {
+      const defaultFieldName = accelerationFormData.dataTableFields[0].fieldName;
+      setSelectedField([{ label: defaultFieldName }]);
+    }
+  };
+
+  const resetValues = () => {
+    setSelectedFunction([ACCELERATION_AGGREGRATION_FUNCTIONS[0]]);
+    resetSelectedField();
+    setSeletedAlias('');
+  };
+
+  const onChangeAlias = (e: ChangeEvent<HTMLInputElement>) => {
+    setSeletedAlias(e.target.value);
+  };
+
+  useEffect(() => {
+    resetSelectedField();
+  }, []);
+
+  return (
+    <EuiPopover
+      panelPaddingSize="s"
+      button={
+        <EuiButtonEmpty
+          iconType="plusInCircle"
+          aria-label="add column"
+          onClick={() => {
+            resetValues();
+            setIsColumnPopOverOpen(!isColumnPopOverOpen);
+          }}
+          size="xs"
+        >
+          Add Column
+        </EuiButtonEmpty>
+      }
+      isOpen={isColumnPopOverOpen}
+      closePopover={() => setIsColumnPopOverOpen(false)}
+    >
+      <EuiPopoverTitle>Add Column</EuiPopoverTitle>
+      <>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow label="Aggregate function">
+              <EuiComboBox
+                singleSelection={{ asPlainText: true }}
+                options={ACCELERATION_AGGREGRATION_FUNCTIONS}
+                selectedOptions={selectedFunction}
+                onChange={setSelectedFunction}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow label="Aggregation field">
+              <EuiComboBox
+                singleSelection={{ asPlainText: true }}
+                options={[
+                  { label: '*', disabled: selectedFunction[0].label !== 'count' },
+                  ...accelerationFormData.dataTableFields.map((x) => ({ label: x.fieldName })),
+                ]}
+                selectedOptions={selectedField}
+                onChange={setSelectedField}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+        <EuiFormRow label="Column alias - optional">
+          <EuiFieldText name="aliasField" onChange={onChangeAlias} />
+        </EuiFormRow>
+      </>
+      <EuiPopoverFooter>
+        <EuiButton
+          size="s"
+          fill
+          onClick={() => {
+            setColumnExpressionValues([
+              ...columnExpressionValues,
+              {
+                id: htmlIdGenerator()(),
+                functionName: selectedFunction[0].label as AggregationFunctionType,
+                functionParam: selectedField[0].label,
+                fieldAlias: selectedAlias,
+              },
+            ]);
+            setIsColumnPopOverOpen(false);
+          }}
+        >
+          Add
+        </EuiButton>
+      </EuiPopoverFooter>
+    </EuiPopover>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
new file mode 100644
index 00000000..0da3d65b
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
@@ -0,0 +1,180 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonIcon,
+  EuiComboBox,
+  EuiExpression,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPopover,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
+import {
+  AggregationFunctionType,
+  CreateAccelerationForm,
+  MaterializedViewColumn,
+} from '../../../../../common/types';
+
+interface ColumnExpressionProps {
+  index: number;
+  currentColumnExpressionValue: MaterializedViewColumn;
+  columnExpressionValues: MaterializedViewColumn[];
+  setColumnExpressionValues: React.Dispatch<React.SetStateAction<MaterializedViewColumn[]>>;
+  accelerationFormData: CreateAccelerationForm;
+}
+
+export const ColumnExpression = ({
+  index,
+  currentColumnExpressionValue,
+  columnExpressionValues,
+  setColumnExpressionValues,
+  accelerationFormData,
+}: ColumnExpressionProps) => {
+  const [isFunctionPopOverOpen, setIsFunctionPopOverOpen] = useState(false);
+  const [isAliasPopOverOpen, setIsAliasPopOverOpen] = useState(false);
+
+  const updateColumnExpressionValue = (newValue: MaterializedViewColumn, index: number) => {
+    const updatedArray = [...columnExpressionValues];
+    updatedArray[index] = newValue;
+    setColumnExpressionValues(updatedArray);
+  };
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            id={'columnFunctionExpression-' + currentColumnExpressionValue.id}
+            button={
+              <EuiExpression
+                description=""
+                value={`${currentColumnExpressionValue.functionName}(${currentColumnExpressionValue.functionParam})`}
+                isActive={isFunctionPopOverOpen}
+                onClick={() => {
+                  setIsAliasPopOverOpen(false);
+                  setIsFunctionPopOverOpen(true);
+                }}
+              />
+            }
+            isOpen={isFunctionPopOverOpen}
+            closePopover={() => setIsFunctionPopOverOpen(false)}
+            panelPaddingSize="s"
+            anchorPosition="downLeft"
+          >
+            <>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiFormRow label="Aggregate function">
+                    <EuiComboBox
+                      singleSelection={{ asPlainText: true }}
+                      options={ACCELERATION_AGGREGRATION_FUNCTIONS}
+                      selectedOptions={[
+                        {
+                          label: currentColumnExpressionValue.functionName,
+                        },
+                      ]}
+                      onChange={(functionOption) =>
+                        updateColumnExpressionValue(
+                          {
+                            ...currentColumnExpressionValue,
+                            functionName: functionOption[0].label as AggregationFunctionType,
+                          },
+                          index
+                        )
+                      }
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiFormRow label="Aggregation field">
+                    <EuiComboBox
+                      singleSelection={{ asPlainText: true }}
+                      options={[
+                        {
+                          label: '*',
+                          disabled: currentColumnExpressionValue.functionName !== 'count',
+                        },
+                        ...accelerationFormData.dataTableFields.map((x) => ({
+                          label: x.fieldName,
+                        })),
+                      ]}
+                      selectedOptions={[
+                        {
+                          label: currentColumnExpressionValue.functionParam,
+                        },
+                      ]}
+                      onChange={(fieldOption) =>
+                        updateColumnExpressionValue(
+                          { ...currentColumnExpressionValue, functionParam: fieldOption[0].label },
+                          index
+                        )
+                      }
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </>
+          </EuiPopover>
+        </EuiFlexItem>
+        {currentColumnExpressionValue.fieldAlias !== '' && (
+          <EuiFlexItem grow={false}>
+            <EuiPopover
+              id={'columnFunctionExpressionAlias-' + currentColumnExpressionValue.id}
+              button={
+                <EuiExpression
+                  description="AS"
+                  color="accent"
+                  value={currentColumnExpressionValue.fieldAlias}
+                  isActive={isAliasPopOverOpen}
+                  onClick={() => {
+                    setIsFunctionPopOverOpen(false);
+                    setIsAliasPopOverOpen(true);
+                  }}
+                />
+              }
+              isOpen={isAliasPopOverOpen}
+              closePopover={() => setIsAliasPopOverOpen(false)}
+              panelPaddingSize="s"
+              anchorPosition="downLeft"
+            >
+              <EuiFormRow label="Column alias">
+                <EuiFieldText
+                  name="aliasField"
+                  value={currentColumnExpressionValue.fieldAlias}
+                  onChange={(e) =>
+                    updateColumnExpressionValue(
+                      { ...currentColumnExpressionValue, fieldAlias: e.target.value },
+                      index
+                    )
+                  }
+                />
+              </EuiFormRow>
+            </EuiPopover>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            color="danger"
+            onClick={() => {
+              setColumnExpressionValues([
+                ..._.filter(
+                  columnExpressionValues,
+                  (o) => o.id !== currentColumnExpressionValue.id
+                ),
+              ]);
+            }}
+            iconType="trash"
+            aria-label="delete-column-expression"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
new file mode 100644
index 00000000..dc853414
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiExpression,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPopover,
+  EuiSelect,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { ACCELERATION_TIME_INTERVAL } from '../../../../../common/constants';
+import { CreateAccelerationForm, GroupByTumbleType } from '../../../../../common/types';
+import { pluralizeTime } from '../../create/utils';
+
+interface GroupByTumbleExpressionProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+export const GroupByTumbleExpression = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: GroupByTumbleExpressionProps) => {
+  const [IsGroupPopOverOpen, setIsGroupPopOverOpen] = useState(false);
+  const [groupbyValues, setGroupByValues] = useState<GroupByTumbleType>({
+    timeField: '',
+    tumbleWindow: 1,
+    tumbleInterval: ACCELERATION_TIME_INTERVAL[0].value,
+  });
+
+  const onChangeTumbleWindow = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setGroupByValues({ ...groupbyValues, tumbleWindow: +e.target.value });
+  };
+
+  const onChangeTumbleInterval = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setGroupByValues({ ...groupbyValues, tumbleInterval: e.target.value });
+  };
+
+  const onChangeTimeField = (selectedOptions: EuiComboBoxOptionOption[]) => {
+    if (selectedOptions.length > 0)
+      setGroupByValues({ ...groupbyValues, timeField: selectedOptions[0].label });
+  };
+
+  useEffect(() => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      materializedViewQueryData: {
+        ...accelerationFormData.materializedViewQueryData,
+        groupByTumbleValue: groupbyValues,
+      },
+    });
+  }, [groupbyValues]);
+
+  return (
+    <EuiFlexItem grow={false}>
+      <EuiPopover
+        id="groupByTumblePopOver"
+        button={
+          <EuiExpression
+            description="GROUP BY"
+            value={`TUMBLE(${groupbyValues.timeField}, '${groupbyValues.tumbleWindow} ${
+              groupbyValues.tumbleInterval
+            }${pluralizeTime(groupbyValues.tumbleWindow)}')`}
+            isActive={IsGroupPopOverOpen}
+            onClick={() => setIsGroupPopOverOpen(true)}
+            isInvalid={groupbyValues.timeField === ''}
+          />
+        }
+        isOpen={IsGroupPopOverOpen}
+        closePopover={() => setIsGroupPopOverOpen(false)}
+        panelPaddingSize="s"
+        anchorPosition="downLeft"
+      >
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Time Field">
+              <EuiComboBox
+                placeholder="Select one or more options"
+                singleSelection={{ asPlainText: true }}
+                options={accelerationFormData.dataTableFields
+                  .filter((value) => value.dataType.includes('TimestampType'))
+                  .map((value) => ({ label: value.fieldName }))}
+                selectedOptions={[{ label: groupbyValues.timeField }]}
+                onChange={onChangeTimeField}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Tumble Window">
+              <EuiFieldNumber
+                value={groupbyValues.tumbleWindow}
+                onChange={onChangeTumbleWindow}
+                min={1}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFormRow label="Tumble Interval">
+              <EuiSelect
+                value={groupbyValues.tumbleInterval}
+                onChange={onChangeTumbleInterval}
+                options={ACCELERATION_TIME_INTERVAL}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopover>
+    </EuiFlexItem>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
new file mode 100644
index 00000000..0f3bdeea
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiExpression,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { CreateAccelerationForm, MaterializedViewColumn } from '../../../../../common/types';
+import { AddColumnPopOver } from './add_column_popover';
+import { ColumnExpression } from './column_expression';
+import { GroupByTumbleExpression } from './group_by_tumble_expression';
+
+interface MaterializedViewBuilderProps {
+  accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+}
+
+const newColumnExpressionId = htmlIdGenerator()();
+
+export const MaterializedViewBuilder = ({
+  accelerationFormData,
+  setAccelerationFormData,
+}: MaterializedViewBuilderProps) => {
+  const [isColumnPopOverOpen, setIsColumnPopOverOpen] = useState(false);
+  const [columnExpressionValues, setColumnExpressionValues] = useState<MaterializedViewColumn[]>(
+    []
+  );
+
+  useEffect(() => {
+    if (accelerationFormData.dataTableFields.length > 0) {
+      setColumnExpressionValues([
+        {
+          id: newColumnExpressionId,
+          functionName: 'count',
+          functionParam: accelerationFormData.dataTableFields[0].fieldName,
+          fieldAlias: 'counter1',
+        },
+      ]);
+    }
+  }, [accelerationFormData.dataTableFields]);
+
+  useEffect(() => {
+    setAccelerationFormData({
+      ...accelerationFormData,
+      materializedViewQueryData: {
+        ...accelerationFormData.materializedViewQueryData,
+        columnsValues: columnExpressionValues,
+      },
+    });
+  }, [columnExpressionValues]);
+
+  return (
+    <>
+      <EuiText data-test-subj="covering-index-builder">
+        <h3>Materialized view definition</h3>
+      </EuiText>
+      <EuiSpacer size="s" />
+      <EuiExpression
+        description="CREATE MATERIALIZED VIEW"
+        value={`${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.accelerationIndexName}`}
+      />
+
+      <EuiFlexItem grow={false}>
+        <EuiExpression description="[IF NOT EXISTS]" value="" />
+      </EuiFlexItem>
+
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiExpression color="accent" description="AS SELECT" value="" />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <AddColumnPopOver
+            isColumnPopOverOpen={isColumnPopOverOpen}
+            setIsColumnPopOverOpen={setIsColumnPopOverOpen}
+            columnExpressionValues={columnExpressionValues}
+            setColumnExpressionValues={setColumnExpressionValues}
+            accelerationFormData={accelerationFormData}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup direction="column" gutterSize="s">
+        {_.map(columnExpressionValues, (_, i) => {
+          return (
+            <ColumnExpression
+              index={i}
+              currentColumnExpressionValue={columnExpressionValues[i]}
+              columnExpressionValues={columnExpressionValues}
+              setColumnExpressionValues={setColumnExpressionValues}
+              accelerationFormData={accelerationFormData}
+            />
+          );
+        })}
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <EuiExpression
+        description="FROM"
+        value={`${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`}
+      />
+      <EuiSpacer size="s" />
+      <GroupByTumbleExpression
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    </>
+  );
+};
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
index c4e5b47f..5be5e6df 100644
--- a/public/components/acceleration/visual_editors/query_builder.tsx
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -3,47 +3,185 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import _ from 'lodash';
-import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../common/types';
+import {
+  CreateAccelerationForm,
+  GroupByTumbleType,
+  MaterializedViewColumn,
+  SkippingIndexRowType,
+} from '../../../../common/types';
+import { pluralizeTime } from '../create/utils';
 
-const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[]) => {
-  return _.reduce(
-    skippingIndexQueryData,
-    function (columns, n, index) {
-      const columnValue = columns + `   ${n.fieldName} ${n.accelerationMethod}`;
-      if (index !== skippingIndexQueryData.length - 1) return `${columnValue}, \n`;
-      else return `${columnValue} \n`;
-    },
-    ''
+/* Add index options to query */
+const buildIndexOptions = (accelerationformData: CreateAccelerationForm) => {
+  const {
+    primaryShardsCount,
+    replicaShardsCount,
+    refreshType,
+    checkpointLocation,
+  } = accelerationformData;
+  const indexOptions: string[] = [];
+
+  // Add index settings option
+  indexOptions.push(
+    `index_settings = '{"number_of_shards":${primaryShardsCount},"number_of_replicas":${replicaShardsCount}}'`
   );
+
+  // Add auto refresh option
+  indexOptions.push(`auto_refresh = ${refreshType === 'auto'}`);
+
+  // Add refresh interval option
+  if (refreshType === 'interval') {
+    const { refreshWindow, refreshInterval } = accelerationformData.refreshIntervalOptions;
+    indexOptions.push(
+      `refresh_interval = '${refreshWindow} ${refreshInterval}${pluralizeTime(refreshWindow)}'`
+    );
+  }
+
+  // Add checkpoint location option
+  if (checkpointLocation) {
+    indexOptions.push(`checkpoint_location = '${checkpointLocation}'`);
+  }
+
+  // Combine all options with commas and return as a single string
+  return `WITH (\n${indexOptions.join(',\n')}\n)`;
 };
 
+/* Add skipping index columns to query */
+const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[]) => {
+  return skippingIndexQueryData
+    .map((n) => `   ${n.fieldName} ${n.accelerationMethod}`)
+    .join(', \n');
+};
+
+/*
+ * Builds create skipping index query
+ * Skipping Index create query example:
+ *
+ * CREATE SKIPPING INDEX
+ * [IF NOT EXISTS]
+ * ON datasource.database.table
+ * FOR COLUMNS (
+ *    field1 VALUE_SET,
+ *    field2 PARTITION,
+ *    field3 MIN_MAX,
+ * ) WITH (
+ * auto_refresh = false,
+ * refresh_interval = '1 minute',
+ * checkpoint_location = 's3://test/',
+ * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
+ * )
+ */
 const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
-  /*
-   * Skipping Index Example
-   *
-   * CREATE SKIPPING INDEX ON table_name
-   * FOR COLUMNS (
-   *    field1 VALUE_SET,
-   *    field2 PARTITION,
-   *    field3 MIN_MAX,
-   * )
-   */
-  let codeQuery = 'CREATE SKIPPING INDEX ON ' + accelerationformData.dataTable;
-  codeQuery = codeQuery + '\n FOR COLUMNS ( \n';
-  codeQuery = codeQuery + buildSkippingIndexColumns(accelerationformData.skippingIndexQueryData);
-  codeQuery = codeQuery + ')';
+  const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData;
+
+  const codeQuery = `CREATE SKIPPING INDEX 
+[IF NOT EXISTS]
+ON ${dataSource}.${database}.${dataTable}
+  FOR COLUMNS (
+${buildSkippingIndexColumns(skippingIndexQueryData)}
+  ) ${buildIndexOptions(accelerationformData)}`;
+
   return codeQuery;
 };
 
+/* Add covering index columns to query */
+const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => {
+  return coveringIndexQueryData.map((field) => `   ${field}`).join(', \n');
+};
+
+/*
+ * Builds create covering index query
+ * Covering Index create query example:
+ *
+ * CREATE INDEX index_name
+ * [IF NOT EXISTS]
+ * ON datasource.database.table
+ * FOR COLUMNS (
+ *    field1,
+ *    field2,
+ *    field3,
+ * ) WITH (
+ * auto_refresh = false,
+ * refresh_interval = '1 minute',
+ * checkpoint_location = 's3://test/',
+ * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
+ * )
+ */
 const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
-  return '';
+  const {
+    dataSource,
+    database,
+    dataTable,
+    accelerationIndexName,
+    coveringIndexQueryData,
+  } = accelerationformData;
+
+  const codeQuery = `CREATE INDEX ${accelerationIndexName}
+[IF NOT EXISTS]
+ON ${dataSource}.${database}.${dataTable}
+  FOR COLUMNS (
+${buildCoveringIndexColumns(coveringIndexQueryData)}
+  ) ${buildIndexOptions(accelerationformData)}`;
+
+  return codeQuery;
+};
+
+const buildMaterializedViewColumns = (columnsValues: MaterializedViewColumn[]) => {
+  return columnsValues
+    .map(
+      (column) =>
+        `   ${column.functionName}(${column.functionParam}) ${
+          column.fieldAlias && `AS ${column.fieldAlias}`
+        }`
+    )
+    .join(', \n');
 };
 
+/* Build group by tumble values */
+const buildTumbleValue = (GroupByTumbleValue: GroupByTumbleType) => {
+  const { timeField, tumbleWindow, tumbleInterval } = GroupByTumbleValue;
+  return `(${timeField}, '${tumbleWindow} ${tumbleInterval}${pluralizeTime(tumbleWindow)}')`;
+};
+
+/*
+ * Builds create materialized view query
+ * Materialized View create query example:
+ *
+ * CREATE MATERIALIZED VIEW datasource.database.index_name
+ * [IF NOT EXISTS]
+ * AS SELECT
+ * count(field) as counter,
+ * count(*) as counter1,
+ * sum(field2),
+ * avg(field3) as average
+ *  WITH (
+ * auto_refresh = false,
+ * refresh_interval = '1 minute',
+ * checkpoint_location = 's3://test/',
+ * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
+ * )
+ */
 const materializedQueryViewBuilder = (accelerationformData: CreateAccelerationForm) => {
-  return '';
+  const {
+    dataSource,
+    database,
+    dataTable,
+    accelerationIndexName,
+    materializedViewQueryData,
+  } = accelerationformData;
+
+  const codeQuery = `CREATE MATERIALIZED VIEW ${dataSource}.${database}.${accelerationIndexName}
+[IF NOT EXISTS]
+AS SELECT
+${buildMaterializedViewColumns(materializedViewQueryData.columnsValues)}
+FROM ${dataSource}.${database}.${dataTable}
+GROUP BY TUMBLE ${buildTumbleValue(materializedViewQueryData.groupByTumbleValue)}
+ ${buildIndexOptions(accelerationformData)}`;
+
+  return codeQuery;
 };
 
+/* Builds create acceleration index query */
 export const accelerationQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
   switch (accelerationformData.accelerationIndexType) {
     case 'skipping': {
diff --git a/public/components/acceleration/visual_editors/query_visual_editor.tsx b/public/components/acceleration/visual_editors/query_visual_editor.tsx
index d8f933f8..737f5d1e 100644
--- a/public/components/acceleration/visual_editors/query_visual_editor.tsx
+++ b/public/components/acceleration/visual_editors/query_visual_editor.tsx
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import { EuiSpacer } from '@elastic/eui';
+import React from 'react';
 import { CreateAccelerationForm } from '../../../../common/types';
-import { IndexSettingOptions } from './index_setting_options';
-import { SkippingIndexBuilder } from './skipping_index/skipping_index_builder';
 import { CoveringIndexBuilder } from './covering_index/covering_index_builder';
+import { MaterializedViewBuilder } from './materialized_view/materialized_view_builder';
+import { SkippingIndexBuilder } from './skipping_index/skipping_index_builder';
 
 interface QueryVisualEditorProps {
   accelerationFormData: CreateAccelerationForm;
@@ -21,10 +21,6 @@ export const QueryVisualEditor = ({
 }: QueryVisualEditorProps) => {
   return (
     <>
-      <IndexSettingOptions
-        accelerationFormData={accelerationFormData}
-        setAccelerationFormData={setAccelerationFormData}
-      />
       <EuiSpacer size="l" />
       {accelerationFormData.accelerationIndexType === 'skipping' && (
         <SkippingIndexBuilder
@@ -38,6 +34,12 @@ export const QueryVisualEditor = ({
           setAccelerationFormData={setAccelerationFormData}
         />
       )}
+      {accelerationFormData.accelerationIndexType === 'materialized' && (
+        <MaterializedViewBuilder
+          accelerationFormData={accelerationFormData}
+          setAccelerationFormData={setAccelerationFormData}
+        />
+      )}
     </>
   );
 };
diff --git a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
index 92e7c498..e771c1b1 100644
--- a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
@@ -4,18 +4,18 @@
  */
 
 import {
+  EuiButton,
+  EuiInMemoryTable,
   EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
   EuiModalBody,
   EuiModalFooter,
-  EuiButton,
-  EuiInMemoryTable,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
   EuiTableFieldDataColumnType,
 } from '@elastic/eui';
+import _ from 'lodash';
 import React, { useState } from 'react';
 import { CreateAccelerationForm, DataTableFieldsType } from '../../../../../common/types';
-import _ from 'lodash';
 
 interface AddFieldsModalProps {
   setIsAddModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
diff --git a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
index 58a6fa79..adfa29b0 100644
--- a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
@@ -3,18 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
 import {
-  EuiTableFieldDataColumnType,
+  EuiButton,
+  EuiInMemoryTable,
   EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
   EuiModalBody,
-  EuiInMemoryTable,
   EuiModalFooter,
-  EuiButton,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiTableFieldDataColumnType,
 } from '@elastic/eui';
 import _ from 'lodash';
+import React, { useState } from 'react';
 import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../../common/types';
 
 interface AddFieldsModalProps {
diff --git a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
index 0c22baf2..f38b120b 100644
--- a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
@@ -3,18 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
 import {
   EuiBasicTable,
-  EuiSelect,
-  EuiSpacer,
-  EuiText,
-  EuiButtonIcon,
   EuiButton,
+  EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSelect,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
 import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../../common/types';
 import { AddFieldsModal } from './add_fields_modal';
 import { DeleteFieldsModal } from './delete_fields_modal';

From 89543728376e3f104b8b1c1c7cc836bfe8244468 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Fri, 29 Sep 2023 16:29:24 -0700
Subject: [PATCH 31/40] Define tables (#126)

* added changes for sidebar

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added side bar with tables indexed

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added dynamic element for tree view, addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* made a few design and panel changes, addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* changed the constants file

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added changes for search bar removal, pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* readded console.log

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated test suites, removed search field

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added changes for Data connection and combo box

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated mock for http query

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated mock template name in tests

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed more comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added error message for sidebar

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated snapshots

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

---------

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 common/constants.ts                           |    7 +
 .../Main/__snapshots__/main.test.tsx.snap     | 5239 ++++++++++-------
 public/components/Main/main.test.tsx          |   32 +-
 public/components/Main/main.tsx               |  114 +-
 public/components/SQLPage/SQLPage.tsx         |    3 +-
 public/components/SQLPage/TableView.tsx       |  108 +
 .../__snapshots__/SQLPage.test.tsx.snap       |   18 +-
 public/utils/constants.ts                     |    2 +-
 test/mocks/mockData.ts                        |    7 +
 9 files changed, 3453 insertions(+), 2077 deletions(-)
 create mode 100644 common/constants.ts
 create mode 100644 public/components/SQLPage/TableView.tsx

diff --git a/common/constants.ts b/common/constants.ts
new file mode 100644
index 00000000..1a50502e
--- /dev/null
+++ b/common/constants.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index 6730126f..29d848bc 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -2,106 +2,67 @@
 
 exports[`<Main /> spec click clear button 1`] = `
 <div>
-  <div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
     <div
-      class="sql-console-query-container"
+      class="euiFlexItem"
     >
       <div
-        class="query-language-switch"
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFormControlLayout"
         >
           <div
-            class="euiFlexItem"
-          >
-            <h1
-              class="euiTitle euiTitle--large"
-            >
-              Query Workbench
-            </h1>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+            <div
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <legend
-                class="euiScreenReaderOnly"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                query-language-swtich
-              </legend>
+                Connection Name
+              </p>
               <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>
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
               </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"
+            </div>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <span
-                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+              <button
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -110,273 +71,463 @@ exports[`<Main /> spec click clear button 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
                   />
                 </svg>
-                <span
-                  class="euiButton__text"
-                >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+              </button>
+            </div>
           </div>
         </div>
       </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div>
+    </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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiPageSideBar"
+      >
         <div
-          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
           <div
-            class="euiText euiText--medium sql-query-panel-header"
+            class="euiFlexItem"
           >
-            <h3>
-              Query editor
-            </h3>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
+              >
+                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiEmptyPrompt"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <h2
+                class="euiTitle euiTitle--medium"
+              >
+                Error loading Datasources
+              </h2>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            class="euiSpacer euiSpacer--s"
-          />
-          <div
-            class="euiCodeEditorWrapper"
-            data-test-subj="codeEditorContainer"
-            style="width: 100%; height: 7rem;"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style="width: 100%; height: 7rem;"
             >
-              <p
-                class="euiText"
-              >
-                Press Enter to start editing.
-              </p>
-              <p
-                class="euiText"
+              <button
+                class="euiCodeEditorKeyboardHint"
+                data-test-subj="codeEditorHint"
+                id="some_html_id"
               >
-                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"
-              />
+                <p
+                  class="euiText"
+                >
+                  Press Enter to start editing.
+                </p>
+                <p
+                  class="euiText"
+                >
+                  When you're done, press Escape to stop editing.
+                </p>
+              </button>
               <div
-                aria-hidden="true"
-                class="ace_gutter"
-              >
-                <div
-                  class="ace_layer ace_gutter-layer ace_folding-enabled"
+                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
-                  class="ace_gutter-active-line"
-                />
-              </div>
-              <div
-                class="ace_scroller"
-              >
+                  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_content"
+                  class="ace_scroller"
                 >
                   <div
-                    class="ace_layer ace_print-margin-layer"
+                    class="ace_content"
                   >
                     <div
-                      class="ace_print-margin"
-                      style="left: 4px; visibility: hidden;"
+                      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_layer ace_marker-layer"
+                    class="ace_scrollbar-inner"
+                    style="width: 20px;"
                   />
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-h"
+                  style="display: none; height: 20px;"
+                >
                   <div
-                    class="ace_layer ace_text-layer"
-                    style="padding: 0px 4px;"
+                    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
-                    class="ace_layer ace_marker-layer"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   />
                   <div
-                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   >
-                    <div
-                      class="ace_cursor"
-                    />
+                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                   </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"
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                type="button"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Run
+                    <span
+                      class="euiButton__text"
+                    >
+                      Run
+                    </span>
                   </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Clear
+                    <span
+                      class="euiButton__text"
+                    >
+                      Clear
+                    </span>
                   </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Explain
+                    <span
+                      class="euiButton__text"
+                    >
+                      Explain
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </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"
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="sql-console-query-result"
         >
           <div
-            style="padding: 20px 20px 0px 20px;"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style="padding: 20px 20px 0px 20px;"
             >
               <div
-                class="euiFlexItem"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
-                  class="euiText euiText--medium query-result-panel-header"
+                  class="euiFlexItem"
                 >
-                  <h3>
-                    Results
-                  </h3>
+                  <div
+                    class="euiText euiText--medium query-result-panel-header"
+                  >
+                    <h3>
+                      Results
+                    </h3>
+                  </div>
                 </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                />
               </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>
+              class="euiSpacer euiSpacer--xxl"
+            />
             <div
-              class="euiTextAlign euiTextAlign--center"
+              class="euiSpacer euiSpacer--xl"
+            />
+            <div
+              class="euiText euiText--medium"
+              style="color: rgb(63, 63, 63);"
             >
-              <p>
-                Enter a query in the query editor above to see results.
-              </p>
+              <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
-            class="euiSpacer euiSpacer--xxl"
-          />
-          <div
-            class="euiSpacer euiSpacer--xl"
-          />
         </div>
       </div>
     </div>
@@ -386,106 +537,67 @@ exports[`<Main /> spec click clear button 1`] = `
 
 exports[`<Main /> spec click run button, and response causes an error 1`] = `
 <div>
-  <div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
     <div
-      class="sql-console-query-container"
+      class="euiFlexItem"
     >
       <div
-        class="query-language-switch"
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFormControlLayout"
         >
           <div
-            class="euiFlexItem"
-          >
-            <h1
-              class="euiTitle euiTitle--large"
-            >
-              Query Workbench
-            </h1>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+            <div
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <legend
-                class="euiScreenReaderOnly"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                query-language-swtich
-              </legend>
+                Connection Name
+              </p>
               <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>
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
               </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"
+            </div>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <span
-                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+              <button
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -494,273 +606,463 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
                   />
                 </svg>
-                <span
-                  class="euiButton__text"
-                >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+              </button>
+            </div>
           </div>
         </div>
       </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div>
+    </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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiPageSideBar"
+      >
         <div
-          class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
           <div
-            class="euiText euiText--medium sql-query-panel-header"
+            class="euiFlexItem"
           >
-            <h3>
-              Query editor
-            </h3>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
+              >
+                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiEmptyPrompt"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <h2
+                class="euiTitle euiTitle--medium"
+              >
+                Error loading Datasources
+              </h2>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            class="euiSpacer euiSpacer--s"
-          />
-          <div
-            class="euiCodeEditorWrapper"
-            data-test-subj="codeEditorContainer"
-            style="width: 100%; height: 7rem;"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style="width: 100%; height: 7rem;"
             >
-              <p
-                class="euiText"
-              >
-                Press Enter to start editing.
-              </p>
-              <p
-                class="euiText"
+              <button
+                class="euiCodeEditorKeyboardHint"
+                data-test-subj="codeEditorHint"
+                id="some_html_id"
               >
-                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"
-              />
+                <p
+                  class="euiText"
+                >
+                  Press Enter to start editing.
+                </p>
+                <p
+                  class="euiText"
+                >
+                  When you're done, press Escape to stop editing.
+                </p>
+              </button>
               <div
-                aria-hidden="true"
-                class="ace_gutter"
-              >
-                <div
-                  class="ace_layer ace_gutter-layer ace_folding-enabled"
+                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
-                  class="ace_gutter-active-line"
-                />
-              </div>
-              <div
-                class="ace_scroller"
-              >
+                  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_content"
+                  class="ace_scroller"
                 >
                   <div
-                    class="ace_layer ace_print-margin-layer"
+                    class="ace_content"
                   >
                     <div
-                      class="ace_print-margin"
-                      style="left: 4px; visibility: hidden;"
+                      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_layer ace_marker-layer"
+                    class="ace_scrollbar-inner"
+                    style="width: 20px;"
                   />
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-h"
+                  style="display: none; height: 20px;"
+                >
                   <div
-                    class="ace_layer ace_text-layer"
-                    style="padding: 0px 4px;"
+                    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
-                    class="ace_layer ace_marker-layer"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   />
                   <div
-                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   >
-                    <div
-                      class="ace_cursor"
-                    />
+                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                   </div>
                 </div>
               </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            >
               <div
-                class="ace_scrollbar ace_scrollbar-v"
-                style="display: none; width: 20px;"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <div
-                  class="ace_scrollbar-inner"
-                  style="width: 20px;"
-                />
+                <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="ace_scrollbar ace_scrollbar-h"
-                style="display: none; height: 20px;"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <div
-                  class="ace_scrollbar-inner"
-                  style="height: 20px;"
-                />
+                <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
-                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <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;"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
-                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-                </div>
+                  <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="euiSpacer euiSpacer--l"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              style="padding: 20px 20px 0px 20px;"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                type="button"
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <div
+                  class="euiFlexItem"
                 >
-                  <span
-                    class="euiButton__text"
+                  <div
+                    class="euiText euiText--medium query-result-panel-header"
                   >
-                    Run
-                  </span>
-                </span>
-              </button>
+                    <h3>
+                      Results
+                    </h3>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                />
+              </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiSpacer euiSpacer--xxl"
+            />
+            <div
+              class="euiSpacer euiSpacer--xl"
+            />
+            <div
+              class="euiText euiText--medium"
+              style="color: rgb(63, 63, 63);"
             >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+              <div
+                class="euiTextAlign euiTextAlign--center"
               >
-                <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"
-            >
+                <h4>
+                  No result
+                </h4>
+              </div>
               <div
-                class="euiFlexItem"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <div
-                  class="euiText euiText--medium query-result-panel-header"
-                >
-                  <h3>
-                    Results
-                  </h3>
-                </div>
+                <p>
+                  Enter a query in the query editor above to see results.
+                </p>
               </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>
+              class="euiSpacer euiSpacer--xxl"
+            />
             <div
-              class="euiTextAlign euiTextAlign--center"
-            >
-              <p>
-                Enter a query in the query editor above to see results.
-              </p>
-            </div>
+              class="euiSpacer euiSpacer--xl"
+            />
           </div>
-          <div
-            class="euiSpacer euiSpacer--xxl"
-          />
-          <div
-            class="euiSpacer euiSpacer--xl"
-          />
         </div>
       </div>
     </div>
@@ -770,106 +1072,67 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
 
 exports[`<Main /> spec click run button, and response is not ok 1`] = `
 <div>
-  <div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
     <div
-      class="sql-console-query-container"
+      class="euiFlexItem"
     >
       <div
-        class="query-language-switch"
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFormControlLayout"
         >
           <div
-            class="euiFlexItem"
-          >
-            <h1
-              class="euiTitle euiTitle--large"
-            >
-              Query Workbench
-            </h1>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+            <div
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <legend
-                class="euiScreenReaderOnly"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                query-language-swtich
-              </legend>
+                Connection Name
+              </p>
               <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>
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
               </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"
+            </div>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <span
-                class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+              <button
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                type="button"
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -878,590 +1141,545 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
                   />
                 </svg>
-                <span
-                  class="euiButton__text"
-                >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+              </button>
+            </div>
           </div>
         </div>
       </div>
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div>
+    </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="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+          class="euiButtonGroup__buttons"
         >
-          <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;"
+          <label
+            class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+            for="some_html_id"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <span
+              class="euiButtonContent euiButton__content"
             >
-              <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;"
+              <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=""
                 />
-              </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;"
+                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=""
                 />
-                <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"
-          />
+                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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiPageSideBar"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
           <div
-            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            class="euiFlexItem"
           >
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                class="euiButton euiButton--primary euiButton--fullWidth"
                 type="button"
               >
                 <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
+                  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"
                   >
-                    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"
-                >
+                    <path
+                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
                   <span
                     class="euiButton__text"
                   >
-                    Clear
+                    Create
                   </span>
                 </span>
               </button>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiEmptyPrompt"
             >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <h2
+                class="euiTitle euiTitle--medium"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Explain
-                  </span>
-                </span>
-              </button>
+                Error loading Datasources
+              </h2>
             </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
       <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="sql-console-query-result"
+        class="euiPageContentBody"
       >
         <div
-          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
-        >
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            style="padding: 20px 20px 0px 20px;"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style="width: 100%; height: 7rem;"
             >
-              <div
-                class="euiFlexItem"
+              <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
-                  class="euiText euiText--medium query-result-panel-header"
+                  aria-hidden="true"
+                  class="ace_gutter"
                 >
-                  <h3>
-                    Results
-                  </h3>
+                  <div
+                    class="ace_layer ace_gutter-layer ace_folding-enabled"
+                  />
+                  <div
+                    class="ace_gutter-active-line"
+                  />
                 </div>
-              </div>
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              />
+                <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>
-          <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>
+              class="euiSpacer euiSpacer--l"
+            />
             <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"
+              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
             >
-              <legend
-                class="euiScreenReaderOnly"
-              >
-                query-language-swtich
-              </legend>
               <div
-                class="euiButtonGroup__buttons"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
-                  for="some_html_id"
+                <button
+                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                  type="button"
                 >
                   <span
                     class="euiButtonContent euiButton__content"
                   >
                     <span
-                      class="euiButton__text euiButtonGroupButton__textShift"
-                      data-text="SQL"
-                      title="SQL"
+                      class="euiButton__text"
                     >
-                      <input
-                        checked=""
-                        class="euiScreenReaderOnly"
-                        data-test-subj="SQL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      SQL
+                      Run
                     </span>
                   </span>
-                </label>
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text"
-                  for="some_html_id"
+                </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 euiButtonGroupButton__textShift"
-                      data-text="PPL"
-                      title="PPL"
+                      class="euiButton__text"
                     >
-                      <input
-                        class="euiScreenReaderOnly"
-                        data-test-subj="PPL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      PPL
+                      Clear
                     </span>
                   </span>
-                </label>
+                </button>
               </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"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
-                  />
-                </svg>
-                <span
-                  class="euiButton__text"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Explain
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
           </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"
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="sql-console-query-result"
         >
           <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;"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              style="padding: 20px 20px 0px 20px;"
             >
-              <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"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
-                  class="ace_content"
+                  class="euiFlexItem"
                 >
                   <div
-                    class="ace_layer ace_print-margin-layer"
+                    class="euiText euiText--medium query-result-panel-header"
                   >
-                    <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"
-                    />
+                    <h3>
+                      Results
+                    </h3>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ace_scrollbar ace_scrollbar-v"
-                style="display: none; width: 20px;"
-              >
                 <div
-                  class="ace_scrollbar-inner"
-                  style="width: 20px;"
+                  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="ace_scrollbar ace_scrollbar-h"
-                style="display: none; height: 20px;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <div
-                  class="ace_scrollbar-inner"
-                  style="height: 20px;"
-                />
+                <h4>
+                  No result
+                </h4>
               </div>
               <div
-                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <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>
+                <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>
+</div>
+`;
+
+exports[`<Main /> spec click run button, and response is ok 1`] = `
+<div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
+      >
+        <div
+          class="euiFormControlLayout"
+        >
           <div
-            class="euiSpacer euiSpacer--l"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            class="euiFormControlLayout__childrenWrapper"
           >
             <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"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Clear
-                  </span>
-                </span>
-              </button>
+                Connection Name
+              </p>
+              <div
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
               <button
-                class="euiButton euiButton--primary sql-editor-button"
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
                 type="button"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__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"
-                  >
-                    Explain
-                  </span>
-                </span>
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
+                  />
+                </svg>
               </button>
             </div>
           </div>
@@ -1470,65 +1688,517 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div
-        class="sql-console-query-result"
+    </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="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
+          class="euiButtonGroup__buttons"
         >
-          <div
-            style="padding: 20px 20px 0px 20px;"
+          <label
+            class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+            for="some_html_id"
           >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            <span
+              class="euiButtonContent euiButton__content"
             >
-              <div
-                class="euiFlexItem"
-              >
-                <div
-                  class="euiText euiText--medium query-result-panel-header"
-                >
-                  <h3>
-                    Results
-                  </h3>
+              <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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiPageSideBar"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
+          <div
+            class="euiFlexItem"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
+              >
+                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiText euiText--medium euiTreeView__wrapper"
+            >
+              <p
+                class="euiScreenReaderOnly"
+                id="some_html_id--instruction"
+              >
+                You can quickly navigate this list using arrow keys.
+              </p>
+              <ul
+                aria-describedby="some_html_id--instruction"
+                aria-label="Sample Folder Tree"
+                class="euiTreeView"
+                id="some_html_id"
+              >
+                <li
+                  class="euiTreeView__node"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-expanded="false"
+                    class="euiTreeView__nodeInner"
+                    data-test-subj="euiTreeViewButton-some_html_id"
+                    id="element_0"
+                  >
+                    <span
+                      class="euiTreeView__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiTreeView__nodeLabel"
+                    >
+                      2
+                    </span>
+                  </button>
+                  <div
+                    id="some_html_id"
+                  />
+                </li>
+                <li
+                  class="euiTreeView__node"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-expanded="false"
+                    class="euiTreeView__nodeInner"
+                    data-test-subj="euiTreeViewButton-some_html_id"
+                    id="element_1"
+                  >
+                    <span
+                      class="euiTreeView__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiTreeView__nodeLabel"
+                    >
+                      2
+                    </span>
+                  </button>
+                  <div
+                    id="some_html_id"
+                  />
+                </li>
+              </ul>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
+          <div
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+          >
+            <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="euiSpacer euiSpacer--xxl"
-          />
-          <div
-            class="euiSpacer euiSpacer--xl"
-          />
-          <div
-            class="euiText euiText--medium"
-            style="color: rgb(63, 63, 63);"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
             <div
-              class="euiTextAlign euiTextAlign--center"
+              style="padding: 20px 20px 0px 20px;"
             >
-              <h4>
-                No result
-              </h4>
+              <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="euiTextAlign euiTextAlign--center"
+              class="euiSpacer euiSpacer--xxl"
+            />
+            <div
+              class="euiSpacer euiSpacer--xl"
+            />
+            <div
+              class="euiText euiText--medium"
+              style="color: rgb(63, 63, 63);"
             >
-              <p>
-                Enter a query in the query editor above to see results.
-              </p>
+              <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
-            class="euiSpacer euiSpacer--xxl"
-          />
-          <div
-            class="euiSpacer euiSpacer--xl"
-          />
         </div>
       </div>
     </div>
@@ -1538,314 +2208,679 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
 
 exports[`<Main /> spec click run button, response fills null and missing values 1`] = `
 <div>
-  <div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
     <div
-      class="sql-console-query-container"
+      class="euiFlexItem"
     >
       <div
-        class="query-language-switch"
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFormControlLayout"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
+            >
+              <p
+                class="euiComboBoxPlaceholder"
+              >
+                Connection Name
+              </p>
+              <div
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
+            </div>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+    </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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <div
+        class="euiPageSideBar"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem"
           >
-            <h1
-              class="euiTitle euiTitle--large"
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              Query Workbench
-            </h1>
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
+              >
+                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiText euiText--medium euiTreeView__wrapper"
+            >
+              <p
+                class="euiScreenReaderOnly"
+                id="some_html_id--instruction"
+              >
+                You can quickly navigate this list using arrow keys.
+              </p>
+              <ul
+                aria-describedby="some_html_id--instruction"
+                aria-label="Sample Folder Tree"
+                class="euiTreeView"
+                id="some_html_id"
+              >
+                <li
+                  class="euiTreeView__node"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-expanded="false"
+                    class="euiTreeView__nodeInner"
+                    data-test-subj="euiTreeViewButton-some_html_id"
+                    id="element_0"
+                  >
+                    <span
+                      class="euiTreeView__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiTreeView__nodeLabel"
+                    />
+                  </button>
+                  <div
+                    id="some_html_id"
+                  />
+                </li>
+                <li
+                  class="euiTreeView__node"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-expanded="false"
+                    class="euiTreeView__nodeInner"
+                    data-test-subj="euiTreeViewButton-some_html_id"
+                    id="element_1"
+                  >
+                    <span
+                      class="euiTreeView__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiTreeView__nodeLabel"
+                    />
+                  </button>
+                  <div
+                    id="some_html_id"
+                  />
+                </li>
+              </ul>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
+      <div
+        class="euiPageContentBody"
+      >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+            <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"
             >
-              <legend
-                class="euiScreenReaderOnly"
-              >
-                query-language-swtich
-              </legend>
               <div
-                class="euiButtonGroup__buttons"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
-                  for="some_html_id"
+                <button
+                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                  type="button"
                 >
                   <span
                     class="euiButtonContent euiButton__content"
                   >
                     <span
-                      class="euiButton__text euiButtonGroupButton__textShift"
-                      data-text="SQL"
-                      title="SQL"
+                      class="euiButton__text"
                     >
-                      <input
-                        checked=""
-                        class="euiScreenReaderOnly"
-                        data-test-subj="SQL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      SQL
+                      Run
                     </span>
                   </span>
-                </label>
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text"
-                  for="some_html_id"
+                </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 euiButtonGroupButton__textShift"
-                      data-text="PPL"
-                      title="PPL"
+                      class="euiButton__text"
                     >
-                      <input
-                        class="euiScreenReaderOnly"
-                        data-test-subj="PPL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      PPL
+                      Clear
                     </span>
                   </span>
-                </label>
+                </button>
               </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"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
-                  />
-                </svg>
-                <span
-                  class="euiButton__text"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Explain
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
           </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"
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="sql-console-query-result"
         >
           <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;"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              style="padding: 20px 20px 0px 20px;"
             >
-              <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"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
-                  class="ace_content"
+                  class="euiFlexItem"
                 >
                   <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"
+                    class="euiText euiText--medium query-result-panel-header"
                   >
-                    <div
-                      class="ace_cursor"
-                    />
+                    <h3>
+                      Results
+                    </h3>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ace_scrollbar ace_scrollbar-v"
-                style="display: none; width: 20px;"
-              >
                 <div
-                  class="ace_scrollbar-inner"
-                  style="width: 20px;"
+                  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="ace_scrollbar ace_scrollbar-h"
-                style="display: none; height: 20px;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <div
-                  class="ace_scrollbar-inner"
-                  style="height: 20px;"
-                />
+                <h4>
+                  No result
+                </h4>
               </div>
               <div
-                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <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>
+                <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>
+</div>
+`;
+
+exports[`<Main /> spec click translation button, and response is ok 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
+      >
+        <div
+          class="euiFormControlLayout"
+        >
           <div
-            class="euiSpacer euiSpacer--l"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            class="euiFormControlLayout__childrenWrapper"
           >
             <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"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Clear
-                  </span>
-                </span>
-              </button>
+                Connection Name
+              </p>
+              <div
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
               <button
-                class="euiButton euiButton--primary sql-editor-button"
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
                 type="button"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__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"
-                  >
-                    Explain
-                  </span>
-                </span>
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fill-rule="non-zero"
+                  />
+                </svg>
               </button>
             </div>
           </div>
@@ -1854,385 +2889,528 @@ exports[`<Main /> spec click run button, response fills null and missing values
       <div
         class="euiSpacer euiSpacer--l"
       />
+    </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 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            class="euiButton__text"
+          >
+            SQL documentation
+          </span>
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    class="euiPage euiPage--grow"
+  >
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
       <div
-        class="sql-console-query-result"
+        class="euiPageSideBar"
       >
         <div
-          class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
           <div
-            style="padding: 20px 20px 0px 20px;"
+            class="euiFlexItem"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <div
-                class="euiFlexItem"
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
               >
-                <div
-                  class="euiText euiText--medium query-result-panel-header"
-                >
-                  <h3>
-                    Results
-                  </h3>
-                </div>
-              </div>
-              <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
-              />
+                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
             </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>
+              class="euiSpacer euiSpacer--l"
+            />
             <div
-              class="euiTextAlign euiTextAlign--center"
+              class="euiEmptyPrompt"
             >
-              <p>
-                Enter a query in the query editor above to see results.
-              </p>
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--xxLarge euiIcon--danger"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+              <div
+                class="euiSpacer euiSpacer--m"
+              />
+              <h2
+                class="euiTitle euiTitle--medium"
+              >
+                Error loading Datasources
+              </h2>
             </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </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>
     <div
-      class="sql-console-query-container"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
     >
       <div
-        class="query-language-switch"
+        class="euiPageContentBody"
       >
         <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="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style="width: 100%; height: 7rem;"
             >
-              <legend
-                class="euiScreenReaderOnly"
+              <button
+                class="euiCodeEditorKeyboardHint"
+                data-test-subj="codeEditorHint"
+                id="some_html_id"
               >
-                query-language-swtich
-              </legend>
+                <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="euiButtonGroup__buttons"
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
-                  for="some_html_id"
+                <button
+                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                  type="button"
                 >
                   <span
                     class="euiButtonContent euiButton__content"
                   >
                     <span
-                      class="euiButton__text euiButtonGroupButton__textShift"
-                      data-text="SQL"
-                      title="SQL"
+                      class="euiButton__text"
                     >
-                      <input
-                        checked=""
-                        class="euiScreenReaderOnly"
-                        data-test-subj="SQL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      SQL
+                      Run
                     </span>
                   </span>
-                </label>
-                <label
-                  class="euiButtonGroupButton euiButtonGroupButton--text"
-                  for="some_html_id"
+                </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 euiButtonGroupButton__textShift"
-                      data-text="PPL"
-                      title="PPL"
+                      class="euiButton__text"
                     >
-                      <input
-                        class="euiScreenReaderOnly"
-                        data-test-subj="PPL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      PPL
+                      Clear
                     </span>
                   </span>
-                </label>
+                </button>
               </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"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <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"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
-                  <path
-                    d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
-                  />
-                </svg>
-                <span
-                  class="euiButton__text"
-                >
-                  SQL documentation
-                </span>
-              </span>
-            </a>
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Explain
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
           </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"
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="sql-console-query-result"
         >
           <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;"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              style="padding: 20px 20px 0px 20px;"
             >
-              <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"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
-                  class="ace_content"
+                  class="euiFlexItem"
                 >
                   <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"
+                    class="euiText euiText--medium query-result-panel-header"
                   >
-                    <div
-                      class="ace_cursor"
-                    />
+                    <h3>
+                      Results
+                    </h3>
                   </div>
                 </div>
-              </div>
-              <div
-                class="ace_scrollbar ace_scrollbar-v"
-                style="display: none; width: 20px;"
-              >
                 <div
-                  class="ace_scrollbar-inner"
-                  style="width: 20px;"
+                  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="ace_scrollbar ace_scrollbar-h"
-                style="display: none; height: 20px;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <div
-                  class="ace_scrollbar-inner"
-                  style="height: 20px;"
-                />
+                <h4>
+                  No result
+                </h4>
               </div>
               <div
-                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                class="euiTextAlign euiTextAlign--center"
               >
-                <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>
+                <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>
+</div>
+`;
+
+exports[`<Main /> spec renders the component 1`] = `
+<div>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiText euiText--medium"
+      >
+        Data Sources
+      </div>
+      <div
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox"
+        role="combobox"
+      >
+        <div
+          class="euiFormControlLayout"
+        >
           <div
-            class="euiSpacer euiSpacer--l"
-          />
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+            class="euiFormControlLayout__childrenWrapper"
           >
             <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"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+              <p
+                class="euiComboBoxPlaceholder"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Clear
-                  </span>
-                </span>
-              </button>
+                Connection Name
+              </p>
+              <div
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
             </div>
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
               <button
-                class="euiButton euiButton--primary sql-editor-button"
+                aria-label="Open list of options"
+                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
                 type="button"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
-                >
-                  <span
-                    class="euiButton__text"
-                  >
-                    Explain
-                  </span>
-                </span>
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
               </button>
             </div>
           </div>
@@ -2241,445 +3419,466 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
       <div
         class="euiSpacer euiSpacer--l"
       />
-      <div
-        class="sql-console-query-result"
+    </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="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
+          class="euiButtonGroup__buttons"
         >
-          <div
-            style="padding: 20px 20px 0px 20px;"
+          <label
+            class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+            for="some_html_id"
           >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            <span
+              class="euiButtonContent euiButton__content"
             >
-              <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);"
+              <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"
           >
-            <div
-              class="euiTextAlign euiTextAlign--center"
-            >
-              <h4>
-                No result
-              </h4>
-            </div>
-            <div
-              class="euiTextAlign euiTextAlign--center"
+            <span
+              class="euiButtonContent euiButton__content"
             >
-              <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"
-          />
+              <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>
-      </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>
-`;
-
-exports[`<Main /> spec renders the component 1`] = `
-<div>
-  <div>
+  <div
+    class="euiPage euiPage--grow"
+  >
     <div
-      class="sql-console-query-container"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     >
       <div
-        class="query-language-switch"
+        class="euiPageSideBar"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem"
           >
-            <h1
-              class="euiTitle euiTitle--large"
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              Query Workbench
-            </h1>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <fieldset
-              class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text query-language-switch"
+              <button
+                class="euiButton euiButton--primary euiButton--fullWidth"
+                type="button"
+              >
+                <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"
+                  >
+                    Create
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiText euiText--medium euiTreeView__wrapper"
             >
-              <legend
+              <p
                 class="euiScreenReaderOnly"
+                id="some_html_id--instruction"
               >
-                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"
+                You can quickly navigate this list using arrow keys.
+              </p>
+              <ul
+                aria-describedby="some_html_id--instruction"
+                aria-label="Sample Folder Tree"
+                class="euiTreeView"
+                id="some_html_id"
+              >
+                <li
+                  class="euiTreeView__node"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-expanded="false"
+                    class="euiTreeView__nodeInner"
+                    data-test-subj="euiTreeViewButton-some_html_id"
+                    id="element_0"
                   >
                     <span
-                      class="euiButton__text euiButtonGroupButton__textShift"
-                      data-text="SQL"
-                      title="SQL"
+                      class="euiTreeView__iconWrapper"
                     >
-                      <input
-                        checked=""
-                        class="euiScreenReaderOnly"
-                        data-test-subj="SQL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon-isLoading"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
                       />
-                      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"
+                      class="euiTreeView__nodeLabel"
                     >
-                      <input
-                        class="euiScreenReaderOnly"
-                        data-test-subj="PPL"
-                        id="some_html_id"
-                        name="some_html_id"
-                        type="radio"
-                        value=""
-                      />
-                      PPL
+                      .kibana_1
                     </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>
+                  </button>
+                  <div
+                    id="some_html_id"
+                  />
+                </li>
+              </ul>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+      role="main"
+    >
       <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div>
+        class="euiPageContentBody"
+      >
         <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"
-          />
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        />
+        <div
+          class="euiSpacer euiSpacer--l"
+        />
+        <div>
           <div
-            class="euiCodeEditorWrapper"
-            data-test-subj="codeEditorContainer"
-            style="width: 100%; height: 7rem;"
+            class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiCodeEditorWrapper"
+              data-test-subj="codeEditorContainer"
+              style="width: 100%; height: 7rem;"
             >
-              <p
-                class="euiText"
-              >
-                Press Enter to start editing.
-              </p>
-              <p
-                class="euiText"
+              <button
+                class="euiCodeEditorKeyboardHint"
+                data-test-subj="codeEditorHint"
+                id="some_html_id"
               >
-                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"
-              />
+                <p
+                  class="euiText"
+                >
+                  Press Enter to start editing.
+                </p>
+                <p
+                  class="euiText"
+                >
+                  When you're done, press Escape to stop editing.
+                </p>
+              </button>
               <div
-                aria-hidden="true"
-                class="ace_gutter"
-              >
-                <div
-                  class="ace_layer ace_gutter-layer ace_folding-enabled"
+                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
-                  class="ace_gutter-active-line"
-                />
-              </div>
-              <div
-                class="ace_scroller"
-              >
+                  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_content"
+                  class="ace_scroller"
                 >
                   <div
-                    class="ace_layer ace_print-margin-layer"
+                    class="ace_content"
                   >
                     <div
-                      class="ace_print-margin"
-                      style="left: 4px; visibility: hidden;"
+                      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_layer ace_marker-layer"
+                    class="ace_scrollbar-inner"
+                    style="width: 20px;"
                   />
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-h"
+                  style="display: none; height: 20px;"
+                >
                   <div
-                    class="ace_layer ace_text-layer"
-                    style="padding: 0px 4px;"
+                    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
-                    class="ace_layer ace_marker-layer"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   />
                   <div
-                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
                   >
-                    <div
-                      class="ace_cursor"
-                    />
+                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                   </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"
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                type="button"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Run
+                    <span
+                      class="euiButton__text"
+                    >
+                      Run
+                    </span>
                   </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Clear
+                    <span
+                      class="euiButton__text"
+                    >
+                      Clear
+                    </span>
                   </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <button
-                class="euiButton euiButton--primary sql-editor-button"
-                type="button"
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButton__content"
+                <button
+                  class="euiButton euiButton--primary sql-editor-button"
+                  type="button"
                 >
                   <span
-                    class="euiButton__text"
+                    class="euiButtonContent euiButton__content"
                   >
-                    Explain
+                    <span
+                      class="euiButton__text"
+                    >
+                      Explain
+                    </span>
                   </span>
-                </span>
-              </button>
+                </button>
+              </div>
             </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"
+          class="euiSpacer euiSpacer--l"
+        />
+        <div
+          class="sql-console-query-result"
         >
           <div
-            style="padding: 20px 20px 0px 20px;"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+              style="padding: 20px 20px 0px 20px;"
             >
               <div
-                class="euiFlexItem"
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
               >
                 <div
-                  class="euiText euiText--medium query-result-panel-header"
+                  class="euiFlexItem"
                 >
-                  <h3>
-                    Results
-                  </h3>
+                  <div
+                    class="euiText euiText--medium query-result-panel-header"
+                  >
+                    <h3>
+                      Results
+                    </h3>
+                  </div>
                 </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                />
               </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>
+              class="euiSpacer euiSpacer--xxl"
+            />
             <div
-              class="euiTextAlign euiTextAlign--center"
+              class="euiSpacer euiSpacer--xl"
+            />
+            <div
+              class="euiText euiText--medium"
+              style="color: rgb(63, 63, 63);"
             >
-              <p>
-                Enter a query in the query editor above to see results.
-              </p>
+              <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
-            class="euiSpacer euiSpacer--xxl"
-          />
-          <div
-            class="euiSpacer euiSpacer--xl"
-          />
         </div>
       </div>
     </div>
diff --git a/public/components/Main/main.test.tsx b/public/components/Main/main.test.tsx
index 8c08e0cc..5a3c2d48 100644
--- a/public/components/Main/main.test.tsx
+++ b/public/components/Main/main.test.tsx
@@ -12,7 +12,8 @@ import {
   mockQueryResultJDBCResponse,
   mockNotOkQueryResultResponse,
   mockQueryTranslationResponse,
-  mockResultWithNull
+  mockResultWithNull,
+  mockHttpQuery
 } from "../../../test/mocks/mockData";
 import Main from "./main";
 
@@ -20,18 +21,26 @@ const setBreadcrumbsMock = jest.fn();
 
 describe("<Main /> spec", () => {
 
-  it("renders the component", () => {
-    render(
-      <Main httpClient={httpClientMock} setBreadcrumbs={setBreadcrumbsMock} />
-    );
+  it("renders the component", async () => {
+    
+    const client = httpClientMock;
+    client.post = jest.fn().mockResolvedValue(mockHttpQuery)
+    
+    const asyncTest = () => {
+      render(
+        <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
+      );
+    };
+    await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
+
   it("click run button, and response is ok", async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryResultJDBCResponse);
 
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onRunButton = getByText('Run');
@@ -46,7 +55,7 @@ describe("<Main /> spec", () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockResultWithNull);
 
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onRunButton = getByText('Run');
@@ -61,7 +70,7 @@ describe("<Main /> spec", () => {
     const client = httpClientMock;
     client.post = jest.fn().mockRejectedValue('err');
 
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onRunButton = getByText('Run');
@@ -76,7 +85,7 @@ describe("<Main /> spec", () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockNotOkQueryResultResponse);
 
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onRunButton = getByText('Run');
@@ -90,7 +99,7 @@ describe("<Main /> spec", () => {
   it("click translation button, and response is ok", async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryTranslationResponse);
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onTranslateButton = getByText('Explain');
@@ -103,7 +112,7 @@ describe("<Main /> spec", () => {
 
   it("click clear button", async () => {
     const client = httpClientMock;
-    const { getByText } = render(
+    const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
     const onClearButton = getByText('Clear');
@@ -111,7 +120,6 @@ describe("<Main /> spec", () => {
       fireEvent.click(onClearButton);
     };
     await asyncTest();
-    expect(client.post).not.toHaveBeenCalled();
     expect(document.body.children[0]).toMatchSnapshot();
   });
 });
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 1b458913..a80bdd41 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -3,7 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { 
+  EuiButton, 
+  EuiFlexGroup, 
+  EuiFlexItem,
+  EuiSpacer, 
+  EuiPageSideBar , 
+  EuiPanel, 
+  EuiPage, 
+  EuiPageContent,
+  EuiPageContentBody, 
+  EuiComboBox, 
+  EuiText, 
+} from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
 import React from 'react';
@@ -20,6 +32,7 @@ import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
 import { SQLPage } from '../SQLPage/SQLPage';
+import { TableView } from '../SQLPage/TableView'
 
 interface ResponseData {
   ok: boolean;
@@ -87,6 +100,7 @@ interface MainState {
   itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
   messages: Array<QueryMessage>;
   isResultFullScreen: boolean;
+  selectedDatasource: string;
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -218,8 +232,8 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
+      selectedDatasource: ''
     };
-
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
     this.updatePPLQueries = _.debounce(this.updatePPLQueries, 250).bind(this);
@@ -611,6 +625,12 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
+  handleComboOptionChange = (selectedOption: string) => {
+    this.setState({ 
+      selectedDatasource: selectedOption });
+  };
+
+
   render() {
     let page;
     let link;
@@ -685,28 +705,67 @@ export class Main extends React.Component<MainProps, MainState> {
     }
 
     return (
-      <div>
-        <div className="sql-console-query-container">
-          <div className="query-language-switch">
-            <EuiFlexGroup alignItems="center">
-              <EuiFlexItem>
-                <EuiTitle size="l">
-                  <h1>Query Workbench</h1>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <Switch onChange={this.onChange} language={this.state.language} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
-                  {linkTitle}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </div>
-          <EuiSpacer size="l" />
-          <div>{page}</div>
-
+      <>
+        <EuiFlexGroup direction='row' alignItems='center'>
+          <EuiFlexItem>
+            <EuiText>Data Sources</EuiText>
+            <EuiComboBox
+              singleSelection={true}
+              placeholder='Connection Name'
+              options={[
+                { label: 'S3', value: 'S3' },
+                { label: 'Opensearch', value: 'Opensearch' },
+              ]}
+              selectedOptions={this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []}
+              onChange={(selectedOptions) => {
+                const selectedValue = selectedOptions[0] ? selectedOptions[0].value : '';
+                this.handleComboOptionChange(selectedValue);
+              }}
+            />
+            <EuiSpacer />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <Switch onChange={this.onChange} language={this.state.language} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
+              {linkTitle}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiPage paddingSize='none'>
+          {this.state.language === 'SQL' && (
+            <EuiPanel>
+              <EuiPageSideBar>
+                <EuiFlexGroup direction="column">
+                  <EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        iconType="arrowDown"
+                        iconSide="right"
+                        fullWidth
+                      >
+                        Create
+                      </EuiButton>
+                    </EuiFlexItem>
+                    <EuiSpacer />
+                    <TableView 
+                      http={this.httpClient} 
+                      dataConnection={this.state.selectedDatasource}
+                      />
+                    <EuiSpacer />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageSideBar>
+            </EuiPanel>
+          )}
+
+          <EuiPageContent paddingSize='m'>
+            <EuiPageContentBody>
+              <EuiFlexGroup alignItems="center">
+              </EuiFlexGroup>
+              <EuiSpacer size="l" />
+              <div>{page}</div>
           <EuiSpacer size="l" />
           <div className="sql-console-query-result">
             <QueryResults
@@ -746,8 +805,11 @@ export class Main extends React.Component<MainProps, MainState> {
               setIsResultFullScreen={this.setIsResultFullScreen}
             />
           </div>
-        </div>
-      </div>
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPage>
+      </>
+      
     );
   }
 }
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 162d4c70..94808e17 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -105,8 +105,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <EuiPanel className="sql-console-query-editor container-panel" paddingSize="l">
-        <EuiText className="sql-query-panel-header"><h3>Query editor</h3></EuiText>
+      <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
         <EuiSpacer size="s" />
         <EuiCodeEditor
           mode="sql"
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
new file mode 100644
index 00000000..328a4330
--- /dev/null
+++ b/public/components/SQLPage/TableView.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import React, { useState, useEffect } from "react";
+import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from "@elastic/eui";
+import _ from 'lodash';
+import { CoreStart } from '../../../../../src/core/public';
+import { ON_LOAD_QUERY } from "../../../common/constants";
+
+interface CustomView {
+    http: CoreStart['http'],
+    dataConnection: string
+}
+
+export const TableView = ({ http, dataConnection }: CustomView) => {
+    const [tablenames, setTablenames] = useState<string[]>([]);
+    const [selectedNode, setSelectedNode] = useState<string | null>(null);
+    const [childData, setChildData] = useState<string[]>([]);
+    const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
+    const [indexData, setIndexedData] = useState<string[]>([]);
+
+    const getSidebarContent = () => {
+        const query = { query: ON_LOAD_QUERY }
+        http
+            .post(`/api/sql_console/sqlquery`, {
+                body: JSON.stringify(query),
+            })
+            .then((res) => {
+                const responseObj = res.data.resp
+                    ? JSON.parse(res.data.resp)
+                    : '';
+                const datarows: any[][] = _.get(responseObj, 'datarows');
+                const fields = datarows.map((data) => {
+                    return data[2]
+                })
+                setTablenames(fields)
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    };
+
+    useEffect(() => {
+        
+        getSidebarContent();
+    }, []); 
+
+    const handleNodeClick = (nodeLabel: string) => {
+
+        //         // will update after new query
+
+        const newData = ["Child 1", "Child 2", "Child 3"]; 
+        setChildData(newData);
+        setSelectedNode(nodeLabel);
+    };
+
+    const handleChildClick = (nodeLabel1: string) => {
+
+        // will update after new query
+
+        const newData1 = ["Child 4", "Child 5", "Child 6"]; 
+        setIndexedData(newData1);
+        setSelectedChildNode(nodeLabel1);
+    };
+
+
+    const treeData = tablenames.map((element, index) => ({
+        label: element,
+        icon: <EuiIcon type='database' size="m" />,
+        id: 'element_' + index,
+        callback: () => handleNodeClick(element),
+        isSelectable: true, 
+        isExpanded: true,
+        children: dataConnection === 'S3' && selectedNode === element ? childData.map(child => ({
+            label: child,
+            id: `${element}_${child}`,
+            icon: <EuiIcon type='tableDensityCompact' size="s" />,
+            callback: () => handleChildClick(child),
+            sSelectable: true, 
+            isExpanded: true,
+            children: selectedChildNode === child ? indexData.map(indexChild => ({
+                label: indexChild,
+                id: `${child}_${indexChild}`,
+                icon: <EuiIcon type='bolt' size="s" />
+            })):undefined,
+        })) : undefined,
+    }));
+
+    return (
+        <>
+            {treeData.length > 0 ? 
+                <EuiTreeView
+                    aria-label="Sample Folder Tree"
+                    items={treeData}
+                />
+            :   <EuiEmptyPrompt
+                    iconType="alert"
+                    iconColor="danger"
+                    title={<h2>Error loading Datasources</h2>}
+                />
+            }
+        </>
+    )
+}
+
diff --git a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
index efdbd65e..d2fe7008 100644
--- a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
+++ b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
@@ -3,15 +3,8 @@
 exports[`<SQLPage /> spec renders the component 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+    class="euiPanel euiPanel--paddingMedium 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"
     />
@@ -195,15 +188,8 @@ exports[`<SQLPage /> spec renders the component 1`] = `
 exports[`<SQLPage /> spec tests the action buttons 1`] = `
 <div>
   <div
-    class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow sql-console-query-editor container-panel"
+    class="euiPanel euiPanel--paddingMedium 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"
     />
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index 7b93e075..d8791140 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -12,4 +12,4 @@ export const SMALL_COLUMN_WIDTH = '27px';
 
 // Tabs constants
 export const TAB_CONTAINER_ID = 'tabsContainer';
-export const MESSAGE_TAB_LABEL = 'Output';
+export const MESSAGE_TAB_LABEL = 'Output';
\ No newline at end of file
diff --git a/test/mocks/mockData.ts b/test/mocks/mockData.ts
index 1418720e..2daadf9d 100644
--- a/test/mocks/mockData.ts
+++ b/test/mocks/mockData.ts
@@ -2334,3 +2334,10 @@ export const mockResultWithNull =
     "resp": "{\"schema\":[{\"name\":\"name\",\"type\":\"keyword\"},{\"name\":\"city\",\"type\":\"keyword\"}],\"datarows\":[[\"Hattie\",\"Seattle\"],[\"John\"]]}"
   }
 }
+export const mockHttpQuery = 
+{
+  "data": {
+    "ok": true,
+    resp: "{\"schema\":[{\"name\":\"TABLE_CAT\",\"type\":\"keyword\"}],\"datarows\":[[\"opensearch\",null,\".kibana_1\",\"BASE TABLE\",null,null,null,null,null,null]]}"
+  }
+}
\ No newline at end of file

From 9fd9314733781d4084280686ef2eced4770dee7b Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Sat, 30 Sep 2023 10:22:39 -0700
Subject: [PATCH 32/40] update packages and tsconfig (#130)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants.ts       |   7 -
 common/constants/index.ts |   2 +
 package.json              |  19 +-
 tsconfig.json             |  22 +-
 yarn.lock                 | 492 ++++++--------------------------------
 5 files changed, 91 insertions(+), 451 deletions(-)
 delete mode 100644 common/constants.ts

diff --git a/common/constants.ts b/common/constants.ts
deleted file mode 100644
index 1a50502e..00000000
--- a/common/constants.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-
-export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`
diff --git a/common/constants/index.ts b/common/constants/index.ts
index 3ca8dd41..e43eed0e 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -8,6 +8,8 @@ export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
+export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
+
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
   { label: 'Covering Index', value: 'covering' },
diff --git a/package.json b/package.json
index d57ac78b..da506ddc 100644
--- a/package.json
+++ b/package.json
@@ -27,36 +27,21 @@
   },
   "devDependencies": {
     "@testing-library/user-event": "^13.1.9",
-    "@types/hapi-latest": "npm:@types/hapi@18.0.7",
-    "@types/react-router-dom": "^5.3.2",
     "cypress": "^5.0.0",
     "eslint": "^6.8.0",
-    "eslint-plugin-no-unsanitized": "^3.0.2",
-    "eslint-plugin-prefer-object-spread": "^1.2.1",
     "husky": "^4.2.5",
     "jest-raw-loader": "^1.0.1",
     "lint-staged": "^10.2.0",
     "mutationobserver-shim": "^0.3.3",
-    "ts-jest": "^26.1.0",
-    "ts-node": "^8.9.1",
-    "tslint": "^6.1.2",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-plugin-prettier": "^2.0.1"
+    "ts-jest": "^29.1.0"
   },
   "resolutions": {
-    "**/@types/node": "10.12.27",
-    "@types/react": "16.3.14",
-    "**/@types/angular": "1.6.50",
-    "**/@types/jest": "^24.0.9",
-    "**/@types/react-dom": "^16.0.5",
-    "**/@types/react-router-dom": "^4.3.1",
     "ansi-regex": "^5.0.1",
     "eslint-utils": "^2.0.0",
     "json-schema": "^0.4.0",
-    "**/@types/react": "16.3.14",
     "yaml": "^2.2.2",
     "tough-cookie": "^4.1.3",
     "semver": "^7.5.2",
     "@cypress/request": "^3.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index de8ca7dc..83c53f54 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,19 +4,31 @@
 
   // tell the TypeScript compiler where to find your source files
   "include": [
+    "common/**/*",
     "server/**/*",
     "public/**/*",
     "test/**/*",
+    "../../typings/**/*",
     "babel.config.js"
   ],
   "exclude": ["node_modules", "*/node_modules/"],
 
   "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "baseUrl": ".",
+    "target": "esnext",
+    "module": "commonjs",
+    "outDir": "./target",
+    "noEmit": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": false,
-    "suppressImplicitAnyIndexErrors": true,
-    "lib": ["es5", "es2015", "es2017", "dom"]
+    "forceConsistentCasingInFileNames": true,
+    "allowUnusedLabels": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "alwaysStrict": false,
+    "noImplicitUseStrict": false,
+    "types": ["jest", "node"]
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 651a17b8..84c997b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,7 +23,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.7.6":
+"@babel/runtime@^7.12.5":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -77,36 +77,23 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@hapi/hoek@^9.0.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
-  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
-
-"@hapi/topo@^5.0.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012"
-  integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
-  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
   dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^13.0.0"
+    "@sinclair/typebox" "^0.27.8"
 
-"@jest/types@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
-  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
   dependencies:
+    "@jest/schemas" "^29.6.3"
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
     "@types/node" "*"
-    "@types/yargs" "^15.0.0"
+    "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
 "@samverschueren/stream-to-observable@^0.3.0":
@@ -116,22 +103,10 @@
   dependencies:
     any-observable "^0.3.0"
 
-"@sideway/address@^4.1.3":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
-  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
-"@sideway/formula@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
-  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
-
-"@sideway/pinpoint@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
-  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
+"@sinclair/typebox@^0.27.8":
+  version "0.27.8"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
 "@testing-library/user-event@^13.1.9":
   version "13.5.0"
@@ -140,54 +115,6 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@types/angular@1.6.50":
-  version "1.6.50"
-  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.50.tgz#8b6599088d80f68ef0cad7d3a2062248ebe72b3d"
-  integrity sha512-D3KB0PdaxdwtA44yOpK+NtptTscKWgUzXmf8fiLaaVxnX+b7QQ+dUMsyeVDweCQ6VX4PMwkd6x2hJ0X+ISIsoQ==
-
-"@types/boom@*":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@types/boom/-/boom-7.3.2.tgz#6269480d11098c26cfbfca5059403902a530847a"
-  integrity sha512-W8+6CANZz/BmgzATboKXvEDtO3SHSj86omcU/2pMCkUQhqhgucB8sgcmdRadXDEvXFRiRhME0rcyj1GIj3LC9w==
-
-"@types/catbox@*":
-  version "10.0.7"
-  resolved "https://registry.yarnpkg.com/@types/catbox/-/catbox-10.0.7.tgz#50a0f927924ace358cc0193c6d9f1790d4219fa6"
-  integrity sha512-8vjnM1eyHKwWfcbq7qb2NN4ltUgm4nVsT9QIM6IW4KqxbQbfQLbRApNTN+B3hvHvuFTHyvhJjZrBY3wNPp4tjA==
-
-"@types/hapi-latest@npm:@types/hapi@18.0.7":
-  version "18.0.7"
-  resolved "https://registry.yarnpkg.com/@types/hapi/-/hapi-18.0.7.tgz#890899a7af867cdc3e770b2a03d6e9fd61c11b9a"
-  integrity sha512-rhOtvarF2ka4NAjEURRWEwx98oDtOiaQYLkPdmsA0yXe5U6a9/YJjAI/JtE4SnWQ+vTrCKSDhVGcQngZqHrU7A==
-  dependencies:
-    "@types/boom" "*"
-    "@types/catbox" "*"
-    "@types/iron" "*"
-    "@types/mimos" "*"
-    "@types/node" "*"
-    "@types/podium" "*"
-    "@types/shot" "*"
-    joi "^17.3.0"
-
-"@types/history@*":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-5.0.0.tgz#29f919f0c8e302763798118f45b19cab4a886f14"
-  integrity sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==
-  dependencies:
-    history "*"
-
-"@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
-"@types/iron@*":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@types/iron/-/iron-5.0.2.tgz#d64771b5c1d87d3c1a8a5bcaa3e02259069b8672"
-  integrity sha512-u1l5xO5BtLlPfeiy60vrC9Y30cR8gM7chD5npIAETZaOlGoT8KHqtQQpmlU5dZejhJSfIBSX0zBHnKW+0fw5qA==
-  dependencies:
-    "@types/node" "*"
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -200,14 +127,6 @@
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
-"@types/istanbul-reports@^1.1.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
-  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-    "@types/istanbul-lib-report" "*"
-
 "@types/istanbul-reports@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
@@ -215,26 +134,7 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^24.0.9":
-  version "24.9.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.9.1.tgz#02baf9573c78f1b9974a5f36778b366aa77bd534"
-  integrity sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==
-  dependencies:
-    jest-diff "^24.3.0"
-
-"@types/mime-db@*":
-  version "1.43.1"
-  resolved "https://registry.yarnpkg.com/@types/mime-db/-/mime-db-1.43.1.tgz#c2a0522453bb9b6e84ee48b7eef765d19bcd519e"
-  integrity sha512-kGZJY+R+WnR5Rk+RPHUMERtb2qBRViIHCBdtUrY+NmwuGb8pQdfTqQiCKPrxpdoycl8KWm2DLdkpoSdt479XoQ==
-
-"@types/mimos@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/mimos/-/mimos-3.0.3.tgz#c1a35a5c31ae99eb86e6607962280c05989f3e57"
-  integrity sha512-jtStUPuHpJ+LVK+e1K9SbD2V00IOAqAKgVVkBRmCdHG20VQaE3KOt7FincknY1uyyZNq7MKF44Gs0fon2v9oig==
-  dependencies:
-    "@types/mime-db" "*"
-
-"@types/node@*", "@types/node@10.12.27":
+"@types/node@*":
   version "10.12.27"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.27.tgz#eb3843f15d0ba0986cc7e4d734d2ee8b50709ef8"
   integrity sha512-e9wgeY6gaY21on3ve0xAjgBVjGDWq/xUteK0ujsE53bUoxycMkqfnkUgMt6ffZtykZ5X12Mg3T7Pw4TRCObDKg==
@@ -244,58 +144,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/podium@*":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/podium/-/podium-1.0.1.tgz#f51a419959584f2ffb8f849e5b33f2b99f7ee1f9"
-  integrity sha512-dcg8V5wKgrvNIBk2hzgK3gHobZ0u7pXW36NigfJq+lBA+/fqI6GAI0bdjLAEkZC67EsaVErtePkqipJPsszN7Q==
-
-"@types/react-dom@^16.0.5":
-  version "16.9.16"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39"
-  integrity sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg==
-  dependencies:
-    "@types/react" "^16"
-
-"@types/react-router-dom@^4.3.1":
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
-  integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router-dom@^5.3.2":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.18"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
-  integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@16.3.14", "@types/react@^16":
-  version "16.3.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.14.tgz#f90ac6834de172e13ecca430dcb6814744225d36"
-  integrity sha512-wNUGm49fPl7eE2fnYdF0v5vSOrUMdKMQD/4NwtQRnb6mnPwtkhabmuFz37eq90+hhyfz0pWd38jkZHOcaZ6LGw==
-  dependencies:
-    csstype "^2.2.0"
-
-"@types/shot@*":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/shot/-/shot-4.0.1.tgz#a50f56bde37db57184cdb43174ba4fea9c0c7897"
-  integrity sha512-LUJWxDKYWmmUpVXDWZ78hFIrqb/ho9RoKqBAFRJw4OHOS3qCKCoXCyzrfmf24lbO4COYfqL0iEWNArOfKEYW9g==
-  dependencies:
-    "@types/node" "*"
-
 "@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz#0ecc1b9259b76598ef01942f547904ce61a6a77d"
@@ -311,17 +159,10 @@
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
   integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
 
-"@types/yargs@^13.0.0":
-  version "13.0.12"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.12.tgz#d895a88c703b78af0465a9de88aa92c61430b092"
-  integrity sha512-qCxJE1qgz2y0hA4pIxjBR+PelCH0U5CK1XJXFwCNqfmliatKp47UCXXE9Dyk1OXBDLvsCF57TqQEJaeLfDYEOQ==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@types/yargs@^15.0.0":
-  version "15.0.14"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.14.tgz#26d821ddb89e70492160b66d10a0eb6df8f6fb06"
-  integrity sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==
+"@types/yargs@^17.0.8":
+  version "17.0.26"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.26.tgz#388e5002a8b284ad7b4599ba89920a6d74d8d79a"
+  integrity sha512-Y3vDy2X6zw/ZCumcwLpdhM5L7jmyGpmBCTYMHDLqT2IKVMYRRLdv6ZakA+wxhra6Z/3bwhNbNl9bDGXaFU+6rw==
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -370,7 +211,7 @@ ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.1:
+ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
@@ -404,11 +245,6 @@ arch@^2.1.2:
   resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
-arg@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
-  integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -517,16 +353,11 @@ buffer-crc32@~0.2.3:
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
 
-buffer-from@1.x, buffer-from@^1.0.0:
+buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-builtin-modules@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
-  integrity sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ==
-
 cachedir@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
@@ -561,7 +392,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -593,6 +424,11 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+ci-info@^3.2.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
+  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -690,11 +526,6 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.12.1:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -771,11 +602,6 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-csstype@^2.2.0:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-
 cypress@^5.0.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.6.0.tgz#6781755c3ddfd644ce3179fcd7389176c0c82280"
@@ -868,16 +694,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
-  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
-
-diff@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
-  integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
-
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -934,24 +750,6 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
-eslint-plugin-no-unsanitized@^3.0.2:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-3.2.0.tgz#a74239ae51363a5edbe6920eb34fe09aab925a9c"
-  integrity sha512-92opuXbjWmXcod94EyCKhp36V1QHLM/ArAST2ssgKOojALne0eZvSPfrg4oyr0EwTXvy0RJNe/Tkm33VkDUrKQ==
-
-eslint-plugin-prefer-object-spread@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prefer-object-spread/-/eslint-plugin-prefer-object-spread-1.2.1.tgz#27fb91853690cceb3ae6101d9c8aecc6a67a402c"
-  integrity sha512-upA2W299LZNr49tGHmF0wUtFZw/fkQ+PkudsjZ0bP7dGFtRCFxItFtP39nDiet8u6rN/pOqhEYhBltW6T1OF5g==
-
-eslint-plugin-prettier@^2.2.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.7.0.tgz#b4312dcf2c1d965379d7f9d5b5f8aaadc6a45904"
-  integrity sha512-CStQYJgALoQBw3FsBzH0VOVDRnJ/ZimUlpLm226U8qgqYJfPOY/CPK6wyRInMxh73HSKg5wyRwdS4BVYYHwokA==
-  dependencies:
-    fast-diff "^1.1.1"
-    jest-docblock "^21.0.0"
-
 eslint-scope@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@@ -1129,11 +927,6 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
 fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -1298,7 +1091,7 @@ glob-parent@^5.0.0:
   dependencies:
     is-glob "^4.0.1"
 
-glob@^7.1.1, glob@^7.1.3:
+glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -1324,11 +1117,16 @@ globals@^12.1.0:
   dependencies:
     type-fest "^0.8.1"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+graceful-fs@^4.2.9:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -1363,13 +1161,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-history@*:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 http-signature@~1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
@@ -1484,13 +1275,6 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.9.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
-  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
-  dependencies:
-    has "^1.0.3"
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -1595,53 +1379,22 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
-jest-diff@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-docblock@^21.0.0:
-  version "21.2.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
-  integrity sha512-5IZ7sY9dBAYSV+YjQ0Ovb540Ku7AO9Z5o2Cg789xj167iQuZ2cG+z0f3Uct6WeYLbU6aQiM2pCs7sZ+4dotydw==
-
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
-  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
-
 jest-raw-loader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
   integrity sha512-g9oaAjeC4/rIJk1Wd3RxVbOfMizowM7LSjEJqa4R9qDX0OjQNABXOhH+GaznUp+DjTGVPi2vPPbQXyX87DOnYg==
 
-jest-util@^26.1.0:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+jest-util@^29.0.0:
+  version "29.7.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
+  integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^29.6.3"
     "@types/node" "*"
     chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
-
-joi@^17.3.0:
-  version "17.7.1"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.7.1.tgz#854fc85c7fa3cfc47c91124d30bffdbb58e06cec"
-  integrity sha512-teoLhIvWE298R6AeJywcjR4sX2hHjB3/xJX4qPjg+gTg+c0mzUDsziYlqPmLomq9gVsfaMcgPaGc7VxtD/9StA==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-    "@hapi/topo" "^5.0.0"
-    "@sideway/address" "^4.1.3"
-    "@sideway/formula" "^3.0.1"
-    "@sideway/pinpoint" "^2.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -1686,7 +1439,7 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@2.x:
+json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -1814,12 +1567,17 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
 lodash.once@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
-lodash@4.x, lodash@^4.17.14, lodash@^4.17.19:
+lodash@^4.17.14, lodash@^4.17.19:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -1865,7 +1623,7 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-make-error@1.x, make-error@^1.1.1:
+make-error@1.x:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -1917,12 +1675,7 @@ minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-mkdirp@1.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4:
+mkdirp@^0.5.1, mkdirp@^0.5.4:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -2112,11 +1865,6 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
-  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -2132,7 +1880,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picomatch@^2.3.1:
+picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -2166,16 +1914,6 @@ pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
-  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -2236,11 +1974,6 @@ react-double-scrollbar@^0.0.15:
   resolved "https://registry.yarnpkg.com/react-double-scrollbar/-/react-double-scrollbar-0.0.15.tgz#e915ab8cb3b959877075f49436debfdb04288fe4"
   integrity sha512-dLz3/WBIpgFnzFY0Kb4aIYBMT2BWomHuW2DH6/9jXfS6/zxRRBUFQ04My4HIB7Ma7QoRBpcy8NtkPeFgcGBpgg==
 
-react-is@^16.8.4:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
 readable-stream@^2.2.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -2281,15 +2014,6 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.3.2:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -2377,7 +2101,7 @@ semver-regex@^3.1.2:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.4.tgz#13053c0d4aa11d070a2f2872b6b1e3ae1e1971b4"
   integrity sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==
 
-semver@7.x, semver@^5.3.0, semver@^5.5.0, semver@^6.1.2, semver@^7.5.2:
+semver@^5.5.0, semver@^6.1.2, semver@^7.5.2, semver@^7.5.3:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -2459,19 +2183,6 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-source-map-support@^0.5.17:
-  version "0.5.21"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
-  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -2605,11 +2316,6 @@ supports-color@^7.1.0, supports-color@^7.2.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-preserve-symlinks-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
-  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
-
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -2671,34 +2377,21 @@ tough-cookie@^4.1.3:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
-ts-jest@^26.1.0:
-  version "26.5.6"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35"
-  integrity sha512-rua+rCP8DxpA8b4DQD/6X2HQS8Zy/xzViVYfEs2OQu68tkCuKLV0Md8pmX55+W24uRIyAsf/BajRfxOs+R2MKA==
+ts-jest@^29.1.0:
+  version "29.1.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
+  integrity sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==
   dependencies:
     bs-logger "0.x"
-    buffer-from "1.x"
     fast-json-stable-stringify "2.x"
-    jest-util "^26.1.0"
-    json5 "2.x"
-    lodash "4.x"
+    jest-util "^29.0.0"
+    json5 "^2.2.3"
+    lodash.memoize "4.x"
     make-error "1.x"
-    mkdirp "1.x"
-    semver "7.x"
-    yargs-parser "20.x"
-
-ts-node@^8.9.1:
-  version "8.10.2"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.10.2.tgz#eee03764633b1234ddd37f8db9ec10b75ec7fb8d"
-  integrity sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==
-  dependencies:
-    arg "^4.1.0"
-    diff "^4.0.1"
-    make-error "^1.1.1"
-    source-map-support "^0.5.17"
-    yn "3.1.1"
-
-tslib@^1.13.0, tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
+    semver "^7.5.3"
+    yargs-parser "^21.0.1"
+
+tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -2708,46 +2401,6 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslint-config-prettier@^1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37"
-  integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==
-
-tslint-plugin-prettier@^2.0.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/tslint-plugin-prettier/-/tslint-plugin-prettier-2.3.0.tgz#73fe71bf9f03842ac48c104122ca9b1de012ecf4"
-  integrity sha512-F9e4K03yc9xuvv+A0v1EmjcnDwpz8SpCD8HzqSDe0eyg34cBinwn9JjmnnRrNAs4HdleRQj7qijp+P/JTxt4vA==
-  dependencies:
-    eslint-plugin-prettier "^2.2.0"
-    lines-and-columns "^1.1.6"
-    tslib "^1.7.1"
-
-tslint@^6.1.2:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/tslint/-/tslint-6.1.3.tgz#5c23b2eccc32487d5523bd3a470e9aa31789d904"
-  integrity sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    builtin-modules "^1.1.1"
-    chalk "^2.3.0"
-    commander "^2.12.1"
-    diff "^4.0.1"
-    glob "^7.1.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.3"
-    resolve "^1.3.2"
-    semver "^5.3.0"
-    tslib "^1.13.0"
-    tsutils "^2.29.0"
-
-tsutils@^2.29.0:
-  version "2.29.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99"
-  integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==
-  dependencies:
-    tslib "^1.8.1"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -2916,10 +2569,10 @@ yaml@^1.10.0, yaml@^2.2.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
   integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
 
-yargs-parser@20.x:
-  version "20.2.9"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
-  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+yargs-parser@^21.0.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
 yauzl@^2.10.0:
   version "2.10.0"
@@ -2929,11 +2582,6 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-yn@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
-  integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"

From b506714b5c282eb603f53d383c65309a01b017bb Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Tue, 3 Oct 2023 09:47:01 -0700
Subject: [PATCH 33/40] Update form validations and tests for acceleration 
 (#133)

* update form validaitons

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update snapshots, add skipping validator

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update sqlpage snapshot

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* add tests for acceleration create

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update acceleration builder tests

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update PR comments

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* adding fix for windows snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update snapshot files

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants/index.ts                     |    9 +
 common/types/index.ts                         |   21 +-
 package.json                                  |    3 +
 public/ace-themes/sql_console.js              |    7 +-
 .../Main/__snapshots__/main.test.tsx.snap     |  686 ++---
 public/components/Main/main.tsx               |  151 +-
 public/components/SQLPage/SQLPage.test.tsx    |   30 +-
 public/components/SQLPage/SQLPage.tsx         |  204 +-
 .../__snapshots__/SQLPage.test.tsx.snap       |  186 +-
 .../caution_banner_callout.test.tsx.snap      |   39 +
 .../create_acceleration.test.tsx.snap         | 2475 +++++++++++++++++
 .../create_acceleration_header.test.tsx.snap  |   58 +
 .../__tests__/caution_banner_callout.test.tsx |   28 +
 .../__tests__/create_acceleration.test.tsx    |   38 +
 .../create_acceleration_header.test.tsx       |   28 +
 .../create/__tests__/utils.test.tsx           |  262 ++
 .../create/create_acceleration.tsx            |  100 +-
 .../components/acceleration/create/utils.tsx  |  138 +-
 .../define_index_options.test.tsx.snap        |  336 +++
 .../index_setting_options.test.tsx.snap       | 1154 ++++++++
 .../index_type_selector.test.tsx.snap         |  309 ++
 .../source_selector.test.tsx.snap             |  774 ++++++
 .../__tests__/define_index_options.test.tsx   |   85 +
 .../__tests__/index_setting_options.test.tsx  |   89 +
 .../__tests__/index_type_selector.test.tsx    |   60 +
 .../__tests__/source_selector.test.tsx        |   62 +
 .../selectors/define_index_options.tsx        |   21 +-
 .../selectors/index_setting_options.tsx       |   94 +-
 .../selectors/index_type_selector.tsx         |   20 +-
 .../selectors/source_selector.tsx             |   50 +-
 .../query_visual_editor.test.tsx.snap         | 1126 ++++++++
 .../__tests__/query_builder.test.tsx          |   84 +
 .../__tests__/query_visual_editor.test.tsx    |  116 +
 .../covering_index_builder.test.tsx.snap      |  191 ++
 .../__tests__/covering_index_builder.test.tsx |   60 +
 .../covering_index/covering_index_builder.tsx |    6 +-
 .../add_column_popover.test.tsx.snap          |   84 +
 .../column_expression.test.tsx.snap           |  175 ++
 .../group_by_tumble_expression.test.tsx.snap  |   65 +
 .../materialized_view_builder.test.tsx.snap   |  318 +++
 .../__tests__/add_column_popover.test.tsx     |   76 +
 .../__tests__/column_expression.test.tsx      |   78 +
 .../group_by_tumble_expression.test.tsx       |   64 +
 .../materialized_view_builder.test.tsx        |   64 +
 .../materialized_view/add_column_popover.tsx  |   51 +-
 .../materialized_view/column_expression.tsx   |   31 +-
 .../group_by_tumble_expression.tsx            |   46 +-
 .../materialized_view_builder.tsx             |   46 +-
 .../visual_editors/query_builder.tsx          |   12 +-
 .../add_fields_modal.test.tsx.snap            | 1509 ++++++++++
 .../delete_fields_modal.test.tsx.snap         | 2194 +++++++++++++++
 .../skipping_index_builder.test.tsx.snap      |  855 ++++++
 .../__tests__/add_fields_modal.test.tsx       |   68 +
 .../__tests__/delete_fields_modal.test.tsx    |   68 +
 .../__tests__/skipping_index_builder.test.tsx |   64 +
 .../skipping_index/add_fields_modal.tsx       |   32 +-
 .../skipping_index/delete_fields_modal.tsx    |    2 +-
 .../skipping_index/skipping_index_builder.tsx |   42 +-
 public/plugin.ts                              |    2 +-
 test/jest.config.js                           |   56 +-
 test/mocks/accelerationMock.ts                |  378 +++
 yarn.lock                                     |  854 +++---
 62 files changed, 15135 insertions(+), 1199 deletions(-)
 create mode 100644 public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
 create mode 100644 public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
 create mode 100644 public/components/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap
 create mode 100644 public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
 create mode 100644 public/components/acceleration/create/__tests__/create_acceleration.test.tsx
 create mode 100644 public/components/acceleration/create/__tests__/create_acceleration_header.test.tsx
 create mode 100644 public/components/acceleration/create/__tests__/utils.test.tsx
 create mode 100644 public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
 create mode 100644 public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
 create mode 100644 public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
 create mode 100644 public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
 create mode 100644 public/components/acceleration/selectors/__tests__/define_index_options.test.tsx
 create mode 100644 public/components/acceleration/selectors/__tests__/index_setting_options.test.tsx
 create mode 100644 public/components/acceleration/selectors/__tests__/index_type_selector.test.tsx
 create mode 100644 public/components/acceleration/selectors/__tests__/source_selector.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/__tests__/query_builder.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/__tests__/query_visual_editor.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/covering_index/__tests__/covering_index_builder.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/add_column_popover.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/group_by_tumble_expression.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/add_column_popover.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/column_expression.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/group_by_tumble_expression.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/materialized_view/__tests__/materialized_view_builder.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/add_fields_modal.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/delete_fields_modal.test.tsx
 create mode 100644 public/components/acceleration/visual_editors/skipping_index/__tests__/skipping_index_builder.test.tsx
 create mode 100644 test/mocks/accelerationMock.ts

diff --git a/common/constants/index.ts b/common/constants/index.ts
index e43eed0e..8533039d 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -32,7 +32,16 @@ export const ACCELERATION_TIME_INTERVAL = [
   { text: 'week(s)', value: 'week' },
 ];
 
+export const SKIPPING_INDEX_ACCELERATION_METHODS = [
+  { value: 'PARTITION', text: 'Partition' },
+  { value: 'VALUE_SET', text: 'Value Set' },
+  { value: 'MIN_MAX', text: 'Min Max' },
+];
+
 export const ACCELERATION_ADD_FIELDS_TEXT = '(add fields here)';
+export const ACCELERATION_INDEX_NAME_REGEX = /^[a-z][a-z_\-]*$/;
+export const ACCELERATION_S3_URL_REGEX = /^(s3|s3a):\/\/[a-zA-Z0-9.\-]+\/.*/;
+export const ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME = 'skipping';
 
 export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices have a naming format of pattern: \`prefix_<index name>_suffix\`. They share a common prefix structure, which is \`flint_<data source name>_<database name>_<table name>_\`. Additionally, they may have a suffix that varies based on the index type. 
 ##### Skipping Index
diff --git a/common/types/index.ts b/common/types/index.ts
index ed1783a9..928d7578 100644
--- a/common/types/index.ts
+++ b/common/types/index.ts
@@ -12,11 +12,13 @@ export interface MaterializedViewColumn {
   fieldAlias?: string;
 }
 
+export type SkippingIndexAccMethodType = 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+
 export interface SkippingIndexRowType {
   id: string;
   fieldName: string;
   dataType: string;
-  accelerationMethod: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX';
+  accelerationMethod: SkippingIndexAccMethodType;
 }
 
 export interface DataTableFieldsType {
@@ -43,6 +45,20 @@ export interface materializedViewQueryType {
   groupByTumbleValue: GroupByTumbleType;
 }
 
+export interface FormErrorsType {
+  dataSourceError: string[];
+  databaseError: string[];
+  dataTableError: string[];
+  skippingIndexError: string[];
+  coveringIndexError: string[];
+  materializedViewError: string[];
+  indexNameError: string[];
+  primaryShardsError: string[];
+  replicaShardsError: string[];
+  refreshIntervalError: string[];
+  checkpointLocationError: string[];
+}
+
 export interface CreateAccelerationForm {
   dataSource: string;
   database: string;
@@ -57,5 +73,6 @@ export interface CreateAccelerationForm {
   replicaShardsCount: number;
   refreshType: 'interval' | 'auto';
   checkpointLocation: string | undefined;
-  refreshIntervalOptions: RefreshIntervalType | undefined;
+  refreshIntervalOptions: RefreshIntervalType;
+  formErrors: FormErrorsType;
 }
diff --git a/package.json b/package.json
index da506ddc..4bb29f82 100644
--- a/package.json
+++ b/package.json
@@ -27,12 +27,15 @@
   },
   "devDependencies": {
     "@testing-library/user-event": "^13.1.9",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/react-test-renderer": "^16.9.1",
     "cypress": "^5.0.0",
     "eslint": "^6.8.0",
     "husky": "^4.2.5",
     "jest-raw-loader": "^1.0.1",
     "lint-staged": "^10.2.0",
     "mutationobserver-shim": "^0.3.3",
+    "jest-dom": "^4.0.0",
     "ts-jest": "^29.1.0"
   },
   "resolutions": {
diff --git a/public/ace-themes/sql_console.js b/public/ace-themes/sql_console.js
index c841db28..b0d4898c 100644
--- a/public/ace-themes/sql_console.js
+++ b/public/ace-themes/sql_console.js
@@ -3,10 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
 import * as ace from 'brace';
 
-ace.define('ace/theme/sql_console', ['require', 'exports', 'module', 'ace/lib/dom'], function (acequire, exports, module) {
+ace.define('ace/theme/sql_console', ['require', 'exports', 'module', 'ace/lib/dom'], function (
+  acequire,
+  exports,
+  module
+) {
   exports.isDark = false;
   exports.cssClass = 'ace-sql-console';
   exports.cssText = require('../index.scss');
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index 29d848bc..2f967b2b 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -406,61 +406,69 @@ exports[`<Main /> spec click clear button 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -941,61 +949,69 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -1476,61 +1492,69 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -2077,61 +2101,69 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -2674,61 +2706,69 @@ exports[`<Main /> spec click run button, response fills null and missing values
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -3212,61 +3252,69 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -3757,61 +3805,69 @@ exports[`<Main /> spec renders the component 1`] = `
               class="euiSpacer euiSpacer--l"
             />
             <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
-                class="euiFlexItem euiFlexItem--flexGrowZero"
+                class="euiFlexItem"
               >
-                <button
-                  class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-                  type="button"
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
                 >
-                  <span
-                    class="euiButtonContent euiButton__content"
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Run
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      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="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <span
-                      class="euiButton__text"
+                    <button
+                      class="euiButton euiButton--primary sql-editor-button"
+                      type="button"
                     >
-                      Explain
-                    </span>
-                  </span>
-                </button>
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Explain
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index a80bdd41..e9f30cbc 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -3,18 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { 
-  EuiButton, 
-  EuiFlexGroup, 
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer, 
-  EuiPageSideBar , 
-  EuiPanel, 
-  EuiPage, 
+  EuiPage,
   EuiPageContent,
-  EuiPageContentBody, 
-  EuiComboBox, 
-  EuiText, 
+  EuiPageContentBody,
+  EuiPageSideBar,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -22,17 +22,17 @@ import React from 'react';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
 import { MESSAGE_TAB_LABEL } from '../../utils/constants';
 import {
+  Tree,
   getDefaultTabId,
   getDefaultTabLabel,
   getQueries,
   getSelectedResults,
-  Tree,
 } from '../../utils/utils';
 import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
 import { SQLPage } from '../SQLPage/SQLPage';
-import { TableView } from '../SQLPage/TableView'
+import { TableView } from '../SQLPage/TableView';
 
 interface ResponseData {
   ok: boolean;
@@ -217,7 +217,7 @@ export class Main extends React.Component<MainProps, MainState> {
     this.onChange = this.onChange.bind(this);
     this.state = {
       language: 'SQL',
-      sqlQueriesString: 'SHOW tables LIKE \'%\';',
+      sqlQueriesString: "SHOW tables LIKE '%';",
       pplQueriesString: '',
       queries: [],
       queryTranslations: [],
@@ -232,7 +232,7 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
-      selectedDatasource: ''
+      selectedDatasource: '',
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -607,11 +607,11 @@ export class Main extends React.Component<MainProps, MainState> {
     ); // added callback function to handle async issues
   };
 
-  updateSQLQueries(query: string) {
+  updateSQLQueries = (query: string) => {
     this.setState({
       sqlQueriesString: query,
     });
-  }
+  };
 
   updatePPLQueries(query: string) {
     this.setState({
@@ -626,11 +626,11 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleComboOptionChange = (selectedOption: string) => {
-    this.setState({ 
-      selectedDatasource: selectedOption });
+    this.setState({
+      selectedDatasource: selectedOption,
+    });
   };
 
-
   render() {
     let page;
     let link;
@@ -645,6 +645,7 @@ export class Main extends React.Component<MainProps, MainState> {
           sqlQuery={this.state.sqlQueriesString}
           sqlTranslations={this.state.queryTranslations}
           updateSQLQueries={this.updateSQLQueries}
+          selectedDatasource={this.state.selectedDatasource}
         />
       );
       link = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
@@ -706,17 +707,19 @@ export class Main extends React.Component<MainProps, MainState> {
 
     return (
       <>
-        <EuiFlexGroup direction='row' alignItems='center'>
+        <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
             <EuiComboBox
               singleSelection={true}
-              placeholder='Connection Name'
+              placeholder="Connection Name"
               options={[
                 { label: 'S3', value: 'S3' },
                 { label: 'Opensearch', value: 'Opensearch' },
               ]}
-              selectedOptions={this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []}
+              selectedOptions={
+                this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []
+              }
               onChange={(selectedOptions) => {
                 const selectedValue = selectedOptions[0] ? selectedOptions[0].value : '';
                 this.handleComboOptionChange(selectedValue);
@@ -733,26 +736,22 @@ export class Main extends React.Component<MainProps, MainState> {
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiPage paddingSize='none'>
+        <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
               <EuiPageSideBar>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <EuiButton
-                        iconType="arrowDown"
-                        iconSide="right"
-                        fullWidth
-                      >
+                      <EuiButton iconType="arrowDown" iconSide="right" fullWidth>
                         Create
                       </EuiButton>
                     </EuiFlexItem>
                     <EuiSpacer />
-                    <TableView 
-                      http={this.httpClient} 
+                    <TableView
+                      http={this.httpClient}
                       dataConnection={this.state.selectedDatasource}
-                      />
+                    />
                     <EuiSpacer />
                   </EuiFlexItem>
                 </EuiFlexGroup>
@@ -760,56 +759,54 @@ export class Main extends React.Component<MainProps, MainState> {
             </EuiPanel>
           )}
 
-          <EuiPageContent paddingSize='m'>
+          <EuiPageContent paddingSize="m">
             <EuiPageContentBody>
-              <EuiFlexGroup alignItems="center">
-              </EuiFlexGroup>
+              <EuiFlexGroup alignItems="center"></EuiFlexGroup>
               <EuiSpacer size="l" />
               <div>{page}</div>
-          <EuiSpacer size="l" />
-          <div className="sql-console-query-result">
-            <QueryResults
-              language={this.state.language}
-              queries={this.state.queries}
-              queryResults={this.state.queryResultsTable}
-              queryResultsJDBC={getSelectedResults(
-                this.state.queryResults,
-                this.state.selectedTabId
-              )}
-              queryResultsJSON={getSelectedResults(
-                this.state.queryResultsJSON,
-                this.state.selectedTabId
-              )}
-              queryResultsCSV={getSelectedResults(
-                this.state.queryResultsCSV,
-                this.state.selectedTabId
-              )}
-              queryResultsTEXT={getSelectedResults(
-                this.state.queryResultsTEXT,
-                this.state.selectedTabId
-              )}
-              messages={this.state.messages}
-              selectedTabId={this.state.selectedTabId}
-              selectedTabName={this.state.selectedTabName}
-              onSelectedTabIdChange={this.onSelectedTabIdChange}
-              itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
-              onQueryChange={this.onQueryChange}
-              updateExpandedMap={this.updateExpandedMap}
-              searchQuery={this.state.searchQuery}
-              tabsOverflow={false}
-              getJson={this.getJson}
-              getJdbc={this.getJdbc}
-              getCsv={this.getCsv}
-              getText={this.getText}
-              isResultFullScreen={this.state.isResultFullScreen}
-              setIsResultFullScreen={this.setIsResultFullScreen}
-            />
-          </div>
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPage>
+              <EuiSpacer size="l" />
+              <div className="sql-console-query-result">
+                <QueryResults
+                  language={this.state.language}
+                  queries={this.state.queries}
+                  queryResults={this.state.queryResultsTable}
+                  queryResultsJDBC={getSelectedResults(
+                    this.state.queryResults,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsJSON={getSelectedResults(
+                    this.state.queryResultsJSON,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsCSV={getSelectedResults(
+                    this.state.queryResultsCSV,
+                    this.state.selectedTabId
+                  )}
+                  queryResultsTEXT={getSelectedResults(
+                    this.state.queryResultsTEXT,
+                    this.state.selectedTabId
+                  )}
+                  messages={this.state.messages}
+                  selectedTabId={this.state.selectedTabId}
+                  selectedTabName={this.state.selectedTabName}
+                  onSelectedTabIdChange={this.onSelectedTabIdChange}
+                  itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
+                  onQueryChange={this.onQueryChange}
+                  updateExpandedMap={this.updateExpandedMap}
+                  searchQuery={this.state.searchQuery}
+                  tabsOverflow={false}
+                  getJson={this.getJson}
+                  getJdbc={this.getJdbc}
+                  getCsv={this.getCsv}
+                  getText={this.getText}
+                  isResultFullScreen={this.state.isResultFullScreen}
+                  setIsResultFullScreen={this.setIsResultFullScreen}
+                />
+              </div>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPage>
       </>
-      
     );
   }
 }
diff --git a/public/components/SQLPage/SQLPage.test.tsx b/public/components/SQLPage/SQLPage.test.tsx
index 7b08b5d8..d1e7ccc3 100644
--- a/public/components/SQLPage/SQLPage.test.tsx
+++ b/public/components/SQLPage/SQLPage.test.tsx
@@ -3,24 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { SQLPage } from './SQLPage';
 
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import { render, fireEvent } from "@testing-library/react";
-import { SQLPage } from "./SQLPage";
-
-
-describe("<SQLPage /> spec", () => {
-
-  it("renders the component", () => {
+describe('<SQLPage /> spec', () => {
+  it('renders the component', () => {
     render(
       <SQLPage
-        onRun={() => { }}
-        onTranslate={() => { }}
-        onClear={() => { }}
-        updateSQLQueries={() => { }}
+        onRun={() => {}}
+        onTranslate={() => {}}
+        onClear={() => {}}
+        updateSQLQueries={() => {}}
         sqlTranslations={[]}
         sqlQuery={''}
+        selectedDatasource={''}
       />
     );
     expect(document.body.children[0]).toMatchSnapshot();
@@ -40,6 +38,7 @@ describe("<SQLPage /> spec", () => {
         updateSQLQueries={updateSQLQueries}
         sqlTranslations={[]}
         sqlQuery={''}
+        selectedDatasource={'S3'}
       />
     );
 
@@ -53,10 +52,5 @@ describe("<SQLPage /> spec", () => {
 
     fireEvent.click(getByText('Explain'));
     expect(onTranslate).toHaveBeenCalledTimes(1);
-
   });
-
 });
-
-
-
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 94808e17..0cc0bac4 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -3,43 +3,43 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
 import {
-  EuiPanel,
   EuiButton,
+  EuiCodeBlock,
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiOverlayMask,
   EuiModal,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
   EuiModalBody,
   EuiModalFooter,
-  EuiCodeBlock,
-  EuiText,
-  EuiCodeEditor,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiPanel,
   EuiSpacer,
-} from "@elastic/eui";
-import { ResponseDetail, TranslateResult } from '../Main/main';
-import _ from 'lodash';
-import "brace/mode/sql";
-import "../../ace-themes/sql_console";
+} from '@elastic/eui';
 import 'brace/ext/language_tools';
+import 'brace/mode/sql';
+import React from 'react';
+import '../../ace-themes/sql_console';
+import { ResponseDetail, TranslateResult } from '../Main/main';
+import { CreateAcceleration } from '../acceleration/create/create_acceleration';
 
 interface SQLPageProps {
-  onRun: (query: string) => void,
-  onTranslate: (query: string) => void,
-  onClear: () => void,
-  updateSQLQueries: (query: string) => void
-  sqlQuery: string,
-  sqlTranslations: ResponseDetail<TranslateResult>[]
+  onRun: (query: string) => void;
+  onTranslate: (query: string) => void;
+  onClear: () => void;
+  updateSQLQueries: (query: string) => void;
+  sqlQuery: string;
+  sqlTranslations: ResponseDetail<TranslateResult>[];
+  selectedDatasource: string;
 }
 
 interface SQLPageState {
-  sqlQuery: string,
-  translation: string,
-  isModalVisible: boolean
+  sqlQuery: string;
+  translation: string;
+  isModalVisible: boolean;
+  flyoutComponent: JSX.Element;
 }
 
 export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
@@ -47,19 +47,35 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     super(props);
     this.state = {
       sqlQuery: this.props.sqlQuery,
-      translation: "",
-      isModalVisible: false
+      translation: '',
+      isModalVisible: false,
+      flyoutComponent: <></>,
     };
   }
 
   setIsModalVisible(visible: boolean): void {
     this.setState({
-      isModalVisible: visible
-    })
+      isModalVisible: visible,
+    });
   }
 
-  render() {
+  resetFlyout = () => {
+    this.setState({ flyoutComponent: <></> });
+  };
 
+  setAccelerationFlyout = () => {
+    this.setState({
+      flyoutComponent: (
+        <CreateAcceleration
+          dataSource="ds"
+          resetFlyout={this.resetFlyout}
+          updateQueries={this.props.updateSQLQueries}
+        />
+      ),
+    });
+  };
+
+  render() {
     const closeModal = () => this.setIsModalVisible(false);
     const showModal = () => this.setIsModalVisible(true);
 
@@ -68,11 +84,13 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
         return this.props.sqlTranslations[0].fulfilled;
       }
       return false;
-    }
+    };
 
     const explainContent = sqlTranslationsNotEmpty()
-    ? this.props.sqlTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")
-    : 'This query is not explainable.';
+      ? this.props.sqlTranslations
+          .map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2))
+          .join('\n')
+      : 'This query is not explainable.';
 
     let modal;
 
@@ -85,11 +103,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             </EuiModalHeader>
 
             <EuiModalBody>
-              <EuiCodeBlock
-                language="json"
-                fontSize="m"
-                isCopyable
-              >
+              <EuiCodeBlock language="json" fontSize="m" isCopyable>
                 {explainContent}
               </EuiCodeBlock>
             </EuiModalBody>
@@ -97,7 +111,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             <EuiModalFooter>
               <EuiButton onClick={closeModal} fill>
                 Close
-            </EuiButton>
+              </EuiButton>
             </EuiModalFooter>
           </EuiModal>
         </EuiOverlayMask>
@@ -105,60 +119,68 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
-        <EuiSpacer size="s" />
-        <EuiCodeEditor
-          mode="sql"
-          theme="sql_console"
-          width="100%"
-          height="7rem"
-          value={this.props.sqlQuery}
-          onChange={this.props.updateSQLQueries}
-          showPrintMargin={false}
-          setOptions={{
-            fontSize: "14px",
-            enableBasicAutocompletion: true,
-            enableLiveAutocompletion: true
-          }}
-          aria-label="Code Editor"
-        />
-        <EuiSpacer />
-        <EuiFlexGroup className="action-container" gutterSize="m">
-          <EuiFlexItem
-            grow={false}
-            onClick={() => this.props.onRun(this.props.sqlQuery)}
-          >
-            <EuiButton fill={true} className="sql-editor-button" >
-              Run
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            onClick={() => {
-              this.props.updateSQLQueries("");
-              this.props.onClear();
+      <>
+        <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
+          <EuiSpacer size="s" />
+          <EuiCodeEditor
+            mode="sql"
+            theme="sql_console"
+            width="100%"
+            height="7rem"
+            value={this.props.sqlQuery}
+            onChange={this.props.updateSQLQueries}
+            showPrintMargin={false}
+            setOptions={{
+              fontSize: '14px',
+              enableBasicAutocompletion: true,
+              enableLiveAutocompletion: true,
             }}
-          >
-            <EuiButton className="sql-editor-button">
-              Clear
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            onClick={() =>
-              this.props.onTranslate(this.props.sqlQuery)
-            }
-          >
-            <EuiButton
-              className="sql-editor-button"
-              onClick={showModal}
-            >
-              Explain
-            </EuiButton>
-            {modal}
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPanel>
-    )
+            aria-label="Code Editor"
+          />
+          <EuiSpacer />
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <EuiFlexGroup className="action-container" gutterSize="m">
+                <EuiFlexItem grow={false} onClick={() => this.props.onRun(this.props.sqlQuery)}>
+                  <EuiButton fill={true} className="sql-editor-button">
+                    Run
+                  </EuiButton>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                  onClick={() => {
+                    this.props.updateSQLQueries('');
+                    this.props.onClear();
+                  }}
+                >
+                  <EuiButton className="sql-editor-button">Clear</EuiButton>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                  onClick={() => this.props.onTranslate(this.props.sqlQuery)}
+                >
+                  <EuiButton className="sql-editor-button" onClick={showModal}>
+                    Explain
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            {this.props.selectedDatasource === 'S3' && (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  fill={true}
+                  className="sql-accelerate-button"
+                  onClick={this.setAccelerationFlyout}
+                >
+                  Accelerate Table
+                </EuiButton>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiPanel>
+        {modal}
+        {this.state.flyoutComponent}
+      </>
+    );
   }
 }
diff --git a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
index d2fe7008..96850ed5 100644
--- a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
+++ b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
@@ -124,61 +124,69 @@ exports[`<SQLPage /> spec renders the component 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+        class="euiFlexItem"
       >
-        <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-          type="button"
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
         >
-          <span
-            class="euiButtonContent euiButton__content"
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiButton__text"
+            <button
+              class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+              type="button"
             >
-              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="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Run
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiButton__text"
+            <button
+              class="euiButton euiButton--primary sql-editor-button"
+              type="button"
             >
-              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="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Clear
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiButton__text"
+            <button
+              class="euiButton euiButton--primary sql-editor-button"
+              type="button"
             >
-              Explain
-            </span>
-          </span>
-        </button>
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Explain
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -309,49 +317,75 @@ exports[`<SQLPage /> spec tests the action buttons 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+        class="euiFlexItem"
       >
-        <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
-          type="button"
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive action-container"
         >
-          <span
-            class="euiButtonContent euiButton__content"
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiButton__text"
+            <button
+              class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+              type="button"
             >
-              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="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Run
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <span
-              class="euiButton__text"
+            <button
+              class="euiButton euiButton--primary sql-editor-button"
+              type="button"
             >
-              Clear
-            </span>
-          </span>
-        </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
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--fill sql-accelerate-button"
           type="button"
         >
           <span
@@ -360,7 +394,7 @@ exports[`<SQLPage /> spec tests the action buttons 1`] = `
             <span
               class="euiButton__text"
             >
-              Explain
+              Accelerate Table
             </span>
           </span>
         </button>
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
new file mode 100644
index 00000000..f40a09f9
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Acceleration callout renders acceleration flyout callout 1`] = `
+<div
+  className="euiCallOut euiCallOut--warning"
+>
+  <div
+    className="euiCallOutHeader"
+  >
+    <svg
+      aria-hidden={true}
+      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+      focusable="false"
+      height={16}
+      role="img"
+      style={null}
+      viewBox="0 0 16 16"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+    />
+    <span
+      className="euiCallOutHeader__title"
+    >
+      Considerations for data indexing
+    </span>
+  </div>
+  <div
+    className="euiText euiText--small"
+  >
+    <div
+      className="euiTextColor euiTextColor--default"
+    >
+      <p>
+        Warning about not indexing personal or sensitive data, something about the cost of indexing.
+      </p>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
new file mode 100644
index 00000000..3eded361
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
@@ -0,0 +1,2475 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Create acceleration flyout components renders acceleration flyout component with default options 1`] = `
+Array [
+  "",
+  <Portal
+    containerInfo={
+      <div
+        class="euiOverlayMask euiOverlayMask--belowHeader"
+      >
+        <div
+          aria-hidden="true"
+          data-aria-hidden="true"
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+          tabindex="0"
+        />
+        <div
+          data-focus-lock-disabled="false"
+        >
+          <div
+            aria-labelledby="flyoutTitle"
+            class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+            role="dialog"
+            tabindex="-1"
+          >
+            <button
+              aria-label="Close this dialog"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+              data-test-subj="euiFlyoutCloseButton"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </button>
+            <div
+              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+            >
+              <div>
+                <header
+                  class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <div
+                    class="euiPageHeaderSection"
+                  >
+                    <h1
+                      class="euiTitle euiTitle--large"
+                      data-test-subj="acceleration-header"
+                    >
+                      Accelerate data
+                    </h1>
+                  </div>
+                </header>
+                <div
+                  class="euiSpacer euiSpacer--s"
+                />
+                <div
+                  class="euiText euiText--small"
+                >
+                  <div
+                    class="euiTextColor euiTextColor--subdued"
+                  >
+                    Create OpenSearch Indexes from external data connections for better performance.
+                     
+                    <a
+                      class="euiLink euiLink--primary"
+                      href="https://opensearch.org/docs/latest"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Learn more
+                      <svg
+                        aria-hidden="true"
+                        aria-label="External link"
+                        class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        class="euiScreenReaderOnly"
+                      >
+                        (opens in a new tab or window)
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlyoutBody"
+            >
+              <div
+                class="euiFlyoutBody__overflow"
+                tabindex="0"
+              >
+                <div
+                  class="euiFlyoutBody__overflowContent"
+                >
+                  <div
+                    class="euiCallOut euiCallOut--warning"
+                  >
+                    <div
+                      class="euiCallOutHeader"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        class="euiCallOutHeader__title"
+                      >
+                        Considerations for data indexing
+                      </span>
+                    </div>
+                    <div
+                      class="euiText euiText--small"
+                    >
+                      <div
+                        class="euiTextColor euiTextColor--default"
+                      >
+                        <p>
+                          Warning about not indexing personal or sensitive data, something about the cost of indexing.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    class="euiForm"
+                    id="acceleration-form"
+                  >
+                    <div
+                      class="euiText euiText--medium"
+                      data-test-subj="datasource-selector-header"
+                    >
+                      <h3>
+                        Select data source
+                      </h3>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiText euiText--small"
+                    >
+                      <div
+                        class="euiTextColor euiTextColor--subdued"
+                      >
+                        Select data connection where the data you want to accelerate resides.
+                      </div>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Data source
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          aria-describedby="some_html_id-help-0"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="euiComboBox"
+                          role="combobox"
+                        >
+                          <div
+                            class="euiFormControlLayout"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                tabindex="-1"
+                              >
+                                <p
+                                  class="euiComboBoxPlaceholder"
+                                >
+                                  Select a data source
+                                </p>
+                                <div
+                                  class="euiComboBox__input"
+                                  style="font-size: 14px; display: inline-block;"
+                                >
+                                  <input
+                                    aria-controls=""
+                                    data-test-subj="comboBoxSearchInput"
+                                    id="some_html_id"
+                                    role="textbox"
+                                    style="box-sizing: content-box; width: 2px;"
+                                    value=""
+                                  />
+                                  <div
+                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              >
+                                <button
+                                  aria-label="Open list of options"
+                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                  data-test-subj="comboBoxToggleListButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          A data source has to be configured and active to be able to select it and index data from.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Database
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          aria-describedby="some_html_id-help-0"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="euiComboBox"
+                          role="combobox"
+                        >
+                          <div
+                            class="euiFormControlLayout"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                tabindex="-1"
+                              >
+                                <p
+                                  class="euiComboBoxPlaceholder"
+                                >
+                                  Select a database
+                                </p>
+                                <div
+                                  class="euiComboBox__input"
+                                  style="font-size: 14px; display: inline-block;"
+                                >
+                                  <input
+                                    aria-controls=""
+                                    data-test-subj="comboBoxSearchInput"
+                                    id="some_html_id"
+                                    role="textbox"
+                                    style="box-sizing: content-box; width: 2px;"
+                                    value=""
+                                  />
+                                  <div
+                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              >
+                                <button
+                                  aria-label="Open list of options"
+                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                  data-test-subj="comboBoxToggleListButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Select the database that contains the tables you'd like to use.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Table
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          aria-describedby="some_html_id-help-0"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="euiComboBox"
+                          role="combobox"
+                        >
+                          <div
+                            class="euiFormControlLayout"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                tabindex="-1"
+                              >
+                                <p
+                                  class="euiComboBoxPlaceholder"
+                                >
+                                  Select a table
+                                </p>
+                                <div
+                                  class="euiComboBox__input"
+                                  style="font-size: 14px; display: inline-block;"
+                                >
+                                  <input
+                                    aria-controls=""
+                                    data-test-subj="comboBoxSearchInput"
+                                    id="some_html_id"
+                                    role="textbox"
+                                    style="box-sizing: content-box; width: 2px;"
+                                    value=""
+                                  />
+                                  <div
+                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              >
+                                <button
+                                  aria-label="Open list of options"
+                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                  data-test-subj="comboBoxToggleListButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Select the Spark table that has the data you would like to index.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--xxl"
+                    />
+                    <div
+                      class="euiText euiText--medium"
+                      data-test-subj="index-settings-header"
+                    >
+                      <h3>
+                        Index settings
+                      </h3>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Index type
+                        </label>
+                         
+                        <div
+                          class="euiText euiText--extraSmall"
+                        >
+                          <a
+                            class="euiLink euiLink--primary"
+                            href="https://opensearch.org/docs/latest"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            Help
+                            <svg
+                              aria-hidden="true"
+                              aria-label="External link"
+                              class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                              focusable="false"
+                              height="16"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                            <span
+                              class="euiScreenReaderOnly"
+                            >
+                              (opens in a new tab or window)
+                            </span>
+                          </a>
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          aria-describedby="some_html_id-help-0"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          class="euiComboBox"
+                          role="combobox"
+                        >
+                          <div
+                            class="euiFormControlLayout"
+                          >
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                tabindex="-1"
+                              >
+                                <span
+                                  class="euiComboBoxPill euiComboBoxPill--plainText"
+                                  value="skipping"
+                                >
+                                  Skipping Index
+                                </span>
+                                <div
+                                  class="euiComboBox__input"
+                                  style="font-size: 14px; display: inline-block;"
+                                >
+                                  <input
+                                    aria-controls=""
+                                    data-test-subj="comboBoxSearchInput"
+                                    id="some_html_id"
+                                    role="textbox"
+                                    style="box-sizing: content-box; width: 2px;"
+                                    value=""
+                                  />
+                                  <div
+                                    style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              >
+                                <button
+                                  aria-label="Open list of options"
+                                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                  data-test-subj="comboBoxToggleListButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Select the type of index you want to create. Each index type has benefits and costs.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Number of primary shards
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          class="euiFormControlLayout"
+                        >
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <input
+                              aria-describedby="some_html_id-help-0"
+                              aria-label="Number of primary shards"
+                              class="euiFieldNumber"
+                              id="some_html_id"
+                              max="100"
+                              min="1"
+                              placeholder="Number of primary shards"
+                              type="number"
+                              value="5"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Number of replicas
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          class="euiFormControlLayout"
+                        >
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <input
+                              aria-describedby="some_html_id-help-0"
+                              aria-label="Number of replicas"
+                              class="euiFieldNumber"
+                              id="some_html_id"
+                              max="100"
+                              min="0"
+                              placeholder="Number of replicas"
+                              type="number"
+                              value="1"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Specify the number of replicas each primary shard should have. Default is 1.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Refresh type
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          aria-describedby="some_html_id-help-0"
+                          id="some_html_id"
+                        >
+                          <div
+                            class="euiRadio euiRadioGroup__item"
+                          >
+                            <input
+                              checked=""
+                              class="euiRadio__input"
+                              id="refresh-option-1"
+                              name="refresh type radio group"
+                              type="radio"
+                              value=""
+                            />
+                            <div
+                              class="euiRadio__circle"
+                            />
+                            <label
+                              class="euiRadio__label"
+                              for="refresh-option-1"
+                            >
+                              Auto Refresh
+                            </label>
+                          </div>
+                          <div
+                            class="euiRadio euiRadioGroup__item"
+                          >
+                            <input
+                              class="euiRadio__input"
+                              id="refresh-option-2"
+                              name="refresh type radio group"
+                              type="radio"
+                              value=""
+                            />
+                            <div
+                              class="euiRadio__circle"
+                            />
+                            <label
+                              class="euiRadio__label"
+                              for="refresh-option-2"
+                            >
+                              Refresh by interval
+                            </label>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Checkpoint location - optional
+                        </label>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          class="euiFormControlLayout"
+                        >
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <input
+                              aria-describedby="some_html_id-help-0"
+                              aria-label="Use aria labels when no actual label is in use"
+                              class="euiFieldText"
+                              id="some_html_id"
+                              placeholder="s3://checkpoint/location"
+                              type="text"
+                              value=""
+                            />
+                          </div>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          The HDFS compatible file system location path for incremental refresh job checkpoint.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--xxl"
+                    />
+                    <div
+                      class="euiText euiText--medium"
+                      data-test-subj="define-index-header"
+                    >
+                      <h3>
+                        Index settings
+                      </h3>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiFormRow"
+                      id="some_html_id-row"
+                    >
+                      <div
+                        class="euiFormRow__labelWrapper"
+                      >
+                        <label
+                          aria-invalid="false"
+                          class="euiFormLabel euiFormRow__label"
+                          for="some_html_id"
+                        >
+                          Index name
+                        </label>
+                         
+                        <div
+                          class="euiText euiText--extraSmall"
+                        >
+                          <button
+                            class="euiLink euiLink--primary"
+                            type="button"
+                          >
+                            Help
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        class="euiFormRow__fieldWrapper"
+                      >
+                        <div
+                          class="euiFormControlLayout euiFormControlLayout--group"
+                        >
+                          <label
+                            class="euiFormLabel euiFormControlLayout__prepend"
+                            for="some_html_id"
+                          >
+                            flint_{Datasource Name}_{Database Name}_{Table Name}_
+                          </label>
+                          <span
+                            class="euiToolTipAnchor"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              aria-label="Info"
+                              class="euiIcon euiIcon--medium euiIcon--subdued euiIcon-isLoading"
+                              focusable="true"
+                              height="16"
+                              role="img"
+                              tabindex="0"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </span>
+                          <div
+                            class="euiFormControlLayout__childrenWrapper"
+                          >
+                            <input
+                              aria-describedby="some_html_id-help-0"
+                              aria-label="Enter Index Name"
+                              class="euiFieldText euiFieldText--inGroup"
+                              disabled=""
+                              id="some_html_id"
+                              placeholder="Enter index name"
+                              type="text"
+                              value="skipping"
+                            />
+                          </div>
+                          <label
+                            class="euiFormLabel euiFormControlLayout__append"
+                            for="some_html_id"
+                          >
+                            _index
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormHelpText euiFormRow__text"
+                          id="some_html_id-help-0"
+                        >
+                          Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \\, |, ?, #, &gt;, or &lt; are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--m"
+                    />
+                    <div
+                      class="euiSpacer euiSpacer--l"
+                    />
+                    <div
+                      class="euiText euiText--medium"
+                      data-test-subj="skipping-index-builder"
+                    >
+                      <h3>
+                        Skipping index definition
+                      </h3>
+                    </div>
+                    <div
+                      class="euiSpacer euiSpacer--s"
+                    />
+                    <div
+                      class="euiBasicTable"
+                      itemid="id"
+                    >
+                      <div>
+                        <div
+                          class="euiTableHeaderMobile"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            />
+                          </div>
+                        </div>
+                        <table
+                          class="euiTable euiTable--responsive"
+                          id="some_html_id"
+                          tabindex="-1"
+                        >
+                          <caption
+                            class="euiScreenReaderOnly euiTableCaption"
+                          />
+                          <thead>
+                            <tr>
+                              <th
+                                class="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_fieldName_0"
+                                role="columnheader"
+                                scope="col"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </th>
+                              <th
+                                class="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_dataType_1"
+                                role="columnheader"
+                                scope="col"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </th>
+                              <th
+                                class="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_Acceleration method_2"
+                                role="columnheader"
+                                scope="col"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Acceleration method"
+                                  >
+                                    Acceleration method
+                                  </span>
+                                </span>
+                              </th>
+                              <th
+                                class="euiTableHeaderCell"
+                                data-test-subj="tableHeaderCell_Delete_3"
+                                role="columnheader"
+                                scope="col"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Delete"
+                                  >
+                                    Delete
+                                  </span>
+                                </span>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr
+                              class="euiTableRow"
+                            >
+                              <td
+                                class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                                colspan="4"
+                              >
+                                <div
+                                  class="euiTableCellContent euiTableCellContent--alignCenter"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                  >
+                                    No items found
+                                  </span>
+                                </div>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+                    >
+                      <div
+                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <button
+                          class="euiButton euiButton--primary euiButton--fill"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButton__content"
+                          >
+                            <span
+                              class="euiButton__text"
+                            >
+                              Add fields
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <button
+                          class="euiButton euiButton--danger"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButton__content"
+                          >
+                            <span
+                              class="euiButton__text"
+                            >
+                              Bulk delete
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlyoutFooter"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButtonEmpty__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="euiButtonEmpty__text"
+                      >
+                        Close
+                      </span>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Copy Query to Editor
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          data-aria-hidden="true"
+          data-focus-guard="true"
+          style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+          tabindex="0"
+        />
+      </div>
+    }
+  >
+    Array [
+      Array [
+        <div
+          data-focus-guard={true}
+          key="guard-first"
+          style={
+            Object {
+              "height": "0px",
+              "left": "1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "fixed",
+              "top": "1px",
+              "width": "1px",
+            }
+          }
+          tabIndex={0}
+        />,
+        "",
+        <div
+          data-focus-lock-disabled={false}
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseDown={[Function]}
+          onScrollCapture={[Function]}
+          onTouchMoveCapture={[Function]}
+          onTouchStart={[Function]}
+          onWheelCapture={[Function]}
+        >
+          <div
+            aria-labelledby="flyoutTitle"
+            className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            role="dialog"
+            tabIndex={-1}
+          >
+            <button
+              aria-label="Close this dialog"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+              data-test-subj="euiFlyoutCloseButton"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </button>
+            <div
+              className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+            >
+              <div>
+                <header
+                  className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+                >
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <h1
+                      className="euiTitle euiTitle--large"
+                      data-test-subj="acceleration-header"
+                    >
+                      Accelerate data
+                    </h1>
+                  </div>
+                </header>
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+                <div
+                  className="euiText euiText--small"
+                >
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    Create OpenSearch Indexes from external data connections for better performance.
+                     
+                    <a
+                      className="euiLink euiLink--primary"
+                      href="https://opensearch.org/docs/latest"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      Learn more
+                      <svg
+                        aria-hidden={true}
+                        aria-label="External link"
+                        className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        className="euiScreenReaderOnly"
+                      >
+                        (opens in a new tab or window)
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiFlyoutBody"
+            >
+              <div
+                className="euiFlyoutBody__overflow"
+                tabIndex={0}
+              >
+                <div
+                  className="euiFlyoutBody__overflowContent"
+                >
+                  <div
+                    className="euiCallOut euiCallOut--warning"
+                  >
+                    <div
+                      className="euiCallOutHeader"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        className="euiCallOutHeader__title"
+                      >
+                        Considerations for data indexing
+                      </span>
+                    </div>
+                    <div
+                      className="euiText euiText--small"
+                    >
+                      <div
+                        className="euiTextColor euiTextColor--default"
+                      >
+                        <p>
+                          Warning about not indexing personal or sensitive data, something about the cost of indexing.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    className="euiForm"
+                    id="acceleration-form"
+                  >
+                    Array [
+                      <div
+                        className="euiText euiText--medium"
+                        data-test-subj="datasource-selector-header"
+                      >
+                        <h3>
+                          Select data source
+                        </h3>
+                      </div>,
+                      <div
+                        className="euiSpacer euiSpacer--s"
+                      />,
+                      <div
+                        className="euiText euiText--small"
+                      >
+                        <div
+                          className="euiTextColor euiTextColor--subdued"
+                        >
+                          Select data connection where the data you want to accelerate resides.
+                        </div>
+                      </div>,
+                      <div
+                        className="euiSpacer euiSpacer--s"
+                      />,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Data source
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="some_html_id-help-0"
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            className="euiComboBox"
+                            onKeyDown={[Function]}
+                            role="combobox"
+                          >
+                            <div
+                              className="euiFormControlLayout"
+                            >
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  data-test-subj="comboBoxInput"
+                                  onClick={[Function]}
+                                  tabIndex={-1}
+                                >
+                                  <p
+                                    className="euiComboBoxPlaceholder"
+                                  >
+                                    Select a data source
+                                  </p>
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="some_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            A data source has to be configured and active to be able to select it and index data from.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Database
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="some_html_id-help-0"
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            className="euiComboBox"
+                            onKeyDown={[Function]}
+                            role="combobox"
+                          >
+                            <div
+                              className="euiFormControlLayout"
+                            >
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  data-test-subj="comboBoxInput"
+                                  onClick={[Function]}
+                                  tabIndex={-1}
+                                >
+                                  <p
+                                    className="euiComboBoxPlaceholder"
+                                  >
+                                    Select a database
+                                  </p>
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="some_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Select the database that contains the tables you'd like to use.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Table
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="some_html_id-help-0"
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            className="euiComboBox"
+                            onKeyDown={[Function]}
+                            role="combobox"
+                          >
+                            <div
+                              className="euiFormControlLayout"
+                            >
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  data-test-subj="comboBoxInput"
+                                  onClick={[Function]}
+                                  tabIndex={-1}
+                                >
+                                  <p
+                                    className="euiComboBoxPlaceholder"
+                                  >
+                                    Select a table
+                                  </p>
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="some_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Select the Spark table that has the data you would like to index.
+                          </div>
+                        </div>
+                      </div>,
+                    ]
+                    <div
+                      className="euiSpacer euiSpacer--xxl"
+                    />
+                    Array [
+                      <div
+                        className="euiText euiText--medium"
+                        data-test-subj="index-settings-header"
+                      >
+                        <h3>
+                          Index settings
+                        </h3>
+                      </div>,
+                      <div
+                        className="euiSpacer euiSpacer--s"
+                      />,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Index type
+                          </label>
+                           
+                          <div
+                            className="euiText euiText--extraSmall"
+                          >
+                            <a
+                              className="euiLink euiLink--primary"
+                              href="https://opensearch.org/docs/latest"
+                              rel="noopener noreferrer"
+                              target="_blank"
+                            >
+                              Help
+                              <svg
+                                aria-hidden={true}
+                                aria-label="External link"
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                              <span
+                                className="euiScreenReaderOnly"
+                              >
+                                (opens in a new tab or window)
+                              </span>
+                            </a>
+                          </div>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="some_html_id-help-0"
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            className="euiComboBox"
+                            onKeyDown={[Function]}
+                            role="combobox"
+                          >
+                            <div
+                              className="euiFormControlLayout"
+                            >
+                              <div
+                                className="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                  data-test-subj="comboBoxInput"
+                                  onClick={[Function]}
+                                  tabIndex={-1}
+                                >
+                                  <span
+                                    className="euiComboBoxPill euiComboBoxPill--plainText"
+                                    value="skipping"
+                                  >
+                                    Skipping Index
+                                  </span>
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="some_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Select the type of index you want to create. Each index type has benefits and costs.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Number of primary shards
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-describedby="some_html_id-help-0"
+                                aria-label="Number of primary shards"
+                                className="euiFieldNumber"
+                                id="some_html_id"
+                                max={100}
+                                min={1}
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="Number of primary shards"
+                                type="number"
+                                value={5}
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Number of replicas
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-describedby="some_html_id-help-0"
+                                aria-label="Number of replicas"
+                                className="euiFieldNumber"
+                                id="some_html_id"
+                                max={100}
+                                min={0}
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="Number of replicas"
+                                type="number"
+                                value={1}
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Specify the number of replicas each primary shard should have. Default is 1.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Refresh type
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="some_html_id-help-0"
+                            id="some_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                          >
+                            <div
+                              className="euiRadio euiRadioGroup__item"
+                            >
+                              <input
+                                checked={true}
+                                className="euiRadio__input"
+                                id="refresh-option-1"
+                                name="refresh type radio group"
+                                onChange={[Function]}
+                                type="radio"
+                              />
+                              <div
+                                className="euiRadio__circle"
+                              />
+                              <label
+                                className="euiRadio__label"
+                                htmlFor="refresh-option-1"
+                              >
+                                Auto Refresh
+                              </label>
+                            </div>
+                            <div
+                              className="euiRadio euiRadioGroup__item"
+                            >
+                              <input
+                                checked={false}
+                                className="euiRadio__input"
+                                id="refresh-option-2"
+                                name="refresh type radio group"
+                                onChange={[Function]}
+                                type="radio"
+                              />
+                              <div
+                                className="euiRadio__circle"
+                              />
+                              <label
+                                className="euiRadio__label"
+                                htmlFor="refresh-option-2"
+                              >
+                                Refresh by interval
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+                          </div>
+                        </div>
+                      </div>,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Checkpoint location - optional
+                          </label>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-describedby="some_html_id-help-0"
+                                aria-label="Use aria labels when no actual label is in use"
+                                className="euiFieldText"
+                                id="some_html_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="s3://checkpoint/location"
+                                type="text"
+                                value=""
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            The HDFS compatible file system location path for incremental refresh job checkpoint.
+                          </div>
+                        </div>
+                      </div>,
+                    ]
+                    <div
+                      className="euiSpacer euiSpacer--xxl"
+                    />
+                    Array [
+                      <div
+                        className="euiText euiText--medium"
+                        data-test-subj="define-index-header"
+                      >
+                        <h3>
+                          Index settings
+                        </h3>
+                      </div>,
+                      <div
+                        className="euiSpacer euiSpacer--s"
+                      />,
+                      <div
+                        className="euiFormRow"
+                        id="some_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            aria-invalid={false}
+                            className="euiFormLabel euiFormRow__label"
+                            htmlFor="some_html_id"
+                          >
+                            Index name
+                          </label>
+                           
+                          <div
+                            className="euiText euiText--extraSmall"
+                          >
+                            <button
+                              className="euiLink euiLink--primary"
+                              disabled={false}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              Help
+                            </button>
+                          </div>
+                        </div>
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group"
+                          >
+                            <label
+                              className="euiFormLabel euiFormControlLayout__prepend"
+                              htmlFor="some_html_id"
+                            >
+                              flint_{Datasource Name}_{Database Name}_{Table Name}_
+                            </label>
+                            <span
+                              className="euiToolTipAnchor"
+                              onKeyUp={[Function]}
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                aria-label="Info"
+                                className="euiIcon euiIcon--medium euiIcon--subdued euiIcon-isLoading"
+                                focusable="true"
+                                height={16}
+                                onBlur={[Function]}
+                                onFocus={[Function]}
+                                role="img"
+                                style={null}
+                                tabIndex={0}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <input
+                                aria-describedby="some_html_id-help-0"
+                                aria-label="Enter Index Name"
+                                className="euiFieldText euiFieldText--inGroup"
+                                disabled={true}
+                                id="some_html_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                placeholder="Enter index name"
+                                type="text"
+                                value="skipping"
+                              />
+                            </div>
+                            <label
+                              className="euiFormLabel euiFormControlLayout__append"
+                              htmlFor="some_html_id"
+                            >
+                              _index
+                            </label>
+                          </div>
+                          <div
+                            className="euiFormHelpText euiFormRow__text"
+                            id="some_html_id-help-0"
+                          >
+                            Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \\, |, ?, #, &gt;, or &lt; are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.
+                          </div>
+                        </div>
+                      </div>,
+                      "",
+                    ]
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                    Array [
+                      <div
+                        className="euiSpacer euiSpacer--l"
+                      />,
+                      Array [
+                        <div
+                          className="euiText euiText--medium"
+                          data-test-subj="skipping-index-builder"
+                        >
+                          <h3>
+                            Skipping index definition
+                          </h3>
+                        </div>,
+                        <div
+                          className="euiSpacer euiSpacer--s"
+                        />,
+                        <div
+                          className="euiBasicTable"
+                          itemID="id"
+                        >
+                          <div>
+                            <div
+                              className="euiTableHeaderMobile"
+                            >
+                              <div
+                                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                              >
+                                <div
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                />
+                                <div
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                />
+                              </div>
+                            </div>
+                            <table
+                              className="euiTable euiTable--responsive"
+                              id="some_html_id"
+                              tabIndex={-1}
+                            >
+                              <caption
+                                className="euiScreenReaderOnly euiTableCaption"
+                              />
+                              <thead>
+                                <tr>
+                                  <th
+                                    className="euiTableHeaderCell"
+                                    data-test-subj="tableHeaderCell_fieldName_0"
+                                    role="columnheader"
+                                    scope="col"
+                                    style={
+                                      Object {
+                                        "width": undefined,
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Field name"
+                                      >
+                                        Field name
+                                      </span>
+                                    </span>
+                                  </th>
+                                  <th
+                                    className="euiTableHeaderCell"
+                                    data-test-subj="tableHeaderCell_dataType_1"
+                                    role="columnheader"
+                                    scope="col"
+                                    style={
+                                      Object {
+                                        "width": undefined,
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Datatype"
+                                      >
+                                        Datatype
+                                      </span>
+                                    </span>
+                                  </th>
+                                  <th
+                                    className="euiTableHeaderCell"
+                                    data-test-subj="tableHeaderCell_Acceleration method_2"
+                                    role="columnheader"
+                                    scope="col"
+                                    style={
+                                      Object {
+                                        "width": undefined,
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Acceleration method"
+                                      >
+                                        Acceleration method
+                                      </span>
+                                    </span>
+                                  </th>
+                                  <th
+                                    className="euiTableHeaderCell"
+                                    data-test-subj="tableHeaderCell_Delete_3"
+                                    role="columnheader"
+                                    scope="col"
+                                    style={
+                                      Object {
+                                        "width": undefined,
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiTableCellContent"
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Delete"
+                                      >
+                                        Delete
+                                      </span>
+                                    </span>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                <tr
+                                  className="euiTableRow"
+                                >
+                                  <td
+                                    className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                                    colSpan={4}
+                                    style={
+                                      Object {
+                                        "width": undefined,
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="euiTableCellContent euiTableCellContent--alignCenter"
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                      >
+                                        No items found
+                                      </span>
+                                    </div>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>,
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              disabled={false}
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                              type="button"
+                            >
+                              <span
+                                className="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Add fields
+                                </span>
+                              </span>
+                            </button>
+                          </div>
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              className="euiButton euiButton--danger"
+                              disabled={false}
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                              type="button"
+                            >
+                              <span
+                                className="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Bulk delete
+                                </span>
+                              </span>
+                            </button>
+                          </div>
+                        </div>,
+                      ],
+                    ]
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiFlyoutFooter"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    disabled={false}
+                    onClick={[MockFunction]}
+                    type="button"
+                  >
+                    <span
+                      className="euiButtonContent euiButtonEmpty__content"
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <span
+                        className="euiButtonEmpty__text"
+                      >
+                        Close
+                      </span>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <button
+                    className="euiButton euiButton--primary euiButton--fill"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Copy Query to Editor
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>,
+        <div
+          data-focus-guard={true}
+          style={
+            Object {
+              "height": "0px",
+              "left": "1px",
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "fixed",
+              "top": "1px",
+              "width": "1px",
+            }
+          }
+          tabIndex={0}
+        />,
+      ],
+      "",
+    ]
+  </Portal>,
+]
+`;
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap
new file mode 100644
index 00000000..1c099f4b
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration_header.test.tsx.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Acceleration header renders acceleration flyout header 1`] = `
+<div>
+  <header
+    className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+  >
+    <div
+      className="euiPageHeaderSection"
+    >
+      <h1
+        className="euiTitle euiTitle--large"
+        data-test-subj="acceleration-header"
+      >
+        Accelerate data
+      </h1>
+    </div>
+  </header>
+  <div
+    className="euiSpacer euiSpacer--s"
+  />
+  <div
+    className="euiText euiText--small"
+  >
+    <div
+      className="euiTextColor euiTextColor--subdued"
+    >
+      Create OpenSearch Indexes from external data connections for better performance.
+       
+      <a
+        className="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Learn more
+        <svg
+          aria-hidden={true}
+          aria-label="External link"
+          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span
+          className="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx b/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
new file mode 100644
index 00000000..4ad06632
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CautionBannerCallout } from '../caution_banner_callout';
+
+describe('Acceleration callout', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders acceleration flyout callout', async () => {
+    const wrapper = mount(<CautionBannerCallout />);
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx
new file mode 100644
index 00000000..8736c5b0
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAcceleration } from '../create_acceleration';
+
+describe('Create acceleration flyout components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders acceleration flyout component with default options', async () => {
+    const dataSource = '';
+    const resetFlyout = jest.fn();
+    const updateQueries = jest.fn();
+
+    const wrapper = mount(
+      <CreateAcceleration
+        dataSource={dataSource}
+        resetFlyout={resetFlyout}
+        updateQueries={updateQueries}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/create/__tests__/create_acceleration_header.test.tsx b/public/components/acceleration/create/__tests__/create_acceleration_header.test.tsx
new file mode 100644
index 00000000..8f2c42a1
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/create_acceleration_header.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationHeader } from '../create_acceleration_header';
+
+describe('Acceleration header', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders acceleration flyout header', async () => {
+    const wrapper = mount(<CreateAccelerationHeader />);
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/create/__tests__/utils.test.tsx b/public/components/acceleration/create/__tests__/utils.test.tsx
new file mode 100644
index 00000000..060d6385
--- /dev/null
+++ b/public/components/acceleration/create/__tests__/utils.test.tsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ACCELERATION_INDEX_NAME_REGEX,
+  ACCELERATION_S3_URL_REGEX,
+} from '../../../../../common/constants';
+import {
+  coveringIndexDataMock,
+  materializedViewEmptyDataMock,
+  materializedViewEmptyTumbleDataMock,
+  materializedViewStaleDataMock,
+  materializedViewValidDataMock,
+  skippingIndexDataMock,
+} from '../../../../../test/mocks/accelerationMock';
+import {
+  pluralizeTime,
+  validateCheckpointLocation,
+  validateCoveringIndexData,
+  validateDataSource,
+  validateDataTable,
+  validateDatabase,
+  validateIndexName,
+  validateMaterializedViewData,
+  validatePrimaryShardCount,
+  validateRefreshInterval,
+  validateReplicaCount,
+  validateSkippingIndexData,
+} from '../utils';
+
+describe('pluralizeTime', () => {
+  it('should return "s" for a time window greater than 1', () => {
+    expect(pluralizeTime(2)).toBe('s');
+    expect(pluralizeTime(10)).toBe('s');
+    expect(pluralizeTime(100)).toBe('s');
+  });
+
+  it('should return an empty string for a time window of 1/0', () => {
+    expect(pluralizeTime(1)).toBe('');
+    expect(pluralizeTime(0)).toBe(''); // form throws validation error, doesn't allow user to proceed
+  });
+});
+
+describe('validateDataSource', () => {
+  it('should return an array with an error message when the dataSource is empty', () => {
+    expect(validateDataSource('')).toEqual(['Select a valid data source']);
+    expect(validateDataSource('   ')).toEqual(['Select a valid data source']);
+  });
+
+  it('should return an empty array when the dataSource is not empty', () => {
+    expect(validateDataSource('Some_valid_data_source')).toEqual([]);
+    expect(validateDataSource('   Some_valid_data_source   ')).toEqual([]);
+  });
+});
+
+describe('validateDatabase', () => {
+  it('should return an array with an error message when the database is empty', () => {
+    expect(validateDatabase('')).toEqual(['Select a valid database']);
+    expect(validateDatabase('   ')).toEqual(['Select a valid database']);
+  });
+
+  it('should return an empty array when the database is not empty', () => {
+    expect(validateDatabase('Some_valid_database')).toEqual([]);
+    expect(validateDatabase('   Some_valid_database   ')).toEqual([]);
+  });
+});
+
+describe('validateDataTable', () => {
+  it('should return an array with an error message when the dataTable is empty', () => {
+    expect(validateDataTable('')).toEqual(['Select a valid table']);
+    expect(validateDataTable('   ')).toEqual(['Select a valid table']);
+  });
+
+  it('should return an empty array when the dataTable is not empty', () => {
+    expect(validateDataTable('Some_valid_table')).toEqual([]);
+    expect(validateDataTable('   Some_valid_table   ')).toEqual([]);
+  });
+});
+
+describe('validatePrimaryShardCount', () => {
+  it('should return an array with an error message when primaryShardCount is less than 1', () => {
+    expect(validatePrimaryShardCount(0)).toEqual(['Primary shards count should be greater than 0']);
+    expect(validatePrimaryShardCount(-1)).toEqual([
+      'Primary shards count should be greater than 0',
+    ]); // form throws validation error, doesn't allow user to proceed
+  });
+
+  it('should return an empty array when primaryShardCount is greater than or equal to 1', () => {
+    expect(validatePrimaryShardCount(1)).toEqual([]);
+    expect(validatePrimaryShardCount(5)).toEqual([]);
+    expect(validatePrimaryShardCount(100)).toEqual([]);
+  });
+});
+
+describe('validateReplicaCount', () => {
+  it('should return an array with an error message when replicaCount is less than 1', () => {
+    expect(validateReplicaCount(0)).toEqual(['Replica count should be greater than 0']);
+    expect(validateReplicaCount(-1)).toEqual(['Replica count should be greater than 0']); // form throws validation error, doesn't allow user to proceed
+  });
+
+  it('should return an empty array when replicaCount is greater than or equal to 1', () => {
+    expect(validateReplicaCount(1)).toEqual([]);
+    expect(validateReplicaCount(5)).toEqual([]);
+    expect(validateReplicaCount(100)).toEqual([]);
+  });
+});
+
+describe('validateRefreshInterval', () => {
+  it('should return an array with an error message when refreshType is "interval" and refreshWindow is less than 1', () => {
+    expect(validateRefreshInterval('interval', 0)).toEqual([
+      'refresh window should be greater than 0',
+    ]);
+    expect(validateRefreshInterval('interval', -1)).toEqual([
+      'refresh window should be greater than 0',
+    ]);
+    expect(validateRefreshInterval('interval', -10)).toEqual([
+      'refresh window should be greater than 0',
+    ]);
+  });
+
+  it('should return an empty array when refreshType is not "interval" or when refreshWindow is greater than or equal to 1', () => {
+    expect(validateRefreshInterval('auto', 0)).toEqual([]);
+    expect(validateRefreshInterval('auto', 1)).toEqual([]);
+    expect(validateRefreshInterval('interval', 1)).toEqual([]);
+    expect(validateRefreshInterval('auto', 5)).toEqual([]);
+  });
+});
+
+describe('validateIndexName', () => {
+  it('should return an array with an error message when the index name is invalid', () => {
+    expect(validateIndexName('_invalid')).toEqual(['Enter a valid index name']);
+    expect(validateIndexName('-invalid')).toEqual(['Enter a valid index name']);
+    expect(validateIndexName('InVal1d')).toEqual(['Enter a valid index name']);
+    expect(validateIndexName('invalid_with spaces')).toEqual(['Enter a valid index name']);
+  });
+
+  it('should return an empty array when the index name is valid', () => {
+    expect(validateIndexName('valid')).toEqual([]);
+    expect(validateIndexName('valid_name')).toEqual([]);
+    expect(validateIndexName('another-valid-name')).toEqual([]);
+  });
+
+  it('should use the ACCELERATION_INDEX_NAME_REGEX pattern to validate the index name', () => {
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('valid_name')).toBe(true);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('invalid name')).toBe(false);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('-invalid')).toBe(false);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('_invalid')).toBe(false);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('invalid.')).toBe(false);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('invalid<')).toBe(false);
+    expect(ACCELERATION_INDEX_NAME_REGEX.test('invalid*')).toBe(false);
+  });
+});
+
+describe('validateCheckpointLocation', () => {
+  it('should return an array with an error message when creating a materialized view without a checkpoint location', () => {
+    const materializedError = validateCheckpointLocation('materialized', undefined);
+    expect(materializedError).toEqual([
+      'Checkpoint location is mandatory for materialized view creation',
+    ]);
+  });
+
+  it('should return an array with an error message when creating a materialized view without a checkpoint location', () => {
+    const materializedError = validateCheckpointLocation('materialized', '');
+    expect(materializedError).toEqual([
+      'Checkpoint location is mandatory for materialized view creation',
+    ]);
+  });
+
+  it('should return an array with an error message when the checkpoint location is not a valid S3 URL', () => {
+    const invalidCheckpoint = validateCheckpointLocation('skipping', 'not_a_valid_s3_url');
+    expect(invalidCheckpoint).toEqual(['Enter a valid checkpoint location']);
+  });
+
+  it('should return an empty array when the checkpoint location is a valid S3 URL', () => {
+    const validCheckpoint = validateCheckpointLocation(
+      'covering',
+      's3://valid-s3-bucket/path/to/checkpoint'
+    );
+    expect(validCheckpoint).toEqual([]);
+  });
+
+  it('should return an empty array when the checkpoint location is a valid S3A URL', () => {
+    const validCheckpoint = validateCheckpointLocation(
+      'skipping',
+      's3a://valid-s3-bucket/path/to/checkpoint'
+    );
+    expect(validCheckpoint).toEqual([]);
+  });
+
+  it('should return an empty array when creating a materialized view with a valid checkpoint location', () => {
+    const validMaterializedCheckpoint = validateCheckpointLocation(
+      'materialized',
+      's3://valid-s3-bucket/path/to/checkpoint'
+    );
+    expect(validMaterializedCheckpoint).toEqual([]);
+  });
+
+  it('should use the ACCELERATION_S3_URL_REGEX pattern to validate the checkpoint location', () => {
+    expect(ACCELERATION_S3_URL_REGEX.test('s3://valid-s3-bucket/path/to/checkpoint')).toBe(true);
+    expect(ACCELERATION_S3_URL_REGEX.test('s3a://valid-s3-bucket/path/to/checkpoint')).toBe(true);
+    expect(ACCELERATION_S3_URL_REGEX.test('https://amazon.com')).toBe(false);
+    expect(ACCELERATION_S3_URL_REGEX.test('http://www.amazon.com')).toBe(false);
+  });
+});
+
+describe('validateSkippingIndexData', () => {
+  it('should return an array with an error message when accelerationIndexType is "skipping" and no skipping index data is provided', () => {
+    const error = validateSkippingIndexData('skipping', []);
+    expect(error).toEqual(['Add fields to the skipping index definition']);
+  });
+
+  it('should return an empty array when accelerationIndexType is not "skipping"', () => {
+    const noError = validateSkippingIndexData('covering', []);
+    expect(noError).toEqual([]);
+  });
+
+  it('should return an empty array when accelerationIndexType is "skipping" and skipping index data is provided', () => {
+    const noError = validateSkippingIndexData('skipping', skippingIndexDataMock);
+    expect(noError).toEqual([]);
+  });
+});
+
+describe('validateCoveringIndexData', () => {
+  it('should return an array with an error message when accelerationIndexType is "covering" and no covering index data is provided', () => {
+    const error = validateCoveringIndexData('covering', []);
+    expect(error).toEqual(['Add fields to covering index definition']);
+  });
+
+  it('should return an empty array when accelerationIndexType is not "covering"', () => {
+    const noError = validateCoveringIndexData('skipping', []);
+    expect(noError).toEqual([]);
+  });
+
+  it('should return an empty array when accelerationIndexType is "covering" and covering index data is provided', () => {
+    const noError = validateCoveringIndexData('covering', coveringIndexDataMock);
+    expect(noError).toEqual([]);
+  });
+});
+
+describe('validateMaterializedViewData', () => {
+  it('should return an array with an error message when accelerationIndexType is "materialized" and no materialized view data is provided', () => {
+    const error = validateMaterializedViewData('materialized', materializedViewEmptyDataMock);
+    expect(error).toEqual(['Add columns to materialized view definition']);
+  });
+
+  it('should return an array with an error message when accelerationIndexType is "materialized" and groupByTumbleValue is incomplete', () => {
+    const error = validateMaterializedViewData('materialized', materializedViewEmptyTumbleDataMock);
+    expect(error).toEqual(['Add a time field to tumble function in materialized view definition']);
+  });
+
+  it('should return an empty array when accelerationIndexType is not "materialized"', () => {
+    const noError = validateMaterializedViewData('covering', materializedViewStaleDataMock);
+    expect(noError).toEqual([]);
+  });
+
+  it('should return an empty array when accelerationIndexType is "materialized" and materialized view data is complete', () => {
+    const noError = validateMaterializedViewData('materialized', materializedViewValidDataMock);
+    expect(noError).toEqual([]);
+  });
+});
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
index e726adf0..4cfc5e44 100644
--- a/public/components/acceleration/create/create_acceleration.tsx
+++ b/public/components/acceleration/create/create_acceleration.tsx
@@ -12,11 +12,15 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
+  EuiForm,
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
-import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
-import { CreateAccelerationForm } from '../../../../common/types/';
+import {
+  ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
+  ACCELERATION_TIME_INTERVAL,
+} from '../../../../common/constants';
+import { CreateAccelerationForm } from '../../../../common/types';
 import { DefineIndexOptions } from '../selectors/define_index_options';
 import { IndexSettingOptions } from '../selectors/index_setting_options';
 import { AccelerationDataSourceSelector } from '../selectors/source_selector';
@@ -24,16 +28,17 @@ import { accelerationQueryBuilder } from '../visual_editors/query_builder';
 import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
 import { CautionBannerCallout } from './caution_banner_callout';
 import { CreateAccelerationHeader } from './create_acceleration_header';
+import { formValidator, hasError } from './utils';
 
 export interface CreateAccelerationProps {
   dataSource: string;
-  setIsFlyoutVisible(visible: boolean): void;
+  resetFlyout: () => void;
   updateQueries: (query: string) => void;
 }
 
 export const CreateAcceleration = ({
   dataSource,
-  setIsFlyoutVisible,
+  resetFlyout,
   updateQueries,
 }: CreateAccelerationProps) => {
   const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
@@ -52,7 +57,7 @@ export const CreateAcceleration = ({
         tumbleInterval: '',
       },
     },
-    accelerationIndexName: '',
+    accelerationIndexName: ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
     primaryShardsCount: 5,
     replicaShardsCount: 1,
     refreshType: 'auto',
@@ -61,65 +66,76 @@ export const CreateAcceleration = ({
       refreshWindow: 1,
       refreshInterval: ACCELERATION_TIME_INTERVAL[1].value,
     },
+    formErrors: {
+      dataSourceError: [],
+      databaseError: [],
+      dataTableError: [],
+      skippingIndexError: [],
+      coveringIndexError: [],
+      materializedViewError: [],
+      indexNameError: [],
+      primaryShardsError: [],
+      replicaShardsError: [],
+      refreshIntervalError: [],
+      checkpointLocationError: [],
+    },
   });
 
   const copyToEditor = () => {
+    const errors = formValidator(accelerationFormData);
+    if (hasError(errors)) {
+      setAccelerationFormData({ ...accelerationFormData, formErrors: errors });
+      return;
+    }
     updateQueries(accelerationQueryBuilder(accelerationFormData));
+    resetFlyout();
   };
 
   return (
     <>
-      <EuiFlyout
-        ownFocus
-        onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="flyoutTitle"
-        size="m"
-      >
+      <EuiFlyout ownFocus onClose={resetFlyout} aria-labelledby="flyoutTitle" size="m">
         <EuiFlyoutHeader hasBorder>
           <CreateAccelerationHeader />
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <CautionBannerCallout />
           <EuiSpacer size="l" />
-          <AccelerationDataSourceSelector
-            accelerationFormData={accelerationFormData}
-            setAccelerationFormData={setAccelerationFormData}
-          />
-          <EuiSpacer size="xxl" />
-          <IndexSettingOptions
-            accelerationFormData={accelerationFormData}
-            setAccelerationFormData={setAccelerationFormData}
-          />
-          <EuiSpacer size="xxl" />
-          <DefineIndexOptions
-            accelerationFormData={accelerationFormData}
-            setAccelerationFormData={setAccelerationFormData}
-          />
-          <EuiSpacer size="m" />
-          <QueryVisualEditor
-            accelerationFormData={accelerationFormData}
-            setAccelerationFormData={setAccelerationFormData}
-          />
+          <EuiForm
+            isInvalid={hasError(accelerationFormData.formErrors)}
+            error={Object.values(accelerationFormData.formErrors).flat()}
+            component="div"
+            id="acceleration-form"
+          >
+            <AccelerationDataSourceSelector
+              accelerationFormData={accelerationFormData}
+              setAccelerationFormData={setAccelerationFormData}
+            />
+            <EuiSpacer size="xxl" />
+            <IndexSettingOptions
+              accelerationFormData={accelerationFormData}
+              setAccelerationFormData={setAccelerationFormData}
+            />
+            <EuiSpacer size="xxl" />
+            <DefineIndexOptions
+              accelerationFormData={accelerationFormData}
+              setAccelerationFormData={setAccelerationFormData}
+            />
+            <EuiSpacer size="m" />
+            <QueryVisualEditor
+              accelerationFormData={accelerationFormData}
+              setAccelerationFormData={setAccelerationFormData}
+            />
+          </EuiForm>
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                iconType="cross"
-                onClick={() => setIsFlyoutVisible(false)}
-                flush="left"
-              >
+              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
                 Close
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={() => {
-                  copyToEditor();
-                  setIsFlyoutVisible(false);
-                }}
-                fill
-              >
+              <EuiButton onClick={copyToEditor} fill>
                 Copy Query to Editor
               </EuiButton>
             </EuiFlexItem>
diff --git a/public/components/acceleration/create/utils.tsx b/public/components/acceleration/create/utils.tsx
index 798a94ae..a293298c 100644
--- a/public/components/acceleration/create/utils.tsx
+++ b/public/components/acceleration/create/utils.tsx
@@ -3,13 +3,147 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ACCELERATION_INDEX_NAME_REGEX } from '../../../../common/constants';
+import {
+  ACCELERATION_INDEX_NAME_REGEX,
+  ACCELERATION_S3_URL_REGEX,
+} from '../../../../common/constants';
+import {
+  AccelerationIndexType,
+  CreateAccelerationForm,
+  FormErrorsType,
+  SkippingIndexRowType,
+  materializedViewQueryType,
+} from '../../../../common/types';
 
 export const pluralizeTime = (timeWindow: number) => {
   return timeWindow > 1 ? 's' : '';
 };
 
+export const hasError = (formErrors: FormErrorsType, key?: keyof FormErrorsType) => {
+  if (!key) return Object.values(formErrors).some((e) => !!e.length);
+  return !!formErrors[key]?.length;
+};
+
+export const validateDataSource = (dataSource: string) => {
+  return dataSource.trim().length === 0 ? ['Select a valid data source'] : [];
+};
+
+export const validateDatabase = (database: string) => {
+  return database.trim().length === 0 ? ['Select a valid database'] : [];
+};
+
+export const validateDataTable = (dataTable: string) => {
+  return dataTable.trim().length === 0 ? ['Select a valid table'] : [];
+};
+
+export const validatePrimaryShardCount = (primaryShardCount: number) => {
+  return primaryShardCount < 1 ? ['Primary shards count should be greater than 0'] : [];
+};
+
+export const validateReplicaCount = (replicaCount: number) => {
+  return replicaCount < 1 ? ['Replica count should be greater than 0'] : [];
+};
+
+export const validateRefreshInterval = (refreshType: string, refreshWindow: number) => {
+  return refreshType === 'interval' && refreshWindow < 1
+    ? ['refresh window should be greater than 0']
+    : [];
+};
+
 export const validateIndexName = (value: string) => {
   // Check if the value does not begin with underscores or hyphens and all characters are lower case
-  return ACCELERATION_INDEX_NAME_REGEX.test(value);
+  return !ACCELERATION_INDEX_NAME_REGEX.test(value) ? ['Enter a valid index name'] : [];
+};
+
+export const validateCheckpointLocation = (
+  accelerationIndexType: AccelerationIndexType,
+  checkpointLocation: string | undefined
+) => {
+  if (accelerationIndexType === 'materialized' && !checkpointLocation) {
+    return ['Checkpoint location is mandatory for materialized view creation'];
+  }
+
+  if (checkpointLocation && !ACCELERATION_S3_URL_REGEX.test(checkpointLocation))
+    return ['Enter a valid checkpoint location'];
+
+  return [];
+};
+
+export const validateSkippingIndexData = (
+  accelerationIndexType: AccelerationIndexType,
+  skippingIndexQueryData: SkippingIndexRowType[]
+) => {
+  // TODO: Validate dataType match with supported acceleration method type
+  if (accelerationIndexType !== 'skipping') return [];
+
+  if (skippingIndexQueryData.length < 1) return ['Add fields to the skipping index definition'];
+
+  return [];
+};
+
+export const validateCoveringIndexData = (
+  accelerationIndexType: AccelerationIndexType,
+  coveringIndexQueryData: string[]
+) => {
+  if (accelerationIndexType !== 'covering') return [];
+
+  if (coveringIndexQueryData.length < 1) return ['Add fields to covering index definition'];
+  return [];
+};
+
+export const validateMaterializedViewData = (
+  accelerationIndexType: AccelerationIndexType,
+  materializedViewQueryData: materializedViewQueryType
+) => {
+  if (accelerationIndexType !== 'materialized') return [];
+
+  if (materializedViewQueryData.columnsValues.length < 1)
+    return ['Add columns to materialized view definition'];
+
+  if (materializedViewQueryData.groupByTumbleValue.timeField === '')
+    return ['Add a time field to tumble function in materialized view definition'];
+
+  if (materializedViewQueryData.groupByTumbleValue.tumbleWindow < 1)
+    return ['Add a valid time window to tumble function in materialized view definition'];
+  return [];
+};
+
+export const formValidator = (accelerationformData: CreateAccelerationForm) => {
+  const {
+    dataSource,
+    database,
+    dataTable,
+    accelerationIndexType,
+    skippingIndexQueryData,
+    coveringIndexQueryData,
+    materializedViewQueryData,
+    accelerationIndexName,
+    primaryShardsCount,
+    replicaShardsCount,
+    refreshType,
+    checkpointLocation,
+    refreshIntervalOptions,
+  } = accelerationformData;
+
+  const accelerationFormErrors = {
+    dataSourceError: validateDataSource(dataSource),
+    databaseError: validateDatabase(database),
+    dataTableError: validateDataTable(dataTable),
+    primaryShardsError: validatePrimaryShardCount(primaryShardsCount),
+    replicaShardsError: validateReplicaCount(replicaShardsCount),
+    refreshIntervalError: validateRefreshInterval(
+      refreshType,
+      refreshIntervalOptions.refreshWindow
+    ),
+    checkpointLocationError: validateCheckpointLocation(accelerationIndexType, checkpointLocation),
+    indexNameError: validateIndexName(accelerationIndexName),
+    skippingIndexError: validateSkippingIndexData(accelerationIndexType, skippingIndexQueryData),
+    coveringIndexError: validateCoveringIndexData(accelerationIndexType, coveringIndexQueryData),
+    materializedViewError: validateMaterializedViewData(
+      accelerationIndexType,
+      materializedViewQueryData
+    ),
+  };
+
+  return accelerationFormErrors;
 };
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
new file mode 100644
index 00000000..2ff218f3
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
@@ -0,0 +1,336 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Index options acceleration components renders acceleration index options with covering index options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="define-index-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index name
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <button
+          className="euiLink euiLink--primary"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Help
+        </button>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout euiFormControlLayout--group"
+      >
+        <label
+          className="euiFormLabel euiFormControlLayout__prepend"
+          htmlFor="some_html_id"
+        >
+          flint_{Datasource Name}_{Database Name}_{Table Name}_
+        </label>
+        <span
+          className="euiToolTipAnchor"
+          onKeyUp={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <svg
+            aria-label="Info"
+            className="euiIcon euiIcon--medium euiIcon--subdued"
+            focusable="true"
+            height={16}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            role="img"
+            style={null}
+            tabIndex={0}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.5 11.508 7.468 8H6.25V7h2.401l.03 3.508H9.8v1H7.5Zm-.25-6.202a.83.83 0 0 1 .207-.577c.137-.153.334-.229.59-.229.256 0 .454.076.594.23.14.152.209.345.209.576 0 .228-.07.417-.21.568-.14.15-.337.226-.593.226-.256 0-.453-.075-.59-.226a.81.81 0 0 1-.207-.568ZM8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10Zm0 1A6 6 0 1 1 8 2a6 6 0 0 1 0 12Z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Enter Index Name"
+            className="euiFieldText euiFieldText--inGroup"
+            disabled={false}
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Enter index name"
+            type="text"
+            value="covering-idx"
+          />
+        </div>
+        <label
+          className="euiFormLabel euiFormControlLayout__append"
+          htmlFor="some_html_id"
+        >
+          _index
+        </label>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \\, |, ?, #, &gt;, or &lt; are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.
+      </div>
+    </div>
+  </div>,
+  "",
+]
+`;
+
+exports[`Index options acceleration components renders acceleration index options with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="define-index-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index name
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <button
+          className="euiLink euiLink--primary"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Help
+        </button>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout euiFormControlLayout--group"
+      >
+        <label
+          className="euiFormLabel euiFormControlLayout__prepend"
+          htmlFor="some_html_id"
+        >
+          flint_{Datasource Name}_{Database Name}_{Table Name}_
+        </label>
+        <span
+          className="euiToolTipAnchor"
+          onKeyUp={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <svg
+            aria-hidden={true}
+            aria-label="Info"
+            className="euiIcon euiIcon--medium euiIcon--subdued euiIcon-isLoading"
+            focusable="true"
+            height={16}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            role="img"
+            style={null}
+            tabIndex={0}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </span>
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Enter Index Name"
+            className="euiFieldText euiFieldText--inGroup"
+            disabled={true}
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Enter index name"
+            type="text"
+            value="skipping"
+          />
+        </div>
+        <label
+          className="euiFormLabel euiFormControlLayout__append"
+          htmlFor="some_html_id"
+        >
+          _index
+        </label>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \\, |, ?, #, &gt;, or &lt; are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.
+      </div>
+    </div>
+  </div>,
+  "",
+]
+`;
+
+exports[`Index options acceleration components renders acceleration index options with materialized index options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="define-index-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index name
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <button
+          className="euiLink euiLink--primary"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          Help
+        </button>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout euiFormControlLayout--group"
+      >
+        <label
+          className="euiFormLabel euiFormControlLayout__prepend"
+          htmlFor="some_html_id"
+        >
+          flint_{Datasource Name}_{Database Name}_{Table Name}_
+        </label>
+        <span
+          className="euiToolTipAnchor"
+          onKeyUp={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+        >
+          <svg
+            aria-label="Info"
+            className="euiIcon euiIcon--medium euiIcon--subdued"
+            focusable="true"
+            height={16}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            role="img"
+            style={null}
+            tabIndex={0}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.5 11.508 7.468 8H6.25V7h2.401l.03 3.508H9.8v1H7.5Zm-.25-6.202a.83.83 0 0 1 .207-.577c.137-.153.334-.229.59-.229.256 0 .454.076.594.23.14.152.209.345.209.576 0 .228-.07.417-.21.568-.14.15-.337.226-.593.226-.256 0-.453-.075-.59-.226a.81.81 0 0 1-.207-.568ZM8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10Zm0 1A6 6 0 1 1 8 2a6 6 0 0 1 0 12Z"
+              fillRule="evenodd"
+            />
+          </svg>
+        </span>
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Enter Index Name"
+            className="euiFieldText euiFieldText--inGroup"
+            disabled={false}
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Enter index name"
+            type="text"
+            value="mv_metrics"
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \\, |, ?, #, &gt;, or &lt; are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.
+      </div>
+    </div>
+  </div>,
+  "",
+]
+`;
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
new file mode 100644
index 00000000..72dad5ea
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
@@ -0,0 +1,1154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Index settings acceleration components renders acceleration index settings with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="index-settings-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index type
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <a
+          className="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/latest"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Help
+          <svg
+            aria-hidden={true}
+            aria-label="External link"
+            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+            focusable="false"
+            height={16}
+            role="img"
+            style={null}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          />
+          <span
+            className="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <span
+                className="euiComboBoxPill euiComboBoxPill--plainText"
+                value="skipping"
+              >
+                Skipping Index
+              </span>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the type of index you want to create. Each index type has benefits and costs.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of primary shards
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of primary shards"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={1}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of primary shards"
+            type="number"
+            value={5}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of replicas
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of replicas"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={0}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of replicas"
+            type="number"
+            value={1}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of replicas each primary shard should have. Default is 1.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Refresh type
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        id="some_html_id"
+        onBlur={[Function]}
+        onFocus={[Function]}
+      >
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={true}
+            className="euiRadio__input"
+            id="refresh-option-1"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-1"
+          >
+            Auto Refresh
+          </label>
+        </div>
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={false}
+            className="euiRadio__input"
+            id="refresh-option-2"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-2"
+          >
+            Refresh by interval
+          </label>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Checkpoint location - optional
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Use aria labels when no actual label is in use"
+            className="euiFieldText"
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="s3://checkpoint/location"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        The HDFS compatible file system location path for incremental refresh job checkpoint.
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Index settings acceleration components renders acceleration index settings with different options1 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="index-settings-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index type
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <a
+          className="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/latest"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Help
+          <svg
+            aria-label="External link"
+            className="euiIcon euiIcon--small euiLink__externalIcon"
+            focusable="false"
+            height={16}
+            role="img"
+            style={null}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            className="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <span
+                className="euiComboBoxPill euiComboBoxPill--plainText"
+                value="skipping"
+              >
+                Skipping Index
+              </span>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fillRule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the type of index you want to create. Each index type has benefits and costs.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of primary shards
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of primary shards"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={1}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of primary shards"
+            type="number"
+            value={5}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of replicas
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of replicas"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={0}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of replicas"
+            type="number"
+            value={1}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of replicas each primary shard should have. Default is 1.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Refresh type
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        id="some_html_id"
+        onBlur={[Function]}
+        onFocus={[Function]}
+      >
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={true}
+            className="euiRadio__input"
+            id="refresh-option-1"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-1"
+          >
+            Auto Refresh
+          </label>
+        </div>
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={false}
+            className="euiRadio__input"
+            id="refresh-option-2"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-2"
+          >
+            Refresh by interval
+          </label>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Checkpoint location - optional
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Use aria labels when no actual label is in use"
+            className="euiFieldText"
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="s3://checkpoint/location"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        The HDFS compatible file system location path for incremental refresh job checkpoint.
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Index settings acceleration components renders acceleration index settings with different options2 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="index-settings-header"
+  >
+    <h3>
+      Index settings
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Index type
+      </label>
+       
+      <div
+        className="euiText euiText--extraSmall"
+      >
+        <a
+          className="euiLink euiLink--primary"
+          href="https://opensearch.org/docs/latest"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Help
+          <svg
+            aria-label="External link"
+            className="euiIcon euiIcon--small euiLink__externalIcon"
+            focusable="false"
+            height={16}
+            role="img"
+            style={null}
+            viewBox="0 0 16 16"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+            />
+          </svg>
+          <span
+            className="euiScreenReaderOnly"
+          >
+            (opens in a new tab or window)
+          </span>
+        </a>
+      </div>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <span
+                className="euiComboBoxPill euiComboBoxPill--plainText"
+                value="skipping"
+              >
+                Skipping Index
+              </span>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fillRule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the type of index you want to create. Each index type has benefits and costs.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of primary shards
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of primary shards"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={1}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of primary shards"
+            type="number"
+            value={5}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Number of replicas
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Number of replicas"
+            className="euiFieldNumber"
+            id="some_html_id"
+            max={100}
+            min={0}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Number of replicas"
+            type="number"
+            value={1}
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify the number of replicas each primary shard should have. Default is 1.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Refresh type
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        id="some_html_id"
+        onBlur={[Function]}
+        onFocus={[Function]}
+      >
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={true}
+            className="euiRadio__input"
+            id="refresh-option-1"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-1"
+          >
+            Auto Refresh
+          </label>
+        </div>
+        <div
+          className="euiRadio euiRadioGroup__item"
+        >
+          <input
+            checked={false}
+            className="euiRadio__input"
+            id="refresh-option-2"
+            name="refresh type radio group"
+            onChange={[Function]}
+            type="radio"
+          />
+          <div
+            className="euiRadio__circle"
+          />
+          <label
+            className="euiRadio__label"
+            htmlFor="refresh-option-2"
+          >
+            Refresh by interval
+          </label>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Specify how often the index should refresh, which publishes the most recent changes and make them available for search. Default is set to auto refresh when data at the source changes.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Checkpoint location - optional
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="some_html_id-help-0"
+            aria-label="Use aria labels when no actual label is in use"
+            className="euiFieldText"
+            id="some_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="s3://checkpoint/location"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        The HDFS compatible file system location path for incremental refresh job checkpoint.
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
new file mode 100644
index 00000000..6a41fd85
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Index type selector components renders type selector with default options 1`] = `
+<div
+  className="euiFormRow"
+  id="some_html_id-row"
+>
+  <div
+    className="euiFormRow__labelWrapper"
+  >
+    <label
+      className="euiFormLabel euiFormRow__label"
+      htmlFor="some_html_id"
+    >
+      Index type
+    </label>
+     
+    <div
+      className="euiText euiText--extraSmall"
+    >
+      <a
+        className="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Help
+        <svg
+          aria-hidden={true}
+          aria-label="External link"
+          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span
+          className="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    className="euiFormRow__fieldWrapper"
+  >
+    <div
+      aria-describedby="some_html_id-help-0"
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      className="euiComboBox"
+      onKeyDown={[Function]}
+      role="combobox"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <div
+            className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+            data-test-subj="comboBoxInput"
+            onClick={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              className="euiComboBoxPill euiComboBoxPill--plainText"
+              value="skipping"
+            >
+              Skipping Index
+            </span>
+            <div
+              className="euiComboBox__input"
+              style={
+                Object {
+                  "display": "inline-block",
+                  "fontSize": 14,
+                }
+              }
+            >
+              <input
+                aria-controls=""
+                data-test-subj="comboBoxSearchInput"
+                id="some_html_id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                role="textbox"
+                style={
+                  Object {
+                    "boxSizing": "content-box",
+                    "width": "2px",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "height": 0,
+                    "left": 0,
+                    "overflow": "scroll",
+                    "position": "absolute",
+                    "top": 0,
+                    "visibility": "hidden",
+                    "whiteSpace": "pre",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <button
+              aria-label="Open list of options"
+              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+              data-test-subj="comboBoxToggleListButton"
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFormHelpText euiFormRow__text"
+      id="some_html_id-help-0"
+    >
+      Select the type of index you want to create. Each index type has benefits and costs.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Index type selector components renders type selector with different options 1`] = `
+<div
+  className="euiFormRow"
+  id="some_html_id-row"
+>
+  <div
+    className="euiFormRow__labelWrapper"
+  >
+    <label
+      className="euiFormLabel euiFormRow__label"
+      htmlFor="some_html_id"
+    >
+      Index type
+    </label>
+     
+    <div
+      className="euiText euiText--extraSmall"
+    >
+      <a
+        className="euiLink euiLink--primary"
+        href="https://opensearch.org/docs/latest"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Help
+        <svg
+          aria-label="External link"
+          className="euiIcon euiIcon--small euiLink__externalIcon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13 8.5a.5.5 0 1 1 1 0V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.5a.5.5 0 0 1 0 1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5Zm-5.12.339a.5.5 0 1 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72L7.88 8.838Z"
+          />
+        </svg>
+        <span
+          className="euiScreenReaderOnly"
+        >
+          (opens in a new tab or window)
+        </span>
+      </a>
+    </div>
+  </div>
+  <div
+    className="euiFormRow__fieldWrapper"
+  >
+    <div
+      aria-describedby="some_html_id-help-0"
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      className="euiComboBox"
+      onKeyDown={[Function]}
+      role="combobox"
+    >
+      <div
+        className="euiFormControlLayout"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <div
+            className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+            data-test-subj="comboBoxInput"
+            onClick={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              className="euiComboBoxPill euiComboBoxPill--plainText"
+              value="skipping"
+            >
+              Skipping Index
+            </span>
+            <div
+              className="euiComboBox__input"
+              style={
+                Object {
+                  "display": "inline-block",
+                  "fontSize": 14,
+                }
+              }
+            >
+              <input
+                aria-controls=""
+                data-test-subj="comboBoxSearchInput"
+                id="some_html_id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                role="textbox"
+                style={
+                  Object {
+                    "boxSizing": "content-box",
+                    "width": "2px",
+                  }
+                }
+                value=""
+              />
+              <div
+                style={
+                  Object {
+                    "height": 0,
+                    "left": 0,
+                    "overflow": "scroll",
+                    "position": "absolute",
+                    "top": 0,
+                    "visibility": "hidden",
+                    "whiteSpace": "pre",
+                  }
+                }
+              />
+            </div>
+          </div>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <button
+              aria-label="Open list of options"
+              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+              data-test-subj="comboBoxToggleListButton"
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                  fillRule="non-zero"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFormHelpText euiFormRow__text"
+      id="some_html_id-help-0"
+    >
+      Select the type of index you want to create. Each index type has benefits and costs.
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
new file mode 100644
index 00000000..bf2a7962
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
@@ -0,0 +1,774 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Source selector components renders source selector with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="datasource-selector-header"
+  >
+    <h3>
+      Select data source
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiText euiText--small"
+  >
+    <div
+      className="euiTextColor euiTextColor--subdued"
+    >
+      Select data connection where the data you want to accelerate resides.
+    </div>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Data source
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a data source
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        A data source has to be configured and active to be able to select it and index data from.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Database
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a database
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the database that contains the tables you'd like to use.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Table
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a table
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the Spark table that has the data you would like to index.
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Source selector components renders source selector with different options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="datasource-selector-header"
+  >
+    <h3>
+      Select data source
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiText euiText--small"
+  >
+    <div
+      className="euiTextColor euiTextColor--subdued"
+    >
+      Select data connection where the data you want to accelerate resides.
+    </div>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Data source
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a data source
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fillRule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        A data source has to be configured and active to be able to select it and index data from.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Database
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a database
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fillRule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the database that contains the tables you'd like to use.
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFormRow"
+    id="some_html_id-row"
+  >
+    <div
+      className="euiFormRow__labelWrapper"
+    >
+      <label
+        aria-invalid={false}
+        className="euiFormLabel euiFormRow__label"
+        htmlFor="some_html_id"
+      >
+        Table
+      </label>
+    </div>
+    <div
+      className="euiFormRow__fieldWrapper"
+    >
+      <div
+        aria-describedby="some_html_id-help-0"
+        aria-expanded={false}
+        aria-haspopup="listbox"
+        className="euiComboBox"
+        onKeyDown={[Function]}
+        role="combobox"
+      >
+        <div
+          className="euiFormControlLayout"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <div
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              data-test-subj="comboBoxInput"
+              onClick={[Function]}
+              tabIndex={-1}
+            >
+              <p
+                className="euiComboBoxPlaceholder"
+              >
+                Select a table
+              </p>
+              <div
+                className="euiComboBox__input"
+                style={
+                  Object {
+                    "display": "inline-block",
+                    "fontSize": 14,
+                  }
+                }
+              >
+                <input
+                  aria-controls=""
+                  data-test-subj="comboBoxSearchInput"
+                  id="some_html_id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  role="textbox"
+                  style={
+                    Object {
+                      "boxSizing": "content-box",
+                      "width": "2px",
+                    }
+                  }
+                  value=""
+                />
+                <div
+                  style={
+                    Object {
+                      "height": 0,
+                      "left": 0,
+                      "overflow": "scroll",
+                      "position": "absolute",
+                      "top": 0,
+                      "visibility": "hidden",
+                      "whiteSpace": "pre",
+                    }
+                  }
+                />
+              </div>
+            </div>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <button
+                aria-label="Open list of options"
+                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                data-test-subj="comboBoxToggleListButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                    fillRule="non-zero"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFormHelpText euiFormRow__text"
+        id="some_html_id-help-0"
+      >
+        Select the Spark table that has the data you would like to index.
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/public/components/acceleration/selectors/__tests__/define_index_options.test.tsx b/public/components/acceleration/selectors/__tests__/define_index_options.test.tsx
new file mode 100644
index 00000000..4d8cf515
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/define_index_options.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import { createAccelerationEmptyDataMock } from '../../../../../test/mocks/accelerationMock';
+import { DefineIndexOptions } from '../define_index_options';
+
+describe('Index options acceleration components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders acceleration index options with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <DefineIndexOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders acceleration index options with covering index options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'covering',
+      accelerationIndexName: 'covering-idx',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <DefineIndexOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders acceleration index options with materialized index options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      accelerationIndexName: 'mv_metrics',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <DefineIndexOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/selectors/__tests__/index_setting_options.test.tsx b/public/components/acceleration/selectors/__tests__/index_setting_options.test.tsx
new file mode 100644
index 00000000..a8094b19
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/index_setting_options.test.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import { createAccelerationEmptyDataMock } from '../../../../../test/mocks/accelerationMock';
+import { IndexSettingOptions } from '../index_setting_options';
+
+describe('Index settings acceleration components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders acceleration index settings with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <IndexSettingOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders acceleration index settings with different options1', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      primaryShardsCount: 1,
+      replicaShardsCount: 5,
+      refreshType: 'auto',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <IndexSettingOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders acceleration index settings with different options2', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      primaryShardsCount: 5,
+      replicaShardsCount: 1,
+      refreshType: 'interval',
+      refreshIntervalOptions: { refreshWindow: 1, refreshInterval: 'second' },
+      checkpointLocation: 's3://test/url',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <IndexSettingOptions
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/selectors/__tests__/index_type_selector.test.tsx b/public/components/acceleration/selectors/__tests__/index_type_selector.test.tsx
new file mode 100644
index 00000000..ba2e082c
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/index_type_selector.test.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import { createAccelerationEmptyDataMock } from '../../../../../test/mocks/accelerationMock';
+import { IndexTypeSelector } from '../index_type_selector';
+
+describe('Index type selector components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders type selector with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <IndexTypeSelector
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders type selector with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'covering',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <IndexTypeSelector
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/selectors/__tests__/source_selector.test.tsx b/public/components/acceleration/selectors/__tests__/source_selector.test.tsx
new file mode 100644
index 00000000..f5d1ff57
--- /dev/null
+++ b/public/components/acceleration/selectors/__tests__/source_selector.test.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import { createAccelerationEmptyDataMock } from '../../../../../test/mocks/accelerationMock';
+import { AccelerationDataSourceSelector } from '../source_selector';
+
+describe('Source selector components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders source selector with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <AccelerationDataSourceSelector
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders source selector with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      dataSource: 'ds',
+      database: 'db',
+      dataTable: 'tb',
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <AccelerationDataSourceSelector
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/selectors/define_index_options.tsx b/public/components/acceleration/selectors/define_index_options.tsx
index e43f7258..9deebd87 100644
--- a/public/components/acceleration/selectors/define_index_options.tsx
+++ b/public/components/acceleration/selectors/define_index_options.tsx
@@ -20,10 +20,11 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import producer from 'immer';
 import React, { ChangeEvent, useState } from 'react';
 import { ACCELERATION_INDEX_NAME_INFO } from '../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../common/types';
-import { validateIndexName } from '../create/utils';
+import { hasError, validateIndexName } from '../create/utils';
 
 interface DefineIndexOptionsProps {
   accelerationFormData: CreateAccelerationForm;
@@ -34,7 +35,6 @@ export const DefineIndexOptions = ({
   accelerationFormData,
   setAccelerationFormData,
 }: DefineIndexOptionsProps) => {
-  const [indexName, setIndexName] = useState('');
   const [modalComponent, setModalComponent] = useState(<></>);
 
   const modalValue = (
@@ -61,7 +61,6 @@ export const DefineIndexOptions = ({
 
   const onChangeIndexName = (e: ChangeEvent<HTMLInputElement>) => {
     setAccelerationFormData({ ...accelerationFormData, accelerationIndexName: e.target.value });
-    setIndexName(e.target.value);
   };
 
   const getPreprend = () => {
@@ -94,8 +93,9 @@ export const DefineIndexOptions = ({
       <EuiSpacer size="s" />
       <EuiFormRow
         label="Index name"
-        helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed. 
-        Prefix and suffix are added to the name of generated OpenSearch index.'
+        helpText='Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.'
+        isInvalid={hasError(accelerationFormData.formErrors, 'indexNameError')}
+        error={accelerationFormData.formErrors.indexNameError}
         labelAppend={
           <EuiText size="xs">
             <EuiLink onClick={() => setModalComponent(modalValue)}>Help</EuiLink>
@@ -104,13 +104,20 @@ export const DefineIndexOptions = ({
       >
         <EuiFieldText
           placeholder="Enter index name"
-          value={accelerationFormData.accelerationIndexType === 'skipping' ? 'skipping' : indexName}
+          value={accelerationFormData.accelerationIndexName}
           onChange={onChangeIndexName}
           aria-label="Enter Index Name"
           prepend={getPreprend()}
           append={getAppend()}
           disabled={accelerationFormData.accelerationIndexType === 'skipping'}
-          isInvalid={validateIndexName(indexName)}
+          isInvalid={hasError(accelerationFormData.formErrors, 'indexNameError')}
+          onBlur={(e) => {
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.formErrors.indexNameError = validateIndexName(e.target.value);
+              })
+            );
+          }}
         />
       </EuiFormRow>
       {modalComponent}
diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx
index 02ec6a2a..f5a0c69a 100644
--- a/public/components/acceleration/selectors/index_setting_options.tsx
+++ b/public/components/acceleration/selectors/index_setting_options.tsx
@@ -12,9 +12,17 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
+import producer from 'immer';
 import React, { ChangeEvent, useState } from 'react';
 import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../common/types';
+import {
+  hasError,
+  validateCheckpointLocation,
+  validatePrimaryShardCount,
+  validateRefreshInterval,
+  validateReplicaCount,
+} from '../create/utils';
 import { IndexTypeSelector } from './index_type_selector';
 
 interface IndexSettingOptionsProps {
@@ -47,13 +55,13 @@ export const IndexSettingOptions = ({
   const [checkpoint, setCheckpoint] = useState('');
 
   const onChangePrimaryShards = (e: ChangeEvent<HTMLInputElement>) => {
-    const countPrimaryShards = +e.target.value;
+    const countPrimaryShards = parseInt(e.target.value, 10);
     setAccelerationFormData({ ...accelerationFormData, primaryShardsCount: countPrimaryShards });
     setPrimaryShards(countPrimaryShards);
   };
 
   const onChangeReplicaCount = (e: ChangeEvent<HTMLInputElement>) => {
-    const replicaCount = +e.target.value;
+    const replicaCount = parseInt(e.target.value, 10);
     setAccelerationFormData({ ...accelerationFormData, replicaShardsCount: replicaCount });
     setReplicaCount(replicaCount);
   };
@@ -67,26 +75,22 @@ export const IndexSettingOptions = ({
   };
 
   const onChangeRefreshWindow = (e: ChangeEvent<HTMLInputElement>) => {
-    const windowCount = +e.target.value;
-    setAccelerationFormData({
-      ...accelerationFormData,
-      refreshIntervalOptions: {
-        ...accelerationFormData.refreshIntervalOptions,
-        refreshWindow: windowCount,
-      },
-    });
+    const windowCount = parseInt(e.target.value, 10);
+    setAccelerationFormData(
+      producer((accData) => {
+        accData.refreshIntervalOptions.refreshWindow = windowCount;
+      })
+    );
     setRefreshWindow(windowCount);
   };
 
   const onChangeRefreshInterval = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const refreshIntervalValue = e.target.value;
-    setAccelerationFormData({
-      ...accelerationFormData,
-      refreshIntervalOptions: {
-        ...accelerationFormData.refreshIntervalOptions,
-        refreshInterval: refreshIntervalValue,
-      },
-    });
+    setAccelerationFormData(
+      producer((accData) => {
+        accData.refreshIntervalOptions.refreshInterval = refreshIntervalValue;
+      })
+    );
     setRefreshInterval(refreshIntervalValue);
   };
 
@@ -108,8 +112,9 @@ export const IndexSettingOptions = ({
       />
       <EuiFormRow
         label="Number of primary shards"
-        helpText="Specify the number of primary shards for the index. Default is 5. 
-        The number of primary shards cannot be changed after the index is created."
+        helpText="Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created."
+        isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
+        error={accelerationFormData.formErrors.primaryShardsError}
       >
         <EuiFieldNumber
           placeholder="Number of primary shards"
@@ -118,11 +123,23 @@ export const IndexSettingOptions = ({
           aria-label="Number of primary shards"
           min={1}
           max={100}
+          onBlur={(e) => {
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.formErrors.primaryShardsError = validatePrimaryShardCount(
+                  parseInt(e.target.value, 10)
+                );
+              })
+            );
+          }}
+          isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         />
       </EuiFormRow>
       <EuiFormRow
         label="Number of replicas"
         helpText="Specify the number of replicas each primary shard should have. Default is 1."
+        isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
+        error={accelerationFormData.formErrors.replicaShardsError}
       >
         <EuiFieldNumber
           placeholder="Number of replicas"
@@ -131,6 +148,16 @@ export const IndexSettingOptions = ({
           aria-label="Number of replicas"
           min={0}
           max={100}
+          onBlur={(e) => {
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.formErrors.replicaShardsError = validateReplicaCount(
+                  parseInt(e.target.value, 10)
+                );
+              })
+            );
+          }}
+          isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -148,6 +175,8 @@ export const IndexSettingOptions = ({
         <EuiFormRow
           label="Refresh interval"
           helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search"
+          isInvalid={hasError(accelerationFormData.formErrors, 'refreshIntervalError')}
+          error={accelerationFormData.formErrors.refreshIntervalError}
         >
           <EuiFieldNumber
             placeholder="Refresh interval"
@@ -155,6 +184,17 @@ export const IndexSettingOptions = ({
             onChange={onChangeRefreshWindow}
             aria-label="Refresh interval"
             min={1}
+            isInvalid={hasError(accelerationFormData.formErrors, 'refreshIntervalError')}
+            onBlur={(e) => {
+              setAccelerationFormData(
+                producer((accData) => {
+                  accData.formErrors.refreshIntervalError = validateRefreshInterval(
+                    refreshTypeSelected,
+                    parseInt(e.target.value, 10)
+                  );
+                })
+              );
+            }}
             append={
               <EuiSelect
                 value={refreshInterval}
@@ -172,15 +212,25 @@ export const IndexSettingOptions = ({
             : 'Checkpoint location - optional'
         }
         helpText="The HDFS compatible file system location path for incremental refresh job checkpoint."
+        isInvalid={hasError(accelerationFormData.formErrors, 'checkpointLocationError')}
+        error={accelerationFormData.formErrors.checkpointLocationError}
       >
         <EuiFieldText
           placeholder="s3://checkpoint/location"
           value={checkpoint}
           onChange={onChangeCheckpoint}
           aria-label="Use aria labels when no actual label is in use"
-          isInvalid={
-            accelerationFormData.accelerationIndexType === 'materialized' && checkpoint === ''
-          }
+          isInvalid={hasError(accelerationFormData.formErrors, 'checkpointLocationError')}
+          onBlur={(e) => {
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.formErrors.checkpointLocationError = validateCheckpointLocation(
+                  accData.accelerationIndexType,
+                  e.target.value
+                );
+              })
+            );
+          }}
         />
       </EuiFormRow>
     </>
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index fe822322..06b7828d 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -6,6 +6,7 @@
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
 import React, { useState } from 'react';
 import {
+  ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
   ACCELERATION_INDEX_TYPES,
   ACC_INDEX_TYPE_DOCUMENTATION_URL,
 } from '../../../../common/constants';
@@ -23,6 +24,17 @@ export const IndexTypeSelector = ({
   const [selectedIndexType, setSelectedIndexType] = useState<EuiComboBoxOptionOption<string>[]>([
     ACCELERATION_INDEX_TYPES[0],
   ]);
+
+  const onChangeIndexType = (indexTypeOption: EuiComboBoxOptionOption<string>[]) => {
+    const indexType = indexTypeOption[0].value as AccelerationIndexType;
+    setAccelerationFormData({
+      ...accelerationFormData,
+      accelerationIndexType: indexType,
+      accelerationIndexName:
+        indexType === 'skipping' ? ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME : '',
+    });
+    setSelectedIndexType(indexTypeOption);
+  };
   return (
     <>
       <EuiFormRow
@@ -41,13 +53,7 @@ export const IndexTypeSelector = ({
           singleSelection={{ asPlainText: true }}
           options={ACCELERATION_INDEX_TYPES}
           selectedOptions={selectedIndexType}
-          onChange={(indexType) => {
-            setAccelerationFormData({
-              ...accelerationFormData,
-              accelerationIndexType: indexType[0].value as AccelerationIndexType,
-            });
-            setSelectedIndexType(indexType);
-          }}
+          onChange={onChangeIndexType}
           isInvalid={selectedIndexType.length === 0}
           isClearable={false}
         />
diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
index 02ffc251..a0f068ba 100644
--- a/public/components/acceleration/selectors/source_selector.tsx
+++ b/public/components/acceleration/selectors/source_selector.tsx
@@ -11,8 +11,10 @@ import {
   EuiText,
   htmlIdGenerator,
 } from '@elastic/eui';
+import producer from 'immer';
 import React, { useEffect, useState } from 'react';
 import { CreateAccelerationForm } from '../../../../common/types';
+import { hasError, validateDataSource } from '../create/utils';
 
 interface AccelerationDataSourceSelectorProps {
   accelerationFormData: CreateAccelerationForm;
@@ -109,6 +111,8 @@ export const AccelerationDataSourceSelector = ({
       <EuiFormRow
         label="Data source"
         helpText="A data source has to be configured and active to be able to select it and index data from."
+        isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
+        error={accelerationFormData.formErrors.dataSourceError}
       >
         <EuiComboBox
           placeholder="Select a data source"
@@ -116,39 +120,49 @@ export const AccelerationDataSourceSelector = ({
           options={dataConnections}
           selectedOptions={selectedDataConnection}
           onChange={(dataConnectionOptions) => {
-            setAccelerationFormData({
-              ...accelerationFormData,
-              dataSource: dataConnectionOptions[0].label,
-            });
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.dataSource = dataConnectionOptions[0].label;
+                accData.formErrors.dataSourceError = validateDataSource(
+                  dataConnectionOptions[0].label
+                );
+              })
+            );
             setSelectedDataConnection(dataConnectionOptions);
           }}
-          isInvalid={selectedDataConnection.length === 0}
           isClearable={false}
+          isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
         />
       </EuiFormRow>
       <EuiFormRow
         label="Database"
         helpText="Select the database that contains the tables you'd like to use."
+        isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
+        error={accelerationFormData.formErrors.databaseError}
       >
         <EuiComboBox
           placeholder="Select a database"
           singleSelection={{ asPlainText: true }}
           options={databases}
           selectedOptions={selectedDatabase}
-          onChange={(tableOptions) => {
-            setAccelerationFormData({
-              ...accelerationFormData,
-              database: tableOptions[0].label,
-            });
-            setSelectedDatabase(tableOptions);
+          onChange={(databaseOptions) => {
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.database = databaseOptions[0].label;
+                accData.formErrors.databaseError = validateDataSource(databaseOptions[0].label);
+              })
+            );
+            setSelectedDatabase(databaseOptions);
           }}
-          isInvalid={selectedDatabase.length === 0}
           isClearable={false}
+          isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
         />
       </EuiFormRow>
       <EuiFormRow
         label="Table"
         helpText="Select the Spark table that has the data you would like to index."
+        isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
+        error={accelerationFormData.formErrors.dataTableError}
       >
         <EuiComboBox
           placeholder="Select a table"
@@ -156,14 +170,16 @@ export const AccelerationDataSourceSelector = ({
           options={tables}
           selectedOptions={selectedTable}
           onChange={(tableOptions) => {
-            setAccelerationFormData({
-              ...accelerationFormData,
-              dataTable: tableOptions[0].label,
-            });
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.dataTable = tableOptions[0].label;
+                accData.formErrors.dataTableError = validateDataSource(tableOptions[0].label);
+              })
+            );
             setSelectedTable(tableOptions);
           }}
-          isInvalid={selectedTable.length === 0}
           isClearable={false}
+          isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
         />
       </EuiFormRow>
     </>
diff --git a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
new file mode 100644
index 00000000..8659a435
--- /dev/null
+++ b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
@@ -0,0 +1,1126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Visual builder components renders visual builder with covering index options 1`] = `
+Array [
+  <div
+    className="euiSpacer euiSpacer--l"
+  />,
+  Array [
+    <div
+      className="euiText euiText--medium"
+      data-test-subj="covering-index-builder"
+    >
+      <h3>
+        Covering index definition
+      </h3>
+    </div>,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <span
+          className="euiExpression euiExpression-isUppercase euiExpression--success"
+        >
+          <span
+            className="euiExpression__description"
+          >
+            CREATE INDEX
+          </span>
+           
+          <span
+            className="euiExpression__value"
+          >
+            cv-idx
+          </span>
+        </span>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <span
+          className="euiExpression euiExpression-isUppercase euiExpression--success"
+        >
+          <span
+            className="euiExpression__description"
+          >
+            [IF NOT EXISTS]
+          </span>
+           
+        </span>
+      </div>
+      <div
+        className="euiFlexItem"
+      >
+        <span
+          className="euiExpression euiExpression-isUppercase euiExpression--accent"
+        >
+          <span
+            className="euiExpression__description"
+          >
+            ON
+          </span>
+           
+          <span
+            className="euiExpression__value"
+          >
+            ..
+          </span>
+        </span>
+        <div
+          className="euiPopover euiPopover--anchorDownLeft"
+          id="coveringIndexFieldsPopOver"
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <button
+              className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+              onClick={[Function]}
+            >
+              <span
+                className="euiExpression__description"
+              />
+               
+              <span
+                className="euiExpression__value"
+              >
+                (add fields here)
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+  ],
+]
+`;
+
+exports[`Visual builder components renders visual builder with default options 1`] = `
+Array [
+  <div
+    className="euiSpacer euiSpacer--l"
+  />,
+  Array [
+    <div
+      className="euiText euiText--medium"
+      data-test-subj="skipping-index-builder"
+    >
+      <h3>
+        Skipping index definition
+      </h3>
+    </div>,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <div
+      className="euiBasicTable"
+      itemID="id"
+    >
+      <div>
+        <div
+          className="euiTableHeaderMobile"
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+          </div>
+        </div>
+        <table
+          className="euiTable euiTable--responsive"
+          id="some_html_id"
+          tabIndex={-1}
+        >
+          <caption
+            className="euiScreenReaderOnly euiTableCaption"
+          />
+          <thead>
+            <tr>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_fieldName_0"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Field name"
+                  >
+                    Field name
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_dataType_1"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Datatype"
+                  >
+                    Datatype
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_Acceleration method_2"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Acceleration method"
+                  >
+                    Acceleration method
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_Delete_3"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Delete"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              className="euiTableRow"
+            >
+              <td
+                className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                colSpan={4}
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    No items found
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>,
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--fill"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "minWidth": undefined,
+            }
+          }
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <span
+              className="euiButton__text"
+            >
+              Add fields
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          className="euiButton euiButton--danger"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "minWidth": undefined,
+            }
+          }
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <span
+              className="euiButton__text"
+            >
+              Bulk delete
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>,
+  ],
+]
+`;
+
+exports[`Visual builder components renders visual builder with materialized view options 1`] = `
+Array [
+  <div
+    className="euiSpacer euiSpacer--l"
+  />,
+  Array [
+    <div
+      className="euiText euiText--medium"
+      data-test-subj="covering-index-builder"
+    >
+      <h3>
+        Materialized view definition
+      </h3>
+    </div>,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <span
+      className="euiExpression euiExpression-isUppercase euiExpression--success"
+    >
+      <span
+        className="euiExpression__description"
+      >
+        CREATE MATERIALIZED VIEW
+      </span>
+       
+      <span
+        className="euiExpression__value"
+      >
+        ..skipping
+      </span>
+    </span>,
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--success"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          [IF NOT EXISTS]
+        </span>
+         
+      </span>
+    </div>,
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <span
+          className="euiExpression euiExpression-isUppercase euiExpression--accent"
+        >
+          <span
+            className="euiExpression__description"
+          >
+            AS SELECT
+          </span>
+           
+        </span>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          className="euiPopover euiPopover--anchorDownCenter"
+        >
+          <div
+            className="euiPopover__anchor"
+          >
+            <button
+              aria-label="add column"
+              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+              disabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <span
+                className="euiButtonContent euiButtonEmpty__content"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <span
+                  className="euiButtonEmpty__text"
+                >
+                  Add Column
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+    />,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <span
+      className="euiExpression euiExpression-isUppercase euiExpression--success"
+    >
+      <span
+        className="euiExpression__description"
+      >
+        FROM
+      </span>
+       
+      <span
+        className="euiExpression__value"
+      >
+        ..
+      </span>
+    </span>,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="groupByTumblePopOver"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            >
+              GROUP BY
+            </span>
+             
+            <span
+              className="euiExpression__value"
+            >
+              TUMBLE(, '1 millisecond')
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>,
+  ],
+]
+`;
+
+exports[`Visual builder components renders visual builder with skipping index options 1`] = `
+Array [
+  <div
+    className="euiSpacer euiSpacer--l"
+  />,
+  Array [
+    <div
+      className="euiText euiText--medium"
+      data-test-subj="skipping-index-builder"
+    >
+      <h3>
+        Skipping index definition
+      </h3>
+    </div>,
+    <div
+      className="euiSpacer euiSpacer--s"
+    />,
+    <div
+      className="euiBasicTable"
+      itemID="id"
+    >
+      <div>
+        <div
+          className="euiTableHeaderMobile"
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            />
+          </div>
+        </div>
+        <table
+          className="euiTable euiTable--responsive"
+          id="some_html_id"
+          tabIndex={-1}
+        >
+          <caption
+            className="euiScreenReaderOnly euiTableCaption"
+          />
+          <thead>
+            <tr>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_fieldName_0"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Field name"
+                  >
+                    Field name
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_dataType_1"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Datatype"
+                  >
+                    Datatype
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_Acceleration method_2"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Acceleration method"
+                  >
+                    Acceleration method
+                  </span>
+                </span>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_Delete_3"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                    title="Delete"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              className="euiTableRow euiTableRow-hasActions"
+            >
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Field name
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--truncateText"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    field1
+                  </span>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Datatype
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--truncateText"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    string
+                  </span>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Acceleration method
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <div
+                    className="euiFormControlLayout"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <select
+                        aria-label="Use aria labels when no actual label is in use"
+                        className="euiSelect"
+                        id="selectDocExample"
+                        onChange={[Function]}
+                        onMouseUp={[Function]}
+                        value="PARTITION"
+                      >
+                        <option
+                          key="0"
+                          value="PARTITION"
+                        >
+                          Partition
+                        </option>
+                        <option
+                          key="1"
+                          value="VALUE_SET"
+                        >
+                          Value Set
+                        </option>
+                        <option
+                          key="2"
+                          value="MIN_MAX"
+                        >
+                          Min Max
+                        </option>
+                      </select>
+                      <div
+                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Delete
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <button
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="euiTableRow euiTableRow-hasActions"
+            >
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Field name
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--truncateText"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    field2
+                  </span>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Datatype
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--truncateText"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    number
+                  </span>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Acceleration method
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <div
+                    className="euiFormControlLayout"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <select
+                        aria-label="Use aria labels when no actual label is in use"
+                        className="euiSelect"
+                        id="selectDocExample"
+                        onChange={[Function]}
+                        onMouseUp={[Function]}
+                        value="VALUE_SET"
+                      >
+                        <option
+                          key="0"
+                          value="PARTITION"
+                        >
+                          Partition
+                        </option>
+                        <option
+                          key="1"
+                          value="VALUE_SET"
+                        >
+                          Value Set
+                        </option>
+                        <option
+                          key="2"
+                          value="MIN_MAX"
+                        >
+                          Min Max
+                        </option>
+                      </select>
+                      <div
+                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Delete
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <button
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="euiPopover euiPopover--anchorUpRight"
+            >
+              <div
+                className="euiPopover__anchor"
+              >
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                  data-test-subj="tablePaginationPopoverButton"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Rows per page
+                      : 
+                      20
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <nav
+              className="euiPagination"
+            >
+              <button
+                aria-label="Previous page"
+                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                data-test-subj="pagination-button-previous"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+              <ul
+                className="euiPagination__list"
+              >
+                <li
+                  className="euiPagination__item"
+                >
+                  <button
+                    aria-controls="some_html_id"
+                    aria-current={true}
+                    aria-label="Page 1 of 1"
+                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    data-test-subj="pagination-button-0"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiButtonContent euiButtonEmpty__content"
+                    >
+                      <span
+                        className="euiButtonEmpty__text"
+                      >
+                        1
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              </ul>
+              <button
+                aria-label="Next page"
+                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                data-test-subj="pagination-button-next"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+    >
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--fill"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "minWidth": undefined,
+            }
+          }
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <span
+              className="euiButton__text"
+            >
+              Add fields
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          className="euiButton euiButton--danger"
+          disabled={false}
+          onClick={[Function]}
+          style={
+            Object {
+              "minWidth": undefined,
+            }
+          }
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <span
+              className="euiButton__text"
+            >
+              Bulk delete
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>,
+  ],
+]
+`;
diff --git a/public/components/acceleration/visual_editors/__tests__/query_builder.test.tsx b/public/components/acceleration/visual_editors/__tests__/query_builder.test.tsx
new file mode 100644
index 00000000..2aca0b68
--- /dev/null
+++ b/public/components/acceleration/visual_editors/__tests__/query_builder.test.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  coveringIndexBuilderMock1,
+  coveringIndexBuilderMock2,
+  coveringIndexBuilderMockResult1,
+  coveringIndexBuilderMockResult2,
+  indexOptionsMock1,
+  indexOptionsMock2,
+  indexOptionsMock3,
+  indexOptionsMockResult1,
+  indexOptionsMockResult2,
+  indexOptionsMockResult3,
+  materializedViewBuilderMock1,
+  materializedViewBuilderMock2,
+  materializedViewBuilderMockResult1,
+  materializedViewBuilderMockResult2,
+  skippingIndexBuilderMock1,
+  skippingIndexBuilderMock2,
+  skippingIndexBuilderMockResult1,
+  skippingIndexBuilderMockResult2,
+} from '../../../../../test/mocks/accelerationMock';
+import {
+  buildIndexOptions,
+  coveringIndexQueryBuilder,
+  materializedQueryViewBuilder,
+  skippingIndexQueryBuilder,
+} from '../query_builder';
+
+describe('buildIndexOptions', () => {
+  it('should build index options with auto refresh', () => {
+    const indexOptions = buildIndexOptions(indexOptionsMock1);
+    expect(indexOptions).toEqual(indexOptionsMockResult1);
+  });
+
+  it('should build index options with interval refresh', () => {
+    const indexOptions = buildIndexOptions(indexOptionsMock2);
+    expect(indexOptions).toEqual(indexOptionsMockResult2);
+  });
+
+  it('should build index options with checkpoint location', () => {
+    const indexOptions = buildIndexOptions(indexOptionsMock3);
+    expect(indexOptions).toEqual(indexOptionsMockResult3);
+  });
+
+  describe('skippingIndexQueryBuilder', () => {
+    it('should build skipping index query as expected with interval refresh', () => {
+      const result = skippingIndexQueryBuilder(skippingIndexBuilderMock1);
+      expect(result).toEqual(skippingIndexBuilderMockResult1);
+    });
+
+    it('should build skipping index query as expected with auto refresh', () => {
+      const result = skippingIndexQueryBuilder(skippingIndexBuilderMock2);
+      expect(result).toEqual(skippingIndexBuilderMockResult2);
+    });
+  });
+
+  describe('coveringIndexQueryBuilder', () => {
+    it('should build covering index query as expected with interval refresh', () => {
+      const result = coveringIndexQueryBuilder(coveringIndexBuilderMock1);
+      expect(result).toEqual(coveringIndexBuilderMockResult1);
+    });
+
+    it('should build covering index query as expected with auto refresh', () => {
+      const result = coveringIndexQueryBuilder(coveringIndexBuilderMock2);
+      expect(result).toEqual(coveringIndexBuilderMockResult2);
+    });
+  });
+
+  describe('materializedQueryViewBuilder', () => {
+    it('should build materialized view query as expected with interval refresh', () => {
+      const result = materializedQueryViewBuilder(materializedViewBuilderMock1);
+      expect(result).toEqual(materializedViewBuilderMockResult1);
+    });
+
+    it('should build materialized view query as expected with auto refresh', () => {
+      const result = materializedQueryViewBuilder(materializedViewBuilderMock2);
+      expect(result).toEqual(materializedViewBuilderMockResult2);
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/__tests__/query_visual_editor.test.tsx b/public/components/acceleration/visual_editors/__tests__/query_visual_editor.test.tsx
new file mode 100644
index 00000000..38513b86
--- /dev/null
+++ b/public/components/acceleration/visual_editors/__tests__/query_visual_editor.test.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../common/types';
+import {
+  coveringIndexDataMock,
+  createAccelerationEmptyDataMock,
+  materializedViewValidDataMock,
+  skippingIndexDataMock,
+} from '../../../../../test/mocks/accelerationMock';
+import { QueryVisualEditor } from '../query_visual_editor';
+
+describe('Visual builder components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders visual builder with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <QueryVisualEditor
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders visual builder with skipping index options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexName: 'skipping',
+      accelerationIndexType: 'skipping',
+      skippingIndexQueryData: skippingIndexDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <QueryVisualEditor
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders visual builder with covering index options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexName: 'cv-idx',
+      accelerationIndexType: 'covering',
+      coveringIndexQueryData: coveringIndexDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <QueryVisualEditor
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders visual builder with materialized view options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <QueryVisualEditor
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
new file mode 100644
index 00000000..3d237119
--- /dev/null
+++ b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Covering index builder components renders covering index builder  with different options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="covering-index-builder"
+  >
+    <h3>
+      Covering index definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--success"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          CREATE INDEX
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          skipping
+        </span>
+      </span>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--success"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          [IF NOT EXISTS]
+        </span>
+         
+      </span>
+    </div>
+    <div
+      className="euiFlexItem"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--accent"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          ON
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          ..
+        </span>
+      </span>
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="coveringIndexFieldsPopOver"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            />
+             
+            <span
+              className="euiExpression__value"
+            >
+              (add fields here)
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Covering index builder components renders covering index builder with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="covering-index-builder"
+  >
+    <h3>
+      Covering index definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--success"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          CREATE INDEX
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          skipping
+        </span>
+      </span>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--success"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          [IF NOT EXISTS]
+        </span>
+         
+      </span>
+    </div>
+    <div
+      className="euiFlexItem"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--accent"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          ON
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          ..
+        </span>
+      </span>
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="coveringIndexFieldsPopOver"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            />
+             
+            <span
+              className="euiExpression__value"
+            >
+              (add fields here)
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/public/components/acceleration/visual_editors/covering_index/__tests__/covering_index_builder.test.tsx b/public/components/acceleration/visual_editors/covering_index/__tests__/covering_index_builder.test.tsx
new file mode 100644
index 00000000..18a73bae
--- /dev/null
+++ b/public/components/acceleration/visual_editors/covering_index/__tests__/covering_index_builder.test.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import { createAccelerationEmptyDataMock } from '../../../../../../test/mocks/accelerationMock';
+import { CoveringIndexBuilder } from '../covering_index_builder';
+
+describe('Covering index builder components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders covering index builder with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <CoveringIndexBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders covering index builder  with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      coveringIndexQueryData: ['field1', 'field2', 'field3'],
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <CoveringIndexBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
index 0335f498..5968ca01 100644
--- a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -17,6 +17,7 @@ import {
 import React, { useState } from 'react';
 import { ACCELERATION_ADD_FIELDS_TEXT } from '../../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../../common/types';
+import { hasError } from '../../create/utils';
 
 interface CoveringIndexBuilderProps {
   accelerationFormData: CreateAccelerationForm;
@@ -74,7 +75,10 @@ export const CoveringIndexBuilder = ({
                 value={columnsValue}
                 isActive={isPopOverOpen}
                 onClick={() => setIsPopOverOpen(true)}
-                isInvalid={columnsValue === ACCELERATION_ADD_FIELDS_TEXT}
+                isInvalid={
+                  hasError(accelerationFormData.formErrors, 'coveringIndexError') &&
+                  columnsValue === ACCELERATION_ADD_FIELDS_TEXT
+                }
               />
             }
             isOpen={isPopOverOpen}
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/add_column_popover.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/add_column_popover.test.tsx.snap
new file mode 100644
index 00000000..ffb0224d
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/add_column_popover.test.tsx.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Column popover components in materialized view renders column popover components in materialized view with default options 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownCenter"
+>
+  <div
+    className="euiPopover__anchor"
+  >
+    <button
+      aria-label="add column"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="euiButtonContent euiButtonEmpty__content"
+      >
+        <svg
+          aria-hidden={true}
+          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <span
+          className="euiButtonEmpty__text"
+        >
+          Add Column
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Column popover components in materialized view renders column popover components in materialized view with different options 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownCenter"
+>
+  <div
+    className="euiPopover__anchor"
+  >
+    <button
+      aria-label="add column"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="euiButtonContent euiButtonEmpty__content"
+      >
+        <svg
+          aria-hidden={true}
+          className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+            fillRule="evenodd"
+          />
+        </svg>
+        <span
+          className="euiButtonEmpty__text"
+        >
+          Add Column
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
new file mode 100644
index 00000000..61725510
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Column expression components in materialized view renders column expression components in materialized view with default options 1`] = `
+<div
+  className="euiFlexItem euiFlexItem--flexGrowZero"
+>
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="columnFunctionExpression-1"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            />
+             
+            <span
+              className="euiExpression__value"
+            >
+              count(field1)
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="columnFunctionExpressionAlias-1"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--accent"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            >
+              AS
+            </span>
+             
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        aria-label="delete-column-expression"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden={true}
+          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Column expression components in materialized view renders column expression components in materialized view with different options 1`] = `
+<div
+  className="euiFlexItem euiFlexItem--flexGrowZero"
+>
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="columnFunctionExpression-2"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            />
+             
+            <span
+              className="euiExpression__value"
+            >
+              sum(field2)
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownLeft"
+        id="columnFunctionExpressionAlias-2"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--accent"
+            onClick={[Function]}
+          >
+            <span
+              className="euiExpression__description"
+            >
+              AS
+            </span>
+             
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        aria-label="delete-column-expression"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          aria-hidden={true}
+          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+          focusable="false"
+          height={16}
+          role="img"
+          style={null}
+          viewBox="0 0 16 16"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 3h5v1H0V3h5V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2Zm-7.056 8H7v1H4.1l.392 2.519c.042.269.254.458.493.458h6.03c.239 0 .451-.189.493-.458l1.498-9.576H14l-1.504 9.73c-.116.747-.74 1.304-1.481 1.304h-6.03c-.741 0-1.365-.557-1.481-1.304l-1.511-9.73H9V5.95H3.157L3.476 8H8v1H3.632l.312 2ZM6 3h4V1H6v2Z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/group_by_tumble_expression.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/group_by_tumble_expression.test.tsx.snap
new file mode 100644
index 00000000..235e817d
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/group_by_tumble_expression.test.tsx.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Group by components in materialized view renders group by components in materialized view with default options 1`] = `
+<div
+  className="euiFlexItem euiFlexItem--flexGrowZero"
+>
+  <div
+    className="euiPopover euiPopover--anchorDownLeft"
+    id="groupByTumblePopOver"
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <button
+        className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+        onClick={[Function]}
+      >
+        <span
+          className="euiExpression__description"
+        >
+          GROUP BY
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          TUMBLE(, '1 millisecond')
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Group by components in materialized view renders group by components in materialized view with different options 1`] = `
+<div
+  className="euiFlexItem euiFlexItem--flexGrowZero"
+>
+  <div
+    className="euiPopover euiPopover--anchorDownLeft"
+    id="groupByTumblePopOver"
+  >
+    <div
+      className="euiPopover__anchor"
+    >
+      <button
+        className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+        onClick={[Function]}
+      >
+        <span
+          className="euiExpression__description"
+        >
+          GROUP BY
+        </span>
+         
+        <span
+          className="euiExpression__value"
+        >
+          TUMBLE(, '1 millisecond')
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
new file mode 100644
index 00000000..75955730
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
@@ -0,0 +1,318 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Builder components in materialized view renders builder components in materialized view with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="covering-index-builder"
+  >
+    <h3>
+      Materialized view definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <span
+    className="euiExpression euiExpression-isUppercase euiExpression--success"
+  >
+    <span
+      className="euiExpression__description"
+    >
+      CREATE MATERIALIZED VIEW
+    </span>
+     
+    <span
+      className="euiExpression__value"
+    >
+      ..skipping
+    </span>
+  </span>,
+  <div
+    className="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      className="euiExpression euiExpression-isUppercase euiExpression--success"
+    >
+      <span
+        className="euiExpression__description"
+      >
+        [IF NOT EXISTS]
+      </span>
+       
+    </span>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--accent"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          AS SELECT
+        </span>
+         
+      </span>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            aria-label="add column"
+            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiButtonContent euiButtonEmpty__content"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                className="euiButtonEmpty__text"
+              >
+                Add Column
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+  />,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <span
+    className="euiExpression euiExpression-isUppercase euiExpression--success"
+  >
+    <span
+      className="euiExpression__description"
+    >
+      FROM
+    </span>
+     
+    <span
+      className="euiExpression__value"
+    >
+      ..
+    </span>
+  </span>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <div
+      className="euiPopover euiPopover--anchorDownLeft"
+      id="groupByTumblePopOver"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <button
+          className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+          onClick={[Function]}
+        >
+          <span
+            className="euiExpression__description"
+          >
+            GROUP BY
+          </span>
+           
+          <span
+            className="euiExpression__value"
+          >
+            TUMBLE(, '1 millisecond')
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Builder components in materialized view renders builder components in materialized view with different options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="covering-index-builder"
+  >
+    <h3>
+      Materialized view definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <span
+    className="euiExpression euiExpression-isUppercase euiExpression--success"
+  >
+    <span
+      className="euiExpression__description"
+    >
+      CREATE MATERIALIZED VIEW
+    </span>
+     
+    <span
+      className="euiExpression__value"
+    >
+      ..skipping
+    </span>
+  </span>,
+  <div
+    className="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <span
+      className="euiExpression euiExpression-isUppercase euiExpression--success"
+    >
+      <span
+        className="euiExpression__description"
+      >
+        [IF NOT EXISTS]
+      </span>
+       
+    </span>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiExpression euiExpression-isUppercase euiExpression--accent"
+      >
+        <span
+          className="euiExpression__description"
+        >
+          AS SELECT
+        </span>
+         
+      </span>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        className="euiPopover euiPopover--anchorDownCenter"
+      >
+        <div
+          className="euiPopover__anchor"
+        >
+          <button
+            aria-label="add column"
+            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiButtonContent euiButtonEmpty__content"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                  fillRule="evenodd"
+                />
+              </svg>
+              <span
+                className="euiButtonEmpty__text"
+              >
+                Add Column
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+  />,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <span
+    className="euiExpression euiExpression-isUppercase euiExpression--success"
+  >
+    <span
+      className="euiExpression__description"
+    >
+      FROM
+    </span>
+     
+    <span
+      className="euiExpression__value"
+    >
+      ..
+    </span>
+  </span>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <div
+      className="euiPopover euiPopover--anchorDownLeft"
+      id="groupByTumblePopOver"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <button
+          className="euiExpression euiExpression-isClickable euiExpression-isUppercase euiExpression--success"
+          onClick={[Function]}
+        >
+          <span
+            className="euiExpression__description"
+          >
+            GROUP BY
+          </span>
+           
+          <span
+            className="euiExpression__value"
+          >
+            TUMBLE(, '1 millisecond')
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/add_column_popover.test.tsx b/public/components/acceleration/visual_editors/materialized_view/__tests__/add_column_popover.test.tsx
new file mode 100644
index 00000000..56c40581
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/add_column_popover.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  materializedViewValidDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { AddColumnPopOver } from '../add_column_popover';
+
+describe('Column popover components in materialized view', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders column popover components in materialized view with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const setIsColumnPopOverOpen = jest.fn();
+    const setColumnExpressionValues = jest.fn();
+    const wrapper = mount(
+      <AddColumnPopOver
+        isColumnPopOverOpen={false}
+        setIsColumnPopOverOpen={setIsColumnPopOverOpen}
+        columnExpressionValues={[]}
+        setColumnExpressionValues={setColumnExpressionValues}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders column popover components in materialized view with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const setIsColumnPopOverOpen = jest.fn();
+    const setColumnExpressionValues = jest.fn();
+    const wrapper = mount(
+      <AddColumnPopOver
+        isColumnPopOverOpen={false}
+        setIsColumnPopOverOpen={setIsColumnPopOverOpen}
+        columnExpressionValues={materializedViewValidDataMock.columnsValues}
+        setColumnExpressionValues={setColumnExpressionValues}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/column_expression.test.tsx b/public/components/acceleration/visual_editors/materialized_view/__tests__/column_expression.test.tsx
new file mode 100644
index 00000000..4ce888f5
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/column_expression.test.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  materializedViewValidDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { ColumnExpression } from '../column_expression';
+
+describe('Column expression components in materialized view', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders column expression components in materialized view with default options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const setColumnExpressionValues = jest.fn();
+    const wrapper = mount(
+      <ColumnExpression
+        index={0}
+        currentColumnExpressionValue={materializedViewValidDataMock.columnsValues[0]}
+        columnExpressionValues={materializedViewValidDataMock.columnsValues}
+        setColumnExpressionValues={setColumnExpressionValues}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders column expression components in materialized view with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const setColumnExpressionValues = jest.fn();
+    const wrapper = mount(
+      <ColumnExpression
+        index={1}
+        currentColumnExpressionValue={materializedViewValidDataMock.columnsValues[1]}
+        columnExpressionValues={materializedViewValidDataMock.columnsValues}
+        setColumnExpressionValues={setColumnExpressionValues}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/group_by_tumble_expression.test.tsx b/public/components/acceleration/visual_editors/materialized_view/__tests__/group_by_tumble_expression.test.tsx
new file mode 100644
index 00000000..1a94eb3f
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/group_by_tumble_expression.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  materializedViewValidDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { GroupByTumbleExpression } from '../group_by_tumble_expression';
+
+describe('Group by components in materialized view', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders group by components in materialized view with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <GroupByTumbleExpression
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders group by components in materialized view with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <GroupByTumbleExpression
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/materialized_view_builder.test.tsx b/public/components/acceleration/visual_editors/materialized_view/__tests__/materialized_view_builder.test.tsx
new file mode 100644
index 00000000..2075c6b0
--- /dev/null
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/materialized_view_builder.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  materializedViewValidDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { MaterializedViewBuilder } from '../materialized_view_builder';
+
+describe('Builder components in materialized view', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders builder components in materialized view with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <MaterializedViewBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders builder components in materialized view with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'materialized',
+      materializedViewQueryData: materializedViewValidDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <MaterializedViewBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
index f61bdf99..df6b276f 100644
--- a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
@@ -17,6 +17,8 @@ import {
   EuiSpacer,
   htmlIdGenerator,
 } from '@elastic/eui';
+import { EuiComboBoxOptionOption } from '@opensearch-project/oui';
+import producer from 'immer';
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
 import {
@@ -24,6 +26,7 @@ import {
   CreateAccelerationForm,
   MaterializedViewColumn,
 } from '../../../../../common/types';
+import { validateMaterializedViewData } from '../../create/utils';
 
 interface AddColumnPopOverProps {
   isColumnPopOverOpen: boolean;
@@ -31,6 +34,7 @@ interface AddColumnPopOverProps {
   columnExpressionValues: MaterializedViewColumn[];
   setColumnExpressionValues: React.Dispatch<React.SetStateAction<MaterializedViewColumn[]>>;
   accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
 }
 
 export const AddColumnPopOver = ({
@@ -39,11 +43,12 @@ export const AddColumnPopOver = ({
   columnExpressionValues,
   setColumnExpressionValues,
   accelerationFormData,
+  setAccelerationFormData,
 }: AddColumnPopOverProps) => {
   const [selectedFunction, setSelectedFunction] = useState([
     ACCELERATION_AGGREGRATION_FUNCTIONS[0],
   ]);
-  const [selectedField, setSelectedField] = useState([]);
+  const [selectedField, setSelectedField] = useState<EuiComboBoxOptionOption[]>([]);
   const [selectedAlias, setSeletedAlias] = useState('');
 
   const resetSelectedField = () => {
@@ -63,6 +68,31 @@ export const AddColumnPopOver = ({
     setSeletedAlias(e.target.value);
   };
 
+  const onAddExpression = () => {
+    const newColumnExpresionValue = [
+      ...columnExpressionValues,
+      {
+        id: htmlIdGenerator()(),
+        functionName: selectedFunction[0].label as AggregationFunctionType,
+        functionParam: selectedField[0].label,
+        fieldAlias: selectedAlias,
+      },
+    ];
+
+    setAccelerationFormData(
+      producer((accData) => {
+        accData.materializedViewQueryData.columnsValues = newColumnExpresionValue;
+        accData.formErrors.materializedViewError = validateMaterializedViewData(
+          accData.accelerationIndexType,
+          accData.materializedViewQueryData
+        );
+      })
+    );
+
+    setColumnExpressionValues(newColumnExpresionValue);
+    setIsColumnPopOverOpen(false);
+  };
+
   useEffect(() => {
     resetSelectedField();
   }, []);
@@ -96,6 +126,7 @@ export const AddColumnPopOver = ({
                 options={ACCELERATION_AGGREGRATION_FUNCTIONS}
                 selectedOptions={selectedFunction}
                 onChange={setSelectedFunction}
+                isClearable={false}
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -109,6 +140,7 @@ export const AddColumnPopOver = ({
                 ]}
                 selectedOptions={selectedField}
                 onChange={setSelectedField}
+                isClearable={false}
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -119,22 +151,7 @@ export const AddColumnPopOver = ({
         </EuiFormRow>
       </>
       <EuiPopoverFooter>
-        <EuiButton
-          size="s"
-          fill
-          onClick={() => {
-            setColumnExpressionValues([
-              ...columnExpressionValues,
-              {
-                id: htmlIdGenerator()(),
-                functionName: selectedFunction[0].label as AggregationFunctionType,
-                functionParam: selectedField[0].label,
-                fieldAlias: selectedAlias,
-              },
-            ]);
-            setIsColumnPopOverOpen(false);
-          }}
-        >
+        <EuiButton size="s" fill onClick={onAddExpression}>
           Add
         </EuiButton>
       </EuiPopoverFooter>
diff --git a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
index 0da3d65b..5f9a0909 100644
--- a/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/column_expression.tsx
@@ -13,6 +13,7 @@ import {
   EuiFormRow,
   EuiPopover,
 } from '@elastic/eui';
+import producer from 'immer';
 import _ from 'lodash';
 import React, { useState } from 'react';
 import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
@@ -21,6 +22,7 @@ import {
   CreateAccelerationForm,
   MaterializedViewColumn,
 } from '../../../../../common/types';
+import { validateMaterializedViewData } from '../../create/utils';
 
 interface ColumnExpressionProps {
   index: number;
@@ -28,6 +30,7 @@ interface ColumnExpressionProps {
   columnExpressionValues: MaterializedViewColumn[];
   setColumnExpressionValues: React.Dispatch<React.SetStateAction<MaterializedViewColumn[]>>;
   accelerationFormData: CreateAccelerationForm;
+  setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
 }
 
 export const ColumnExpression = ({
@@ -36,6 +39,7 @@ export const ColumnExpression = ({
   columnExpressionValues,
   setColumnExpressionValues,
   accelerationFormData,
+  setAccelerationFormData,
 }: ColumnExpressionProps) => {
   const [isFunctionPopOverOpen, setIsFunctionPopOverOpen] = useState(false);
   const [isAliasPopOverOpen, setIsAliasPopOverOpen] = useState(false);
@@ -46,6 +50,22 @@ export const ColumnExpression = ({
     setColumnExpressionValues(updatedArray);
   };
 
+  const onDeleteColumnExpression = () => {
+    const newColumnExpresionValue = [
+      ..._.filter(columnExpressionValues, (o) => o.id !== currentColumnExpressionValue.id),
+    ];
+    setAccelerationFormData(
+      producer((accData) => {
+        accData.materializedViewQueryData.columnsValues = newColumnExpresionValue;
+        accData.formErrors.materializedViewError = validateMaterializedViewData(
+          accData.accelerationIndexType,
+          accData.materializedViewQueryData
+        );
+      })
+    );
+    setColumnExpressionValues(newColumnExpresionValue);
+  };
+
   return (
     <EuiFlexItem grow={false}>
       <EuiFlexGroup>
@@ -89,6 +109,7 @@ export const ColumnExpression = ({
                           index
                         )
                       }
+                      isClearable={false}
                     />
                   </EuiFormRow>
                 </EuiFlexItem>
@@ -116,6 +137,7 @@ export const ColumnExpression = ({
                           index
                         )
                       }
+                      isClearable={false}
                     />
                   </EuiFormRow>
                 </EuiFlexItem>
@@ -162,14 +184,7 @@ export const ColumnExpression = ({
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
             color="danger"
-            onClick={() => {
-              setColumnExpressionValues([
-                ..._.filter(
-                  columnExpressionValues,
-                  (o) => o.id !== currentColumnExpressionValue.id
-                ),
-              ]);
-            }}
+            onClick={onDeleteColumnExpression}
             iconType="trash"
             aria-label="delete-column-expression"
           />
diff --git a/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
index dc853414..ba56488f 100644
--- a/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/group_by_tumble_expression.tsx
@@ -14,10 +14,11 @@ import {
   EuiPopover,
   EuiSelect,
 } from '@elastic/eui';
-import React, { useEffect, useState } from 'react';
+import producer from 'immer';
+import React, { useState } from 'react';
 import { ACCELERATION_TIME_INTERVAL } from '../../../../../common/constants';
 import { CreateAccelerationForm, GroupByTumbleType } from '../../../../../common/types';
-import { pluralizeTime } from '../../create/utils';
+import { hasError, pluralizeTime, validateMaterializedViewData } from '../../create/utils';
 
 interface GroupByTumbleExpressionProps {
   accelerationFormData: CreateAccelerationForm;
@@ -35,29 +36,36 @@ export const GroupByTumbleExpression = ({
     tumbleInterval: ACCELERATION_TIME_INTERVAL[0].value,
   });
 
+  const updateGroupByStates = (newGroupByValue: GroupByTumbleType) => {
+    setGroupByValues(newGroupByValue);
+    setAccelerationFormData(
+      producer((accData) => {
+        accData.materializedViewQueryData.groupByTumbleValue = newGroupByValue;
+        accData.formErrors.materializedViewError = validateMaterializedViewData(
+          accData.accelerationIndexType,
+          accData.materializedViewQueryData
+        );
+      })
+    );
+  };
+
   const onChangeTumbleWindow = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroupByValues({ ...groupbyValues, tumbleWindow: +e.target.value });
+    const newGroupByValue = { ...groupbyValues, tumbleWindow: parseInt(e.target.value, 10) };
+    updateGroupByStates(newGroupByValue);
   };
 
   const onChangeTumbleInterval = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setGroupByValues({ ...groupbyValues, tumbleInterval: e.target.value });
+    const newGroupByValue = { ...groupbyValues, tumbleInterval: e.target.value };
+    updateGroupByStates(newGroupByValue);
   };
 
   const onChangeTimeField = (selectedOptions: EuiComboBoxOptionOption[]) => {
-    if (selectedOptions.length > 0)
-      setGroupByValues({ ...groupbyValues, timeField: selectedOptions[0].label });
+    if (selectedOptions.length > 0) {
+      const newGroupByValue = { ...groupbyValues, timeField: selectedOptions[0].label };
+      updateGroupByStates(newGroupByValue);
+    }
   };
 
-  useEffect(() => {
-    setAccelerationFormData({
-      ...accelerationFormData,
-      materializedViewQueryData: {
-        ...accelerationFormData.materializedViewQueryData,
-        groupByTumbleValue: groupbyValues,
-      },
-    });
-  }, [groupbyValues]);
-
   return (
     <EuiFlexItem grow={false}>
       <EuiPopover
@@ -70,7 +78,10 @@ export const GroupByTumbleExpression = ({
             }${pluralizeTime(groupbyValues.tumbleWindow)}')`}
             isActive={IsGroupPopOverOpen}
             onClick={() => setIsGroupPopOverOpen(true)}
-            isInvalid={groupbyValues.timeField === ''}
+            isInvalid={
+              hasError(accelerationFormData.formErrors, 'materializedViewError') &&
+              groupbyValues.timeField === ''
+            }
           />
         }
         isOpen={IsGroupPopOverOpen}
@@ -89,6 +100,7 @@ export const GroupByTumbleExpression = ({
                   .map((value) => ({ label: value.fieldName }))}
                 selectedOptions={[{ label: groupbyValues.timeField }]}
                 onChange={onChangeTimeField}
+                isClearable={false}
               />
             </EuiFormRow>
           </EuiFlexItem>
diff --git a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
index 0f3bdeea..124b451c 100644
--- a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
@@ -11,9 +11,15 @@ import {
   EuiText,
   htmlIdGenerator,
 } from '@elastic/eui';
+import producer from 'immer';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
-import { CreateAccelerationForm, MaterializedViewColumn } from '../../../../../common/types';
+import {
+  AggregationFunctionType,
+  CreateAccelerationForm,
+  MaterializedViewColumn,
+} from '../../../../../common/types';
+import { hasError, validateMaterializedViewData } from '../../create/utils';
 import { AddColumnPopOver } from './add_column_popover';
 import { ColumnExpression } from './column_expression';
 import { GroupByTumbleExpression } from './group_by_tumble_expression';
@@ -36,27 +42,27 @@ export const MaterializedViewBuilder = ({
 
   useEffect(() => {
     if (accelerationFormData.dataTableFields.length > 0) {
-      setColumnExpressionValues([
+      const newColumnExpresionValue = [
         {
           id: newColumnExpressionId,
-          functionName: 'count',
+          functionName: 'count' as AggregationFunctionType,
           functionParam: accelerationFormData.dataTableFields[0].fieldName,
           fieldAlias: 'counter1',
         },
-      ]);
+      ];
+      setAccelerationFormData(
+        producer((accData) => {
+          accData.materializedViewQueryData.columnsValues = newColumnExpresionValue;
+          accData.formErrors.materializedViewError = validateMaterializedViewData(
+            accData.accelerationIndexType,
+            accData.materializedViewQueryData
+          );
+        })
+      );
+      setColumnExpressionValues(newColumnExpresionValue);
     }
   }, [accelerationFormData.dataTableFields]);
 
-  useEffect(() => {
-    setAccelerationFormData({
-      ...accelerationFormData,
-      materializedViewQueryData: {
-        ...accelerationFormData.materializedViewQueryData,
-        columnsValues: columnExpressionValues,
-      },
-    });
-  }, [columnExpressionValues]);
-
   return (
     <>
       <EuiText data-test-subj="covering-index-builder">
@@ -74,7 +80,15 @@ export const MaterializedViewBuilder = ({
 
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
-          <EuiExpression color="accent" description="AS SELECT" value="" />
+          <EuiExpression
+            color="accent"
+            description="AS SELECT"
+            value=""
+            isInvalid={
+              hasError(accelerationFormData.formErrors, 'materializedViewError') &&
+              columnExpressionValues.length < 1
+            }
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <AddColumnPopOver
@@ -83,6 +97,7 @@ export const MaterializedViewBuilder = ({
             columnExpressionValues={columnExpressionValues}
             setColumnExpressionValues={setColumnExpressionValues}
             accelerationFormData={accelerationFormData}
+            setAccelerationFormData={setAccelerationFormData}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -95,6 +110,7 @@ export const MaterializedViewBuilder = ({
               columnExpressionValues={columnExpressionValues}
               setColumnExpressionValues={setColumnExpressionValues}
               accelerationFormData={accelerationFormData}
+              setAccelerationFormData={setAccelerationFormData}
             />
           );
         })}
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
index 5be5e6df..49d4482f 100644
--- a/public/components/acceleration/visual_editors/query_builder.tsx
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -12,7 +12,7 @@ import {
 import { pluralizeTime } from '../create/utils';
 
 /* Add index options to query */
-const buildIndexOptions = (accelerationformData: CreateAccelerationForm) => {
+export const buildIndexOptions = (accelerationformData: CreateAccelerationForm) => {
   const {
     primaryShardsCount,
     replicaShardsCount,
@@ -71,7 +71,7 @@ const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[
  * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
  * )
  */
-const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
+export const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
   const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData;
 
   const codeQuery = `CREATE SKIPPING INDEX 
@@ -107,7 +107,7 @@ const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => {
  * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
  * )
  */
-const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
+export const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
   const {
     dataSource,
     database,
@@ -130,8 +130,8 @@ const buildMaterializedViewColumns = (columnsValues: MaterializedViewColumn[]) =
   return columnsValues
     .map(
       (column) =>
-        `   ${column.functionName}(${column.functionParam}) ${
-          column.fieldAlias && `AS ${column.fieldAlias}`
+        `   ${column.functionName}(${column.functionParam})${
+          column.fieldAlias ? ` AS ${column.fieldAlias}` : ``
         }`
     )
     .join(', \n');
@@ -161,7 +161,7 @@ const buildTumbleValue = (GroupByTumbleValue: GroupByTumbleType) => {
  * index_settings = '{"number_of_shards":9,"number_of_replicas":2}'
  * )
  */
-const materializedQueryViewBuilder = (accelerationformData: CreateAccelerationForm) => {
+export const materializedQueryViewBuilder = (accelerationformData: CreateAccelerationForm) => {
   const {
     dataSource,
     database,
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
new file mode 100644
index 00000000..f2f42748
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
@@ -0,0 +1,1509 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Add fields modal in skipping index renders add fields modal in skipping index with default options 1`] = `
+<Portal
+  containerInfo={
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+              >
+                <h1>
+                  Add fields
+                </h1>
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      class="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                            placeholder="Search..."
+                            type="search"
+                            value=""
+                          />
+                          <div
+                            class="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    class="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        class="euiTableHeaderMobile"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                class="euiCheckbox__input"
+                                disabled=""
+                                id="_selection_column-checkbox_some_html_id"
+                                type="checkbox"
+                              />
+                              <div
+                                class="euiCheckbox__square"
+                              />
+                              <label
+                                class="euiCheckbox__label"
+                                for="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiTableSortMobile"
+                            >
+                              <div
+                                class="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  class="euiPopover__anchor"
+                                >
+                                  <button
+                                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--small 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="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        class="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabindex="-1"
+                      >
+                        <caption
+                          class="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              class="euiTableHeaderCellCheckbox"
+                              scope="col"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled=""
+                                    id="_selection_column-checkbox_some_html_id"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            class="euiTableRow"
+                          >
+                            <td
+                              class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colspan="3"
+                            >
+                              <div
+                                class="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--primary euiButton--fill"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Add
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  }
+>
+  Array [
+    Array [
+      <div
+        data-focus-guard={true}
+        key="guard-first"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+      "",
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="euiModal euiModal--maxWidth-default"
+          onKeyDown={[Function]}
+          tabIndex={0}
+        >
+          <button
+            aria-label="Closes this modal window"
+            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height={16}
+              role="img"
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+          <div
+            className="euiModal__flex"
+          >
+            <div
+              className="euiModalHeader"
+            >
+              <div
+                className="euiModalHeader__title"
+              >
+                <h1>
+                  Add fields
+                </h1>
+              </div>
+            </div>
+            <div
+              className="euiModalBody"
+            >
+              <div
+                className="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      className="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            className="euiFieldSearch euiFieldSearch--fullWidth"
+                            defaultValue=""
+                            onKeyUp={[Function]}
+                            placeholder="Search..."
+                            type="search"
+                          />
+                          <div
+                            className="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    className="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        className="euiTableHeaderMobile"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                checked={false}
+                                className="euiCheckbox__input"
+                                disabled={true}
+                                id="_selection_column-checkbox_some_html_id"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                className="euiCheckbox__square"
+                              />
+                              <label
+                                className="euiCheckbox__label"
+                                htmlFor="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                      <span
+                                        className="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        className="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabIndex={-1}
+                      >
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              className="euiTableHeaderCellCheckbox"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled={true}
+                                    id="_selection_column-checkbox_some_html_id"
+                                    onChange={[Function]}
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            className="euiTableRow"
+                          >
+                            <td
+                              className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colSpan={3}
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiModalFooter"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Add
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+    ],
+    "",
+  ]
+</Portal>
+`;
+
+exports[`Add fields modal in skipping index renders add fields modal in skipping index with different options 1`] = `
+<Portal
+  containerInfo={
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+              />
+            </svg>
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+              >
+                <h1>
+                  Add fields
+                </h1>
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      class="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                            placeholder="Search..."
+                            type="search"
+                            value=""
+                          />
+                          <div
+                            class="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    class="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        class="euiTableHeaderMobile"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                class="euiCheckbox__input"
+                                disabled=""
+                                id="_selection_column-checkbox_some_html_id"
+                                type="checkbox"
+                              />
+                              <div
+                                class="euiCheckbox__square"
+                              />
+                              <label
+                                class="euiCheckbox__label"
+                                for="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiTableSortMobile"
+                            >
+                              <div
+                                class="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  class="euiPopover__anchor"
+                                >
+                                  <button
+                                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--small 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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                      <span
+                                        class="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        class="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabindex="-1"
+                      >
+                        <caption
+                          class="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              class="euiTableHeaderCellCheckbox"
+                              scope="col"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled=""
+                                    id="_selection_column-checkbox_some_html_id"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            class="euiTableRow"
+                          >
+                            <td
+                              class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colspan="3"
+                            >
+                              <div
+                                class="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--primary euiButton--fill"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Add
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  }
+>
+  Array [
+    Array [
+      <div
+        data-focus-guard={true}
+        key="guard-first"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+      "",
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="euiModal euiModal--maxWidth-default"
+          onKeyDown={[Function]}
+          tabIndex={0}
+        >
+          <button
+            aria-label="Closes this modal window"
+            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+              focusable="false"
+              height={16}
+              role="img"
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+              />
+            </svg>
+          </button>
+          <div
+            className="euiModal__flex"
+          >
+            <div
+              className="euiModalHeader"
+            >
+              <div
+                className="euiModalHeader__title"
+              >
+                <h1>
+                  Add fields
+                </h1>
+              </div>
+            </div>
+            <div
+              className="euiModalBody"
+            >
+              <div
+                className="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      className="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            className="euiFieldSearch euiFieldSearch--fullWidth"
+                            defaultValue=""
+                            onKeyUp={[Function]}
+                            placeholder="Search..."
+                            type="search"
+                          />
+                          <div
+                            className="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    className="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        className="euiTableHeaderMobile"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                checked={false}
+                                className="euiCheckbox__input"
+                                disabled={true}
+                                id="_selection_column-checkbox_some_html_id"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                className="euiCheckbox__square"
+                              />
+                              <label
+                                className="euiCheckbox__label"
+                                htmlFor="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                          fillRule="non-zero"
+                                        />
+                                      </svg>
+                                      <span
+                                        className="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        className="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabIndex={-1}
+                      >
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              className="euiTableHeaderCellCheckbox"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled={true}
+                                    id="_selection_column-checkbox_some_html_id"
+                                    onChange={[Function]}
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            className="euiTableRow"
+                          >
+                            <td
+                              className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colSpan={3}
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiModalFooter"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Add
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+    ],
+    "",
+  ]
+</Portal>
+`;
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
new file mode 100644
index 00000000..52bc9157
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
@@ -0,0 +1,2194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete fields modal in skipping index renders delete fields modal in skipping index with default options 1`] = `
+<Portal
+  containerInfo={
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+              >
+                <h1>
+                  Bulk delete
+                </h1>
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      class="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                            placeholder="Search..."
+                            type="search"
+                            value=""
+                          />
+                          <div
+                            class="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    class="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        class="euiTableHeaderMobile"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                class="euiCheckbox__input"
+                                disabled=""
+                                id="_selection_column-checkbox_some_html_id"
+                                type="checkbox"
+                              />
+                              <div
+                                class="euiCheckbox__square"
+                              />
+                              <label
+                                class="euiCheckbox__label"
+                                for="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiTableSortMobile"
+                            >
+                              <div
+                                class="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  class="euiPopover__anchor"
+                                >
+                                  <button
+                                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--small 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="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        class="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabindex="-1"
+                      >
+                        <caption
+                          class="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              class="euiTableHeaderCellCheckbox"
+                              scope="col"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled=""
+                                    id="_selection_column-checkbox_some_html_id"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_accelerationMethod_2"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Acceleration method"
+                                  >
+                                    Acceleration method
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            class="euiTableRow"
+                          >
+                            <td
+                              class="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colspan="4"
+                            >
+                              <div
+                                class="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--danger euiButton--fill"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  }
+>
+  Array [
+    Array [
+      <div
+        data-focus-guard={true}
+        key="guard-first"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+      "",
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="euiModal euiModal--maxWidth-default"
+          onKeyDown={[Function]}
+          tabIndex={0}
+        >
+          <button
+            aria-label="Closes this modal window"
+            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height={16}
+              role="img"
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+          <div
+            className="euiModal__flex"
+          >
+            <div
+              className="euiModalHeader"
+            >
+              <div
+                className="euiModalHeader__title"
+              >
+                <h1>
+                  Bulk delete
+                </h1>
+              </div>
+            </div>
+            <div
+              className="euiModalBody"
+            >
+              <div
+                className="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      className="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            className="euiFieldSearch euiFieldSearch--fullWidth"
+                            defaultValue=""
+                            onKeyUp={[Function]}
+                            placeholder="Search..."
+                            type="search"
+                          />
+                          <div
+                            className="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    className="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        className="euiTableHeaderMobile"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                checked={false}
+                                className="euiCheckbox__input"
+                                disabled={true}
+                                id="_selection_column-checkbox_some_html_id"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                className="euiCheckbox__square"
+                              />
+                              <label
+                                className="euiCheckbox__label"
+                                htmlFor="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                      <span
+                                        className="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        className="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabIndex={-1}
+                      >
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              className="euiTableHeaderCellCheckbox"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled={true}
+                                    id="_selection_column-checkbox_some_html_id"
+                                    onChange={[Function]}
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_accelerationMethod_2"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Acceleration method"
+                                  >
+                                    Acceleration method
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            className="euiTableRow"
+                          >
+                            <td
+                              className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+                              colSpan={4}
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignCenter"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  No items found
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiModalFooter"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                className="euiButton euiButton--danger euiButton--fill"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+    ],
+    "",
+  ]
+</Portal>
+`;
+
+exports[`Delete fields modal in skipping index renders delete fields modal in skipping index with different options 1`] = `
+<Portal
+  containerInfo={
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+              />
+            </svg>
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+              >
+                <h1>
+                  Bulk delete
+                </h1>
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      class="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          class="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            class="euiFieldSearch euiFieldSearch--fullWidth"
+                            placeholder="Search..."
+                            type="search"
+                            value=""
+                          />
+                          <div
+                            class="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              class="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    class="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        class="euiTableHeaderMobile"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                class="euiCheckbox__input"
+                                id="_selection_column-checkbox_some_html_id"
+                                type="checkbox"
+                              />
+                              <div
+                                class="euiCheckbox__square"
+                              />
+                              <label
+                                class="euiCheckbox__label"
+                                for="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiTableSortMobile"
+                            >
+                              <div
+                                class="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  class="euiPopover__anchor"
+                                >
+                                  <button
+                                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--small 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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                      <span
+                                        class="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        class="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabindex="-1"
+                      >
+                        <caption
+                          class="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              class="euiTableHeaderCellCheckbox"
+                              scope="col"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    id="_selection_column-checkbox_some_html_id"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              class="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_accelerationMethod_2"
+                              role="columnheader"
+                              scope="col"
+                            >
+                              <button
+                                class="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiTableCellContent"
+                                >
+                                  <span
+                                    class="euiTableCellContent__text"
+                                    title="Acceleration method"
+                                  >
+                                    Acceleration method
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            class="euiTableRow euiTableRow-isSelectable"
+                          >
+                            <td
+                              class="euiTableRowCellCheckbox"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select this row"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectRow-1"
+                                    id="_selection_column_1-checkbox"
+                                    title="Select this row"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Field name
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  field1
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Datatype
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  string
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Acceleration method
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  PARTITION
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                          <tr
+                            class="euiTableRow euiTableRow-isSelectable"
+                          >
+                            <td
+                              class="euiTableRowCellCheckbox"
+                            >
+                              <div
+                                class="euiTableCellContent"
+                              >
+                                <div
+                                  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select this row"
+                                    class="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectRow-2"
+                                    id="_selection_column_2-checkbox"
+                                    title="Select this row"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    class="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Field name
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  field2
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Datatype
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  number
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              class="euiTableRowCell"
+                            >
+                              <div
+                                class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Acceleration method
+                              </div>
+                              <div
+                                class="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  class="euiTableCellContent__text"
+                                >
+                                  VALUE_SET
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div>
+                      <div
+                        class="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      >
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <div
+                            class="euiPopover euiPopover--anchorUpRight"
+                          >
+                            <div
+                              class="euiPopover__anchor"
+                            >
+                              <button
+                                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                data-test-subj="tablePaginationPopoverButton"
+                                type="button"
+                              >
+                                <span
+                                  class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--small 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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                      fill-rule="non-zero"
+                                    />
+                                  </svg>
+                                  <span
+                                    class="euiButtonEmpty__text"
+                                  >
+                                    Rows per page
+                                    : 
+                                    20
+                                  </span>
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <nav
+                            class="euiPagination"
+                          >
+                            <button
+                              aria-label="Previous page"
+                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="pagination-button-previous"
+                              disabled=""
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                            <ul
+                              class="euiPagination__list"
+                            >
+                              <li
+                                class="euiPagination__item"
+                              >
+                                <button
+                                  aria-controls="some_html_id"
+                                  aria-current="true"
+                                  aria-label="Page 1 of 1"
+                                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                  data-test-subj="pagination-button-0"
+                                  disabled=""
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiButtonContent euiButtonEmpty__content"
+                                  >
+                                    <span
+                                      class="euiButtonEmpty__text"
+                                    >
+                                      1
+                                    </span>
+                                  </span>
+                                </button>
+                              </li>
+                            </ul>
+                            <button
+                              aria-label="Next page"
+                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="pagination-button-next"
+                              disabled=""
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                          </nav>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--danger euiButton--fill"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  }
+>
+  Array [
+    Array [
+      <div
+        data-focus-guard={true}
+        key="guard-first"
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+      "",
+      <div
+        data-focus-lock-disabled={false}
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onScrollCapture={[Function]}
+        onTouchMoveCapture={[Function]}
+        onTouchStart={[Function]}
+        onWheelCapture={[Function]}
+      >
+        <div
+          className="euiModal euiModal--maxWidth-default"
+          onKeyDown={[Function]}
+          tabIndex={0}
+        >
+          <button
+            aria-label="Closes this modal window"
+            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            <svg
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+              focusable="false"
+              height={16}
+              role="img"
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+              />
+            </svg>
+          </button>
+          <div
+            className="euiModal__flex"
+          >
+            <div
+              className="euiModalHeader"
+            >
+              <div
+                className="euiModalHeader__title"
+              >
+                <h1>
+                  Bulk delete
+                </h1>
+              </div>
+            </div>
+            <div
+              className="euiModalBody"
+            >
+              <div
+                className="euiModalBody__overflow"
+              >
+                <div>
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                  >
+                    <div
+                      className="euiFlexItem euiSearchBar__searchHolder"
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <input
+                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                            className="euiFieldSearch euiFieldSearch--fullWidth"
+                            defaultValue=""
+                            onKeyUp={[Function]}
+                            placeholder="Search..."
+                            type="search"
+                          />
+                          <div
+                            className="euiFormControlLayoutIcons"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                                />
+                              </svg>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                  <div
+                    className="euiBasicTable"
+                  >
+                    <div>
+                      <div
+                        className="euiTableHeaderMobile"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                checked={false}
+                                className="euiCheckbox__input"
+                                disabled={false}
+                                id="_selection_column-checkbox_some_html_id"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                className="euiCheckbox__square"
+                              />
+                              <label
+                                className="euiCheckbox__label"
+                                htmlFor="_selection_column-checkbox_some_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </div>
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownRight"
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                          fillRule="non-zero"
+                                        />
+                                      </svg>
+                                      <span
+                                        className="euiButtonEmpty__text"
+                                      >
+                                        Sorting
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <table
+                        className="euiTable euiTable--responsive"
+                        id="some_html_id"
+                        tabIndex={-1}
+                      >
+                        <caption
+                          className="euiScreenReaderOnly euiTableCaption"
+                        />
+                        <thead>
+                          <tr>
+                            <th
+                              className="euiTableHeaderCellCheckbox"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled={false}
+                                    id="_selection_column-checkbox_some_html_id"
+                                    onChange={[Function]}
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_fieldName_0"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Field name"
+                                  >
+                                    Field name
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_dataType_1"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Datatype"
+                                  >
+                                    Datatype
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                            <th
+                              aria-live="polite"
+                              aria-sort="none"
+                              className="euiTableHeaderCell"
+                              data-test-subj="tableHeaderCell_accelerationMethod_2"
+                              role="columnheader"
+                              scope="col"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <button
+                                className="euiTableHeaderButton"
+                                data-test-subj="tableHeaderSortButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Acceleration method"
+                                  >
+                                    Acceleration method
+                                  </span>
+                                </span>
+                              </button>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr
+                            className="euiTableRow euiTableRow-isSelectable"
+                          >
+                            <td
+                              className="euiTableRowCellCheckbox"
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select this row"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectRow-1"
+                                    disabled={false}
+                                    id="_selection_column_1-checkbox"
+                                    onChange={[Function]}
+                                    title="Select this row"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Field name
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  field1
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Datatype
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  string
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Acceleration method
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  PARTITION
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                          <tr
+                            className="euiTableRow euiTableRow-isSelectable"
+                          >
+                            <td
+                              className="euiTableRowCellCheckbox"
+                            >
+                              <div
+                                className="euiTableCellContent"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select this row"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectRow-2"
+                                    disabled={false}
+                                    id="_selection_column_2-checkbox"
+                                    onChange={[Function]}
+                                    title="Select this row"
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Field name
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  field2
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Datatype
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  number
+                                </span>
+                              </div>
+                            </td>
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Acceleration method
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  VALUE_SET
+                                </span>
+                              </div>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div>
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <div
+                            className="euiPopover euiPopover--anchorUpRight"
+                          >
+                            <div
+                              className="euiPopover__anchor"
+                            >
+                              <button
+                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                data-test-subj="tablePaginationPopoverButton"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                      fillRule="non-zero"
+                                    />
+                                  </svg>
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    Rows per page
+                                    : 
+                                    20
+                                  </span>
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <nav
+                            className="euiPagination"
+                          >
+                            <button
+                              aria-label="Previous page"
+                              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="pagination-button-previous"
+                              disabled={true}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                            <ul
+                              className="euiPagination__list"
+                            >
+                              <li
+                                className="euiPagination__item"
+                              >
+                                <button
+                                  aria-controls="some_html_id"
+                                  aria-current={true}
+                                  aria-label="Page 1 of 1"
+                                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                  data-test-subj="pagination-button-0"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonEmpty__content"
+                                  >
+                                    <span
+                                      className="euiButtonEmpty__text"
+                                    >
+                                      1
+                                    </span>
+                                  </span>
+                                </button>
+                              </li>
+                            </ul>
+                            <button
+                              aria-label="Next page"
+                              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                              data-test-subj="pagination-button-next"
+                              disabled={true}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                          </nav>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="euiModalFooter"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                className="euiButton euiButton--danger euiButton--fill"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButton__content"
+                >
+                  <span
+                    className="euiButton__text"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>,
+      <div
+        data-focus-guard={true}
+        style={
+          Object {
+            "height": "0px",
+            "left": "1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "fixed",
+            "top": "1px",
+            "width": "1px",
+          }
+        }
+        tabIndex={0}
+      />,
+    ],
+    "",
+  ]
+</Portal>
+`;
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
new file mode 100644
index 00000000..cc72fdd4
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
@@ -0,0 +1,855 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Builder components in materialized view renders builder components in materialized view with default options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="skipping-index-builder"
+  >
+    <h3>
+      Skipping index definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiBasicTable"
+    itemID="id"
+  >
+    <div>
+      <div
+        className="euiTableHeaderMobile"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          />
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          />
+        </div>
+      </div>
+      <table
+        className="euiTable euiTable--responsive"
+        id="some_html_id"
+        tabIndex={-1}
+      >
+        <caption
+          className="euiScreenReaderOnly euiTableCaption"
+        />
+        <thead>
+          <tr>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_fieldName_0"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Field name"
+                >
+                  Field name
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_dataType_1"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Datatype"
+                >
+                  Datatype
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_Acceleration method_2"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Acceleration method"
+                >
+                  Acceleration method
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_Delete_3"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Delete"
+                >
+                  Delete
+                </span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            className="euiTableRow"
+          >
+            <td
+              className="euiTableRowCell euiTableRowCell--isMobileFullWidth"
+              colSpan={4}
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableCellContent euiTableCellContent--alignCenter"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                >
+                  No items found
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        className="euiButton euiButton--primary euiButton--fill"
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <span
+          className="euiButtonContent euiButton__content"
+        >
+          <span
+            className="euiButton__text"
+          >
+            Add fields
+          </span>
+        </span>
+      </button>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        className="euiButton euiButton--danger"
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <span
+          className="euiButtonContent euiButton__content"
+        >
+          <span
+            className="euiButton__text"
+          >
+            Bulk delete
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Builder components in materialized view renders builder components in materialized view with different options 1`] = `
+Array [
+  <div
+    className="euiText euiText--medium"
+    data-test-subj="skipping-index-builder"
+  >
+    <h3>
+      Skipping index definition
+    </h3>
+  </div>,
+  <div
+    className="euiSpacer euiSpacer--s"
+  />,
+  <div
+    className="euiBasicTable"
+    itemID="id"
+  >
+    <div>
+      <div
+        className="euiTableHeaderMobile"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          />
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          />
+        </div>
+      </div>
+      <table
+        className="euiTable euiTable--responsive"
+        id="some_html_id"
+        tabIndex={-1}
+      >
+        <caption
+          className="euiScreenReaderOnly euiTableCaption"
+        />
+        <thead>
+          <tr>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_fieldName_0"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Field name"
+                >
+                  Field name
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_dataType_1"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Datatype"
+                >
+                  Datatype
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_Acceleration method_2"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Acceleration method"
+                >
+                  Acceleration method
+                </span>
+              </span>
+            </th>
+            <th
+              className="euiTableHeaderCell"
+              data-test-subj="tableHeaderCell_Delete_3"
+              role="columnheader"
+              scope="col"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <span
+                className="euiTableCellContent"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                  title="Delete"
+                >
+                  Delete
+                </span>
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            className="euiTableRow euiTableRow-hasActions"
+          >
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Field name
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--truncateText"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                >
+                  field1
+                </span>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Datatype
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--truncateText"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                >
+                  string
+                </span>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Acceleration method
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--overflowingContent"
+              >
+                <div
+                  className="euiFormControlLayout"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <select
+                      aria-label="Use aria labels when no actual label is in use"
+                      className="euiSelect"
+                      id="selectDocExample"
+                      onChange={[Function]}
+                      onMouseUp={[Function]}
+                      value="PARTITION"
+                    >
+                      <option
+                        key="0"
+                        value="PARTITION"
+                      >
+                        Partition
+                      </option>
+                      <option
+                        key="1"
+                        value="VALUE_SET"
+                      >
+                        Value Set
+                      </option>
+                      <option
+                        key="2"
+                        value="MIN_MAX"
+                      >
+                        Min Max
+                      </option>
+                    </select>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Delete
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--overflowingContent"
+              >
+                <button
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr
+            className="euiTableRow euiTableRow-hasActions"
+          >
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Field name
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--truncateText"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                >
+                  field2
+                </span>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Datatype
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--truncateText"
+              >
+                <span
+                  className="euiTableCellContent__text"
+                >
+                  number
+                </span>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Acceleration method
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--overflowingContent"
+              >
+                <div
+                  className="euiFormControlLayout"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <select
+                      aria-label="Use aria labels when no actual label is in use"
+                      className="euiSelect"
+                      id="selectDocExample"
+                      onChange={[Function]}
+                      onMouseUp={[Function]}
+                      value="VALUE_SET"
+                    >
+                      <option
+                        key="0"
+                        value="PARTITION"
+                      >
+                        Partition
+                      </option>
+                      <option
+                        key="1"
+                        value="VALUE_SET"
+                      >
+                        Value Set
+                      </option>
+                      <option
+                        key="2"
+                        value="MIN_MAX"
+                      >
+                        Min Max
+                      </option>
+                    </select>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              className="euiTableRowCell"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <div
+                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+              >
+                Delete
+              </div>
+              <div
+                className="euiTableCellContent euiTableCellContent--overflowingContent"
+              >
+                <button
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            className="euiPopover euiPopover--anchorUpRight"
+          >
+            <div
+              className="euiPopover__anchor"
+            >
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                data-test-subj="tablePaginationPopoverButton"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Rows per page
+                    : 
+                    20
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <nav
+            className="euiPagination"
+          >
+            <button
+              aria-label="Previous page"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              data-test-subj="pagination-button-previous"
+              disabled={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </button>
+            <ul
+              className="euiPagination__list"
+            >
+              <li
+                className="euiPagination__item"
+              >
+                <button
+                  aria-controls="some_html_id"
+                  aria-current={true}
+                  aria-label="Page 1 of 1"
+                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  data-test-subj="pagination-button-0"
+                  disabled={true}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiButtonContent euiButtonEmpty__content"
+                  >
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      1
+                    </span>
+                  </span>
+                </button>
+              </li>
+            </ul>
+            <button
+              aria-label="Next page"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              data-test-subj="pagination-button-next"
+              disabled={true}
+              onClick={[Function]}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--wrap"
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        className="euiButton euiButton--primary euiButton--fill"
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <span
+          className="euiButtonContent euiButton__content"
+        >
+          <span
+            className="euiButton__text"
+          >
+            Add fields
+          </span>
+        </span>
+      </button>
+    </div>
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        className="euiButton euiButton--danger"
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <span
+          className="euiButtonContent euiButton__content"
+        >
+          <span
+            className="euiButton__text"
+          >
+            Bulk delete
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>,
+]
+`;
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/add_fields_modal.test.tsx b/public/components/acceleration/visual_editors/skipping_index/__tests__/add_fields_modal.test.tsx
new file mode 100644
index 00000000..d456610f
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/add_fields_modal.test.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  skippingIndexDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { AddFieldsModal } from '../add_fields_modal';
+
+describe('Add fields modal in skipping index', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders add fields modal in skipping index with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const setIsAddModalVisible = jest.fn();
+    const wrapper = mount(
+      <AddFieldsModal
+        setIsAddModalVisible={setIsAddModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders add fields modal in skipping index with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'skipping',
+      skippingIndexQueryData: skippingIndexDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const setIsAddModalVisible = jest.fn();
+    const wrapper = mount(
+      <AddFieldsModal
+        setIsAddModalVisible={setIsAddModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/delete_fields_modal.test.tsx b/public/components/acceleration/visual_editors/skipping_index/__tests__/delete_fields_modal.test.tsx
new file mode 100644
index 00000000..9700ed6a
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/delete_fields_modal.test.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  skippingIndexDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { DeleteFieldsModal } from '../delete_fields_modal';
+
+describe('Delete fields modal in skipping index', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders delete fields modal in skipping index with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const setIsDeleteModalVisible = jest.fn();
+    const wrapper = mount(
+      <DeleteFieldsModal
+        setIsDeleteModalVisible={setIsDeleteModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders delete fields modal in skipping index with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'skipping',
+      skippingIndexQueryData: skippingIndexDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const setIsDeleteModalVisible = jest.fn();
+    const wrapper = mount(
+      <DeleteFieldsModal
+        setIsDeleteModalVisible={setIsDeleteModalVisible}
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/skipping_index/__tests__/skipping_index_builder.test.tsx b/public/components/acceleration/visual_editors/skipping_index/__tests__/skipping_index_builder.test.tsx
new file mode 100644
index 00000000..2cb423b9
--- /dev/null
+++ b/public/components/acceleration/visual_editors/skipping_index/__tests__/skipping_index_builder.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/dom';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import React from 'react';
+import { CreateAccelerationForm } from '../../../../../../common/types';
+import {
+  createAccelerationEmptyDataMock,
+  skippingIndexDataMock,
+} from '../../../../../../test/mocks/accelerationMock';
+import { SkippingIndexBuilder } from '../skipping_index_builder';
+
+describe('Builder components in materialized view', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders builder components in materialized view with default options', async () => {
+    const accelerationFormData = createAccelerationEmptyDataMock;
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <SkippingIndexBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+
+  it('renders builder components in materialized view with different options', async () => {
+    const accelerationFormData: CreateAccelerationForm = {
+      ...createAccelerationEmptyDataMock,
+      accelerationIndexType: 'skipping',
+      skippingIndexQueryData: skippingIndexDataMock,
+    };
+    const setAccelerationFormData = jest.fn();
+    const wrapper = mount(
+      <SkippingIndexBuilder
+        accelerationFormData={accelerationFormData}
+        setAccelerationFormData={setAccelerationFormData}
+      />
+    );
+    wrapper.update();
+    await waitFor(() => {
+      expect(
+        toJson(wrapper, {
+          noKey: false,
+          mode: 'deep',
+        })
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
index e771c1b1..2fc8d883 100644
--- a/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/add_fields_modal.tsx
@@ -13,9 +13,15 @@ import {
   EuiModalHeaderTitle,
   EuiTableFieldDataColumnType,
 } from '@elastic/eui';
+import producer from 'immer';
 import _ from 'lodash';
 import React, { useState } from 'react';
-import { CreateAccelerationForm, DataTableFieldsType } from '../../../../../common/types';
+import {
+  CreateAccelerationForm,
+  DataTableFieldsType,
+  SkippingIndexRowType,
+} from '../../../../../common/types';
+import { validateSkippingIndexData } from '../../create/utils';
 
 interface AddFieldsModalProps {
   setIsAddModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,7 +34,7 @@ export const AddFieldsModal = ({
   accelerationFormData,
   setAccelerationFormData,
 }: AddFieldsModalProps) => {
-  const [selectedFields, setSelectedFields] = useState([]);
+  const [selectedFields, setSelectedFields] = useState<DataTableFieldsType[]>([]);
 
   const tableColumns: Array<EuiTableFieldDataColumnType<DataTableFieldsType>> = [
     {
@@ -81,15 +87,19 @@ export const AddFieldsModal = ({
         <EuiButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiButton>
         <EuiButton
           onClick={() => {
-            setAccelerationFormData({
-              ...accelerationFormData,
-              skippingIndexQueryData: [
-                ...accelerationFormData.skippingIndexQueryData,
-                ...selectedFields.map((x) => {
-                  return { ...x, accelerationMethod: 'PARTITION' };
-                }),
-              ],
-            });
+            setAccelerationFormData(
+              producer((accData) => {
+                accData.skippingIndexQueryData.push(
+                  ...selectedFields.map((x) => {
+                    return { ...x, accelerationMethod: 'PARTITION' } as SkippingIndexRowType;
+                  })
+                );
+                accData.formErrors.skippingIndexError = validateSkippingIndexData(
+                  accData.accelerationIndexType,
+                  accData.skippingIndexQueryData
+                );
+              })
+            );
             setIsAddModalVisible(false);
           }}
           fill
diff --git a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
index adfa29b0..225ff06d 100644
--- a/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/delete_fields_modal.tsx
@@ -28,7 +28,7 @@ export const DeleteFieldsModal = ({
   accelerationFormData,
   setAccelerationFormData,
 }: AddFieldsModalProps) => {
-  const [selectedFields, setSelectedFields] = useState([]);
+  const [selectedFields, setSelectedFields] = useState<SkippingIndexRowType[]>([]);
 
   const tableColumns: Array<EuiTableFieldDataColumnType<SkippingIndexRowType>> = [
     {
diff --git a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
index f38b120b..104cdb0b 100644
--- a/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/skipping_index/skipping_index_builder.tsx
@@ -13,9 +13,15 @@ import {
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
-import _ from 'lodash';
+import producer from 'immer';
 import React, { useEffect, useState } from 'react';
-import { CreateAccelerationForm, SkippingIndexRowType } from '../../../../../common/types';
+import { SKIPPING_INDEX_ACCELERATION_METHODS } from '../../../../../common/constants';
+import {
+  CreateAccelerationForm,
+  SkippingIndexAccMethodType,
+  SkippingIndexRowType,
+} from '../../../../../common/types';
+import { validateSkippingIndexData } from '../../create/utils';
 import { AddFieldsModal } from './add_fields_modal';
 import { DeleteFieldsModal } from './delete_fields_modal';
 
@@ -35,12 +41,6 @@ export const SkippingIndexBuilder = ({
   const [isAddModalVisible, setIsAddModalVisible] = useState(false);
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
 
-  const accelerationMethods = [
-    { value: 'PARTITION', text: 'Partition' },
-    { value: 'VALUE_SET', text: 'Value Set' },
-    { value: 'MIN_MAX', text: 'Min Max' },
-  ];
-
   let modal;
 
   if (isAddModalVisible)
@@ -67,13 +67,15 @@ export const SkippingIndexBuilder = ({
   };
 
   const onChangeAccelerationMethod = (
-    e: { target: { value: 'PARTITION' | 'VALUE_SET' | 'MIN_MAX' } },
+    e: React.ChangeEvent<HTMLSelectElement>,
     updateRow: SkippingIndexRowType
   ) => {
     setAccelerationFormData({
       ...accelerationFormData,
-      skippingIndexQueryData: _.map(accelerationFormData.skippingIndexQueryData, (row) =>
-        row.id === updateRow.id ? { ...row, accelerationMethod: e.target.value } : row
+      skippingIndexQueryData: accelerationFormData.skippingIndexQueryData.map((row) =>
+        row.id === updateRow.id
+          ? { ...row, accelerationMethod: e.target.value as SkippingIndexAccMethodType }
+          : row
       ),
     });
   };
@@ -96,7 +98,7 @@ export const SkippingIndexBuilder = ({
       render: (item: SkippingIndexRowType) => (
         <EuiSelect
           id="selectDocExample"
-          options={accelerationMethods}
+          options={SKIPPING_INDEX_ACCELERATION_METHODS}
           value={item.accelerationMethod}
           onChange={(e) => onChangeAccelerationMethod(e, item)}
           aria-label="Use aria labels when no actual label is in use"
@@ -111,8 +113,7 @@ export const SkippingIndexBuilder = ({
             onClick={() => {
               setAccelerationFormData({
                 ...accelerationFormData,
-                skippingIndexQueryData: _.filter(
-                  accelerationFormData.skippingIndexQueryData,
+                skippingIndexQueryData: accelerationFormData.skippingIndexQueryData.filter(
                   (o) => item.id !== o.id
                 ),
               });
@@ -140,7 +141,15 @@ export const SkippingIndexBuilder = ({
           accelerationMethod: 'PARTITION',
         },
       ];
-      setAccelerationFormData({ ...accelerationFormData, skippingIndexQueryData: tableRows });
+      setAccelerationFormData(
+        producer((accData) => {
+          accData.skippingIndexQueryData = tableRows;
+          accData.formErrors.skippingIndexError = validateSkippingIndexData(
+            accData.accelerationIndexType,
+            tableRows
+          );
+        })
+      );
     } else {
       setAccelerationFormData({ ...accelerationFormData, skippingIndexQueryData: [] });
     }
@@ -153,7 +162,7 @@ export const SkippingIndexBuilder = ({
   return (
     <>
       <EuiText data-test-subj="skipping-index-builder">
-        <h3>Skipping Index Builder</h3>
+        <h3>Skipping index definition</h3>
       </EuiText>
       <EuiSpacer size="s" />
       <EuiBasicTable
@@ -166,6 +175,7 @@ export const SkippingIndexBuilder = ({
         pagination={pagination}
         onChange={({ page }) => onTableChange(page)}
         hasActions={true}
+        error={accelerationFormData.formErrors.skippingIndexError.join('')}
       />
       <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
         <EuiFlexItem grow={false}>
diff --git a/public/plugin.ts b/public/plugin.ts
index 10836ae1..213f4142 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -4,8 +4,8 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
-import { WorkbenchPluginSetup, WorkbenchPluginStart, AppPluginStartDependencies } from './types';
 import { PLUGIN_NAME } from '../common/constants';
+import { AppPluginStartDependencies, WorkbenchPluginSetup, WorkbenchPluginStart } from './types';
 
 export class WorkbenchPlugin implements Plugin<WorkbenchPluginSetup, WorkbenchPluginStart> {
   public setup(core: CoreSetup): WorkbenchPluginSetup {
diff --git a/test/jest.config.js b/test/jest.config.js
index 93af515b..1fc763c0 100644
--- a/test/jest.config.js
+++ b/test/jest.config.js
@@ -3,39 +3,39 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
 module.exports = {
-  rootDir: "../",
-  setupFiles: ["<rootDir>/test/polyfills.ts", "<rootDir>/test/setupTests.ts"],
-  setupFilesAfterEnv: ["<rootDir>/test/setup.jest.ts"],
-  roots: ["<rootDir>"],
-  coverageDirectory: "./coverage",
+  rootDir: '../',
+  setupFiles: ['<rootDir>/test/polyfills.ts', '<rootDir>/test/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.jest.ts'],
+  roots: ['<rootDir>'],
+  coverageDirectory: './coverage',
   moduleNameMapper: {
-    "\\.(css|less|scss)$": "<rootDir>/test/mocks/styleMock.ts",
-    "^ui/(.*)": "<rootDir>/../../src/ui/public/$1/",
+    '\\.(css|less|scss)$': '<rootDir>/test/mocks/styleMock.ts',
+    '^ui/(.*)': '<rootDir>/../../src/ui/public/$1/',
   },
-  coverageReporters: ["lcov", "text", "cobertura"],
-  testMatch: ["**/*.test.ts", "**/*.test.tsx"],
+  coverageReporters: ['lcov', 'text', 'cobertura'],
+  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
   collectCoverageFrom: [
-    "!**/*.ts",
-    "**/*.tsx",
-    "!**/*.js",
-    "!**/*.jsx",
-    "!**/models/**",
-    "!**/node_modules/**",
-    "!**/index.ts",
-    "!<rootDir>/index.js",
-    "!<rootDir>/public/app.js",
-    "!<rootDir>/public/temporary/**",
-    "!<rootDir>/babel.config.js",
-    "!<rootDir>/test/**",
-    "!<rootDir>/server/**",
-    "!<rootDir>/coverage/**",
-    "!<rootDir>/scripts/**",
-    "!<rootDir>/build/**",
-    "!**/vendor/**",
+    '!**/*.ts',
+    '**/*.tsx',
+    '!**/*.js',
+    '!**/*.jsx',
+    '!**/models/**',
+    '!**/node_modules/**',
+    '!**/index.ts',
+    '!<rootDir>/index.js',
+    '!<rootDir>/public/app.js',
+    '!<rootDir>/public/temporary/**',
+    '!<rootDir>/babel.config.js',
+    '!<rootDir>/test/**',
+    '!<rootDir>/server/**',
+    '!<rootDir>/coverage/**',
+    '!<rootDir>/scripts/**',
+    '!<rootDir>/build/**',
+    '!**/vendor/**',
   ],
   clearMocks: true,
-  testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/"],
+  testPathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
   testEnvironment: 'jsdom',
+  testTimeout: 20000,
 };
diff --git a/test/mocks/accelerationMock.ts b/test/mocks/accelerationMock.ts
new file mode 100644
index 00000000..154dbd22
--- /dev/null
+++ b/test/mocks/accelerationMock.ts
@@ -0,0 +1,378 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
+  ACCELERATION_TIME_INTERVAL,
+} from '../../common/constants';
+import {
+  CreateAccelerationForm,
+  SkippingIndexRowType,
+  materializedViewQueryType,
+} from '../../common/types';
+
+export const skippingIndexDataMock: SkippingIndexRowType[] = [
+  {
+    id: '1',
+    fieldName: 'field1',
+    dataType: 'string',
+    accelerationMethod: 'PARTITION',
+  },
+  {
+    id: '2',
+    fieldName: 'field2',
+    dataType: 'number',
+    accelerationMethod: 'VALUE_SET',
+  },
+];
+
+export const coveringIndexDataMock: string[] = ['field1', 'field2', 'field3'];
+
+export const materializedViewEmptyDataMock = {
+  columnsValues: [],
+  groupByTumbleValue: {
+    timeField: '',
+    tumbleWindow: 0,
+    tumbleInterval: '',
+  },
+};
+
+export const materializedViewEmptyTumbleDataMock: materializedViewQueryType = {
+  columnsValues: [
+    {
+      id: '1',
+      functionName: 'count',
+      functionParam: 'field1',
+    },
+  ],
+  groupByTumbleValue: {
+    timeField: '',
+    tumbleWindow: 0,
+    tumbleInterval: 'second',
+  },
+};
+
+export const materializedViewStaleDataMock: materializedViewQueryType = {
+  columnsValues: [],
+  groupByTumbleValue: {
+    timeField: 'timestamp',
+    tumbleWindow: 10,
+    tumbleInterval: 'hour',
+  },
+};
+
+export const materializedViewValidDataMock: materializedViewQueryType = {
+  columnsValues: [
+    {
+      id: '1',
+      functionName: 'count',
+      functionParam: 'field1',
+    },
+    {
+      id: '2',
+      functionName: 'sum',
+      functionParam: 'field2',
+    },
+  ],
+  groupByTumbleValue: {
+    timeField: 'timestamp',
+    tumbleWindow: 5,
+    tumbleInterval: 'hour',
+  },
+};
+
+export const createAccelerationEmptyDataMock: CreateAccelerationForm = {
+  dataSource: '',
+  dataTable: '',
+  database: '',
+  dataTableFields: [],
+  accelerationIndexType: 'skipping',
+  skippingIndexQueryData: [],
+  coveringIndexQueryData: [],
+  materializedViewQueryData: {
+    columnsValues: [],
+    groupByTumbleValue: {
+      timeField: '',
+      tumbleWindow: 0,
+      tumbleInterval: '',
+    },
+  },
+  accelerationIndexName: ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
+  primaryShardsCount: 5,
+  replicaShardsCount: 1,
+  refreshType: 'auto',
+  checkpointLocation: undefined,
+  refreshIntervalOptions: {
+    refreshWindow: 1,
+    refreshInterval: ACCELERATION_TIME_INTERVAL[1].value,
+  },
+  formErrors: {
+    dataSourceError: [],
+    databaseError: [],
+    dataTableError: [],
+    skippingIndexError: [],
+    coveringIndexError: [],
+    materializedViewError: [],
+    indexNameError: [],
+    primaryShardsError: [],
+    replicaShardsError: [],
+    refreshIntervalError: [],
+    checkpointLocationError: [],
+  },
+};
+
+export const indexOptionsMock1: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  primaryShardsCount: 3,
+  replicaShardsCount: 2,
+  refreshType: 'auto',
+};
+
+export const indexOptionsMockResult1 = `WITH (
+index_settings = '{"number_of_shards":3,"number_of_replicas":2}',
+auto_refresh = true
+)`;
+
+export const indexOptionsMock2: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  primaryShardsCount: 3,
+  replicaShardsCount: 2,
+  refreshType: 'interval',
+  refreshIntervalOptions: {
+    refreshWindow: 10,
+    refreshInterval: 'minute',
+  },
+};
+
+export const indexOptionsMockResult2 = `WITH (
+index_settings = '{"number_of_shards":3,"number_of_replicas":2}',
+auto_refresh = false,
+refresh_interval = '10 minutes'
+)`;
+
+export const indexOptionsMock3: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  primaryShardsCount: 3,
+  replicaShardsCount: 2,
+  refreshType: 'auto',
+  checkpointLocation: 's3://path/to/checkpoint',
+};
+
+export const indexOptionsMockResult3 = `WITH (
+index_settings = '{"number_of_shards":3,"number_of_replicas":2}',
+auto_refresh = true,
+checkpoint_location = 's3://path/to/checkpoint'
+)`;
+
+export const skippingIndexBuilderMock1: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  skippingIndexQueryData: [
+    {
+      id: '1',
+      fieldName: 'field1',
+      dataType: 'string',
+      accelerationMethod: 'PARTITION',
+    },
+    {
+      id: '2',
+      fieldName: 'field2',
+      dataType: 'int',
+      accelerationMethod: 'VALUE_SET',
+    },
+    {
+      id: '3',
+      fieldName: 'field3',
+      dataType: 'boolean',
+      accelerationMethod: 'MIN_MAX',
+    },
+  ],
+  primaryShardsCount: 9,
+  replicaShardsCount: 2,
+  refreshType: 'interval',
+  refreshIntervalOptions: {
+    refreshWindow: 1,
+    refreshInterval: 'minute',
+  },
+  checkpointLocation: 's3://test/',
+};
+
+export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX 
+[IF NOT EXISTS]
+ON datasource.database.table
+  FOR COLUMNS (
+   field1 PARTITION, 
+   field2 VALUE_SET, 
+   field3 MIN_MAX
+  ) WITH (
+index_settings = '{"number_of_shards":9,"number_of_replicas":2}',
+auto_refresh = false,
+refresh_interval = '1 minute',
+checkpoint_location = 's3://test/'
+)`;
+
+export const skippingIndexBuilderMock2: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  skippingIndexQueryData: [
+    {
+      id: '1',
+      fieldName: 'field1',
+      dataType: 'string',
+      accelerationMethod: 'PARTITION',
+    },
+  ],
+  primaryShardsCount: 5,
+  replicaShardsCount: 3,
+  refreshType: 'auto',
+  checkpointLocation: 's3://test/',
+};
+
+export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX 
+[IF NOT EXISTS]
+ON datasource.database.table
+  FOR COLUMNS (
+   field1 PARTITION
+  ) WITH (
+index_settings = '{"number_of_shards":5,"number_of_replicas":3}',
+auto_refresh = true,
+checkpoint_location = 's3://test/'
+)`;
+
+export const coveringIndexBuilderMock1: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  accelerationIndexName: 'index_name',
+  coveringIndexQueryData: ['field1', 'field2', 'field3'],
+  primaryShardsCount: 9,
+  replicaShardsCount: 2,
+  refreshType: 'interval',
+  refreshIntervalOptions: {
+    refreshWindow: 1,
+    refreshInterval: 'minute',
+  },
+  checkpointLocation: 's3://test/',
+};
+
+export const coveringIndexBuilderMockResult1 = `CREATE INDEX index_name
+[IF NOT EXISTS]
+ON datasource.database.table
+  FOR COLUMNS (
+   field1, 
+   field2, 
+   field3
+  ) WITH (
+index_settings = '{"number_of_shards":9,"number_of_replicas":2}',
+auto_refresh = false,
+refresh_interval = '1 minute',
+checkpoint_location = 's3://test/'
+)`;
+
+export const coveringIndexBuilderMock2: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  accelerationIndexName: 'index_name',
+  coveringIndexQueryData: ['field1'],
+  primaryShardsCount: 5,
+  replicaShardsCount: 3,
+  refreshType: 'auto',
+  checkpointLocation: 's3://test/',
+};
+
+export const coveringIndexBuilderMockResult2 = `CREATE INDEX index_name
+[IF NOT EXISTS]
+ON datasource.database.table
+  FOR COLUMNS (
+   field1
+  ) WITH (
+index_settings = '{"number_of_shards":5,"number_of_replicas":3}',
+auto_refresh = true,
+checkpoint_location = 's3://test/'
+)`;
+
+export const materializedViewBuilderMock1: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  accelerationIndexName: 'index_name',
+  materializedViewQueryData: {
+    columnsValues: [
+      { id: '1', functionName: 'count', functionParam: 'field', fieldAlias: 'counter' },
+      { id: '2', functionName: 'count', functionParam: '*', fieldAlias: 'counter1' },
+      { id: '3', functionName: 'sum', functionParam: 'field2' },
+      { id: '4', functionName: 'avg', functionParam: 'field3', fieldAlias: 'average' },
+    ],
+    groupByTumbleValue: {
+      timeField: 'timestamp',
+      tumbleWindow: 1,
+      tumbleInterval: 'minute',
+    },
+  },
+  primaryShardsCount: 9,
+  replicaShardsCount: 2,
+  refreshType: 'interval',
+  refreshIntervalOptions: {
+    refreshWindow: 1,
+    refreshInterval: 'minute',
+  },
+  checkpointLocation: 's3://test/',
+};
+
+export const materializedViewBuilderMockResult1 = `CREATE MATERIALIZED VIEW datasource.database.index_name
+[IF NOT EXISTS]
+AS SELECT
+   count(field) AS counter, 
+   count(*) AS counter1, 
+   sum(field2), 
+   avg(field3) AS average
+FROM datasource.database.table
+GROUP BY TUMBLE (timestamp, '1 minute')
+ WITH (
+index_settings = '{"number_of_shards":9,"number_of_replicas":2}',
+auto_refresh = false,
+refresh_interval = '1 minute',
+checkpoint_location = 's3://test/'
+)`;
+
+export const materializedViewBuilderMock2: CreateAccelerationForm = {
+  ...createAccelerationEmptyDataMock,
+  dataSource: 'datasource',
+  database: 'database',
+  dataTable: 'table',
+  accelerationIndexName: 'index_name',
+  materializedViewQueryData: {
+    columnsValues: [{ id: '1', functionName: 'count', functionParam: 'field' }],
+    groupByTumbleValue: {
+      timeField: 'timestamp',
+      tumbleWindow: 2,
+      tumbleInterval: 'hour',
+    },
+  },
+  primaryShardsCount: 5,
+  replicaShardsCount: 3,
+  refreshType: 'auto',
+  checkpointLocation: 's3://test/',
+};
+
+export const materializedViewBuilderMockResult2 = `CREATE MATERIALIZED VIEW datasource.database.index_name
+[IF NOT EXISTS]
+AS SELECT
+   count(field)
+FROM datasource.database.table
+GROUP BY TUMBLE (timestamp, '2 hours')
+ WITH (
+index_settings = '{"number_of_shards":5,"number_of_replicas":3}',
+auto_refresh = true,
+checkpoint_location = 's3://test/'
+)`;
diff --git a/yarn.lock b/yarn.lock
index 84c997b0..e641c8ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,41 +3,42 @@
 
 
 "@babel/code-frame@^7.0.0":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  version "7.22.13"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
   dependencies:
-    "@babel/highlight" "^7.18.6"
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
 
-"@babel/helper-validator-identifier@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
-  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/highlight@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
-  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    chalk "^2.0.0"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
     js-tokens "^4.0.0"
 
 "@babel/runtime@^7.12.5":
   version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
 "@colors/colors@1.5.0":
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
+  resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
 "@cypress/listr-verbose-renderer@^0.4.1":
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
+  resolved "https://registry.npmjs.org/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz"
   integrity sha512-EDiBsVPWC27DDLEJCo+dpl9ODHhdrwU57ccr9tspwCdG2ni0QVkf6LF0FGbhfujcjPxnXLIwsaks4sOrwrA4Qw==
   dependencies:
     chalk "^1.1.3"
@@ -71,7 +72,7 @@
 
 "@cypress/xvfb@^1.2.4":
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
+  resolved "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz"
   integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
   dependencies:
     debug "^3.1.0"
@@ -79,14 +80,14 @@
 
 "@jest/schemas@^29.6.3":
   version "29.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  resolved "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz"
   integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
   dependencies:
     "@sinclair/typebox" "^0.27.8"
 
 "@jest/types@^29.6.3":
   version "29.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz"
   integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
   dependencies:
     "@jest/schemas" "^29.6.3"
@@ -98,87 +99,135 @@
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
+  resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz"
   integrity sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==
   dependencies:
     any-observable "^0.3.0"
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
+  resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
 "@testing-library/user-event@^13.1.9":
   version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
+  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz"
   integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@types/cheerio@*":
+  version "0.22.32"
+  resolved "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.32.tgz"
+  integrity sha512-4RrpCp5ufWTLb6/1RCOjazRhUM6DTD79l763det29n8kLmPB7XeN46cxlUf2GsSF+0g6CbWT5nYl8C/Gs15bdg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/enzyme-adapter-react-16@^1.0.6":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.7.tgz#88e94608581c0a1a66f82b5c1ff641a09bcfa22b"
+  integrity sha512-BQLgUf3vbuzi37iCjhXNG/iBmCzuLxlIxhkafO8AJisXxRbGOfbuJi1Stwlwr5oj/6/Ea7mViKG7Wh54n0ULXw==
+  dependencies:
+    "@types/enzyme" "*"
+
+"@types/enzyme@*":
+  version "3.10.14"
+  resolved "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.14.tgz"
+  integrity sha512-JeTG2MNUX1bH2DqccwUe3SuPoLu+kUz5UgR3Tvl9nBdfNj7rBZscytctSjEatd5Ul9GXXGKaQBaxODIgJYVRqA==
+  dependencies:
+    "@types/cheerio" "*"
+    "@types/react" "^16"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
   integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
 
 "@types/istanbul-lib-report@*":
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  resolved "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz"
   integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^3.0.0":
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz"
   integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
   dependencies:
     "@types/istanbul-lib-report" "*"
 
 "@types/node@*":
   version "10.12.27"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.27.tgz#eb3843f15d0ba0986cc7e4d734d2ee8b50709ef8"
+  resolved "https://registry.npmjs.org/@types/node/-/node-10.12.27.tgz"
   integrity sha512-e9wgeY6gaY21on3ve0xAjgBVjGDWq/xUteK0ujsE53bUoxycMkqfnkUgMt6ffZtykZ5X12Mg3T7Pw4TRCObDKg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prop-types@*":
+  version "15.7.8"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz"
+  integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
+
+"@types/react-test-renderer@^16.9.1":
+  version "16.9.8"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.8.tgz#42268fe29cb6519c2bfe057b047be7063aa93564"
+  integrity sha512-5zmgK3rWLQLX8VwcK94KqCnXTmirDFgsJOElNbnvNJ7v6QIg3SBqZgH/b5Z5VVQVCTiXc4ZzETF4H0yq3VwHCQ==
+  dependencies:
+    "@types/react" "^16"
+
+"@types/react@^16":
+  version "16.14.46"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.46.tgz#42ac91aece416176e6b6127cd9ec9e381ea67e16"
+  integrity sha512-Am4pyXMrr6cWWw/TN3oqHtEZl0j+G6Up/O8m65+xF/3ZaUgkv1GAtTPWw4yNRmH0HJXmur6xKCKoMo3rBGynuw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.4"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz"
+  integrity sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==
+
 "@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.4"
-  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz#0ecc1b9259b76598ef01942f547904ce61a6a77d"
+  resolved "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz"
   integrity sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==
 
 "@types/sizzle@^2.3.2":
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
+  resolved "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz"
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
 "@types/yargs-parser@*":
   version "21.0.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz"
   integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
 
 "@types/yargs@^17.0.8":
   version "17.0.26"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.26.tgz#388e5002a8b284ad7b4599ba89920a6d74d8d79a"
+  resolved "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.26.tgz"
   integrity sha512-Y3vDy2X6zw/ZCumcwLpdhM5L7jmyGpmBCTYMHDLqT2IKVMYRRLdv6ZakA+wxhra6Z/3bwhNbNl9bDGXaFU+6rw==
   dependencies:
     "@types/yargs-parser" "*"
 
 acorn-jsx@^5.2.0:
   version "5.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn@^7.1.1:
   version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 aggregate-error@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  resolved "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz"
   integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
   dependencies:
     clean-stack "^2.0.0"
@@ -186,7 +235,7 @@ aggregate-error@^3.0.0:
 
 ajv@^6.10.0, ajv@^6.10.2:
   version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -196,134 +245,134 @@ ajv@^6.10.0, ajv@^6.10.2:
 
 ansi-colors@^4.1.1:
   version "4.1.3"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
 
 ansi-escapes@^3.0.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
 ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   version "4.3.2"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
   integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
   dependencies:
     type-fest "^0.21.3"
 
 ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-styles@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz"
   integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
 
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   dependencies:
     color-convert "^1.9.0"
 
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
 any-observable@^0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
+  resolved "https://registry.npmjs.org/any-observable/-/any-observable-0.3.0.tgz"
   integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
 
 arch@^2.1.2:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
+  resolved "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz"
   integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
 
 argparse@^1.0.7:
   version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
 asn1@~0.2.3:
   version "0.2.6"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
+  resolved "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz"
   integrity sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==
   dependencies:
     safer-buffer "~2.1.0"
 
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  resolved "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
 astral-regex@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
 astral-regex@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async@^3.2.0:
   version "3.2.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz"
   integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
 asynckit@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 at-least-node@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
 aws-sign2@~0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  resolved "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz"
   integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
 
 aws4@^1.8.0:
   version "1.11.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  resolved "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
 balanced-match@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  resolved "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz"
   integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
   dependencies:
     tweetnacl "^0.14.3"
 
 blob-util@2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+  resolved "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz"
   integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
 
 bluebird@^3.7.2:
   version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
@@ -331,41 +380,41 @@ brace-expansion@^1.1.7:
 
 brace@0.11.1:
   version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+  resolved "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz"
   integrity sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==
 
 braces@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
     fill-range "^7.0.1"
 
 bs-logger@0.x:
   version "0.2.6"
-  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz"
   integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
   dependencies:
     fast-json-stable-stringify "2.x"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
-  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
   integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
 
 buffer-from@^1.0.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 cachedir@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
+  resolved "https://registry.npmjs.org/cachedir/-/cachedir-2.3.0.tgz"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 call-bind@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
   integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
   dependencies:
     function-bind "^1.1.1"
@@ -373,17 +422,17 @@ call-bind@^1.0.0:
 
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caseless@~0.12.0:
   version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
 chalk@^1.0.0, chalk@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
   integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
   dependencies:
     ansi-styles "^2.2.1"
@@ -392,9 +441,9 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
+chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   dependencies:
     ansi-styles "^3.2.1"
@@ -403,7 +452,7 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
 
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
@@ -411,53 +460,53 @@ chalk@^4.0.0, chalk@^4.1.0:
 
 chardet@^0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
 check-more-types@^2.24.0:
   version "2.24.0"
-  resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
+  resolved "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
 ci-info@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
 ci-info@^3.2.0:
   version "3.8.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
 clean-stack@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
 cli-cursor@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz"
   integrity sha512-25tABq090YNKkF6JH7lcwO0zFJTRke4Jcq9iX2nr/Sz0Cjjv4gckmwlW6Ty/aoyFd6z3ysR2hMGC2GFugmBo6A==
   dependencies:
     restore-cursor "^1.0.1"
 
 cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz"
   integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
   dependencies:
     restore-cursor "^2.0.0"
 
 cli-cursor@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz"
   integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
   dependencies:
     restore-cursor "^3.1.0"
 
 cli-table3@~0.6.0:
   version "0.6.2"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.2.tgz#aaf5df9d8b5bf12634dc8b3040806a0c07120d2a"
+  resolved "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.2.tgz"
   integrity sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==
   dependencies:
     string-width "^4.2.0"
@@ -466,7 +515,7 @@ cli-table3@~0.6.0:
 
 cli-truncate@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-0.2.1.tgz"
   integrity sha512-f4r4yJnbT++qUPI9NR4XLDLq41gQ+uqnPItWG0F5ZkehuNiTTa3EY0S4AqTSUOeJ7/zU41oWPQSNkW5BqPL9bg==
   dependencies:
     slice-ansi "0.0.4"
@@ -474,7 +523,7 @@ cli-truncate@^0.2.1:
 
 cli-truncate@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz"
   integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
   dependencies:
     slice-ansi "^3.0.0"
@@ -482,78 +531,78 @@ cli-truncate@^2.1.0:
 
 cli-width@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  resolved "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
 code-point-at@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz"
   integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
 
 color-convert@^1.9.0:
   version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   dependencies:
     color-name "1.1.3"
 
 color-convert@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
     color-name "~1.1.4"
 
 color-name@1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
 color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 colorette@^2.0.16:
   version "2.0.19"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.19.tgz"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
 
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
   dependencies:
     delayed-stream "~1.0.0"
 
 commander@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  resolved "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commander@^6.2.0:
   version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
 common-tags@^1.8.0:
   version "1.8.2"
-  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
+  resolved "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz"
   integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
 
 compare-versions@^3.6.0:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62"
+  resolved "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz"
   integrity sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 concat-stream@^1.6.2:
   version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  resolved "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
   dependencies:
     buffer-from "^1.0.0"
@@ -563,17 +612,17 @@ concat-stream@^1.6.2:
 
 core-util-is@1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
   integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
 
 core-util-is@~1.0.0:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
 cosmiconfig@^7.0.0:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
   dependencies:
     "@types/parse-json" "^4.0.0"
@@ -584,7 +633,7 @@ cosmiconfig@^7.0.0:
 
 cross-spawn@^6.0.5:
   version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
   dependencies:
     nice-try "^1.0.4"
@@ -595,16 +644,21 @@ cross-spawn@^6.0.5:
 
 cross-spawn@^7.0.0:
   version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+csstype@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 cypress@^5.0.0:
   version "5.6.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.6.0.tgz#6781755c3ddfd644ce3179fcd7389176c0c82280"
+  resolved "https://registry.npmjs.org/cypress/-/cypress-5.6.0.tgz"
   integrity sha512-cs5vG3E2JLldAc16+5yQxaVRLLqMVya5RlrfPWkC72S5xrlHFdw7ovxPb61s4wYweROKTyH01WQc2PFzwwVvyQ==
   dependencies:
     "@cypress/listr-verbose-renderer" "^0.4.1"
@@ -648,62 +702,62 @@ cypress@^5.0.0:
 
 dashdash@^1.12.0:
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  resolved "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz"
   integrity sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==
   dependencies:
     assert-plus "^1.0.0"
 
 date-fns@^1.27.2:
   version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
 debug@^2.6.9:
   version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
 debug@^3.1.0:
   version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
 
 debug@^4.0.1, debug@^4.1.1, debug@^4.2.0:
   version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
 dedent@^0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
 deep-is@~0.1.3:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 delayed-stream@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
 doctrine@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
   integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
 ecc-jsbn@~0.1.1:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz"
   integrity sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==
   dependencies:
     jsbn "~0.1.0"
@@ -711,48 +765,48 @@ ecc-jsbn@~0.1.1:
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+  resolved "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz"
   integrity sha512-B+ZM+RXvRqQaAmkMlO/oSe5nMUOaUnyfGYCEHoR8wrXsZR2mA0XVibsxV1bvTwxdRWah1PkQqso2EzhILGHtEQ==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"
   integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 end-of-stream@^1.1.0:
   version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
 enquirer@^2.3.6:
   version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
   dependencies:
     ansi-colors "^4.1.1"
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
 eslint-scope@^5.0.0:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
@@ -767,12 +821,12 @@ eslint-utils@^1.4.3, eslint-utils@^2.0.0:
 
 eslint-visitor-keys@^1.1.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint@^6.8.0:
   version "6.8.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz"
   integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -815,7 +869,7 @@ eslint@^6.8.0:
 
 espree@^6.1.2:
   version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  resolved "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz"
   integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
   dependencies:
     acorn "^7.1.1"
@@ -824,46 +878,46 @@ espree@^6.1.2:
 
 esprima@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.0.1:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
   integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
   dependencies:
     estraverse "^5.1.0"
 
 esrecurse@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 esutils@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 eventemitter2@^6.4.2:
   version "6.4.7"
-  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
+  resolved "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
 execa@^4.0.2, execa@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  resolved "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz"
   integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
   dependencies:
     cross-spawn "^7.0.0"
@@ -878,24 +932,24 @@ execa@^4.0.2, execa@^4.1.0:
 
 executable@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
+  resolved "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz"
   integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
   dependencies:
     pify "^2.2.0"
 
 exit-hook@^1.0.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+  resolved "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz"
   integrity sha512-MsG3prOVw1WtLXAZbM3KiYtooKR1LvxHh3VHsVtIy0uiUu8usxgB/94DP2HxtD/661lLdB6yzQ09lGJSQr6nkg==
 
 extend@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 external-editor@^3.0.3:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  resolved "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz"
   integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
   dependencies:
     chardet "^0.7.0"
@@ -904,7 +958,7 @@ external-editor@^3.0.3:
 
 extract-zip@^1.7.0:
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz"
   integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
   dependencies:
     concat-stream "^1.6.2"
@@ -914,39 +968,39 @@ extract-zip@^1.7.0:
 
 extsprintf@1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz"
   integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
 
 extsprintf@^1.2.0:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
+  resolved "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
 fast-deep-equal@^3.1.1:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@~2.0.6:
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fd-slicer@~1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  resolved "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz"
   integrity sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==
   dependencies:
     pend "~1.2.0"
 
 figures@^1.7.0:
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  resolved "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz"
   integrity sha512-UxKlfCRuCBxSXU4C6t9scbDyWZ4VlaFFdojKtzJuSkuOBQ5CNFum+zZXFwHjo+CxBC1t6zlYPgHIgFjL8ggoEQ==
   dependencies:
     escape-string-regexp "^1.0.5"
@@ -954,35 +1008,35 @@ figures@^1.7.0:
 
 figures@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  resolved "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz"
   integrity sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==
   dependencies:
     escape-string-regexp "^1.0.5"
 
 figures@^3.0.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  resolved "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz"
   integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
   dependencies:
     escape-string-regexp "^1.0.5"
 
 file-entry-cache@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz"
   integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
   dependencies:
     flat-cache "^2.0.1"
 
 fill-range@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
   integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
   dependencies:
     to-regex-range "^5.0.1"
 
 find-up@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
     locate-path "^6.0.0"
@@ -990,14 +1044,14 @@ find-up@^5.0.0:
 
 find-versions@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-4.0.0.tgz#3c57e573bf97769b8cb8df16934b627915da4965"
+  resolved "https://registry.npmjs.org/find-versions/-/find-versions-4.0.0.tgz"
   integrity sha512-wgpWy002tA+wgmO27buH/9KzyEOQnKsG/R0yrcjPT9BOFm0zRBVQbZ95nRGXWMywS8YR5knRbpohio0bcJABxQ==
   dependencies:
     semver-regex "^3.1.2"
 
 flat-cache@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz"
   integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
   dependencies:
     flatted "^2.0.0"
@@ -1006,17 +1060,17 @@ flat-cache@^2.0.1:
 
 flatted@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 forever-agent@~0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  resolved "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz"
   integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
 form-data@~2.3.2:
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz"
   integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
   dependencies:
     asynckit "^0.4.0"
@@ -1025,7 +1079,7 @@ form-data@~2.3.2:
 
 fs-extra@^9.0.1:
   version "9.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
   dependencies:
     at-least-node "^1.0.0"
@@ -1035,22 +1089,22 @@ fs-extra@^9.0.1:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 function-bind@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
 get-intrinsic@^1.0.2:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz"
   integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
   dependencies:
     function-bind "^1.1.1"
@@ -1060,40 +1114,40 @@ get-intrinsic@^1.0.2:
 
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
 get-stream@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz"
   integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
   dependencies:
     pump "^3.0.0"
 
 getos@^3.2.1:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
+  resolved "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz"
   integrity sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==
   dependencies:
     async "^3.2.0"
 
 getpass@^0.1.1:
   version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  resolved "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz"
   integrity sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==
   dependencies:
     assert-plus "^1.0.0"
 
 glob-parent@^5.0.0:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
 glob@^7.1.3:
   version "7.2.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
@@ -1105,65 +1159,60 @@ glob@^7.1.3:
 
 global-dirs@^2.0.1:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
+  resolved "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz"
   integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
   dependencies:
     ini "1.3.7"
 
 globals@^12.1.0:
   version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  resolved "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz"
   integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
   dependencies:
     type-fest "^0.8.1"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
   version "4.2.10"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-graceful-fs@^4.2.9:
-  version "4.2.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
-  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
-
 has-ansi@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  resolved "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz"
   integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
   dependencies:
     ansi-regex "^2.0.0"
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
 has-flag@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 has-proto@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz"
   integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
 
 has-symbols@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
 has@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
   dependencies:
     function-bind "^1.1.1"
 
 http-signature@~1.3.6:
   version "1.3.6"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
+  resolved "https://registry.npmjs.org/http-signature/-/http-signature-1.3.6.tgz"
   integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
   dependencies:
     assert-plus "^1.0.0"
@@ -1172,12 +1221,12 @@ http-signature@~1.3.6:
 
 human-signals@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
 husky@^4.2.5:
   version "4.3.8"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d"
+  resolved "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz"
   integrity sha512-LCqqsB0PzJQ/AlCgfrfzRe3e3+NvmefAdKQhRYpxS4u6clblBoDdzzvHi8fmxKRzvMxPY/1WZWzomPZww0Anow==
   dependencies:
     chalk "^4.0.0"
@@ -1193,19 +1242,19 @@ husky@^4.2.5:
 
 iconv-lite@^0.4.24:
   version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
 ignore@^4.0.6:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
@@ -1213,22 +1262,22 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
 indent-string@^3.0.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz"
   integrity sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ==
 
 indent-string@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
   integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
   dependencies:
     once "^1.3.0"
@@ -1236,17 +1285,17 @@ inflight@^1.0.4:
 
 inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 ini@1.3.7:
   version "1.3.7"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  resolved "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz"
   integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
 
 inquirer@^7.0.0:
   version "7.3.3"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  resolved "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz"
   integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
   dependencies:
     ansi-escapes "^4.2.1"
@@ -1265,48 +1314,48 @@ inquirer@^7.0.0:
 
 is-arrayish@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
 is-ci@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz"
   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
     ci-info "^2.0.0"
 
 is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
   integrity sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz"
   integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
 
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
 is-glob@^4.0.0, is-glob@^4.0.1:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-installed-globally@^0.3.2:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  resolved "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz"
   integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
   dependencies:
     global-dirs "^2.0.1"
@@ -1314,79 +1363,84 @@ is-installed-globally@^0.3.2:
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-obj@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+  resolved "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz"
   integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
 
 is-observable@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
+  resolved "https://registry.npmjs.org/is-observable/-/is-observable-1.1.0.tgz"
   integrity sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==
   dependencies:
     symbol-observable "^1.1.0"
 
 is-path-inside@^3.0.1:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-promise@^2.1.0:
   version "2.2.2"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  resolved "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
 is-regexp@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  resolved "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
 is-stream@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz"
   integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
 
 is-stream@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
 is-typedarray@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  resolved "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
   integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
 
 is-unicode-supported@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  resolved "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
 isarray@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
   integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 isstream@~0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
   integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
+jest-dom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jest-dom/-/jest-dom-4.0.0.tgz#94eba3cbc6576e7bd6821867c92d176de28920eb"
+  integrity sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA==
+
 jest-raw-loader@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz#ce9f56d54650f157c4a7d16d224ba5d613bcd626"
+  resolved "https://registry.npmjs.org/jest-raw-loader/-/jest-raw-loader-1.0.1.tgz"
   integrity sha512-g9oaAjeC4/rIJk1Wd3RxVbOfMizowM7LSjEJqa4R9qDX0OjQNABXOhH+GaznUp+DjTGVPi2vPPbQXyX87DOnYg==
 
 jest-util@^29.0.0:
   version "29.7.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz"
   integrity sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==
   dependencies:
     "@jest/types" "^29.6.3"
@@ -1398,12 +1452,12 @@ jest-util@^29.0.0:
 
 js-tokens@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^3.13.1:
   version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
   dependencies:
     argparse "^1.0.7"
@@ -1411,17 +1465,17 @@ js-yaml@^3.13.1:
 
 jsbn@~0.1.0:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema@0.4.0, json-schema@^0.4.0:
@@ -1431,22 +1485,22 @@ json-schema@0.4.0, json-schema@^0.4.0:
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
 json-stringify-safe@~5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
 json5@^2.2.3:
   version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
   dependencies:
     universalify "^2.0.0"
@@ -1455,7 +1509,7 @@ jsonfile@^6.0.1:
 
 jsprim@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
+  resolved "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz"
   integrity sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==
   dependencies:
     assert-plus "1.0.0"
@@ -1465,12 +1519,12 @@ jsprim@^2.0.2:
 
 lazy-ass@^1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
+  resolved "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz"
   integrity sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==
 
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz"
   integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
   dependencies:
     prelude-ls "~1.1.2"
@@ -1478,12 +1532,12 @@ levn@^0.3.0, levn@~0.3.0:
 
 lines-and-columns@^1.1.6:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 lint-staged@^10.2.0:
   version "10.5.4"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.5.4.tgz#cd153b5f0987d2371fc1d2847a409a2fe705b665"
+  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-10.5.4.tgz"
   integrity sha512-EechC3DdFic/TdOPgj/RB3FicqE6932LTHCUm0Y2fsD9KGlLB+RwJl2q1IYBIvEsKzDOgn0D4gll+YxG5RsrKg==
   dependencies:
     chalk "^4.1.0"
@@ -1504,12 +1558,12 @@ lint-staged@^10.2.0:
 
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+  resolved "https://registry.npmjs.org/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz"
   integrity sha512-L26cIFm7/oZeSNVhWB6faeorXhMg4HNlb/dS/7jHhr708jxlXrtrBWo4YUxZQkc6dGoxEAe6J/D3juTRBUzjtA==
 
 listr-update-renderer@^0.5.0:
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
+  resolved "https://registry.npmjs.org/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz"
   integrity sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==
   dependencies:
     chalk "^1.1.3"
@@ -1523,7 +1577,7 @@ listr-update-renderer@^0.5.0:
 
 listr-verbose-renderer@^0.5.0:
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
+  resolved "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz"
   integrity sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==
   dependencies:
     chalk "^2.4.1"
@@ -1533,7 +1587,7 @@ listr-verbose-renderer@^0.5.0:
 
 listr2@^3.2.2:
   version "3.14.0"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
+  resolved "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz"
   integrity sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==
   dependencies:
     cli-truncate "^2.1.0"
@@ -1547,7 +1601,7 @@ listr2@^3.2.2:
 
 listr@^0.14.3:
   version "0.14.3"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
+  resolved "https://registry.npmjs.org/listr/-/listr-0.14.3.tgz"
   integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
   dependencies:
     "@samverschueren/stream-to-observable" "^0.3.0"
@@ -1562,36 +1616,36 @@ listr@^0.14.3:
 
 locate-path@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
   integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
   dependencies:
     p-locate "^5.0.0"
 
 lodash.memoize@4.x:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
 lodash.once@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz"
   integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
 
 lodash@^4.17.14, lodash@^4.17.19:
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz"
   integrity sha512-mmPrW0Fh2fxOzdBbFv4g1m6pR72haFLPJ2G5SJEELf1y+iaQrDG6cWCPjy54RHYbZAt7X+ls690Kw62AdWXBzQ==
   dependencies:
     chalk "^1.0.0"
 
 log-symbols@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz"
   integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
   dependencies:
     chalk "^4.1.0"
@@ -1599,7 +1653,7 @@ log-symbols@^4.0.0:
 
 log-update@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  resolved "https://registry.npmjs.org/log-update/-/log-update-2.3.0.tgz"
   integrity sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==
   dependencies:
     ansi-escapes "^3.0.0"
@@ -1608,7 +1662,7 @@ log-update@^2.3.0:
 
 log-update@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  resolved "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz"
   integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
   dependencies:
     ansi-escapes "^4.3.0"
@@ -1618,24 +1672,24 @@ log-update@^4.0.0:
 
 lru-cache@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
     yallist "^4.0.0"
 
 make-error@1.x:
   version "1.3.6"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
 merge-stream@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 micromatch@^4.0.2:
   version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
     braces "^3.0.2"
@@ -1643,146 +1697,146 @@ micromatch@^4.0.2:
 
 mime-db@1.52.0:
   version "1.52.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
 mime-types@^2.1.12, mime-types@~2.1.19:
   version "2.1.35"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
 mimic-fn@^1.0.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
 mimic-fn@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 minimatch@^3.0.4, minimatch@^3.1.1:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
 mkdirp@^0.5.1, mkdirp@^0.5.4:
   version "0.5.6"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
   dependencies:
     minimist "^1.2.6"
 
 moment@^2.27.0:
   version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
 ms@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
 ms@2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 ms@^2.1.1:
   version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 mutationobserver-shim@^0.3.3:
   version "0.3.7"
-  resolved "https://registry.yarnpkg.com/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz#8bf633b0c0b0291a1107255ed32c13088a8c5bf3"
+  resolved "https://registry.npmjs.org/mutationobserver-shim/-/mutationobserver-shim-0.3.7.tgz"
   integrity sha512-oRIDTyZQU96nAiz2AQyngwx1e89iApl2hN5AOYwyxLUB47UYsU3Wv9lJWqH5y/QdiYkc5HQLi23ZNB3fELdHcQ==
 
 mute-stream@0.0.8:
   version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 nice-try@^1.0.4:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 normalize-path@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 npm-run-path@^4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
 number-is-nan@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
 object-assign@^4.1.0:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-inspect@^1.9.0:
   version "1.12.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz"
   integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
 onetime@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz"
   integrity sha512-GZ+g4jayMqzCRMgB2sol7GiCLjKfS1PINkjmx8spcKce1LiVqcbQreXwqs2YAFXC6R03VIG28ZS31t8M866v6A==
 
 onetime@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz"
   integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
   dependencies:
     mimic-fn "^1.0.0"
 
 onetime@^5.1.0:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
 
 opencollective-postinstall@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+  resolved "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz"
   integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
 
 optionator@^0.8.3:
   version "0.8.3"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz"
   integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
   dependencies:
     deep-is "~0.1.3"
@@ -1794,50 +1848,50 @@ optionator@^0.8.3:
 
 os-tmpdir@~1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
 ospath@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
+  resolved "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz"
   integrity sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==
 
 p-limit@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
   dependencies:
     yocto-queue "^0.1.0"
 
 p-locate@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
   integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
     p-limit "^3.0.2"
 
 p-map@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
 p-map@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz"
   integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
   dependencies:
     aggregate-error "^3.0.0"
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parse-json@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -1847,91 +1901,91 @@ parse-json@^5.0.0:
 
 path-exists@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
 path-key@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz"
   integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
 
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 pend@~1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
 performance-now@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
 picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pify@^2.2.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pkg-dir@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz"
   integrity sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==
   dependencies:
     find-up "^5.0.0"
 
 please-upgrade-node@^3.2.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  resolved "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz"
   integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
   dependencies:
     semver-compare "^1.0.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
 pretty-bytes@^5.4.1:
   version "5.6.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
 progress@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 psl@^1.1.33:
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
 pump@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz"
   integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
   dependencies:
     end-of-stream "^1.1.0"
@@ -1939,12 +1993,12 @@ pump@^3.0.0:
 
 punycode@1.3.2:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz"
   integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 qs@6.10.4:
@@ -1956,27 +2010,27 @@ qs@6.10.4:
 
 querystring@0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  resolved "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
   integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==
 
 querystringify@^2.1.1:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
 
 ramda@~0.26.1:
   version "0.26.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  resolved "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz"
   integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 react-double-scrollbar@^0.0.15:
   version "0.0.15"
-  resolved "https://registry.yarnpkg.com/react-double-scrollbar/-/react-double-scrollbar-0.0.15.tgz#e915ab8cb3b959877075f49436debfdb04288fe4"
+  resolved "https://registry.npmjs.org/react-double-scrollbar/-/react-double-scrollbar-0.0.15.tgz"
   integrity sha512-dLz3/WBIpgFnzFY0Kb4aIYBMT2BWomHuW2DH6/9jXfS6/zxRRBUFQ04My4HIB7Ma7QoRBpcy8NtkPeFgcGBpgg==
 
 readable-stream@^2.2.2:
   version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
   dependencies:
     core-util-is "~1.0.0"
@@ -1989,34 +2043,34 @@ readable-stream@^2.2.2:
 
 regenerator-runtime@^0.13.4:
   version "0.13.9"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
 regexpp@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz"
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
 request-progress@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
+  resolved "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz"
   integrity sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==
   dependencies:
     throttleit "^1.0.0"
 
 requires-port@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
 restore-cursor@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz"
   integrity sha512-reSjH4HuiFlxlaBaFCiS6O76ZGG2ygKoSlCsipKdaZuKSPx/+bt9mULkn4l0asVzbEfQQmXRg6Wp6gv6m0wElw==
   dependencies:
     exit-hook "^1.0.0"
@@ -2024,7 +2078,7 @@ restore-cursor@^1.0.1:
 
 restore-cursor@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz"
   integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
   dependencies:
     onetime "^2.0.0"
@@ -2032,7 +2086,7 @@ restore-cursor@^2.0.0:
 
 restore-cursor@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz"
   integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
   dependencies:
     onetime "^5.1.0"
@@ -2040,65 +2094,65 @@ restore-cursor@^3.1.0:
 
 rfdc@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
 rimraf@2.6.3:
   version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
   dependencies:
     glob "^7.1.3"
 
 rimraf@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
 run-async@^2.4.0:
   version "2.4.1"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 rxjs@^6.3.3, rxjs@^6.6.0:
   version "6.6.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
 rxjs@^7.5.1:
   version "7.5.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.5.6.tgz"
   integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2:
+safe-buffer@^5.0.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 "safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
 semver-compare@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
+  resolved "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz"
   integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
 
 semver-regex@^3.1.2:
   version "3.1.4"
-  resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.4.tgz#13053c0d4aa11d070a2f2872b6b1e3ae1e1971b4"
+  resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.4.tgz"
   integrity sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==
 
 semver@^5.5.0, semver@^6.1.2, semver@^7.5.2, semver@^7.5.3:
@@ -2110,31 +2164,31 @@ semver@^5.5.0, semver@^6.1.2, semver@^7.5.2, semver@^7.5.3:
 
 shebang-command@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
   integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
   dependencies:
     shebang-regex "^1.0.0"
 
 shebang-command@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
   integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
   dependencies:
     shebang-regex "^3.0.0"
 
 shebang-regex@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz"
   integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
 
 shebang-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 side-channel@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
   integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
     call-bind "^1.0.0"
@@ -2143,22 +2197,22 @@ side-channel@^1.0.4:
 
 signal-exit@^3.0.2:
   version "3.0.7"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 slice-ansi@0.0.4:
   version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz"
   integrity sha512-up04hB2hR92PgjpyU3y/eg91yIBILyjVY26NvvciY3EVVPjybkMszMpXQ9QAkcS3I5rtJBDLoTxxg+qvW8c7rw==
 
 slice-ansi@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz"
   integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
   dependencies:
     ansi-styles "^3.2.0"
@@ -2167,7 +2221,7 @@ slice-ansi@^2.1.0:
 
 slice-ansi@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz"
   integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
   dependencies:
     ansi-styles "^4.0.0"
@@ -2176,7 +2230,7 @@ slice-ansi@^3.0.0:
 
 slice-ansi@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
   integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
   dependencies:
     ansi-styles "^4.0.0"
@@ -2185,12 +2239,12 @@ slice-ansi@^4.0.0:
 
 sprintf-js@~1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
 sshpk@^1.14.1:
   version "1.17.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
+  resolved "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz"
   integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
   dependencies:
     asn1 "~0.2.3"
@@ -2205,12 +2259,12 @@ sshpk@^1.14.1:
 
 string-argv@0.3.1:
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz"
   integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
 string-width@^1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz"
   integrity sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==
   dependencies:
     code-point-at "^1.0.0"
@@ -2219,7 +2273,7 @@ string-width@^1.0.1:
 
 string-width@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz"
   integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
@@ -2227,7 +2281,7 @@ string-width@^2.1.1:
 
 string-width@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
   dependencies:
     emoji-regex "^7.0.1"
@@ -2236,7 +2290,7 @@ string-width@^3.0.0:
 
 string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
@@ -2245,14 +2299,14 @@ string-width@^4.1.0, string-width@^4.2.0:
 
 string_decoder@~1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
   integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
   dependencies:
     safe-buffer "~5.1.0"
 
 stringify-object@^3.3.0:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
   dependencies:
     get-own-enumerable-property-symbols "^3.0.0"
@@ -2261,69 +2315,69 @@ stringify-object@^3.3.0:
 
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
   integrity sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
   dependencies:
     ansi-regex "^2.0.0"
 
 strip-ansi@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz"
   integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
   dependencies:
     ansi-regex "^3.0.0"
 
 strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
   dependencies:
     ansi-regex "^4.1.0"
 
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
 strip-final-newline@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
 strip-json-comments@^3.0.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 supports-color@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
   integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
 
 supports-color@^5.3.0:
   version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-color@^7.1.0, supports-color@^7.2.0:
   version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
 symbol-observable@^1.1.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
 table@^5.2.3:
   version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  resolved "https://registry.npmjs.org/table/-/table-5.4.6.tgz"
   integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
   dependencies:
     ajv "^6.10.2"
@@ -2333,43 +2387,43 @@ table@^5.2.3:
 
 text-table@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
 throttleit@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+  resolved "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz"
   integrity sha512-rkTVqu6IjfQ/6+uNuuc3sZek4CEYxTJom3IktzgdSxcZqdARuebbA/f4QmAxMQIxqq9ZLEUkSYqvuk1I6VKq4g==
 
 through@^2.3.6, through@^2.3.8:
   version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
 tmp@^0.0.33:
   version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"
   integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
 tmp@~0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz"
   integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
   dependencies:
     rimraf "^3.0.0"
 
 to-regex-range@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
 tough-cookie@^4.1.3:
   version "4.1.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz"
   integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
   dependencies:
     psl "^1.1.33"
@@ -2379,7 +2433,7 @@ tough-cookie@^4.1.3:
 
 ts-jest@^29.1.0:
   version "29.1.1"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
+  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.1.tgz"
   integrity sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==
   dependencies:
     bs-logger "0.x"
@@ -2393,73 +2447,73 @@ ts-jest@^29.1.0:
 
 tslib@^1.9.0:
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.1.0:
   version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
   integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
   dependencies:
     safe-buffer "^5.0.1"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
-  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
   integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
 
 type-check@~0.3.2:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz"
   integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
   dependencies:
     prelude-ls "~1.1.2"
 
 type-fest@^0.21.3:
   version "0.21.3"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
 type-fest@^0.8.1:
   version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
 typedarray@^0.0.6:
   version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
 universalify@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz"
   integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
 universalify@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
 untildify@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  resolved "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
 uri-js@^4.2.2:
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
 url-parse@^1.5.3:
   version "1.5.10"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz"
   integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
@@ -2467,7 +2521,7 @@ url-parse@^1.5.3:
 
 url@^0.11.0:
   version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  resolved "https://registry.npmjs.org/url/-/url-0.11.0.tgz"
   integrity sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==
   dependencies:
     punycode "1.3.2"
@@ -2475,22 +2529,22 @@ url@^0.11.0:
 
 util-deprecate@~1.0.1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 uuid@^8.3.2:
   version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
 v8-compile-cache@^2.0.3:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
 verror@1.10.0:
   version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  resolved "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz"
   integrity sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==
   dependencies:
     assert-plus "^1.0.0"
@@ -2499,31 +2553,31 @@ verror@1.10.0:
 
 which-pm-runs@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.1.0.tgz#35ccf7b1a0fce87bd8b92a478c9d045785d3bf35"
+  resolved "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.1.0.tgz"
   integrity sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==
 
 which@^1.2.9:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
   dependencies:
     isexe "^2.0.0"
 
 which@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
 word-wrap@~1.2.3:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.4.tgz"
   integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wrap-ansi@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-3.0.1.tgz"
   integrity sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==
   dependencies:
     string-width "^2.1.1"
@@ -2531,7 +2585,7 @@ wrap-ansi@^3.0.1:
 
 wrap-ansi@^6.2.0:
   version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
   integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
   dependencies:
     ansi-styles "^4.0.0"
@@ -2540,7 +2594,7 @@ wrap-ansi@^6.2.0:
 
 wrap-ansi@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
@@ -2549,34 +2603,34 @@ wrap-ansi@^7.0.0:
 
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 write@1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  resolved "https://registry.npmjs.org/write/-/write-1.0.3.tgz"
   integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
   dependencies:
     mkdirp "^0.5.1"
 
 yallist@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yaml@^1.10.0, yaml@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
-  integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
 
 yargs-parser@^21.0.1:
   version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
 yauzl@^2.10.0:
   version "2.10.0"
-  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  resolved "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz"
   integrity sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==
   dependencies:
     buffer-crc32 "~0.2.3"
@@ -2584,5 +2638,5 @@ yauzl@^2.10.0:
 
 yocto-queue@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

From 086a7ef8a75690508d0492e46d1395c417637cc2 Mon Sep 17 00:00:00 2001
From: Paul Sebastian <paul_sebastian@live.com>
Date: Tue, 3 Oct 2023 14:29:30 -0700
Subject: [PATCH 34/40] implementing async query support with polling (#131)

* successfully getting async post requests

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* get query with hardcoded job id working

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* working spark query after constant time wait

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* added polling with some hardcoded values

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* ability to switch between sources implemented

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* implemented basic spinner

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* small pr asks and cancellation implemented

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* fixing small clear state issues

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* reduce route name redundancy

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* remove multiple query implementation for async

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* needed to modify the endpoint

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* default data source being Opensearch and updated snapshots

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

---------

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
---
 common/types/index.ts                         |   2 +
 .../Main/__snapshots__/main.test.tsx.snap     | 262 ++++++++++++--
 public/components/Main/main.tsx               | 204 ++++++++++-
 public/components/PPLPage/PPLPage.tsx         |  81 ++---
 .../QueryResults/AsyncQueryBody.tsx           |  32 ++
 .../components/QueryResults/QueryResults.tsx  | 333 ++++++++++--------
 public/components/SQLPage/SQLPage.tsx         |   9 +-
 server/clusters/sql/sqlPlugin.js              |  38 +-
 server/routes/query.ts                        |  51 +++
 server/services/QueryService.ts               |  58 ++-
 server/services/utils/constants.ts            |   1 +
 server/utils/constants.ts                     |   2 +
 12 files changed, 827 insertions(+), 246 deletions(-)
 create mode 100644 public/components/QueryResults/AsyncQueryBody.tsx

diff --git a/common/types/index.ts b/common/types/index.ts
index 928d7578..c96bb147 100644
--- a/common/types/index.ts
+++ b/common/types/index.ts
@@ -76,3 +76,5 @@ export interface CreateAccelerationForm {
   refreshIntervalOptions: RefreshIntervalType;
   formErrors: FormErrorsType;
 }
+
+export type AsyncQueryLoadingStatus = "SUCCESS" | "FAILED" | "RUNNING" | "SCHEDULED" | "CANCELED"
\ No newline at end of file
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index 2f967b2b..d77c51ba 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -30,11 +30,20 @@ exports[`<Main /> spec click clear button 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -54,6 +63,27 @@ exports[`<Main /> spec click clear button 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -573,11 +603,20 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -597,6 +636,27 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -1116,11 +1176,20 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -1140,6 +1209,27 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -1659,11 +1749,20 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -1683,6 +1782,27 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -2268,11 +2388,20 @@ exports[`<Main /> spec click run button, response fills null and missing values
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -2292,6 +2421,27 @@ exports[`<Main /> spec click run button, response fills null and missing values
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -2876,11 +3026,20 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -2900,6 +3059,27 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
+                  />
+                </svg>
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -3419,11 +3599,20 @@ exports[`<Main /> spec renders the component 1`] = `
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
-              <p
-                class="euiComboBoxPlaceholder"
+              <span
+                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                title="Opensearch"
               >
-                Connection Name
-              </p>
+                <span
+                  class="euiBadge__content"
+                >
+                  <span
+                    class="euiBadge__text"
+                  >
+                    Opensearch
+                  </span>
+                </span>
+              </span>
               <div
                 class="euiComboBox__input"
                 style="font-size: 14px; display: inline-block;"
@@ -3443,6 +3632,23 @@ exports[`<Main /> spec renders the component 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <button
+                aria-label="Clear input"
+                class="euiFormControlLayoutClearButton"
+                data-test-subj="comboBoxClearButton"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index e9f30cbc..5c7defb0 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -33,6 +33,7 @@ import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
 import { SQLPage } from '../SQLPage/SQLPage';
 import { TableView } from '../SQLPage/TableView';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
 
 interface ResponseData {
   ok: boolean;
@@ -101,6 +102,9 @@ interface MainState {
   messages: Array<QueryMessage>;
   isResultFullScreen: boolean;
   selectedDatasource: string;
+  asyncLoading: boolean;
+  asyncLoadingStatus: AsyncQueryLoadingStatus;
+  asyncJobId: string;
 }
 
 const SUCCESS_MESSAGE = 'Success';
@@ -114,7 +118,8 @@ const errorQueryResponse = (queryResultResponseDetail: any) => {
 };
 
 export function getQueryResultsForTable(
-  queryResults: ResponseDetail<string>[]
+  queryResults: ResponseDetail<string>[],
+  jsonParseData: boolean
 ): ResponseDetail<QueryResult>[] {
   return queryResults.map(
     (queryResultResponseDetail: ResponseDetail<string>): ResponseDetail<QueryResult> => {
@@ -124,9 +129,10 @@ export function getQueryResultsForTable(
           errorMessage: errorQueryResponse(queryResultResponseDetail),
         };
       } else {
-        const responseObj = queryResultResponseDetail.data
+        const resultData = jsonParseData
           ? JSON.parse(queryResultResponseDetail.data)
-          : '';
+          : queryResultResponseDetail.data;
+        const responseObj = queryResultResponseDetail.data ? resultData : '';
         let fields: string[] = [];
         let dataRows: DataRow[] = [];
 
@@ -232,7 +238,10 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
-      selectedDatasource: '',
+      selectedDatasource: 'Opensearch',
+      asyncLoading: false,
+      asyncLoadingStatus: 'SUCCESS',
+      asyncJobId: '',
     };
     this.httpClient = this.props.httpClient;
     this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
@@ -353,7 +362,7 @@ export class Main extends React.Component<MainProps, MainState> {
     const queries: string[] = getQueries(queriesString);
     const language = this.state.language;
     if (queries.length > 0) {
-      let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
+      let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
       const responsePromise = Promise.all(
         queries.map((query: string) =>
           this.httpClient
@@ -370,12 +379,11 @@ export class Main extends React.Component<MainProps, MainState> {
             })
         )
       );
-
       Promise.all([responsePromise]).then(([response]) => {
         const results: ResponseDetail<string>[] = response.map((response) =>
           this.processQueryResponse(response as IHttpResponse<ResponseData>)
         );
-        const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results);
+        const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable(results, true);
         this.setState(
           {
             queries: queries,
@@ -396,17 +404,165 @@ export class Main extends React.Component<MainProps, MainState> {
     }
   };
 
+  onRunAsync = (queriesString: string): void => {
+    // switch to an async query here if using any datasource != Opensearch
+
+    // finding regular query here
+    const queries: string[] = getQueries(queriesString);
+    const language = this.state.language;
+    if (queries.length > 0) {
+      let endpoint = '/api/spark_sql_console';
+      const responsePromise = Promise.all(
+        queries.map((query: string) =>
+          this.httpClient
+            .post(endpoint, {
+              body: JSON.stringify({ lang: language, query: query, datasource: 'my_glue' }), // TODO: dynamically datasource when accurate
+            })
+            .catch((error: any) => {
+              this.setState({
+                messages: [
+                  {
+                    text: error.message,
+                    className: 'error-message',
+                  },
+                ],
+              });
+            })
+        )
+      );
+
+      Promise.all([responsePromise]).then(([response]) => {
+        const results: ResponseDetail<string>[] = response.map((response) =>
+          this.processQueryResponse(response as IHttpResponse<ResponseData>)
+        );
+        results.map(
+          (queryResultResponseDetail: ResponseDetail<string>): ResponseDetail<QueryResult> => {
+            if (!queryResultResponseDetail.fulfilled) {
+              return {
+                fulfilled: queryResultResponseDetail.fulfilled,
+                errorMessage: errorQueryResponse(queryResultResponseDetail),
+              };
+            } else {
+              const responseObj = queryResultResponseDetail.data
+                ? queryResultResponseDetail.data
+                : '';
+
+              const queryId: string = _.get(responseObj, 'queryId');
+
+              // clear state from previous results and start async loading
+              this.setState({
+                queryTranslations: [],
+                queryResultsTable: [],
+                queryResults: [],
+                queryResultsCSV: [],
+                queryResultsJSON: [],
+                queryResultsTEXT: [],
+                messages: [],
+                selectedTabId: MESSAGE_TAB_LABEL,
+                selectedTabName: MESSAGE_TAB_LABEL,
+                itemIdToExpandedRowMap: {},
+                asyncLoading: true,
+                asyncLoadingStatus: 'SCHEDULED',
+                asyncJobId: queryId,
+              });
+              this.callGetStartPolling(queries);
+              const interval = setInterval(() => {
+                if (!this.state.asyncLoading) {
+                  clearInterval(interval);
+                }
+                this.callGetStartPolling(queries);
+              }, 2 * 1000);
+            }
+          }
+        );
+      });
+    }
+  };
+
+  callGetStartPolling = async (queries: string[]) => {
+    const nextP = this.httpClient
+      .get('/api/spark_sql_console/job/' + this.state.asyncJobId)
+      .catch((error: any) => {
+        this.setState({
+          messages: [
+            {
+              text: error.message,
+              className: 'error-message',
+            },
+          ],
+        });
+      });
+
+    return await nextP.then((response) => {
+      const result: ResponseDetail<string> = this.processQueryResponse(
+        response as IHttpResponse<ResponseData>
+      );
+      const status = result.data['status'];
+      if (_.isEqual(status, 'SUCCESS')) {
+        const resultTable: ResponseDetail<QueryResult>[] = getQueryResultsForTable([result], false);
+        this.setState({
+          queries: queries,
+          queryResults: [result],
+          queryResultsTable: resultTable,
+          selectedTabId: getDefaultTabId([result]),
+          selectedTabName: getDefaultTabLabel([result], queries[0]),
+          messages: this.getMessage(resultTable),
+          itemIdToExpandedRowMap: {},
+          queryResultsJSON: [],
+          queryResultsCSV: [],
+          queryResultsTEXT: [],
+          searchQuery: '',
+          asyncLoading: false,
+          asyncLoadingStatus: status,
+        });
+      } else if (_.isEqual(status, 'FAILED') || _.isEqual(status, 'CANCELLED')) {
+        this.setState({
+          asyncLoading: false,
+          asyncLoadingStatus: status,
+          messages: [
+            {
+              text: status,
+              className: 'error-message',
+            },
+          ],
+        });
+      } else {
+        this.setState({
+          asyncLoading: true,
+          asyncLoadingStatus: status,
+        });
+      }
+    });
+  };
+
+  cancelAsyncQuery = async () => {
+    Promise.all([
+      this.httpClient
+        .delete('/api/spark_sql_console/job/' + this.state.asyncJobId)
+        .catch((error: any) => {
+          this.setState({
+            messages: [
+              {
+                text: error.message,
+                className: 'error-message',
+              },
+            ],
+          });
+        }),
+    ]);
+  };
+
   onTranslate = (queriesString: string): void => {
     const queries: string[] = getQueries(queriesString);
     const language = this.state.language;
 
     if (queries.length > 0) {
       let endpoint =
-        '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl');
+        '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'translatesql' : 'translateppl');
       const translationPromise = Promise.all(
         queries.map((query: string) =>
           this.httpClient
-            .post(endpoint, { body: JSON.stringify({ query }) })
+            .post(endpoint, { body: JSON.stringify({ query: query }) })
             .catch((error: any) => {
               this.setState({
                 messages: [
@@ -452,7 +608,7 @@ export class Main extends React.Component<MainProps, MainState> {
       Promise.all(
         queries.map((query: string) =>
           this.httpClient
-            .post('../api/sql_console/sqljson', { body: JSON.stringify({ query }) })
+            .post('/api/sql_console/sqljson', { body: JSON.stringify({ query }) })
             .catch((error: any) => {
               this.setState({
                 messages: [
@@ -482,11 +638,11 @@ export class Main extends React.Component<MainProps, MainState> {
   getJdbc = (queries: string[]): void => {
     const language = this.state.language;
     if (queries.length > 0) {
-      let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
+      let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlquery' : 'pplquery');
       Promise.all(
         queries.map((query: string) =>
           this.httpClient
-            .post(endpoint, { body: JSON.stringify({ query }) })
+            .post(endpoint, { body: JSON.stringify({ query: query }) })
             .catch((error: any) => {
               this.setState({
                 messages: [
@@ -516,11 +672,11 @@ export class Main extends React.Component<MainProps, MainState> {
   getCsv = (queries: string[]): void => {
     const language = this.state.language;
     if (queries.length > 0) {
-      let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv');
+      let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqlcsv' : 'pplcsv');
       Promise.all(
         queries.map((query: string) =>
           this.httpClient
-            .post(endpoint, { body: JSON.stringify({ query }) })
+            .post(endpoint, { body: JSON.stringify({ query: query }) })
             .catch((error: any) => {
               this.setState({
                 messages: [
@@ -550,11 +706,11 @@ export class Main extends React.Component<MainProps, MainState> {
   getText = (queries: string[]): void => {
     const language = this.state.language;
     if (queries.length > 0) {
-      let endpoint = '../api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext');
+      let endpoint = '/api/sql_console/' + (_.isEqual(language, 'SQL') ? 'sqltext' : 'ppltext');
       Promise.all(
         queries.map((query: string) =>
           this.httpClient
-            .post(endpoint, { body: JSON.stringify({ query }) })
+            .post(endpoint, { body: JSON.stringify({ query: query }) })
             .catch((error: any) => {
               this.setState({
                 messages: [
@@ -639,13 +795,16 @@ export class Main extends React.Component<MainProps, MainState> {
     if (this.state.language == 'SQL') {
       page = (
         <SQLPage
-          onRun={this.onRun}
+          onRun={
+            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+          }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
           sqlQuery={this.state.sqlQueriesString}
           sqlTranslations={this.state.queryTranslations}
           updateSQLQueries={this.updateSQLQueries}
           selectedDatasource={this.state.selectedDatasource}
+          asyncLoading={this.state.asyncLoading}
         />
       );
       link = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
@@ -653,12 +812,15 @@ export class Main extends React.Component<MainProps, MainState> {
     } else {
       page = (
         <PPLPage
-          onRun={this.onRun}
+          onRun={
+            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+          }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
           pplQuery={this.state.pplQueriesString}
           pplTranslations={this.state.queryTranslations}
           updatePPLQueries={this.updatePPLQueries}
+          asyncLoading={this.state.asyncLoading}
         />
       );
       link = 'https://opensearch.org/docs/latest/observability-plugin/ppl/index/';
@@ -700,6 +862,9 @@ export class Main extends React.Component<MainProps, MainState> {
             getText={this.getText}
             isResultFullScreen={this.state.isResultFullScreen}
             setIsResultFullScreen={this.setIsResultFullScreen}
+            asyncLoading={this.state.asyncLoading}
+            asyncLoadingStatus={this.state.asyncLoadingStatus}
+            cancelAsyncQuery={this.cancelAsyncQuery}
           />
         </div>
       );
@@ -801,6 +966,9 @@ export class Main extends React.Component<MainProps, MainState> {
                   getText={this.getText}
                   isResultFullScreen={this.state.isResultFullScreen}
                   setIsResultFullScreen={this.setIsResultFullScreen}
+                  asyncLoading={this.state.asyncLoading}
+                  asyncLoadingStatus={this.state.asyncLoadingStatus}
+                  cancelAsyncQuery={this.cancelAsyncQuery}
                 />
               </div>
             </EuiPageContentBody>
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index d80143a0..69530e8f 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
+import React from 'react';
 import {
   EuiPanel,
   EuiButton,
@@ -20,23 +19,24 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-} from "@elastic/eui";
+} from '@elastic/eui';
 import { ResponseDetail, TranslateResult } from '../Main/main';
 import _ from 'lodash';
 
 interface PPLPageProps {
-  onRun: (query: string) => void,
-  onTranslate: (query: string) => void,
-  onClear: () => void,
-  updatePPLQueries: (query: string) => void,
-  pplQuery: string,
-  pplTranslations: ResponseDetail<TranslateResult>[]
+  onRun: (query: string) => void;
+  onTranslate: (query: string) => void;
+  onClear: () => void;
+  updatePPLQueries: (query: string) => void;
+  pplQuery: string;
+  pplTranslations: ResponseDetail<TranslateResult>[];
+  asyncLoading: boolean;
 }
 
 interface PPLPageState {
-  pplQuery: string,
-  translation: string,
-  isModalVisible: boolean
+  pplQuery: string;
+  translation: string;
+  isModalVisible: boolean;
 }
 
 export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
@@ -44,19 +44,18 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
     super(props);
     this.state = {
       pplQuery: this.props.pplQuery,
-      translation: "",
-      isModalVisible: false
+      translation: '',
+      isModalVisible: false,
     };
   }
 
   setIsModalVisible(visible: boolean): void {
     this.setState({
-      isModalVisible: visible
-    })
+      isModalVisible: visible,
+    });
   }
 
   render() {
-
     const closeModal = () => this.setIsModalVisible(false);
     const showModal = () => this.setIsModalVisible(true);
 
@@ -65,10 +64,12 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         return this.props.pplTranslations[0].fulfilled;
       }
       return false;
-    }
+    };
 
     const explainContent = pplTranslationsNotEmpty()
-      ? this.props.pplTranslations.map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2)).join("\n")
+      ? this.props.pplTranslations
+          .map((queryTranslation: any) => JSON.stringify(queryTranslation.data, null, 2))
+          .join('\n')
       : 'This query is not explainable.';
 
     let modal;
@@ -82,11 +83,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             </EuiModalHeader>
 
             <EuiModalBody>
-              <EuiCodeBlock
-                language="json"
-                fontSize="m"
-                isCopyable
-              >
+              <EuiCodeBlock language="json" fontSize="m" isCopyable>
                 {explainContent}
               </EuiCodeBlock>
             </EuiModalBody>
@@ -94,7 +91,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             <EuiModalFooter>
               <EuiButton onClick={closeModal} fill>
                 Close
-            </EuiButton>
+              </EuiButton>
             </EuiModalFooter>
           </EuiModal>
         </EuiOverlayMask>
@@ -103,7 +100,9 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
 
     return (
       <EuiPanel className="sql-console-query-editor container-panel" paddingSize="l">
-        <EuiText className="sql-query-panel-header"><h3>Query editor</h3></EuiText>
+        <EuiText className="sql-query-panel-header">
+          <h3>Query editor</h3>
+        </EuiText>
         <EuiSpacer size="s" />
         <EuiCodeEditor
           theme="sql_console"
@@ -113,7 +112,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
           onChange={this.props.updatePPLQueries}
           showPrintMargin={false}
           setOptions={{
-            fontSize: "14px",
+            fontSize: '14px',
             showLineNumbers: false,
             showGutter: false,
           }}
@@ -121,38 +120,36 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">
-          <EuiFlexItem className="sql-editor-buttons"
+          <EuiFlexItem
+            className="sql-editor-buttons"
             grow={false}
             onClick={() => this.props.onRun(this.props.pplQuery)}
           >
-            <EuiButton fill={true} className="sql-editor-button" >
-              Run
+            <EuiButton
+              fill={true}
+              className="sql-editor-button"
+              isLoading={this.props.asyncLoading}
+            >
+              {this.props.asyncLoading ? 'Running' : 'Run'}
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
             onClick={() => {
-              this.props.updatePPLQueries("");
+              this.props.updatePPLQueries('');
               this.props.onClear();
             }}
           >
-            <EuiButton className="sql-editor-button">
-              Clear
-            </EuiButton>
+            <EuiButton className="sql-editor-button">Clear</EuiButton>
           </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            onClick={() =>
-              this.props.onTranslate(this.props.pplQuery)
-            }
-          >
+          <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
             <EuiButton className="sql-editor-button" onClick={showModal}>
               Explain
             </EuiButton>
             {modal}
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPanel >
-    )
+      </EuiPanel>
+    );
   }
 }
diff --git a/public/components/QueryResults/AsyncQueryBody.tsx b/public/components/QueryResults/AsyncQueryBody.tsx
new file mode 100644
index 00000000..eb28ab85
--- /dev/null
+++ b/public/components/QueryResults/AsyncQueryBody.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlexGroup, EuiText, EuiLoadingSpinner, EuiButton } from '@elastic/eui';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
+import React from 'react';
+
+interface AsyncQueryBodyProps {
+  asyncLoading: boolean;
+  asyncLoadingStatus: AsyncQueryLoadingStatus;
+  cancelAsyncQuery: () => void;
+}
+
+export function AsyncQueryBody(props: AsyncQueryBodyProps) {
+  const { asyncLoading, asyncLoadingStatus, cancelAsyncQuery } = props;
+
+  // TODO: implement query failure display
+  // TODO: implement query cancellation
+
+  return (
+    <EuiFlexGroup direction="column" alignItems="center">
+      <EuiLoadingSpinner size="l" />
+      <EuiText>
+        <h3>Query running</h3>
+      </EuiText>
+      <EuiText>status: {asyncLoadingStatus}</EuiText>
+      <EuiButton onClick={cancelAsyncQuery}>Cancel</EuiButton>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
index 5acccac3..1002e378 100644
--- a/public/components/QueryResults/QueryResults.tsx
+++ b/public/components/QueryResults/QueryResults.tsx
@@ -3,18 +3,49 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
+import React from 'react';
 // @ts-ignore
-import { SortableProperties, SortableProperty } from "@elastic/eui/lib/services";
+import { SortableProperties, SortableProperty } from '@elastic/eui/lib/services';
 // @ts-ignore
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs, EuiPopover, EuiContextMenuItem, EuiContextMenuPanel, EuiHorizontalRule, EuiSearchBar, Pager, EuiIcon, EuiText, EuiSpacer, EuiTextAlign, EuiButton, EuiButtonIcon, Comparators } from "@elastic/eui";
-import { QueryResult, QueryMessage, Tab, ResponseDetail, ItemIdToExpandedRowMap, DataRow } from "../Main/main";
-import QueryResultsBody from "./QueryResultsBody";
-import { getQueryIndex, needsScrolling, getSelectedResults } from "../../utils/utils";
-import { DEFAULT_NUM_RECORDS_PER_PAGE, MESSAGE_TAB_LABEL, TAB_CONTAINER_ID } from "../../utils/constants";
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTab,
+  EuiTabs,
+  EuiPopover,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiHorizontalRule,
+  EuiSearchBar,
+  Pager,
+  EuiIcon,
+  EuiText,
+  EuiSpacer,
+  EuiTextAlign,
+  EuiButton,
+  EuiButtonIcon,
+  Comparators,
+} from '@elastic/eui';
+import {
+  QueryResult,
+  QueryMessage,
+  Tab,
+  ResponseDetail,
+  ItemIdToExpandedRowMap,
+  DataRow,
+} from '../Main/main';
+import QueryResultsBody from './QueryResultsBody';
+import { getQueryIndex, needsScrolling, getSelectedResults } from '../../utils/utils';
+import {
+  DEFAULT_NUM_RECORDS_PER_PAGE,
+  MESSAGE_TAB_LABEL,
+  TAB_CONTAINER_ID,
+} from '../../utils/constants';
 import { PanelWrapper } from '../../utils/PanelWrapper';
 import _ from 'lodash';
+import { AsyncQueryBody } from './AsyncQueryBody';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
 
 interface QueryResultsProps {
   language: string;
@@ -39,6 +70,9 @@ interface QueryResultsProps {
   getText: (queries: string[]) => void;
   isResultFullScreen: boolean;
   setIsResultFullScreen: (isFullScreen: boolean) => void;
+  asyncLoading: boolean;
+  asyncLoadingStatus: AsyncQueryLoadingStatus;
+  cancelAsyncQuery: () => void;
 }
 
 interface QueryResultsState {
@@ -60,20 +94,20 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
     this.state = {
       isPopoverOpen: false,
       tabsOverflow: this.props.tabsOverflow ? this.props.tabsOverflow : false,
-      itemsPerPage: DEFAULT_NUM_RECORDS_PER_PAGE
+      itemsPerPage: DEFAULT_NUM_RECORDS_PER_PAGE,
     };
 
     this.sortableColumns = [];
-    this.sortedColumn = "";
+    this.sortedColumn = '';
     this.sortableProperties = new SortableProperties(
       [
         {
-          name: "",
-          getValue: (item: any) => "",
-          isAscending: true
-        }
+          name: '',
+          getValue: (item: any) => '',
+          isAscending: true,
+        },
       ],
-      ""
+      ''
     );
 
     this.tabNames = [];
@@ -81,15 +115,15 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
   }
 
   componentDidUpdate() {
-    const showArrow = needsScrolling("tabsContainer");
+    const showArrow = needsScrolling('tabsContainer');
     if (showArrow !== this.state.tabsOverflow) {
       this.setState({ tabsOverflow: showArrow });
     }
   }
   // Actions for Tabs Button
   showTabsMenu = (): void => {
-    this.setState(prevState => ({
-      isPopoverOpen: !prevState.isPopoverOpen
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
     }));
   };
 
@@ -107,14 +141,14 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
 
   closePopover = (): void => {
     this.setState({
-      isPopoverOpen: false
+      isPopoverOpen: false,
     });
   };
 
   onChangeItemsPerPage = (itemsPerPage: number) => {
     this.pager.setItemsPerPage(itemsPerPage);
     this.setState({
-      itemsPerPage
+      itemsPerPage,
     });
   };
 
@@ -136,21 +170,17 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
       this.sortableColumns.push({
         name: field,
         getValue: (item: DataRow) => item.data[field],
-        isAscending: true
+        isAscending: true,
       });
     });
-    this.sortedColumn =
-      this.sortableColumns.length > 0 ? this.sortableColumns[0].name : "";
-    this.sortableProperties = new SortableProperties(
-      this.sortableColumns,
-      this.sortedColumn
-    );
-  }
+    this.sortedColumn = this.sortableColumns.length > 0 ? this.sortableColumns[0].name : '';
+    this.sortableProperties = new SortableProperties(this.sortableColumns, this.sortedColumn);
+  };
 
   searchItems(dataRows: DataRow[], searchQuery: string): DataRow[] {
     let rows: { [key: string]: any }[] = [];
     for (const row of dataRows) {
-      rows.push(row.data)
+      rows.push(row.data);
     }
     const searchResult = EuiSearchBar.Query.execute(searchQuery, rows);
     let result: DataRow[] = [];
@@ -158,25 +188,25 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
       let dataRow: DataRow = {
         // rowId does not matter here since the data rows would be sorted later
         rowId: 0,
-        data: row
-      }
-      result.push(dataRow)
+        data: row,
+      };
+      result.push(dataRow);
     }
     return result;
   }
 
   onSort = (prop: string, items: DataRow[]): DataRow[] => {
     let sortedRows = this.sortDataRows(items, prop);
-    this.sortableProperties.sortOn(prop)
+    this.sortableProperties.sortOn(prop);
     this.sortedColumn = prop;
     return sortedRows;
-  }
+  };
 
   sortDataRows(dataRows: DataRow[], field: string): DataRow[] {
     const property = this.sortableProperties.getSortablePropertyByName(field);
     const copy = [...dataRows];
     let comparator = (a: DataRow, b: DataRow) => {
-      if (typeof property === "undefined") {
+      if (typeof property === 'undefined') {
         return 0;
       }
       let dataA = a.data;
@@ -190,7 +220,7 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
         }
       }
       return 0;
-    }
+    };
     if (!this.sortableProperties.isAscendingByName(field)) {
       Comparators.reverse(comparator);
     }
@@ -202,20 +232,21 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
       {
         id: MESSAGE_TAB_LABEL,
         name: _.truncate(MESSAGE_TAB_LABEL, { length: 17 }),
-        disabled: false
-      }
+        disabled: false,
+      },
     ];
 
     this.tabNames = [];
     if (this.props.queryResults) {
       for (let i = 0; i < this.props.queryResults.length; i += 1) {
-        const tabName = this.props.language === "SQL" ? getQueryIndex(this.props.queries[i]) : "Events";
+        const tabName =
+          this.props.language === 'SQL' ? getQueryIndex(this.props.queries[i]) : 'Events';
         this.tabNames.push(tabName);
         if (this.props.queryResults[i].fulfilled) {
           tabs.push({
             id: i.toString(),
             name: tabName,
-            disabled: false
+            disabled: false,
           });
         }
       }
@@ -225,7 +256,10 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
 
   render() {
     // Update PAGINATION and SORTABLE columns
-    const queryResultSelected = getSelectedResults(this.props.queryResults, this.props.selectedTabId);
+    const queryResultSelected = getSelectedResults(
+      this.props.queryResults,
+      this.props.selectedTabId
+    );
 
     if (queryResultSelected) {
       const matchingItems: object[] = this.props.searchQuery
@@ -236,12 +270,7 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
     }
 
     // Action button with list of tabs, TODO: disable tabArrowRight and tabArrowLeft when no more scrolling is possible
-    const tabArrowDown = (
-      <EuiIcon
-        onClick={this.showTabsMenu}
-        type={"arrowDown"}
-      />
-    );
+    const tabArrowDown = <EuiIcon onClick={this.showTabsMenu} type={'arrowDown'} />;
     const tabs: Tab[] = this.renderTabs();
     const tabsItems = tabs.map((tab, index) => (
       <EuiContextMenuItem
@@ -284,122 +313,142 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              {this.props.queryResults.length > 0 && (
-                this.props.isResultFullScreen ?
+              {this.props.queryResults.length > 0 &&
+                (this.props.isResultFullScreen ? (
                   <EuiButtonIcon
                     iconType="cross"
                     color="text"
                     id="exit-fullscreen-button"
                     onClick={() => this.props.setIsResultFullScreen(false)}
                   />
-                  :
+                ) : (
                   <EuiButton
                     size="s"
                     iconType="fullScreen"
                     onClick={() => this.props.setIsResultFullScreen(true)}
                   >
                     Full screen view
-                </EuiButton>
-              )}
+                  </EuiButton>
+                ))}
             </EuiFlexItem>
           </EuiFlexGroup>
         </div>
-        {this.props.queryResults.length === 0 ? (
-          // show no results message instead of the results table when there are no results
+        {!this.props.asyncLoading ? (
           <>
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xl" />
-            <EuiText style={{ color: "#3f3f3f" }}>
-              <EuiTextAlign textAlign="center">
-                <h4>No result</h4>
-              </EuiTextAlign>
-              <EuiTextAlign textAlign="center">
-                <p>Enter a query in the query editor above to see results.</p>
-              </EuiTextAlign>
-            </EuiText>
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xl" />
-          </>
-        ) : (
-            <>
-              <EuiFlexGroup
-                style={{
-                  padding: 5
-                }}
-              >
-                {/*TABS*/}
+            {this.props.queryResults.length === 0 ? (
+              // show no results message instead of the results table when there are no results
+              <>
+                <EuiSpacer size="xxl" />
+                <EuiSpacer size="xl" />
+                <EuiText style={{ color: '#3f3f3f' }}>
+                  <EuiTextAlign textAlign="center">
+                    <h4>No result</h4>
+                  </EuiTextAlign>
+                  <EuiTextAlign textAlign="center">
+                    <p>Enter a query in the query editor above to see results.</p>
+                  </EuiTextAlign>
+                </EuiText>
+                <EuiSpacer size="xxl" />
+                <EuiSpacer size="xl" />
+              </>
+            ) : (
+              <>
                 <EuiFlexGroup
-                  className="tabs-container"
-                  alignItems="center"
-                  gutterSize="s"
-                  id="tabsContainer"
+                  style={{
+                    padding: 5,
+                  }}
                 >
-                  <EuiFlexItem
-                    style={{ marginTop: "8px" }}
-                    grow={false}
+                  {/*TABS*/}
+                  <EuiFlexGroup
+                    className="tabs-container"
+                    alignItems="center"
+                    gutterSize="s"
+                    id="tabsContainer"
                   >
-                    <EuiTabs style={{marginLeft: 7, marginBottom: 6}}>{tabsButtons}</EuiTabs>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
+                    <EuiFlexItem style={{ marginTop: '8px' }} grow={false}>
+                      <EuiTabs style={{ marginLeft: 7, marginBottom: 6 }}>{tabsButtons}</EuiTabs>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
 
-                {/*ARROW DOWN*/}
-                {this.state.tabsOverflow && (
-                  <div className="tab-arrow-down-container">
-                    <EuiFlexGroup>
-                      <EuiFlexItem grow={false}>
-                        <EuiPopover
-                          id="singlePanel"
-                          button={tabArrowDown}
-                          data-test-subj="slide-down"
-                          isOpen={this.state.isPopoverOpen}
-                          closePopover={this.closePopover}
-                          panelPaddingSize="none"
-                          anchorPosition="downLeft"
-                        >
-                          <EuiContextMenuPanel items={tabsItems} />
-                        </EuiPopover>
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </div>
-                )}
-              </EuiFlexGroup>
-              <EuiHorizontalRule margin="none" />
+                  {/*ARROW DOWN*/}
+                  {this.state.tabsOverflow && (
+                    <div className="tab-arrow-down-container">
+                      <EuiFlexGroup>
+                        <EuiFlexItem grow={false}>
+                          <EuiPopover
+                            id="singlePanel"
+                            button={tabArrowDown}
+                            data-test-subj="slide-down"
+                            isOpen={this.state.isPopoverOpen}
+                            closePopover={this.closePopover}
+                            panelPaddingSize="none"
+                            anchorPosition="downLeft"
+                          >
+                            <EuiContextMenuPanel items={tabsItems} />
+                          </EuiPopover>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </div>
+                  )}
+                </EuiFlexGroup>
+                <EuiHorizontalRule margin="none" />
 
-              {/*RESULTS TABLE*/}
-              <PanelWrapper shouldWrap={this.props.language === 'SQL' && this.props.selectedTabName !== MESSAGE_TAB_LABEL}>
-                <QueryResultsBody
-                  language={this.props.language}
-                  queries={this.props.queries}
-                  selectedTabId={this.props.selectedTabId}
-                  selectedTabName={this.props.selectedTabName}
-                  tabNames={this.tabNames}
-                  queryResultSelected={queryResultSelected}
-                  queryResultsJSON={this.props.queryResultsJSON}
-                  queryResultsJDBC={this.props.queryResultsJDBC}
-                  queryResultsCSV={this.props.queryResultsCSV}
-                  queryResultsTEXT={this.props.queryResultsTEXT}
-                  messages={this.props.messages}
-                  searchQuery={this.props.searchQuery}
-                  onQueryChange={this.props.onQueryChange}
-                  pager={this.pager}
-                  itemsPerPage={this.state.itemsPerPage}
-                  firstItemIndex={this.pager.getFirstItemIndex()}
-                  lastItemIndex={this.pager.getLastItemIndex()}
-                  onChangeItemsPerPage={this.onChangeItemsPerPage}
-                  onChangePage={this.onChangePage}
-                  sortedColumn={this.sortedColumn}
-                  sortableProperties={this.sortableProperties}
-                  itemIdToExpandedRowMap={this.props.itemIdToExpandedRowMap}
-                  updateExpandedMap={this.props.updateExpandedMap}
-                  getJson={this.props.getJson}
-                  getJdbc={this.props.getJdbc}
-                  getCsv={this.props.getCsv}
-                  getText={this.props.getText}
-                  onSort={this.onSort}
-                />
-              </PanelWrapper>
-            </>
-          )}
+                {/*RESULTS TABLE*/}
+                <PanelWrapper
+                  shouldWrap={
+                    this.props.language === 'SQL' &&
+                    this.props.selectedTabName !== MESSAGE_TAB_LABEL
+                  }
+                >
+                  <QueryResultsBody
+                    language={this.props.language}
+                    queries={this.props.queries}
+                    selectedTabId={this.props.selectedTabId}
+                    selectedTabName={this.props.selectedTabName}
+                    tabNames={this.tabNames}
+                    queryResultSelected={queryResultSelected}
+                    queryResultsJSON={this.props.queryResultsJSON}
+                    queryResultsJDBC={this.props.queryResultsJDBC}
+                    queryResultsCSV={this.props.queryResultsCSV}
+                    queryResultsTEXT={this.props.queryResultsTEXT}
+                    messages={this.props.messages}
+                    searchQuery={this.props.searchQuery}
+                    onQueryChange={this.props.onQueryChange}
+                    pager={this.pager}
+                    itemsPerPage={this.state.itemsPerPage}
+                    firstItemIndex={this.pager.getFirstItemIndex()}
+                    lastItemIndex={this.pager.getLastItemIndex()}
+                    onChangeItemsPerPage={this.onChangeItemsPerPage}
+                    onChangePage={this.onChangePage}
+                    sortedColumn={this.sortedColumn}
+                    sortableProperties={this.sortableProperties}
+                    itemIdToExpandedRowMap={this.props.itemIdToExpandedRowMap}
+                    updateExpandedMap={this.props.updateExpandedMap}
+                    getJson={this.props.getJson}
+                    getJdbc={this.props.getJdbc}
+                    getCsv={this.props.getCsv}
+                    getText={this.props.getText}
+                    onSort={this.onSort}
+                  />
+                </PanelWrapper>
+              </>
+            )}
+          </>
+        ) : (
+          <>
+            <EuiHorizontalRule />
+            <EuiSpacer size="xl" />
+            <EuiFlexGroup alignItems="center">
+              <AsyncQueryBody
+                asyncLoading={this.props.asyncLoading}
+                asyncLoadingStatus={this.props.asyncLoadingStatus}
+                cancelAsyncQuery={this.props.cancelAsyncQuery}
+              />
+            </EuiFlexGroup>
+            <EuiSpacer size="xxl" />
+            <EuiSpacer size="m" />
+          </>
+        )}
       </EuiPanel>
     );
   }
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 0cc0bac4..b0f1eb5c 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -33,6 +33,7 @@ interface SQLPageProps {
   sqlQuery: string;
   sqlTranslations: ResponseDetail<TranslateResult>[];
   selectedDatasource: string;
+  asyncLoading: boolean;
 }
 
 interface SQLPageState {
@@ -142,8 +143,12 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
             <EuiFlexItem>
               <EuiFlexGroup className="action-container" gutterSize="m">
                 <EuiFlexItem grow={false} onClick={() => this.props.onRun(this.props.sqlQuery)}>
-                  <EuiButton fill={true} className="sql-editor-button">
-                    Run
+                  <EuiButton
+                    fill={true}
+                    className="sql-editor-button"
+                    isLoading={this.props.asyncLoading}
+                  >
+                    {this.props.asyncLoading ? 'Running' : 'Run'}
                   </EuiButton>
                 </EuiFlexItem>
                 <EuiFlexItem
diff --git a/server/clusters/sql/sqlPlugin.js b/server/clusters/sql/sqlPlugin.js
index df4b098b..3f0b210d 100644
--- a/server/clusters/sql/sqlPlugin.js
+++ b/server/clusters/sql/sqlPlugin.js
@@ -4,7 +4,7 @@
  */
 
 
-import { SQL_TRANSLATE_ROUTE, SQL_QUERY_ROUTE, PPL_QUERY_ROUTE, PPL_TRANSLATE_ROUTE, FORMAT_CSV, FROMAT_JDBC, FORMAT_JSON, FORMAT_TEXT } from '../../services/utils/constants';
+import { SQL_TRANSLATE_ROUTE, SQL_QUERY_ROUTE, PPL_QUERY_ROUTE, PPL_TRANSLATE_ROUTE, FORMAT_CSV, FROMAT_JDBC, FORMAT_JSON, FORMAT_TEXT, SPARK_SQL_QUERY_ROUTE } from '../../services/utils/constants';
 
 export default function sqlPlugin(Client, config, components) {
   const ca = components.clientAction.factory;
@@ -91,4 +91,40 @@ export default function sqlPlugin(Client, config, components) {
     needBody: true,
     method: 'POST',
   });
+
+  sql.sparkSqlQuery = ca({
+    url: {
+      fmt: `${SPARK_SQL_QUERY_ROUTE}`,
+    },
+    needBody: true,
+    method: 'POST',
+  });
+
+  sql.sparkSqlGetQuery = ca({
+    url: {
+      fmt: `${SPARK_SQL_QUERY_ROUTE}/<%=jobId%>`,
+      req: {
+        jobId: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    needBody: true,
+    method: 'GET',
+  });
+
+  sql.asyncDeleteQuery = ca({
+    url: {
+      fmt: `${SPARK_SQL_QUERY_ROUTE}/<%=jobId%>`,
+      req: {
+        jobId: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    needBody: true,
+    method: 'DELETE',
+  });
 }
diff --git a/server/routes/query.ts b/server/routes/query.ts
index 02526bb5..a4b0b376 100644
--- a/server/routes/query.ts
+++ b/server/routes/query.ts
@@ -16,6 +16,8 @@ import {
   ROUTE_PATH_PPL_CSV,
   ROUTE_PATH_PPL_JSON,
   ROUTE_PATH_PPL_TEXT,
+  ROUTE_PATH_SPARK_SQL_QUERY,
+  ROUTE_PATH_SPARK_SQL_JOB_QUERY,
 } from '../utils/constants';
 
 export default function query(server: IRouter, service: QueryService) {
@@ -138,4 +140,53 @@ export default function query(server: IRouter, service: QueryService) {
       });
     }
   );
+
+  server.post(
+    {
+      path: ROUTE_PATH_SPARK_SQL_QUERY,
+      validate: {
+        body: schema.any(),
+      },
+    },
+    async (context, request, response): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describeSQLAsyncQuery(request);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  )
+
+  server.get(
+    {
+      path: ROUTE_PATH_SPARK_SQL_JOB_QUERY + "/{id}",
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describeSQLAsyncGetQuery(request, request.params.id);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  )
+
+  server.delete(
+    {
+      path: ROUTE_PATH_SPARK_SQL_JOB_QUERY + "/{id}",
+      validate: {
+        params: schema.object({
+          id: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describeAsyncDeleteQuery(request, request.params.id);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  )
 }
diff --git a/server/services/QueryService.ts b/server/services/QueryService.ts
index 33425766..9aa927ce 100644
--- a/server/services/QueryService.ts
+++ b/server/services/QueryService.ts
@@ -14,13 +14,10 @@ export default class QueryService {
     this.client = client;
   }
 
-  describeQueryInternal = async (request: any, format: string, responseFormat: string) => {
+  describeQueryPostInternal = async (request: any, format: string, responseFormat: string, body: any) => {
     try {
-      const queryRequest = {
-        query: request.body.query,
-      };
       const params = {
-        body: JSON.stringify(queryRequest),
+        body: JSON.stringify(body),
       };
 
       const queryResponse = await this.client.asScoped(request).callAsCurrentUser(format, params);
@@ -42,35 +39,70 @@ export default class QueryService {
     }
   };
 
+  describeQueryJobIdInternal = async (request: any, format: string, jobId: string, responseFormat: string) => {
+    try {
+      const queryResponse = await this.client.asScoped(request).callAsCurrentUser(format, {
+        jobId: jobId,
+      });
+      return {
+        data: {
+          ok: true,
+          resp: _.isEqual(responseFormat, 'json') ? JSON.stringify(queryResponse) : queryResponse,
+        },
+      };
+    } catch (err) {
+      console.log(err);
+      return {
+        data: {
+          ok: false,
+          resp: err.message,
+          body: err.body
+        },
+      };
+    }
+  };
+
   describeSQLQuery = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.sqlQuery', 'json');
+    return this.describeQueryPostInternal(request, 'sql.sqlQuery', 'json', request.body);
   };
 
   describePPLQuery = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.pplQuery', 'json');
+    return this.describeQueryPostInternal(request, 'sql.pplQuery', 'json', request.body);
   };
 
   describeSQLCsv = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.sqlCsv', null);
+    return this.describeQueryPostInternal(request, 'sql.sqlCsv', null, request.body);
   };
 
   describePPLCsv = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.pplCsv', null);
+    return this.describeQueryPostInternal(request, 'sql.pplCsv', null, request.body);
   };
 
   describeSQLJson = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.sqlJson', 'json');
+    return this.describeQueryPostInternal(request, 'sql.sqlJson', 'json', request.body);
   };
 
   describePPLJson = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.pplJson', 'json');
+    return this.describeQueryPostInternal(request, 'sql.pplJson', 'json', request.body);
   };
 
   describeSQLText = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.sqlText', null);
+    return this.describeQueryPostInternal(request, 'sql.sqlText', null, request.body);
   };
 
   describePPLText = async (request: any) => {
-    return this.describeQueryInternal(request, 'sql.pplText', null);
+    return this.describeQueryPostInternal(request, 'sql.pplText', null, request.body);
+  };
+
+  describeSQLAsyncQuery = async (request: any) => {
+    return this.describeQueryPostInternal(request, 'sql.sparkSqlQuery', null, request.body);
+  };
+
+  describeSQLAsyncGetQuery = async (request: any, jobId: string) => {
+    return this.describeQueryJobIdInternal(request, 'sql.sparkSqlGetQuery', jobId, null);
+  };
+
+  describeAsyncDeleteQuery = async (request: any, jobId: string) => {
+    return this.describeQueryJobIdInternal(request, 'sql.asyncDeleteQuery', jobId, null);
   };
 }
diff --git a/server/services/utils/constants.ts b/server/services/utils/constants.ts
index 043d84b5..2d103254 100644
--- a/server/services/utils/constants.ts
+++ b/server/services/utils/constants.ts
@@ -13,6 +13,7 @@ export const PPL_QUERY_ROUTE = `/_plugins/_ppl`;
 export const FORMAT_CSV = `format=csv`;
 export const FORMAT_JSON = `format=json`;
 export const FORMAT_TEXT = `format=raw`;
+export const SPARK_SQL_QUERY_ROUTE = `/_plugins/_async_query`;
 
 export const DEFAULT_HEADERS = {
   'Content-Type': 'application/json',
diff --git a/server/utils/constants.ts b/server/utils/constants.ts
index fab457eb..da6b6522 100644
--- a/server/utils/constants.ts
+++ b/server/utils/constants.ts
@@ -13,3 +13,5 @@ export const ROUTE_PATH_SQL_JSON = '/api/sql_console/sqljson';
 export const ROUTE_PATH_PPL_JSON = '/api/sql_console/ppljson';
 export const ROUTE_PATH_SQL_TEXT = '/api/sql_console/sqltext';
 export const ROUTE_PATH_PPL_TEXT = '/api/sql_console/ppltext';
+export const ROUTE_PATH_SPARK_SQL_QUERY = '/api/spark_sql_console';
+export const ROUTE_PATH_SPARK_SQL_JOB_QUERY = '/api/spark_sql_console/job';
\ No newline at end of file

From e1c28e9be111d14c07b6296e9cf58a9d07ea9f63 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Tue, 3 Oct 2023 19:11:09 -0700
Subject: [PATCH 35/40] =?UTF-8?q?added=20the=20skipping=20index=20queries,?=
 =?UTF-8?q?=20covering=20index=20queries,updates=20the=20=E2=80=A6=20(#134?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added the skipping index queries, covering index queries,updates the data picker

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* added the skipping index queries, covering index queries,updates the data picker

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* reverted updates to yarn

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated tests, snapshots

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

---------

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 .../Main/__snapshots__/main.test.tsx.snap     | 268 +++---------------
 public/components/Main/main.test.tsx          |  54 ++--
 public/components/Main/main.tsx               |  39 +--
 public/components/SQLPage/DataSelect.tsx      |  76 +++++
 public/components/SQLPage/TableView.tsx       | 241 ++++++++++------
 public/components/SQLPage/utils.tsx           |  44 +++
 server/clusters/sql/sqlPlugin.js              |  10 +-
 server/routes/query.ts                        |  30 +-
 server/services/QueryService.ts               |  30 +-
 server/services/utils/constants.ts            |   2 +-
 server/utils/constants.ts                     |   3 +-
 test/mocks/mockData.ts                        |  11 +-
 yarn.lock                                     |   2 +-
 13 files changed, 419 insertions(+), 391 deletions(-)
 create mode 100644 public/components/SQLPage/DataSelect.tsx
 create mode 100644 public/components/SQLPage/utils.tsx

diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index d77c51ba..8b0d7301 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -26,23 +26,14 @@ exports[`<Main /> spec click clear button 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -63,27 +54,6 @@ exports[`<Main /> spec click clear button 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -599,23 +569,14 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -636,27 +597,6 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -1172,23 +1112,14 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -1209,27 +1140,6 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -1745,23 +1655,14 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -1782,27 +1683,6 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -2031,7 +1911,9 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                     <span
                       class="euiTreeView__nodeLabel"
                     >
-                      2
+                      <div>
+                        2
+                      </div>
                     </span>
                   </button>
                   <div
@@ -2069,7 +1951,9 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                     <span
                       class="euiTreeView__nodeLabel"
                     >
-                      2
+                      <div>
+                        2
+                      </div>
                     </span>
                   </button>
                   <div
@@ -2384,23 +2268,14 @@ exports[`<Main /> spec click run button, response fills null and missing values
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -2421,27 +2296,6 @@ exports[`<Main /> spec click run button, response fills null and missing values
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -2669,7 +2523,9 @@ exports[`<Main /> spec click run button, response fills null and missing values
                     </span>
                     <span
                       class="euiTreeView__nodeLabel"
-                    />
+                    >
+                      <div />
+                    </span>
                   </button>
                   <div
                     id="some_html_id"
@@ -2705,7 +2561,9 @@ exports[`<Main /> spec click run button, response fills null and missing values
                     </span>
                     <span
                       class="euiTreeView__nodeLabel"
-                    />
+                    >
+                      <div />
+                    </span>
                   </button>
                   <div
                     id="some_html_id"
@@ -3022,23 +2880,14 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -3059,27 +2908,6 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                  />
-                </svg>
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -3595,23 +3423,14 @@ exports[`<Main /> spec renders the component 1`] = `
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
               <span
-                class="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                title="Opensearch"
+                class="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                <span
-                  class="euiBadge__content"
-                >
-                  <span
-                    class="euiBadge__text"
-                  >
-                    Opensearch
-                  </span>
-                </span>
+                OpenSearch
               </span>
               <div
                 class="euiComboBox__input"
@@ -3632,23 +3451,6 @@ exports[`<Main /> spec renders the component 1`] = `
             <div
               class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <button
-                aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
-                data-test-subj="comboBoxClearButton"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                  focusable="false"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-              </button>
               <button
                 aria-label="Open list of options"
                 class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
@@ -3859,7 +3661,9 @@ exports[`<Main /> spec renders the component 1`] = `
                     <span
                       class="euiTreeView__nodeLabel"
                     >
-                      .kibana_1
+                      <div>
+                        .kibana_1
+                      </div>
                     </span>
                   </button>
                   <div
diff --git a/public/components/Main/main.test.tsx b/public/components/Main/main.test.tsx
index 5a3c2d48..c80508aa 100644
--- a/public/components/Main/main.test.tsx
+++ b/public/components/Main/main.test.tsx
@@ -3,40 +3,35 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
-import "@testing-library/jest-dom/extend-expect";
-import { render, fireEvent } from "@testing-library/react";
-import { httpClientMock } from "../../../test/mocks";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { httpClientMock } from '../../../test/mocks';
 import {
-  mockQueryResultJDBCResponse,
+  mockDatasourcesQuery,
+  mockHttpQuery,
   mockNotOkQueryResultResponse,
+  mockQueryResultJDBCResponse,
   mockQueryTranslationResponse,
   mockResultWithNull,
-  mockHttpQuery
-} from "../../../test/mocks/mockData";
-import Main from "./main";
+} from '../../../test/mocks/mockData';
+import Main from './main';
 
 const setBreadcrumbsMock = jest.fn();
 
-describe("<Main /> spec", () => {
-
-  it("renders the component", async () => {
-    
+describe('<Main /> spec', () => {
+  it('renders the component', async () => {
     const client = httpClientMock;
-    client.post = jest.fn().mockResolvedValue(mockHttpQuery)
-    
+    client.post = jest.fn().mockResolvedValue(mockHttpQuery);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
     const asyncTest = () => {
-      render(
-        <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
-      );
+      render(<Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />);
     };
     await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-
-  it("click run button, and response is ok", async () => {
+  it('click run button, and response is ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryResultJDBCResponse);
 
@@ -51,9 +46,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click run button, response fills null and missing values", async () => {
+  it('click run button, response fills null and missing values', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockResultWithNull);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -64,11 +60,12 @@ describe("<Main /> spec", () => {
     };
     await asyncTest();
     expect(document.body.children[0]).toMatchSnapshot();
-  })
+  });
 
-  it("click run button, and response causes an error", async () => {
+  it('click run button, and response causes an error', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockRejectedValue('err');
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -81,9 +78,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click run button, and response is not ok", async () => {
+  it('click run button, and response is not ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockNotOkQueryResultResponse);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
@@ -96,9 +94,11 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click translation button, and response is ok", async () => {
+  it('click translation button, and response is ok', async () => {
     const client = httpClientMock;
     client.post = jest.fn().mockResolvedValue(mockQueryTranslationResponse);
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
@@ -110,8 +110,10 @@ describe("<Main /> spec", () => {
     expect(document.body.children[0]).toMatchSnapshot();
   });
 
-  it("click clear button", async () => {
+  it('click clear button', async () => {
     const client = httpClientMock;
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+
     const { getByText } = await render(
       <Main httpClient={client} setBreadcrumbs={setBreadcrumbsMock} />
     );
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 5c7defb0..f79c42db 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiButton,
-  EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPage,
@@ -14,12 +14,13 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText,
+  EuiText
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
 import React from 'react';
 import { ChromeBreadcrumb, CoreStart } from '../../../../../src/core/public';
+import { AsyncQueryLoadingStatus } from '../../../common/types';
 import { MESSAGE_TAB_LABEL } from '../../utils/constants';
 import {
   Tree,
@@ -31,9 +32,9 @@ import {
 import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
+import { DataSelect } from '../SQLPage/DataSelect';
 import { SQLPage } from '../SQLPage/SQLPage';
 import { TableView } from '../SQLPage/TableView';
-import { AsyncQueryLoadingStatus } from '../../../common/types';
 
 interface ResponseData {
   ok: boolean;
@@ -101,7 +102,7 @@ interface MainState {
   itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
   messages: Array<QueryMessage>;
   isResultFullScreen: boolean;
-  selectedDatasource: string;
+  selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
   asyncLoadingStatus: AsyncQueryLoadingStatus;
   asyncJobId: string;
@@ -238,7 +239,7 @@ export class Main extends React.Component<MainProps, MainState> {
       itemIdToExpandedRowMap: {},
       messages: [],
       isResultFullScreen: false,
-      selectedDatasource: 'Opensearch',
+      selectedDatasource: [{ label: 'OpenSearch' }],
       asyncLoading: false,
       asyncLoadingStatus: 'SUCCESS',
       asyncJobId: '',
@@ -416,7 +417,7 @@ export class Main extends React.Component<MainProps, MainState> {
         queries.map((query: string) =>
           this.httpClient
             .post(endpoint, {
-              body: JSON.stringify({ lang: language, query: query, datasource: 'my_glue' }), // TODO: dynamically datasource when accurate
+              body: JSON.stringify({ lang: language, query: query, datasource: this.state.selectedDatasource[0].label}), // TODO: dynamically datasource when accurate
             })
             .catch((error: any) => {
               this.setState({
@@ -781,9 +782,9 @@ export class Main extends React.Component<MainProps, MainState> {
     });
   }
 
-  handleComboOptionChange = (selectedOption: string) => {
+  handleDataSelect = (selectedItems: []) => {
     this.setState({
-      selectedDatasource: selectedOption,
+      selectedDatasource: selectedItems,
     });
   };
 
@@ -796,7 +797,7 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <SQLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -813,7 +814,7 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <PPLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource, 'Opensearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -875,21 +876,7 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
-            <EuiComboBox
-              singleSelection={true}
-              placeholder="Connection Name"
-              options={[
-                { label: 'S3', value: 'S3' },
-                { label: 'Opensearch', value: 'Opensearch' },
-              ]}
-              selectedOptions={
-                this.state.selectedDatasource ? [{ label: this.state.selectedDatasource }] : []
-              }
-              onChange={(selectedOptions) => {
-                const selectedValue = selectedOptions[0] ? selectedOptions[0].value : '';
-                this.handleComboOptionChange(selectedValue);
-              }}
-            />
+            <DataSelect http={this.httpClient} onSelect={this.handleDataSelect} />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -915,7 +902,7 @@ export class Main extends React.Component<MainProps, MainState> {
                     <EuiSpacer />
                     <TableView
                       http={this.httpClient}
-                      dataConnection={this.state.selectedDatasource}
+                      selectedItems={this.state.selectedDatasource}
                     />
                     <EuiSpacer />
                   </EuiFlexItem>
diff --git a/public/components/SQLPage/DataSelect.tsx b/public/components/SQLPage/DataSelect.tsx
new file mode 100644
index 00000000..bc63607a
--- /dev/null
+++ b/public/components/SQLPage/DataSelect.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../src/core/public';
+
+interface CustomView {
+  http: CoreStart['http'];
+  onSelect: (selectedItems: []) => void;
+}
+
+export const DataSelect = ({ http, onSelect }: CustomView) => {
+  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([{ label: 'OpenSearch' }]);
+  const [options, setOptions] = useState<any[]>([]);
+
+  const datasources = () => {
+    http
+      .get(`/api/get_datasources`)
+      .then((res) => {
+        const data = res.data.resp;
+
+        const connectorGroups = {};
+
+        data.forEach((item) => {
+          const connector = item.connector;
+          const name = item.name;
+
+          if (connector === 'S3GLUE') {
+            if (!connectorGroups[connector]) {
+              connectorGroups[connector] = [];
+            }
+
+            connectorGroups[connector].push(name);
+          }
+        });
+        options.push({ label: 'OpenSearch' });
+        for (const connector in connectorGroups) {
+          if (connectorGroups.hasOwnProperty(connector)) {
+            const connectorNames = connectorGroups[connector];
+
+            options.push({
+              label: connector,
+              options: connectorNames.map((name) => ({ label: name })),
+            });
+          }
+        }
+
+        setOptions(options);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  useEffect(() => {
+    datasources();
+  }, []);
+
+  const handleSelectionChange = (selectedItems: any[]) => {
+    setSelectedOptions(selectedItems);
+    onSelect(selectedItems);
+  };
+
+  return (
+    <EuiComboBox
+      singleSelection={{ asPlainText: true }}
+      isClearable={false}
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={(selectedItems) => handleSelectionChange(selectedItems)}
+    />
+  );
+};
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
index 328a4330..3f168ccd 100644
--- a/public/components/SQLPage/TableView.tsx
+++ b/public/components/SQLPage/TableView.tsx
@@ -3,106 +3,161 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React, { useState, useEffect } from "react";
-import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from "@elastic/eui";
+import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
 import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
-import { ON_LOAD_QUERY } from "../../../common/constants";
+import { ON_LOAD_QUERY } from '../../../common/constants';
+import { getJobId, pollQueryStatus } from './utils';
 
 interface CustomView {
-    http: CoreStart['http'],
-    dataConnection: string
+  http: CoreStart['http'];
+  selectedItems: any[];
 }
 
-export const TableView = ({ http, dataConnection }: CustomView) => {
-    const [tablenames, setTablenames] = useState<string[]>([]);
-    const [selectedNode, setSelectedNode] = useState<string | null>(null);
-    const [childData, setChildData] = useState<string[]>([]);
-    const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
-    const [indexData, setIndexedData] = useState<string[]>([]);
-
-    const getSidebarContent = () => {
-        const query = { query: ON_LOAD_QUERY }
-        http
-            .post(`/api/sql_console/sqlquery`, {
-                body: JSON.stringify(query),
-            })
-            .then((res) => {
-                const responseObj = res.data.resp
-                    ? JSON.parse(res.data.resp)
-                    : '';
-                const datarows: any[][] = _.get(responseObj, 'datarows');
-                const fields = datarows.map((data) => {
-                    return data[2]
-                })
-                setTablenames(fields)
-            })
-            .catch((err) => {
-                console.error(err);
-            });
+export const TableView = ({ http, selectedItems }: CustomView) => {
+  const [tablenames, setTablenames] = useState<string[]>([]);
+  const [selectedNode, setSelectedNode] = useState<string | null>(null);
+  const [childData, setChildData] = useState<string[]>([]);
+  const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
+  const [indexData, setIndexedData] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [indiciesData, setIndiciesData] = useState<string []>([]);
+
+  const get_async_query_results = (id, http, callback) => {
+    pollQueryStatus(id, http, callback);
+  };
+
+  const getSidebarContent = () => {
+    if (selectedItems[0].label == 'OpenSearch') {
+      setTablenames([]);
+      const query = { query: ON_LOAD_QUERY };
+      http
+        .post(`/api/sql_console/sqlquery`, {
+          body: JSON.stringify(query),
+        })
+        .then((res) => {
+          const responseObj = res.data.resp ? JSON.parse(res.data.resp) : '';
+          const datarows: any[][] = _.get(responseObj, 'datarows');
+          const fields = datarows.map((data) => {
+            return data[2];
+          });
+          setTablenames(fields);
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    } else {
+      setTablenames([]);
+      const query = {
+        lang: 'sql',
+        query: `SHOW SCHEMAS IN ${selectedItems[0]['label']}`,
+        datasource: selectedItems[0]['label'],
+      };
+      getJobId(query, http, (id) => {
+        get_async_query_results(id, http, (data) => {
+          setTablenames(data);
+        });
+      });
+    }
+  };
+
+  useEffect(() => {
+    getSidebarContent();
+  }, [selectedItems[0]['label']]);
+
+  const handleNodeClick = (nodeLabel: string) => {
+    setSelectedNode(nodeLabel);
+    const query = {
+      lang: 'sql',
+      query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`,
+      datasource: selectedItems[0]['label'],
     };
-
-    useEffect(() => {
-        
-        getSidebarContent();
-    }, []); 
-
-    const handleNodeClick = (nodeLabel: string) => {
-
-        //         // will update after new query
-
-        const newData = ["Child 1", "Child 2", "Child 3"]; 
-        setChildData(newData);
-        setSelectedNode(nodeLabel);
+    getJobId(query, http, (id) => {
+      get_async_query_results(id, http, (data) => {
+        data = data.map((subArray) => subArray[1]);
+        setChildData(data);
+      });
+    });
+  };
+
+  const callCoverQuery = (nodeLabel1: string) => {
+    const coverQuery = {
+      lang: 'sql',
+      query: `SHOW INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`,
+      datasource: selectedItems[0]['label'],
     };
-
-    const handleChildClick = (nodeLabel1: string) => {
-
-        // will update after new query
-
-        const newData1 = ["Child 4", "Child 5", "Child 6"]; 
-        setIndexedData(newData1);
-        setSelectedChildNode(nodeLabel1);
+    getJobId(coverQuery, http, (id) => {
+      get_async_query_results(id, http, (data) => {
+        data = [].concat(...data)
+        indiciesData.push(data)
+        setIndexedData(indiciesData);
+      });
+    });
+  };
+  const handleChildClick = (nodeLabel1: string) => {
+    setSelectedChildNode(nodeLabel1);
+    const skipQuery = {
+      lang: 'sql',
+      query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`,
+      datasource: selectedItems[0]['label'],
     };
-
-
-    const treeData = tablenames.map((element, index) => ({
-        label: element,
-        icon: <EuiIcon type='database' size="m" />,
-        id: 'element_' + index,
-        callback: () => handleNodeClick(element),
-        isSelectable: true, 
-        isExpanded: true,
-        children: dataConnection === 'S3' && selectedNode === element ? childData.map(child => ({
-            label: child,
-            id: `${element}_${child}`,
-            icon: <EuiIcon type='tableDensityCompact' size="s" />,
-            callback: () => handleChildClick(child),
-            sSelectable: true, 
+    getJobId(skipQuery, http, (id) => {
+      get_async_query_results(id, http, (data) => {
+        if (data.length > 0) {
+            indiciesData.push('skip_index');
+          callCoverQuery(nodeLabel1);
+        }
+      });
+    });
+  };
+
+  const treeData = tablenames.map((database, index) => ({
+    label: <div>{database}</div>,
+    icon: <EuiIcon type="database" size="m" />,
+    id: 'element_' + index,
+    callback: () => {
+      setChildData([]);
+      setIsLoading(true);
+      handleNodeClick(database);
+    },
+    isSelectable: true,
+    isExpanded: true,
+    children:
+      selectedNode === database
+        ? childData.map((table) => ({
+            label: <div>{table}</div>,
+            id: `${database}_${table}`,
+            icon: <EuiIcon type="tableDensityCompact" size="s" />,
+            callback: () => {
+              setIndexedData([]);
+              handleChildClick(table);
+            },
+            sSelectable: true,
             isExpanded: true,
-            children: selectedChildNode === child ? indexData.map(indexChild => ({
-                label: indexChild,
-                id: `${child}_${indexChild}`,
-                icon: <EuiIcon type='bolt' size="s" />
-            })):undefined,
-        })) : undefined,
-    }));
-
-    return (
-        <>
-            {treeData.length > 0 ? 
-                <EuiTreeView
-                    aria-label="Sample Folder Tree"
-                    items={treeData}
-                />
-            :   <EuiEmptyPrompt
-                    iconType="alert"
-                    iconColor="danger"
-                    title={<h2>Error loading Datasources</h2>}
-                />
-            }
-        </>
-    )
-}
-
+            children:
+              selectedChildNode === table
+                ? indexData.map((indexChild) => ({
+                    label: indexChild,
+                    id: `${table}_${indexChild}`,
+                    icon: <EuiIcon type="bolt" size="s" />,
+                  }))
+                : undefined,
+          }))
+        : undefined,
+  }));
+
+  return (
+    <>
+      {treeData.length > 0 ? (
+        <EuiTreeView aria-label="Sample Folder Tree" items={treeData} />
+      ) : (
+        <EuiEmptyPrompt
+          iconType="alert"
+          iconColor="danger"
+          title={<h2>Error loading Datasources</h2>}
+        />
+      )}
+    </>
+  );
+};
diff --git a/public/components/SQLPage/utils.tsx b/public/components/SQLPage/utils.tsx
new file mode 100644
index 00000000..48909ab8
--- /dev/null
+++ b/public/components/SQLPage/utils.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const POLL_INTERVAL_MS = 5000;
+import _ from 'lodash';
+import { CoreStart } from '../../../../../src/core/public';
+
+
+
+export const pollQueryStatus = (id: string, http :CoreStart['http'], callback) => {
+  http
+    .get(`/api/spark_sql_console/job/` + id)
+    .then((res) => {
+      const status = res.data.resp.status;
+      if (status === 'PENDING' || status === 'RUNNING' || status === 'SCHEDULED') {
+        setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
+      } else if (status === 'FAILED') {
+        callback([]);
+      } else if (status === 'SUCCESS') {
+        const results = _.get(res.data.resp, 'datarows');
+        callback(results);
+      }
+    })
+    .catch((err) => {
+      console.error(err);
+      callback([]);
+    });
+};
+
+export const getJobId = (query: {}, http: CoreStart['http'], callback) => {
+  let id;
+  http
+    .post(`/api/spark_sql_console`, {
+      body: JSON.stringify(query),
+    })
+    .then((res) => {
+      id = res.data.resp.queryId;
+      callback(id)
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+};
diff --git a/server/clusters/sql/sqlPlugin.js b/server/clusters/sql/sqlPlugin.js
index 3f0b210d..e23a068f 100644
--- a/server/clusters/sql/sqlPlugin.js
+++ b/server/clusters/sql/sqlPlugin.js
@@ -4,7 +4,7 @@
  */
 
 
-import { SQL_TRANSLATE_ROUTE, SQL_QUERY_ROUTE, PPL_QUERY_ROUTE, PPL_TRANSLATE_ROUTE, FORMAT_CSV, FROMAT_JDBC, FORMAT_JSON, FORMAT_TEXT, SPARK_SQL_QUERY_ROUTE } from '../../services/utils/constants';
+import { SQL_TRANSLATE_ROUTE, SQL_QUERY_ROUTE, PPL_QUERY_ROUTE, PPL_TRANSLATE_ROUTE, FORMAT_CSV, FROMAT_JDBC, FORMAT_JSON, FORMAT_TEXT, SPARK_SQL_QUERY_ROUTE, DATASOURCES_GET_QUERY } from '../../services/utils/constants';
 
 export default function sqlPlugin(Client, config, components) {
   const ca = components.clientAction.factory;
@@ -114,6 +114,14 @@ export default function sqlPlugin(Client, config, components) {
     method: 'GET',
   });
 
+  sql.datasourcesGetQuery = ca({
+    url: {
+      fmt: `${DATASOURCES_GET_QUERY}`,
+    },
+    needBody: false,
+    method: 'GET',
+  });
+
   sql.asyncDeleteQuery = ca({
     url: {
       fmt: `${SPARK_SQL_QUERY_ROUTE}/<%=jobId%>`,
diff --git a/server/routes/query.ts b/server/routes/query.ts
index a4b0b376..95e6b6ba 100644
--- a/server/routes/query.ts
+++ b/server/routes/query.ts
@@ -8,16 +8,17 @@ import { schema } from '@osd/config-schema';
 import { IOpenSearchDashboardsResponse, IRouter, ResponseError } from '../../../../src/core/server';
 import QueryService from '../services/QueryService';
 import {
-  ROUTE_PATH_SQL_QUERY,
-  ROUTE_PATH_PPL_QUERY,
-  ROUTE_PATH_SQL_CSV,
-  ROUTE_PATH_SQL_JSON,
-  ROUTE_PATH_SQL_TEXT,
+  ROUTE_PATH_GET_DATASOURCES,
   ROUTE_PATH_PPL_CSV,
   ROUTE_PATH_PPL_JSON,
+  ROUTE_PATH_PPL_QUERY,
   ROUTE_PATH_PPL_TEXT,
-  ROUTE_PATH_SPARK_SQL_QUERY,
   ROUTE_PATH_SPARK_SQL_JOB_QUERY,
+  ROUTE_PATH_SPARK_SQL_QUERY,
+  ROUTE_PATH_SQL_CSV,
+  ROUTE_PATH_SQL_JSON,
+  ROUTE_PATH_SQL_QUERY,
+  ROUTE_PATH_SQL_TEXT
 } from '../utils/constants';
 
 export default function query(server: IRouter, service: QueryService) {
@@ -189,4 +190,21 @@ export default function query(server: IRouter, service: QueryService) {
       });
     }
   )
+
+  server.get(
+    {
+      path: ROUTE_PATH_GET_DATASOURCES,
+      validate: {
+
+      },
+    },
+    async (context, request, response): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describeSyncQueryDataSources(request);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  )
+
+
 }
diff --git a/server/services/QueryService.ts b/server/services/QueryService.ts
index 9aa927ce..5d0bb5ad 100644
--- a/server/services/QueryService.ts
+++ b/server/services/QueryService.ts
@@ -5,8 +5,8 @@
 
 
 import 'core-js/stable';
-import 'regenerator-runtime/runtime';
 import _ from 'lodash';
+import 'regenerator-runtime/runtime';
 
 export default class QueryService {
   private client: any;
@@ -62,6 +62,28 @@ export default class QueryService {
     }
   };
 
+  describeQueryGetInternalSync = async (request: any, format: string, responseFormat: string) => {
+    try {
+      const queryResponse = await this.client.asScoped(request).callAsCurrentUser(format);
+      return {
+        data: {
+          ok: true,
+          resp: _.isEqual(responseFormat, 'json') ? JSON.stringify(queryResponse) : queryResponse,
+        },
+      };
+    } catch (err) {
+      console.log(err);
+      return {
+        data: {
+          ok: false,
+          resp: err.message,
+          body: err.body
+        },
+      };
+    }
+  };
+
+
   describeSQLQuery = async (request: any) => {
     return this.describeQueryPostInternal(request, 'sql.sqlQuery', 'json', request.body);
   };
@@ -101,8 +123,10 @@ export default class QueryService {
   describeSQLAsyncGetQuery = async (request: any, jobId: string) => {
     return this.describeQueryJobIdInternal(request, 'sql.sparkSqlGetQuery', jobId, null);
   };
-
+  describeSyncQueryDataSources = async (request: any) => {
+    return this.describeQueryGetInternalSync(request, 'sql.datasourcesGetQuery', null);
+  };
   describeAsyncDeleteQuery = async (request: any, jobId: string) => {
     return this.describeQueryJobIdInternal(request, 'sql.asyncDeleteQuery', jobId, null);
   };
-}
+}
\ No newline at end of file
diff --git a/server/services/utils/constants.ts b/server/services/utils/constants.ts
index 2d103254..04c9d4d0 100644
--- a/server/services/utils/constants.ts
+++ b/server/services/utils/constants.ts
@@ -4,7 +4,6 @@
  */
 
 
-import { ParsedUrlQuery } from 'querystring';
 
 export const SQL_TRANSLATE_ROUTE = `/_plugins/_sql/_explain`;
 export const PPL_TRANSLATE_ROUTE = `/_plugins/_ppl/_explain`;
@@ -14,6 +13,7 @@ export const FORMAT_CSV = `format=csv`;
 export const FORMAT_JSON = `format=json`;
 export const FORMAT_TEXT = `format=raw`;
 export const SPARK_SQL_QUERY_ROUTE = `/_plugins/_async_query`;
+export const DATASOURCES_GET_QUERY = `/_plugins/_query/_datasources`
 
 export const DEFAULT_HEADERS = {
   'Content-Type': 'application/json',
diff --git a/server/utils/constants.ts b/server/utils/constants.ts
index da6b6522..d6e4d4bf 100644
--- a/server/utils/constants.ts
+++ b/server/utils/constants.ts
@@ -14,4 +14,5 @@ export const ROUTE_PATH_PPL_JSON = '/api/sql_console/ppljson';
 export const ROUTE_PATH_SQL_TEXT = '/api/sql_console/sqltext';
 export const ROUTE_PATH_PPL_TEXT = '/api/sql_console/ppltext';
 export const ROUTE_PATH_SPARK_SQL_QUERY = '/api/spark_sql_console';
-export const ROUTE_PATH_SPARK_SQL_JOB_QUERY = '/api/spark_sql_console/job';
\ No newline at end of file
+export const ROUTE_PATH_SPARK_SQL_JOB_QUERY = '/api/spark_sql_console/job';
+export const ROUTE_PATH_GET_DATASOURCES = '/api/get_datasources'
\ No newline at end of file
diff --git a/test/mocks/mockData.ts b/test/mocks/mockData.ts
index 2daadf9d..65904eec 100644
--- a/test/mocks/mockData.ts
+++ b/test/mocks/mockData.ts
@@ -2340,4 +2340,13 @@ export const mockHttpQuery =
     "ok": true,
     resp: "{\"schema\":[{\"name\":\"TABLE_CAT\",\"type\":\"keyword\"}],\"datarows\":[[\"opensearch\",null,\".kibana_1\",\"BASE TABLE\",null,null,null,null,null,null]]}"
   }
-}
\ No newline at end of file
+}
+export const mockDatasourcesQuery = 
+{
+  "data": {
+    "ok": true,
+    resp: "[{  \"name\": \"my_glue\",  \"description\": \"\",  \"connector\": \"S3GLUE\",  \"allowedRoles\": [],  \"properties\": {      \"glue.indexstore.opensearch.uri\": \"\",      \"glue.indexstore.opensearch.region\": \"\"  }}]"
+  }
+}
+
+
diff --git a/yarn.lock b/yarn.lock
index e641c8ce..476c75cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2639,4 +2639,4 @@ yauzl@^2.10.0:
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
-  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
\ No newline at end of file

From 621b82e730e305e82b43895d6f6d1c70127a5ecb Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 4 Oct 2023 10:20:32 -0700
Subject: [PATCH 36/40] Acceleration related changes and minor fixes (#135)

* add acc index flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove [if not exists] from acc creation

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* merge tableview from main

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* adding acc index flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* add hash router

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* hide materialized view index type

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* loading combo boxes for acc flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* adding acceleration backend integ

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update jest tests for acc flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* add redirection support for home page

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* fix primary shards count and replica validation

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove the caution callout for acc flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* support acc flyout redirection from data sources

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants/index.ts                     |   2 +-
 public/components/Main/main.tsx               |  26 +++-
 public/components/SQLPage/DataSelect.tsx      |  23 ++-
 public/components/SQLPage/SQLPage.tsx         |  31 ++--
 public/components/SQLPage/TableView.tsx       |  49 +++++--
 .../__snapshots__/SQLPage.test.tsx.snap       |   1 +
 .../SQLPage/acceleration_index_flyout.tsx     | 132 ++++++++++++++++++
 .../caution_banner_callout.test.tsx.snap      |  39 ------
 .../create_acceleration.test.tsx.snap         |  77 +---------
 .../__tests__/caution_banner_callout.test.tsx |  28 ----
 .../__tests__/create_acceleration.test.tsx    |  10 +-
 .../create/__tests__/utils.test.tsx           |   4 +-
 .../create/caution_banner_callout.tsx         |  17 ---
 .../create/create_acceleration.tsx            |  17 ++-
 .../components/acceleration/create/utils.tsx  |   2 +-
 .../index_setting_options.test.tsx.snap       |  12 +-
 .../source_selector.test.tsx.snap             |  13 +-
 .../__tests__/source_selector.test.tsx        |  15 ++
 .../selectors/index_setting_options.tsx       |   8 +-
 .../selectors/index_type_selector.tsx         |  51 ++++++-
 .../selectors/source_selector.tsx             | 132 ++++++++++--------
 .../query_visual_editor.test.tsx.snap         |  28 ----
 .../covering_index_builder.test.tsx.snap      |  28 ----
 .../covering_index/covering_index_builder.tsx |   3 -
 .../materialized_view_builder.test.tsx.snap   |  28 ----
 .../materialized_view/add_column_popover.tsx  |   2 +-
 .../materialized_view_builder.tsx             |   4 -
 .../visual_editors/query_builder.tsx          |   8 +-
 public/components/app.tsx                     |  70 +++++++---
 test/mocks/accelerationMock.ts                |  10 +-
 30 files changed, 470 insertions(+), 400 deletions(-)
 create mode 100644 public/components/SQLPage/acceleration_index_flyout.tsx
 delete mode 100644 public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
 delete mode 100644 public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
 delete mode 100644 public/components/acceleration/create/caution_banner_callout.tsx

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 8533039d..6a796871 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -13,7 +13,7 @@ export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
   { label: 'Covering Index', value: 'covering' },
-  { label: 'Materialized View', value: 'materialized' },
+  // { label: 'Materialized View', value: 'materialized' }, Hidden Option -> Until opensearch-spark feature is ready
 ];
 
 export const ACCELERATION_AGGREGRATION_FUNCTIONS = [
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index f79c42db..789e8404 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -14,7 +14,7 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -83,6 +83,8 @@ export type DataRow = {
 interface MainProps {
   httpClient: CoreStart['http'];
   setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  isAccelerationFlyoutOpen: boolean;
+  urlDataSource: string;
 }
 
 interface MainState {
@@ -417,7 +419,11 @@ export class Main extends React.Component<MainProps, MainState> {
         queries.map((query: string) =>
           this.httpClient
             .post(endpoint, {
-              body: JSON.stringify({ lang: language, query: query, datasource: this.state.selectedDatasource[0].label}), // TODO: dynamically datasource when accurate
+              body: JSON.stringify({
+                lang: language,
+                query: query,
+                datasource: this.state.selectedDatasource[0].label,
+              }), // TODO: dynamically datasource when accurate
             })
             .catch((error: any) => {
               this.setState({
@@ -796,8 +802,11 @@ export class Main extends React.Component<MainProps, MainState> {
     if (this.state.language == 'SQL') {
       page = (
         <SQLPage
+          http={this.httpClient}
           onRun={
-            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch')
+              ? this.onRun
+              : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -814,7 +823,9 @@ export class Main extends React.Component<MainProps, MainState> {
       page = (
         <PPLPage
           onRun={
-            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch') ? this.onRun : this.onRunAsync
+            _.isEqual(this.state.selectedDatasource[0].label, 'OpenSearch')
+              ? this.onRun
+              : this.onRunAsync
           }
           onTranslate={this.onTranslate}
           onClear={this.onClear}
@@ -876,7 +887,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiFlexGroup direction="row" alignItems="center">
           <EuiFlexItem>
             <EuiText>Data Sources</EuiText>
-            <DataSelect http={this.httpClient} onSelect={this.handleDataSelect} />
+            <DataSelect
+              http={this.httpClient}
+              onSelect={this.handleDataSelect}
+              urlDataSource={this.props.urlDataSource}
+            />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
@@ -903,6 +918,7 @@ export class Main extends React.Component<MainProps, MainState> {
                     <TableView
                       http={this.httpClient}
                       selectedItems={this.state.selectedDatasource}
+                      updateSQLQueries={this.updateSQLQueries}
                     />
                     <EuiSpacer />
                   </EuiFlexItem>
diff --git a/public/components/SQLPage/DataSelect.tsx b/public/components/SQLPage/DataSelect.tsx
index bc63607a..0fe25e03 100644
--- a/public/components/SQLPage/DataSelect.tsx
+++ b/public/components/SQLPage/DataSelect.tsx
@@ -10,13 +10,18 @@ import { CoreStart } from '../../../../../src/core/public';
 interface CustomView {
   http: CoreStart['http'];
   onSelect: (selectedItems: []) => void;
+  urlDataSource: string;
 }
 
-export const DataSelect = ({ http, onSelect }: CustomView) => {
-  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([{ label: 'OpenSearch' }]);
+export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
+  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([
+    { label: 'OpenSearch' },
+  ]);
   const [options, setOptions] = useState<any[]>([]);
 
   const datasources = () => {
+    let dataOptions: EuiComboBoxOptionOption[] = [];
+    let urlSourceFound = false;
     http
       .get(`/api/get_datasources`)
       .then((res) => {
@@ -34,21 +39,29 @@ export const DataSelect = ({ http, onSelect }: CustomView) => {
             }
 
             connectorGroups[connector].push(name);
+            if (name === urlDataSource) {
+              urlSourceFound = true;
+            }
           }
         });
-        options.push({ label: 'OpenSearch' });
+        dataOptions.push({ label: 'OpenSearch' });
+
         for (const connector in connectorGroups) {
           if (connectorGroups.hasOwnProperty(connector)) {
             const connectorNames = connectorGroups[connector];
 
-            options.push({
+            dataOptions.push({
               label: connector,
               options: connectorNames.map((name) => ({ label: name })),
             });
           }
         }
 
-        setOptions(options);
+        setOptions(dataOptions);
+        if (urlSourceFound) {
+          setSelectedOptions([{ label: urlDataSource }]);
+          onSelect([{ label: urlDataSource }]);
+        }
       })
       .catch((err) => {
         console.error(err);
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index b0f1eb5c..6deab093 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiCodeBlock,
   EuiCodeEditor,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
@@ -21,18 +22,20 @@ import {
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
 import React from 'react';
+import { CoreStart } from '../../../../../src/core/public';
 import '../../ace-themes/sql_console';
 import { ResponseDetail, TranslateResult } from '../Main/main';
 import { CreateAcceleration } from '../acceleration/create/create_acceleration';
 
 interface SQLPageProps {
+  http: CoreStart['http'];
   onRun: (query: string) => void;
   onTranslate: (query: string) => void;
   onClear: () => void;
   updateSQLQueries: (query: string) => void;
   sqlQuery: string;
   sqlTranslations: ResponseDetail<TranslateResult>[];
-  selectedDatasource: string;
+  selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
 }
 
@@ -68,7 +71,8 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     this.setState({
       flyoutComponent: (
         <CreateAcceleration
-          dataSource="ds"
+          http={this.props.http}
+          selectedDatasource={this.props.selectedDatasource}
           resetFlyout={this.resetFlyout}
           updateQueries={this.props.updateSQLQueries}
         />
@@ -170,17 +174,18 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
-            {this.props.selectedDatasource === 'S3' && (
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  fill={true}
-                  className="sql-accelerate-button"
-                  onClick={this.setAccelerationFlyout}
-                >
-                  Accelerate Table
-                </EuiButton>
-              </EuiFlexItem>
-            )}
+            {this.props.selectedDatasource &&
+              this.props.selectedDatasource[0].label !== 'OpenSearch' && (
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    fill={true}
+                    className="sql-accelerate-button"
+                    onClick={this.setAccelerationFlyout}
+                  >
+                    Accelerate Table
+                  </EuiButton>
+                </EuiFlexItem>
+              )}
           </EuiFlexGroup>
         </EuiPanel>
         {modal}
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
index 3f168ccd..fcc78657 100644
--- a/public/components/SQLPage/TableView.tsx
+++ b/public/components/SQLPage/TableView.tsx
@@ -3,26 +3,51 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
+import { EuiComboBoxOptionOption, EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
 import { ON_LOAD_QUERY } from '../../../common/constants';
+import { AccelerationIndexFlyout } from './acceleration_index_flyout';
 import { getJobId, pollQueryStatus } from './utils';
 
 interface CustomView {
   http: CoreStart['http'];
-  selectedItems: any[];
+  selectedItems: EuiComboBoxOptionOption[];
+  updateSQLQueries: (query: string) => void;
 }
 
-export const TableView = ({ http, selectedItems }: CustomView) => {
+export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) => {
   const [tablenames, setTablenames] = useState<string[]>([]);
   const [selectedNode, setSelectedNode] = useState<string | null>(null);
   const [childData, setChildData] = useState<string[]>([]);
   const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
   const [indexData, setIndexedData] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [indiciesData, setIndiciesData] = useState<string []>([]);
+  const [indiciesData, setIndiciesData] = useState<string[]>([]);
+  const [indexFlyout, setIndexFlyout] = useState(<></>);
+
+  const resetFlyout = () => {
+    setIndexFlyout(<></>);
+  };
+
+  const handleAccelerationIndexClick = (
+    dataSource: string,
+    database: string,
+    dataTable: string,
+    indexName: string
+  ) => {
+    setIndexFlyout(
+      <AccelerationIndexFlyout
+        dataSource={dataSource}
+        database={database}
+        dataTable={dataTable}
+        indexName={indexName}
+        resetFlyout={resetFlyout}
+        updateSQLQueries={updateSQLQueries}
+      />
+    );
+  };
 
   const get_async_query_results = (id, http, callback) => {
     pollQueryStatus(id, http, callback);
@@ -64,7 +89,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
 
   useEffect(() => {
     getSidebarContent();
-  }, [selectedItems[0]['label']]);
+  }, [selectedItems]);
 
   const handleNodeClick = (nodeLabel: string) => {
     setSelectedNode(nodeLabel);
@@ -89,8 +114,8 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
     };
     getJobId(coverQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
-        data = [].concat(...data)
-        indiciesData.push(data)
+        data = [].concat(...data);
+        indiciesData.push(data);
         setIndexedData(indiciesData);
       });
     });
@@ -105,7 +130,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
     getJobId(skipQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
         if (data.length > 0) {
-            indiciesData.push('skip_index');
+          indiciesData.push('skip_index');
           callCoverQuery(nodeLabel1);
         }
       });
@@ -141,6 +166,13 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
                     label: indexChild,
                     id: `${table}_${indexChild}`,
                     icon: <EuiIcon type="bolt" size="s" />,
+                    callback: () =>
+                      handleAccelerationIndexClick(
+                        selectedItems[0].label,
+                        database,
+                        table,
+                        indexChild
+                      ),
                   }))
                 : undefined,
           }))
@@ -158,6 +190,7 @@ export const TableView = ({ http, selectedItems }: CustomView) => {
           title={<h2>Error loading Datasources</h2>}
         />
       )}
+      {indexFlyout}
     </>
   );
 };
diff --git a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
index 96850ed5..603e920f 100644
--- a/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
+++ b/public/components/SQLPage/__snapshots__/SQLPage.test.tsx.snap
@@ -188,6 +188,7 @@ exports[`<SQLPage /> spec renders the component 1`] = `
           </div>
         </div>
       </div>
+      
     </div>
   </div>
 </div>
diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx
new file mode 100644
index 00000000..9b855384
--- /dev/null
+++ b/public/components/SQLPage/acceleration_index_flyout.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import React from 'react';
+
+interface AccelerationIndexFlyoutProps {
+  dataSource: string;
+  database: string;
+  dataTable: string;
+  indexName: string;
+  resetFlyout: () => void;
+  updateSQLQueries: (query: string) => void;
+}
+
+export const AccelerationIndexFlyout = ({
+  dataSource,
+  database,
+  dataTable,
+  indexName,
+  resetFlyout,
+  updateSQLQueries,
+}: AccelerationIndexFlyoutProps) => {
+  const updateDescribeQuery = () => {
+    const describeQuery =
+      indexName === 'skipping_index'
+        ? `DESC SKIPPING INDEX ON ${dataSource}.${database}.${dataTable}`
+        : `DESC INDEX ${indexName} ON ${dataSource}.${database}.${dataTable}`;
+    updateSQLQueries(describeQuery);
+    resetFlyout();
+  };
+
+  const updateDropQuery = () => {
+    const describeQuery =
+      indexName === 'skipping_index'
+        ? `DROP SKIPPING INDEX ON ${dataSource}.${database}.${dataTable}`
+        : `DROP INDEX ${indexName} ON ${dataSource}.${database}.${dataTable}`;
+    updateSQLQueries(describeQuery);
+    resetFlyout();
+  };
+
+  return (
+    <>
+      <EuiFlyout ownFocus onClose={resetFlyout} aria-labelledby="flyoutTitle" size="m">
+        <EuiFlyoutHeader hasBorder>
+          <div>
+            <EuiPageHeader>
+              <EuiPageHeaderSection>
+                <EuiTitle size="l" data-test-subj="acceleration-index-desc-header">
+                  <h1>{indexName}</h1>
+                </EuiTitle>
+              </EuiPageHeaderSection>
+            </EuiPageHeader>
+          </div>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <h3>Acceleration index Source</h3>
+          <EuiHorizontalRule />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <h3>Data Source</h3>
+              <EuiSpacer />
+              <p>{dataSource}</p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <h3>Database</h3>
+              <EuiSpacer />
+              <p>{database}</p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <h3>Table</h3>
+              <EuiSpacer />
+              <p>{dataTable}</p>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <h3>Acceleration index destination</h3>
+          <EuiHorizontalRule />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <h3>OpenSearch Index</h3>
+              <EuiSpacer />
+              <p>
+                {indexName === 'skipping_index'
+                  ? `flint_${dataSource}_${database}_${dataTable}_skipping_index`
+                  : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`}
+              </p>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <h3>Acceleration index actions</h3>
+          <EuiHorizontalRule />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiButton iconSide="right" fill iconType="lensApp" onClick={updateDescribeQuery}>
+                Describe Index
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton iconSide="right" iconType="trash" onClick={updateDropQuery} color="danger">
+                Drop Index
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
+                Close
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </>
+  );
+};
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
deleted file mode 100644
index f40a09f9..00000000
--- a/public/components/acceleration/create/__tests__/__snapshots__/caution_banner_callout.test.tsx.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Acceleration callout renders acceleration flyout callout 1`] = `
-<div
-  className="euiCallOut euiCallOut--warning"
->
-  <div
-    className="euiCallOutHeader"
-  >
-    <svg
-      aria-hidden={true}
-      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-      focusable="false"
-      height={16}
-      role="img"
-      style={null}
-      viewBox="0 0 16 16"
-      width={16}
-      xmlns="http://www.w3.org/2000/svg"
-    />
-    <span
-      className="euiCallOutHeader__title"
-    >
-      Considerations for data indexing
-    </span>
-  </div>
-  <div
-    className="euiText euiText--small"
-  >
-    <div
-      className="euiTextColor euiTextColor--default"
-    >
-      <p>
-        Warning about not indexing personal or sensitive data, something about the cost of indexing.
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
index 3eded361..07b8f6a8 100644
--- a/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
+++ b/public/components/acceleration/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
@@ -108,40 +108,6 @@ Array [
                 <div
                   class="euiFlyoutBody__overflowContent"
                 >
-                  <div
-                    class="euiCallOut euiCallOut--warning"
-                  >
-                    <div
-                      class="euiCallOutHeader"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      />
-                      <span
-                        class="euiCallOutHeader__title"
-                      >
-                        Considerations for data indexing
-                      </span>
-                    </div>
-                    <div
-                      class="euiText euiText--small"
-                    >
-                      <div
-                        class="euiTextColor euiTextColor--default"
-                      >
-                        <p>
-                          Warning about not indexing personal or sensitive data, something about the cost of indexing.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
                   <div
                     class="euiSpacer euiSpacer--l"
                   />
@@ -608,7 +574,7 @@ Array [
                               min="1"
                               placeholder="Number of primary shards"
                               type="number"
-                              value="5"
+                              value="1"
                             />
                           </div>
                         </div>
@@ -616,7 +582,7 @@ Array [
                           class="euiFormHelpText euiFormRow__text"
                           id="some_html_id-help-0"
                         >
-                          Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+                          Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
                         </div>
                       </div>
                     </div>
@@ -1252,41 +1218,6 @@ Array [
                 <div
                   className="euiFlyoutBody__overflowContent"
                 >
-                  <div
-                    className="euiCallOut euiCallOut--warning"
-                  >
-                    <div
-                      className="euiCallOutHeader"
-                    >
-                      <svg
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
-                        focusable="false"
-                        height={16}
-                        role="img"
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      />
-                      <span
-                        className="euiCallOutHeader__title"
-                      >
-                        Considerations for data indexing
-                      </span>
-                    </div>
-                    <div
-                      className="euiText euiText--small"
-                    >
-                      <div
-                        className="euiTextColor euiTextColor--default"
-                      >
-                        <p>
-                          Warning about not indexing personal or sensitive data, something about the cost of indexing.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
                   <div
                     className="euiSpacer euiSpacer--l"
                   />
@@ -1868,7 +1799,7 @@ Array [
                                 onFocus={[Function]}
                                 placeholder="Number of primary shards"
                                 type="number"
-                                value={5}
+                                value={1}
                               />
                             </div>
                           </div>
@@ -1876,7 +1807,7 @@ Array [
                             className="euiFormHelpText euiFormRow__text"
                             id="some_html_id-help-0"
                           >
-                            Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+                            Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
                           </div>
                         </div>
                       </div>,
diff --git a/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx b/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
deleted file mode 100644
index 4ad06632..00000000
--- a/public/components/acceleration/create/__tests__/caution_banner_callout.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { waitFor } from '@testing-library/dom';
-import { configure, mount } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import toJson from 'enzyme-to-json';
-import React from 'react';
-import { CautionBannerCallout } from '../caution_banner_callout';
-
-describe('Acceleration callout', () => {
-  configure({ adapter: new Adapter() });
-
-  it('renders acceleration flyout callout', async () => {
-    const wrapper = mount(<CautionBannerCallout />);
-    wrapper.update();
-    await waitFor(() => {
-      expect(
-        toJson(wrapper, {
-          noKey: false,
-          mode: 'deep',
-        })
-      ).toMatchSnapshot();
-    });
-  });
-});
diff --git a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx
index 8736c5b0..104d0fe6 100644
--- a/public/components/acceleration/create/__tests__/create_acceleration.test.tsx
+++ b/public/components/acceleration/create/__tests__/create_acceleration.test.tsx
@@ -3,24 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiComboBoxOptionOption } from '@elastic/eui';
 import { waitFor } from '@testing-library/dom';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import toJson from 'enzyme-to-json';
 import React from 'react';
+import { httpClientMock } from '../../../../../test/mocks';
+import { mockDatasourcesQuery } from '../../../../../test/mocks/mockData';
 import { CreateAcceleration } from '../create_acceleration';
 
 describe('Create acceleration flyout components', () => {
   configure({ adapter: new Adapter() });
 
   it('renders acceleration flyout component with default options', async () => {
-    const dataSource = '';
+    const selectedDatasource: EuiComboBoxOptionOption[] = [];
     const resetFlyout = jest.fn();
     const updateQueries = jest.fn();
+    const client = httpClientMock;
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
 
     const wrapper = mount(
       <CreateAcceleration
-        dataSource={dataSource}
+        http={client}
+        selectedDatasource={selectedDatasource}
         resetFlyout={resetFlyout}
         updateQueries={updateQueries}
       />
diff --git a/public/components/acceleration/create/__tests__/utils.test.tsx b/public/components/acceleration/create/__tests__/utils.test.tsx
index 060d6385..8e4efbf3 100644
--- a/public/components/acceleration/create/__tests__/utils.test.tsx
+++ b/public/components/acceleration/create/__tests__/utils.test.tsx
@@ -96,11 +96,11 @@ describe('validatePrimaryShardCount', () => {
 
 describe('validateReplicaCount', () => {
   it('should return an array with an error message when replicaCount is less than 1', () => {
-    expect(validateReplicaCount(0)).toEqual(['Replica count should be greater than 0']);
-    expect(validateReplicaCount(-1)).toEqual(['Replica count should be greater than 0']); // form throws validation error, doesn't allow user to proceed
+    expect(validateReplicaCount(-1)).toEqual(['Replica count should be equal or greater than 0']); // form throws validation error, doesn't allow user to proceed
   });
 
   it('should return an empty array when replicaCount is greater than or equal to 1', () => {
+    expect(validateReplicaCount(0)).toEqual([]);
     expect(validateReplicaCount(1)).toEqual([]);
     expect(validateReplicaCount(5)).toEqual([]);
     expect(validateReplicaCount(100)).toEqual([]);
diff --git a/public/components/acceleration/create/caution_banner_callout.tsx b/public/components/acceleration/create/caution_banner_callout.tsx
deleted file mode 100644
index 2c97f82a..00000000
--- a/public/components/acceleration/create/caution_banner_callout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { EuiCallOut } from '@elastic/eui';
-import React from 'react';
-
-export const CautionBannerCallout = () => {
-  return (
-    <EuiCallOut title="Considerations for data indexing" color="warning" iconType="iInCircle">
-      <p>
-        Warning about not indexing personal or sensitive data, something about the cost of indexing.
-      </p>
-    </EuiCallOut>
-  );
-};
diff --git a/public/components/acceleration/create/create_acceleration.tsx b/public/components/acceleration/create/create_acceleration.tsx
index 4cfc5e44..152b01c5 100644
--- a/public/components/acceleration/create/create_acceleration.tsx
+++ b/public/components/acceleration/create/create_acceleration.tsx
@@ -6,6 +6,7 @@
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -16,6 +17,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import {
   ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
   ACCELERATION_TIME_INTERVAL,
@@ -26,23 +28,24 @@ import { IndexSettingOptions } from '../selectors/index_setting_options';
 import { AccelerationDataSourceSelector } from '../selectors/source_selector';
 import { accelerationQueryBuilder } from '../visual_editors/query_builder';
 import { QueryVisualEditor } from '../visual_editors/query_visual_editor';
-import { CautionBannerCallout } from './caution_banner_callout';
 import { CreateAccelerationHeader } from './create_acceleration_header';
 import { formValidator, hasError } from './utils';
 
 export interface CreateAccelerationProps {
-  dataSource: string;
+  http: CoreStart['http'];
+  selectedDatasource: EuiComboBoxOptionOption[];
   resetFlyout: () => void;
   updateQueries: (query: string) => void;
 }
 
 export const CreateAcceleration = ({
-  dataSource,
+  http,
+  selectedDatasource,
   resetFlyout,
   updateQueries,
 }: CreateAccelerationProps) => {
   const [accelerationFormData, setAccelerationFormData] = useState<CreateAccelerationForm>({
-    dataSource: '',
+    dataSource: selectedDatasource.length > 0 ? selectedDatasource[0].label : '',
     dataTable: '',
     database: '',
     dataTableFields: [],
@@ -58,7 +61,7 @@ export const CreateAcceleration = ({
       },
     },
     accelerationIndexName: ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
-    primaryShardsCount: 5,
+    primaryShardsCount: 1,
     replicaShardsCount: 1,
     refreshType: 'auto',
     checkpointLocation: undefined,
@@ -98,7 +101,6 @@ export const CreateAcceleration = ({
           <CreateAccelerationHeader />
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <CautionBannerCallout />
           <EuiSpacer size="l" />
           <EuiForm
             isInvalid={hasError(accelerationFormData.formErrors)}
@@ -107,11 +109,14 @@ export const CreateAcceleration = ({
             id="acceleration-form"
           >
             <AccelerationDataSourceSelector
+              http={http}
               accelerationFormData={accelerationFormData}
               setAccelerationFormData={setAccelerationFormData}
+              selectedDatasource={selectedDatasource}
             />
             <EuiSpacer size="xxl" />
             <IndexSettingOptions
+              http={http}
               accelerationFormData={accelerationFormData}
               setAccelerationFormData={setAccelerationFormData}
             />
diff --git a/public/components/acceleration/create/utils.tsx b/public/components/acceleration/create/utils.tsx
index a293298c..97933353 100644
--- a/public/components/acceleration/create/utils.tsx
+++ b/public/components/acceleration/create/utils.tsx
@@ -41,7 +41,7 @@ export const validatePrimaryShardCount = (primaryShardCount: number) => {
 };
 
 export const validateReplicaCount = (replicaCount: number) => {
-  return replicaCount < 1 ? ['Replica count should be greater than 0'] : [];
+  return replicaCount < 0 ? ['Replica count should be equal or greater than 0'] : [];
 };
 
 export const validateRefreshInterval = (refreshType: string, refreshWindow: number) => {
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
index 72dad5ea..49459fd5 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
@@ -196,7 +196,7 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={5}
+            value={1}
           />
         </div>
       </div>
@@ -204,7 +204,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
@@ -583,7 +583,7 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={5}
+            value={1}
           />
         </div>
       </div>
@@ -591,7 +591,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
@@ -970,7 +970,7 @@ Array [
             onFocus={[Function]}
             placeholder="Number of primary shards"
             type="number"
-            value={5}
+            value={1}
           />
         </div>
       </div>
@@ -978,7 +978,7 @@ Array [
         className="euiFormHelpText euiFormRow__text"
         id="some_html_id-help-0"
       >
-        Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created.
+        Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created.
       </div>
     </div>
   </div>,
diff --git a/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
index bf2a7962..47b7da24 100644
--- a/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
+++ b/public/components/acceleration/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
@@ -442,11 +442,11 @@ Array [
               onClick={[Function]}
               tabIndex={-1}
             >
-              <p
-                className="euiComboBoxPlaceholder"
+              <span
+                className="euiComboBoxPill euiComboBoxPill--plainText"
               >
-                Select a data source
-              </p>
+                ds
+              </span>
               <div
                 className="euiComboBox__input"
                 style={
@@ -681,7 +681,7 @@ Array [
             className="euiFormControlLayout__childrenWrapper"
           >
             <div
-              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
               data-test-subj="comboBoxInput"
               onClick={[Function]}
               tabIndex={-1}
@@ -734,6 +734,9 @@ Array [
             <div
               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
+              <span
+                className="euiLoadingSpinner euiLoadingSpinner--medium"
+              />
               <button
                 aria-label="Open list of options"
                 className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
diff --git a/public/components/acceleration/selectors/__tests__/source_selector.test.tsx b/public/components/acceleration/selectors/__tests__/source_selector.test.tsx
index f5d1ff57..9d76e390 100644
--- a/public/components/acceleration/selectors/__tests__/source_selector.test.tsx
+++ b/public/components/acceleration/selectors/__tests__/source_selector.test.tsx
@@ -3,13 +3,16 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { EuiComboBoxOptionOption } from '@elastic/eui';
 import { waitFor } from '@testing-library/dom';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 import { CreateAccelerationForm } from '../../../../../common/types';
+import { httpClientMock } from '../../../../../test/mocks';
 import { createAccelerationEmptyDataMock } from '../../../../../test/mocks/accelerationMock';
+import { mockDatasourcesQuery } from '../../../../../test/mocks/mockData';
 import { AccelerationDataSourceSelector } from '../source_selector';
 
 describe('Source selector components', () => {
@@ -17,9 +20,15 @@ describe('Source selector components', () => {
 
   it('renders source selector with default options', async () => {
     const accelerationFormData = createAccelerationEmptyDataMock;
+    const selectedDatasource: EuiComboBoxOptionOption[] = [];
     const setAccelerationFormData = jest.fn();
+    const client = httpClientMock;
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+
     const wrapper = mount(
       <AccelerationDataSourceSelector
+        http={client}
+        selectedDatasource={selectedDatasource}
         accelerationFormData={accelerationFormData}
         setAccelerationFormData={setAccelerationFormData}
       />
@@ -36,6 +45,7 @@ describe('Source selector components', () => {
   });
 
   it('renders source selector with different options', async () => {
+    const selectedDatasource: EuiComboBoxOptionOption[] = [{ label: 'ds' }];
     const accelerationFormData: CreateAccelerationForm = {
       ...createAccelerationEmptyDataMock,
       dataSource: 'ds',
@@ -43,8 +53,13 @@ describe('Source selector components', () => {
       dataTable: 'tb',
     };
     const setAccelerationFormData = jest.fn();
+    const client = httpClientMock;
+    client.get = jest.fn().mockResolvedValue(mockDatasourcesQuery);
+    client.post = jest.fn().mockResolvedValue([]);
     const wrapper = mount(
       <AccelerationDataSourceSelector
+        selectedDatasource={selectedDatasource}
+        http={client}
         accelerationFormData={accelerationFormData}
         setAccelerationFormData={setAccelerationFormData}
       />
diff --git a/public/components/acceleration/selectors/index_setting_options.tsx b/public/components/acceleration/selectors/index_setting_options.tsx
index f5a0c69a..18797186 100644
--- a/public/components/acceleration/selectors/index_setting_options.tsx
+++ b/public/components/acceleration/selectors/index_setting_options.tsx
@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui';
 import producer from 'immer';
 import React, { ChangeEvent, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import { ACCELERATION_TIME_INTERVAL } from '../../../../common/constants';
 import { CreateAccelerationForm } from '../../../../common/types';
 import {
@@ -26,11 +27,13 @@ import {
 import { IndexTypeSelector } from './index_type_selector';
 
 interface IndexSettingOptionsProps {
+  http: CoreStart['http'];
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
 }
 
 export const IndexSettingOptions = ({
+  http,
   accelerationFormData,
   setAccelerationFormData,
 }: IndexSettingOptionsProps) => {
@@ -47,7 +50,7 @@ export const IndexSettingOptions = ({
     },
   ];
 
-  const [primaryShards, setPrimaryShards] = useState(5);
+  const [primaryShards, setPrimaryShards] = useState(1);
   const [replicaCount, setReplicaCount] = useState(1);
   const [refreshTypeSelected, setRefreshTypeSelected] = useState(autoRefreshId);
   const [refreshWindow, setRefreshWindow] = useState(1);
@@ -107,12 +110,13 @@ export const IndexSettingOptions = ({
       </EuiText>
       <EuiSpacer size="s" />
       <IndexTypeSelector
+        http={http}
         accelerationFormData={accelerationFormData}
         setAccelerationFormData={setAccelerationFormData}
       />
       <EuiFormRow
         label="Number of primary shards"
-        helpText="Specify the number of primary shards for the index. Default is 5. The number of primary shards cannot be changed after the index is created."
+        helpText="Specify the number of primary shards for the index. Default is 1. The number of primary shards cannot be changed after the index is created."
         isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         error={accelerationFormData.formErrors.primaryShardsError}
       >
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 06b7828d..1e195c8f 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -3,27 +3,73 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
-import React, { useState } from 'react';
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFormRow,
+  EuiLink,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import {
   ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
   ACCELERATION_INDEX_TYPES,
   ACC_INDEX_TYPE_DOCUMENTATION_URL,
 } from '../../../../common/constants';
 import { AccelerationIndexType, CreateAccelerationForm } from '../../../../common/types';
+import { getJobId, pollQueryStatus } from '../../SQLPage/utils';
 
 interface IndexTypeSelectorProps {
+  http: CoreStart['http'];
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
 }
 
 export const IndexTypeSelector = ({
+  http,
   accelerationFormData,
   setAccelerationFormData,
 }: IndexTypeSelectorProps) => {
   const [selectedIndexType, setSelectedIndexType] = useState<EuiComboBoxOptionOption<string>[]>([
     ACCELERATION_INDEX_TYPES[0],
   ]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (accelerationFormData.dataTable !== '') {
+      setLoading(true);
+      const idPrefix = htmlIdGenerator()();
+      const query = {
+        lang: 'sql',
+        query: `DESC ${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.dataTable}`,
+        datasource: accelerationFormData.dataSource,
+      };
+      getJobId(query, http, (id: string) => {
+        pollQueryStatus(id, http, (data: any[]) => {
+          setAccelerationFormData({
+            ...accelerationFormData,
+            dataTableFields: [
+              { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' },
+              { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' },
+              { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' },
+              { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' },
+              { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' },
+              { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' },
+              { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' },
+              { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' },
+              { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' },
+              { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' },
+              { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' },
+              { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' },
+            ],
+          });
+          setLoading(false);
+        });
+      });
+    }
+  }, [accelerationFormData.dataTable]);
 
   const onChangeIndexType = (indexTypeOption: EuiComboBoxOptionOption<string>[]) => {
     const indexType = indexTypeOption[0].value as AccelerationIndexType;
@@ -56,6 +102,7 @@ export const IndexTypeSelector = ({
           onChange={onChangeIndexType}
           isInvalid={selectedIndexType.length === 0}
           isClearable={false}
+          isLoading={loading}
         />
       </EuiFormRow>
     </>
diff --git a/public/components/acceleration/selectors/source_selector.tsx b/public/components/acceleration/selectors/source_selector.tsx
index a0f068ba..ea365876 100644
--- a/public/components/acceleration/selectors/source_selector.tsx
+++ b/public/components/acceleration/selectors/source_selector.tsx
@@ -3,101 +3,110 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
-  EuiFormRow,
-  EuiSpacer,
-  EuiText,
-  htmlIdGenerator,
-} from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import producer from 'immer';
 import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
 import { CreateAccelerationForm } from '../../../../common/types';
+import { getJobId, pollQueryStatus } from '../../SQLPage/utils';
 import { hasError, validateDataSource } from '../create/utils';
 
 interface AccelerationDataSourceSelectorProps {
+  http: CoreStart['http'];
   accelerationFormData: CreateAccelerationForm;
   setAccelerationFormData: React.Dispatch<React.SetStateAction<CreateAccelerationForm>>;
+  selectedDatasource: EuiComboBoxOptionOption[];
 }
 
 export const AccelerationDataSourceSelector = ({
+  http,
   accelerationFormData,
   setAccelerationFormData,
+  selectedDatasource,
 }: AccelerationDataSourceSelectorProps) => {
   const [dataConnections, setDataConnections] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [selectedDataConnection, setSelectedDataConnection] = useState<
     EuiComboBoxOptionOption<string>[]
-  >([]);
+  >(selectedDatasource.length > 0 ? [{ label: selectedDatasource[0].label }] : []);
   const [databases, setDatabases] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [selectedDatabase, setSelectedDatabase] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [tables, setTables] = useState<EuiComboBoxOptionOption<string>[]>([]);
   const [selectedTable, setSelectedTable] = useState<EuiComboBoxOptionOption<string>[]>([]);
+  const [loadingComboBoxes, setLoadingComboBoxes] = useState({
+    dataSource: false,
+    database: false,
+    dataTable: false,
+  });
+
+  const loadDataSource = () => {
+    setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: true });
+    http
+      .get(`/api/get_datasources`)
+      .then((res) => {
+        const data = res.data.resp;
+        setDataConnections(
+          data
+            .filter((connection: any) => connection.connector.toUpperCase() === 'S3GLUE')
+            .map((connection: any) => ({ label: connection.name }))
+        );
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+    setLoadingComboBoxes({ ...loadingComboBoxes, dataSource: false });
+  };
+
+  const loadDatabases = () => {
+    setLoadingComboBoxes({ ...loadingComboBoxes, database: true });
+    const query = {
+      lang: 'sql',
+      query: `SHOW SCHEMAS IN ${accelerationFormData.dataSource}`,
+      datasource: accelerationFormData.dataSource,
+    };
+    getJobId(query, http, (id: string) => {
+      pollQueryStatus(id, http, (data: any[][]) => {
+        let databaseOptions: EuiComboBoxOptionOption<string>[] = [];
+        if (data.length > 0)
+          databaseOptions = data.map((subArray: any[]) => ({ label: subArray[0] }));
+        setDatabases(databaseOptions);
+        setLoadingComboBoxes({ ...loadingComboBoxes, database: false });
+      });
+    });
+  };
+
+  const loadTables = () => {
+    setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: true });
+    const query = {
+      lang: 'sql',
+      query: `SHOW TABLES IN ${accelerationFormData.dataSource}.${accelerationFormData.database}`,
+      datasource: accelerationFormData.dataSource,
+    };
+    getJobId(query, http, (id: string) => {
+      pollQueryStatus(id, http, (data: any[]) => {
+        let dataTableOptions: EuiComboBoxOptionOption<string>[] = [];
+        if (data.length > 0) dataTableOptions = data.map((subArray) => ({ label: subArray[1] }));
+        setTables(dataTableOptions);
+        setLoadingComboBoxes({ ...loadingComboBoxes, dataTable: false });
+      });
+    });
+  };
 
   useEffect(() => {
-    // TODO: remove hardcoded responses
-    setDataConnections([
-      {
-        label: 'spark1',
-      },
-      {
-        label: 'spark2',
-      },
-    ]);
+    loadDataSource();
   }, []);
 
   useEffect(() => {
-    // TODO: remove hardcoded responses
     if (accelerationFormData.dataSource !== '') {
-      setDatabases([
-        {
-          label: 'Database1',
-        },
-        {
-          label: 'Database2',
-        },
-      ]);
+      loadDatabases();
     }
   }, [accelerationFormData.dataSource]);
 
   useEffect(() => {
-    // TODO: remove hardcoded responses
     if (accelerationFormData.database !== '') {
-      setTables([
-        {
-          label: 'Table1',
-        },
-        {
-          label: 'Table2',
-        },
-      ]);
+      loadTables();
     }
   }, [accelerationFormData.database]);
 
-  useEffect(() => {
-    // TODO: remove hardcoded responses
-    if (accelerationFormData.dataTable !== '') {
-      const idPrefix = htmlIdGenerator()();
-      setAccelerationFormData({
-        ...accelerationFormData,
-        dataTableFields: [
-          { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' },
-          { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' },
-          { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' },
-          { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' },
-          { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' },
-          { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' },
-          { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' },
-          { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' },
-          { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' },
-          { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' },
-          { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' },
-          { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' },
-        ],
-      });
-    }
-  }, [accelerationFormData.dataTable]);
-
   return (
     <>
       <EuiText data-test-subj="datasource-selector-header">
@@ -132,6 +141,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'dataSourceError')}
+          isLoading={loadingComboBoxes.dataSource}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -156,6 +166,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
+          isLoading={loadingComboBoxes.database}
         />
       </EuiFormRow>
       <EuiFormRow
@@ -180,6 +191,7 @@ export const AccelerationDataSourceSelector = ({
           }}
           isClearable={false}
           isInvalid={hasError(accelerationFormData.formErrors, 'dataTableError')}
+          isLoading={loadingComboBoxes.dataTable}
         />
       </EuiFormRow>
     </>
diff --git a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
index 8659a435..3a281f7a 100644
--- a/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
@@ -39,20 +39,6 @@ Array [
           </span>
         </span>
       </div>
-      <div
-        className="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <span
-          className="euiExpression euiExpression-isUppercase euiExpression--success"
-        >
-          <span
-            className="euiExpression__description"
-          >
-            [IF NOT EXISTS]
-          </span>
-           
-        </span>
-      </div>
       <div
         className="euiFlexItem"
       >
@@ -354,20 +340,6 @@ Array [
         ..skipping
       </span>
     </span>,
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <span
-        className="euiExpression euiExpression-isUppercase euiExpression--success"
-      >
-        <span
-          className="euiExpression__description"
-        >
-          [IF NOT EXISTS]
-        </span>
-         
-      </span>
-    </div>,
     <div
       className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
diff --git a/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
index 3d237119..24d90273 100644
--- a/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/covering_index/__tests__/__snapshots__/covering_index_builder.test.tsx.snap
@@ -35,20 +35,6 @@ Array [
         </span>
       </span>
     </div>
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <span
-        className="euiExpression euiExpression-isUppercase euiExpression--success"
-      >
-        <span
-          className="euiExpression__description"
-        >
-          [IF NOT EXISTS]
-        </span>
-         
-      </span>
-    </div>
     <div
       className="euiFlexItem"
     >
@@ -130,20 +116,6 @@ Array [
         </span>
       </span>
     </div>
-    <div
-      className="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <span
-        className="euiExpression euiExpression-isUppercase euiExpression--success"
-      >
-        <span
-          className="euiExpression__description"
-        >
-          [IF NOT EXISTS]
-        </span>
-         
-      </span>
-    </div>
     <div
       className="euiFlexItem"
     >
diff --git a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
index 5968ca01..8d3c6019 100644
--- a/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
+++ b/public/components/acceleration/visual_editors/covering_index/covering_index_builder.tsx
@@ -58,9 +58,6 @@ export const CoveringIndexBuilder = ({
             value={accelerationFormData.accelerationIndexName}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiExpression description="[IF NOT EXISTS]" />
-        </EuiFlexItem>
         <EuiFlexItem>
           <EuiExpression
             description="ON"
diff --git a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
index 75955730..c3ae3b8d 100644
--- a/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
+++ b/public/components/acceleration/visual_editors/materialized_view/__tests__/__snapshots__/materialized_view_builder.test.tsx.snap
@@ -28,20 +28,6 @@ Array [
       ..skipping
     </span>
   </span>,
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <span
-      className="euiExpression euiExpression-isUppercase euiExpression--success"
-    >
-      <span
-        className="euiExpression__description"
-      >
-        [IF NOT EXISTS]
-      </span>
-       
-    </span>
-  </div>,
   <div
     className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
@@ -184,20 +170,6 @@ Array [
       ..skipping
     </span>
   </span>,
-  <div
-    className="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <span
-      className="euiExpression euiExpression-isUppercase euiExpression--success"
-    >
-      <span
-        className="euiExpression__description"
-      >
-        [IF NOT EXISTS]
-      </span>
-       
-    </span>
-  </div>,
   <div
     className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
diff --git a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
index df6b276f..6d91c5b7 100644
--- a/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/add_column_popover.tsx
@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiButtonEmpty,
   EuiComboBox,
+  EuiComboBoxOptionOption,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,7 +18,6 @@ import {
   EuiSpacer,
   htmlIdGenerator,
 } from '@elastic/eui';
-import { EuiComboBoxOptionOption } from '@opensearch-project/oui';
 import producer from 'immer';
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { ACCELERATION_AGGREGRATION_FUNCTIONS } from '../../../../../common/constants';
diff --git a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
index 124b451c..e9ef4319 100644
--- a/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
+++ b/public/components/acceleration/visual_editors/materialized_view/materialized_view_builder.tsx
@@ -74,10 +74,6 @@ export const MaterializedViewBuilder = ({
         value={`${accelerationFormData.dataSource}.${accelerationFormData.database}.${accelerationFormData.accelerationIndexName}`}
       />
 
-      <EuiFlexItem grow={false}>
-        <EuiExpression description="[IF NOT EXISTS]" value="" />
-      </EuiFlexItem>
-
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiExpression
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
index 49d4482f..ef15bc9e 100644
--- a/public/components/acceleration/visual_editors/query_builder.tsx
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -58,7 +58,6 @@ const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[
  * Skipping Index create query example:
  *
  * CREATE SKIPPING INDEX
- * [IF NOT EXISTS]
  * ON datasource.database.table
  * FOR COLUMNS (
  *    field1 VALUE_SET,
@@ -74,8 +73,7 @@ const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[
 export const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerationForm) => {
   const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData;
 
-  const codeQuery = `CREATE SKIPPING INDEX 
-[IF NOT EXISTS]
+  const codeQuery = `CREATE SKIPPING INDEX
 ON ${dataSource}.${database}.${dataTable}
   FOR COLUMNS (
 ${buildSkippingIndexColumns(skippingIndexQueryData)}
@@ -94,7 +92,6 @@ const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => {
  * Covering Index create query example:
  *
  * CREATE INDEX index_name
- * [IF NOT EXISTS]
  * ON datasource.database.table
  * FOR COLUMNS (
  *    field1,
@@ -117,7 +114,6 @@ export const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerati
   } = accelerationformData;
 
   const codeQuery = `CREATE INDEX ${accelerationIndexName}
-[IF NOT EXISTS]
 ON ${dataSource}.${database}.${dataTable}
   FOR COLUMNS (
 ${buildCoveringIndexColumns(coveringIndexQueryData)}
@@ -148,7 +144,6 @@ const buildTumbleValue = (GroupByTumbleValue: GroupByTumbleType) => {
  * Materialized View create query example:
  *
  * CREATE MATERIALIZED VIEW datasource.database.index_name
- * [IF NOT EXISTS]
  * AS SELECT
  * count(field) as counter,
  * count(*) as counter1,
@@ -171,7 +166,6 @@ export const materializedQueryViewBuilder = (accelerationformData: CreateAcceler
   } = accelerationformData;
 
   const codeQuery = `CREATE MATERIALIZED VIEW ${dataSource}.${database}.${accelerationIndexName}
-[IF NOT EXISTS]
 AS SELECT
 ${buildMaterializedViewColumns(materializedViewQueryData.columnsValues)}
 FROM ${dataSource}.${database}.${dataTable}
diff --git a/public/components/app.tsx b/public/components/app.tsx
index 44f09b5f..a2f961eb 100644
--- a/public/components/app.tsx
+++ b/public/components/app.tsx
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import React from 'react';
+import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 
@@ -23,29 +22,64 @@ interface WorkbenchAppDeps {
   chrome: CoreStart['chrome'];
 }
 
-const onChange = () => {};
-
-export const WorkbenchApp = ({ basename, notifications, http, navigation, chrome }: WorkbenchAppDeps) => {
+export const WorkbenchApp = ({
+  basename,
+  notifications,
+  http,
+  navigation,
+  chrome,
+}: WorkbenchAppDeps) => {
   return (
-    <Router basename={'/' + basename}>
+    <HashRouter>
       <I18nProvider>
         <div>
           <EuiPage>
             <EuiPageBody>
-              <Route 
-                path="/" 
-                render={(props) => 
-                  <Main 
-                    httpClient={http} 
-                    {...props} 
-                    setBreadcrumbs={chrome.setBreadcrumbs} 
-                  />
-                } 
-              />
+              <Switch>
+                <Route
+                  exact
+                  path="/"
+                  render={(props) => (
+                    <Main
+                      httpClient={http}
+                      {...props}
+                      setBreadcrumbs={chrome.setBreadcrumbs}
+                      isAccelerationFlyoutOpen={false}
+                      urlDataSource=""
+                    />
+                  )}
+                />
+                <Route
+                  exact
+                  path="/:dataSource"
+                  render={(props) => (
+                    <Main
+                      httpClient={http}
+                      {...props}
+                      setBreadcrumbs={chrome.setBreadcrumbs}
+                      isAccelerationFlyoutOpen={false}
+                      urlDataSource={props.match.params.dataSource}
+                    />
+                  )}
+                />
+                <Route
+                  exact
+                  path="/accelerate/:dataSource"
+                  render={(props) => (
+                    <Main
+                      httpClient={http}
+                      {...props}
+                      setBreadcrumbs={chrome.setBreadcrumbs}
+                      isAccelerationFlyoutOpen={true}
+                      urlDataSource={props.match.params.dataSource}
+                    />
+                  )}
+                />
+              </Switch>
             </EuiPageBody>
           </EuiPage>
         </div>
       </I18nProvider>
-    </Router>
+    </HashRouter>
   );
 };
diff --git a/test/mocks/accelerationMock.ts b/test/mocks/accelerationMock.ts
index 154dbd22..085459de 100644
--- a/test/mocks/accelerationMock.ts
+++ b/test/mocks/accelerationMock.ts
@@ -201,8 +201,7 @@ export const skippingIndexBuilderMock1: CreateAccelerationForm = {
   checkpointLocation: 's3://test/',
 };
 
-export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX 
-[IF NOT EXISTS]
+export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX
 ON datasource.database.table
   FOR COLUMNS (
    field1 PARTITION, 
@@ -234,8 +233,7 @@ export const skippingIndexBuilderMock2: CreateAccelerationForm = {
   checkpointLocation: 's3://test/',
 };
 
-export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX 
-[IF NOT EXISTS]
+export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX
 ON datasource.database.table
   FOR COLUMNS (
    field1 PARTITION
@@ -263,7 +261,6 @@ export const coveringIndexBuilderMock1: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult1 = `CREATE INDEX index_name
-[IF NOT EXISTS]
 ON datasource.database.table
   FOR COLUMNS (
    field1, 
@@ -290,7 +287,6 @@ export const coveringIndexBuilderMock2: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult2 = `CREATE INDEX index_name
-[IF NOT EXISTS]
 ON datasource.database.table
   FOR COLUMNS (
    field1
@@ -330,7 +326,6 @@ export const materializedViewBuilderMock1: CreateAccelerationForm = {
 };
 
 export const materializedViewBuilderMockResult1 = `CREATE MATERIALIZED VIEW datasource.database.index_name
-[IF NOT EXISTS]
 AS SELECT
    count(field) AS counter, 
    count(*) AS counter1, 
@@ -366,7 +361,6 @@ export const materializedViewBuilderMock2: CreateAccelerationForm = {
 };
 
 export const materializedViewBuilderMockResult2 = `CREATE MATERIALIZED VIEW datasource.database.index_name
-[IF NOT EXISTS]
 AS SELECT
    count(field)
 FROM datasource.database.table

From 188d57e73054eb33164456f6ead4fbf98afeb873 Mon Sep 17 00:00:00 2001
From: Paul Sebastian <paulstn@amazon.com>
Date: Wed, 4 Oct 2023 11:19:09 -0700
Subject: [PATCH 37/40] disable buttons while running async query (#136)

* disable most buttons

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* code editor read only

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

* disabled accelerate button

Signed-off-by: Paul Sebastian <paulstn@amazon.com>

---------

Signed-off-by: Paul Sebastian <paulstn@amazon.com>
---
 public/components/Main/main.tsx               |  9 ++-
 public/components/PPLPage/PPLPage.tsx         | 11 ++-
 .../components/QueryLanguageSwitch/Switch.tsx | 71 ++++++++++---------
 public/components/SQLPage/DataSelect.tsx      |  4 +-
 public/components/SQLPage/SQLPage.tsx         | 12 +++-
 5 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 789e8404..d173e223 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -423,7 +423,7 @@ export class Main extends React.Component<MainProps, MainState> {
                 lang: language,
                 query: query,
                 datasource: this.state.selectedDatasource[0].label,
-              }), // TODO: dynamically datasource when accurate
+              }),
             })
             .catch((error: any) => {
               this.setState({
@@ -891,11 +891,16 @@ export class Main extends React.Component<MainProps, MainState> {
               http={this.httpClient}
               onSelect={this.handleDataSelect}
               urlDataSource={this.props.urlDataSource}
+              asyncLoading={this.state.asyncLoading}
             />
             <EuiSpacer />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <Switch onChange={this.onChange} language={this.state.language} />
+            <Switch
+              onChange={this.onChange}
+              language={this.state.language}
+              asyncLoading={this.state.asyncLoading}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index 69530e8f..4130bea7 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -117,6 +117,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             showGutter: false,
           }}
           aria-label="Code Editor"
+          isReadOnly={this.props.asyncLoading}
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">
@@ -140,10 +141,16 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               this.props.onClear();
             }}
           >
-            <EuiButton className="sql-editor-button">Clear</EuiButton>
+            <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+              Clear
+            </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
-            <EuiButton className="sql-editor-button" onClick={showModal}>
+            <EuiButton
+              className="sql-editor-button"
+              onClick={showModal}
+              isDisabled={this.props.asyncLoading}
+            >
               Explain
             </EuiButton>
             {modal}
diff --git a/public/components/QueryLanguageSwitch/Switch.tsx b/public/components/QueryLanguageSwitch/Switch.tsx
index 3f3b7aad..2311de84 100644
--- a/public/components/QueryLanguageSwitch/Switch.tsx
+++ b/public/components/QueryLanguageSwitch/Switch.tsx
@@ -3,53 +3,54 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React from "react";
-import _ from "lodash";
-import { EuiButtonGroup } from "@elastic/eui";
+import React from 'react';
+import _ from 'lodash';
+import { EuiButtonGroup } from '@elastic/eui';
 // @ts-ignore
-import { htmlIdGenerator } from "@elastic/eui/lib/services";
+import { htmlIdGenerator } from '@elastic/eui/lib/services';
 
 interface SwitchProps {
-    onChange: (id: string, value?: any) => void;
-    language: string;
+  onChange: (id: string, value?: any) => void;
+  language: string;
+  asyncLoading: boolean;
 }
 
 interface SwitchState {
-    // language: string
+  // language: string
 }
 
 const toggleButtons = [
-    {
-        id: 'SQL',
-        label: 'SQL',
-    },
-    {
-        id: 'PPL',
-        label: 'PPL',
-    },
+  {
+    id: 'SQL',
+    label: 'SQL',
+  },
+  {
+    id: 'PPL',
+    label: 'PPL',
+  },
 ];
 
 class Switch extends React.Component<SwitchProps, SwitchState> {
-    constructor(props: SwitchProps) {
-        super(props);
-        this.state = {
-            language: 'SQL'
-        };
-    }
-
-    render() {
-
-        return (
-            <EuiButtonGroup className="query-language-switch"
-                legend="query-language-swtich"
-                options={toggleButtons}
-                onChange={(id) => this.props.onChange(id)}
-                idSelected={this.props.language}
-                buttonSize="m"
-            />
-        )
-    }
+  constructor(props: SwitchProps) {
+    super(props);
+    this.state = {
+      language: 'SQL',
+    };
+  }
+
+  render() {
+    return (
+      <EuiButtonGroup
+        className="query-language-switch"
+        legend="query-language-swtich"
+        options={toggleButtons}
+        onChange={(id) => this.props.onChange(id)}
+        idSelected={this.props.language}
+        buttonSize="m"
+        isDisabled={this.props.asyncLoading}
+      />
+    );
+  }
 }
 
 export default Switch;
diff --git a/public/components/SQLPage/DataSelect.tsx b/public/components/SQLPage/DataSelect.tsx
index 0fe25e03..e2448b69 100644
--- a/public/components/SQLPage/DataSelect.tsx
+++ b/public/components/SQLPage/DataSelect.tsx
@@ -11,9 +11,10 @@ interface CustomView {
   http: CoreStart['http'];
   onSelect: (selectedItems: []) => void;
   urlDataSource: string;
+  asyncLoading: boolean;
 }
 
-export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
+export const DataSelect = ({ http, onSelect, urlDataSource, asyncLoading }: CustomView) => {
   const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionOption[]>([
     { label: 'OpenSearch' },
   ]);
@@ -84,6 +85,7 @@ export const DataSelect = ({ http, onSelect, urlDataSource }: CustomView) => {
       options={options}
       selectedOptions={selectedOptions}
       onChange={(selectedItems) => handleSelectionChange(selectedItems)}
+      isDisabled={asyncLoading}
     />
   );
 };
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 6deab093..6d6436c8 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -141,6 +141,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
               enableLiveAutocompletion: true,
             }}
             aria-label="Code Editor"
+            isReadOnly={this.props.asyncLoading}
           />
           <EuiSpacer />
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -162,13 +163,19 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     this.props.onClear();
                   }}
                 >
-                  <EuiButton className="sql-editor-button">Clear</EuiButton>
+                  <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+                    Clear
+                  </EuiButton>
                 </EuiFlexItem>
                 <EuiFlexItem
                   grow={false}
                   onClick={() => this.props.onTranslate(this.props.sqlQuery)}
                 >
-                  <EuiButton className="sql-editor-button" onClick={showModal}>
+                  <EuiButton
+                    className="sql-editor-button"
+                    onClick={showModal}
+                    isDisabled={this.props.asyncLoading}
+                  >
                     Explain
                   </EuiButton>
                 </EuiFlexItem>
@@ -181,6 +188,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
                     fill={true}
                     className="sql-accelerate-button"
                     onClick={this.setAccelerationFlyout}
+                    isDisabled={this.props.asyncLoading}
                   >
                     Accelerate Table
                   </EuiButton>

From e8b22121abe3a9e22b99ba65b58fb47212965130 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Wed, 4 Oct 2023 14:04:02 -0700
Subject: [PATCH 38/40] Design changes for the sidebar and update to create
 button (#138)

* added changes for loading, create button

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* removed comments, updated snapshots

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed pr comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated snapshots, constant for skipping index

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

---------

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 common/constants/index.ts                     |   24 +
 .../Main/__snapshots__/main.test.tsx.snap     | 1003 +++++++++--------
 public/components/Main/main.tsx               |    9 +-
 public/components/SQLPage/CreateButton.tsx    |  100 ++
 public/components/SQLPage/SQLPage.tsx         |    4 +-
 public/components/SQLPage/TableView.tsx       |   86 +-
 6 files changed, 760 insertions(+), 466 deletions(-)
 create mode 100644 public/components/SQLPage/CreateButton.tsx

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 6a796871..4fc24444 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -8,7 +8,31 @@ export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
+export const SKIPPING_INDEX = `skipping_index`
 export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
+export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs 
+(status VALUE_SET) 
+WITH (
+  auto_refresh = true
+  )`
+export const COVERING_INDEX_QUERY =`CREATE INDEX covering_idx ON myS3.logs_db.http_logs
+ (status) 
+ WITH (
+  auto_refresh = true
+  )`
+export const CREATE_DATABASE_QUERY =`CREATE DATABASE myS3.logs_db`
+export const CREATE_TABLE_QUERY =`CREATE EXTERNAL TABLE logs (
+  key BIGINT,
+  status INTEGER,
+  size FLOAT,
+  agent STRING,
+  timestamp DATE
+)
+USING JSON
+OPTIONS (
+  path 's3://test/path',
+  compression 'gzip'
+);`
 
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index 8b0d7301..ff0dd051 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -203,16 +203,59 @@ exports[`<Main /> spec click clear button 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                <div
+                  class="euiPopover__anchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    type="button"
+                  >
+                    <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
+                        />
+                      </svg>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiEmptyPrompt"
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
                     focusable="false"
                     height="16"
                     role="img"
@@ -221,47 +264,20 @@ exports[`<Main /> spec click clear button 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                      fill-rule="evenodd"
                     />
                   </svg>
-                  <span
-                    class="euiButton__text"
+                  <div
+                    class="euiSpacer euiSpacer--m"
+                  />
+                  <h2
+                    class="euiTitle euiTitle--medium"
                   >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiEmptyPrompt"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="euiSpacer euiSpacer--m"
-              />
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Error loading Datasources
-              </h2>
+                    Error loading Datasources
+                  </h2>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -746,16 +762,59 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
+              >
+                <div
+                  class="euiPopover__anchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    type="button"
+                  >
+                    <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
+                        />
+                      </svg>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
               >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                <div
+                  class="euiEmptyPrompt"
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
                     focusable="false"
                     height="16"
                     role="img"
@@ -764,47 +823,20 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                      fill-rule="evenodd"
                     />
                   </svg>
-                  <span
-                    class="euiButton__text"
+                  <div
+                    class="euiSpacer euiSpacer--m"
+                  />
+                  <h2
+                    class="euiTitle euiTitle--medium"
                   >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiEmptyPrompt"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="euiSpacer euiSpacer--m"
-              />
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Error loading Datasources
-              </h2>
+                    Error loading Datasources
+                  </h2>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -1289,16 +1321,59 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                <div
+                  class="euiPopover__anchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    type="button"
+                  >
+                    <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
+                        />
+                      </svg>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiEmptyPrompt"
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
                     focusable="false"
                     height="16"
                     role="img"
@@ -1307,47 +1382,20 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                      fill-rule="evenodd"
                     />
                   </svg>
-                  <span
-                    class="euiButton__text"
+                  <div
+                    class="euiSpacer euiSpacer--m"
+                  />
+                  <h2
+                    class="euiTitle euiTitle--medium"
                   >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiEmptyPrompt"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="euiSpacer euiSpacer--m"
-              />
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Error loading Datasources
-              </h2>
+                    Error loading Datasources
+                  </h2>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -1832,70 +1880,22 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
-              >
-                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
-                    />
-                  </svg>
-                  <span
-                    class="euiButton__text"
-                  >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiText euiText--medium euiTreeView__wrapper"
-            >
-              <p
-                class="euiScreenReaderOnly"
-                id="some_html_id--instruction"
-              >
-                You can quickly navigate this list using arrow keys.
-              </p>
-              <ul
-                aria-describedby="some_html_id--instruction"
-                aria-label="Sample Folder Tree"
-                class="euiTreeView"
-                id="some_html_id"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <li
-                  class="euiTreeView__node"
+                <div
+                  class="euiPopover__anchor"
                 >
                   <button
-                    aria-controls="some_html_id"
-                    aria-expanded="false"
-                    class="euiTreeView__nodeInner"
-                    data-test-subj="euiTreeViewButton-some_html_id"
-                    id="element_0"
+                    class="euiButton euiButton--primary"
+                    type="button"
                   >
                     <span
-                      class="euiTreeView__iconWrapper"
+                      class="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
                       <svg
                         aria-hidden="true"
-                        class="euiIcon euiIcon--medium"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
                         height="16"
                         role="img"
@@ -1904,63 +1904,129 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
                         />
                       </svg>
-                    </span>
-                    <span
-                      class="euiTreeView__nodeLabel"
-                    >
-                      <div>
-                        2
-                      </div>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
                     </span>
                   </button>
-                  <div
-                    id="some_html_id"
-                  />
-                </li>
-                <li
-                  class="euiTreeView__node"
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium euiTreeView__wrapper"
                 >
-                  <button
-                    aria-controls="some_html_id"
-                    aria-expanded="false"
-                    class="euiTreeView__nodeInner"
-                    data-test-subj="euiTreeViewButton-some_html_id"
-                    id="element_1"
+                  <p
+                    class="euiScreenReaderOnly"
+                    id="some_html_id--instruction"
                   >
-                    <span
-                      class="euiTreeView__iconWrapper"
+                    You can quickly navigate this list using arrow keys.
+                  </p>
+                  <ul
+                    aria-describedby="some_html_id--instruction"
+                    aria-label="Sample Folder Tree"
+                    class="euiTreeView"
+                    id="some_html_id"
+                  >
+                    <li
+                      class="euiTreeView__node"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--medium"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        aria-controls="some_html_id"
+                        aria-expanded="false"
+                        class="euiTreeView__nodeInner"
+                        data-test-subj="euiTreeViewButton-some_html_id"
+                        id="element_0"
                       >
-                        <path
-                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      class="euiTreeView__nodeLabel"
+                        <span
+                          class="euiTreeView__iconWrapper"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="euiTreeView__nodeLabel"
+                        >
+                          <div>
+                            2
+                             
+                          </div>
+                        </span>
+                      </button>
+                      <div
+                        id="some_html_id"
+                      />
+                    </li>
+                    <li
+                      class="euiTreeView__node"
                     >
-                      <div>
-                        2
-                      </div>
-                    </span>
-                  </button>
-                  <div
-                    id="some_html_id"
-                  />
-                </li>
-              </ul>
+                      <button
+                        aria-controls="some_html_id"
+                        aria-expanded="false"
+                        class="euiTreeView__nodeInner"
+                        data-test-subj="euiTreeViewButton-some_html_id"
+                        id="element_1"
+                      >
+                        <span
+                          class="euiTreeView__iconWrapper"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="euiTreeView__nodeLabel"
+                        >
+                          <div>
+                            2
+                             
+                          </div>
+                        </span>
+                      </button>
+                      <div
+                        id="some_html_id"
+                      />
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -2445,70 +2511,22 @@ exports[`<Main /> spec click run button, response fills null and missing values
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
-              >
-                <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
-                    />
-                  </svg>
-                  <span
-                    class="euiButton__text"
-                  >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiText euiText--medium euiTreeView__wrapper"
-            >
-              <p
-                class="euiScreenReaderOnly"
-                id="some_html_id--instruction"
-              >
-                You can quickly navigate this list using arrow keys.
-              </p>
-              <ul
-                aria-describedby="some_html_id--instruction"
-                aria-label="Sample Folder Tree"
-                class="euiTreeView"
-                id="some_html_id"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <li
-                  class="euiTreeView__node"
+                <div
+                  class="euiPopover__anchor"
                 >
                   <button
-                    aria-controls="some_html_id"
-                    aria-expanded="false"
-                    class="euiTreeView__nodeInner"
-                    data-test-subj="euiTreeViewButton-some_html_id"
-                    id="element_0"
+                    class="euiButton euiButton--primary"
+                    type="button"
                   >
                     <span
-                      class="euiTreeView__iconWrapper"
+                      class="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
                       <svg
                         aria-hidden="true"
-                        class="euiIcon euiIcon--medium"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
                         height="16"
                         role="img"
@@ -2517,59 +2535,127 @@ exports[`<Main /> spec click run button, response fills null and missing values
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
                         />
                       </svg>
-                    </span>
-                    <span
-                      class="euiTreeView__nodeLabel"
-                    >
-                      <div />
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
                     </span>
                   </button>
-                  <div
-                    id="some_html_id"
-                  />
-                </li>
-                <li
-                  class="euiTreeView__node"
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium euiTreeView__wrapper"
                 >
-                  <button
-                    aria-controls="some_html_id"
-                    aria-expanded="false"
-                    class="euiTreeView__nodeInner"
-                    data-test-subj="euiTreeViewButton-some_html_id"
-                    id="element_1"
+                  <p
+                    class="euiScreenReaderOnly"
+                    id="some_html_id--instruction"
                   >
-                    <span
-                      class="euiTreeView__iconWrapper"
+                    You can quickly navigate this list using arrow keys.
+                  </p>
+                  <ul
+                    aria-describedby="some_html_id--instruction"
+                    aria-label="Sample Folder Tree"
+                    class="euiTreeView"
+                    id="some_html_id"
+                  >
+                    <li
+                      class="euiTreeView__node"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="euiIcon euiIcon--medium"
-                        focusable="false"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        aria-controls="some_html_id"
+                        aria-expanded="false"
+                        class="euiTreeView__nodeInner"
+                        data-test-subj="euiTreeViewButton-some_html_id"
+                        id="element_0"
                       >
-                        <path
-                          d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
-                        />
-                      </svg>
-                    </span>
-                    <span
-                      class="euiTreeView__nodeLabel"
+                        <span
+                          class="euiTreeView__iconWrapper"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="euiTreeView__nodeLabel"
+                        >
+                          <div>
+                             
+                          </div>
+                        </span>
+                      </button>
+                      <div
+                        id="some_html_id"
+                      />
+                    </li>
+                    <li
+                      class="euiTreeView__node"
                     >
-                      <div />
-                    </span>
-                  </button>
-                  <div
-                    id="some_html_id"
-                  />
-                </li>
-              </ul>
+                      <button
+                        aria-controls="some_html_id"
+                        aria-expanded="false"
+                        class="euiTreeView__nodeInner"
+                        data-test-subj="euiTreeViewButton-some_html_id"
+                        id="element_1"
+                      >
+                        <span
+                          class="euiTreeView__iconWrapper"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="euiTreeView__nodeLabel"
+                        >
+                          <div>
+                             
+                          </div>
+                        </span>
+                      </button>
+                      <div
+                        id="some_html_id"
+                      />
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -3057,16 +3143,59 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                <div
+                  class="euiPopover__anchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    type="button"
+                  >
+                    <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.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                          fill-rule="non-zero"
+                        />
+                      </svg>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiEmptyPrompt"
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    class="euiIcon euiIcon--xxLarge euiIcon--danger"
                     focusable="false"
                     height="16"
                     role="img"
@@ -3075,47 +3204,20 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
+                      fill-rule="evenodd"
                     />
                   </svg>
-                  <span
-                    class="euiButton__text"
+                  <div
+                    class="euiSpacer euiSpacer--m"
+                  />
+                  <h2
+                    class="euiTitle euiTitle--medium"
                   >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiEmptyPrompt"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--xxLarge euiIcon--danger"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <div
-                class="euiSpacer euiSpacer--m"
-              />
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Error loading Datasources
-              </h2>
+                    Error loading Datasources
+                  </h2>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
@@ -3591,65 +3693,22 @@ exports[`<Main /> spec renders the component 1`] = `
             <div
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <button
-                class="euiButton euiButton--primary euiButton--fullWidth"
-                type="button"
-              >
-                <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"
-                  >
-                    Create
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiText euiText--medium euiTreeView__wrapper"
-            >
-              <p
-                class="euiScreenReaderOnly"
-                id="some_html_id--instruction"
-              >
-                You can quickly navigate this list using arrow keys.
-              </p>
-              <ul
-                aria-describedby="some_html_id--instruction"
-                aria-label="Sample Folder Tree"
-                class="euiTreeView"
-                id="some_html_id"
+              <div
+                class="euiPopover euiPopover--anchorDownLeft"
               >
-                <li
-                  class="euiTreeView__node"
+                <div
+                  class="euiPopover__anchor"
                 >
                   <button
-                    aria-controls="some_html_id"
-                    aria-expanded="false"
-                    class="euiTreeView__nodeInner"
-                    data-test-subj="euiTreeViewButton-some_html_id"
-                    id="element_0"
+                    class="euiButton euiButton--primary"
+                    type="button"
                   >
                     <span
-                      class="euiTreeView__iconWrapper"
+                      class="euiButtonContent euiButtonContent--iconRight euiButton__content"
                     >
                       <svg
                         aria-hidden="true"
-                        class="euiIcon euiIcon--medium euiIcon-isLoading"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                         focusable="false"
                         height="16"
                         role="img"
@@ -3657,20 +3716,80 @@ exports[`<Main /> spec renders the component 1`] = `
                         width="16"
                         xmlns="http://www.w3.org/2000/svg"
                       />
-                    </span>
-                    <span
-                      class="euiTreeView__nodeLabel"
-                    >
-                      <div>
-                        .kibana_1
-                      </div>
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
                     </span>
                   </button>
-                  <div
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiText euiText--medium euiTreeView__wrapper"
+                >
+                  <p
+                    class="euiScreenReaderOnly"
+                    id="some_html_id--instruction"
+                  >
+                    You can quickly navigate this list using arrow keys.
+                  </p>
+                  <ul
+                    aria-describedby="some_html_id--instruction"
+                    aria-label="Sample Folder Tree"
+                    class="euiTreeView"
                     id="some_html_id"
-                  />
-                </li>
-              </ul>
+                  >
+                    <li
+                      class="euiTreeView__node"
+                    >
+                      <button
+                        aria-controls="some_html_id"
+                        aria-expanded="false"
+                        class="euiTreeView__nodeInner"
+                        data-test-subj="euiTreeViewButton-some_html_id"
+                        id="element_0"
+                      >
+                        <span
+                          class="euiTreeView__iconWrapper"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium euiIcon-isLoading"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </span>
+                        <span
+                          class="euiTreeView__nodeLabel"
+                        >
+                          <div>
+                            .kibana_1
+                             
+                          </div>
+                        </span>
+                      </button>
+                      <div
+                        id="some_html_id"
+                      />
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
             <div
               class="euiSpacer euiSpacer--l"
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index d173e223..046554dc 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -14,7 +14,7 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText,
+  EuiText
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -32,6 +32,7 @@ import {
 import { PPLPage } from '../PPLPage/PPLPage';
 import Switch from '../QueryLanguageSwitch/Switch';
 import QueryResults from '../QueryResults/QueryResults';
+import { CreateButton } from '../SQLPage/CreateButton';
 import { DataSelect } from '../SQLPage/DataSelect';
 import { SQLPage } from '../SQLPage/SQLPage';
 import { TableView } from '../SQLPage/TableView';
@@ -915,9 +916,9 @@ export class Main extends React.Component<MainProps, MainState> {
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <EuiButton iconType="arrowDown" iconSide="right" fullWidth>
-                        Create
-                      </EuiButton>
+                      <CreateButton
+                        updateSQLQueries={this.updateSQLQueries}
+                      />
                     </EuiFlexItem>
                     <EuiSpacer />
                     <TableView
diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx
new file mode 100644
index 00000000..9e4db734
--- /dev/null
+++ b/public/components/SQLPage/CreateButton.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import React, { useState } from 'react';
+import { COVERING_INDEX_QUERY, CREATE_DATABASE_QUERY, CREATE_TABLE_QUERY, SKIPPING_INDEX_QUERY } from '../../../common/constants';
+
+
+interface CreateButtonProps {
+  updateSQLQueries: (query: string) => void
+}
+
+export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const closePopover = () => {
+    setIsPopoverOpen(false);
+  };
+
+  const togglePopover = (option) => {
+    setSelectedOption(option);
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  const handleSubMenuClick = (query: string) => {
+    updateSQLQueries(query)
+    closePopover();
+  };
+
+  const fromSqlItems = [
+    {
+      name: 'Create Table',
+      onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY),
+    },
+    {
+      name: 'SQL Command',
+      onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY),
+    },
+  ];
+
+  const acceleratedIndexItems = [
+    {
+      name: 'Skipping Index',
+      onClick: () => handleSubMenuClick(SKIPPING_INDEX_QUERY),
+    },
+    {
+      name: 'Covering Index',
+      onClick: () => handleSubMenuClick(COVERING_INDEX_QUERY),
+    },
+  ];
+
+  const button = (
+    <EuiButton iconType="arrowDown" iconSide="right" onClick={() => togglePopover(null)}>
+      Create
+    </EuiButton>
+  );
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="s"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu
+        initialPanelId={0}
+        panels={[
+          {
+            id: 0,
+            title: 'Choose an option',
+            items: [
+              {
+                name: 'FROM SQL',
+                panel: 1,
+              },
+              {
+                name: 'Accelerated Index',
+                panel: 2,
+              },
+            ],
+          },
+          {
+            id: 1,
+            title: 'FROM SPARK SQL Options',
+            items: fromSqlItems,
+          },
+          {
+            id: 2,
+            title: 'Accelerated Index Options',
+            items: acceleratedIndexItems,
+          },
+        ]}
+      />
+    </EuiPopover>
+  );
+}
\ No newline at end of file
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 6d6436c8..9894b143 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -17,7 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiPanel,
-  EuiSpacer,
+  EuiSpacer
 } from '@elastic/eui';
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
@@ -124,7 +124,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <>
+      <>  
         <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
           <EuiSpacer size="s" />
           <EuiCodeEditor
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
index fcc78657..f3c97f24 100644
--- a/public/components/SQLPage/TableView.tsx
+++ b/public/components/SQLPage/TableView.tsx
@@ -3,11 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBoxOptionOption, EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui';
+import {
+  EuiComboBoxOptionOption,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLoadingSpinner,
+  EuiTreeView,
+} from '@elastic/eui';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { CoreStart } from '../../../../../src/core/public';
-import { ON_LOAD_QUERY } from '../../../common/constants';
+import { ON_LOAD_QUERY, SKIPPING_INDEX } from '../../../common/constants';
 import { AccelerationIndexFlyout } from './acceleration_index_flyout';
 import { getJobId, pollQueryStatus } from './utils';
 
@@ -48,6 +56,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       />
     );
   };
+  const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({});
+  const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({});
 
   const get_async_query_results = (id, http, callback) => {
     pollQueryStatus(id, http, callback);
@@ -73,6 +83,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
           console.error(err);
         });
     } else {
+      setIsLoading(true);
       setTablenames([]);
       const query = {
         lang: 'sql',
@@ -82,6 +93,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       getJobId(query, http, (id) => {
         get_async_query_results(id, http, (data) => {
           setTablenames(data);
+          setIsLoading(false);
         });
       });
     }
@@ -98,10 +110,19 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`,
       datasource: selectedItems[0]['label'],
     };
+    setTableLoadingStates((prevState) => ({
+      ...prevState,
+      [nodeLabel]: true,
+    }));
     getJobId(query, http, (id) => {
       get_async_query_results(id, http, (data) => {
         data = data.map((subArray) => subArray[1]);
         setChildData(data);
+
+        setTableLoadingStates((prevState) => ({
+          ...prevState,
+          [nodeLabel]: false,
+        }));
       });
     });
   };
@@ -115,7 +136,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     getJobId(coverQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
         data = [].concat(...data);
-        indiciesData.push(data);
+        indiciesData.concat(data);
         setIndexedData(indiciesData);
       });
     });
@@ -127,23 +148,35 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`,
       datasource: selectedItems[0]['label'],
     };
+    setChildLoadingStates((prevState) => ({
+      ...prevState,
+      [nodeLabel1]: true,
+    }));
+
     getJobId(skipQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
         if (data.length > 0) {
-          indiciesData.push('skip_index');
+          indiciesData.push(SKIPPING_INDEX);
           callCoverQuery(nodeLabel1);
+
+          setChildLoadingStates((prevState) => ({
+            ...prevState,
+            [nodeLabel1]: false,
+          }));
         }
       });
     });
   };
 
   const treeData = tablenames.map((database, index) => ({
-    label: <div>{database}</div>,
+    label: (
+      <div>
+        {database} {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
+      </div>
+    ),
     icon: <EuiIcon type="database" size="m" />,
     id: 'element_' + index,
     callback: () => {
-      setChildData([]);
-      setIsLoading(true);
       handleNodeClick(database);
     },
     isSelectable: true,
@@ -151,7 +184,11 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     children:
       selectedNode === database
         ? childData.map((table) => ({
-            label: <div>{table}</div>,
+            label: (
+              <div>
+                {table} {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
+              </div>
+            ),
             id: `${database}_${table}`,
             icon: <EuiIcon type="tableDensityCompact" size="s" />,
             callback: () => {
@@ -181,16 +218,29 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
 
   return (
     <>
-      {treeData.length > 0 ? (
-        <EuiTreeView aria-label="Sample Folder Tree" items={treeData} />
-      ) : (
-        <EuiEmptyPrompt
-          iconType="alert"
-          iconColor="danger"
-          title={<h2>Error loading Datasources</h2>}
-        />
-      )}
-      {indexFlyout}
+      <EuiFlexGroup>
+        {isLoading ? (
+          <EuiFlexGroup alignItems="center" gutterSize='s'>
+            <EuiFlexItem grow={false}>Loading your databases</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="m" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : treeData.length > 0 ? (
+          <EuiFlexItem grow={false}>
+            <EuiTreeView aria-label="Sample Folder Tree" items={treeData} />
+          </EuiFlexItem>
+        ) : (
+          <EuiFlexItem grow={false}>
+            <EuiEmptyPrompt
+              iconType="alert"
+              iconColor="danger"
+              title={<h2>Error loading Datasources</h2>}
+            />
+          </EuiFlexItem>
+        )}
+        {indexFlyout}
+      </EuiFlexGroup>
     </>
   );
 };

From 9a5a20fb9eb00b5b630afd0226e153a1f6fd6041 Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Wed, 4 Oct 2023 14:18:41 -0700
Subject: [PATCH 39/40] Load table fields for acceleration index flyout (#137)

* load table fields after table is selected

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* simplify the map function

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 .../selectors/index_type_selector.tsx         | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 1e195c8f..5c8c9bca 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -18,7 +18,11 @@ import {
   ACCELERATION_INDEX_TYPES,
   ACC_INDEX_TYPE_DOCUMENTATION_URL,
 } from '../../../../common/constants';
-import { AccelerationIndexType, CreateAccelerationForm } from '../../../../common/types';
+import {
+  AccelerationIndexType,
+  CreateAccelerationForm,
+  DataTableFieldsType,
+} from '../../../../common/types';
 import { getJobId, pollQueryStatus } from '../../SQLPage/utils';
 
 interface IndexTypeSelectorProps {
@@ -48,22 +52,14 @@ export const IndexTypeSelector = ({
       };
       getJobId(query, http, (id: string) => {
         pollQueryStatus(id, http, (data: any[]) => {
+          const dataTableFields: DataTableFieldsType[] = data.map((field, index) => ({
+            id: `${idPrefix}${index + 1}`,
+            fieldName: field.col_name,
+            dataType: field.data_type,
+          }));
           setAccelerationFormData({
             ...accelerationFormData,
-            dataTableFields: [
-              { id: `${idPrefix}1`, fieldName: 'Field1', dataType: 'Integer' },
-              { id: `${idPrefix}2`, fieldName: 'Field2', dataType: 'Integer' },
-              { id: `${idPrefix}3`, fieldName: 'Field3', dataType: 'Integer' },
-              { id: `${idPrefix}4`, fieldName: 'Field4', dataType: 'Integer' },
-              { id: `${idPrefix}5`, fieldName: 'Field5', dataType: 'Integer' },
-              { id: `${idPrefix}6`, fieldName: 'Field6', dataType: 'Integer' },
-              { id: `${idPrefix}7`, fieldName: 'Field7', dataType: 'Integer' },
-              { id: `${idPrefix}8`, fieldName: 'Field8', dataType: 'Integer' },
-              { id: `${idPrefix}9`, fieldName: 'Field9', dataType: 'Integer' },
-              { id: `${idPrefix}10`, fieldName: 'Field10', dataType: 'Integer' },
-              { id: `${idPrefix}11`, fieldName: 'Field11', dataType: 'Integer' },
-              { id: `${idPrefix}12`, fieldName: 'Field12', dataType: 'TimestampType' },
-            ],
+            dataTableFields: dataTableFields,
           });
           setLoading(false);
         });

From 56a6bce458da6c765b69d2e0e074a627cb8fb71e Mon Sep 17 00:00:00 2001
From: Shenoy Pratik <sgguruda@amazon.com>
Date: Thu, 5 Oct 2023 09:39:40 -0700
Subject: [PATCH 40/40] Adding minor updates and bug fixes (#140)

* adding minor updates to acceleration ui

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* edits to acceleration index flyout

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* adding minor edits to table view

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update snapshots

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* remove console log

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* minor fixes to namings and tableview

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* update tableview clear db

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
---
 common/constants/index.ts                     |  16 +--
 .../Main/__snapshots__/main.test.tsx.snap     |  51 ++++++++-
 public/components/Main/main.tsx               |  11 +-
 public/components/PPLPage/PPLPage.tsx         |  15 ++-
 .../__snapshots__/PPLPage.test.tsx.snap       |   8 +-
 public/components/SQLPage/CreateButton.tsx    |  30 ++---
 public/components/SQLPage/SQLPage.tsx         |   4 +-
 public/components/SQLPage/TableView.tsx       |  60 ++++++----
 .../SQLPage/acceleration_index_flyout.tsx     | 104 ++++++++++--------
 public/components/SQLPage/utils.tsx           |  17 ++-
 .../selectors/index_type_selector.tsx         |  12 +-
 .../visual_editors/query_builder.tsx          |  12 +-
 test/mocks/accelerationMock.ts                |  12 +-
 13 files changed, 217 insertions(+), 135 deletions(-)

diff --git a/common/constants/index.ts b/common/constants/index.ts
index 4fc24444..ed37754e 100644
--- a/common/constants/index.ts
+++ b/common/constants/index.ts
@@ -8,20 +8,20 @@ export const PLUGIN_NAME = 'Query Workbench';
 export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest';
 
-export const SKIPPING_INDEX = `skipping_index`
+export const SKIPPING_INDEX = `skipping_index`;
 export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`;
 export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs 
 (status VALUE_SET) 
 WITH (
   auto_refresh = true
-  )`
-export const COVERING_INDEX_QUERY =`CREATE INDEX covering_idx ON myS3.logs_db.http_logs
+  )`;
+export const COVERING_INDEX_QUERY = `CREATE INDEX covering_idx ON myS3.logs_db.http_logs
  (status) 
  WITH (
   auto_refresh = true
-  )`
-export const CREATE_DATABASE_QUERY =`CREATE DATABASE myS3.logs_db`
-export const CREATE_TABLE_QUERY =`CREATE EXTERNAL TABLE logs (
+  )`;
+export const CREATE_DATABASE_QUERY = `CREATE DATABASE myS3.logs_db`;
+export const CREATE_TABLE_QUERY = `CREATE EXTERNAL TABLE myS3.logs_db.logs (
   key BIGINT,
   status INTEGER,
   size FLOAT,
@@ -32,7 +32,7 @@ USING JSON
 OPTIONS (
   path 's3://test/path',
   compression 'gzip'
-);`
+);`;
 
 export const ACCELERATION_INDEX_TYPES = [
   { label: 'Skipping Index', value: 'skipping' },
@@ -80,3 +80,5 @@ export const ACCELERATION_INDEX_NAME_INFO = `All OpenSearch acceleration indices
 ##### Note:
 - All user given index names must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, \, |, ?, #, >, or < are not allowed.  
   `;
+
+export const SIDEBAR_POLL_INTERVAL_MS = 5000;
diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
index ff0dd051..d8ef37d5 100644
--- a/public/components/Main/__snapshots__/main.test.tsx.snap
+++ b/public/components/Main/__snapshots__/main.test.tsx.snap
@@ -193,6 +193,7 @@ exports[`<Main /> spec click clear button 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -752,6 +753,7 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1311,6 +1313,7 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1870,6 +1873,7 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -1974,7 +1978,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
@@ -2015,7 +2027,15 @@ exports[`<Main /> spec click run button, and response is ok 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            2
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                2
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
@@ -2501,6 +2521,7 @@ exports[`<Main /> spec click run button, response fills null and missing values
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -2605,6 +2626,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
                              
                           </div>
                         </span>
@@ -2645,6 +2673,13 @@ exports[`<Main /> spec click run button, response fills null and missing values
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              />
+                            </span>
                              
                           </div>
                         </span>
@@ -3133,6 +3168,7 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3683,6 +3719,7 @@ exports[`<Main /> spec renders the component 1`] = `
     >
       <div
         class="euiPageSideBar"
+        style="max-width: 400px; width: 400px;"
       >
         <div
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
@@ -3778,7 +3815,15 @@ exports[`<Main /> spec renders the component 1`] = `
                           class="euiTreeView__nodeLabel"
                         >
                           <div>
-                            .kibana_1
+                            <span
+                              class="euiToolTipAnchor"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                .kibana_1
+                              </div>
+                            </span>
                              
                           </div>
                         </span>
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
index 046554dc..a8b38326 100644
--- a/public/components/Main/main.tsx
+++ b/public/components/Main/main.tsx
@@ -14,7 +14,7 @@ import {
   EuiPageSideBar,
   EuiPanel,
   EuiSpacer,
-  EuiText
+  EuiText,
 } from '@elastic/eui';
 import { IHttpResponse } from 'angular';
 import _ from 'lodash';
@@ -790,6 +790,9 @@ export class Main extends React.Component<MainProps, MainState> {
   }
 
   handleDataSelect = (selectedItems: []) => {
+    if (selectedItems[0].label !== 'OpenSearch' && this.state.language === 'SQL') {
+      this.updateSQLQueries('');
+    }
     this.setState({
       selectedDatasource: selectedItems,
     });
@@ -912,13 +915,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
-              <EuiPageSideBar>
+              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px' }}>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <CreateButton
-                        updateSQLQueries={this.updateSQLQueries}
-                      />
+                      <CreateButton updateSQLQueries={this.updateSQLQueries} />
                     </EuiFlexItem>
                     <EuiSpacer />
                     <TableView
diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index 4130bea7..98c5a920 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -3,25 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
 import {
-  EuiPanel,
   EuiButton,
+  EuiCodeBlock,
+  EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
-  EuiCodeEditor,
-  EuiSpacer,
-  EuiCodeBlock,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
+import React from 'react';
 import { ResponseDetail, TranslateResult } from '../Main/main';
-import _ from 'lodash';
 
 interface PPLPageProps {
   onRun: (query: string) => void;
@@ -107,7 +106,7 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         <EuiCodeEditor
           theme="sql_console"
           width="100%"
-          height="5rem"
+          height="7rem"
           value={this.props.pplQuery}
           onChange={this.props.updatePPLQueries}
           showPrintMargin={false}
diff --git a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
index c3c70679..2f2c4817 100644
--- a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
+++ b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -39,7 +39,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"
@@ -211,7 +211,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
     <div
       class="euiCodeEditorWrapper"
       data-test-subj="codeEditorContainer"
-      style="width: 100%; height: 5rem;"
+      style="width: 100%; height: 7rem;"
     >
       <button
         class="euiCodeEditorKeyboardHint"
@@ -232,7 +232,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
       <div
         class=" ace_editor ace-tm"
         id="some_html_id"
-        style="width: 100%; height: 5rem; font-size: 14px;"
+        style="width: 100%; height: 7rem; font-size: 14px;"
       >
         <textarea
           aria-label="Code Editor"
diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx
index 9e4db734..b7ccf53c 100644
--- a/public/components/SQLPage/CreateButton.tsx
+++ b/public/components/SQLPage/CreateButton.tsx
@@ -5,14 +5,18 @@
 
 import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
-import { COVERING_INDEX_QUERY, CREATE_DATABASE_QUERY, CREATE_TABLE_QUERY, SKIPPING_INDEX_QUERY } from '../../../common/constants';
-
+import {
+  COVERING_INDEX_QUERY,
+  CREATE_DATABASE_QUERY,
+  CREATE_TABLE_QUERY,
+  SKIPPING_INDEX_QUERY,
+} from '../../../common/constants';
 
 interface CreateButtonProps {
-  updateSQLQueries: (query: string) => void
+  updateSQLQueries: (query: string) => void;
 }
 
-export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
+export const CreateButton = ({ updateSQLQueries }: CreateButtonProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(null);
 
@@ -26,17 +30,17 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
   };
 
   const handleSubMenuClick = (query: string) => {
-    updateSQLQueries(query)
+    updateSQLQueries(query);
     closePopover();
   };
 
   const fromSqlItems = [
     {
-      name: 'Create Table',
+      name: 'Create Database',
       onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY),
     },
     {
-      name: 'SQL Command',
+      name: 'Create Table',
       onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY),
     },
   ];
@@ -71,30 +75,30 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
         panels={[
           {
             id: 0,
-            title: 'Choose an option',
+            title: 'Create options',
             items: [
               {
-                name: 'FROM SQL',
+                name: 'Spark SQL',
                 panel: 1,
               },
               {
-                name: 'Accelerated Index',
+                name: 'Acceleration Index',
                 panel: 2,
               },
             ],
           },
           {
             id: 1,
-            title: 'FROM SPARK SQL Options',
+            title: 'SPARK SQL Options',
             items: fromSqlItems,
           },
           {
             id: 2,
-            title: 'Accelerated Index Options',
+            title: 'Acceleration Index Options',
             items: acceleratedIndexItems,
           },
         ]}
       />
     </EuiPopover>
   );
-}
\ No newline at end of file
+};
diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx
index 9894b143..6d6436c8 100644
--- a/public/components/SQLPage/SQLPage.tsx
+++ b/public/components/SQLPage/SQLPage.tsx
@@ -17,7 +17,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiPanel,
-  EuiSpacer
+  EuiSpacer,
 } from '@elastic/eui';
 import 'brace/ext/language_tools';
 import 'brace/mode/sql';
@@ -124,7 +124,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> {
     }
 
     return (
-      <>  
+      <>
         <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m">
           <EuiSpacer size="s" />
           <EuiCodeEditor
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
index f3c97f24..017fbf19 100644
--- a/public/components/SQLPage/TableView.tsx
+++ b/public/components/SQLPage/TableView.tsx
@@ -10,6 +10,8 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiLoadingSpinner,
+  EuiText,
+  EuiToolTip,
   EuiTreeView,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -32,8 +34,11 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
   const [indexData, setIndexedData] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [indiciesData, setIndiciesData] = useState<string[]>([]);
   const [indexFlyout, setIndexFlyout] = useState(<></>);
+  const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({});
+  const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({});
+
+  let indiciesData: string[] = [];
 
   const resetFlyout = () => {
     setIndexFlyout(<></>);
@@ -56,15 +61,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       />
     );
   };
-  const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({});
-  const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({});
 
   const get_async_query_results = (id, http, callback) => {
     pollQueryStatus(id, http, callback);
   };
 
   const getSidebarContent = () => {
-    if (selectedItems[0].label == 'OpenSearch') {
+    if (selectedItems[0].label === 'OpenSearch') {
       setTablenames([]);
       const query = { query: ON_LOAD_QUERY };
       http
@@ -100,6 +103,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   };
 
   useEffect(() => {
+    setIsLoading(false);
     getSidebarContent();
   }, [selectedItems]);
 
@@ -135,9 +139,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     };
     getJobId(coverQuery, http, (id) => {
       get_async_query_results(id, http, (data) => {
-        data = [].concat(...data);
-        indiciesData.concat(data);
-        setIndexedData(indiciesData);
+        const res = [].concat(data);
+        const final = indiciesData.concat(...res);
+        setIndexedData(final);
+        setChildLoadingStates((prevState) => ({
+          ...prevState,
+          [nodeLabel1]: false,
+        }));
       });
     });
   };
@@ -157,13 +165,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
       get_async_query_results(id, http, (data) => {
         if (data.length > 0) {
           indiciesData.push(SKIPPING_INDEX);
-          callCoverQuery(nodeLabel1);
-
-          setChildLoadingStates((prevState) => ({
-            ...prevState,
-            [nodeLabel1]: false,
-          }));
         }
+        callCoverQuery(nodeLabel1);
       });
     });
   };
@@ -171,13 +174,17 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   const treeData = tablenames.map((database, index) => ({
     label: (
       <div>
-        {database} {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
+        <EuiToolTip position="right" content={database} delay="long">
+          <EuiText>{_.truncate(database, { length: 50 })}</EuiText>
+        </EuiToolTip>{' '}
+        {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
       </div>
     ),
     icon: <EuiIcon type="database" size="m" />,
     id: 'element_' + index,
     callback: () => {
-      handleNodeClick(database);
+      setChildData([]);
+      selectedItems[0].label !== 'OpenSearch' && handleNodeClick(database);
     },
     isSelectable: true,
     isExpanded: true,
@@ -186,7 +193,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
         ? childData.map((table) => ({
             label: (
               <div>
-                {table} {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
+                <EuiToolTip position="right" content={table} delay="long">
+                  <EuiText>{_.truncate(table, { length: 50 })}</EuiText>
+                </EuiToolTip>{' '}
+                {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
               </div>
             ),
             id: `${database}_${table}`,
@@ -194,13 +204,23 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
             callback: () => {
               setIndexedData([]);
               handleChildClick(table);
+              setChildLoadingStates((prevState) => ({
+                ...prevState,
+                [selectedChildNode]: false,
+              }));
             },
             sSelectable: true,
             isExpanded: true,
             children:
               selectedChildNode === table
                 ? indexData.map((indexChild) => ({
-                    label: indexChild,
+                    label: (
+                      <div>
+                        <EuiToolTip position="right" content={indexChild} delay="long">
+                          <EuiText>{_.truncate(indexChild, { length: 50 })}</EuiText>
+                        </EuiToolTip>
+                      </div>
+                    ),
                     id: `${table}_${indexChild}`,
                     icon: <EuiIcon type="bolt" size="s" />,
                     callback: () =>
@@ -220,9 +240,9 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
     <>
       <EuiFlexGroup>
         {isLoading ? (
-          <EuiFlexGroup alignItems="center" gutterSize='s'>
-            <EuiFlexItem grow={false}>Loading your databases</EuiFlexItem>
-            <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>Loading databases</EuiFlexItem>
+            <EuiFlexItem>
               <EuiLoadingSpinner size="m" />
             </EuiFlexItem>
           </EuiFlexGroup>
diff --git a/public/components/SQLPage/acceleration_index_flyout.tsx b/public/components/SQLPage/acceleration_index_flyout.tsx
index 9b855384..b07f2d89 100644
--- a/public/components/SQLPage/acceleration_index_flyout.tsx
+++ b/public/components/SQLPage/acceleration_index_flyout.tsx
@@ -6,6 +6,9 @@
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -16,6 +19,7 @@ import {
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiSpacer,
+  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -63,59 +67,39 @@ export const AccelerationIndexFlyout = ({
             <EuiPageHeader>
               <EuiPageHeaderSection>
                 <EuiTitle size="l" data-test-subj="acceleration-index-desc-header">
-                  <h1>{indexName}</h1>
+                  <h2>{indexName}</h2>
                 </EuiTitle>
               </EuiPageHeaderSection>
             </EuiPageHeader>
           </div>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <h3>Acceleration index Source</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <h3>Data Source</h3>
-              <EuiSpacer />
-              <p>{dataSource}</p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <h3>Database</h3>
-              <EuiSpacer />
-              <p>{database}</p>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <h3>Table</h3>
-              <EuiSpacer />
-              <p>{dataTable}</p>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <h3>Acceleration index destination</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <h3>OpenSearch Index</h3>
-              <EuiSpacer />
-              <p>
-                {indexName === 'skipping_index'
-                  ? `flint_${dataSource}_${database}_${dataTable}_skipping_index`
-                  : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`}
-              </p>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <h3>Acceleration index actions</h3>
-          <EuiHorizontalRule />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiButton iconSide="right" fill iconType="lensApp" onClick={updateDescribeQuery}>
-                Describe Index
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton iconSide="right" iconType="trash" onClick={updateDropQuery} color="danger">
-                Drop Index
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <EuiText>
+            <h3>Acceleration index source</h3>
+          </EuiText>
+          <EuiHorizontalRule margin="s" />
+          <EuiDescriptionList>
+            <EuiDescriptionListTitle>Data Source</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{dataSource}</EuiDescriptionListDescription>
+            <EuiDescriptionListTitle>Database</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{database}</EuiDescriptionListDescription>
+            <EuiDescriptionListTitle>Data Table</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>{dataTable}</EuiDescriptionListDescription>
+          </EuiDescriptionList>
+          <EuiSpacer size="xl" />
+          <EuiText>
+            <h3>Acceleration index destination</h3>
+          </EuiText>
+          <EuiHorizontalRule margin="s" />
+          <EuiDescriptionList>
+            <EuiDescriptionListTitle>OpenSearch Index</EuiDescriptionListTitle>
+            <EuiDescriptionListDescription>
+              {indexName === 'skipping_index'
+                ? `flint_${dataSource}_${database}_${dataTable}_skipping_index`
+                : `flint_${dataSource}_${database}_${dataTable}_${indexName}_index`}
+            </EuiDescriptionListDescription>
+          </EuiDescriptionList>
+          <EuiSpacer size="xl" />
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -124,6 +108,32 @@ export const AccelerationIndexFlyout = ({
                 Close
               </EuiButtonEmpty>
             </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    iconSide="right"
+                    fill
+                    iconType="lensApp"
+                    onClick={updateDescribeQuery}
+                    size="s"
+                  >
+                    Describe Index
+                  </EuiButton>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    iconSide="right"
+                    iconType="trash"
+                    onClick={updateDropQuery}
+                    color="danger"
+                    size="s"
+                  >
+                    Drop Index
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutFooter>
       </EuiFlyout>
diff --git a/public/components/SQLPage/utils.tsx b/public/components/SQLPage/utils.tsx
index 48909ab8..a8d2cfcb 100644
--- a/public/components/SQLPage/utils.tsx
+++ b/public/components/SQLPage/utils.tsx
@@ -2,19 +2,26 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-const POLL_INTERVAL_MS = 5000;
+
 import _ from 'lodash';
 import { CoreStart } from '../../../../../src/core/public';
+import { SIDEBAR_POLL_INTERVAL_MS } from '../../../common/constants';
 
+let previousJobTimer: NodeJS.Timeout | null = null;
 
-
-export const pollQueryStatus = (id: string, http :CoreStart['http'], callback) => {
+export const pollQueryStatus = (id: string, http: CoreStart['http'], callback) => {
+  if (previousJobTimer) {
+    clearTimeout(previousJobTimer);
+  }
   http
     .get(`/api/spark_sql_console/job/` + id)
     .then((res) => {
       const status = res.data.resp.status;
       if (status === 'PENDING' || status === 'RUNNING' || status === 'SCHEDULED') {
-        setTimeout(() => pollQueryStatus(id, http, callback), POLL_INTERVAL_MS);
+        previousJobTimer = setTimeout(
+          () => pollQueryStatus(id, http, callback),
+          SIDEBAR_POLL_INTERVAL_MS
+        );
       } else if (status === 'FAILED') {
         callback([]);
       } else if (status === 'SUCCESS') {
@@ -36,7 +43,7 @@ export const getJobId = (query: {}, http: CoreStart['http'], callback) => {
     })
     .then((res) => {
       id = res.data.resp.queryId;
-      callback(id)
+      callback(id);
     })
     .catch((err) => {
       console.error(err);
diff --git a/public/components/acceleration/selectors/index_type_selector.tsx b/public/components/acceleration/selectors/index_type_selector.tsx
index 5c8c9bca..7437e24d 100644
--- a/public/components/acceleration/selectors/index_type_selector.tsx
+++ b/public/components/acceleration/selectors/index_type_selector.tsx
@@ -52,11 +52,13 @@ export const IndexTypeSelector = ({
       };
       getJobId(query, http, (id: string) => {
         pollQueryStatus(id, http, (data: any[]) => {
-          const dataTableFields: DataTableFieldsType[] = data.map((field, index) => ({
-            id: `${idPrefix}${index + 1}`,
-            fieldName: field.col_name,
-            dataType: field.data_type,
-          }));
+          const dataTableFields: DataTableFieldsType[] = data
+            .filter((row) => !row[0].startsWith('#'))
+            .map((row, index) => ({
+              id: `${idPrefix}${index + 1}`,
+              fieldName: row[0],
+              dataType: row[1],
+            }));
           setAccelerationFormData({
             ...accelerationFormData,
             dataTableFields: dataTableFields,
diff --git a/public/components/acceleration/visual_editors/query_builder.tsx b/public/components/acceleration/visual_editors/query_builder.tsx
index ef15bc9e..b4537f0e 100644
--- a/public/components/acceleration/visual_editors/query_builder.tsx
+++ b/public/components/acceleration/visual_editors/query_builder.tsx
@@ -58,8 +58,7 @@ const buildSkippingIndexColumns = (skippingIndexQueryData: SkippingIndexRowType[
  * Skipping Index create query example:
  *
  * CREATE SKIPPING INDEX
- * ON datasource.database.table
- * FOR COLUMNS (
+ * ON datasource.database.table (
  *    field1 VALUE_SET,
  *    field2 PARTITION,
  *    field3 MIN_MAX,
@@ -74,8 +73,7 @@ export const skippingIndexQueryBuilder = (accelerationformData: CreateAccelerati
   const { dataSource, database, dataTable, skippingIndexQueryData } = accelerationformData;
 
   const codeQuery = `CREATE SKIPPING INDEX
-ON ${dataSource}.${database}.${dataTable}
-  FOR COLUMNS (
+ON ${dataSource}.${database}.${dataTable} (
 ${buildSkippingIndexColumns(skippingIndexQueryData)}
   ) ${buildIndexOptions(accelerationformData)}`;
 
@@ -92,8 +90,7 @@ const buildCoveringIndexColumns = (coveringIndexQueryData: string[]) => {
  * Covering Index create query example:
  *
  * CREATE INDEX index_name
- * ON datasource.database.table
- * FOR COLUMNS (
+ * ON datasource.database.table (
  *    field1,
  *    field2,
  *    field3,
@@ -114,8 +111,7 @@ export const coveringIndexQueryBuilder = (accelerationformData: CreateAccelerati
   } = accelerationformData;
 
   const codeQuery = `CREATE INDEX ${accelerationIndexName}
-ON ${dataSource}.${database}.${dataTable}
-  FOR COLUMNS (
+ON ${dataSource}.${database}.${dataTable} (
 ${buildCoveringIndexColumns(coveringIndexQueryData)}
   ) ${buildIndexOptions(accelerationformData)}`;
 
diff --git a/test/mocks/accelerationMock.ts b/test/mocks/accelerationMock.ts
index 085459de..3cc0c2ae 100644
--- a/test/mocks/accelerationMock.ts
+++ b/test/mocks/accelerationMock.ts
@@ -202,8 +202,7 @@ export const skippingIndexBuilderMock1: CreateAccelerationForm = {
 };
 
 export const skippingIndexBuilderMockResult1 = `CREATE SKIPPING INDEX
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1 PARTITION, 
    field2 VALUE_SET, 
    field3 MIN_MAX
@@ -234,8 +233,7 @@ export const skippingIndexBuilderMock2: CreateAccelerationForm = {
 };
 
 export const skippingIndexBuilderMockResult2 = `CREATE SKIPPING INDEX
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1 PARTITION
   ) WITH (
 index_settings = '{"number_of_shards":5,"number_of_replicas":3}',
@@ -261,8 +259,7 @@ export const coveringIndexBuilderMock1: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult1 = `CREATE INDEX index_name
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1, 
    field2, 
    field3
@@ -287,8 +284,7 @@ export const coveringIndexBuilderMock2: CreateAccelerationForm = {
 };
 
 export const coveringIndexBuilderMockResult2 = `CREATE INDEX index_name
-ON datasource.database.table
-  FOR COLUMNS (
+ON datasource.database.table (
    field1
   ) WITH (
 index_settings = '{"number_of_shards":5,"number_of_replicas":3}',