Design work - EUI, K7, and various interface changes (elastic#720)

* [WIP][Design] Cleanup canvas part 1 (elastic#697) Part 1 of dave messing around with the design of canvas. * Converted bootstrap button groups to EUI button groups in text_style_picker (elastic#713) * Moved elements and assets to workpad_header (elastic#714) * Adds tabs to sidebar component (elastic#718) * Changed sidebar to tabbed layout * Removed unecessary done props from datasource_component and expression * Removed unused props in toolbar * [Design] Part 2 of design cleanup (elastic#715) * hide nonfocus pages * button group margins * workpad panel styled * header rework * fix toolbar lint * update to newest EUI, restyle sidebar tabs, some data source cleanup * move title to footer * Add some tooltips * Fixed custom interval input in refresh controls (elastic#722) * Fixes Editor Toggle (elastic#721) * Removed unused selectedPage prop from workpad_header/index.js * Fixed editor toggle * Design part 3: page view, data sources, lots of cleanup (elastic#731) Mostly changes around the page selector and data sources. Also fixes some of the hover issues for canvas elements. * fix css import error * [Design] Part 4 of design updates to canvas (elastic#732) [Design] Part 4: selector rewrite * Move expression editor back to bottom (elastic#733) * Removed unused prop form sidebar_component * Moved expression editor to toolbar * [Design] Part 5: Cleanup and bugfixing before review (elastic#734) * style up expression editor, fix resize handles * hide controls when editing is hidden * remove icons from element dropdown * fix canvas grid * Adds Modals (elastic#739) * Changed datasource_preview to a modal * Moved workpad_loader to modal * address feedback (elastic#740) * asset manager mostly styled (elastic#741) * [Image function] support src (image url) in addition to dataurl (elastic#632) * [Image function] support src (image url) in addition to dataurl * unit test for httpurl * fix other elements that use image * clean up the diff * more clean up diff * Handle AJAX errors by showing a notification (elastic#717) * timeout property for axios instance * remove TODOS * notifier class * TODO * second notification with the context * redirect to home if workpad could not be fetched * less noisy error checking * Fix ES Docs indices select options (elastic#743) * Catch more AJAX errors, show error in notification banner (elastic#736) * catch more errors * if es_fields fails, still render something * generate default data in ajax fetches in case of failure * feedback changes * remove defaulting that catch makes unnecessary * Remove run API (elastic#742) It's not used anywhere and is no longer necessary. We can always recreate it if the need arises. * [Design] Part 4 of design updates to canvas (elastic#732) [Design] Part 4: selector rewrite * Changed icon to 'warning' in simple_failure * Fixed canvas loading * Fixed paginate controls file naming * Changed color dot size * Added missing aria-labels * Fixed warnings * Fixed expression warnings * Fixed popovers * Fixed merge conflicts for image_upload * Changed placeholder text in custom interval input * Styled debug render function * Removed bootstrap from expression and show_debugging * Changed buttons in expression editor * Changed asset manager to modal * Added 'canvas__element' class for BWC for custom CSS in old workpads * Fixed fullscreen interactions and positioning * Fixed overflow issue in asset manager * Removed bootstrap in datasource component * Changed text input to text area in timelion datasource * Fixed sort field in esdocs * Updated style of AssetManager * Changed all inputs to compressed size * Added max width for datasource_preview modal * Fixed cursor when hovering over element in fullscreen mode * Cleaned up tooltips * Rearranged buttons in workpad_header * Updated style to update_modal * Forgot to remove debug line * Cleaned up arg_add_popover * Removed codeblock in update_modal * Added 'dataurl=null' to image element initial expression * Added null args to repeatImage and revealImage * Fixed input validation in expression * Bumped eui to v1.1.0 * fix: make refresh controls clearer - Change disabled state to 'refresh this page manually' - Don't show disable control unless auto-refresh is enabled - Move disabled control under the refresh interval text closes elastic#759 * fix: close refresh popover on selection * fix: replace interval placeholder with help text Closes elastic#757 * fix: replace EuiFormLabel with aria-labelledby closes elastic#767 * fix: restore send to top/bottom controls * fix: more usable page controls - pull controls out of popover - move PageControls component out of the preview - fix link use, so controls actually work - fix page layout for tall pages * fix: use correct esdocs query value * fix: better esdocs form labels * chore: stricter prop type checking and remove an unused prop check * fix: style the unknown args datasource fallback * fix: show correct sort field in esdocs * fix: page control icon colors * Fixed workpad_loader modal issue * Cleaned up home page styles * Fixed class name on confirm modal. Removed unused style in main.scss * fix: flatten the workpad styles easier to override them, which is handy for fullsceen and other cases * fix: better fullscreen overrides * chore: remove unused allowFullScreen props * fix: workpad size in fullscreen mode * chore: convert Positionable to a class component * fix: map font object to flot spec * fix: use flot font spec for flot output * test: add font spec test, fix plot & axisconfig tests * Fixed input refs in datacolumn * Removed unnecessary styles * chore: remove debugging console logs * Fixed prop type error in expression form * Fixed expression form bouncing from error messages * fix: page controls visible with scroll bar * fix: delete element click handler * chore: bump EUI to 3.0.0 this is the version that will be landing in Kibana * fix: match ContextMenu class to css rule * chore: remove unused code * chore: tiny update modal code refactor * Replaced & with prefixes in asset_manager and suggestion SCSS files * Replaced EUI link/icon with EuiButtonIcon * Changed label for index pattern in esdocs form * fix: add aria-label to EuiButtonIcon * fix: restore highlight on hover and remove the now unused ElementControls component * chore: update classNames use the new class naming convention * chore: remove unused components * Disabled selection and dragging for img in revealImage * Add toolbar tray close button (elastic#842) * Fixed range and percentage arg types (elastic#843) * Change to preview images * Chore: naming convention * Fix EUI Tooltip component content props (elastic#850) * Fix a small typo in a button icon and tooltip (elastic#851)
w33ble · Jul 26, 2018 · fe4b85f · fe4b85f
1 parent e4fe66b
commit fe4b85f
Show file tree

Hide file tree

Showing 249 changed files with 2,598 additions and 2,303 deletions.
diff --git a/common/functions/__tests__/get_flot_axis_config.js b/common/functions/__tests__/get_flot_axis_config.js
@@ -15,40 +15,40 @@ describe('getFlotAxisConfig', () => {
 
   describe('show', () => {
     it('hides the axis', () => {
-      expect(getFlotAxisConfig('x', false, columns, ticks))
+      expect(getFlotAxisConfig('x', false, { columns, ticks }))
         .to.only.have.key('show')
         .and.to.have.property('show', false);
-      expect(getFlotAxisConfig('y', false, columns, ticks))
+      expect(getFlotAxisConfig('y', false, { columns, ticks }))
         .to.only.have.key('show')
         .and.to.have.property('show', false);
     });
 
     it('shows the axis', () => {
-      expect(getFlotAxisConfig('x', true, columns, ticks)).to.have.property('show', true);
-      expect(getFlotAxisConfig('y', true, columns, ticks)).to.have.property('show', true);
+      expect(getFlotAxisConfig('x', true, { columns, ticks })).to.have.property('show', true);
+      expect(getFlotAxisConfig('y', true, { columns, ticks })).to.have.property('show', true);
     });
 
     it('sets show using an AxisConfig', () => {
-      let result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      let result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result).to.have.property('show', xAxisConfig.show);
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('show', yAxisConfig.show);
 
-      result = getFlotAxisConfig('x', hideAxis, columns, ticks);
+      result = getFlotAxisConfig('x', hideAxis, { columns, ticks });
       expect(result).to.have.property('show', hideAxis.show);
 
-      result = getFlotAxisConfig('y', hideAxis, columns, ticks);
+      result = getFlotAxisConfig('y', hideAxis, { columns, ticks });
       expect(result).to.have.property('show', hideAxis.show);
     });
   });
 
   describe('position', () => {
     it('sets the position of the axis when given an AxisConfig', () => {
-      let result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      let result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result).to.have.property('position', xAxisConfig.position);
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('position', yAxisConfig.position);
     });
 
@@ -59,7 +59,7 @@ describe('getFlotAxisConfig', () => {
         position: 'left',
       };
 
-      const result = getFlotAxisConfig('x', invalidXPosition, columns, ticks);
+      const result = getFlotAxisConfig('x', invalidXPosition, { columns, ticks });
       expect(result).to.have.property('position', 'bottom');
     });
 
@@ -70,27 +70,27 @@ describe('getFlotAxisConfig', () => {
         position: 'bottom',
       };
 
-      const result = getFlotAxisConfig('y', invalidYPosition, columns, ticks);
+      const result = getFlotAxisConfig('y', invalidYPosition, { columns, ticks });
       expect(result).to.have.property('position', 'left');
     });
   });
 
   describe('ticks', () => {
     it('adds a tick mark mapping for string columns', () => {
-      let result = getFlotAxisConfig('x', true, columns, ticks);
+      let result = getFlotAxisConfig('x', true, { columns, ticks });
       expect(result.ticks).to.eql([[2, 'product1'], [1, 'product2']]);
 
-      result = getFlotAxisConfig('x', xAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('x', xAxisConfig, { columns, ticks });
       expect(result.ticks).to.eql([[2, 'product1'], [1, 'product2']]);
     });
   });
 
   describe('mode', () => {
     it('sets the mode to time for date columns', () => {
-      let result = getFlotAxisConfig('y', true, columns, ticks);
+      let result = getFlotAxisConfig('y', true, { columns, ticks });
       expect(result).to.have.property('mode', 'time');
 
-      result = getFlotAxisConfig('y', yAxisConfig, columns, ticks);
+      result = getFlotAxisConfig('y', yAxisConfig, { columns, ticks });
       expect(result).to.have.property('mode', 'time');
     });
   });

diff --git a/common/functions/__tests__/get_font_spec.js b/common/functions/__tests__/get_font_spec.js
@@ -0,0 +1,31 @@
+import expect from 'expect.js';
+import { getFontSpec } from '../plot/get_font_spec';
+import { fontStyle } from './fixtures/test_styles';
+
+describe('getFontSpec', () => {
+  const defaultSpec = {
+    size: 12,
+    style: 'normal',
+    weight: 'normal',
+    family: '"Open Sans", Helvetica, Arial, sans-serif',
+    color: '#000',
+  };
+
+  describe('default output', () => {
+    it('returns the default spec object', () => {
+      expect(getFontSpec()).to.eql(defaultSpec);
+    });
+  });
+
+  describe('convert from fontStyle object', () => {
+    it('returns plot font spec', () => {
+      expect(getFontSpec(fontStyle)).to.eql({
+        size: 12,
+        style: 'normal',
+        weight: 'bolder',
+        family: 'Chalkboard, serif',
+        color: 'pink',
+      });
+    });
+  });
+});
diff --git a/common/functions/__tests__/plot.js b/common/functions/__tests__/plot.js
@@ -131,8 +131,15 @@ describe('plot', () => {
     describe('font', () => {
       it('sets the font style', () => {
         const result = fn(testPlot, { font: fontStyle }).value;
-        expect(result).to.have.property('font');
-        expect(result.font).to.eql(fontStyle);
+        const style = {
+          size: 12,
+          style: 'normal',
+          weight: 'bolder',
+          family: 'Chalkboard, serif',
+          color: 'pink',
+        };
+        expect(result.options.xaxis.font).to.eql(style);
+        expect(result.options.yaxis.font).to.eql(style);
       });
 
       // TODO: write test when using an instance of the interpreter

diff --git a/common/functions/__tests__/render.js b/common/functions/__tests__/render.js
@@ -21,7 +21,7 @@ describe('render', () => {
   it('returns a render', () => {
     const result = fn(renderTable, {
       as: 'debug',
-      css: '".canvas__element { background-color: red; }"',
+      css: '".canvasRenderEl { background-color: red; }"',
       containerStyle: containerStyle,
     });
 
@@ -44,10 +44,10 @@ describe('render', () => {
     describe('css', () => {
       it('sets the custom CSS for the render elemnt', () => {
         const result = fn(renderTable, {
-          css: '".canvas__element { background-color: red; }"',
+          css: '".canvasRenderEl { background-color: red; }"',
         });
 
-        expect(result).to.have.property('css', '".canvas__element { background-color: red; }"');
+        expect(result).to.have.property('css', '".canvasRenderEl { background-color: red; }"');
       });
 
       it("defaults to '* > * {}'", () => {

diff --git a/common/functions/plot/get_flot_axis_config.js b/common/functions/plot/get_flot_axis_config.js
@@ -1,7 +1,7 @@
 import { get, map } from 'lodash';
 import { getType } from '../../lib/get_type';
 
-export const getFlotAxisConfig = (axis, argValue, columns, ticks) => {
+export const getFlotAxisConfig = (axis, argValue, { columns, ticks, font } = {}) => {
   if (!argValue || argValue.show === false) return { show: false };
 
   const config = { show: true };
@@ -23,5 +23,7 @@ export const getFlotAxisConfig = (axis, argValue, columns, ticks) => {
 
   if (axisType === 'date') config.mode = 'time';
 
+  if (typeof font === 'object') config.font = font;
+
   return config;
 };
diff --git a/common/functions/plot/get_font_spec.js b/common/functions/plot/get_font_spec.js
@@ -0,0 +1,24 @@
+// converts the output of the font function to a flot font spec
+// for font spec, see https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
+const defaultSpec = {
+  size: 12,
+  style: 'normal',
+  weight: 'normal',
+  family: '"Open Sans", Helvetica, Arial, sans-serif',
+  color: '#000',
+};
+
+export const getFontSpec = argFont => {
+  if (!argFont || !argFont.spec) return defaultSpec;
+
+  const { fontSize, fontStyle, fontWeight, fontFamily, color } = argFont.spec;
+  const size = fontSize && Number(fontSize.replace('px', ''));
+
+  return {
+    size: !isNaN(size) ? size : defaultSpec.size,
+    style: fontStyle || defaultSpec.style,
+    weight: fontWeight || defaultSpec.weight,
+    family: fontFamily || defaultSpec.family,
+    color: color || defaultSpec.color,
+  };
+};
diff --git a/common/functions/plot/index.js b/common/functions/plot/index.js
@@ -3,6 +3,7 @@ import keyBy from 'lodash.keyby';
 import { getColorsFromPalette } from '../../lib/get_colors_from_palette';
 import { getLegendConfig } from '../../lib/get_legend_config';
 import { getFlotAxisConfig } from './get_flot_axis_config';
+import { getFontSpec } from './get_font_spec';
 import { seriesStyleToFlot } from './series_style_to_flot';
 import { getTickHash } from './get_tick_hash';
 
@@ -54,10 +55,9 @@ export const plot = () => ({
   },
   fn: (context, args) => {
     const seriesStyles = keyBy(args.seriesStyle || [], 'label') || {};
-
     const sortedRows = sortBy(context.rows, ['x', 'y', 'color', 'size', 'text']);
-
     const ticks = getTickHash(context.columns, sortedRows);
+    const font = args.font ? getFontSpec(args.font) : {};
 
     const data = map(groupBy(sortedRows, 'color'), (series, label) => {
       const seriesStyle = seriesStyles[label] || args.defaultStyle;
@@ -102,15 +102,22 @@ export const plot = () => ({
       type: 'render',
       as: 'plot',
       value: {
-        font: args.font,
         data: sortBy(data, 'label'),
         options: {
           canvas: false,
           colors: getColorsFromPalette(args.palette, data.length),
           legend: getLegendConfig(args.legend, data.length),
           grid: gridConfig,
-          xaxis: getFlotAxisConfig('x', args.xaxis, context.columns, ticks),
-          yaxis: getFlotAxisConfig('y', args.yaxis, context.columns, ticks),
+          xaxis: getFlotAxisConfig('x', args.xaxis, {
+            columns: context.columns,
+            ticks,
+            font,
+          }),
+          yaxis: getFlotAxisConfig('y', args.yaxis, {
+            columns: context.columns,
+            ticks,
+            font,
+          }),
           series: {
             shadowSize: 0,
             ...seriesStyleToFlot(args.defaultStyle),

diff --git a/common/lib/ast.js b/common/lib/ast.js
@@ -88,7 +88,7 @@ export function fromExpression(expression, type = 'expression') {
   try {
     return parse(String(expression), { startRule: type });
   } catch (e) {
-    throw new Error(`Unable to parse expression: ${expression}\n ${e.message}`);
+    throw new Error(`Unable to parse expression: ${e.message}`);
   }
 }
 

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@elastic/datemath": "^4.0.2",
-    "@elastic/eui": "^0.0.38-bugfix.1",
+    "@elastic/eui": "^3.0.0",
     "@elastic/numeral": "^2.3.2",
     "@scant/router": "^0.1.0",
     "axios": "^0.18.0",

diff --git a/public/app.js b/public/app.js
@@ -4,8 +4,6 @@ import './angular/config';
 import './angular/services';
 import { CanvasRootController } from './angular/controllers';
 
-// TODO: We needed button style support. Remove this and hackery.less when you can
-import 'bootstrap/dist/css/bootstrap.css';
 import './style/index.css';
 
 // load the application

diff --git a/public/apps/home/home_app.js b/public/apps/home/home_app.js
@@ -1,13 +1,21 @@
 import React from 'react';
+import { EuiTitle, EuiText, EuiSpacer, EuiPanel } from '@elastic/eui';
 import { WorkpadLoader } from '../../components/workpad_loader';
 
 export const HomeApp = () => (
-  <div className="canvas__home_app">
-    <h1>Canvas</h1>
-    <p>
-      Welcome to Canvas! To get started, create a new workpad, or load an existing workpad from the
-      controls below.
-    </p>
-    <WorkpadLoader onClose={() => {}} />
+  <div className="canvasHomeApp">
+    <EuiTitle size="l">
+      <h1>Canvas</h1>
+    </EuiTitle>
+    <EuiText>
+      <p>
+        Welcome to Canvas! To get started, create a new workpad, or load an existing workpad from
+        the controls below.
+      </p>
+    </EuiText>
+    <EuiSpacer size="m" />
+    <EuiPanel className="canvasHomeApp__workpadLoader">
+      <WorkpadLoader onClose={() => {}} />
+    </EuiPanel>
   </div>
 );
diff --git a/public/apps/home/home_app.scss b/public/apps/home/home_app.scss
@@ -1,9 +1,3 @@
-.canvas__home_app {
-  padding: $euiSizeS;
-
-  .canvas__workpad_loader {
-    background-color: $euiColorDarkestShade;
-    color: $euiColorLightShade;
-    padding: $euiSizeS;
-  }
+.canvasHomeApp {
+  padding: $euiSize;
 }
diff --git a/public/apps/workpad/workpad_app/workpad_app.js b/public/apps/workpad/workpad_app/workpad_app.js
@@ -20,22 +20,34 @@ export class WorkpadApp extends React.PureComponent {
     const { editing, deselectElement } = this.props;
 
     return (
-      <div className="canvas__workpad_app">
-        <div className="canvas__workpad_app--main">
-          <div className="canvas__workpad_app--workpad" onMouseDown={deselectElement}>
-            <WorkpadHeader />
-            <div className="canvas__workpad_app--workspace">
-              <Workpad />
+      <div className="canvasLayout">
+        <div className="canvasLayout__rows">
+          <div className="canvasLayout__cols">
+            <div className="canvasLayout__stage">
+              <div className="canvasLayout__stageHeader">
+                <WorkpadHeader />
+              </div>
+
+              <div className="canvasLayout__stageContent" onMouseDown={deselectElement}>
+                <div className="canvasLayout__stageContentOverflow">
+                  <Workpad />
+                </div>
+              </div>
             </div>
+
+            {editing && (
+              <div className="canvasLayout__sidebar">
+                <Sidebar />
+              </div>
+            )}
           </div>
-          {editing && (
-            <div className="canvas__workpad_app--sidebar">
-              <Sidebar />
+
+          {editing ? (
+            <div className="canvasLayout__footer">
+              <Toolbar />
             </div>
-          )}
+          ) : null}
         </div>
-
-        {editing ? <Toolbar /> : null}
       </div>
     );
   }