[Page Header] New page header for metrics (opensearch-project#2050)

* Move the save button to the header control bar Signed-off-by: Ryan Liang <[email protected]> * Update snapshots Signed-off-by: Ryan Liang <[email protected]> * Fix the save button and correct its size + position Signed-off-by: Ryan Liang <[email protected]> * Fix the date picker location Signed-off-by: Ryan Liang <[email protected]> * Rename the navigation in coreRef and switch to use compressed date picker Signed-off-by: Ryan Liang <[email protected]> * Fix the popover Signed-off-by: Ryan Liang <[email protected]> * Rename the button Signed-off-by: Ryan Liang <[email protected]> * Update to latest mockup Signed-off-by: Ryan Liang <[email protected]> * Update snapshots Signed-off-by: Ryan Liang <[email protected]> * Fix the ui issues Signed-off-by: Ryan Liang <[email protected]> * Dummy metrics Signed-off-by: Ryan Liang <[email protected]> * Remove dummy Signed-off-by: Ryan Liang <[email protected]> * update snapshots Signed-off-by: Ryan Liang <[email protected]> * minor changes to match mocks Signed-off-by: Shenoy Pratik <[email protected]> --------- Signed-off-by: Ryan Liang <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]> Signed-off-by: sumukhswamy <[email protected]>
sumukhswamy · Aug 19, 2024 · 96ff6a4 · 96ff6a4
1 parent 11c656a
commit 96ff6a4
Show file tree

Hide file tree

