Reorganize side nav (#428)

* Refactor navigation data structure to be more dynamic. * Reorganize routes into role-based categories. * Reorganize sidenav items. Delete sandboxes. * Humanize page titles. * Add stack trace information to EuiErrorBoundary.
elastic · Feb 21, 2018 · 58fb2ad · 58fb2ad
1 parent 0f9c776
commit 58fb2ad
Show file tree

Hide file tree

Showing 44 changed files with 204 additions and 1,020 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiInMemoryTable`, which encapsulates sorting, searching, selection, and pagination state
+and logic ([#390](https://github.com/elastic/eui/pull/390))
+- Added stack trace information to `EuiErrorBoundary` ([#428](https://github.com/elastic/eui/pull/428))
+
 **Bug fixes**
 
 - Fixed `EuiContextMenu` bug when using the keyboard to navigate up, which was caused by unnecessarily re-rendering the items, thus losing references to them ([#431](https://github.com/elastic/eui/pull/431))
@@ -9,7 +13,7 @@
 - Added `EuiDelayHide` component. ([#412](https://github.com/elastic/eui/pull/412))
 - Decreased overall size of checkbox, radio, and switches as well as better styles for the different states. ([#407](https://github.com/elastic/eui/pull/407))
 - Added `EuiFilePicker` component for `input type="file"` needs. ([#402](https://github.com/elastic/eui/pedull/402))
-- Add `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))
+- Added `isLoading` prop to `EuiButton` ([#427](https://github.com/elastic/eui/pull/427))
 - Added icons: `eye`, `eyeClosed`, `grab`, `heatmap`, `vector` ([#427](https://github.com/elastic/eui/pull/427))
 - Added `hasNoInitialSelection` option to `EuiSelect`. ([#422](https://github.com/elastic/eui/pull/422))
 
@@ -19,7 +23,7 @@
 - Fixed disabled vs enabled appearance of checked checkeboxes and radios ([#407](https://github.com/elastic/eui/pull/407))
 - Fixed disabled & checked state of switches ([#407](https://github.com/elastic/eui/pull/407))
 - Fixed `EuiCard` content alignment when content is short. ([#415](https://github.com/elastic/eui/pull/415))
-- Only apply the `$euiCodeBlockSelectedBackgroundColor` variable  if it is a color ([#427](https://github.com/elastic/eui/pull/427))
+- Only apply the `$euiCodeBlockSelectedBackgroundColor` variable if it is a color ([#427](https://github.com/elastic/eui/pull/427))
 - No margins for `<hr>` ([#427](https://github.com/elastic/eui/pull/427))
 - Fixed `EuiButton` truncation ([#427](https://github.com/elastic/eui/pull/427))
 
@@ -36,17 +40,17 @@
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
 - Changed look and feel of pagination. Added `compressed` prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380))
 - Added `EuiBasicTable` as an opinionated, high level component for constructing tables. Its addition deprecates `EuiTableOfRecords` which is still avaiable, but now marked for removal. ([#377](https://github.com/elastic/eui/pull/377))
-- Add styles for `readOnly` states of form controls. ([#391](https://github.com/elastic/eui/pull/391))
+- Added styles for `readOnly` states of form controls. ([#391](https://github.com/elastic/eui/pull/391))
 - Added importAction and exportAction icons ([#394](https://github.com/elastic/eui/pull/394))
 - Added `EuiCard` for UI patterns that need an icon/image, title and description with some sort of action. ([#380](https://github.com/elastic/eui/pull/380))
-- Add TypeScript definitions for the `EuiHealth` component. ([#403](https://github.com/elastic/eui/pull/403))
+- Added TypeScript definitions for the `EuiHealth` component. ([#403](https://github.com/elastic/eui/pull/403))
 - Added `SearchBar` component - introduces a simple yet rich query language to search for objects + search box and filter controls to construct/manipulate it. ([#379](https://github.com/elastic/eui/pull/379))
 
 **Bug fixes**
 
 - Tables now default to `table-layout: fixed` to avoid some collapsing cell problems. [#398](https://github.com/elastic/eui/pull/398)
 - Wrap long lines of text within the body of `EuiToast` instead of letting text overflow ([#392](https://github.com/elastic/eui/pull/392))
-- Fix dark theme coloring of Substeps ([#396](https://github.com/elastic/eui/pull/396))
+- Fixed dark theme coloring of Substeps ([#396](https://github.com/elastic/eui/pull/396))
 - Reorder selectors to fix fixed progress bar in Firefox ([#404](https://github.com/elastic/eui/pull/404))
 
 # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20)
@@ -184,8 +188,8 @@
 
 **Bug fixes**
 
-- Fix bug in `Pager` service which occurred when there were no items. [(#237)[https://github.com/elastic/eui/pull/237]]
-- Add `isPageable` method to `Pager` service and set first and last page index to -1 when there are no pages. [(#242)[https://github.com/elastic/eui/pull/242]]
+- Fixed bug in `Pager` service which occurred when there were no items. [(#237)[https://github.com/elastic/eui/pull/237]]
+- Added `isPageable` method to `Pager` service and set first and last page index to -1 when there are no pages. [(#242)[https://github.com/elastic/eui/pull/242]]
 
 # [`0.0.9`](https://github.com/elastic/eui/tree/v0.0.9)
 
@@ -219,13 +223,13 @@
 # [`0.0.6`](https://github.com/elastic/eui/tree/v0.0.6)
 
 - `justify` prop of `EuiFlexGroup` now accepts `spaceEvenly` [(#205)](https://github.com/elastic/eui/pull/205)
-- Increase size of  `<EuiTitle size="s">` so that it's distinguishable as a title [(#204)](https://github.com/elastic/eui/pull/204)
+- Increased size of `<EuiTitle size="s">` so that it's distinguishable as a title [(#204)](https://github.com/elastic/eui/pull/204)
 
 # [`0.0.5`](https://github.com/elastic/eui/tree/v0.0.5)
 
 **Bug fixes**
 
-- Fixed import paths for `EuiTable`, `EuiHealth`, and `EuiPopover` which prevented dependents of EUI from being able to compile when importing components from the `lib` directory  [(#203)](https://github.com/elastic/eui/pull/203)
+- Fixed import paths for `EuiTable`, `EuiHealth`, and `EuiPopover` which prevented dependents of EUI from being able to compile when importing components from the `lib` directory [(#203)](https://github.com/elastic/eui/pull/203)
 
 # [`0.0.4`](https://github.com/elastic/eui/tree/v0.0.4)
 
@@ -236,18 +240,17 @@
 - Table spacing is now smaller [(#158)](https://github.com/elastic/eui/pull/158)
 - Dark theme forms now have better contrast with their borders [(#158)](https://github.com/elastic/eui/pull/158)
 - Added icons to match Kibana's app directory [(#162)](https://github.com/elastic/eui/pull/162)
-- Convert icons from SVG to React component during the build and stop using
-  sprites [(#160)](https://github.com/elastic/eui/pull/160)
-- Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `EuiCodeEditor` ([#169](https://github.com/elastic/eui/pull/169))
-- Add `wrap` prop to `EuiFlexGroup` ([#170](https://github.com/elastic/eui/pull/170))
-- Add `scope` prop to `EuiTableHeaderCell` and `EuiTableHeaderCellCheckbox` ([#171](https://github.com/elastic/eui/pull/171))
-- Add `disabled` prop to `EuiContextMenuItem` ([#172](https://github.com/elastic/eui/pull/172))
-- Add `EuiTablePagination` component and `Pager` service ([#178](https://github.com/elastic/eui/pull/178))
-- Add `EuiTooltip` component ([#174](https://github.com/elastic/eui/pull/174), [#193](https://github.com/elastic/eui/pull/193))
-- Add a bold weight of 700 and apply it to `<strong>` elements by default ([#193](https://github.com/elastic/eui/pull/193))
+- Converted icons from SVG to React component during the build and stop using sprites [(#160)](https://github.com/elastic/eui/pull/160)
+- Added `isReadOnly`, `setOptions`, and `cursorStart` props to `EuiCodeEditor` ([#169](https://github.com/elastic/eui/pull/169))
+- Added `wrap` prop to `EuiFlexGroup` ([#170](https://github.com/elastic/eui/pull/170))
+- Added `scope` prop to `EuiTableHeaderCell` and `EuiTableHeaderCellCheckbox` ([#171](https://github.com/elastic/eui/pull/171))
+- Added `disabled` prop to `EuiContextMenuItem` ([#172](https://github.com/elastic/eui/pull/172))
+- Added `EuiTablePagination` component and `Pager` service ([#178](https://github.com/elastic/eui/pull/178))
+- Added `EuiTooltip` component ([#174](https://github.com/elastic/eui/pull/174), [#193](https://github.com/elastic/eui/pull/193))
+- Added a bold weight of 700 and apply it to `<strong>` elements by default ([#193](https://github.com/elastic/eui/pull/193))
 - Icon size prop now accepts `s`. Adjusted coloring of sidenav arrows ([#178](https://github.com/elastic/eui/pull/197))
-- Add `EuiErrorBoundary` ([#198](https://github.com/elastic/eui/pull/198))
-- Export `test` module, which includes `findTestSubject`, `startThrowingReactWarnings`, `stopThrowingReactWarnings`, `requiredProps`, and `takeMountedSnapshot` helpers ([#198](https://github.com/elastic/eui/pull/198))
+- Added `EuiErrorBoundary` ([#198](https://github.com/elastic/eui/pull/198))
+- Exported `test` module, which includes `findTestSubject`, `startThrowingReactWarnings`, `stopThrowingReactWarnings`, `requiredProps`, and `takeMountedSnapshot` helpers ([#198](https://github.com/elastic/eui/pull/198))
 - Added a more systematic way to add themes; includes a new K6 theme for Kibana. [(#191)](https://github.com/elastic/eui/pull/191)
 
 **Bug fixes**
@@ -265,7 +268,7 @@
 
 - `EuiFlexItem` now accepts integers between 1 and 10 for the `grow` prop. [(#144)](https://github.com/elastic/eui/pull/144)
 - `EuiFlexItem` and `EuiFlexGrow` now accept a `component` prop which you can set to `span` or `div` (default). [(#141)](https://github.com/elastic/eui/pull/141)
-- Add `isLoading` prop to form inputs to allow for a loading state [(#150)](https://github.com/elastic/eui/pull/150)
+- Added `isLoading` prop to form inputs to allow for a loading state [(#150)](https://github.com/elastic/eui/pull/150)
 
 **Breaking changes**
 

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -115,6 +115,5 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
-@import "guide_sandbox/index";
 @import "guide_section/index";
 @import "guide_rule/index";
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -91,172 +91,47 @@ export class GuidePageChrome extends Component {
     }));
   }
 
-  renderGuidelineNavItems() {
-    const matchingItems = this.props.guidelines.filter(item => (
-      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
-    ));
-
-    const items = matchingItems.map(item => {
-      const {
-        name,
-        path,
-        sections,
-      } = item;
-
-      return {
-        id: `guideline-${path}`,
-        name,
-        href: `#/${path}`,
-        items: this.renderSubSections(sections),
-        isSelected: name === this.props.currentRouteName,
-      };
-    });
-
-    if (!items.length) {
-      return;
-    }
-
-    return {
-      name: 'Guidelines',
-      id: 'guidelines',
-      items,
-    };
-  }
-
-  renderServiceNavItems() {
-    const matchingItems = this.props.services.filter(item => (
-      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
-    ));
-
-    const items = matchingItems.map(item => {
-      const {
-        name,
-        path,
-        sections,
-      } = item;
-
-      return {
-        id: `service-${path}`,
-        name,
-        href: `#/${path}`,
-        items: this.renderSubSections(sections),
-        isSelected: name === this.props.currentRouteName,
-      };
-    });
-
-    if (!items.length) {
-      return;
-    }
-
-    return {
-      name: 'Services',
-      id: 'services',
-      items,
-    };
-  }
-
-  renderComponentNavItems() {
-    const matchingItems = this.props.components.filter(item => (
-      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
-    ));
-
-    const items = matchingItems.map(item => {
-      const {
-        name,
-        path,
-        sections,
-      } = item;
-
-      return {
-        id: `component-${path}`,
-        name,
-        href: `#/${path}`,
-        items: this.renderSubSections(sections),
-        isSelected: name === this.props.currentRouteName,
-      };
-    });
-
-    if (!items.length) {
-      return;
-    }
-
-    return {
-      name: 'Components',
-      id: 'components',
-      items,
-    };
-  }
-
-  rendePatternNavItems() {
-    const matchingItems = this.props.patterns.filter(item => (
-      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
-    ));
-
-    const items = matchingItems.map(item => {
-      const {
-        name,
-        path,
-        sections,
-      } = item;
-
-      return {
-        id: `pattern-${path}`,
-        name,
-        href: `#/${path}`,
-        items: this.renderSubSections(sections),
-        isSelected: name === this.props.currentRouteName,
-      };
-    });
-
-    if (!items.length) {
-      return;
-    }
-
-    return {
-      name: 'Patterns',
-      id: 'patterns',
-      items,
-    };
-  }
-
-  renderSandboxNavItems() {
-    const matchingItems = this.props.sandboxes.filter(item => (
-      item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
-    ));
-
-    const items = matchingItems.map(item => {
-      const {
-        name,
-        path,
-      } = item;
-
-      return {
-        id: `sandbox-${path}`,
-        name,
-        href: `#/${path}`,
-        isSelected: name === this.props.currentRouteName,
-      };
+  renderSideNav = sideNav => {
+    // TODO: Add contents pages
+    const sideNavSections = [];
+
+    sideNav.forEach(section => {
+      const matchingItems = section.items.filter(item => (
+        item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1
+      ));
+
+      const items = matchingItems.map(item => {
+        const {
+          name,
+          path,
+          sections,
+        } = item;
+
+        return {
+          id: `${section.type}-${path}`,
+          name,
+          href: `#/${path}`,
+          items: this.renderSubSections(sections),
+          isSelected: name === this.props.currentRouteName,
+        };
+      });
+
+      if (!items.length) {
+        return;
+      }
+
+      sideNavSections.push({
+        name: section.name,
+        id: section.type,
+        items,
+      });
     });
 
-    if (!items.length) {
-      return;
-    }
-
-    return {
-      name: 'Sandboxes',
-      id: 'sandboxes',
-      items,
-    };
-  }
+    return sideNavSections;
+  };
 
   render() {
-    const sideNav = [
-      this.renderGuidelineNavItems(),
-      this.renderServiceNavItems(),
-      this.renderComponentNavItems(),
-      this.rendePatternNavItems(),
-      this.renderSandboxNavItems(),
-    ].filter(section => section);
+    const sideNav = this.renderSideNav(this.props.navigation);
 
     let sideNavContent;
 
@@ -301,9 +176,5 @@ GuidePageChrome.propTypes = {
   currentRouteName: PropTypes.string.isRequired,
   onToggleTheme: PropTypes.func.isRequired,
   selectedTheme: PropTypes.string.isRequired,
-  guidelines: PropTypes.array.isRequired,
-  services: PropTypes.array.isRequired,
-  components: PropTypes.array.isRequired,
-  patterns: PropTypes.array.isRequired,
-  sandboxes: PropTypes.array.isRequired,
+  navigation: PropTypes.array.isRequired,
 };
diff --git a/src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss b/src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss
diff --git a/src-docs/src/components/guide_sandbox/_index.scss b/src-docs/src/components/guide_sandbox/_index.scss