[pre-req] Convert Palettes and Components

x-pack/plugins/canvas/.storybook/config.js

@@ -59,6 +59,9 @@ function loadStories() {
   // Find all files ending in *.examples.ts
   const req = require.context('./..', true, /.(stories|examples).tsx$/);
   req.keys().forEach(filename => req(filename));
+
+  // Import Canvas CSS
+  require('../public/style/index.scss')
 }
 
 // Set up the Storybook environment with custom settings.

x-pack/plugins/canvas/.storybook/webpack.config.js

@@ -199,6 +199,7 @@ module.exports = async ({ config }) => {
   config.resolve.alias['ui/url/absolute_to_parsed_url'] = path.resolve(__dirname, '../tasks/mocks/uiAbsoluteToParsedUrl');
   config.resolve.alias['ui/chrome'] = path.resolve(__dirname, '../tasks/mocks/uiChrome');
   config.resolve.alias.ui = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public');
+  config.resolve.alias['src/legacy/ui/public/styles/styling_constants'] = path.resolve(KIBANA_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss');
   config.resolve.alias.ng_mock$ = path.resolve(KIBANA_ROOT, 'src/test_utils/public/ng_mock');
 
   return config;

x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.test.js

@@ -5,7 +5,7 @@
  */
 
 import { functionWrapper } from '../../../__tests__/helpers/function_wrapper';
-import { palettes } from '../../../common/lib/palettes';
+import { paulTor14 } from '../../../common/lib/palettes';
 import { palette } from './palette';
 
 describe('palette', () => {
@@ -25,7 +25,7 @@ describe('palette', () => {
 
       it('defaults to pault_tor_14 colors', () => {
         const result = fn(null);
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
     });
 
@@ -47,17 +47,17 @@ describe('palette', () => {
     describe('reverse', () => {
       it('reverses order of the colors', () => {
         const result = fn(null, { reverse: true });
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors.reverse());
+        expect(result.colors).toEqual(paulTor14.colors.reverse());
       });
 
       it('keeps the original order of the colors', () => {
         const result = fn(null, { reverse: false });
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
 
       it(`defaults to 'false`, () => {
         const result = fn(null);
-        expect(result.colors).toEqual(palettes.paul_tor_14.colors);
+        expect(result.colors).toEqual(paulTor14.colors);
       });
     });
   });

x-pack/plugins/canvas/canvas_plugin_src/functions/common/palette.ts

@@ -5,8 +5,7 @@
  */
 
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
-// @ts-ignore untyped local
-import { palettes } from '../../../common/lib/palettes';
+import { paulTor14 } from '../../../common/lib/palettes';
 import { getFunctionHelp } from '../../../i18n';
 
 interface Arguments {
@@ -52,7 +51,7 @@ export function palette(): ExpressionFunctionDefinition<'palette', null, Argumen
     },
     fn: (input, args) => {
       const { color, reverse, gradient } = args;
-      const colors = ([] as string[]).concat(color || palettes.paul_tor_14.colors);
+      const colors = ([] as string[]).concat(color || paulTor14.colors);
 
       return {
         type: 'palette',

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__examples__/palette.stories.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { PaletteArgInput } from '../palette';
+import { paulTor14 } from '../../../../common/lib/palettes';
+
+storiesOf('arguments/Palette', module).add('default', () => (
+  <div className="canvasContainerWrapper" style={{ width: '200px' }}>
+    <PaletteArgInput
+      argValue={{
+        type: 'expression',
+        chain: [
+          {
+            arguments: {
+              _: paulTor14.colors,
+              gradient: [paulTor14.gradient],
+            },
+            function: 'palette',
+            type: 'function',
+          },
+        ],
+      }}
+      onValueChange={action('onValueChange')}
+      renderError={action('renderError')}
+    />
+  </div>
+));

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/palette.js → x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/palette.tsx

@@ -4,45 +4,62 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { getType } from '@kbn/interpreter/common';
+import { ExpressionAstFunction, ExpressionAstExpression } from 'src/plugins/expressions';
 import { PalettePicker } from '../../../public/components/palette_picker';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { ArgumentStrings } from '../../../i18n';
+import { identifyPalette, ColorPalette } from '../../../common/lib';
 
 const { Palette: strings } = ArgumentStrings;
 
-const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
-  // Why is this neccesary? Does the dialog really need to know what parameter it is setting?
-
-  const throwNotParsed = () => renderError();
+interface Props {
+  onValueChange: (value: ExpressionAstExpression) => void;
+  argValue: ExpressionAstExpression;
+  renderError: () => void;
+}
 
+export const PaletteArgInput: FC<Props> = ({ onValueChange, argValue, renderError }) => {
   // TODO: This is weird, its basically a reimplementation of what the interpretter would return.
-  // Probably a better way todo this, and maybe a better way to handle template stype objects in general?
-  function astToPalette({ chain }) {
+  // Probably a better way todo this, and maybe a better way to handle template type objects in general?
+  const astToPalette = ({ chain }: { chain: ExpressionAstFunction[] }): ColorPalette | null => {
     if (chain.length !== 1 || chain[0].function !== 'palette') {
-      throwNotParsed();
+      renderError();
+      return null;
     }
+
     try {
       const colors = chain[0].arguments._.map((astObj) => {
         if (getType(astObj) !== 'string') {
-          throwNotParsed();
+          renderError();
         }
         return astObj;
-      });
+      }) as string[];
 
-      const gradient = get(chain[0].arguments.gradient, '[0]');
+      const gradient = get<boolean>(chain[0].arguments.gradient, '[0]');
+      const palette = identifyPalette({ colors, gradient });
 
-      return { colors, gradient };
+      if (palette) {
+        return palette;
+      }
+
+      return ({
+        id: 'custom',
+        label: strings.getCustomPaletteLabel(),
+        colors,
+        gradient,
+      } as any) as ColorPalette;
     } catch (e) {
-      throwNotParsed();
+      renderError();
     }
-  }
+    return null;
+  };
 
-  function handleChange(palette) {
-    const astObj = {
+  const handleChange = (palette: ColorPalette): void => {
+    const astObj: ExpressionAstExpression = {
       type: 'expression',
       chain: [
         {
@@ -57,13 +74,16 @@ const PaletteArgInput = ({ onValueChange, argValue, renderError }) => {
     };
 
     onValueChange(astObj);
-  }
+  };
 
   const palette = astToPalette(argValue);
 
-  return (
-    <PalettePicker value={palette} onChange={handleChange} ariaLabel={strings.getDisplayName()} />
-  );
+  if (!palette) {
+    renderError();
+    return null;
+  }
+
+  return <PalettePicker palette={palette} onChange={handleChange} />;
 };
 
 PaletteArgInput.propTypes = {