From fc85856f83a27e5791438d820b7d21627b397f4d Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:12:42 -0700
Subject: [PATCH] [Feature ] Observability dashboards UI update (#2090) (#2098)

* UI update to obs dashboard



* update snapshots from osd



* update snapshot



---------




(cherry picked from commit 59100ac091bbab3133101f582dd1929ab3b472d7)

Signed-off-by: Adam Tackett <tackadam@amazon.com>
Signed-off-by: Adam Tackett <105462877+TackAdam@users.noreply.github.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <tackadam@amazon.com>
---
 .../custom_panel_table.test.tsx.snap          | 386 +++++++++---------
 .../custom_panels/custom_panel_table.tsx      |  40 +-
 2 files changed, 226 insertions(+), 200 deletions(-)

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index f85b5e67f5..b57d8017fe 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -87,48 +87,6 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
           <div
             class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
-            <div
-              class="euiFlexItem"
-            >
-              <div
-                class="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  class="euiPopover__anchor"
-                >
-                  <button
-                    class="euiButton euiButton--primary euiButton--small"
-                    data-test-subj="operationalPanelsActionsButton"
-                    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"
-                      >
-                        Actions
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
             <div
               class="euiFlexItem"
             >
@@ -141,6 +99,20 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
                 <span
                   class="euiButtonContent 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="M8.25 3a.5.5 0 0 1 .5.5v3.75h3.75a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8.75v3.75a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5V8.75H3.5a.5.5 0 0 1-.5-.5v-.5a.5.5 0 0 1 .5-.5h3.75V3.5a.5.5 0 0 1 .5-.5h.5Z"
+                    />
+                  </svg>
                   <span
                     class="euiButton__text"
                   >
@@ -156,39 +128,84 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
       />
       <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
-          <input
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
-            data-test-subj="operationalPanelSearchBar"
-            placeholder="Search Observability Dashboard name"
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <span
-              class="euiFormControlLayoutCustomIcon"
+            <input
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+              data-test-subj="operationalPanelSearchBar"
+              placeholder="Search Observability Dashboard name"
+              type="search"
+              value=""
+            />
+            <div
+              class="euiFormControlLayoutIcons"
             >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--small 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
+                class="euiFormControlLayoutCustomIcon"
               >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
-            </span>
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--small"
+                data-test-subj="operationalPanelsActionsButton"
+                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"
+                  >
+                    <path
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Actions
+                  </span>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -249,7 +266,7 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
                         >
                           <svg
                             aria-hidden="true"
-                            class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                            class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                             focusable="false"
                             height="16"
                             role="img"
@@ -258,8 +275,7 @@ exports[`Panels Table Component render dashboard table container with panels 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="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                             />
                           </svg>
                           <span
@@ -729,7 +745,7 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
                     >
                       <svg
                         aria-hidden="true"
-                        class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                        class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                         focusable="false"
                         height="16"
                         role="img"
@@ -738,8 +754,7 @@ exports[`Panels Table Component render dashboard table container with panels 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="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                         />
                       </svg>
                       <span
@@ -929,47 +944,6 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
           <div
             class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
-            <div
-              class="euiFlexItem"
-            >
-              <div
-                class="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  class="euiPopover__anchor"
-                >
-                  <button
-                    class="euiButton euiButton--primary euiButton--small"
-                    data-test-subj="operationalPanelsActionsButton"
-                    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"
-                      >
-                        <path
-                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                        />
-                      </svg>
-                      <span
-                        class="euiButton__text"
-                      >
-                        Actions
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
             <div
               class="euiFlexItem"
             >
@@ -982,6 +956,20 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
                 <span
                   class="euiButtonContent 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"
+                  >
+                    <path
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                    />
+                  </svg>
                   <span
                     class="euiButton__text"
                   >
@@ -1044,6 +1032,20 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
             <span
               class="euiButtonContent 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"
+              >
+                <path
+                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                />
+              </svg>
               <span
                 class="euiButton__text"
               >
@@ -1166,48 +1168,6 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
           <div
             class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
-            <div
-              class="euiFlexItem"
-            >
-              <div
-                class="euiPopover euiPopover--anchorDownCenter"
-              >
-                <div
-                  class="euiPopover__anchor"
-                >
-                  <button
-                    class="euiButton euiButton--primary euiButton--small"
-                    data-test-subj="operationalPanelsActionsButton"
-                    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"
-                      >
-                        Actions
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
             <div
               class="euiFlexItem"
             >
@@ -1220,6 +1180,20 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
                 <span
                   class="euiButtonContent 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="M8.25 3a.5.5 0 0 1 .5.5v3.75h3.75a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8.75v3.75a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5V8.75H3.5a.5.5 0 0 1-.5-.5v-.5a.5.5 0 0 1 .5-.5h3.75V3.5a.5.5 0 0 1 .5-.5h.5Z"
+                    />
+                  </svg>
                   <span
                     class="euiButton__text"
                   >
@@ -1235,39 +1209,85 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
       />
       <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
-          <input
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
-            data-test-subj="operationalPanelSearchBar"
-            placeholder="Search Observability Dashboard name"
-            type="search"
-            value=""
-          />
           <div
-            class="euiFormControlLayoutIcons"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <span
-              class="euiFormControlLayoutCustomIcon"
+            <input
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+              data-test-subj="operationalPanelSearchBar"
+              placeholder="Search Observability Dashboard name"
+              type="search"
+              value=""
+            />
+            <div
+              class="euiFormControlLayoutIcons"
             >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="euiFormControlLayoutCustomIcon"
               >
-                <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>
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--small 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
+          class="euiFlexItem"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--small"
+                data-test-subj="operationalPanelsActionsButton"
+                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"
+                  >
+                    Actions
+                  </span>
+                </span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
index 8de410e389..4ff17fa8e9 100644
--- a/public/components/custom_panels/custom_panel_table.tsx
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -364,21 +364,13 @@ export const CustomPanelTable = ({
               </EuiPageContentHeaderSection>
               <EuiPageContentHeaderSection>
                 <EuiFlexGroup gutterSize="s">
-                  <EuiFlexItem>
-                    <EuiPopover
-                      panelPaddingSize="none"
-                      button={popoverButton}
-                      isOpen={isActionsPopoverOpen}
-                      closePopover={() => setIsActionsPopoverOpen(false)}
-                    >
-                      <EuiContextMenuPanel items={popoverItems()} size="s" />
-                    </EuiPopover>
-                  </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiSmallButton
                       fill
                       href="#/create"
                       data-test-subj="customPanels__createNewPanels"
+                      iconType="plus"
+                      iconSide="left"
                     >
                       Create Dashboard
                     </EuiSmallButton>
@@ -389,13 +381,25 @@ export const CustomPanelTable = ({
             <EuiHorizontalRule margin="m" />
             {customPanels.length > 0 ? (
               <>
-                <EuiCompressedFieldSearch
-                  fullWidth
-                  data-test-subj="operationalPanelSearchBar"
-                  placeholder="Search Observability Dashboard name"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                />
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                  <EuiCompressedFieldSearch
+                    fullWidth
+                    data-test-subj="operationalPanelSearchBar"
+                    placeholder="Search Observability Dashboard name"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems()} size="s" />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
                 <EuiHorizontalRule margin="m" />
                 <EuiInMemoryTable
                   loading={loading}
@@ -445,6 +449,8 @@ export const CustomPanelTable = ({
                       data-test-subj="customPanels__emptyCreateNewPanels"
                       fullWidth={false}
                       href="#/create"
+                      iconType="plus"
+                      iconSide="left"
                     >
                       Create Dashboard
                     </EuiSmallButton>