[Lens] Settings panel redesign and separate settings per y axis (elas…

…tic#76373) * wip, redsign the xy axis general settings * pie chart settings. fix tests, initial implementation * Fix Internationalization * Cleanup * remove unused translations * Add test to check that right axis is enabled * fix test * remove unecessary translation * Added icons and cleaned up some of the visuals for grouped buttons * Fix types * Axis Settings Popover Reusable Component * Legend Popover Reusable Component * Cleanup unused translations * Fix right axis behavior * Revert yLeftTitle to yTitle to avoid migration * PR fixes * identify which axis is enabled * Change the logic on enabling the y axes popovers * Adjust axis popover on horizontal bars * fix failing test and change the logic of fetching the y axis titles * Simpify the axis title logic, make the toolbar repsponsive, add TopAxisIcon * Ui Changes on legends popover * Cleanup and more unit tests * use groupId instead of index to take under consideration all possible scenarios * fix gridlines * Remove ts-ignore from icons and move toolbar button to shared components * Workspace toolbar wraps on smaller devices * Tooltip on Toolbar appears only if the button is disabled * clean up * Add missing translations * fix eslint Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
stratoula · Sep 16, 2020 · 13001cc · 13001cc
1 parent ee8bc62
commit 13001cc
Show file tree

Hide file tree

Showing 38 changed files with 1,528 additions and 691 deletions.
diff --git a/x-pack/plugins/lens/public/assets/axis_bottom.tsx b/x-pack/plugins/lens/public/assets/axis_bottom.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+
+export const EuiIconAxisBottom = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M5 1.5a.5.5 0 111 0v7a.5.5 0 01-1 0v-7zM15.39 11.39a1.5 1.5 0 010 2.12l-2.122 2.122a.5.5 0 11-.707-.707l2.121-2.122a.5.5 0 000-.707l-2.121-2.12a.5.5 0 11.707-.708l2.121 2.121zM3.439 9.269a.5.5 0 010 .707l-2.122 2.121a.5.5 0 000 .707l2.122 2.121a.5.5 0 01-.707.708L.61 13.51a1.5 1.5 0 010-2.121l2.122-2.121a.5.5 0 01.707 0zM8 3a.5.5 0 01.5.5v5a.5.5 0 01-1 0v-5A.5.5 0 018 3zM11 5.5a.5.5 0 00-1 0v3a.5.5 0 001 0v-3z" />
+    <path d="M3.5 12a.5.5 0 000 1h9a.5.5 0 000-1h-9z" />
+  </svg>
+);
diff --git a/x-pack/plugins/lens/public/assets/axis_left.tsx b/x-pack/plugins/lens/public/assets/axis_left.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+
+export const EuiIconAxisLeft = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M7.378 3.585a.5.5 0 00.353-.854L5.61.611a1.5 1.5 0 00-2.121 0L1.367 2.73a.5.5 0 00.708.707l2.12-2.12a.5.5 0 01.708 0l2.121 2.12a.5.5 0 00.354.147z" />
+    <path d="M5.046 3.088v4.129l.005.04v5.658a.5.5 0 01-.992.09l-.01-.09V8.786l-.004-.04V3.087a.5.5 0 01.992-.09l.01.09z" />
+    <path d="M4.55 15.829a1.5 1.5 0 001.06-.44l2.122-2.121a.5.5 0 10-.707-.707l-2.121 2.121a.5.5 0 01-.708 0l-2.12-2.121a.5.5 0 00-.708.707l2.121 2.121a1.5 1.5 0 001.061.44zM13.5 4a.5.5 0 01.5.5v7a.5.5 0 11-1 0v-7a.5.5 0 01.5-.5zM10.5 6.5a.5.5 0 011 0v5a.5.5 0 11-1 0v-5zM8.5 8a.5.5 0 00-.5.5v3a.5.5 0 101 0v-3a.5.5 0 00-.5-.5z" />
+  </svg>
+);
diff --git a/x-pack/plugins/lens/public/assets/axis_right.tsx b/x-pack/plugins/lens/public/assets/axis_right.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+
+export const EuiIconAxisRight = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M8.622 3.585a.5.5 0 01-.353-.854L10.39.611a1.5 1.5 0 012.121 0l2.122 2.12a.5.5 0 11-.707.707l-2.122-2.12a.5.5 0 00-.707 0l-2.121 2.12a.5.5 0 01-.354.147z" />
+    <path d="M11.95 12.915V8.786l.005-.04V3.087a.5.5 0 00-.992-.09l-.01.09v4.129l-.004.04v5.658a.5.5 0 00.992.09l.01-.09z" />
+    <path d="M11.45 15.829a1.5 1.5 0 01-1.06-.44l-2.122-2.121a.5.5 0 11.707-.707l2.121 2.121a.5.5 0 00.707 0l2.122-2.121a.5.5 0 01.707.707l-2.121 2.121a1.5 1.5 0 01-1.061.44zM2.5 4a.5.5 0 00-.5.5v7a.5.5 0 101 0v-7a.5.5 0 00-.5-.5zM5.5 6.5a.5.5 0 00-1 0v5a.5.5 0 101 0v-5zM7.5 8a.5.5 0 01.5.5v3a.5.5 0 11-1 0v-3a.5.5 0 01.5-.5z" />
+  </svg>
+);
diff --git a/x-pack/plugins/lens/public/assets/axis_top.tsx b/x-pack/plugins/lens/public/assets/axis_top.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+
+export const EuiIconAxisTop = ({
+  title,
+  titleId,
+  ...props
+}: {
+  title: string;
+  titleId: string;
+}) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M4.99991 7.49999C4.99991 7.22384 5.22376 6.99999 5.49991 6.99999C5.77605 6.99999 5.99991 7.22384 5.99991 7.49999V14.5C5.99991 14.7761 5.77605 15 5.49991 15C5.22376 15 4.99991 14.7761 4.99991 14.5V7.49999Z" />
+    <path d="M15.3893 2.38929C15.6706 2.67059 15.8287 3.05212 15.8287 3.44995C15.8287 3.84777 15.6706 4.2293 15.3893 4.51061L13.268 6.63193C13.1742 6.7257 13.0471 6.77838 12.9145 6.77838C12.7818 6.77838 12.6547 6.7257 12.5609 6.63193C12.4671 6.53816 12.4145 6.41098 12.4145 6.27838C12.4145 6.14577 12.4671 6.01859 12.5609 5.92482L14.6822 3.8035C14.776 3.70973 14.8287 3.58256 14.8287 3.44995C14.8287 3.31734 14.776 3.19016 14.6822 3.09639L12.5609 0.975075C12.4671 0.881307 12.4145 0.754129 12.4145 0.621522C12.4145 0.488914 12.4671 0.361736 12.5609 0.267968C12.6547 0.1742 12.7819 0.121521 12.9145 0.121521C13.0471 0.121521 13.1742 0.1742 13.268 0.267968L15.3893 2.38929Z" />
+    <path d="M3.43867 0.26864C3.53243 0.362408 3.58511 0.489585 3.58511 0.622193C3.58511 0.754801 3.53243 0.881978 3.43867 0.975746L1.31735 3.09707C1.22358 3.19083 1.1709 3.31801 1.1709 3.45062C1.1709 3.58323 1.22358 3.71041 1.31735 3.80417L3.43867 5.92549C3.53243 6.01926 3.58511 6.14644 3.58511 6.27905C3.58511 6.41166 3.53243 6.53883 3.43867 6.6326C3.3449 6.72637 3.21772 6.77905 3.08511 6.77905C2.9525 6.77905 2.82533 6.72637 2.73156 6.6326L0.610239 4.51128C0.328934 4.22998 0.170898 3.84844 0.170898 3.45062C0.170898 3.0528 0.328934 2.67126 0.610238 2.38996L2.73156 0.26864C2.82533 0.174871 2.9525 0.122192 3.08511 0.122192C3.21772 0.122192 3.3449 0.174871 3.43867 0.26864Z" />
+    <path d="M7.99991 6.99999C8.27605 6.99999 8.49991 7.22384 8.49991 7.49999V12.5C8.49991 12.7761 8.27605 13 7.99991 13C7.72377 13 7.49991 12.7761 7.49991 12.5V7.49999C7.49991 7.22384 7.72377 6.99999 7.99991 6.99999Z" />
+    <path d="M10.9999 7.49999C10.9999 7.22384 10.776 6.99999 10.4999 6.99999C10.2238 6.99999 9.99991 7.22384 9.99991 7.49999V10.5C9.99991 10.7761 10.2238 11 10.4999 11C10.776 11 10.9999 10.7761 10.9999 10.5V7.49999Z" />
+    <path d="M3.50015 2.99999C3.22401 2.99999 3.00015 3.22384 3.00015 3.49999C3.00015 3.77613 3.22401 3.99999 3.50015 3.99999H12.5002C12.7763 3.99999 13.0002 3.77613 13.0002 3.49999C13.0002 3.22384 12.7763 2.99999 12.5002 2.99999H3.50015Z" />
+  </svg>
+);
diff --git a/x-pack/plugins/lens/public/assets/legend.tsx b/x-pack/plugins/lens/public/assets/legend.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+
+export const EuiIconLegend = ({ title, titleId, ...props }: { title: string; titleId: string }) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      clipRule="evenodd"
+      fillRule="evenodd"
+      d="M2.786.357a.25.25 0 01.428 0l2.559 4.264A.25.25 0 015.558 5H.442a.25.25 0 01-.215-.379L2.786.357zM3 1.944L4.234 4H1.766L3 1.944z"
+    />
+    <path d="M8.5 2a.5.5 0 000 1h7a.5.5 0 000-1h-7z" />
+    <path
+      clipRule="evenodd"
+      fillRule="evenodd"
+      d="M1.5 6a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5h-3zM2 7v2h2V7H2z"
+    />
+    <path d="M8.5 7.5a.5.5 0 000 1h7a.5.5 0 000-1h-7z" />
+    <path
+      clipRule="evenodd"
+      fillRule="evenodd"
+      d="M3 16a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm0-1a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
+    />
+    <path d="M8.5 13a.5.5 0 000 1h7a.5.5 0 000-1h-7z" />
+  </svg>
+);
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/_workspace_panel_wrapper.scss
@@ -38,5 +38,5 @@
 }
 
 .lnsWorkspacePanelWrapper__toolbar {
-  margin-bottom: $euiSizeS;
+  margin-bottom: 0;
 }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_settings.tsx
