[Drilldowns] <ActionWizard/> Component

packages/kbn-storybook/storybook_config/webpack.config.js

@@ -19,6 +19,7 @@
 
 const { resolve } = require('path');
 const webpack = require('webpack');
+const { stringifyRequest } = require('loader-utils');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { REPO_ROOT, DLL_DIST_DIR } = require('../lib/constants');
 // eslint-disable-next-line import/no-unresolved
@@ -72,6 +73,38 @@ module.exports = async ({ config }) => {
     ],
   });
 
+  // Enable SASS
+  config.module.rules.push({
+    test: /\.scss$/,
+    exclude: /\.module.(s(a|c)ss)$/,
+    use: [
+      { loader: 'style-loader' },
+      { loader: 'css-loader', options: { importLoaders: 2 } },
+      {
+        loader: 'postcss-loader',
+        options: {
+          config: {
+            path: resolve(REPO_ROOT, 'src/optimize/'),
+          },
+        },
+      },
+      {
+        loader: 'sass-loader',
+        options: {
+          prependData(loaderContext) {
+            return `@import ${stringifyRequest(
+              loaderContext,
+              resolve(REPO_ROOT, 'src/legacy/ui/public/styles/_styling_constants.scss')
+            )};\n`;
+          },
+          sassOptions: {
+            includePaths: [resolve(REPO_ROOT, 'node_modules')],
+          },
+        },
+      },
+    ],
+  });
+
   // Reference the built DLL file of static(ish) dependencies, which are removed
   // during kbn:bootstrap and rebuilt if missing.
   config.plugins.push(
@@ -96,7 +129,7 @@ module.exports = async ({ config }) => {
   );
 
   // Tell Webpack about the ts/x extensions
-  config.resolve.extensions.push('.ts', '.tsx');
+  config.resolve.extensions.push('.ts', '.tsx', '.scss');
 
   // Load custom Webpack config specified by a plugin.
   if (currentConfig.webpackHook) {

src/dev/jest/config.js

@@ -67,6 +67,7 @@ export default {
     '<rootDir>/src/dev/jest/setup/babel_polyfill.js',
     '<rootDir>/src/dev/jest/setup/polyfills.js',
     '<rootDir>/src/dev/jest/setup/enzyme.js',
+    '<rootDir>/src/dev/jest/setup/react_testing_library.js',
   ],
   setupFilesAfterEnv: ['<rootDir>/src/dev/jest/setup/mocks.js'],
   coverageDirectory: '<rootDir>/target/kibana-coverage/jest',

src/dev/jest/setup/react_testing_library.js

@@ -0,0 +1,23 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { configure } from '@testing-library/react';
+
+// instead of default 'data-test-id', use kibana's 'data-test-subj'
+configure({ testIdAttribute: 'data-test-subj' });

src/dev/storybook/aliases.ts

@@ -25,4 +25,5 @@ export const storybookAliases = {
   embeddable: 'src/plugins/embeddable/scripts/storybook.js',
   infra: 'x-pack/legacy/plugins/infra/scripts/storybook.js',
   siem: 'x-pack/legacy/plugins/siem/scripts/storybook.js',
+  ui_actions: 'x-pack/plugins/advanced_ui_actions/scripts/storybook.js',
 };

x-pack/dev-tools/jest/setup/setup_test.js

@@ -11,3 +11,7 @@
 
 import 'jest-styled-components';
 import '@testing-library/jest-dom/extend-expect';
+import { configure } from '@testing-library/react';
+
+// instead of default 'data-test-id', use kibana's 'data-test-subj'
+configure({ testIdAttribute: 'data-test-subj' });

x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.scss

@@ -0,0 +1,10 @@
+.auaActionWizard__selectedActionFactoryContainer {
+  background-color: $euiColorLightestShade;
+  padding: $euiSize;
+}
+
+.auaActionWizard__actionFactoryItem {
+  .euiKeyPadMenuItem__label {
+    height: #{$euiSizeXL};
+  }
+}

x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.story.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 React from 'react';
+import { storiesOf } from '@storybook/react';
+import { dashboardDrilldownActionFactory, Demo, urlDrilldownActionFactory } from './test_data';
+
+storiesOf('components/ActionWizard', module)
+  .add('default', () => (
+    <Demo actionFactories={[dashboardDrilldownActionFactory, urlDrilldownActionFactory]} />
+  ))
+  .add('Only one factory is available', () => (
+    // to make sure layout doesn't break
+    <Demo actionFactories={[dashboardDrilldownActionFactory]} />
+  ))
+  .add('Long list of action factories', () => (
+    // to make sure layout doesn't break
+    <Demo
+      actionFactories={[
+        dashboardDrilldownActionFactory,
+        urlDrilldownActionFactory,
+        dashboardDrilldownActionFactory,
+        urlDrilldownActionFactory,
+        dashboardDrilldownActionFactory,
+        urlDrilldownActionFactory,
+        dashboardDrilldownActionFactory,
+        urlDrilldownActionFactory,
+      ]}
+    />
+  ));

x-pack/plugins/advanced_ui_actions/public/components/action_wizard/action_wizard.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 React from 'react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // TODO: this should be global
+import { TEST_SUBJ_ACTION_FACTORY_ITEM, TEST_SUBJ_SELECTED_ACTION_FACTORY } from './action_wizard';
+import {
+  dashboardDrilldownActionFactory,
+  dashboards,
+  Demo,
+  urlDrilldownActionFactory,
+} from './test_data';
+
+// TODO: for some reason global cleanup from RTL doesn't work
+// afterEach is not available for it globally during setup
+afterEach(cleanup);
+
+test('Pick and configure action', () => {
+  const screen = render(
+    <Demo actionFactories={[dashboardDrilldownActionFactory, urlDrilldownActionFactory]} />
+  );
+
+  // check that all factories are displayed to pick
+  expect(screen.getAllByTestId(TEST_SUBJ_ACTION_FACTORY_ITEM)).toHaveLength(2);
+
+  // select URL one
+  fireEvent.click(screen.getByText(/Go to URL/i));
+
+  // Input url
+  const URL = 'https://elastic.co';
+  fireEvent.change(screen.getByLabelText(/url/i), {
+    target: { value: URL },
+  });
+
+  // change to dashboard
+  fireEvent.click(screen.getByText(/change/i));
+  fireEvent.click(screen.getByText(/Go to Dashboard/i));
+
+  // Select dashboard
+  fireEvent.change(screen.getByLabelText(/Choose destination dashboard/i), {
+    target: { value: dashboards[1].id },
+  });
+});
+
+test('If only one actions factory is available then actionFactory selection is emitted without user input', () => {
+  const screen = render(<Demo actionFactories={[urlDrilldownActionFactory]} />);
+
+  // check that no factories are displayed to pick from
+  expect(screen.queryByTestId(TEST_SUBJ_ACTION_FACTORY_ITEM)).not.toBeInTheDocument();
+  expect(screen.queryByTestId(TEST_SUBJ_SELECTED_ACTION_FACTORY)).toBeInTheDocument();
+
+  // Input url
+  const URL = 'https://elastic.co';
+  fireEvent.change(screen.getByLabelText(/url/i), {
+    target: { value: URL },
+  });
+
+  // check that can't change to action factory type
+  expect(screen.queryByTestId(/change/i)).not.toBeInTheDocument();
+});