From 7b95d496c34c488f939034814cea5ff19c0ea1be Mon Sep 17 00:00:00 2001
From: Boaz Shuster <boaz.shuster.github@gmail.com>
Date: Wed, 18 Jul 2018 14:28:17 +0000
Subject: [PATCH] Fixes #24475 - Add EmptyState to React components

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
---
 .../javascripts/react_app/common/helpers.js   |    6 +
 .../__snapshots__/bookmarks.test.js.snap      | 2105 ++---------------
 .../components/bookmarks/bookmarks.test.js    |   53 +-
 .../react_app/components/bookmarks/index.js   |    2 +-
 .../DocumentationLink.stories.js              |   30 +
 .../DocumentationLink.test.js                 |    2 +-
 .../DocumentationLink.test.js.snap            |    7 +-
 .../common/DocumentationLink/index.js         |   34 +-
 .../common/EmptyState/DefaultEmptyState.js    |   51 +
 .../common/EmptyState/EmptyState.stories.js   |   98 +
 .../common/EmptyState/EmptyState.test.js      |   87 +
 .../common/EmptyState/EmptyStatePattern.js    |   23 +
 .../EmptyStatePrimaryActionButton.js          |   16 +
 .../common/EmptyState/EmptyStatePropTypes.js  |   27 +
 .../EmptyStateSecondaryActionButtons.js       |   21 +
 .../__snapshots__/EmptyState.test.js.snap     |  268 +++
 .../components/common/EmptyState/index.js     |    5 +
 17 files changed, 903 insertions(+), 1932 deletions(-)
 create mode 100644 webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.stories.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/DefaultEmptyState.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.stories.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.test.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePrimaryActionButton.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePropTypes.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStateSecondaryActionButtons.js
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
 create mode 100644 webpack/assets/javascripts/react_app/components/common/EmptyState/index.js

diff --git a/webpack/assets/javascripts/react_app/common/helpers.js b/webpack/assets/javascripts/react_app/common/helpers.js
index f35bf235e241..8b7984bd8174 100644
--- a/webpack/assets/javascripts/react_app/common/helpers.js
+++ b/webpack/assets/javascripts/react_app/common/helpers.js
@@ -1,5 +1,11 @@
 export const noop = Function.prototype; // empty function
 
