[Exploratory View] Make series editor header sticky (#118223)

* Make exploratory view series editor section header sticky when scrolled so that Apply Changes button is always in view. (#118223) (#117131)
elastic · Nov 17, 2021 · 2c69601 · 2c69601
1 parent a0b1972
commit 2c69601
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 52 deletions.
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/exploratory_view.tsx
@@ -102,11 +102,7 @@ export function ExploratoryView({
             chartTimeRange={chartTimeRangeContext}
           />
           <LensWrapper ref={wrapperRef} height={height}>
-            <EuiResizableContainer
-              style={{ height: '100%' }}
-              direction="vertical"
-              onToggleCollapsed={onCollapse}
-            >
+            <ResizableContainer direction="vertical" onToggleCollapsed={onCollapse}>
               {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
                 collapseFn.current = (id, direction) => togglePanel?.(id, { direction });
 
@@ -134,20 +130,13 @@ export function ExploratoryView({
                       mode={'main'}
                       id="seriesPanel"
                       color="subdued"
+                      className="paddingTopSmall"
                     >
-                      {hiddenPanel === 'chartPanel' ? (
-                        <ShowChart onClick={() => onChange('chartPanel')} iconType="arrowDown">
-                          {SHOW_CHART_LABEL}
-                        </ShowChart>
-                      ) : (
-                        <HideChart
-                          onClick={() => onChange('chartPanel')}
-                          iconType="arrowUp"
-                          color="text"
-                        >
-                          {HIDE_CHART_LABEL}
-                        </HideChart>
-                      )}
+                      <ChartToggle
+                        isCollapsed={hiddenPanel === 'chartPanel'}
+                        onClick={() => onChange('chartPanel')}
+                      />
+
                       <SeriesViews
                         seriesBuilderRef={seriesBuilderRef}
                         onSeriesPanelCollapse={onChange}
@@ -156,7 +145,7 @@ export function ExploratoryView({
                   </>
                 );
               }}
-            </EuiResizableContainer>
+            </ResizableContainer>
             {hiddenPanel === 'seriesPanel' && (
               <ShowPreview onClick={() => onChange('seriesPanel')} iconType="arrowUp">
                 {PREVIEW_LABEL}
@@ -180,6 +169,14 @@ const LensWrapper = styled.div<{ height: string }>`
     height: 100%;
   }
 `;
+
+const ResizableContainer = styled(EuiResizableContainer)`
+  height: 100%;
+  &&& .paddingTopSmall {
+    padding-top: 8px;
+  }
+`;
+
 const Wrapper = styled(EuiPanel)`
   max-width: 1800px;
   min-width: 800px;
@@ -197,15 +194,22 @@ const ShowPreview = styled(EuiButtonEmpty)`
   position: absolute;
   bottom: 34px;
 `;
-const HideChart = styled(EuiButtonEmpty)`
-  position: absolute;
-  top: -35px;
-  right: 50px;
-`;
-const ShowChart = styled(EuiButtonEmpty)`
+
+const ChartToggle = styled(({ isCollapsed, ...rest }) => (
+  <EuiButtonEmpty
+    {...(isCollapsed ? { iconType: 'arrowDown' } : { iconType: 'arrowUp', color: 'text' })}
+    {...rest}
+  >
+    {isCollapsed ? SHOW_CHART_LABEL : HIDE_CHART_LABEL}
+  </EuiButtonEmpty>
+))`
+  &:focus,
+  &:focus:enabled {
+    background: none;
+  }
   position: absolute;
-  top: -10px;
-  right: 50px;
+  top: -30px;
+  right: 0;
 `;
 
 const HIDE_CHART_LABEL = i18n.translate('xpack.observability.overview.exploratoryView.hideChart', {

diff --git a/...s/observability/public/components/shared/exploratory_view/series_editor/series_editor.tsx b/...s/observability/public/components/shared/exploratory_view/series_editor/series_editor.tsx
@@ -7,9 +7,9 @@
 
 import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiSpacer, EuiFormRow, EuiFlexItem, EuiFlexGroup, EuiHorizontalRule } from '@elastic/eui';
+import { EuiSpacer, EuiFormRow, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { rgba } from 'polished';
-import { euiStyled } from './../../../../../../../../src/plugins/kibana_react/common';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import { AppDataType, ReportViewType, BuilderItem } from '../types';
 import { SeriesContextValue, useSeriesStorage } from '../hooks/use_series_storage';
 import { IndexPatternState, useAppIndexPatternContext } from '../hooks/use_app_index_pattern';
@@ -115,23 +115,25 @@ export const SeriesEditor = React.memo(function () {
 
   return (
     <Wrapper>
-      <div>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiFormRow
-              aria-label={REPORT_TYPE_ARIA_LABEL}
-              id="report-type-label"
-              isDisabled={true}
-            >
-              <ReportTypesSelect prepend={REPORT_TYPE_LABEL} />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <ViewActions onApply={() => setItemIdToExpandedRowMap({})} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiHorizontalRule margin="s" />
+      <SectionHeaderBackground />
+      <StickyFlexGroup gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiFormRow
+            css={{ alignItems: 'center' }}
+            aria-label={REPORT_TYPE_ARIA_LABEL}
+            id="report-type-label"
+            isDisabled={true}
+          >
+            <ReportTypesSelect prepend={REPORT_TYPE_LABEL} />
+          </EuiFormRow>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <ViewActions onApply={() => setItemIdToExpandedRowMap({})} />
+        </EuiFlexItem>
+      </StickyFlexGroup>
+
+      <EditorRowsWrapper>
         {editorItems.map((item) => (
           <div key={item.id}>
             <Series
@@ -142,8 +144,7 @@ export const SeriesEditor = React.memo(function () {
             <EuiSpacer size="s" />
           </div>
         ))}
-        <EuiSpacer size="s" />
-      </div>
+      </EditorRowsWrapper>
     </Wrapper>
   );
 });
@@ -185,6 +186,28 @@ const Wrapper = euiStyled.div`
   }
 `;
 
+const SectionHeaderBackground = euiStyled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 56px;
+  background-color: ${({ theme }) => theme.eui.euiPageBackgroundColor};
+  border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
+  z-index: 90;
+`;
+
+const StickyFlexGroup = euiStyled(EuiFlexGroup)`
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 0;
+`;
+
+const EditorRowsWrapper = euiStyled.div`
+  margin: ${({ theme }) => theme.eui.paddingSizes.m} 0;
+`;
+
 export const LOADING_VIEW = i18n.translate(
   'xpack.observability.expView.seriesBuilder.loadingView',
   {
@@ -199,10 +222,6 @@ export const SELECT_REPORT_TYPE = i18n.translate(
   }
 );
 
-export const RESET_LABEL = i18n.translate('xpack.observability.expView.seriesBuilder.reset', {
-  defaultMessage: 'Reset',
-});
-
 export const REPORT_TYPE_LABEL = i18n.translate(
   'xpack.observability.expView.seriesBuilder.reportType',
   {