From c5028f804a7ee349b4191650364b66317f53f363 Mon Sep 17 00:00:00 2001
From: Sean Li <lnse@amazon.com>
Date: Tue, 22 Nov 2022 16:06:01 -0800
Subject: [PATCH] Updating tests

Signed-off-by: Sean Li <lnse@amazon.com>
---
 .../__snapshots__/searchbar.test.tsx.snap     | 484 ++++++++---------
 .../__snapshots__/sidebar.test.tsx.snap       | 499 +++++++++---------
 .../sidebar/__tests__/searchbar.test.tsx      |  20 +-
 .../sidebar/__tests__/sidebar.test.tsx        |   3 +-
 .../__snapshots__/top_menu.test.tsx.snap      | 111 ++--
 5 files changed, 544 insertions(+), 573 deletions(-)

diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
index 0dd14e663..1a271b63c 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -1,323 +1,295 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Search Bar Component Search Side Bar Component with available metrics 1`] = `
-<SearchBar
-  allAvailableMetrics={
-    Array [
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "HIlAQYQBiaYaSxpXJ73K",
-        "name": "[Prometheus Metric] prometheus.process_resident_memory_bytes",
-        "recentlyCreated": true,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "Y4muP4QBiaYaSxpXk7r8",
-        "name": "new metric",
-        "recentlyCreated": false,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "HolAQYQBiaYaSxpXKL0T",
-        "name": "[Prometheus Metric] prometheus.go_memstats_heap_sys_bytes",
-        "recentlyCreated": true,
-        "type": "line",
-      },
-      Object {
-        "catalog": "CUSTOM_METRICS",
-        "id": "tomAP4QBiaYaSxpXALls",
-        "name": "[Logs] Average ram usage per day by windows os ",
-        "recentlyCreated": false,
-        "type": "line",
-      },
-      Object {
-        "catalog": "prometheus",
-        "id": "prometheus.process_resident_memory_bytes",
-        "name": "prometheus.process_resident_memory_bytes",
-        "recentlyCreated": false,
-        "type": "gauge",
-      },
-    ]
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
   }
-  handleAddMetric={[MockFunction]}
 >
-  <div>
-    <EuiSearchBar
-      defaultQuery=""
-      onChange={[Function]}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="m"
-        wrap={true}
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
         >
-          <EuiFlexItem
-            className="euiSearchBar__searchHolder"
-            grow={true}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
           >
-            <div
-              className="euiFlexItem euiSearchBar__searchHolder"
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
             >
-              <EuiSearchBox
-                incremental={false}
-                isInvalid={false}
-                onSearch={[Function]}
-                placeholder="Search..."
-                query=""
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
               >
-                <EuiFieldSearch
-                  aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                  compressed={false}
-                  defaultValue=""
-                  fullWidth={true}
-                  incremental={false}
-                  inputRef={[Function]}
-                  isClearable={true}
+                <EuiSearchBox
+                  incremental={true}
                   isInvalid={false}
-                  isLoading={false}
                   onSearch={[Function]}
-                  placeholder="Search..."
+                  placeholder="Search for metrics"
+                  query=""
                 >
-                  <EuiFormControlLayout
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                     compressed={false}
+                    defaultValue=""
                     fullWidth={true}
-                    icon="search"
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
                     isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
                   >
-                    <div
-                      className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout__childrenWrapper"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiValidatableControl
-                          isInvalid={false}
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <input
-                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                            className="euiFieldSearch euiFieldSearch--fullWidth"
-                            defaultValue=""
-                            onKeyUp={[Function]}
-                            placeholder="Search..."
-                            type="search"
-                          />
-                        </EuiValidatableControl>
-                        <EuiFormControlLayoutIcons
-                          compressed={false}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayoutIcons"
+                          <EuiValidatableControl
+                            isInvalid={false}
                           >
-                            <EuiFormControlLayoutCustomIcon
-                              size="m"
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
                               type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
                             >
-                              <span
-                                className="euiFormControlLayoutCustomIcon"
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiFormControlLayoutCustomIcon__icon"
-                                  size="m"
-                                  type="search"
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
                                 >