+// open the link in a new window
+export const newWindowOnClick = url => (event) => {
+  event.preventDefault();
+  window.open(url, '_blank');
+};
+
 export default {
   bindMethods(context, methods) {
     methods.forEach((method) => {
diff --git a/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap b/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
index 6ae1fa43ce7c..0b32cace49ff 100644
--- a/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/bookmarks/__snapshots__/bookmarks.test.js.snap
@@ -1,1909 +1,260 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`bookmarks empty state 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<div
+  class="dropdown btn-group"
 >
-  <Connect(BookmarkContainer)
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="dropdown-toggle btn btn-default"
+    id="hosts"
+    role="button"
+    title="Bookmarks"
+    type="button"
   >
-    <BookmarkContainer
-      bookmarks={Array []}
-      canCreate={true}
-      controller="hosts"
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      showModal={false}
-      url="/api/bookmarks"
+    <span
+      aria-hidden="true"
+      class="fa fa-bookmark"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
-      >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
-        >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
-`;
-
-exports[`bookmarks should include existing bookmarks for the current controller 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(BookmarkContainer)
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
+      
+    </span>
+     
+    <span
+      class="caret"
+    >
+      
+    </span>
+  </button>
+  <ul
+    aria-labelledby="hosts"
+    class="scrollable-dropdown dropdown-menu dropdown-menu-right"
+    role="menu"
   >
-    <BookmarkContainer
-      bookmarks={
-        Array [
-          Object {
-            "controller": "hosts",
-            "id": 52,
-            "name": "1111",
-            "owner_id": 1,
-            "owner_type": "User",
-            "public": true,
-            "query": "abc",
-          },
-          Object {
-            "controller": "hosts",
-            "id": 54,
-            "name": "1122",
-            "owner_id": 1,
-            "owner_type": "User",
-            "public": true,
-            "query": "abc",
-          },
-        ]
-      }
-      canCreate={true}
-      controller="hosts"
-      errors={null}
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      status="RESOLVED"
-      url="/api/bookmarks"
+    <li
+      class=""
+      role="presentation"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
+      <a
+        href="#"
+        id="newBookmark"
+        role="menuitem"
+        tabindex="-1"
       >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
-        >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                    <Bookmark
-                      key=".5:$1111"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                      query="abc"
-                      text="1111"
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <EllipisWithTooltip>
-                                <div
-                                  onMouseEnter={[Function]}
-                                  style={
-                                    Object {
-                                      "overflow": "hidden",
-                                      "overflowWrap": "break-word",
-                                      "textOverflow": "ellipsis",
-                                      "whiteSpace": "nowrap",
-                                      "wordBreak": "break-all",
-                                    }
-                                  }
-                                >
-                                  1111
-                                </div>
-                              </EllipisWithTooltip>
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Bookmark>
-                    <Bookmark
-                      key=".5:$1122"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                      query="abc"
-                      text="1122"
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <EllipisWithTooltip>
-                                <div
-                                  onMouseEnter={[Function]}
-                                  style={
-                                    Object {
-                                      "overflow": "hidden",
-                                      "overflowWrap": "break-word",
-                                      "textOverflow": "ellipsis",
-                                      "whiteSpace": "nowrap",
-                                      "wordBreak": "break-all",
-                                    }
-                                  }
-                                >
-                                  1122
-                                </div>
-                              </EllipisWithTooltip>
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Bookmark>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
-`;
-
-exports[`bookmarks should not allow creating a new bookmark for users who dont have permission 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(BookmarkContainer)
-    canCreate={false}
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
-  >
-    <BookmarkContainer
-      bookmarks={
-        Array [
-          Object {
-            "controller": "hosts",
-            "id": 52,
-            "name": "1111",
-            "owner_id": 1,
-            "owner_type": "User",
-            "public": true,
-            "query": "abc",
-          },
-          Object {
-            "controller": "hosts",
-            "id": 54,
-            "name": "1122",
-            "owner_id": 1,
-            "owner_type": "User",
-            "public": true,
-            "query": "abc",
-          },
-        ]
-      }
-      canCreate={true}
-      controller="hosts"
-      errors={null}
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      status="RESOLVED"
-      url="/api/bookmarks"
+        Bookmark this search
+      </a>
+    </li>
+    <li
+      class=""
+      role="presentation"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
+      <a
+        href="#"
+        role="menuitem"
+        tabindex="-1"
       >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
+        <span
+          class="glyphicon glyphicon-question-sign icon-black"
         >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                    <Bookmark
-                      key=".5:$1111"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                      query="abc"
-                      text="1111"
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <EllipisWithTooltip>
-                                <div
-                                  onMouseEnter={[Function]}
-                                  style={
-                                    Object {
-                                      "overflow": "hidden",
-                                      "overflowWrap": "break-word",
-                                      "textOverflow": "ellipsis",
-                                      "whiteSpace": "nowrap",
-                                      "wordBreak": "break-all",
-                                    }
-                                  }
-                                >
-                                  1111
-                                </div>
-                              </EllipisWithTooltip>
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Bookmark>
-                    <Bookmark
-                      key=".5:$1122"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                      query="abc"
-                      text="1122"
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <EllipisWithTooltip>
-                                <div
-                                  onMouseEnter={[Function]}
-                                  style={
-                                    Object {
-                                      "overflow": "hidden",
-                                      "overflowWrap": "break-word",
-                                      "textOverflow": "ellipsis",
-                                      "whiteSpace": "nowrap",
-                                      "wordBreak": "break-all",
-                                    }
-                                  }
-                                >
-                                  1122
-                                </div>
-                              </EllipisWithTooltip>
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Bookmark>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
+          
+        </span>
+         Documentation
+      </a>
+    </li>
+    <li
+      class="divider"
+      role="separator"
+    >
+      
+    </li>
+    <li
+      class="dropdown-header"
+      role="heading"
+    >
+      Saved Bookmarks
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`bookmarks should show an error message if loading failed 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<div
+  class="dropdown btn-group"
 >
-  <Connect(BookmarkContainer)
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="dropdown-toggle btn btn-default"
+    id="hosts"
+    role="button"
+    title="Bookmarks"
+    type="button"
   >
-    <BookmarkContainer
-      bookmarks={Array []}
-      canCreate={true}
-      controller="hosts"
-      errors="Oops"
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      status="ERROR"
-      url="/api/bookmarks"
+    <span
+      aria-hidden="true"
+      class="fa fa-bookmark"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
+      
+    </span>
+     
+    <span
+      class="caret"
+    >
+      
+    </span>
+  </button>
+  <ul
+    aria-labelledby="hosts"
+    class="scrollable-dropdown dropdown-menu dropdown-menu-right"
+    role="menu"
+  >
+    <li
+      class=""
+      role="presentation"
+    >
+      <a
+        href="#"
+        id="newBookmark"
+        role="menuitem"
+        tabindex="-1"
       >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
+        Bookmark this search
+      </a>
+    </li>
+    <li
+      class=""
+      role="presentation"
+    >
+      <a
+        href="#"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="glyphicon glyphicon-question-sign icon-black"
         >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      key=".$bookmarks-errors"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <EllipisWithTooltip>
-                              <div
-                                onMouseEnter={[Function]}
-                                style={
-                                  Object {
-                                    "overflow": "hidden",
-                                    "overflowWrap": "break-word",
-                                    "textOverflow": "ellipsis",
-                                    "whiteSpace": "nowrap",
-                                    "wordBreak": "break-all",
-                                  }
-                                }
-                              >
-                                Failed to load bookmarks: %s
-                              </div>
-                            </EllipisWithTooltip>
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
-`;
-
-exports[`bookmarks should show loading spinner when loading bookmarks 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <Connect(BookmarkContainer)
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
-  >
-    <BookmarkContainer
-      bookmarks={Array []}
-      canCreate={true}
-      controller="hosts"
-      errors={null}
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      status="PENDING"
-      url="/api/bookmarks"
+          
+        </span>
+         Documentation
+      </a>
+    </li>
+    <li
+      class="divider"
+      role="separator"
+    >
+      
+    </li>
+    <li
+      class="dropdown-header"
+      role="heading"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
+      Saved Bookmarks
+    </li>
+    <li
+      class=""
+      role="presentation"
+    >
+      <a
+        href="#"
+        role="menuitem"
+        tabindex="-1"
       >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
+        <div
+          style="overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis;white-space:nowrap;word-break:break-all"
         >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                    <li
-                      className="loader-root"
-                      key=".4"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <Spinner
-                        className=""
-                        inline={false}
-                        inverse={false}
-                        loading={true}
-                        size="xs"
-                      >
-                        <div
-                          className="spinner spinner-xs"
-                        />
-                      </Spinner>
-                    </li>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
+          Failed to load bookmarks: %s
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`bookmarks should show no bookmarks if server did not respond with any 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
+<div
+  class="dropdown btn-group"
 >
-  <Connect(BookmarkContainer)
-    data={
-      Object {
-        "canCreate": true,
-        "controller": "hosts",
-        "url": "/api/bookmarks",
-      }
-    }
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="dropdown-toggle btn btn-default"
+    id="hosts"
+    role="button"
+    title="Bookmarks"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="fa fa-bookmark"
+    >
+      
+    </span>
+     
+    <span
+      class="caret"
+    >
+      
+    </span>
+  </button>
+  <ul
+    aria-labelledby="hosts"
+    class="scrollable-dropdown dropdown-menu dropdown-menu-right"
+    role="menu"
   >
-    <BookmarkContainer
-      bookmarks={Array []}
-      canCreate={true}
-      controller="hosts"
-      errors={null}
-      getBookmarks={[Function]}
-      modalClosed={[Function]}
-      modalOpened={[Function]}
-      status="RESOLVED"
-      url="/api/bookmarks"
+    <li
+      class=""
+      role="presentation"
+    >
+      <a
+        href="#"
+        id="newBookmark"
+        role="menuitem"
+        tabindex="-1"
+      >
+        Bookmark this search
+      </a>
+    </li>
+    <li
+      class=""
+      role="presentation"
     >
-      <Uncontrolled(Dropdown)
-        id="hosts"
-        pullRight={true}
+      <a
+        href="#"
+        role="menuitem"
+        tabindex="-1"
       >
-        <Dropdown
-          bsClass="dropdown"
-          componentClass={[Function]}
-          id="hosts"
-          onToggle={[Function]}
-          pullRight={true}
+        <span
+          class="glyphicon glyphicon-question-sign icon-black"
         >
-          <ButtonGroup
-            block={false}
-            bsClass="btn-group"
-            className="dropdown"
-            justified={false}
-            vertical={false}
-          >
-            <div
-              className="dropdown btn-group"
-            >
-              <DropdownToggle
-                bsClass="dropdown-toggle"
-                bsRole="toggle"
-                id="hosts"
-                key=".0"
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                open={false}
-                title="Bookmarks"
-                useAnchor={false}
-              >
-                <Button
-                  active={false}
-                  aria-expanded={false}
-                  aria-haspopup={true}
-                  block={false}
-                  bsClass="btn"
-                  bsStyle="default"
-                  className="dropdown-toggle"
-                  disabled={false}
-                  id="hosts"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  title="Bookmarks"
-                >
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup={true}
-                    className="dropdown-toggle btn btn-default"
-                    disabled={false}
-                    id="hosts"
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="button"
-                    title="Bookmarks"
-                    type="button"
-                  >
-                    <Icon
-                      name="bookmark"
-                      type="fa"
-                    >
-                      <FontAwesome
-                        name="bookmark"
-                      >
-                        <span
-                          aria-hidden={true}
-                          className="fa fa-bookmark"
-                        />
-                      </FontAwesome>
-                    </Icon>
-                     
-                    <span
-                      className="caret"
-                    />
-                  </button>
-                </Button>
-              </DropdownToggle>
-              <DropdownMenu
-                bsClass="dropdown-menu"
-                bsRole="menu"
-                className="scrollable-dropdown"
-                key=".1"
-                labelledBy="hosts"
-                onClose={[Function]}
-                onSelect={[Function]}
-                pullRight={true}
-              >
-                <RootCloseWrapper
-                  disabled={true}
-                  event="click"
-                  onRootClose={[Function]}
-                >
-                  <ul
-                    aria-labelledby="hosts"
-                    className="scrollable-dropdown dropdown-menu dropdown-menu-right"
-                    role="menu"
-                  >
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={false}
-                      id="newBookmark"
-                      key=".$newBookmark"
-                      onClick={[Function]}
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className=""
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          id="newBookmark"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            id="newBookmark"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            Bookmark this search
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                    <Component
-                      id="bookmarkDocumentation"
-                      key=".1"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <MenuItem
-                        bsClass="dropdown"
-                        disabled={false}
-                        divider={false}
-                        header={false}
-                        id="bookmarkDocumentation"
-                        key="documentationUrl"
-                        onClick={[Function]}
-                      >
-                        <li
-                          className=""
-                          role="presentation"
-                        >
-                          <SafeAnchor
-                            componentClass="a"
-                            id="bookmarkDocumentation"
-                            onClick={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                            <a
-                              href="#"
-                              id="bookmarkDocumentation"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="menuitem"
-                              tabIndex="-1"
-                            >
-                              <Component
-                                className="icon-black"
-                                type="question-sign"
-                              >
-                                <span
-                                  className="glyphicon glyphicon-question-sign icon-black"
-                                />
-                              </Component>
-                               Documentation
-                            </a>
-                          </SafeAnchor>
-                        </li>
-                      </MenuItem>
-                    </Component>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={true}
-                      header={false}
-                      key=".2"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="divider"
-                        onKeyDown={[Function]}
-                        role="separator"
-                      />
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={false}
-                      divider={false}
-                      header={true}
-                      key=".3"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="dropdown-header"
-                        onKeyDown={[Function]}
-                        role="heading"
-                      >
-                        Saved Bookmarks
-                      </li>
-                    </MenuItem>
-                    <MenuItem
-                      bsClass="dropdown"
-                      disabled={true}
-                      divider={false}
-                      header={false}
-                      key=".5"
-                      onKeyDown={[Function]}
-                      onSelect={[Function]}
-                    >
-                      <li
-                        className="disabled"
-                        role="presentation"
-                      >
-                        <SafeAnchor
-                          componentClass="a"
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          role="menuitem"
-                          tabIndex="-1"
-                        >
-                          <a
-                            href="#"
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            role="menuitem"
-                            tabIndex="-1"
-                          >
-                             
-                            None found
-                          </a>
-                        </SafeAnchor>
-                      </li>
-                    </MenuItem>
-                  </ul>
-                </RootCloseWrapper>
-              </DropdownMenu>
-            </div>
-          </ButtonGroup>
-        </Dropdown>
-      </Uncontrolled(Dropdown)>
-    </BookmarkContainer>
-  </Connect(BookmarkContainer)>
-</Provider>
+          
+        </span>
+         Documentation
+      </a>
+    </li>
+    <li
+      class="divider"
+      role="separator"
+    >
+      
+    </li>
+    <li
+      class="dropdown-header"
+      role="heading"
+    >
+      Saved Bookmarks
+    </li>
+    <li
+      class="disabled"
+      role="presentation"
+    >
+      <a
+        href="#"
+        role="menuitem"
+        tabindex="-1"
+      >
+         None found
+      </a>
+    </li>
+  </ul>
+</div>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/bookmarks/bookmarks.test.js b/webpack/assets/javascripts/react_app/components/bookmarks/bookmarks.test.js
index 22d2355a18d1..c617f38b6616 100644
--- a/webpack/assets/javascripts/react_app/components/bookmarks/bookmarks.test.js
+++ b/webpack/assets/javascripts/react_app/components/bookmarks/bookmarks.test.js
@@ -1,5 +1,5 @@
 import toJson from 'enzyme-to-json';
-import { mount } from 'enzyme';
+import { render, mount } from 'enzyme';
 import React from 'react';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
@@ -19,61 +19,42 @@ jest.mock('../../API');
 API.get = jest.fn(() => Promise.resolve({ results: bookmarks }));
 const mockStore = configureMockStore([thunk]);
 
-function setup() {
+function setup(state = initialState) {
   const props = {
     data: {
       controller: 'hosts',
       url: '/api/bookmarks',
       canCreate: true,
+      documentationUrl: '',
     },
   };
 
-  const wrapper = mount(<Provider store={mockStore(initialState)}>
+  const component = <Provider store={mockStore(state)}>
       <BookmarksContainer {...props} />
-    </Provider>);
+    </Provider>;
 
   return {
     props,
-    wrapper,
+    component,
   };
 }
 
 describe('bookmarks', () => {
   it('empty state', () => {
-    const { wrapper } = setup();
-
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(render(setup().component))).toMatchSnapshot();
   });
-
   it('should show loading spinner when loading bookmarks', () => {
-    const wrapper = mount(<Provider store={mockStore(afterRequest)}>
-        <BookmarksContainer {...setup().props} />
-      </Provider>);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
+    const spinner = mount(setup(afterRequest).component).find('Spinner');
+    expect(spinner.length).toBe(1);
   });
-
   it('should show an error message if loading failed', () => {
-    const wrapper = mount(<Provider store={mockStore(afterError)}>
-        <BookmarksContainer {...setup().props} />
-      </Provider>);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(render(setup(afterError).component))).toMatchSnapshot();
   });
-
   it('should show no bookmarks if server did not respond with any', () => {
-    const wrapper = mount(<Provider store={mockStore(afterSuccessNoResults)}>
-        <BookmarksContainer {...setup().props} />
-      </Provider>);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(render(setup(afterSuccessNoResults).component))).toMatchSnapshot();
   });
   it('should include existing bookmarks for the current controller', () => {
-    const wrapper = mount(<Provider store={mockStore(afterSuccess)}>
-        <BookmarksContainer {...setup().props} />
-      </Provider>);
-
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(mount(setup(afterSuccess).component).find('Bookmark').length).toBe(2);
   });
   it('should not allow creating a new bookmark for users who dont have permission', () => {
     const { props } = setup();
@@ -84,16 +65,16 @@ describe('bookmarks', () => {
         <BookmarksContainer {...props} />
       </Provider>);
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.find('MenuItem#newBookmarks').length).toBe(0);
   });
   it('should hide the modal form intiailly', () => {
-    const { wrapper } = setup();
-
-    expect(wrapper.find('BookmarkContainer').props().showModal).toBe(false);
+    expect(mount(setup().component).find('BookmarkContainer').props().showModal).toBe(false);
   });
+
   xit('should open the modal form for new bookmark', () => {
-    const { wrapper } = setup();
+    const { component } = setup();
 
+    const wrapper = mount(component);
     expect(wrapper.find('BookmarkContainer').props().showModal).toBe(false);
     wrapper.find('a #newBookmark').simulate('click');
     expect(wrapper.find('BookmarkContainer').props().showModal).toBe(true);
diff --git a/webpack/assets/javascripts/react_app/components/bookmarks/index.js b/webpack/assets/javascripts/react_app/components/bookmarks/index.js
index f7fc5192441b..5848c679967b 100644
--- a/webpack/assets/javascripts/react_app/components/bookmarks/index.js
+++ b/webpack/assets/javascripts/react_app/components/bookmarks/index.js
@@ -55,7 +55,7 @@ class BookmarkContainer extends React.Component {
               {__('Bookmark this search')}
             </MenuItem>
           )}
-          <DocumentationUrl id="bookmarkDocumentation" href={documentationUrl} />
+          <DocumentationUrl href={documentationUrl} />
           <MenuItem divider={true} />
           <MenuItem header>{__('Saved Bookmarks')}</MenuItem>
           {status === STATUS.PENDING && (
diff --git a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.stories.js b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.stories.js
new file mode 100644
index 000000000000..55601ff8f913
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.stories.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import DocumentationLink, { DocumentLinkContent } from './index';
+
+storiesOf('DocumentationLink', module)
+  .add('Default', () => (
+    <div>
+      <ul>
+        <DocumentationLink handleClick={action('Link was clicked')} href="#" />
+      </ul>
+    </div>
+  ))
+  .add('DocumentLinkContent wrapped in a button', () => (
+    <div>
+      <button className="btn btn-default">
+        <DocumentLinkContent />
+      </button>
+      <button className="btn btn-primary">
+        <DocumentLinkContent />
+      </button>
+      <button className="btn btn-warning">
+        <DocumentLinkContent />
+      </button>
+      <button className="btn btn-danger">
+        <DocumentLinkContent />
+      </button>
+    </div>
+  ))
+  .add('DocumentLinkContent', () => <DocumentLinkContent />);
diff --git a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.test.js b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.test.js
index 63513fb0c219..68acde99af4f 100644
--- a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/DocumentationLink.test.js
@@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 import React from 'react';
-import Link from './';
+import Link from './index';
 
 describe('documentation links', () => {
   beforeEach(() => {
diff --git a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
index 3e1a4d93a37a..8f6f9d1e0b59 100644
--- a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/__snapshots__/DocumentationLink.test.js.snap
@@ -7,14 +7,9 @@ exports[`documentation links should have an external link to documentation 1`] =
   divider={false}
   header={false}
   href="http://theforeman.org"
-  id="documentationLink"
   key="documentationUrl"
   onClick={[Function]}
 >
-  <Component
-    className="icon-black"
-    type="question-sign"
-  />
-   Documentation
+  <DocumentLinkContent />
 </MenuItem>
 `;
diff --git a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/index.js b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/index.js
index df010f9bdfe0..5ba11a32c6c4 100644
--- a/webpack/assets/javascripts/react_app/components/common/DocumentationLink/index.js
+++ b/webpack/assets/javascripts/react_app/components/common/DocumentationLink/index.js
@@ -1,17 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { MenuItem } from 'patternfly-react';
 import Icon from '../Icon';
+import { newWindowOnClick } from '../../../common/helpers';
 
-export default ({ href, id = 'documentationLink' }) => {
-  const handleClick = (e) => {
-    e.preventDefault();
-    window.open(href, '_blank');
-  };
+// TODO: move children's default value to defaultProps once "Fixes #17263" is merged
+export const DocumentLinkContent = ({ children = __('Documentation') }) => (
+  <React.Fragment>
+    <Icon type="question-sign" className="icon-black" />
+    {` ${children}`}
+  </React.Fragment>
+);
 
-  return (
-    <MenuItem key="documentationUrl" id={id} href={href} onClick={handleClick}>
-      <Icon type="question-sign" className="icon-black" />
-      {` ${__('Documentation')}`}
-    </MenuItem>
-  );
+DocumentLinkContent.propTypes = {
+  children: PropTypes.node,
 };
+
+const DocumentationLink = ({ href }) => (
+  <MenuItem key="documentationUrl" href={href} onClick={newWindowOnClick(href)}>
+    <DocumentLinkContent />
+  </MenuItem>
+);
+
+DocumentationLink.propTypes = {
+  href: PropTypes.string.isRequired,
+};
+
+export default DocumentationLink;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/DefaultEmptyState.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/DefaultEmptyState.js
new file mode 100644
index 000000000000..960e83b62339
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/DefaultEmptyState.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import EmptyStatePattern from './EmptyStatePattern';
+import PrimaryActionButton from './EmptyStatePrimaryActionButton';
+import SecondaryActionButtons from './EmptyStateSecondaryActionButtons';
+import { defaultEmptyStatePropTypes } from './EmptyStatePropTypes';
+import { DocumentLinkContent } from '../DocumentationLink';
+
+const documentationBlock = ({
+  url,
+  label = __('For more information please see'),
+  buttonLabel = __('Documentation'),
+}) =>
+  (url ? (
+    <React.Fragment>
+      {label}{' '}
+      <a href={url} target="_blank">
+        <DocumentLinkContent>{buttonLabel}</DocumentLinkContent>
+      </a>
+    </React.Fragment>
+  ) : null);
+
+const DefaultEmptyState = (props) => {
+  const {
+    icon,
+    header,
+    description,
+    documentation,
+    action,
+    secondaryActions,
+  } = props;
+
+  return (
+    <EmptyStatePattern
+      icon={icon}
+      header={header}
+      description={description}
+      documentation={documentation ? documentationBlock(documentation) : null}
+      action={<PrimaryActionButton action={action} />}
+      secondaryActions={<SecondaryActionButtons actions={secondaryActions} />}
+    />
+  );
+};
+
+DefaultEmptyState.propTypes = defaultEmptyStatePropTypes;
+
+DefaultEmptyState.defaultProps = {
+  icon: 'add-circle-o',
+  secondaryActions: [],
+};
+
+export default DefaultEmptyState;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.stories.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.stories.js
new file mode 100644
index 000000000000..095ae12403d3
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.stories.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { text, select, boolean, withKnobs } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import DefaultEmptyState, { EmptyStatePattern } from './index';
+
+storiesOf('Empty State Pattern', module)
+  .addDecorator(withKnobs)
+  .add('Default', () => (
+    <EmptyStatePattern
+      icon={select('icons', ['add-circle-o', 'edit', 'key', 'print'], 'key')}
+      header={text('header', 'This is the header')}
+      description={text('description', 'Your description goes here!')}
+    />
+  ))
+  .add('with Primary Action', () => (
+    <EmptyStatePattern
+      icon={select('icons', ['add-circle-o', 'edit', 'key', 'print'], 'key')}
+      header={text('header', 'HEADER')}
+      description={text('description', 'DESCRIPTION!')}
+      action={
+        <button onClick={action('doing something')}>Do Something now!</button>
+      }
+    />
+  ))
+  .add('with Primary and Secondary Actions', () => (
+    <EmptyStatePattern
+      icon={select('icons', ['add-circle-o', 'edit', 'key', 'print'], 'key')}
+      header={text('header', 'HEADER')}
+      description={text('description', 'DESCRIPTION!')}
+      action={
+        <button onClick={action('create clicked')} className="btn-primary">
+          Create
+        </button>
+      }
+      secondaryActions={
+        <React.Fragment>
+          <button onClick={action('reading')} className="btn-default">
+            Read
+          </button>
+          <button onClick={action('retrying')} className="btn-success">
+            Retry
+          </button>
+          <button onClick={action('destroying')} className="btn-danger">
+            Destroy
+          </button>
+          <button onClick={action('reloading')} className="btn-warning">
+            Reload
+          </button>
+        </React.Fragment>
+      }
+    />
+  ))
+  .add('with customized Documentation', () => (
+    <EmptyStatePattern
+      icon={select('icons', ['add-circle-o', 'edit', 'key', 'print'], 'key')}
+      header={text('header', 'HEADER')}
+      description={text('description', 'DESCRIPTION!')}
+      documentation={
+        <React.Fragment>
+          To read more about this click on the link below<br />
+          <a href="#">Documentation</a>
+        </React.Fragment>
+      }
+    />
+  ))
+  .add('Foreman Empty State', () => {
+    const customizeDocLabel = boolean('customize doc label', false);
+    const customizeDocButtonLabel = boolean('costumize button label', false);
+    const docObject = { url: '#' };
+    if (customizeDocLabel) {
+      docObject.label = text('documentation label', 'Read documents ->');
+    }
+    if (customizeDocButtonLabel) {
+      docObject.buttonLabel = text(
+        'documentation button label',
+        'Click here',
+      );
+    }
+    return (
+      <DefaultEmptyState
+        icon={select('icons', ['add-circle-o', 'edit', 'key', 'print'], 'key')}
+        header={text('header', 'HEADER')}
+        description={text('description', 'DESCRIPTION!')}
+        documentation={docObject}
+        action={{
+          title: text('primary action title', 'Primary'),
+          url: text('primary action url', '#'),
+        }}
+        secondaryActions={[
+          {
+            title: text('secondary action title', 'Secondary'),
+            url: text('secondary action url', '#'),
+          },
+        ]}
+      />
+    );
+  });
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.test.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.test.js
new file mode 100644
index 000000000000..814ec96e5247
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyState.test.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import DefaultEmptyState, { EmptyStatePattern } from './index';
+import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
+
+const defaultEmptyStateFixtures = {
+  'icon, header, description and main action are mandatory': {
+    header: 'header1',
+    description: 'description1',
+    action: { title: 'action-title', url: 'action-url' },
+  },
+  'should render secondary actions': {
+    header: 'Printers',
+    description: 'Printers print a file from the computer',
+    action: { title: 'action-1-title', url: 'action-1-url' },
+    secondaryActions: [
+      { title: 'action-2-title', url: 'action-2-url' },
+      { title: 'action-3-title', url: 'action-3-url' },
+      { title: 'action-4-title', url: 'action-4-url' },
+    ],
+  },
+};
+
+describe('Default Empty State', () => {
+  // React.Fragment is rendered as <Unknown>:
+  // https://github.com/facebook/jest/pull/5816
+  // To fix this, I am using TestRenderer.create.
+  // TODO: when jest-cli is upgraded to 23.0.0 move this to fixtures above.
+  it('should render documentation when given a url', () => {
+    expect(TestRenderer.create(<DefaultEmptyState
+          header="Printers"
+          description="Printers print a file from the computer"
+          action={{ title: 'action-title', url: 'action-url' }}
+          documentation={{ url: 'doc-url' }}
+        />)).toMatchSnapshot();
+  });
+  testComponentSnapshotsWithFixtures(
+    DefaultEmptyState,
+    defaultEmptyStateFixtures,
+  );
+});
+
+const emptyStatePatternFixtures = {
+  'icon, header and description are mandatory': {
+    icon: 'printer',
+    header: 'Printers',
+    description: 'Printers print a file from the computer',
+  },
+  'should render description when given one as a text': {
+    icon: 'printer',
+    header: 'Printers',
+    description: 'Printers print a file from the computer',
+    documentation: 'This is a simple description',
+  },
+  'should render description when given one as JSX': {
+    icon: 'printer',
+    header: 'Printers',
+    description: 'Printers print a file from the computer',
+    documentation: (
+      <div>
+        This is my <b>description</b>.
+      </div>
+    ),
+  },
+  'should render main action when given one': {
+    icon: 'printer',
+    header: 'printers',
+    description: 'printers print a file from the computer',
+    action: <button>action-title</button>,
+  },
+  'should render secondary action when given one': {
+    icon: 'printer',
+    header: 'printers',
+    description: 'printers print a file from the computer',
+    secondaryActions: [
+      <button key="y">action-y</button>,
+      <button key="x">action-x</button>,
+    ],
+  },
+};
+
+describe('Empty State Pattern', () => {
+  testComponentSnapshotsWithFixtures(
+    EmptyStatePattern,
+    emptyStatePatternFixtures,
+  );
+});
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
new file mode 100644
index 000000000000..4dc98c37f9db
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePattern.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { EmptyState as PfEmptyState } from 'patternfly-react';
+import { emptyStatePatternPropTypes } from './EmptyStatePropTypes';
+
+const EmptyStatePattern = (props) => {
+  const { documentation, action, secondaryActions } = props;
+  return (
+    <PfEmptyState>
+      <PfEmptyState.Icon type="pf" name={props.icon} />
+      <PfEmptyState.Title>{props.header}</PfEmptyState.Title>
+      <PfEmptyState.Info>{props.description}</PfEmptyState.Info>
+      {documentation && <PfEmptyState.Help>{documentation}</PfEmptyState.Help>}
+      {action && <PfEmptyState.Action>{action}</PfEmptyState.Action>}
+      {secondaryActions && (
+        <PfEmptyState.Action secondary>{secondaryActions}</PfEmptyState.Action>
+      )}
+    </PfEmptyState>
+  );
+};
+
+EmptyStatePattern.propTypes = emptyStatePatternPropTypes;
+
+export default EmptyStatePattern;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePrimaryActionButton.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePrimaryActionButton.js
new file mode 100644
index 000000000000..bd40043a9c0d
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePrimaryActionButton.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'patternfly-react';
+import { actionButtonPropTypes } from './EmptyStatePropTypes';
+
+const PrimaryActionButton = ({ action: { title, url } }) => (
+  <Button url={url} bsStyle="primary" bsSize="large">
+    {title}
+  </Button>
+);
+
+PrimaryActionButton.propTypes = {
+  action: PropTypes.shape(actionButtonPropTypes),
+};
+
+export default PrimaryActionButton;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePropTypes.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePropTypes.js
new file mode 100644
index 000000000000..4712f354938a
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStatePropTypes.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+export const actionButtonPropTypes = {
+  title: PropTypes.node.isRequired,
+  url: PropTypes.string.isRequired,
+};
+
+export const emptyStatePatternPropTypes = {
+  icon: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  documentation: PropTypes.node,
+  action: PropTypes.node,
+  secondaryActions: PropTypes.node,
+};
+
+export const defaultEmptyStatePropTypes = {
+  ...emptyStatePatternPropTypes,
+  icon: PropTypes.string,
+  documentation: PropTypes.shape({
+    label: PropTypes.string,
+    buttonLabel: PropTypes.string,
+    url: PropTypes.string.isRequired,
+  }),
+  action: PropTypes.shape(actionButtonPropTypes).isRequired,
+  secondaryActions: PropTypes.arrayOf(PropTypes.shape(actionButtonPropTypes)),
+};
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStateSecondaryActionButtons.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStateSecondaryActionButtons.js
new file mode 100644
index 000000000000..81d146cce438
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/EmptyStateSecondaryActionButtons.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'patternfly-react';
+import { actionButtonPropTypes } from './EmptyStatePropTypes';
+
+const SecondaryActionButtons = ({ actions }) =>
+  actions.map(({ title, url }) => (
+    <Button key={`sec-button-${title}`} url={url}>
+      {title}
+    </Button>
+  ));
+
+SecondaryActionButtons.propTypes = {
+  actions: PropTypes.arrayOf(PropTypes.shape(actionButtonPropTypes)),
+};
+
+SecondaryActionButtons.defaultProps = {
+  actions: [],
+};
+
+export default SecondaryActionButtons;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap b/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
new file mode 100644
index 000000000000..cbfb6871657b
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/__snapshots__/EmptyState.test.js.snap
@@ -0,0 +1,268 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default Empty State icon, header, description and main action are mandatory 1`] = `
+<EmptyStatePattern
+  action={
+    <PrimaryActionButton
+      action={
+        Object {
+          "title": "action-title",
+          "url": "action-url",
+        }
+      }
+    />
+  }
+  description="description1"
+  documentation={null}
+  header="header1"
+  icon="add-circle-o"
+  secondaryActions={
+    <SecondaryActionButtons
+      actions={Array []}
+    />
+  }
+/>
+`;
+
+exports[`Default Empty State should render documentation when given a url 1`] = `
+<div
+  className="blank-slate-pf"
+>
+  <div
+    className="blank-slate-pf-icon"
+  >
+    <span
+      aria-hidden="true"
+      className="pficon pficon-add-circle-o"
+    />
+  </div>
+  <h4
+    className="h1 blank-slate-pf-title"
+  >
+    Printers
+  </h4>
+  <p
+    className="blank-slate-pf-info"
+  >
+    Printers print a file from the computer
+  </p>
+  <p
+    className="blank-slate-pf-helpLink"
+  >
+    For more information please see
+     
+    <a
+      href="doc-url"
+      target="_blank"
+    >
+      <span
+        className="glyphicon glyphicon-question-sign icon-black"
+      />
+       Documentation
+    </a>
+  </p>
+  <div
+    className="blank-slate-pf-main-action"
+  >
+    <button
+      className="btn btn-lg btn-primary"
+      disabled={false}
+      type="button"
+      url="action-url"
+    >
+      action-title
+    </button>
+  </div>
+  <div
+    className="blank-slate-pf-secondary-action"
+  />
+</div>
+`;
+
+exports[`Default Empty State should render secondary actions 1`] = `
+<EmptyStatePattern
+  action={
+    <PrimaryActionButton
+      action={
+        Object {
+          "title": "action-1-title",
+          "url": "action-1-url",
+        }
+      }
+    />
+  }
+  description="Printers print a file from the computer"
+  documentation={null}
+  header="Printers"
+  icon="add-circle-o"
+  secondaryActions={
+    <SecondaryActionButtons
+      actions={
+        Array [
+          Object {
+            "title": "action-2-title",
+            "url": "action-2-url",
+          },
+          Object {
+            "title": "action-3-title",
+            "url": "action-3-url",
+          },
+          Object {
+            "title": "action-4-title",
+            "url": "action-4-url",
+          },
+        ]
+      }
+    />
+  }
+/>
+`;
+
+exports[`Empty State Pattern icon, header and description are mandatory 1`] = `
+<EmptyState
+  className=""
+>
+  <EmptyStateIcon
+    className=""
+    name="printer"
+    type="pf"
+  />
+  <EmptyStateTitle
+    className=""
+  >
+    Printers
+  </EmptyStateTitle>
+  <EmptyStateInfo
+    className=""
+  >
+    Printers print a file from the computer
+  </EmptyStateInfo>
+</EmptyState>
+`;
+
+exports[`Empty State Pattern should render description when given one as JSX 1`] = `
+<EmptyState
+  className=""
+>
+  <EmptyStateIcon
+    className=""
+    name="printer"
+    type="pf"
+  />
+  <EmptyStateTitle
+    className=""
+  >
+    Printers
+  </EmptyStateTitle>
+  <EmptyStateInfo
+    className=""
+  >
+    Printers print a file from the computer
+  </EmptyStateInfo>
+  <EmptyStateHelp
+    className=""
+  >
+    <div>
+      This is my 
+      <b>
+        description
+      </b>
+      .
+    </div>
+  </EmptyStateHelp>
+</EmptyState>
+`;
+
+exports[`Empty State Pattern should render description when given one as a text 1`] = `
+<EmptyState
+  className=""
+>
+  <EmptyStateIcon
+    className=""
+    name="printer"
+    type="pf"
+  />
+  <EmptyStateTitle
+    className=""
+  >
+    Printers
+  </EmptyStateTitle>
+  <EmptyStateInfo
+    className=""
+  >
+    Printers print a file from the computer
+  </EmptyStateInfo>
+  <EmptyStateHelp
+    className=""
+  >
+    This is a simple description
+  </EmptyStateHelp>
+</EmptyState>
+`;
+
+exports[`Empty State Pattern should render main action when given one 1`] = `
+<EmptyState
+  className=""
+>
+  <EmptyStateIcon
+    className=""
+    name="printer"
+    type="pf"
+  />
+  <EmptyStateTitle
+    className=""
+  >
+    printers
+  </EmptyStateTitle>
+  <EmptyStateInfo
+    className=""
+  >
+    printers print a file from the computer
+  </EmptyStateInfo>
+  <EmptyStateAction
+    className=""
+    secondary={false}
+  >
+    <button>
+      action-title
+    </button>
+  </EmptyStateAction>
+</EmptyState>
+`;
+
+exports[`Empty State Pattern should render secondary action when given one 1`] = `
+<EmptyState
+  className=""
+>
+  <EmptyStateIcon
+    className=""
+    name="printer"
+    type="pf"
+  />
+  <EmptyStateTitle
+    className=""
+  >
+    printers
+  </EmptyStateTitle>
+  <EmptyStateInfo
+    className=""
+  >
+    printers print a file from the computer
+  </EmptyStateInfo>
+  <EmptyStateAction
+    className=""
+    secondary={true}
+  >
+    <button
+      key="y"
+    >
+      action-y
+    </button>
+    <button
+      key="x"
+    >
+      action-x
+    </button>
+  </EmptyStateAction>
+</EmptyState>
+`;
diff --git a/webpack/assets/javascripts/react_app/components/common/EmptyState/index.js b/webpack/assets/javascripts/react_app/components/common/EmptyState/index.js
new file mode 100644
index 000000000000..80fa907a4dfd
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/common/EmptyState/index.js
@@ -0,0 +1,5 @@
+import EmptyStatePattern from './EmptyStatePattern';
+import DefaultEmptyState from './DefaultEmptyState';
+
+export default DefaultEmptyState;
+export { EmptyStatePattern };