From db0a15a8237370d14f22beace7609c1ff4c427dc Mon Sep 17 00:00:00 2001
From: Andrii Tkach <atkach@apache.org>
Date: Wed, 10 Jan 2018 14:17:25 +0200
Subject: [PATCH] AMBARI-22756 Post-install: Reduce navigation width in wizard.
 (atkach)

---
 ambari-web/app/routes/create_widget.js            |  3 ---
 ambari-web/app/styles/wizard.less                 | 15 ++++++++++++++-
 ambari-web/app/views/common/breadcrumbs_view.js   |  4 +++-
 .../test/views/common/breadcrumbs_view_test.js    |  5 +++++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/ambari-web/app/routes/create_widget.js b/ambari-web/app/routes/create_widget.js
index 1e4a30ec507..f014a7ffb20 100644
--- a/ambari-web/app/routes/create_widget.js
+++ b/ambari-web/app/routes/create_widget.js
@@ -62,7 +62,6 @@ module.exports = App.WizardRoute.extend({
 
   step1: Em.Route.extend({
     route: '/step1',
-    breadcrumbs: null,
 
     connectOutlets: function (router) {
       var controller = router.get('widgetWizardController');
@@ -96,7 +95,6 @@ module.exports = App.WizardRoute.extend({
 
   step2: Em.Route.extend({
     route: '/step2',
-    breadcrumbs: null,
 
     connectOutlets: function (router) {
       var controller = router.get('widgetWizardController');
@@ -127,7 +125,6 @@ module.exports = App.WizardRoute.extend({
 
   step3: Em.Route.extend({
     route: '/step3',
-    breadcrumbs: null,
 
     connectOutlets: function (router) {
       var controller = router.get('widgetWizardController');
diff --git a/ambari-web/app/styles/wizard.less b/ambari-web/app/styles/wizard.less
index 4e680cac202..d42f19d5aca 100644
--- a/ambari-web/app/styles/wizard.less
+++ b/ambari-web/app/styles/wizard.less
@@ -18,6 +18,8 @@
 
 @import 'common.less';
 
+@wizard-side-nav-width: 250px;
+
 #enable_security {
   .step3 {
     overflow: auto;
@@ -696,6 +698,17 @@
   }
 }
 
+.modal {
+  .wizard {
+    .wizard-nav {
+      width: @wizard-side-nav-width;
+    }
+    .wizard-content.col-md-9 {
+      width: calc(~"100% - 250px");
+    }
+  }
+}
+
 .install-wizard-content {
   #top-nav .navbar.navbar-static-top {
     margin-bottom: 0;
@@ -709,7 +722,7 @@
     .wizard {
       border: none;
       .wizard-nav {
-        width: 250px;
+        width: @wizard-side-nav-width;
       }
       .wizard-content.col-md-9 {
         width: calc(~"100% - 250px");
diff --git a/ambari-web/app/views/common/breadcrumbs_view.js b/ambari-web/app/views/common/breadcrumbs_view.js
index 7c5ec4ef36d..ec6e6a64efb 100644
--- a/ambari-web/app/views/common/breadcrumbs_view.js
+++ b/ambari-web/app/views/common/breadcrumbs_view.js
@@ -190,6 +190,7 @@ App.BreadcrumbsView = Em.View.extend({
   items: function () {
     let currentState = App.get('router.currentState');
     let items = [];
+    const wizardStepRegex = /^step[0-9]?/;
     while (currentState) {
       if (currentState.breadcrumbs !== undefined) {
         // breadcrumbs should be defined and be not null or any other falsie-value
@@ -208,7 +209,8 @@ App.BreadcrumbsView = Em.View.extend({
       }
       else {
         // generate breadcrumb if it is not defined
-        if (currentState.name && !['root', 'index'].contains(currentState.name)) {
+        // breadcrumbs of wizard step such as "Step #" should be ignored
+        if (currentState.name && !['root', 'index'].contains(currentState.name) && !wizardStepRegex.test(currentState.name)) {
           items.pushObject({label: _formatLabel(currentState.name)});
         }
       }
diff --git a/ambari-web/test/views/common/breadcrumbs_view_test.js b/ambari-web/test/views/common/breadcrumbs_view_test.js
index 3e2fc17ec6c..6c773c9fdd8 100644
--- a/ambari-web/test/views/common/breadcrumbs_view_test.js
+++ b/ambari-web/test/views/common/breadcrumbs_view_test.js
@@ -123,6 +123,11 @@ describe('App.BreadcrumbsView', function () {
       expect(view.get('items')).to.be.empty;
     });
 
+    it('`step1` route is ignored', function () {
+      currentState = getCurrentState({}, {name: 'step1'});
+      expect(view.get('items')).to.be.empty;
+    });
+
     it('last item is disabled by default', function () {
       currentState = getCurrentState({breadcrumbs: {label: 'parent'}}, {breadcrumbs: {label: 'child'}});
       expect(view.get('items.length')).to.be.equal(2);