-                                  <EuiIconSearch
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
                                   >
-                                    <svg
+                                    <EuiIconSearch
                                       aria-hidden={true}
                                       className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
-                                      height={16}
                                       role="img"
                                       style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
                                     >
-                                      <path
-                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
-                                      />
-                                    </svg>
-                                  </EuiIconSearch>
-                                </EuiIcon>
-                              </span>
-                            </EuiFormControlLayoutCustomIcon>
-                          </div>
-                        </EuiFormControlLayoutIcons>
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </EuiIconSearch>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
                       </div>
-                    </div>
-                  </EuiFormControlLayout>
-                </EuiFieldSearch>
-              </EuiSearchBox>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </EuiSearchBar>
-    <EuiGlobalToastList
-      dismissToast={[Function]}
-      side="right"
-      toastLifeTimeMs={6000}
-      toasts={Array []}
-    >
-      <div
-        aria-live="polite"
-        className="euiGlobalToastList euiGlobalToastList--right"
-        role="region"
-      />
-    </EuiGlobalToastList>
-  </div>
-</SearchBar>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
 `;
 
 exports[`Search Bar Component Search Side Bar Component with no available metrics 1`] = `
-<SearchBar
-  allAvailableMetrics={Array []}
-  handleAddMetric={[MockFunction]}
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
 >
-  <div>
-    <EuiSearchBar
-      defaultQuery=""
-      onChange={[Function]}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="m"
-        wrap={true}
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
       >
-        <div
-          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
         >
-          <EuiFlexItem
-            className="euiSearchBar__searchHolder"
-            grow={true}
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
           >
-            <div
-              className="euiFlexItem euiSearchBar__searchHolder"
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
             >
-              <EuiSearchBox
-                incremental={false}
-                isInvalid={false}
-                onSearch={[Function]}
-                placeholder="Search..."
-                query=""
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
               >
-                <EuiFieldSearch
-                  aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                  compressed={false}
-                  defaultValue=""
-                  fullWidth={true}
-                  incremental={false}
-                  inputRef={[Function]}
-                  isClearable={true}
+                <EuiSearchBox
+                  incremental={true}
                   isInvalid={false}
-                  isLoading={false}
                   onSearch={[Function]}
-                  placeholder="Search..."
+                  placeholder="Search for metrics"
+                  query=""
                 >
-                  <EuiFormControlLayout
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                     compressed={false}
+                    defaultValue=""
                     fullWidth={true}
-                    icon="search"
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
                     isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
                   >
-                    <div
-                      className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout__childrenWrapper"
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
                       >
-                        <EuiValidatableControl
-                          isInvalid={false}
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
                         >
-                          <input
-                            aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
-                            className="euiFieldSearch euiFieldSearch--fullWidth"
-                            defaultValue=""
-                            onKeyUp={[Function]}
-                            placeholder="Search..."
-                            type="search"
-                          />
-                        </EuiValidatableControl>
-                        <EuiFormControlLayoutIcons
-                          compressed={false}
-                          icon="search"
-                          isLoading={false}
-                        >
-                          <div
-                            className="euiFormControlLayoutIcons"
+                          <EuiValidatableControl
+                            isInvalid={false}
                           >
-                            <EuiFormControlLayoutCustomIcon
-                              size="m"
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
                               type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
                             >
-                              <span
-                                className="euiFormControlLayoutCustomIcon"
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
                               >
-                                <EuiIcon
-                                  aria-hidden="true"
-                                  className="euiFormControlLayoutCustomIcon__icon"
-                                  size="m"
-                                  type="search"
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
                                 >
-                                  <EuiIconEmpty
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
                                   >
-                                    <svg
+                                    <EuiIconEmpty
                                       aria-hidden={true}
                                       className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
-                                      height={16}
                                       role="img"
                                       style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    />
-                                  </EuiIconEmpty>
-                                </EuiIcon>
-                              </span>
-                            </EuiFormControlLayoutCustomIcon>
-                          </div>
-                        </EuiFormControlLayoutIcons>
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
                       </div>