@@ -9,7 +9,7 @@ import { EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NativeRenderer } from '../../../native_renderer';
 import { Visualization, VisualizationLayerWidgetProps } from '../../../types';
-import { ToolbarButton } from '../../../toolbar_button';
+import { ToolbarButton } from '../../../shared_components';
 
 export function LayerSettings({
   layerId,

diff --git a/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/...ck/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -19,7 +19,7 @@ import { Visualization, FramePublicAPI, Datasource } from '../../../types';
 import { Action } from '../state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
-import { ToolbarButton } from '../../../toolbar_button';
+import { ToolbarButton } from '../../../shared_components';
 
 interface VisualizationSelection {
   visualizationId: string;

diff --git a/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -67,8 +67,14 @@ export function WorkspacePanelWrapper({
   );
   return (
     <>
-      <div className="lnsWorkspacePanelWrapper__toolbar">
-        <EuiFlexGroup gutterSize="s" direction="row" responsive={false}>
+      <div>
+        <EuiFlexGroup
+          gutterSize="m"
+          direction="row"
+          responsive={false}
+          wrap={true}
+          className="lnsWorkspacePanelWrapper__toolbar"
+        >
           <EuiFlexItem grow={false}>
             <ChartSwitch
               data-test-subj="lnsChartSwitcher"
@@ -82,7 +88,7 @@ export function WorkspacePanelWrapper({
             />
           </EuiFlexItem>
           {activeVisualization && activeVisualization.renderToolbar && (
-            <EuiFlexItem grow>
+            <EuiFlexItem grow={false}>
               <NativeRenderer
                 render={activeVisualization.renderToolbar}
                 nativeProps={{

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/change_indexpattern.tsx
@@ -10,7 +10,7 @@ import { EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
 import { EuiSelectableProps } from '@elastic/eui/src/components/selectable/selectable';
 import { IndexPatternRef } from './types';
 import { trackUiEvent } from '../lens_ui_telemetry';
-import { ToolbarButtonProps, ToolbarButton } from '../toolbar_button';
+import { ToolbarButtonProps, ToolbarButton } from '../shared_components';
 
 export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
   label: string;