From e4a2c8a2739a1afbc45a4b0cbd9e3c83894f2780 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Wed, 21 Feb 2018 11:08:10 -0800 Subject: [PATCH] Reorganize sidenav items. Delete sandboxes. --- src-docs/src/components/guide_components.scss | 1 - .../guide_page/guide_page_chrome.js | 158 -------------- .../guide_sandbox/_guide_sandbox_chrome.scss | 30 --- .../src/components/guide_sandbox/_index.scss | 1 - .../guide_sandbox/guide_sandbox_chrome.js | 62 ------ .../guide_sandbox_chrome_toggle.js | 18 -- .../src/components/guide_sandbox/index.js | 1 - .../guide_section/_guide_section.scss | 11 - .../components/guide_section/guide_section.js | 35 ---- .../guide_section/guide_section_container.js | 2 - src-docs/src/components/index.js | 4 - src-docs/src/routes.js | 56 ++--- src-docs/src/store/index.js | 4 - src-docs/src/views/app_container.js | 2 - .../src/views/kibana/advanced_settings.js | 196 ------------------ .../views/kibana/advanced_settings_sandbox.js | 37 ---- src-docs/src/views/kibana/kibana_chrome.js | 13 -- src-docs/src/views/kibana/watches.js | 178 ---------------- src-docs/src/views/kibana/watches_sandbox.js | 31 --- src-docs/src/views/partials.js | 9 - 20 files changed, 20 insertions(+), 829 deletions(-) delete mode 100644 src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss delete mode 100644 src-docs/src/components/guide_sandbox/_index.scss delete mode 100644 src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js delete mode 100644 src-docs/src/components/guide_sandbox/guide_sandbox_chrome_toggle.js delete mode 100644 src-docs/src/components/guide_sandbox/index.js delete mode 100644 src-docs/src/views/kibana/advanced_settings.js delete mode 100644 src-docs/src/views/kibana/advanced_settings_sandbox.js delete mode 100644 src-docs/src/views/kibana/kibana_chrome.js delete mode 100644 src-docs/src/views/kibana/watches.js delete mode 100644 src-docs/src/views/kibana/watches_sandbox.js delete mode 100644 src-docs/src/views/partials.js diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 1b5a4a069c33..06b4cbe24f44 100644 --- 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 index af8f823e018c..4bec19e7bdc7 100644 --- a/src-docs/src/components/guide_page/guide_page_chrome.js +++ b/src-docs/src/components/guide_page/guide_page_chrome.js @@ -91,164 +91,6 @@ 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, - }; - }); - - if (!items.length) { - return; - } - - return { - name: 'Sandboxes', - id: 'sandboxes', - items, - }; - } - renderSideNav = sideNav => { // TODO: Add contents pages return sideNav.map(section => { diff --git a/src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss b/src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss deleted file mode 100644 index 0aaf81f5f146..000000000000 --- a/src-docs/src/components/guide_sandbox/_guide_sandbox_chrome.scss +++ /dev/null @@ -1,30 +0,0 @@ -.guideSandboxChrome { - background: #222; - color: #FFF !important; - height: $euiSizeXXL; - border-bottom: $euiBorderThin; - line-height: $euiSizeXXL; - padding-left: $euiSizeS; -} - -.guideSandboxChrome__link { - color: #FFF; -} - -.guideSandboxChrome__appListIcon { - fill: #FFF !important; -} - -.guideSandboxChromeToggle { - position: fixed; - z-index: $guideZLevelHighest; - right: 0; - bottom: $euiSizeXXL; - padding: $euiSizeS; - background-color: $euiColorPrimary; - color: $euiColorEmptyShade; - - svg { - fill: $euiColorEmptyShade; - } -} diff --git a/src-docs/src/components/guide_sandbox/_index.scss b/src-docs/src/components/guide_sandbox/_index.scss deleted file mode 100644 index 81a7b53ec268..000000000000 --- a/src-docs/src/components/guide_sandbox/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./guide_sandbox_chrome"; diff --git a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js deleted file mode 100644 index 496b5485d974..000000000000 --- a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { - Link, -} from 'react-router'; - -import { - EuiIcon, - EuiFlexGroup, - EuiFlexItem, -} from '../../../../src/components'; - -import { - GuideThemeSelector, -} from '../guide_theme_selector'; - -import { - GuideSandboxChromeToggle, -} from './guide_sandbox_chrome_toggle'; - -export const GuideSandboxChrome = ({ - isVisible, - onToggleTheme, - onToggleSandboxChrome, - selectedTheme, -}) => { - const toggle = ; - - if (!isVisible) { - return toggle; - } - - return ( -
- - - - - - - - - - - - - {toggle} -
- ); -}; - -GuideSandboxChrome.propTypes = { - routes: PropTypes.array.isRequired, - onToggleTheme: PropTypes.func.isRequired, - onToggleSandboxChrome: PropTypes.func.isRequired, - selectedTheme: PropTypes.string.isRequired, - isVisible: PropTypes.bool, -}; diff --git a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome_toggle.js b/src-docs/src/components/guide_sandbox/guide_sandbox_chrome_toggle.js deleted file mode 100644 index 79a0fd43da3b..000000000000 --- a/src-docs/src/components/guide_sandbox/guide_sandbox_chrome_toggle.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import { - EuiIcon, -} from '../../../../src/components'; - -export const GuideSandboxChromeToggle = ({ - onClick, -}) => ( - -); - -GuideSandboxChromeToggle.propTypes = { - onClick: PropTypes.func.isRequired, -}; diff --git a/src-docs/src/components/guide_sandbox/index.js b/src-docs/src/components/guide_sandbox/index.js deleted file mode 100644 index 6cc2ac188909..000000000000 --- a/src-docs/src/components/guide_sandbox/index.js +++ /dev/null @@ -1 +0,0 @@ -export { GuideSandboxChrome } from './guide_sandbox_chrome'; diff --git a/src-docs/src/components/guide_section/_guide_section.scss b/src-docs/src/components/guide_section/_guide_section.scss index 3dc7b0e880f9..2e46edff3dad 100644 --- a/src-docs/src/components/guide_section/_guide_section.scss +++ b/src-docs/src/components/guide_section/_guide_section.scss @@ -8,17 +8,6 @@ height: $euiSizeL; } -.guideSandbox { - .guideSection__text { - margin-top: $euiSizeXL; - padding: 0 $euiSizeL; - } - - .guideSection__space { - height: 0; - } -} - .guideSectionPropsTable { width: auto; min-width: 50%; diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js index ea3fffd69cd3..ac094b7f0ca9 100644 --- a/src-docs/src/components/guide_section/guide_section.js +++ b/src-docs/src/components/guide_section/guide_section.js @@ -2,10 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { flatten } from 'lodash'; -import { - GuideSandboxChrome, -} from '../guide_sandbox'; - import { EuiCode, EuiCodeBlock, @@ -110,9 +106,6 @@ export class GuideSection extends Component { this.state = { selectedTab: this.tabs[0], - sandbox: { - isChromeVisible: props.isSandbox ? false : undefined, - }, }; } @@ -122,14 +115,6 @@ export class GuideSection extends Component { }); } - onToggleSandboxChrome = () => { - this.setState({ - sandbox: { - isChromeVisible: !this.state.sandbox.isChromeVisible, - }, - }); - } - renderTabs() { return this.tabs.map(tab => ( - ); - } - - if (this.props.isSandbox && !this.state.sandbox.isChromeVisible) { - return header; - } - return (
- {header}

{this.props.title}

@@ -396,7 +362,6 @@ GuideSection.propTypes = { id: PropTypes.string, source: PropTypes.array, children: PropTypes.any, - isSandbox: PropTypes.bool, toggleTheme: PropTypes.func.isRequired, theme: PropTypes.string.isRequired, routes: PropTypes.object.isRequired, diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js index 94dfd3a04de7..75d322fd63d0 100644 --- a/src-docs/src/components/guide_section/guide_section_container.js +++ b/src-docs/src/components/guide_section/guide_section_container.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import { GuideSection } from './guide_section'; import { - getIsSandbox, getTheme, getRoutes, } from '../../store'; @@ -14,7 +13,6 @@ import { function mapStateToProps(state) { return { - isSandbox: getIsSandbox(state), theme: getTheme(state), routes: getRoutes(state), }; diff --git a/src-docs/src/components/index.js b/src-docs/src/components/index.js index 1157bb59568e..460237c5c56c 100644 --- a/src-docs/src/components/index.js +++ b/src-docs/src/components/index.js @@ -10,10 +10,6 @@ export { GuidePageChrome, } from './guide_page'; -export { - GuideSandboxChrome, -} from './guide_sandbox'; - export { GuideSection, GuideSectionTypes, diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 847f6c7ad74c..10815ea09c03 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -19,6 +19,9 @@ import { import WritingGuidelines from './views/guidelines/writing'; +import TextScales + from './views/text_scaling/text_scaling_sandbox'; + // Services import { IsColorDarkExample } @@ -167,17 +170,6 @@ import { ToastExample } import { TooltipExample } from './views/tooltip/tooltip_example'; -// Sandboxes - -import AdvancedSettingsSandbox - from './views/kibana/advanced_settings_sandbox'; - -import WatchesSandbox - from './views/kibana/watches_sandbox'; - -import TextScalingSandbox - from './views/text_scaling/text_scaling_sandbox'; - /** * Lowercases input and replaces spaces with hyphens: * e.g. 'GridView Example' -> 'gridview-example' @@ -222,6 +214,9 @@ const navigation = [{ items: [{ name: 'Writing', component: WritingGuidelines, + }, { + name: 'Text scales', + component: TextScales, }], }, { name: 'Layout', @@ -238,13 +233,21 @@ const navigation = [{ PanelExample, PopoverExample, SpacerExample, + ].map(example => createExample(example)), +}, { + name: 'Navigation', + items: [ + ButtonExample, + ContextMenuExample, + KeyPadMenuExample, + LinkExample, + PaginationExample, + SideNavExample, StepsExample, - TableExample, - TableOfRecordsExample, TabsExample, ].map(example => createExample(example)), }, { - name: 'Content', + name: 'Display', items: [ AvatarExample, BadgeExample, @@ -256,27 +259,23 @@ const navigation = [{ ImageExample, LoadingExample, ProgressExample, + TableExample, + TableOfRecordsExample, TextExample, TitleExample, ToastExample, TooltipExample, ].map(example => createExample(example)), }, { - name: 'Data controls', + name: 'Forms', items: [ - ButtonExample, CodeEditorExample, ColorPickerExample, - ContextMenuExample, ExpressionExample, FilePickerExample, FilterGroupExample, FormExample, - KeyPadMenuExample, - LinkExample, - PaginationExample, SearchBarExample, - SideNavExample, ].map(example => createExample(example)), }, { name: 'Utilities', @@ -287,21 +286,6 @@ const navigation = [{ IsColorDarkExample, OutsideClickDetectorExample, ].map(example => createExample(example)), -}, { - name: 'Sandboxes', - items: [{ - name: 'Advanced Settings', - component: AdvancedSettingsSandbox, - isSandbox: true, - }, { - name: 'Watches', - component: WatchesSandbox, - isSandbox: true, - }, { - name: 'Text scales', - component: TextScalingSandbox, - isSandbox: true, - }], }].map(({ name, items, ...rest }) => ({ name, type: slugify(name), diff --git a/src-docs/src/store/index.js b/src-docs/src/store/index.js index f617797047b9..a9df2b1f4666 100644 --- a/src-docs/src/store/index.js +++ b/src-docs/src/store/index.js @@ -1,7 +1,3 @@ -export function getIsSandbox(state) { - return state.sandbox.isSandbox; -} - export function getTheme(state) { return state.theme.theme; } diff --git a/src-docs/src/views/app_container.js b/src-docs/src/views/app_container.js index ca826e9988ba..5276db0615c3 100644 --- a/src-docs/src/views/app_container.js +++ b/src-docs/src/views/app_container.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import { AppView } from './app_view'; import { - getIsSandbox, getTheme, getRoutes, } from '../store'; @@ -16,7 +15,6 @@ function mapStateToProps(state, ownProps) { return { routes: ownProps.routes, currentRoute: ownProps.routes[1], - isSandbox: getIsSandbox(state), theme: getTheme(state), routes: getRoutes(state), }; diff --git a/src-docs/src/views/kibana/advanced_settings.js b/src-docs/src/views/kibana/advanced_settings.js deleted file mode 100644 index f3e7c2a2080d..000000000000 --- a/src-docs/src/views/kibana/advanced_settings.js +++ /dev/null @@ -1,196 +0,0 @@ -import React, { - Component, -} from 'react'; - -import { - EuiBottomBar, - EuiButtonEmpty, - EuiCallOut, - EuiFieldText, - EuiFlexGroup, - EuiFlexItem, - EuiForm, - EuiFormRow, - EuiLink, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiPageHeader, - EuiPageHeaderSection, - EuiPageSideBar, - EuiSpacer, - EuiText, - EuiTextColor, - EuiTitle, -} from '../../../../src/components'; - -import { - KibanaChrome, - ManagementSideNav, -} from '../partials'; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - showBar: false, - }; - } - - handleFormChange() { - this.setState({ - showBar: !this.state.showBar, - }); - } - - renderForm() { - return ( - - - Options for the lucene query string parser. - - Reset - -
- } - > - - - - - - - - - - - - - - - - - - - - - - - - ); - } - - renderPage() { - return ( - - - - -

Management

- - - - - - - - - - - - - -

Advanced settings » General

- - - - - - -

- Tweaks you make here can break Kibana if you do not know what you are doing. -

- - - - - {this.renderForm()} - - - - - ); - } - - - render() { - let bottomBar; - if (this.state.showBar) { - bottomBar = ( - - - - -

- - You have unsaved changes in your form. - -

- - - - - - - Save - - - - Discard - - - - - - ); - } - - return ( - - {this.renderPage()} - {bottomBar} - - ); - } -} diff --git a/src-docs/src/views/kibana/advanced_settings_sandbox.js b/src-docs/src/views/kibana/advanced_settings_sandbox.js deleted file mode 100644 index 110025bdfbb8..000000000000 --- a/src-docs/src/views/kibana/advanced_settings_sandbox.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuidePage, - GuideSection, - GuideSectionTypes, -} from '../../components'; - -import AdvancedSettings from './advanced_settings'; -const advancedSettingsSource = require('!!raw-loader!./advanced_settings'); -const advancedSettingsHtml = renderToHtml(AdvancedSettings); - -export default props => ( - - - This is a pretty dirty example of how to handle a menu system with - nesting within it. Right now it includes a lot of the same code - from the Kibana demo, but we should abstract this stuff into more - portable wrappers. -

- } - demo={} - /> - -); diff --git a/src-docs/src/views/kibana/kibana_chrome.js b/src-docs/src/views/kibana/kibana_chrome.js deleted file mode 100644 index cd61496829f3..000000000000 --- a/src-docs/src/views/kibana/kibana_chrome.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import KibanaHeader from '../header/header'; - -export default ({ - children, - ...rest -}) => ( -
- - {children} -
-); diff --git a/src-docs/src/views/kibana/watches.js b/src-docs/src/views/kibana/watches.js deleted file mode 100644 index 70d39df2b969..000000000000 --- a/src-docs/src/views/kibana/watches.js +++ /dev/null @@ -1,178 +0,0 @@ -import React, { - Component, -} from 'react'; - -import { - EuiButton, - EuiContextMenuItem, - EuiContextMenuPanel, - EuiFlexGroup, - EuiFlexItem, - EuiPage, - EuiPageBody, - EuiPageContent, - EuiPageHeader, - EuiPageHeaderSection, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiPageSideBar, - EuiPopover, - EuiSpacer, - EuiText, - EuiTitle, -} from '../../../../src/components'; - -import { - KibanaChrome, - ManagementSideNav, - Table, -} from '../partials'; - -export default class extends Component { - constructor(props) { - super(props); - - this.state = { - isPopoverOpen: false, - }; - } - - onButtonClick = () => { - this.setState(prevState => ({ - isPopoverOpen: !prevState.isPopoverOpen, - })); - }; - - closePopover = () => { - this.setState({ - isPopoverOpen: false, - }); - }; - - renderAddWatchPopover() { - const button = ( - - Create Watch - - ); - - const items = [ - ( - - - Threshold alert - - - Send out an alert on a specific condition. - - - ), ( - - - Change-based alert - - - Send out an alert on a specific change. - - - ), ( - - - Advanced watch - - - Set up a custom watch in raw JSON. - - - ), - ]; - - return ( - - - - ); - } - - renderPage() { - return ( - - - - -

Management

- - - - - - - - - - - - -

Watches

-

- Far out in the uncharted backwaters of the unfashionable end of - the western spiral arm of the Galaxy lies a small unregarded - yellow sun. -

- - - - - - - {this.renderAddWatchPopover()} - - - - - - - - - - - - - - ); - } - - render() { - return ( - - {this.renderPage()} - - ); - } -} diff --git a/src-docs/src/views/kibana/watches_sandbox.js b/src-docs/src/views/kibana/watches_sandbox.js deleted file mode 100644 index 0c4917d9f99f..000000000000 --- a/src-docs/src/views/kibana/watches_sandbox.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import { renderToHtml } from '../../services'; - -import { - GuidePage, - GuideSection, - GuideSectionTypes, -} from '../../components'; - -import Watches from './watches'; -const watchesSource = require('!!raw-loader!./watches'); -const watchesHtml = renderToHtml(Watches); - -export default props => ( - - - } - /> - -); diff --git a/src-docs/src/views/partials.js b/src-docs/src/views/partials.js deleted file mode 100644 index f1b713f40a0f..000000000000 --- a/src-docs/src/views/partials.js +++ /dev/null @@ -1,9 +0,0 @@ -export { default as KibanaChrome } from './kibana/kibana_chrome'; -export { default as KibanaHeader } from './header/header'; -export { default as ManagementSideNav } from './side_nav/side_nav_complex'; -export { default as Table } from './tables/custom/custom'; -export { - default as ToastList, - addToast, - removeAllToasts, -} from './toast/toast_list';