[Lens] Fix mobile view (#96957) (#98137)

elastic · Apr 23, 2021 · 9baab80 · 9baab80
1 parent 7cda60c
commit 9baab80
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 78 deletions.
diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -5,19 +5,15 @@
 }
 
 .lnsApp {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-}
 
-.lnsApp__header {
-  border-bottom: $euiBorderThin;
+  > .kbnTopNavMenu__wrapper {
+    border-bottom: $euiBorderThin;
+  }
 }
 
 .lnsApp__frame {

diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -648,68 +648,66 @@ export function App({
   return (
     <>
       <div className="lnsApp">
-        <div className="lnsApp__header">
-          <TopNavMenu
-            setMenuMountPoint={setHeaderActionMenu}
-            config={topNavConfig}
-            showSearchBar={true}
-            showDatePicker={true}
-            showQueryBar={true}
-            showFilterBar={true}
-            indexPatterns={state.indexPatternsForTopNav}
-            showSaveQuery={Boolean(application.capabilities.visualize.saveQuery)}
-            savedQuery={state.savedQuery}
-            data-test-subj="lnsApp_topNav"
-            screenTitle={'lens'}
-            appName={'lens'}
-            onQuerySubmit={(payload) => {
-              const { dateRange, query } = payload;
-              const currentRange = data.query.timefilter.timefilter.getTime();
-              if (dateRange.from !== currentRange.from || dateRange.to !== currentRange.to) {
-                data.query.timefilter.timefilter.setTime(dateRange);
-                trackUiEvent('app_date_change');
-              } else {
-                // Query has changed, renew the session id.
-                // Time change will be picked up by the time subscription
-                setState((s) => ({
-                  ...s,
-                  searchSessionId: startSession(),
-                }));
-                trackUiEvent('app_query_change');
-              }
-              setState((s) => ({
-                ...s,
-                query: query || s.query,
-              }));
-            }}
-            onSaved={(savedQuery) => {
-              setState((s) => ({ ...s, savedQuery }));
-            }}
-            onSavedQueryUpdated={(savedQuery) => {
-              const savedQueryFilters = savedQuery.attributes.filters || [];
-              const globalFilters = data.query.filterManager.getGlobalFilters();
-              data.query.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
-              setState((s) => ({
-                ...s,
-                savedQuery: { ...savedQuery }, // Shallow query for reference issues
-                query: savedQuery.attributes.query,
-              }));
-            }}
-            onClearSavedQuery={() => {
-              data.query.filterManager.setFilters(data.query.filterManager.getGlobalFilters());
+        <TopNavMenu
+          setMenuMountPoint={setHeaderActionMenu}
+          config={topNavConfig}
+          showSearchBar={true}
+          showDatePicker={true}
+          showQueryBar={true}
+          showFilterBar={true}
+          indexPatterns={state.indexPatternsForTopNav}
+          showSaveQuery={Boolean(application.capabilities.visualize.saveQuery)}
+          savedQuery={state.savedQuery}
+          data-test-subj="lnsApp_topNav"
+          screenTitle={'lens'}
+          appName={'lens'}
+          onQuerySubmit={(payload) => {
+            const { dateRange, query } = payload;
+            const currentRange = data.query.timefilter.timefilter.getTime();
+            if (dateRange.from !== currentRange.from || dateRange.to !== currentRange.to) {
+              data.query.timefilter.timefilter.setTime(dateRange);
+              trackUiEvent('app_date_change');
+            } else {
+              // Query has changed, renew the session id.
+              // Time change will be picked up by the time subscription
               setState((s) => ({
                 ...s,
-                savedQuery: undefined,
-                filters: data.query.filterManager.getGlobalFilters(),
-                query: data.query.queryString.getDefaultQuery(),
+                searchSessionId: startSession(),
               }));
-            }}
-            query={state.query}
-            dateRangeFrom={fromDate}
-            dateRangeTo={toDate}
-            indicateNoData={state.indicateNoData}
-          />
-        </div>
+              trackUiEvent('app_query_change');
+            }
+            setState((s) => ({
+              ...s,
+              query: query || s.query,
+            }));
+          }}
+          onSaved={(savedQuery) => {
+            setState((s) => ({ ...s, savedQuery }));
+          }}
+          onSavedQueryUpdated={(savedQuery) => {
+            const savedQueryFilters = savedQuery.attributes.filters || [];
+            const globalFilters = data.query.filterManager.getGlobalFilters();
+            data.query.filterManager.setFilters([...globalFilters, ...savedQueryFilters]);
+            setState((s) => ({
+              ...s,
+              savedQuery: { ...savedQuery }, // Shallow query for reference issues
+              query: savedQuery.attributes.query,
+            }));
+          }}
+          onClearSavedQuery={() => {
+            data.query.filterManager.setFilters(data.query.filterManager.getGlobalFilters());
+            setState((s) => ({
+              ...s,
+              savedQuery: undefined,
+              filters: data.query.filterManager.getGlobalFilters(),
+              query: data.query.queryString.getDefaultQuery(),
+            }));
+          }}
+          query={state.query}
+          dateRangeFrom={fromDate}
+          dateRangeTo={toDate}
+          indicateNoData={state.indicateNoData}
+        />
         {(!state.isLoading || state.persistedDoc) && (
           <MemoizedEditorFrameWrapper
             editorFrame={editorFrame}

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/config_panel/color_indicator.tsx
@@ -74,7 +74,7 @@ export function ColorIndicator({
   }
 
   return (
-    <EuiFlexGroup gutterSize="none" alignItems="center">
+    <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
       {indicatorIcon}
       <EuiFlexItem>{children}</EuiFlexItem>
     </EuiFlexGroup>

diff --git a/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/...ugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss
@@ -6,11 +6,15 @@
   @include euiFlyout;
   // But with custom positioning to keep it within the sidebar contents
   position: absolute;
-  right: 0;
   left: 0;
-  top: 0;
-  bottom: 0;
   animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
+  @include euiBreakpoint('l', 'xl') {
+    top: 0 !important;
+    height: 100% !important;
+  }
+  @include euiBreakpoint('xs', 's', 'm') {
+    @include euiFlyout;
+  }
 }
 
 .lnsDimensionContainer__footer {
@@ -49,3 +53,7 @@
     background-color: transparent;
   }
 }
+
+.lnsBody--overflowHidden {
+  overflow: hidden;
+}
diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -61,21 +61,33 @@ export function DimensionContainer({
     [closeFlyout]
   );
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.classList.add('lnsBody--overflowHidden');
+    } else {
+      document.body.classList.remove('lnsBody--overflowHidden');
+    }
+    return () => {
+      document.body.classList.remove('lnsBody--overflowHidden');
+    };
+  });
+
   return isOpen ? (
     <EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
       <EuiWindowEvent event="keydown" handler={closeOnEscape} />
       <EuiOutsideClickDetector onOutsideClick={closeFlyout} isDisabled={!isOpen}>
         <div
           role="dialog"
           aria-labelledby="lnsDimensionContainerTitle"
-          className="lnsDimensionContainer"
+          className="lnsDimensionContainer euiFlyout"
         >
           <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
             <EuiFlexGroup
               gutterSize="none"
               alignItems="center"
               className="lnsDimensionContainer__headerLink"
               onClick={closeFlyout}
+              responsive={false}
             >
               <EuiFlexItem grow={false}>
                 <EuiButtonIcon

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
@@ -9,12 +9,49 @@
   bottom: 0;
   overflow: hidden;
   flex-direction: column;
+  @include euiBreakpoint('xs', 's', 'm') {
+    position: static;
+  }
 }
 
 .lnsFrameLayout__pageContent {
   overflow: hidden;
   flex-grow: 1;
   flex-direction: row;
+  @include euiBreakpoint('xs', 's', 'm') {
+    flex-wrap: wrap;
+    overflow: auto;
+    > * {
+      flex-basis: 100%;
+    }
+    > .lnsFrameLayout__sidebar {
+      min-height: $euiSizeL * 15;
+    }
+  }
+}
+
+.visEditor {
+  @include flexParent();
+
+  height: 100%;
+
+  @include euiBreakpoint('xs', 's', 'm') {
+    .visualization {
+      // While we are on a small screen the visualization is below the
+      // editor. In this cases it needs a minimum height, since it would otherwise
+      // maybe end up with 0 height since it just gets the flexbox rest of the screen.
+      min-height: $euiSizeL * 15;
+    }
+  }
+
+  /* 1. Without setting this to 0 you will run into a bug where the filter bar modal is hidden under
+a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
+  > .visualize {
+    height: 100%;
+    flex: 1 1 auto;
+    display: flex;
+    z-index: 0; /* 1 */
+  }
 }
 
 .lnsFrameLayout__pageBody {
@@ -51,12 +88,21 @@
   max-width: $euiFormMaxWidth + $euiSizeXXL;
   max-height: 100%;
 
+  @include euiBreakpoint('xs', 's', 'm') {
+    max-width: 100%;
+  }
+
   .lnsConfigPanel {
     @include euiScrollBar;
     padding: $euiSize $euiSizeXS $euiSize $euiSize;
     overflow-x: hidden;
     overflow-y: scroll;
     padding-left: $euiFormMaxWidth + $euiSize;
     margin-left: -$euiFormMaxWidth;
+
+    @include euiBreakpoint('xs', 's', 'm') {
+      padding-left: $euiSize;
+      margin-left: 0;
+    }
   }
 }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx
@@ -59,15 +59,15 @@ export function ChangeIndexPattern({
   return (
     <>
       <EuiPopover
-        style={{ width: '100%' }}
+        panelClassName="lnsChangeIndexPatternPopover"
         button={createTrigger()}
         isOpen={isPopoverOpen}
         closePopover={() => setPopoverIsOpen(false)}
         display="block"
         panelPaddingSize="s"
         ownFocus
       >
-        <div style={{ width: 320 }} data-test-subj="lnsChangeIndexPatternPopup">
+        <div>
           <EuiPopoverTitle>
             {i18n.translate('xpack.lens.indexPattern.changeIndexPatternTitle', {
               defaultMessage: 'Change index pattern',

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
@@ -42,3 +42,7 @@
     margin-right: $euiSizeS;
   }
 }
+
+.lnsChangeIndexPatternPopover {
+  width: 320px;
+}
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx
@@ -604,6 +604,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
             gutterSize="s"
             alignItems="center"
             className="lnsInnerIndexPatternDataPanel__header"
+            responsive={false}
           >
             <EuiFlexItem grow={true} className="lnsInnerIndexPatternDataPanel__switcher">
               <ChangeIndexPattern

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -662,7 +662,12 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
           const formatted = formatter.convert(topValue.key);
           return (
             <div className="lnsFieldItem__topValue" key={topValue.key}>
-              <EuiFlexGroup alignItems="stretch" key={topValue.key} gutterSize="xs">
+              <EuiFlexGroup
+                alignItems="stretch"
+                key={topValue.key}
+                gutterSize="xs"
+                responsive={false}
+              >
                 <EuiFlexItem grow={true} className="eui-textTruncate">
                   {formatted === '' ? (
                     <EuiText size="xs" color="subdued">
@@ -702,7 +707,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
         })}
         {otherCount ? (
           <>
-            <EuiFlexGroup alignItems="stretch" gutterSize="xs">
+            <EuiFlexGroup alignItems="stretch" gutterSize="xs" responsive={false}>
               <EuiFlexItem grow={true} className="eui-textTruncate">
                 <EuiText size="xs" className="eui-textTruncate" color="subdued">
                   {i18n.translate('xpack.lens.indexPattern.otherDocsLabel', {

diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
@@ -125,7 +125,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
     return null;
   }
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+    <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" responsive={false}>
       <ToolbarPopover
         title={i18n.translate('xpack.lens.pieChart.valuesLabel', {
           defaultMessage: 'Labels',

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -195,7 +195,7 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp
       : 'show';
 
   return (
-    <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween">
+    <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
       <EuiFlexItem>
         <EuiFlexGroup gutterSize="none" responsive={false}>
           <VisualOptionsPopover