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] 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>
     </>
   );
 };