New visualization type selection (elastic#23833)

* First version of new visualization selection * Extract some components * Remove visualization category * Remove old wizard code * Fix i18n ids * Fix tests * Fix tag cloud tests * Fix broken test method * Fix wrong method call * Fix TSVB navigation in tests * Restructure components * Fix for lab removal * Add tests * Timroes/eui vis type selection (#4) * Added background graphic from welcome screen to modal * Fixed up responsiveness * Change wording * Fix test snapshot * Create VisTypeIcon * Implement suggestions * Change experimental wording * Use regular quotes for i18n engine
rashidkpc · Nov 22, 2018 · 8c14c25 · 8c14c25
1 parent 43d4c22
commit 8c14c25
Show file tree

Hide file tree

Showing 47 changed files with 1,619 additions and 439 deletions.
diff --git a/docs/development/visualize/development-create-visualization.asciidoc b/docs/development/visualize/development-create-visualization.asciidoc
@@ -31,7 +31,6 @@ You should also register the visualization with `VisTypesRegistryProvider`.
 
 ["source","js"]
 -----------
-import { CATEGORY } from 'ui/vis/vis_category';
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 
@@ -43,7 +42,6 @@ const MyNewVisType = (Private) => {
     title: 'My New Vis',
     icon: 'my_icon',
     description: 'Cool new chart',
-    category: CATEGORY.OTHER
     ...
   });
 }
@@ -59,7 +57,7 @@ The list of common parameters:
 - *image*: instead of an icon you can provide a SVG image (imported)
 - *legacyIcon*: (DEPRECATED) <string> provide a class name (e.g. for a font awesome icon)
 - *description*: description of your visualization as shown in kibana
-- *category*: the category your visualization falls into (one of `ui/vis/vis_category` values)
+- *hidden*: <bool> if set to true, will hide the type from showing up in the visualization wizard
 - *visConfig*: object holding visualization parameters
 - *visConfig.defaults*: object holding default visualization configuration
 - *visualization*: A constructor function for a Visualization.