-                    </div>
-                  </EuiFormControlLayout>
-                </EuiFieldSearch>
-              </EuiSearchBox>
-            </div>
-          </EuiFlexItem>
-        </div>
-      </EuiFlexGroup>
-    </EuiSearchBar>
-    <EuiGlobalToastList
-      dismissToast={[Function]}
-      side="right"
-      toastLifeTimeMs={6000}
-      toasts={Array []}
-    >
-      <div
-        aria-live="polite"
-        className="euiGlobalToastList euiGlobalToastList--right"
-        role="region"
-      />
-    </EuiGlobalToastList>
-  </div>
-</SearchBar>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
 `;
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index b7f4adfcd..b4ba2e2b7 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
         "http": [MockFunction],
       }
     }
+    search={false}
   >
     <I18nProvider>
       <IntlProvider
@@ -110,104 +111,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
           <section
             className="sidebarHeight"
           >
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Recently Created Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="recentlyCreatedMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Recently Created Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Recently Created Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Recently Created MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="recentlyCreatedMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Recently Created MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Recently Created Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="recentlyCreatedMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Recently Created Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Recently Created MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
             <EuiSpacer
               size="s"
             >
@@ -215,104 +222,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Selected Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="selectedMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Selected Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Selected Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Selected MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="selectedMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Selected MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Selected Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="selectedMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Selected Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Selected MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
             <EuiSpacer
               size="s"
             >
@@ -320,104 +333,110 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
             </EuiSpacer>
-            <EuiAccordion
-              arrowDisplay="left"
-              buttonContent={
-                <EuiTitle
-                  size="xxxs"
-                >
-                  <span>
-                    Available Metrics
-                  </span>
-                </EuiTitle>
-              }
-              id="availableMetricsSelector"
-              initialIsOpen={true}
-              isLoading={false}
-              isLoadingMessage={false}
-              paddingSize="none"
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Available Metrics"
+              metricsList={Array []}
             >
-              <div
-                className="euiAccordion euiAccordion-isOpen"
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Available Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Available MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
               >
                 <div
-                  className="euiAccordion__triggerWrapper"
+                  className="euiAccordion euiAccordion-isOpen"
                 >
-                  <button
-                    aria-controls="availableMetricsSelector"
-                    aria-expanded={true}
-                    className="euiAccordion__button"
-                    id="random_html_id"
-                    onClick={[Function]}
-                    type="button"
+                  <div
+                    className="euiAccordion__triggerWrapper"
                   >
-                    <span
-                      className="euiAccordion__iconWrapper"
+                    <button
+                      aria-controls="Available MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIcon
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        size="m"
-                        type="arrowRight"
+                      <span
+                        className="euiAccordion__iconWrapper"
                       >
-                        <EuiIconEmpty
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
                         >
-                          <svg
+                          <EuiIconEmpty
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          />
-                        </EuiIconEmpty>
-                      </EuiIcon>
-                    </span>
-                    <span
-                      className="euiIEFlexWrapFix"
-                    >
-                      <EuiTitle
-                        size="xxxs"
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
                       >
-                        <span
-                          className="euiTitle euiTitle--xxxsmall"
+                        <EuiTitle
+                          size="xxxs"
                         >
-                          Available Metrics
-                        </span>
-                      </EuiTitle>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  aria-labelledby="random_html_id"
-                  className="euiAccordion__childWrapper"
-                  id="availableMetricsSelector"
-                  role="region"
-                  tabIndex={-1}
-                >
-                  <EuiResizeObserver
-                    onResize={[Function]}
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Available Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Available MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
                   >
-                    <div>
-                      <div
-                        className=""
-                      >
-                        <ul
-                          className="metricsList"
-                        />
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
                       </div>
-                    </div>
-                  </EuiResizeObserver>
+                    </EuiResizeObserver>
+                  </div>
                 </div>
-              </div>
-            </EuiAccordion>
+              </EuiAccordion>
+            </MetricsAccordion>
           </section>
         </PseudoLocaleWrapper>
       </IntlProvider>
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx b/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
index de824be1a..cc84dc0eb 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
@@ -8,17 +8,22 @@ import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { SearchBar } from '../search_bar';
-import { sampleAllAvailableMetrics } from '../../../../../test/metrics_contants';
+import { Provider } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../../../../framework/redux/reducers';
 
 describe('Search Bar Component', () => {
   configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
 
   it('Search Side Bar Component with no available metrics', async () => {
-    const allAvailableMetrics: any = [];
-    const handleAddMetric = jest.fn();
+    const setSearch = jest.fn();
 
     const wrapper = mount(
-      <SearchBar allAvailableMetrics={allAvailableMetrics} handleAddMetric={handleAddMetric} />
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
     );
 
     wrapper.update();
@@ -29,11 +34,12 @@ describe('Search Bar Component', () => {
   });
 
   it('Search Side Bar Component with available metrics', async () => {
-    const allAvailableMetrics = sampleAllAvailableMetrics;
-    const handleAddMetric = jest.fn();
+    const setSearch = jest.fn();
 
     const wrapper = mount(
-      <SearchBar allAvailableMetrics={allAvailableMetrics} handleAddMetric={handleAddMetric} />
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
     );
 
     wrapper.update();
diff --git a/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx b/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
index 1cf39ca1b..747201fa7 100644
--- a/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
+++ b/dashboards-observability/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
@@ -24,10 +24,11 @@ describe('Side Bar Component', () => {
 
     const http = httpClientMock;
     const pplService = new PPLService(httpClientMock);
+    const search = false;
 
     const wrapper = mount(
       <Provider store={store}>
-        <Sidebar http={http} pplService={pplService} />
+        <Sidebar http={http} pplService={pplService} search={search} />
       </Provider>
     );
 
diff --git a/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index 274f4b2f0..edf4f4490 100644
--- a/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/dashboards-observability/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -84,12 +84,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -109,24 +112,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -144,11 +147,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -211,18 +214,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled in
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>
@@ -1405,12 +1396,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -1430,24 +1424,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -1465,11 +1459,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -1532,18 +1526,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when disabled wit
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>
@@ -2676,12 +2658,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                   <div
                     className="euiFlexItem"
                   >
-                    <SearchBar
-                      allAvailableMetrics={Array []}
-                      handleAddMetric={[Function]}
-                    >
+                    <SearchBar>
                       <div>
                         <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
                           defaultQuery=""
                           onChange={[Function]}
                         >
@@ -2701,24 +2686,24 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                   className="euiFlexItem euiSearchBar__searchHolder"
                                 >
                                   <EuiSearchBox
-                                    incremental={false}
+                                    incremental={true}
                                     isInvalid={false}
                                     onSearch={[Function]}
-                                    placeholder="Search..."
+                                    placeholder="Search for metrics"
                                     query=""
                                   >
                                     <EuiFieldSearch
-                                      aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                       compressed={false}
                                       defaultValue=""
                                       fullWidth={true}
-                                      incremental={false}
+                                      incremental={true}
                                       inputRef={[Function]}
                                       isClearable={true}
                                       isInvalid={false}
                                       isLoading={false}
                                       onSearch={[Function]}
-                                      placeholder="Search..."
+                                      placeholder="Search for metrics"
                                     >
                                       <EuiFormControlLayout
                                         compressed={false}
@@ -2736,11 +2721,11 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                                               isInvalid={false}
                                             >
                                               <input
-                                                aria-label="This is a search bar. After typing your query, hit enter to filter the results lower in the page."
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
                                                 className="euiFieldSearch euiFieldSearch--fullWidth"
                                                 defaultValue=""
                                                 onKeyUp={[Function]}
-                                                placeholder="Search..."
+                                                placeholder="Search for metrics"
                                                 type="search"
                                               />
                                             </EuiValidatableControl>
@@ -2799,18 +2784,6 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                             </div>
                           </EuiFlexGroup>
                         </EuiSearchBar>
-                        <EuiGlobalToastList
-                          dismissToast={[Function]}
-                          side="right"
-                          toastLifeTimeMs={6000}
-                          toasts={Array []}
-                        >
-                          <div
-                            aria-live="polite"
-                            className="euiGlobalToastList euiGlobalToastList--right"
-                            role="region"
-                          />
-                        </EuiGlobalToastList>
                       </div>
                     </SearchBar>
                   </div>