commit 5b16c0dc08e42839b20262f9e9733835bae999f1
Author: Amir Fefer <amirfefer@gmail.com>
Date:   Wed Apr 25 15:30:26 2018 +0300

    Fixes #23391, #23251 - adjsut breadcrumbs swticher to pf design

diff --git a/.storybook/addons.js b/.storybook/addons.js
new file mode 100644
index 000000000..218bf7a5e
--- /dev/null
+++ b/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
diff --git a/package.json b/package.json
index 11b37923e..a5d35bbbf 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "private": true,
   "devDependencies": {
     "@storybook/addon-actions": "^3.2.12",
+    "@storybook/addon-knobs": "^3.4.3",
     "@storybook/react": "^3.2.12",
     "@storybook/storybook-deployer": "^2.0.0",
     "axios-mock-adapter": "^1.10.0",
diff --git a/webpack/assets/javascripts/react_app/common/colors.scss b/webpack/assets/javascripts/react_app/common/colors.scss
index fd24dd4bd..5efc1313f 100644
--- a/webpack/assets/javascripts/react_app/common/colors.scss
+++ b/webpack/assets/javascripts/react_app/common/colors.scss
@@ -10,6 +10,6 @@ $pf-blue-400:  #0088ce;
 $pf-color-white: #fff;
 $pf-border-gray: #d1d1d1;
 
-$switcher-max-height: 300px;
+$switcher-max-height: 400px;
 $switcher-max-width: 200px;
 $switcher-min-width: 200px;
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.stories.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.stories.js
new file mode 100644
index 000000000..b880b7c93
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.stories.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { boolean, number, withKnobs } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import BreadcrumbBar from './BreadcrumbBar';
+
+storiesOf('BreadcrumBar', module)
+  .addDecorator(withKnobs)
+  .add('With open switcher', () => (
+    <BreadcrumbBar
+      isLoadingResources={boolean('is loading', false)}
+      loadSwitcherResourcesByResource={action('load switcher data')}
+      isSwitcherOpen={boolean('is switcher open', true)}
+      totalPages={number('total pages', 3)}
+      currentPage={number('current page', 2)}
+      hasError={boolean('has error', false)}
+      resourceSwitcherItems={[
+        { name: 'item 1', id: 1 },
+        { name: 'item 2', id: 2 },
+        {
+          name:
+            'item 3 with a very very  very very very very very very long name',
+          id: 3,
+        },
+      ]}
+      data={{
+        resource: {
+          resourceUrl: 'some_url',
+        },
+        isSwitchable: true,
+        breadcrumbItems: [
+          { caption: 'Index Page', url: '#' },
+          { caption: 'Resource Page' },
+        ],
+      }}
+    />
+  ));
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBarActions.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBarActions.js
index ddda7c540..d8811c0ef 100644
--- a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBarActions.js
+++ b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBarActions.js
@@ -58,5 +58,5 @@ export const loadSwitcherResourcesByResource = (resource, { page = 1, searchQuer
   };
   beforeRequest();
 
-  return API.get(resourceUrl, {}, { page, search: searchQuery && `${[nameField]}~${searchQuery}` }).then(onRequestSuccess, onRequestFail);
+  return API.get(resourceUrl, {}, { page, per_page: 10, search: searchQuery && `${[nameField]}~${searchQuery}` }).then(onRequestSuccess, onRequestFail);
 };
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js
index 0104ab882..42d941192 100644
--- a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js
+++ b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js
@@ -75,7 +75,7 @@ const BreadcrumbSwitcherPopover = ({
         </ListGroup>
         <Pager
           className="pager-sm"
-          messages={{ nextPage: __('Next'), previousPage: __('Previous') }}
+          messages={{ nextPage: '', previousPage: '' }}
           onNextPage={onNextPageClick}
           onPreviousPage={onPrevPageClick}
           disablePrevious={currentPage === 1}
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss
index 4697c56b9..ccf0344f4 100644
--- a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss
+++ b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss
@@ -1,42 +1,62 @@
 @import '../../../common/colors';
 
-.popover-content {
-  max-height: $switcher-max-height;
-  overflow-y: auto;
-  max-width: $switcher-max-width;
-  min-width: $switcher-max-width;
-
-  .fa-spinner {
-    margin-top: 12px;
-  }
+#breadcrumb-switcher-popover {
+  z-index: 1000 !important;
 
-  .breadcrumb-switcher-popover-error {
-    color: #f00;
-  }
+  .popover-content {
+    padding-left: 0;
+    padding-right: 0;
+    max-height: $switcher-max-height;
+    overflow: hidden;
+    max-width: $switcher-max-width;
+    min-width: $switcher-max-width;
 
-  .list-group-item {
-    padding: 5px 3px;
+    .fa-spinner {
+      margin-top: 12px;
+    }
 
-    &:hover {
-      color: #fff;
-      background-color: #39a5dc;
-      border-color: #39a5dc;
+    .breadcrumb-switcher-popover-error {
+      text-indent: 10px;
+      color: #f00;
     }
-  }
 
-  .no-border {
-    border: none;
-  }
-}
+    .list-group-item {
+      padding: 5px 3px;
+      text-indent: 10px;
 
-#breadcrumb-switcher-popover {
-  z-index: 1000 !important;
-}
+      &:hover {
+        color: #fff;
+        background-color: #0089c7;
+      }
 
-.scrollable-list {
-  margin-top: 5px;
+      &.active {
+        background-color: #0089c7;
+      }
+    }
+
+    .no-border {
+      border: none;
+    }
+
+    .pager {
+      margin: 10px 13px;
+
+      a {
+        width: 22px;
+      }
 
-  &.list-group {
-    border-top: 0;
+      .fa {
+        margin-left: -2px;
+      }
+    }
+
+    .scrollable-list {
+      margin-top: 5px;
+
+      &.list-group {
+        border-top: 0;
+      }
+    }
   }
 }
+
diff --git a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/BreadcrumbSwitcherPopover.test.js.snap b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/BreadcrumbSwitcherPopover.test.js.snap
index 38a3d3850..95c118883 100644
--- a/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/BreadcrumbSwitcherPopover.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/BreadcrumbSwitcherPopover.test.js.snap
@@ -135,8 +135,8 @@ exports[`BreadcrumbSwitcherPopover render resources list 1`] = `
       disablePrevious={true}
       messages={
         Object {
-          "nextPage": "Next",
-          "previousPage": "Previous",
+          "nextPage": "",
+          "previousPage": "",
         }
       }
       onNextPage={[Function]}
@@ -258,8 +258,8 @@ exports[`BreadcrumbSwitcherPopover render resources list with a search query 1`]
       disablePrevious={true}
       messages={
         Object {
-          "nextPage": "Next",
-          "previousPage": "Previous",
+          "nextPage": "",
+          "previousPage": "",
         }
       }
       onNextPage={[Function]}
@@ -381,8 +381,8 @@ exports[`BreadcrumbSwitcherPopover render resources list with pagination 1`] = `
       disablePrevious={false}
       messages={
         Object {
-          "nextPage": "Next",
-          "previousPage": "Previous",
+          "nextPage": "",
+          "previousPage": "",
         }
       }
       onNextPage={[Function]}
diff --git a/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss b/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss
index c4dd4a573..8075c0b4a 100644
--- a/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss
+++ b/webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss
@@ -2,7 +2,7 @@
 
 .input-search {
   position: relative;
-  left: 5px;
+  left: 20px;
 
   input {
     text-indent: 25px;