Showing 15 changed files with 1,240 additions and 1,067 deletions.
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiResizableContainer, EuiSpacer } from '@elastic/eui';
 import debounce from 'lodash/debounce';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -115,11 +115,17 @@ export const Home = ({
                 <EuiPage>
                   <EuiPageBody component="div">
                     <TopMenu />
+                    <EuiSpacer size="m" />
                     <div className="metricsContainer">
                       <EuiResizableContainer>
                         {(EuiResizablePanel, EuiResizableButton) => (
                           <>
-                            <EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
+                            <EuiResizablePanel
+                              mode="collapsible"
+                              initialSize={20}
+                              minSize="10%"
+                              paddingSize="none"
+                            >
                               <Sidebar
                                 additionalSelectedMetricId={routerProps.match.params.id}
                                 selectedDataSource={selectedDataSource}

diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                 </EuiTitle>
                 <EuiComboBox
                   async={false}
-                  compressed={false}
+                  compressed={true}
                   data-test-subj="metricsDataSourcePicker"
                   fullWidth={false}
                   isClearable={true}
@@ -196,14 +196,14 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                   <div
                     aria-expanded={false}
                     aria-haspopup="listbox"
-                    className="euiComboBox"
+                    className="euiComboBox euiComboBox--compressed"
                     data-test-subj="metricsDataSourcePicker"
                     onKeyDown={[Function]}
                     role="combobox"
                   >
                     <EuiComboBoxInput
                       autoSizeInputRef={[Function]}
-                      compressed={false}
+                      compressed={true}
                       fullWidth={false}
                       hasSelectedOptions={false}
                       inputRef={[Function]}
@@ -230,7 +230,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                       value=""
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         icon={
                           Object {
@@ -245,13 +245,13 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                         }
                       >
                         <div
-                          className="euiFormControlLayout"
+                          className="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
                           >
                             <div
-                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                               data-test-subj="comboBoxInput"
                               onClick={[Function]}
                               tabIndex={-1}
@@ -320,7 +320,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                               </AutosizeInput>
                             </div>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon={
                                 Object {
                                   "aria-label": "Open list of options",
@@ -341,7 +341,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                                   data-test-subj="comboBoxToggleListButton"
                                   iconRef={[Function]}
                                   onClick={[Function]}
-                                  size="m"
+                                  size="s"
                                   type="arrowDown"
                                 >
                                   <button
@@ -354,19 +354,19 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="arrowDown"
                                     >
                                       <EuiIconBeaker
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         role="img"
                                         style={null}
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"

diff --git a/public/components/metrics/sidebar/data_source_picker.tsx b/public/components/metrics/sidebar/data_source_picker.tsx
@@ -27,6 +27,7 @@ export const DataSourcePicker = ({
         <h5>Metrics source</h5>
       </EuiTitle>
       <EuiComboBox
+        compressed
         placeholder="Select a metric source"
         singleSelection={{ asPlainText: true }}
         options={DATASOURCE_OPTIONS}

diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
@@ -4,9 +4,9 @@
  */
 
 import { EuiSearchBar } from '@elastic/eui';
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import debounce from 'lodash/debounce';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { searchSelector, setSearch } from '../redux/slices/metrics_slice';
 
 export const SearchBar = () => {
@@ -17,6 +17,15 @@ export const SearchBar = () => {
     dispatch(setSearch(query.text));
   }, 300);
 
+  // OUI doesn't pass down the prop
+  // Work around for OUI bug: https://github.com/opensearch-project/oui/issues/1343
+  useEffect(() => {
+    const element = document.querySelector('.euiFieldSearch');
+    if (element) {
+      element.classList.add('euiFieldSearch--compressed');
+    }
+  }, []);
+
   return (
     <div className="metrics-search-bar-input" data-test-subj="metricsSearch">
       <EuiSearchBar

diff --git a/public/components/metrics/sidebar/sidebar.scss b/public/components/metrics/sidebar/sidebar.scss
@@ -21,9 +21,9 @@ section.sidebar {
 }
 
 #metrics__mainContent {
-.dscAppContainer{
-.metricsSideBar {
-  padding: $euiSizeS;
+  .dscAppContainer {
+    .metricsSideBar {
+      padding: $euiSizeS;
       overflow: auto;
 
       &__fieldGroups {
@@ -44,8 +44,10 @@ section.sidebar {
       }
     }
     .metricsSideBar {
-  @include euiYScrollWithShadows;
-  .sidebar-list {
-    height: 100%;
+      @include euiYScrollWithShadows;
+      .sidebar-list {
+        height: 100%;
+      }
+    }
   }
-}}}
+}
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export.test.tsx.snap
@@ -14,115 +14,121 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
 >
   <MetricsExport>
     <MetricsExportPopOver>
-      <EuiPopover
-        anchorPosition="downCenter"
-        button={
-          <Savebutton
-            setIsPanelOpen={[Function]}
-          />
-        }
-        closePopover={[Function]}
-        display="inlineBlock"
-        hasArrow={true}
-        isOpen={false}
-        ownFocus={true}
-        panelPaddingSize="m"
-      >
-        <div
-          className="euiPopover euiPopover--anchorDownCenter"
+      <HeaderControlledPopoverWrapper>
+        <EuiPopover
+          anchorPosition="downCenter"
+          button={
+            <Savebutton
+              setIsPanelOpen={[Function]}
+            />
+          }
+          closePopover={[Function]}
+          display="inlineBlock"
+          hasArrow={true}
+          isOpen={false}
+          ownFocus={true}
+          panelPaddingSize="m"
         >
           <div
-            className="euiPopover__anchor"
+            className="euiPopover euiPopover--anchorDownCenter"
           >
-            <Savebutton
-              setIsPanelOpen={[Function]}
+            <div
+              className="euiPopover__anchor"
             >
-              <EuiButton
-                data-test-subj="metrics__saveManagementPopover"
-                iconSide="right"
-                iconType="arrowDown"
-                onClick={[Function]}
+              <Savebutton
+                setIsPanelOpen={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-test-subj="metrics__saveManagementPopover"
-                  disabled={false}
-                  element="button"
+                  fill={true}
                   iconSide="right"
                   iconType="arrowDown"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-test-subj="metrics__saveManagementPopover"
                     disabled={false}
+                    element="button"
+                    fill={true}
+                    iconSide="right"
+                    iconType="arrowDown"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="right"
-                      iconType="arrowDown"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                      data-test-subj="metrics__saveManagementPopover"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="arrowDown"
+                        <span
+                          className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="arrowDown"
                           >
-                            <svg
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <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>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Save
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <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>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Save as visualization
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
-            </Savebutton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </Savebutton>
+            </div>
           </div>
-        </div>
-      </EuiPopover>
+        </EuiPopover>
+      </HeaderControlledPopoverWrapper>
     </MetricsExportPopOver>
   </MetricsExport>
 </Provider>