[visualize] implement k7Breadcrumbs (#26584)

* [visualize] implement k7Breadcrumbs

* [visualize] hide the whole kbn-top-nav if we aren't showing breadcrumbs

* [visualize] hide extra vertical space when not using breadcrumbs

src/legacy/core_plugins/kibana/public/visualize/breadcrumbs.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import { VisualizeConstants } from './visualize_constants';
+
+export function getLandingBreadcrumbs() {
+  return [
+    {
+      text: i18n.translate('kbn.visualize.listing.breadcrumb', {
+        defaultMessage: 'Visualize',
+      }),
+      href: `#${VisualizeConstants.LANDING_PAGE_PATH}`,
+    },
+  ];
+}
+
+export function getWizardStep1Breadcrumbs() {
+  return [
+    ...getLandingBreadcrumbs(),
+    {
+      text: i18n.translate('kbn.visualize.wizard.step1Breadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}
+
+export function getWizardStep2Breadcrumbs() {
+  return [
+    ...getLandingBreadcrumbs(),
+    {
+      text: i18n.translate('kbn.visualize.wizard.step2Breadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}
+
+export function getCreateBreadcrumbs() {
+  return [
+    ...getLandingBreadcrumbs(),
+    {
+      text: i18n.translate('kbn.visualize.editor.createBreadcrumb', {
+        defaultMessage: 'Create',
+      }),
+    },
+  ];
+}
+
+export function getEditBreadcrumbs($route: any) {
+  return [
+    ...getLandingBreadcrumbs(),
+    {
+      text: $route.current.locals.savedVis.title,
+    },
+  ];
+}

src/legacy/core_plugins/kibana/public/visualize/editor/editor.js

@@ -47,10 +47,12 @@ import { showShareContextMenu, ShareContextMenuExtensionsRegistryProvider } from
 import { getUnhashableStatesProvider } from 'ui/state_management/state_hashing';
 import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
 import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_save_modal';
+import { getEditBreadcrumbs, getCreateBreadcrumbs } from '../breadcrumbs';
 
 uiRoutes
   .when(VisualizeConstants.CREATE_PATH, {
     template: editorTemplate,
+    k7Breadcrumbs: getCreateBreadcrumbs,
     resolve: {
       savedVis: function (savedVisualizations, redirectWhenMissing, $route, Private) {
         const visTypes = Private(VisTypesRegistryProvider);
@@ -70,6 +72,7 @@ uiRoutes
   })
   .when(`${VisualizeConstants.EDIT_PATH}/:id`, {
     template: editorTemplate,
+    k7Breadcrumbs: getEditBreadcrumbs,
     resolve: {
       savedVis: function (savedVisualizations, redirectWhenMissing, $route) {
         return savedVisualizations.get($route.current.params.id)

src/legacy/core_plugins/kibana/public/visualize/index.js

@@ -31,6 +31,7 @@ import visualizeListingTemplate from './listing/visualize_listing.html';
 import { VisualizeListingController } from './listing/visualize_listing';
 import { VisualizeConstants } from './visualize_constants';
 import { FeatureCatalogueRegistryProvider, FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
+import { getLandingBreadcrumbs, getWizardStep1Breadcrumbs } from './breadcrumbs';
 
 uiRoutes
   .defaults(/visualize/, {
@@ -38,6 +39,7 @@ uiRoutes
   })
   .when(VisualizeConstants.LANDING_PAGE_PATH, {
     template: visualizeListingTemplate,
+    k7Breadcrumbs: getLandingBreadcrumbs,
     controller: VisualizeListingController,
     controllerAs: 'listingController',
     resolve: {
@@ -46,6 +48,7 @@ uiRoutes
   })
   .when(VisualizeConstants.WIZARD_STEP_1_PAGE_PATH, {
     template: visualizeListingTemplate,
+    k7Breadcrumbs: getWizardStep1Breadcrumbs,
     controller: VisualizeListingController,
     controllerAs: 'listingController',
     resolve: {

src/legacy/core_plugins/kibana/public/visualize/listing/visualize_listing.html

@@ -1,16 +1,13 @@
 <!-- Local nav. -->
-<kbn-top-nav name="visualize">
+<kbn-top-nav name="visualize" ng-if="listingController.showPluginBreadcrumbs">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Title. -->
-    <div
-      data-transclude-slot="topLeftCorner"
-    >
+    <div data-transclude-slot="topLeftCorner">
       <div
         class="kuiLocalTitle"
         role="heading"
-        aria-level="1"
-        ng-if="listingController.showPluginBreadcrumbs">
+        aria-level="1">
         Visualize
       </div>
     </div>

src/legacy/core_plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,5 +1,5 @@
 <!-- Local nav. -->
-<kbn-top-nav name="visualize">
+<kbn-top-nav name="visualize" ng-if="!k7design">
   <!-- Transcluded elements. -->
   <div data-transclude-slots>
     <!-- Breadcrumbs. -->

src/legacy/core_plugins/kibana/public/visualize/wizard/wizard.js

@@ -29,6 +29,7 @@ import { uiModules } from 'ui/modules';
 import visualizeWizardStep2Template from './step_2.html';
 import { SavedObjectsClientProvider } from 'ui/saved_objects';
 import { timefilter } from 'ui/timefilter';
+import { getWizardStep2Breadcrumbs } from '../breadcrumbs';
 
 const module = uiModules.get('app/visualize', ['kibana/courier']);
 
@@ -45,6 +46,7 @@ routes.when('/visualize/step/2', {
 
 routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_PATH, {
   template: visualizeWizardStep2Template,
+  k7Breadcrumbs: getWizardStep2Breadcrumbs,
   controller: 'VisualizeWizardStep2',
   resolve: {
     indexPatterns: function (Private) {
@@ -59,10 +61,11 @@ routes.when(VisualizeConstants.WIZARD_STEP_2_PAGE_PATH, {
   }
 });
 
-module.controller('VisualizeWizardStep2', function ($route, $scope, kbnUrl) {
+module.controller('VisualizeWizardStep2', function ($route, $scope, kbnUrl, config) {
   const type = $route.current.params.type;
   const addToDashMode = $route.current.params[DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM];
   kbnUrl.removeParam(DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM);
+  config.bindToScope($scope, 'k7design');
 
   $scope.step2WithSearchUrl = function (hit) {
     if (addToDashMode) {