diff --git a/src/core_plugins/input_control_vis/public/register_vis.js b/src/core_plugins/input_control_vis/public/register_vis.js
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import { CATEGORY } from 'ui/vis/vis_category';
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import { VisController } from './vis_controller';
@@ -40,7 +39,6 @@ function InputControlVisProvider(Private) {
     description: i18n.translate('inputControl.register.controlsDescription', {
       defaultMessage: 'Create interactive controls for easy dashboard manipulation.'
     }),
-    category: CATEGORY.OTHER,
     stage: 'experimental',
     requiresUpdateStatus: [Status.PARAMS, Status.TIME],
     feedbackMessage: defaultFeedbackMessage,

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import pointSeriesTemplate from './editors/point_series.html';
 
 export default function PointSeriesVisType(Private, i18n) {
@@ -30,7 +29,6 @@ export default function PointSeriesVisType(Private, i18n) {
     title: i18n('kbnVislibVisTypes.area.areaTitle', { defaultMessage: 'Area' }),
     icon: 'visArea',
     description: i18n('kbnVislibVisTypes.area.areaDescription', { defaultMessage: 'Emphasize the quantity beneath a line chart' }),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'area',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/gauge.js b/src/core_plugins/kbn_vislib_vis_types/public/gauge.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import gaugeTemplate from './editors/gauge.html';
 import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
 
@@ -33,7 +32,6 @@ export default function GaugeVisType(Private, i18n) {
     description: i18n('kbnVislibVisTypes.gauge.gaugeDescription', {
       defaultMessage: 'Gauges indicate the status of a metric. Use it to show how a metric\'s value relates to reference threshold values.'
     }),
-    category: CATEGORY.DATA,
     visConfig: {
       defaults: {
         type: 'gauge',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/goal.js b/src/core_plugins/kbn_vislib_vis_types/public/goal.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import gaugeTemplate from './editors/gauge.html';
 import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
 
@@ -33,7 +32,6 @@ export default function GoalVisType(Private, i18n) {
     description: i18n('kbnVislibVisTypes.goal.goalDescription', {
       defaultMessage: 'A goal chart indicates how close you are to your final goal.'
     }),
-    category: CATEGORY.DATA,
     visConfig: {
       defaults: {
         addTooltip: true,

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js b/src/core_plugins/kbn_vislib_vis_types/public/heatmap.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import heatmapTemplate from './editors/heatmap.html';
 import { vislibColorMaps } from 'ui/vislib/components/color/colormaps';
 
@@ -31,7 +30,6 @@ export default function HeatmapVisType(Private, i18n) {
     title: i18n('kbnVislibVisTypes.heatmap.heatmapTitle', { defaultMessage: 'Heat Map' }),
     icon: 'visHeatmap',
     description: i18n('kbnVislibVisTypes.heatmap.heatmapDescription', { defaultMessage: 'Shade cells within a matrix' }),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'heatmap',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import pointSeriesTemplate from './editors/point_series.html';
 
 export default function PointSeriesVisType(Private, i18n) {
@@ -32,7 +31,6 @@ export default function PointSeriesVisType(Private, i18n) {
     description: i18n('kbnVislibVisTypes.histogram.histogramDescription',
       { defaultMessage: 'Assign a continuous variable to each axis' }
     ),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'histogram',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import pointSeriesTemplate from './editors/point_series.html';
 
 export default function PointSeriesVisType(Private, i18n) {
@@ -32,7 +31,6 @@ export default function PointSeriesVisType(Private, i18n) {
     description: i18n('kbnVislibVisTypes.horizontalBar.horizontalBarDescription',
       { defaultMessage: 'Assign a continuous variable to each axis' }
     ),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'histogram',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import pointSeriesTemplate from './editors/point_series.html';
 
 export default function PointSeriesVisType(Private, i18n) {
@@ -30,7 +29,6 @@ export default function PointSeriesVisType(Private, i18n) {
     title: i18n('kbnVislibVisTypes.line.lineTitle', { defaultMessage: 'Line' }),
     icon: 'visLine',
     description: i18n('kbnVislibVisTypes.line.lineDescription', { defaultMessage: 'Emphasize trends' }),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'line',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/pie.js b/src/core_plugins/kbn_vislib_vis_types/public/pie.js
@@ -19,7 +19,6 @@
 
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { CATEGORY } from 'ui/vis/vis_category';
 import pieTemplate from './editors/pie.html';
 
 export default function HistogramVisType(Private, i18n) {
@@ -30,7 +29,6 @@ export default function HistogramVisType(Private, i18n) {
     title: i18n('kbnVislibVisTypes.pie.pieTitle', { defaultMessage: 'Pie' }),
     icon: 'visPie',
     description: i18n('kbnVislibVisTypes.pie.pieDescription', { defaultMessage: 'Compare parts of a whole' }),
-    category: CATEGORY.BASIC,
     visConfig: {
       defaults: {
         type: 'pie',

diff --git a/src/core_plugins/kibana/public/dashboard/dashboard_app.js b/src/core_plugins/kibana/public/dashboard/dashboard_app.js
@@ -37,14 +37,14 @@ import { FilterBarQueryFilterProvider } from 'ui/filter_bar/query_filter';
 import { DocTitleProvider } from 'ui/doc_title';
 import { getTopNavConfig } from './top_nav/get_top_nav_config';
 import { DashboardConstants, createDashboardEditUrl } from './dashboard_constants';
-import { VisualizeConstants } from '../visualize/visualize_constants';
 import { DashboardStateManager } from './dashboard_state_manager';
 import { saveDashboard } from './lib';
 import { showCloneModal } from './top_nav/show_clone_modal';
 import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
 import { DashboardSaveModal } from './top_nav/save_modal';
 import { showAddPanel } from './top_nav/show_add_panel';
 import { showOptionsPopover } from './top_nav/show_options_popover';
+import { showNewVisModal } from '../visualize/wizard';
 import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from 'ui/share';
 import { migrateLegacyQuery } from 'ui/utils/migrate_legacy_query';
 import * as filterActions from 'ui/doc_table/actions/filter';
@@ -417,10 +417,7 @@ app.directive('dashboardApp', function ($injector) {
       };
       navActions[TopNavIds.ADD] = () => {
         const addNewVis = () => {
-          kbnUrl.change(
-            `${VisualizeConstants.WIZARD_STEP_1_PAGE_PATH}?${DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM}`);
-          // Function is called outside of angular. Must apply digest cycle to trigger URL update
-          $scope.$apply();
+          showNewVisModal(visTypes, { editorParams: [DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM] });
         };
 
         showAddPanel(dashboardStateManager.addNewPanel, addNewVis, visTypes);

diff --git a/src/core_plugins/kibana/public/visualize/index.js b/src/core_plugins/kibana/public/visualize/index.js
@@ -40,6 +40,21 @@ uiRoutes
     template: visualizeListingTemplate,
     controller: VisualizeListingController,
     controllerAs: 'listingController',
+    resolve: {
+      createNewVis: () => false,
+    },
+  })
+  .when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
+    template: visualizeListingTemplate,
+    controller: VisualizeListingController,
+    controllerAs: 'listingController',
+    resolve: {
+      createNewVis: () => true,
+    },
+  })
+  // Old path, will be removed in 7.0
+  .when('/visualize/step/1', {
+    redirectTo: VisualizeConstants.WIZARD_STEP_1_PAGE_PATH,
   });
 
 FeatureCatalogueRegistryProvider.register(() => {

diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -33,6 +33,13 @@
   <visualize-listing-table
     fetch-items="listingController.fetchItems"
     delete-selected-items="listingController.deleteSelectedItems"
+    on-create-vis="listingController.createNewVis"
   ></visualize-listing-table>
 
+  <new-vis-modal
+    is-open="listingController.showNewVisModal"
+    on-close="listingController.closeNewVisModal"
+    vis-types-registry="listingController.visTypeRegistry"
+  ></new-vis-modal>
+
 </div>
diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.js
@@ -22,24 +22,44 @@ import 'ui/pager_control';
 import 'ui/pager';
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
+import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import { i18n } from '@kbn/i18n';
 import chrome from 'ui/chrome';
 
 import { VisualizeListingTable } from './visualize_listing_table';
+import { NewVisModal } from '../wizard/new_vis_modal';
+
+import { injectI18nProvider } from '@kbn/i18n/react';
 
 const app = uiModules.get('app/visualize', ['ngRoute', 'react']);
-app.directive('visualizeListingTable', function (reactDirective) {
-  return reactDirective(VisualizeListingTable);
-});
+app.directive('visualizeListingTable', reactDirective => reactDirective(VisualizeListingTable));
+app.directive('newVisModal', reactDirective => reactDirective(injectI18nProvider(NewVisModal)));
 
-export function VisualizeListingController($injector) {
+export function VisualizeListingController($injector, createNewVis) {
   const Notifier = $injector.get('Notifier');
   const Private = $injector.get('Private');
   const config = $injector.get('config');
 
+  this.visTypeRegistry = Private(VisTypesRegistryProvider);
+
   timefilter.disableAutoRefreshSelector();
   timefilter.disableTimeRangeSelector();
 
+  this.showNewVisModal = false;
+
+  this.createNewVis = () => {
+    this.showNewVisModal = true;
+  };
+
+  this.closeNewVisModal = () => {
+    this.showNewVisModal = false;
+  };
+
+  if (createNewVis) {
+    // In case the user navigated to the page via the /visualize/new URL we start the dialog immediately
+    this.createNewVis();
+  }
+
   // TODO: Extract this into an external service.
   const services = Private(SavedObjectRegistryProvider).byLoaderPropertiesName;
   const visualizationService = services.visualizations;

diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js b/src/core_plugins/kibana/public/visualize/listing/visualize_listing_table.js
@@ -260,14 +260,14 @@ export class VisualizeListingTable extends Component {
     this.setState({ selectedRowIds: newSelectedIds });
   };
 
-  onCreate() {
-    window.location = '#/visualize/new';
+  onCreate = () => {
+    this.props.onCreateVis();
   }
 
   renderToolBarActions() {
     return this.state.selectedRowIds.length > 0 ?
       <KuiListingTableDeleteButton onDelete={this.onDelete} aria-label="Delete selected visualizations"/> :
-      <KuiListingTableCreateButton onCreate={this.onCreate} aria-label="Create new visualization"/>;
+      <KuiListingTableCreateButton onCreate={this.onCreate} data-test-subj="createNewVis" aria-label="Create new visualization"/>;
   }
 
   renderPager() {
@@ -323,4 +323,5 @@ export class VisualizeListingTable extends Component {
 VisualizeListingTable.propTypes = {
   deleteSelectedItems: PropTypes.func,
   fetchItems: PropTypes.func,
+  onCreateVis: PropTypes.func.isRequired,
 };
diff --git a/...a/public/visualize/visualize_constants.js → ...a/public/visualize/visualize_constants.ts b/...a/public/visualize/visualize_constants.js → ...a/public/visualize/visualize_constants.ts