diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 5ff8531861a0..e7ca77ccc22f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -4,10 +4,10 @@ are a few simple things to check before submitting your pull request that can help with the review process. You should delete these items from your submission, but they are here to help bring them to your attention. ---> - Have you signed the [contributor license agreement](https://www.elastic.co/contributor-agreement)? - Have you followed the [contributor guidelines](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md)? - If submitting code, have you included unit tests that cover the changes? - If submitting code, have you tested and built your code locally prior to submission with `npm test && npm run build`? - If submitting code, is your pull request against master? Unless there is a good reason otherwise, we prefer pull requests against master and will backport as needed. +--> diff --git a/.gitignore b/.gitignore index b04c40f74d13..fbd0bc3f495b 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ selenium ui_framework/doc_site/build !ui_framework/doc_site/build/index.html yarn.lock +.yo-rc.json diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md index a71ad9cce018..5064899781a9 100644 --- a/STYLEGUIDE.md +++ b/STYLEGUIDE.md @@ -7,9 +7,11 @@ recommended for the development of all Kibana plugins. - [Angular](style_guides/angular_style_guide.md) - [React](style_guides/react_style_guide.md) - [CSS](style_guides/css_style_guide.md) +- [SCSS](style_guides/scss_style_guide.md) - [HTML](style_guides/html_style_guide.md) - [API](style_guides/api_style_guide.md) - [Architecture](style_guides/architecture_style_guide.md) +- [Accessibility](style_guides/acecssibility_guide.md) ## Filenames diff --git a/docs/development/core/development-elasticsearch.asciidoc b/docs/development/core/development-elasticsearch.asciidoc index 36e85d04f580..751a507753b9 100644 --- a/docs/development/core/development-elasticsearch.asciidoc +++ b/docs/development/core/development-elasticsearch.asciidoc @@ -31,9 +31,8 @@ Browser clients are exposed through AngularJS services. [source,javascript] ---- uiModules.get('kibana') -.run(function (esAdmin, es) { +.run(function (es) { es.ping() - .then(() => esAdmin.ping()) .catch(err => { console.log('error pinging servers'); }); diff --git a/docs/index-shared1.asciidoc b/docs/index-shared1.asciidoc index 1abb7d8ba7dc..40c7bfd20cdf 100644 --- a/docs/index-shared1.asciidoc +++ b/docs/index-shared1.asciidoc @@ -1,11 +1,5 @@ -////////// -release-state can be: released | prerelease | unreleased -////////// -:release-state: unreleased -:version: 6.1.0 -:major-version: 6.x -:branch: 6.x +include::{asciidoc-dir}/../../shared/versions61.asciidoc[] :docker-image: docker.elastic.co/kibana/kibana:{version} :repo: https://github.com/elastic/kibana/ diff --git a/docs/setup/install.asciidoc b/docs/setup/install.asciidoc index ea4685383c43..25a414843f5c 100644 --- a/docs/setup/install.asciidoc +++ b/docs/setup/install.asciidoc @@ -41,8 +41,8 @@ Docker registry. {kibana-ref}/docker.html[Running Kibana on Docker] IMPORTANT: If your Elasticsearch installation is protected by {xpack-ref}/xpack-security.html[X-Pack Security] -see {xpack-ref}/kibana.html[Using Kibana with X-Pack Security] for additional setup -instructions. +see {kibana-ref}/using-kibana-with-security.html[Configuring Security in Kibana] +for additional setup instructions. include::install/targz.asciidoc[] diff --git a/docs/setup/production.asciidoc b/docs/setup/production.asciidoc index 6010cc9d59f4..042b0ff98768 100644 --- a/docs/setup/production.asciidoc +++ b/docs/setup/production.asciidoc @@ -34,7 +34,8 @@ not exist. X-Pack Security does not currently provide a way to control which users can load which dashboards. For information about setting up Kibana users and how to configure Kibana -to work with X-Pack, see {xpack-ref}/kibana.html[Kibana and Security]. +to work with X-Pack, see +{kibana-ref}/using-kibana-with-security.html[Configuring Security in Kibana]. [float] [[enabling-ssl]] diff --git a/package.json b/package.json index 4c91af445b54..724bc7c73b42 100644 --- a/package.json +++ b/package.json @@ -63,22 +63,23 @@ "mocha": "echo 'use `node scripts/mocha`' && false", "sterilize": "grunt sterilize", "uiFramework:start": "grunt uiFramework:start", - "uiFramework:build": "grunt uiFramework:build" + "uiFramework:build": "grunt uiFramework:build", + "uiFramework:createComponent": "yo ./ui_framework/generator-kui/app/component.js", + "uiFramework:documentComponent": "yo ./ui_framework/generator-kui/app/documentation.js" }, "repository": { "type": "git", "url": "https://github.com/elastic/kibana.git" }, "dependencies": { - "@bigfunger/jsondiffpatch": "0.1.38-webpack", "@elastic/datemath": "2.3.0", + "@elastic/filesaver": "1.1.2", + "@elastic/leaflet-draw": "0.2.3", + "@elastic/leaflet-heat": "0.1.3", + "@elastic/numeral": "2.2.1", + "@elastic/test-subj-selector": "0.2.1", + "@elastic/ui-ace": "0.2.3", "@elastic/webpack-directory-name-as-main": "2.0.2", - "@spalger/filesaver": "1.1.2", - "@spalger/leaflet-draw": "0.2.3", - "@spalger/leaflet-heat": "0.1.3", - "@spalger/numeral": "^2.0.0", - "@spalger/test-subj-selector": "0.2.1", - "@spalger/ui-ace": "0.2.3", "JSONStream": "1.1.1", "accept-language-parser": "1.2.0", "angular": "1.4.7", @@ -158,8 +159,8 @@ "node-fetch": "1.3.2", "pegjs": "0.9.0", "postcss-loader": "1.3.3", - "proxy-from-env": "1.0.0", "prop-types": "15.5.8", + "proxy-from-env": "1.0.0", "pui-react-overlay-trigger": "7.5.4", "pui-react-tooltip": "7.5.4", "querystring-browser": "1.0.4", @@ -203,12 +204,13 @@ "yauzl": "2.7.0" }, "devDependencies": { - "@elastic/eslint-config-kibana": "0.9.0", + "@elastic/eslint-config-kibana": "0.10.0", "@elastic/eslint-import-resolver-kibana": "0.8.1", "@elastic/eslint-plugin-kibana-custom": "1.0.3", "angular-mocks": "1.4.7", "babel-eslint": "7.2.3", "chai": "3.5.0", + "chalk": "2.0.1", "chance": "1.0.6", "cheerio": "0.22.0", "chokidar": "1.6.0", @@ -276,7 +278,9 @@ "supertest": "3.0.0", "supertest-as-promised": "2.0.2", "tree-kill": "1.1.0", - "webpack-dev-server": "1.14.1" + "webpack-dev-server": "1.14.1", + "yeoman-generator": "1.1.1", + "yo": "2.0.0" }, "engines": { "node": "6.11.1", diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html index fee2c53a65b5..8ee3baa21cc7 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html +++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html @@ -97,16 +97,17 @@ ); @@ -67,7 +67,7 @@ class MarkdownEditor extends Component { ); diff --git a/src/core_plugins/metrics/public/components/panel_config.js b/src/core_plugins/metrics/public/components/panel_config.js index 26aa7fda0ed9..5ec2b849b746 100644 --- a/src/core_plugins/metrics/public/components/panel_config.js +++ b/src/core_plugins/metrics/public/components/panel_config.js @@ -19,7 +19,7 @@ function PanelConfig(props) { if (component) { return React.createElement(component, props); } - return (
Missing panel config for "{model.type}"
); + return (
Missing panel config for “{model.type}”
); } PanelConfig.propTypes = { diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js index 17b690d80e61..b70227b3a7f9 100644 --- a/src/core_plugins/metrics/public/components/panel_config/gauge.js +++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import SeriesEditor from '../series_editor'; -import IndexPattern from '../index_pattern'; +import { IndexPattern } from '../index_pattern'; import Select from 'react-select'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js index 28148e150421..8c065ece6c1a 100644 --- a/src/core_plugins/metrics/public/components/panel_config/markdown.js +++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import SeriesEditor from '../series_editor'; -import IndexPattern from '../index_pattern'; +import { IndexPattern } from '../index_pattern'; import AceEditor from 'react-ace'; import 'brace/mode/less'; import Select from 'react-select'; @@ -120,7 +120,7 @@ class MarkdownPanelConfig extends Component { width="100%" name={`ace-css-${model.id}`} setOptions={{ fontSize: '14px' }} - value={ model.markdown_less} + value={model.markdown_less} onChange={this.handleCSSChange} /> diff --git a/src/core_plugins/metrics/public/components/panel_config/metric.js b/src/core_plugins/metrics/public/components/panel_config/metric.js index 99f42955cf57..5879503040a5 100644 --- a/src/core_plugins/metrics/public/components/panel_config/metric.js +++ b/src/core_plugins/metrics/public/components/panel_config/metric.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import SeriesEditor from '../series_editor'; -import IndexPattern from '../index_pattern'; +import { IndexPattern } from '../index_pattern'; import createTextHandler from '../lib/create_text_handler'; import ColorRules from '../color_rules'; import YesNo from '../yes_no'; @@ -85,11 +85,13 @@ class MetricPanelConfig extends Component {
this.switchTab('data')} + tabIndex="0" >Data
this.switchTab('options')} + tabIndex="0" >Panel Options
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js index 95cd64c31662..ce81e1b37d1c 100644 --- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js +++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from 'react'; import SeriesEditor from '../series_editor'; import AnnotationsEditor from '../annotations_editor'; -import IndexPattern from '../index_pattern'; +import { IndexPattern } from '../index_pattern'; import Select from 'react-select'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; @@ -146,16 +146,19 @@ class TimeseriesPanelConfig extends Component {
this.switchTab('data')} + tabIndex="0" >Data
this.switchTab('options')} + tabIndex="0" >Panel Options
this.switchTab('annotations')} + tabIndex="0" >Annotations
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js index 6b0ae6501033..01166f9603ae 100644 --- a/src/core_plugins/metrics/public/components/panel_config/top_n.js +++ b/src/core_plugins/metrics/public/components/panel_config/top_n.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react'; import SeriesEditor from '../series_editor'; -import IndexPattern from '../index_pattern'; +import { IndexPattern } from '../index_pattern'; import createTextHandler from '../lib/create_text_handler'; import ColorRules from '../color_rules'; import ColorPicker from '../color_picker'; diff --git a/src/core_plugins/metrics/public/components/series_config.js b/src/core_plugins/metrics/public/components/series_config.js index 3a1883159bd2..b9b19ef70a0b 100644 --- a/src/core_plugins/metrics/public/components/series_config.js +++ b/src/core_plugins/metrics/public/components/series_config.js @@ -1,61 +1,58 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import DataFormatPicker from './data_format_picker'; import createSelectHandler from './lib/create_select_handler'; import createTextHandler from './lib/create_text_handler'; import YesNo from './yes_no'; -import IndexPattern from './index_pattern'; +import { IndexPattern } from './index_pattern'; -class SeriesConfig extends Component { - render() { - const defaults = { offset_time: '', value_template: '' }; - const model = { ...defaults, ...this.props.model }; - const handleSelectChange = createSelectHandler(this.props.onChange); - const handleTextChange = createTextHandler(this.props.onChange); +export const SeriesConfig = props => { + const defaults = { offset_time: '', value_template: '' }; + const model = { ...defaults, ...props.model }; + const handleSelectChange = createSelectHandler(props.onChange); + const handleTextChange = createTextHandler(props.onChange); - return ( -
-
-
- -
Template (eg.{'{{value}}/s'})
- -
Offset series time by (1m, 1h, 1w, 1d)
- -
-
-
Override Index Pattern
- - -
+ return ( +
+
+
+ +
Template (eg.{'{{value}}/s'})
+ +
Offset series time by (1m, 1h, 1w, 1d)
+ +
+
+
Override Index Pattern
+ +
- ); - } - -} +
+ ); +}; SeriesConfig.propTypes = { fields: PropTypes.object, @@ -63,5 +60,3 @@ SeriesConfig.propTypes = { onChange: PropTypes.func }; -export default SeriesConfig; - diff --git a/src/core_plugins/metrics/public/components/split.js b/src/core_plugins/metrics/public/components/split.js index 8cc11b22346d..1ef670c2623e 100644 --- a/src/core_plugins/metrics/public/components/split.js +++ b/src/core_plugins/metrics/public/components/split.js @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from 'react'; import uuid from 'uuid'; -import SplitByTerms from './splits/terms'; -import SplitByFilter from './splits/filter'; +import { SplitByTerms } from './splits/terms'; +import { SplitByFilter } from './splits/filter'; import SplitByFilters from './splits/filters'; import SplitByEverything from './splits/everything'; diff --git a/src/core_plugins/metrics/public/components/splits/filter.js b/src/core_plugins/metrics/public/components/splits/filter.js index dab31fd56f8b..3805f25eef0c 100644 --- a/src/core_plugins/metrics/public/components/splits/filter.js +++ b/src/core_plugins/metrics/public/components/splits/filter.js @@ -1,40 +1,34 @@ import createTextHandler from '../lib/create_text_handler'; import createSelectHandler from '../lib/create_select_handler'; import GroupBySelect from './group_by_select'; -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; -class SplitByFilter extends Component { - - render() { - const { onChange } = this.props; - const defaults = { filter: '' }; - const model = { ...defaults, ...this.props.model }; - const handleTextChange = createTextHandler(onChange); - const handleSelectChange = createSelectHandler(onChange); - return ( -
-
Group By
-
- -
-
Query String
- { + const { onChange } = props; + const defaults = { filter: '' }; + const model = { ...defaults, ...props.model }; + const handleTextChange = createTextHandler(onChange); + const handleSelectChange = createSelectHandler(onChange); + return ( +
+
Group By
+
+
- ); - } - -} +
Query String
+ +
+ ); +}; SplitByFilter.propTypes = { model: PropTypes.object, onChange: PropTypes.func }; - -export default SplitByFilter; diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js index f6904175ed6a..02cbef254ecb 100644 --- a/src/core_plugins/metrics/public/components/splits/group_by_select.js +++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js @@ -10,9 +10,9 @@ function GroupBySelect(props) { return ( +
Group By
+
+ -
Order By
-
- -
- ); - } - -} +
By
+
+ +
+
Top
+ +
Order By
+
+ +
+
+ ); +}; SplitByTerms.propTypes = { model: PropTypes.object, @@ -65,5 +61,3 @@ SplitByTerms.propTypes = { indexPattern: PropTypes.string, fields: PropTypes.object }; - -export default SplitByTerms; diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js index 176655b72590..ecb3db08e300 100644 --- a/src/core_plugins/metrics/public/components/vis_editor_visualization.js +++ b/src/core_plugins/metrics/public/components/vis_editor_visualization.js @@ -61,7 +61,7 @@ class VisEditorVisualization extends Component { if (autoApply) applyMessage = 'The changes will be automatically applied.'; const applyButton = (
-
Auto Apply
+
Auto Apply
-
+
{ label }
@@ -47,7 +47,7 @@ function VisPicker(props) { ); diff --git a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js index 91ad826a7dcb..2aa6f122ff45 100644 --- a/src/core_plugins/metrics/public/components/vis_types/gauge/series.js +++ b/src/core_plugins/metrics/public/components/vis_types/gauge/series.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import ColorPicker from '../../color_picker'; import AddDeleteButtons from '../../add_delete_buttons'; -import SeriesConfig from '../../series_config'; +import { SeriesConfig } from '../../series_config'; import Sortable from 'react-anything-sortable'; import Split from '../../split'; import Tooltip from '../../tooltip'; @@ -125,13 +125,13 @@ function GaugeSeries(props) { >
-
+
{ colorPicker }
diff --git a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js index 5318038935a0..471dd47048a3 100644 --- a/src/core_plugins/metrics/public/components/vis_types/markdown/series.js +++ b/src/core_plugins/metrics/public/components/vis_types/markdown/series.js @@ -1,6 +1,6 @@ import React, { PropTypes } from 'react'; import AddDeleteButtons from '../../add_delete_buttons'; -import SeriesConfig from '../../series_config'; +import { SeriesConfig } from '../../series_config'; import Sortable from 'react-anything-sortable'; import Split from '../../split'; import createAggRowRender from '../../lib/create_agg_row_render'; @@ -100,18 +100,18 @@ function MarkdownSeries(props) { >
-
+
diff --git a/src/core_plugins/metrics/public/components/vis_types/metric/series.js b/src/core_plugins/metrics/public/components/vis_types/metric/series.js index 64960748a033..e85314267355 100644 --- a/src/core_plugins/metrics/public/components/vis_types/metric/series.js +++ b/src/core_plugins/metrics/public/components/vis_types/metric/series.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import ColorPicker from '../../color_picker'; import AddDeleteButtons from '../../add_delete_buttons'; -import SeriesConfig from '../../series_config'; +import { SeriesConfig } from '../../series_config'; import Sortable from 'react-anything-sortable'; import Split from '../../split'; import Tooltip from '../../tooltip'; @@ -125,13 +125,13 @@ function MetricSeries(props) { >
-
+
{ colorPicker }
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js index 97fee28ca252..667cb926544f 100644 --- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js +++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js @@ -4,7 +4,7 @@ import DataFormatPicker from '../../data_format_picker'; import createSelectHandler from '../../lib/create_select_handler'; import YesNo from '../../yes_no'; import createTextHandler from '../../lib/create_text_handler'; -import IndexPattern from '../../index_pattern'; +import { IndexPattern } from '../../index_pattern'; function TimeseriesConfig(props) { const handleSelectChange = createSelectHandler(props.onChange); diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js index d632b65cf5b3..b6db23e0cad1 100644 --- a/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js +++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/series.js @@ -125,13 +125,13 @@ function TimeseriesSeries(props) { >
-
+
{ colorPicker }
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js index 2beab3fcdfff..0b8cc84f589c 100644 --- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js +++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js @@ -80,8 +80,11 @@ function TimeseriesVisualization(props) { }); const interval = series.reduce((currentInterval, item) => { - const seriesInterval = item.data[1][0] - item.data[0][0]; - if (!currentInterval || seriesInterval < currentInterval) return seriesInterval; + if (item.data.length > 1) { + const seriesInterval = item.data[1][0] - item.data[0][0]; + if (!currentInterval || seriesInterval < currentInterval) return seriesInterval; + } + return currentInterval; }, 0); let axisCount = 1; diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js index 2049e5aac5e7..93e81b8f5084 100644 --- a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js +++ b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import ColorPicker from '../../color_picker'; import AddDeleteButtons from '../../add_delete_buttons'; -import SeriesConfig from '../../series_config'; +import { SeriesConfig } from '../../series_config'; import Sortable from 'react-anything-sortable'; import Split from '../../split'; import Tooltip from '../../tooltip'; @@ -120,13 +120,13 @@ function TopNSeries(props) { >
-
+
{ colorPicker }
diff --git a/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js b/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js index 839b79c56fcf..522e73fb1532 100644 --- a/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js +++ b/src/core_plugins/metrics/public/kbn_vis_types/request_handler.js @@ -1,5 +1,6 @@ import { validateInterval } from '../lib/validate_interval'; import { dashboardContextProvider } from 'plugins/kibana/dashboard/dashboard_context'; +import { timezoneProvider } from 'ui/vis/lib/timezone'; const MetricsRequestHandlerProvider = function (Private, Notifier, config, timefilter, $http) { const dashboardContext = Private(dashboardContextProvider); @@ -8,12 +9,13 @@ const MetricsRequestHandlerProvider = function (Private, Notifier, config, timef return { name: 'metrics', handler: function (vis /*, appState, uiState, queryFilter*/) { + const timezone = Private(timezoneProvider)(); return new Promise((resolve) => { const panel = vis.params; if (panel && panel.id) { const params = { - timerange: timefilter.getBounds(), + timerange: { timezone, ...timefilter.getBounds() }, filters: [dashboardContext()], panels: [panel] }; diff --git a/src/core_plugins/metrics/public/visualizations/components/resize.js b/src/core_plugins/metrics/public/visualizations/components/resize.js index 6af1d54749a6..4f2c3fa50a1c 100644 --- a/src/core_plugins/metrics/public/visualizations/components/resize.js +++ b/src/core_plugins/metrics/public/visualizations/components/resize.js @@ -29,7 +29,7 @@ class Resize extends Component { const el = findDOMNode(this.el); const currentWidth = el.parentNode.clientWidth; const currentHeight = el.parentNode.clientHeight; - this.setState({ currentHeight, currentWidth }); + this.setState({ currentHeight, currentWidth }); // eslint-disable-line react/no-did-mount-set-state this.checkSize(); } diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js index 377297544df9..dafb91ea2e1f 100644 --- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js +++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js @@ -123,12 +123,12 @@ class Timeseries extends Component { (row, i) => { const classes = ['rhythm_chart__legend_item']; const key = row.id; if (!_.includes(props.seriesFilter, row.id)) classes.push('disabled'); - if (row.label == null || row.legend === false) return (
); + if (row.label == null || row.legend === false) return (
); return (
props.onToggle(event, row.id) } - key={ key } + className={classes.join(' ')} + onClick={event => props.onToggle(event, row.id)} + key={key} >
diff --git a/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js index 93b6802b509a..4d8d93e96bba 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js +++ b/src/core_plugins/metrics/server/lib/vis_data/__tests__/build_request_body.js @@ -49,6 +49,7 @@ const body = JSON.parse(` } ], "timerange": { + "timezone": "UTC", "max": "2017-01-26T20:52:35.881Z", "min": "2017-01-26T20:37:35.881Z" } @@ -104,6 +105,7 @@ describe('buildRequestBody(req)', () => { 'field': '@timestamp', 'interval': '10s', 'min_doc_count': 0, + 'time_zone': 'UTC', 'extended_bounds': { 'min': 1485463055881, 'max': 1485463955881 diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js b/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js index cdf84b26c0c5..9b90ac3cd2ee 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js +++ b/src/core_plugins/metrics/server/lib/vis_data/get_annotations.js @@ -9,7 +9,7 @@ function validAnnotation(annotation) { annotation.template; } -export default (req, panel) => { +export default async (req, panel) => { const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data'); const bodies = panel.annotations .filter(validAnnotation) @@ -31,22 +31,22 @@ export default (req, panel) => { }); if (!bodies.length) return { responses: [] }; - return callWithRequest(req, 'msearch', { - body: bodies.reduce((acc, item) => acc.concat(item), []) - }) - .then(resp => { - const results = {}; - panel.annotations - .filter(validAnnotation) - .forEach((annotation, index) => { - const data = resp.responses[index]; - results[annotation.id] = handleAnnotationResponse(data, annotation); - }); - return results; - }) - .catch(error => { - if (error.message === 'missing-indices') return {}; - throw error; + try { + const resp = await callWithRequest(req, 'msearch', { + body: bodies.reduce((acc, item) => acc.concat(item), []) }); + const results = {}; + panel.annotations + .filter(validAnnotation) + .forEach((annotation, index) => { + const data = resp.responses[index]; + results[annotation.id] = handleAnnotationResponse(data, annotation); + }); + return results; + } catch (error) { + if (error.message === 'missing-indices') return { responses: [] }; + throw error; + } + }; diff --git a/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js b/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js index dd00dc4dda6f..d0528ea24df1 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js +++ b/src/core_plugins/metrics/server/lib/vis_data/get_panel_data.js @@ -21,7 +21,7 @@ export default function getPanelData(req) { }; }) .then(resp => { - if (!panel.annotations) return resp; + if (!panel.annotations || panel.annotations.length === 0) return resp; return getAnnotations(req, panel).then(annotations => { resp[panel.id].annotations = annotations; return resp; diff --git a/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js b/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js index 6a8a8d1c08c1..f322277d74b9 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js +++ b/src/core_plugins/metrics/server/lib/vis_data/handle_error_response.js @@ -7,10 +7,16 @@ export default panel => error => { } catch (e) { errorResponse = error.response; } + if (!errorResponse) { + errorResponse = { + message: error.message, + stack: error.stack + }; + } result[panel.id] = { id: panel.id, statusCode: error.statusCode, - error: errorResponse || error, + error: errorResponse, series: [] }; return result; diff --git a/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js b/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js index a2d531bed213..e08b265560f8 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js +++ b/src/core_plugins/metrics/server/lib/vis_data/handle_response_body.js @@ -1,5 +1,6 @@ import buildProcessorFunction from './build_processor_function'; import processors from './response_processors/series'; +import { get } from 'lodash'; export default function handleResponseBody(panel) { return resp => { @@ -8,7 +9,13 @@ export default function handleResponseBody(panel) { err.response = JSON.stringify(resp); throw err; } - const keys = Object.keys(resp.aggregations); + const aggregations = get(resp, 'aggregations'); + if (!aggregations) { + const message = `The aggregations key is missing from the response, + check your permissions for this request.`; + throw Error(message); + } + const keys = Object.keys(aggregations); if (keys.length !== 1) throw Error('There should only be one series per request.'); const seriesId = keys[0]; const series = panel.series.find(s => s.id === seriesId); diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js index 08d51dc05ca7..f64ab9ad5fba 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js +++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/annotations/date_histogram.js @@ -6,10 +6,12 @@ export default function dateHistogram(req, panel, annotation) { const timeField = annotation.time_field; const { bucketSize, intervalString } = getBucketSize(req, 'auto'); const { from, to } = getTimerange(req); + const { timezone:time_zone } = req.payload.timerange; _.set(doc, `aggs.${annotation.id}.date_histogram`, { field: timeField, interval: intervalString, min_doc_count: 0, + time_zone, extended_bounds: { min: from.valueOf(), max: to.valueOf() - (bucketSize * 1000) diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js index f14f649d4b71..cb0046f6e7ed 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js +++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/__tests__/date_histogram.js @@ -11,6 +11,7 @@ describe('dateHistogram(req, panel, series)', () => { req = { payload: { timerange: { + timezone: 'UTC', min: '2017-01-01T00:00:00Z', max: '2017-01-01T01:00:00Z' } @@ -42,6 +43,7 @@ describe('dateHistogram(req, panel, series)', () => { field: '@timestamp', interval: '10s', min_doc_count: 0, + time_zone: 'UTC', extended_bounds: { min: 1483228800000, max: 1483232400000 @@ -67,6 +69,7 @@ describe('dateHistogram(req, panel, series)', () => { field: '@timestamp', interval: '10s', min_doc_count: 0, + time_zone: 'UTC', extended_bounds: { min: 1483225200000, max: 1483228800000 @@ -95,6 +98,7 @@ describe('dateHistogram(req, panel, series)', () => { field: 'timestamp', interval: '20s', min_doc_count: 0, + time_zone: 'UTC', extended_bounds: { min: 1483228800000, max: 1483232400000 diff --git a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js index 2dcac4ce0942..fcbb07a6f273 100644 --- a/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js +++ b/src/core_plugins/metrics/server/lib/vis_data/request_processors/series/date_histogram.js @@ -7,11 +7,13 @@ export default function dateHistogram(req, panel, series) { const { timeField, interval } = getIntervalAndTimefield(panel, series); const { intervalString } = getBucketSize(req, interval); const { from, to } = offsetTime(req, series.offset_time); + const { timezone:time_zone } = req.payload.timerange; set(doc, `aggs.${series.id}.aggs.timeseries.date_histogram`, { field: timeField, interval: intervalString, min_doc_count: 0, + time_zone, extended_bounds: { min: from.valueOf(), max: to.valueOf() diff --git a/src/core_plugins/table_vis/public/table_vis_params.html b/src/core_plugins/table_vis/public/table_vis_params.html index 16c24dc67cf6..662f5c9a77a6 100644 --- a/src/core_plugins/table_vis/public/table_vis_params.html +++ b/src/core_plugins/table_vis/public/table_vis_params.html @@ -1,6 +1,6 @@
- - + +
@@ -32,10 +32,10 @@
- +
diff --git a/src/core_plugins/tile_map/public/editors/tile_map.html b/src/core_plugins/tile_map/public/editors/tile_map.html index 20e940107d85..1aefe62323c5 100644 --- a/src/core_plugins/tile_map/public/editors/tile_map.html +++ b/src/core_plugins/tile_map/public/editors/tile_map.html @@ -1,7 +1,9 @@
- -
- + @@ -58,7 +62,7 @@ Warning - +

@@ -72,6 +76,7 @@

data-test-subj="fieldIncreasePopularityButton" type="button" ng-click="editor.field.count = editor.field.count + 1" - aria-label="Plus" + aria-label="Increment popularity" class="kuiButton kuiButton--basic" >
- + + class="form-control" + >
- + + id="scriptFieldColorPattern" + ng-model="color.regex" + class="form-control" + >
- + + class="form-control" + >
- + + class="form-control" + >
- -
+ +
123456
diff --git a/src/ui/public/field_format_editor/editors/date/date.html b/src/ui/public/field_format_editor/editors/date/date.html index b40adaf006f0..c92565902dff 100644 --- a/src/ui/public/field_format_editor/editors/date/date.html +++ b/src/ui/public/field_format_editor/editors/date/date.html @@ -5,7 +5,7 @@ -

- + - +
- diff --git a/src/core_plugins/kibana/common/field_formats/types/_numeral.js b/src/core_plugins/kibana/common/field_formats/types/_numeral.js index e0665eb45f7e..07722f722ed1 100644 --- a/src/core_plugins/kibana/common/field_formats/types/_numeral.js +++ b/src/core_plugins/kibana/common/field_formats/types/_numeral.js @@ -1,5 +1,5 @@ import _ from 'lodash'; -import numeral from '@spalger/numeral'; +import numeral from '@elastic/numeral'; import { FieldFormat } from '../../../../../ui/field_formats/field_format'; const numeralInst = numeral(); diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js index 8fe4a783050e..876a55c46bfc 100644 --- a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js +++ b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.js @@ -27,12 +27,12 @@ export function DashboardListingController($injector, $scope) { const sortableProperties = new SortableProperties([ { name: 'title', - getValue: item => item.title, + getValue: item => item.title.toLowerCase(), isAscending: true, }, { name: 'description', - getValue: item => item.description, + getValue: item => item.description.toLowerCase(), isAscending: true } ], diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js index 564d3d0912f6..6cca9f6054a0 100644 --- a/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js +++ b/src/core_plugins/kibana/public/dashboard/top_nav/clone_modal.js @@ -42,7 +42,7 @@ export class DashboardCloneModal extends React.Component { data-tests-subj="dashboardCloneModal" aria-label="Clone a dashboard" className="dashboardCloneModal" - onKeyDown={ this.onKeyDown } + onKeyDown={this.onKeyDown} > @@ -58,8 +58,8 @@ export class DashboardCloneModal extends React.Component { autoFocus data-test-subj="clonedDashboardTitle" className="kuiTextInput kuiTextInput--large" - value={ this.state.newDashboardName } - onChange={ this.onInputChange } + value={this.state.newDashboardName} + onChange={this.onInputChange} /> @@ -68,14 +68,14 @@ export class DashboardCloneModal extends React.Component { Cancel Confirm Clone diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html index f4d24cf3d2f4..990e5748415e 100644 --- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html +++ b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html @@ -1,4 +1,4 @@ -
+
Popular -
+
diff --git a/src/core_plugins/kibana/public/discover/controllers/discover.js b/src/core_plugins/kibana/public/discover/controllers/discover.js index a49dcf4be44f..647af031fecd 100644 --- a/src/core_plugins/kibana/public/discover/controllers/discover.js +++ b/src/core_plugins/kibana/public/discover/controllers/discover.js @@ -167,9 +167,8 @@ function discoverController( .highlightAll(true) .version(true); - if (savedSearch.id) { - docTitle.change(savedSearch.title); - } + const pageTitleSuffix = savedSearch.id && savedSearch.title ? `: ${savedSearch.title}` : ''; + docTitle.change(`Discover${pageTitleSuffix}`); let stateMonitor; const $appStatus = $scope.appStatus = this.appStatus = { diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html index a54f65b53b3f..01c00e9a41bc 100644 --- a/src/core_plugins/kibana/public/discover/index.html +++ b/src/core_plugins/kibana/public/discover/index.html @@ -75,7 +75,7 @@

Searching

-
+
{{timeRange.from | moment}} - {{timeRange.to | moment}} @@ -114,9 +114,9 @@

Searching

style="height: 200px" > -
+ -
+
Searching your search, refine your search to see others. Back to top.
-
+
diff --git a/src/core_plugins/kibana/public/management/app.html b/src/core_plugins/kibana/public/management/app.html index 6883679dbb32..034ea014aa01 100644 --- a/src/core_plugins/kibana/public/management/app.html +++ b/src/core_plugins/kibana/public/management/app.html @@ -14,9 +14,9 @@
- +

{{::section.display}} - +

-
+
item.title, + getValue: item => item.title.toLowerCase(), isAscending: true, }, { name: 'type', - getValue: item => item.type.title, + getValue: item => item.type.title.toLowerCase(), isAscending: true, } ], diff --git a/src/core_plugins/metrics/public/components/add_delete_buttons.js b/src/core_plugins/metrics/public/components/add_delete_buttons.js index 38ebfc1bbbec..215a8ed9ffe1 100644 --- a/src/core_plugins/metrics/public/components/add_delete_buttons.js +++ b/src/core_plugins/metrics/public/components/add_delete_buttons.js @@ -8,7 +8,7 @@ function AddDeleteButtons(props) { } return ( - + @@ -20,7 +20,7 @@ function AddDeleteButtons(props) { } return ( - + @@ -32,7 +32,7 @@ function AddDeleteButtons(props) { if (props.onClone && !props.disableAdd) { clone = ( - + diff --git a/src/core_plugins/metrics/public/components/aggs/derivative.js b/src/core_plugins/metrics/public/components/aggs/derivative.js index 7206f33e21c6..03cfd49adf63 100644 --- a/src/core_plugins/metrics/public/components/aggs/derivative.js +++ b/src/core_plugins/metrics/public/components/aggs/derivative.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import MetricSelect from './metric_select'; import AggRow from './agg_row'; @@ -6,57 +6,53 @@ import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; -class DerivativeAgg extends Component { +export const DerivativeAgg = props => { + const { siblings } = props; - render() { - const { siblings } = this.props; + const defaults = { unit: '' }; + const model = { ...defaults, ...props.model }; - const defaults = { unit: '' }; - const model = { ...defaults, ...this.props.model }; + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); - - return ( - -
-
Aggregation
- -
-
-
Metric
- -
-
-
Units (1s, 1m, etc)
- -
- - ); - } - -} + return ( + +
+
Aggregation
+ +
+
+
Metric
+ +
+
+
Units (1s, 1m, etc)
+ +
+ + ); +}; DerivativeAgg.propTypes = { disableDelete: PropTypes.bool, @@ -69,5 +65,3 @@ DerivativeAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default DerivativeAgg; diff --git a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js index 734f8ddb6355..94098e3bd363 100644 --- a/src/core_plugins/metrics/public/components/aggs/filter_ratio.js +++ b/src/core_plugins/metrics/public/components/aggs/filter_ratio.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import FieldSelect from './field_select'; import AggRow from './agg_row'; @@ -6,94 +6,90 @@ import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; -class FilterRatioAgg extends Component { +export const FilterRatioAgg = props => { + const { + series, + fields, + panel + } = props; - render() { - const { - series, - fields, - panel - } = this.props; + const handleChange = createChangeHandler(props.onChange, props.model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); + const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; - const handleChange = createChangeHandler(this.props.onChange, this.props.model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); - const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; + const defaults = { + numerator: '*', + denominator: '*', + metric_agg: 'count' + }; - const defaults = { - numerator: '*', - denominator: '*', - metric_agg: 'count' - }; + const model = { ...defaults, ...props.model }; - const model = { ...defaults, ...this.props.model }; - - return ( - -
-
-
-
Aggregation
- -
-
-
Numerator
- -
-
-
Denominator
- -
+ return ( + +
+
+
+
Aggregation
+ +
+
+
Numerator
+
-
+
+
Denominator
+ +
+
+
+
+
Metric Aggregation
+ +
+ { model.metric_agg !== 'count' ? (
-
Metric Aggregation
- Field
+ -
- { model.metric_agg !== 'count' ? ( -
-
Field
- -
) : null } -
+
) : null }
- - ); - } - -} +
+ + ); +}; FilterRatioAgg.propTypes = { disableDelete: PropTypes.bool, @@ -106,5 +102,3 @@ FilterRatioAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default FilterRatioAgg; diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js index b2c12aa7aa99..4f9ad7bc26dc 100644 --- a/src/core_plugins/metrics/public/components/aggs/moving_average.js +++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggRow from './agg_row'; import AggSelect from './agg_select'; import MetricSelect from './metric_select'; @@ -8,106 +8,103 @@ import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; import createNumberHandler from '../lib/create_number_handler'; -class MovingAverageAgg extends Component { - render() { - const { siblings } = this.props; - const defaults = { - settings: '', - minimize: 0, - window: '', - model: 'simple' - }; - const model = { ...defaults, ...this.props.model }; - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); - const handleNumberChange = createNumberHandler(handleChange); - const modelOptions = [ - { label: 'Simple', value: 'simple' }, - { label: 'Linear', value: 'linear' }, - { label: 'Exponentially Weighted', value: 'ewma' }, - { label: 'Holt-Linear', value: 'holt' }, - { label: 'Holt-Winters', value: 'holt_winters' } - ]; - const minimizeOptions = [ - { label: 'True', value: 1 }, - { label: 'False', value: 0 } - ]; - return ( - -
-
-
-
Aggregation
- -
-
-
Metric
- -
+export const MovingAverageAgg = props => { + const { siblings } = props; + const defaults = { + settings: '', + minimize: 0, + window: '', + model: 'simple' + }; + const model = { ...defaults, ...props.model }; + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); + const handleNumberChange = createNumberHandler(handleChange); + const modelOptions = [ + { label: 'Simple', value: 'simple' }, + { label: 'Linear', value: 'linear' }, + { label: 'Exponentially Weighted', value: 'ewma' }, + { label: 'Holt-Linear', value: 'holt' }, + { label: 'Holt-Winters', value: 'holt_winters' } + ]; + const minimizeOptions = [ + { label: 'True', value: 1 }, + { label: 'False', value: 0 } + ]; + return ( + +
+
+
+
Aggregation
+
-
-
-
Model
- -
-
-
Minimize
- -
+
+
+
+
Model
+ +
+
+
Minimize
+ +
+
+
+ + ); +}; MovingAverageAgg.propTypes = { disableDelete: PropTypes.bool, @@ -120,5 +117,3 @@ MovingAverageAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default MovingAverageAgg; diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js index 0573797d0ff4..4bd24b98adae 100644 --- a/src/core_plugins/metrics/public/components/aggs/percentile.js +++ b/src/core_plugins/metrics/public/components/aggs/percentile.js @@ -114,7 +114,7 @@ Percentiles.propTypes = { }; -class PercentileAgg extends Component { +class PercentileAgg extends Component { // eslint-disable-line react/no-multi-comp componentWillMount() { if (!this.props.model.percentiles) { diff --git a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js index e5c32a2c291e..de02f27856b5 100644 --- a/src/core_plugins/metrics/public/components/aggs/percentile_rank.js +++ b/src/core_plugins/metrics/public/components/aggs/percentile_rank.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import FieldSelect from './field_select'; import AggRow from './agg_row'; @@ -6,60 +6,55 @@ import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; -class PercentileRankAgg extends Component { +export const PercentileRankAgg = props => { + const { series, panel, fields } = props; + const defaults = { value: '' }; + const model = { ...defaults, ...props.model }; - render() { - const { series, panel, fields } = this.props; - const defaults = { value: '' }; - const model = { ...defaults, ...this.props.model }; + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); + const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); - - const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; - - return ( - -
-
Aggregation
- -
-
-
Field
- -
-
-
Value
- -
- - ); - } - -} + return ( + +
+
Aggregation
+ +
+
+
Field
+ +
+
+
Value
+ +
+ + ); +}; PercentileRankAgg.propTypes = { disableDelete: PropTypes.bool, @@ -72,6 +67,3 @@ PercentileRankAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default PercentileRankAgg; - diff --git a/src/core_plugins/metrics/public/components/aggs/positive_only.js b/src/core_plugins/metrics/public/components/aggs/positive_only.js index afb243c6effc..543c814a7595 100644 --- a/src/core_plugins/metrics/public/components/aggs/positive_only.js +++ b/src/core_plugins/metrics/public/components/aggs/positive_only.js @@ -1,51 +1,47 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import MetricSelect from './metric_select'; import AggRow from './agg_row'; import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; -class PositiveOnlyAgg extends Component { - - render() { - const { siblings } = this.props; - - const defaults = { unit: '' }; - const model = { ...defaults, ...this.props.model }; - - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - - return ( - -
-
Aggregation
- -
-
-
Metric
- -
- - ); - } - -} +export const PositiveOnlyAgg = props => { + const { siblings } = props; + + const defaults = { unit: '' }; + const model = { ...defaults, ...props.model }; + + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + + return ( + +
+
Aggregation
+ +
+
+
Metric
+ +
+ + ); +}; PositiveOnlyAgg.propTypes = { disableDelete: PropTypes.bool, @@ -58,5 +54,3 @@ PositiveOnlyAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default PositiveOnlyAgg; diff --git a/src/core_plugins/metrics/public/components/aggs/serial_diff.js b/src/core_plugins/metrics/public/components/aggs/serial_diff.js index 1b102390c80a..33d20a3a1e16 100644 --- a/src/core_plugins/metrics/public/components/aggs/serial_diff.js +++ b/src/core_plugins/metrics/public/components/aggs/serial_diff.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import MetricSelect from './metric_select'; import AggRow from './agg_row'; @@ -6,56 +6,52 @@ import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createNumberHandler from '../lib/create_number_handler'; -class SerialDiffAgg extends Component { +export const SerialDiffAgg = props => { + const { siblings } = props; + const defaults = { lag: '' }; + const model = { ...defaults, ...props.model }; - render() { - const { siblings } = this.props; - const defaults = { lag: '' }; - const model = { ...defaults, ...this.props.model }; + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + const handleNumberChange = createNumberHandler(handleChange); - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - const handleNumberChange = createNumberHandler(handleChange); - - return ( - -
-
Aggregation
- -
-
-
Metric
- -
-
-
Lag
- -
- - ); - } - -} + return ( + +
+
Aggregation
+ +
+
+
Metric
+ +
+
+
Lag
+ +
+ + ); +}; SerialDiffAgg.propTypes = { disableDelete: PropTypes.bool, @@ -68,6 +64,3 @@ SerialDiffAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default SerialDiffAgg; - diff --git a/src/core_plugins/metrics/public/components/aggs/static.js b/src/core_plugins/metrics/public/components/aggs/static.js index 7193c0bd8beb..d383eb21f16b 100644 --- a/src/core_plugins/metrics/public/components/aggs/static.js +++ b/src/core_plugins/metrics/public/components/aggs/static.js @@ -1,62 +1,58 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import AggRow from './agg_row'; import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; -class FilterRatioAgg extends Component { +export const Static = props => { + const handleChange = createChangeHandler(props.onChange, props.model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); - render() { - const handleChange = createChangeHandler(this.props.onChange, this.props.model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); + const defaults = { + numerator: '*', + denominator: '*', + metric_agg: 'count' + }; - const defaults = { - numerator: '*', - denominator: '*', - metric_agg: 'count' - }; + const model = { ...defaults, ...props.model }; - const model = { ...defaults, ...this.props.model }; - - return ( - -
-
-
-
Aggregation
- -
-
-
Static Value
- -
+ return ( + +
+
+
+
Aggregation
+ +
+
+
Static Value
+
- - ); - } - -} +
+ + ); +}; -FilterRatioAgg.propTypes = { +Static.propTypes = { disableDelete: PropTypes.bool, fields: PropTypes.object, model: PropTypes.object, @@ -67,6 +63,3 @@ FilterRatioAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default FilterRatioAgg; - diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js index e9b38f4a3c6a..803d0e240e3d 100644 --- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js +++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js @@ -1,4 +1,4 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import AggSelect from './agg_select'; import FieldSelect from './field_select'; import AggRow from './agg_row'; @@ -7,74 +7,70 @@ import createChangeHandler from '../lib/create_change_handler'; import createSelectHandler from '../lib/create_select_handler'; import createTextHandler from '../lib/create_text_handler'; -class StandardDeviationAgg extends Component { +export const StandardDeviationAgg = props => { + const { series, panel, fields } = props; + const defaults = { sigma: '' }; + const model = { ...defaults, ...props.model }; - render() { - const { series, panel, fields } = this.props; - const defaults = { sigma: '' }; - const model = { ...defaults, ...this.props.model }; + const modeOptions = [ + { label: 'Raw', value: 'raw' }, + { label: 'Upper Bound', value: 'upper' }, + { label: 'Lower Bound', value: 'lower' }, + { label: 'Bounds Band', value: 'band' } + ]; - const modeOptions = [ - { label: 'Raw', value: 'raw' }, - { label: 'Upper Bound', value: 'upper' }, - { label: 'Lower Bound', value: 'lower' }, - { label: 'Bounds Band', value: 'band' } - ]; + const handleChange = createChangeHandler(props.onChange, model); + const handleSelectChange = createSelectHandler(handleChange); + const handleTextChange = createTextHandler(handleChange); - const handleChange = createChangeHandler(this.props.onChange, model); - const handleSelectChange = createSelectHandler(handleChange); - const handleTextChange = createTextHandler(handleChange); + const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; - const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern; - - return ( - -
-
Aggregation
- -
-
-
Field
- -
-
-
Sigma
- -
-
-
Mode
- +
+
+
Mode
+ -
- ); - - const modeOptions = [ - { label: 'Raw', value: 'raw' }, - { label: 'Upper Bound', value: 'upper' }, - { label: 'Lower Bound', value: 'lower' }, - { label: 'Bounds Band', value: 'band' } - ]; + const stdDev = {}; + if (model.type === 'std_deviation_bucket') { + stdDev.sigma = ( +
+
Sigma
+ +
+ ); - stdDev.mode = ( -
-
Mode
- +
); } -} + return ( + +
+
Aggregation
+ +
+
+
Metric
+ +
+ { stdDev.sigma } + { stdDev.mode } + + ); +}; StandardSiblingAgg.propTypes = { disableDelete: PropTypes.bool, @@ -95,5 +91,3 @@ StandardSiblingAgg.propTypes = { series: PropTypes.object, siblings: PropTypes.array, }; - -export default StandardSiblingAgg; diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js index 30276b35b51e..01ff23857b54 100644 --- a/src/core_plugins/metrics/public/components/color_picker.js +++ b/src/core_plugins/metrics/public/components/color_picker.js @@ -82,7 +82,7 @@ class ColorPicker extends Component { onClick={this.handleClose} />
diff --git a/src/core_plugins/metrics/public/components/custom_color_picker.js b/src/core_plugins/metrics/public/components/custom_color_picker.js index 382aec8a116a..5f3bd4f81853 100644 --- a/src/core_plugins/metrics/public/components/custom_color_picker.js +++ b/src/core_plugins/metrics/public/components/custom_color_picker.js @@ -66,21 +66,21 @@ export class CustomColorPicker extends Component {
-
-
+
+
-
+
-
+
{ reason }
{ scriptStack.join('\n')}
); - } else { - const reason = _.get(error, 'error.caused_by.reason'); + } else if (reason) { additionalInfo = (
{ reason }
diff --git a/src/core_plugins/metrics/public/components/index_pattern.js b/src/core_plugins/metrics/public/components/index_pattern.js index bd19c53e0b1b..10f9953e56bb 100644 --- a/src/core_plugins/metrics/public/components/index_pattern.js +++ b/src/core_plugins/metrics/public/components/index_pattern.js @@ -1,63 +1,61 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import FieldSelect from './aggs/field_select'; import createSelectHandler from './lib/create_select_handler'; import createTextHandler from './lib/create_text_handler'; import YesNo from './yes_no'; -class IndexPattern extends Component { - render() { - const { fields, prefix } = this.props; - const handleSelectChange = createSelectHandler(this.props.onChange); - const handleTextChange = createTextHandler(this.props.onChange); - const timeFieldName = `${prefix}time_field`; - const indexPatternName = `${prefix}index_pattern`; - const intervalName = `${prefix}interval`; - const dropBucketName = `${prefix}drop_last_bucket`; +export const IndexPattern = props => { + const { fields, prefix } = props; + const handleSelectChange = createSelectHandler(props.onChange); + const handleTextChange = createTextHandler(props.onChange); + const timeFieldName = `${prefix}time_field`; + const indexPatternName = `${prefix}index_pattern`; + const intervalName = `${prefix}interval`; + const dropBucketName = `${prefix}drop_last_bucket`; - const defaults = { - [indexPatternName]: '*', - [intervalName]: 'auto', - [dropBucketName]: 1 - }; + const defaults = { + [indexPatternName]: '*', + [intervalName]: 'auto', + [dropBucketName]: 1 + }; - const model = { ...defaults, ...this.props.model }; - return ( -
-
Index Pattern
- -
Time Field
-
- -
-
Interval (auto, 1m, 1d, 1w, 1y)
- -
Drop Last Bucket
- +
Index Pattern
+ +
Time Field
+
+
- ); - } -} +
Interval (auto, 1m, 1d, 1w, 1y)
+ +
Drop Last Bucket
+ +
+ ); +}; IndexPattern.defaultProps = { prefix: '', @@ -73,5 +71,3 @@ IndexPattern.propTypes = { disabled: PropTypes.bool, className: PropTypes.string }; - -export default IndexPattern; diff --git a/src/core_plugins/metrics/public/components/lib/agg_to_component.js b/src/core_plugins/metrics/public/components/lib/agg_to_component.js index 14a1c7e552cb..9a6b0369b26f 100644 --- a/src/core_plugins/metrics/public/components/lib/agg_to_component.js +++ b/src/core_plugins/metrics/public/components/lib/agg_to_component.js @@ -1,45 +1,45 @@ -import MovingAverage from '../aggs/moving_average'; -import Derivative from '../aggs/derivative'; +import { MovingAverageAgg } from '../aggs/moving_average'; +import { DerivativeAgg } from '../aggs/derivative'; import Calculation from '../aggs/calculation'; import StdAgg from '../aggs/std_agg'; import Percentile from '../aggs/percentile'; import CumulativeSum from '../aggs/cumulative_sum'; -import StdDeviation from '../aggs/std_deviation'; -import StdSibling from '../aggs/std_sibling'; +import { StandardDeviationAgg } from '../aggs/std_deviation'; +import { StandardSiblingAgg } from '../aggs/std_sibling'; import SeriesAgg from '../aggs/series_agg'; -import SerialDiff from '../aggs/serial_diff'; -import PositiveOnly from '../aggs/positive_only'; -import FilterRatio from '../aggs/filter_ratio'; -import PercentileRank from '../aggs/percentile_rank'; -import Static from '../aggs/static'; +import { SerialDiffAgg } from '../aggs/serial_diff'; +import { PositiveOnlyAgg } from '../aggs/positive_only'; +import { FilterRatioAgg } from '../aggs/filter_ratio'; +import { PercentileRankAgg } from '../aggs/percentile_rank'; +import { Static } from '../aggs/static'; export default { count: StdAgg, avg: StdAgg, max: StdAgg, min: StdAgg, sum: StdAgg, - std_deviation: StdDeviation, + std_deviation: StandardDeviationAgg, sum_of_squares: StdAgg, variance: StdAgg, - avg_bucket: StdSibling, - max_bucket: StdSibling, - min_bucket: StdSibling, - sum_bucket: StdSibling, - variance_bucket: StdSibling, - sum_of_squares_bucket: StdSibling, - std_deviation_bucket: StdSibling, + avg_bucket: StandardSiblingAgg, + max_bucket: StandardSiblingAgg, + min_bucket: StandardSiblingAgg, + sum_bucket: StandardSiblingAgg, + variance_bucket: StandardSiblingAgg, + sum_of_squares_bucket: StandardSiblingAgg, + std_deviation_bucket: StandardSiblingAgg, percentile: Percentile, - percentile_rank: PercentileRank, + percentile_rank: PercentileRankAgg, cardinality: StdAgg, value_count: StdAgg, calculation: Calculation, cumulative_sum: CumulativeSum, - moving_average: MovingAverage, - derivative: Derivative, + moving_average: MovingAverageAgg, + derivative: DerivativeAgg, series_agg: SeriesAgg, - serial_diff: SerialDiff, - filter_ratio: FilterRatio, - positive_only: PositiveOnly, + serial_diff: SerialDiffAgg, + filter_ratio: FilterRatioAgg, + positive_only: PositiveOnlyAgg, static: Static }; diff --git a/src/core_plugins/metrics/public/components/lib/tick_formatter.js b/src/core_plugins/metrics/public/components/lib/tick_formatter.js index 5508f162f4c6..dff3a7b6b20f 100644 --- a/src/core_plugins/metrics/public/components/lib/tick_formatter.js +++ b/src/core_plugins/metrics/public/components/lib/tick_formatter.js @@ -1,4 +1,4 @@ -import numeral from '@spalger/numeral'; +import numeral from '@elastic/numeral'; import _ from 'lodash'; import handlebars from 'handlebars/dist/handlebars'; diff --git a/src/core_plugins/metrics/public/components/markdown_editor.js b/src/core_plugins/metrics/public/components/markdown_editor.js index 5d1913b949a1..2b4bc7baac66 100644 --- a/src/core_plugins/metrics/public/components/markdown_editor.js +++ b/src/core_plugins/metrics/public/components/markdown_editor.js @@ -48,7 +48,7 @@ class MarkdownEditor extends Component {
- "{ value }" + “{ value }”
- [ [ "{date}", "{value}" ], ... ] + [ [ “{date}”, “{value}” ], ... ]
- +
@@ -68,7 +73,7 @@

Label Template Help - +

Label Template Help @@ -118,7 +123,11 @@

- +

diff --git a/src/ui/public/field_format_editor/pattern/pattern.html b/src/ui/public/field_format_editor/pattern/pattern.html index 454f49ec03c5..9ad2cd83f045 100644 --- a/src/ui/public/field_format_editor/pattern/pattern.html +++ b/src/ui/public/field_format_editor/pattern/pattern.html @@ -1,11 +1,14 @@ -
- +
+ +
+ + + inputs="inputs"> +
- - - diff --git a/src/ui/public/field_format_editor/pattern/pattern.js b/src/ui/public/field_format_editor/pattern/pattern.js index 8682a8166f4c..adc3aa5030e3 100644 --- a/src/ui/public/field_format_editor/pattern/pattern.js +++ b/src/ui/public/field_format_editor/pattern/pattern.js @@ -7,9 +7,12 @@ uiModules .directive('fieldFormatEditorPattern', function () { return { restrict: 'E', + replace: true, template: patternTemplate, require: ['ngModel', '^fieldEditor'], - scope: true, + scope: { + id: '@' + }, link: function ($scope, $el, attrs, cntrls) { const ngModelCntrl = cntrls[0]; diff --git a/src/ui/public/filter_bar/filter_bar.html b/src/ui/public/filter_bar/filter_bar.html index d1e10b22e318..ca02b34f8f4f 100644 --- a/src/ui/public/filter_bar/filter_bar.html +++ b/src/ui/public/filter_bar/filter_bar.html @@ -1,117 +1,125 @@ -
-
-
    -
  • Apply these filters?
    • -
  • {{ filter.meta.key }}: {{ filter.meta.value }}
    • -
  • Change time to: {{changeTimeFilter.meta.value}}
    • -
  • -
    - +
    +
    + +
      +
    • Apply these filters?
      • +
    • {{ filter.meta.key }}: {{ filter.meta.value }}
      • +
    • Change time to: {{changeTimeFilter.meta.value}}
      • +
    • +
      + - -
      -
      • -
    - -
    - -
    - + +
    +
    • +
+ +
-
- - Add a filter - - + + +
+
+ + Add a filter + + +
-
-
-
- - Actions - - +
+
+ + Actions + + +
+
+ +
+
- -
-
- -
-
-
-
All filters:
-
+
-
Enable
+
All filters:
+
+
+
Enable
+
+
+
Disable
+
+
+
Pin
+
+
+
Unpin
+
+
+
Invert
+
+
+
Toggle
+
+
+
Remove
-
-
Disable
-
-
-
Pin
-
-
-
Unpin
-
-
-
Invert
-
-
-
Toggle
-
-
-
Remove
-
+ diff --git a/src/ui/public/filter_editor/filter_query_dsl_editor.html b/src/ui/public/filter_editor/filter_query_dsl_editor.html index 41d73b06eb2a..999dae7c1df0 100644 --- a/src/ui/public/filter_editor/filter_query_dsl_editor.html +++ b/src/ui/public/filter_editor/filter_query_dsl_editor.html @@ -1,6 +1,7 @@
diff --git a/src/core_plugins/timelion/public/services/timezone.js b/src/ui/public/vis/lib/timezone.js similarity index 89% rename from src/core_plugins/timelion/public/services/timezone.js rename to src/ui/public/vis/lib/timezone.js index a99a55afc5ab..38094cf49921 100644 --- a/src/core_plugins/timelion/public/services/timezone.js +++ b/src/ui/public/vis/lib/timezone.js @@ -1,7 +1,7 @@ const tzDetect = require('jstimezonedetect').jstz; import moment from 'moment'; -export default function timezoneFn(config) { +export function timezoneProvider(config) { return function () { if (config.isDefault('dateFormat:tz')) { @@ -14,3 +14,4 @@ export default function timezoneFn(config) { }; } + diff --git a/src/ui/public/vis/vis.js b/src/ui/public/vis/vis.js index d8b951838743..c01817e27fcf 100644 --- a/src/ui/public/vis/vis.js +++ b/src/ui/public/vis/vis.js @@ -135,7 +135,9 @@ export function VisProvider(Private, indexPatterns, timefilter, getAppState) { clone() { const uiJson = this.hasUiState() ? this.getUiState().toJSON() : {}; const uiState = new PersistedState(uiJson); - return new Vis(this.indexPattern, this.getState(), uiState); + const clonedVis = new Vis(this.indexPattern, this.getState(), uiState); + clonedVis.editorMode = this.editorMode; + return clonedVis; } requesting() { diff --git a/src/ui/public/visualize/spy.html b/src/ui/public/visualize/spy.html index e2b9e487aa3d..6bae91673d28 100644 --- a/src/ui/public/visualize/spy.html +++ b/src/ui/public/visualize/spy.html @@ -19,7 +19,7 @@
+``` + +If one label references multiple form elements, you can use the reverse logic +and add `aria-labelledby` to all form elements: + +```html + + + + +``` + +You should always prefer the `
+ +
); } } GuideNav.propTypes = { + isChromeVisible: PropTypes.bool, isNavOpen: PropTypes.bool, + isSandbox: PropTypes.bool, onToggleNav: PropTypes.func, + onHideChrome: PropTypes.func, + onShowChrome: PropTypes.func, onClickNavItem: PropTypes.func, version: PropTypes.string, routes: PropTypes.array, diff --git a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss index 5cbca6b531dd..3c3249a94010 100644 --- a/ui_framework/doc_site/src/components/guide_page/_guide_page.scss +++ b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss @@ -1,5 +1,3 @@ -@import "../../variables"; - .guidePage { display: flex; flex: 1 0 auto; diff --git a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js index 3ee423e6d2e1..bc061b81d5e4 100644 --- a/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js +++ b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.js @@ -1,29 +1,20 @@ import React, { - Component, PropTypes, } from 'react'; -export class GuidePageSideNav extends Component { - - constructor(props) { - super(props); - } - - render() { - return ( -
-
- {this.props.title} -
- -
- {this.props.children} -
+export const GuidePageSideNav = props => { + return ( +
+
+ {props.title}
- ); - } -} +
+ {props.children} +
+
+ ); +}; GuidePageSideNav.propTypes = { title: PropTypes.string, diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js index b1cfdc8276c7..ec9501f6c556 100644 --- a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js +++ b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js @@ -1,7 +1,55 @@ -import React from 'react'; +import React, { + Component, +} from 'react'; +import PropTypes from 'prop-types'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; -export const GuideSandbox = props => ( -
- {props.children} -
-); +import { + getIsSandbox, +} from '../../store'; + +import { + openSandbox, + closeSandbox, +} from '../../actions'; + +function mapStateToProps(state) { + return { + isSandbox: getIsSandbox(state), + }; +} + +function mapDispatchToProps(dispatch) { + const actions = { + openSandbox, + closeSandbox, + }; + + return bindActionCreators(actions, dispatch); +} + +class GuideSandboxComponent extends Component { + componentWillMount() { + this.props.openSandbox(); + } + + componentWillUnmount() { + this.props.closeSandbox(); + } + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +GuideSandboxComponent.propTypes = { + openSandbox: PropTypes.func, + closeSandbox: PropTypes.func, +}; + +export const GuideSandbox = connect(mapStateToProps, mapDispatchToProps)(GuideSandboxComponent); diff --git a/ui_framework/doc_site/src/components/guide_section/_guide_section.scss b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss index be596398381a..280b0026172e 100644 --- a/ui_framework/doc_site/src/components/guide_section/_guide_section.scss +++ b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss @@ -25,9 +25,15 @@ border: 1px solid $guideLinkHoverColor; border-radius: 3px; cursor: pointer; + transform: translateX(0); + transition: transform $guideChromeTransition; &:hover, &:active { background-color: #e6f7fc; } + + .is-chrome-hidden & { + transform: translateX(60px); + } } diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss index c16ec56e7823..f1707487acfb 100644 --- a/ui_framework/doc_site/src/main.scss +++ b/ui_framework/doc_site/src/main.scss @@ -1,116 +1,2 @@ @import "../../dist/ui_framework.css"; -@import "./variables"; @import "./components/guide_components"; - -* { - box-sizing: border-box; -} - -html, -body { - height: 100%; -} - -/** - * 1. Insane line-height makes it easier to notice when components are relying - * on styles inherited from body. - */ -body { - background-color: #000000; - line-height: 40px; /* 1 */ - margin: 0; - min-width: $guideMinWidth; -} - -/** - * 1. Expand container to fit the page if the content is shorter than the page, or expand with the - * content if it's taller than the page. - */ -.guide { - display: flex; - min-height: 100%; /* 1 */ -} - -.guideContent { - display: flex; - flex-direction: column; - flex: 1 1 auto; - padding-top: $guideNavHeight; - background-color: $guideBaseBackgroundColor; - transition: - padding-right $guideCodeViewerTransition, - opacity $guideCodeViewerTransition; - - &.is-code-viewer-open { - padding-right: $guideCodeViewerWidth; - - @include whenNarrowerThan($guideNormalBreakpoint) { - padding-right: $guideCodeViewerSmallWidth; - } - } - - .is-guide-nav-open + & { - opacity: 0.7; - } -} - -@media only screen and (max-width: 1300px) { - .guideHomePage { - justify-content: flex-start !important; - - .guideContentPage__content { - margin-left: 250px; - } - } -} - -.guideContentPage { - position: relative; - display: flex; - justify-content: center; - flex: 1 0 auto; - background-color: #ffffff; -} - - .guideContentPage__hint { - position: absolute; - top: 0; - left: 0; - width: 100%; - max-width: 260px; - max-height: 500px; - padding: 30px; - margin: 20px; - border-radius: 4px; - background-color: #e8e8e8; - line-height: $guideLineHeight; - } - - .guideContentPage__content { - width: 100%; - max-width: 800px; - padding: 30px 60px; - } - -.guideHintArrow { - position: absolute; - top: -15px; - left: 12px; - background-image: url("images/hint-arrow.svg"); - width: 26px; - height: 40px; - background-repeat: no-repeat; - background-size: contain; -} - -.guideWarning { - border-left: 5px solid #e8488b; - margin-top: 19px; - padding: 0 14px; - line-height: 21px; - color: #e8488b; -} - -.guideBreak { - border: none; -} diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js index 1de72728edae..11be3d404d13 100644 --- a/ui_framework/doc_site/src/services/routes/routes.js +++ b/ui_framework/doc_site/src/services/routes/routes.js @@ -87,6 +87,9 @@ import PagerExample import PanelExample from '../../views/panel/panel_example'; +import PopoverExample + from '../../views/popover/popover_example'; + import EmptyTablePromptExample from '../../views/empty_table_prompt/empty_table_prompt_example'; @@ -213,6 +216,10 @@ const components = [{ }, { name: 'Panel', component: PanelExample, +}, { + name: 'Popover', + component: PopoverExample, + hasReact: true, }, { name: 'StatusText', component: StatusTextExample, diff --git a/ui_framework/doc_site/src/store/configure_store.js b/ui_framework/doc_site/src/store/configure_store.js index 8f6de34b6733..b7160220345b 100644 --- a/ui_framework/doc_site/src/store/configure_store.js +++ b/ui_framework/doc_site/src/store/configure_store.js @@ -11,6 +11,7 @@ import { } from 'react-router-redux'; import codeViewerReducer from './reducers/code_viewer_reducer'; +import sandboxReducer from './reducers/sandbox_reducer'; import sectionsReducer from './reducers/sections_reducer'; /** @@ -22,6 +23,7 @@ export default function configureStore(initialState) { return { routing: routerReducer(state.routing, action), codeViewer: codeViewerReducer(state.codeViewer, action), + sandbox: sandboxReducer(state.sandbox, action), sections: sectionsReducer(state.sections, action), }; } diff --git a/ui_framework/doc_site/src/store/index.js b/ui_framework/doc_site/src/store/index.js index 0ab30476a2db..12be83f4b237 100644 --- a/ui_framework/doc_site/src/store/index.js +++ b/ui_framework/doc_site/src/store/index.js @@ -2,6 +2,10 @@ export function getIsCodeViewerOpen(state) { return state.codeViewer.isOpen; } +export function getIsSandbox(state) { + return state.sandbox.isSandbox; +} + export function getSections(state) { return state.sections.sections; } diff --git a/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js b/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js new file mode 100644 index 000000000000..6dd83497dc47 --- /dev/null +++ b/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js @@ -0,0 +1,26 @@ +import ActionTypes from '../../actions/action_types'; + +const defaultState = { + isSandbox: false, +}; + +export default function sandboxReducer(state = defaultState, action) { + switch (action.type) { + case ActionTypes.OPEN_SANDBOX: { + return Object.assign({}, state, { + isSandbox: true, + }); + } + + case ActionTypes.CLOSE_SANDBOX: { + return Object.assign({}, state, { + isSandbox: false, + }); + } + + default: + break; + } + + return state; +} diff --git a/ui_framework/doc_site/src/variables.scss b/ui_framework/doc_site/src/variables.scss deleted file mode 100644 index cbeac0fcfadc..000000000000 --- a/ui_framework/doc_site/src/variables.scss +++ /dev/null @@ -1,47 +0,0 @@ -$guideLineHeight: 24px; -$guideNavHeight: 60px; -$guideSideNavWidth: 400px; -$guideSideNavSmallWidth: 220px; -$guideCodeViewerWidth: 660px; -$guideCodeViewerSmallWidth: 520px; -$guideCodeViewerTransition: 0.2s ease; - -// Colors -$guideBaseBackgroundColor: #f7f7f7; -$guidePanelBackgroundColor: #ffffff; -$guideTextColor: #444; -$guideLinkColor: #00a9e5; -$guideLinkHoverColor: #00a9e5; - -// Breakpoints -$guideMinWidth: 840px; -$guideNormalBreakpoint: 1900px; - -@mixin whenNarrowerThan($browserWidth) { - @media only screen and (max-width: #{$browserWidth}) { - @content; - } -} - -@mixin whenWiderThan($browserWidth) { - @media only screen and (min-width: #{$browserWidth}) { - @content; - } -} - -@mixin scrollbar($color: rgba(#454D58, 0.4)) { - &::-webkit-scrollbar { - width: 16px; - height: 16px; - } - - &::-webkit-scrollbar-thumb { - background-color: $color; - border: 6px solid transparent; - background-clip: content-box; - } - - &::-webkit-scrollbar-track { - background-color: transparent; - } -} diff --git a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js index 470127beea62..b173c0e593d3 100644 --- a/ui_framework/doc_site/src/views/accessibility/accessibility_example.js +++ b/ui_framework/doc_site/src/views/accessibility/accessibility_example.js @@ -56,13 +56,13 @@ export default props => ( > This class can be useful to add accessibility to older designs that are - still in use, but it shouldn't be a permanent solution. See - http://webaim.org/techniques/css/invisiblecontent/ - { - // eslint-disable-next-line react/jsx-closing-tag-location - } for more information. + still in use, but it shouldn’t be a permanent solution. See {( + + http://webaim.org/techniques/css/invisiblecontent/ + + )} for more information. diff --git a/ui_framework/doc_site/src/views/app_container.js b/ui_framework/doc_site/src/views/app_container.js index 5289c137567c..e54a3412302b 100644 --- a/ui_framework/doc_site/src/views/app_container.js +++ b/ui_framework/doc_site/src/views/app_container.js @@ -3,11 +3,14 @@ import { connect } from 'react-redux'; import { getIsCodeViewerOpen, + getIsSandbox, getSections, getSource, getTitle, } from '../store'; + import { AppView } from './app_view'; + import { openCodeViewer, closeCodeViewer, @@ -19,6 +22,7 @@ function mapStateToProps(state, ownProps) { return { routes: ownProps.routes, isCodeViewerOpen: getIsCodeViewerOpen(state), + isSandbox: getIsSandbox(state), source: getSource(state), title: getTitle(state), sections: getSections(state), diff --git a/ui_framework/doc_site/src/views/app_view.js b/ui_framework/doc_site/src/views/app_view.js index 3829153e1efd..24616e55b776 100644 --- a/ui_framework/doc_site/src/views/app_view.js +++ b/ui_framework/doc_site/src/views/app_view.js @@ -23,11 +23,14 @@ export class AppView extends Component { this.state = { isNavOpen: false, + isChromeVisible: !props.isSandbox, }; this.onClickNavItem = this.onClickNavItem.bind(this); this.onToggleNav = this.onToggleNav.bind(this); this.onCloseCodeViewer = this.onCloseCodeViewer.bind(this); + this.onHideChrome = this.onHideChrome.bind(this); + this.onShowChrome = this.onShowChrome.bind(this); } onClickNavItem() { @@ -46,15 +49,44 @@ export class AppView extends Component { }); } + onHideChrome() { + this.setState({ + isChromeVisible: false, + isNavOpen: false, + }); + + this.props.closeCodeViewer(); + } + + onShowChrome() { + this.setState({ + isChromeVisible: true, + }); + } + + componentWillReceiveProps(nextProps) { + // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox. + if (!this.props.isSandbox && nextProps.isSandbox) { + this.setState({ + isChromeVisible: false, + }); + } + } + render() { const contentClasses = classNames('guideContent', { 'is-code-viewer-open': this.props.isCodeViewerOpen, + 'is-chrome-hidden': !this.state.isChromeVisible, }); return (
( > A Bar with one section will align it to the right, by default. To align it to the left, - just add another section and leave it empty, or don't use a Bar at all. + just add another section and leave it empty, or don’t use a Bar at all. @@ -79,7 +79,7 @@ export default props => ( }]} > - Technically the Bar can contain three or more sections, but there's no established use-case + Technically the Bar can contain three or more sections, but there’s no established use-case for this. diff --git a/ui_framework/doc_site/src/views/button/button_basic.js b/ui_framework/doc_site/src/views/button/button_basic.js index 7ed1010895f1..73e8885556ab 100644 --- a/ui_framework/doc_site/src/views/button/button_basic.js +++ b/ui_framework/doc_site/src/views/button/button_basic.js @@ -13,6 +13,7 @@ export default () => ( Basic button +

( Danger button +

( Button element -   +
+
{ e.preventDefault(); @@ -24,6 +25,7 @@ export default () => ( +
{ e.preventDefault(); @@ -35,7 +37,7 @@ export default () => (
-   +
( Anchor element -   +
+
( }]} > - Use the hollow Button when presenting a neutral action, e.g. a "Cancel" button. + Use the hollow Button when presenting a neutral action, e.g. a “Cancel” button. @@ -115,7 +111,7 @@ export default props => ( }]} > - Use the primary Button to represent the most common action. Generally, there won't be a + Use the primary Button to represent the most common action. Generally, there won’t be a need to present more than one of these at a time. @@ -135,7 +131,7 @@ export default props => ( }]} > - Secondary buttons are usually used for actions ("do this") that are optional actions on a page. + Secondary buttons are usually used for actions (“do this”) that are optional actions on a page. @@ -256,25 +252,6 @@ export default props => ( - - - This example verifies that Buttons are legible against the ToolBar's background. - - - - - - - ( }]} > - You can create a Button using a button element, link, or input[type="submit"]. + You can create a Button using a button element, link, or input[type=“submit”]. diff --git a/ui_framework/doc_site/src/views/button/button_hollow.js b/ui_framework/doc_site/src/views/button/button_hollow.js index da0d13cf0440..2ca5b3ad8a14 100644 --- a/ui_framework/doc_site/src/views/button/button_hollow.js +++ b/ui_framework/doc_site/src/views/button/button_hollow.js @@ -10,6 +10,7 @@ export default () => ( Hollow button +

+

( Primary button +

( Secondary button +

( Warning button +

( Create +

( Delete +

( Previous +

} - iconPosition='right' + iconPosition="right" > Next +

( Loading +

( -
- - Basic button - - - - Basic button, disabled - - - - Primary button - - - - Primary button, disabled - - - - Secondary button - - - - Secondary button, disabled - - - - Danger button - - - - Danger button, disabled - - - - Warning button - - - - Warning button, disabled - -
-); diff --git a/ui_framework/doc_site/src/views/card/card_example.js b/ui_framework/doc_site/src/views/card/card_example.js index 65cbe5e59453..67797bcd837e 100644 --- a/ui_framework/doc_site/src/views/card/card_example.js +++ b/ui_framework/doc_site/src/views/card/card_example.js @@ -31,7 +31,7 @@ export default props => ( }]} > - Cards expand to fill their container. To restrict a card's width, define the width of its + Cards expand to fill their container. To restrict a card’s width, define the width of its container. diff --git a/ui_framework/doc_site/src/views/collapse_button/collapse_button.js b/ui_framework/doc_site/src/views/collapse_button/collapse_button.js index 22cdd501bb76..59f30f324c1d 100644 --- a/ui_framework/doc_site/src/views/collapse_button/collapse_button.js +++ b/ui_framework/doc_site/src/views/collapse_button/collapse_button.js @@ -6,9 +6,9 @@ import { export default () => (
- - - - + + + +
); diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker.js b/ui_framework/doc_site/src/views/color_picker/color_picker.js index 1e4285b2c536..c1582a8d6a44 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker.js @@ -1,6 +1,6 @@ import React from 'react'; -import { KuiColorPicker } from '../../../../components/index'; +import { KuiColorPicker } from '../../../../components'; export class ColorPicker extends React.Component { constructor(props) { @@ -15,6 +15,6 @@ export class ColorPicker extends React.Component { }; render() { - return ; + return ; } } diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js b/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js index 313cc0d62f4a..3d9414f67339 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker_clear.js @@ -5,7 +5,7 @@ import { KuiFieldGroup, KuiFieldGroupSection, KuiKeyboardAccessible, -} from '../../../../components/index'; +} from '../../../../components'; export class ColorPickerLabelAndClear extends React.Component { constructor(props) { @@ -34,15 +34,15 @@ export class ColorPickerLabelAndClear extends React.Component {

- + Reset diff --git a/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js b/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js index 931b7dbedc67..71cc5803e017 100644 --- a/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js +++ b/ui_framework/doc_site/src/views/color_picker/color_picker_no_color_label.js @@ -4,7 +4,7 @@ import { KuiColorPicker, KuiFieldGroup, KuiFieldGroupSection, -} from '../../../../components/index'; +} from '../../../../components'; export class ColorPickerNoColorLabel extends React.Component { constructor(props) { @@ -29,9 +29,9 @@ export class ColorPickerNoColorLabel extends React.Component { diff --git a/ui_framework/doc_site/src/views/column/column_example.js b/ui_framework/doc_site/src/views/column/column_example.js index 27ddd95bdf75..3910d26cfb2a 100644 --- a/ui_framework/doc_site/src/views/column/column_example.js +++ b/ui_framework/doc_site/src/views/column/column_example.js @@ -21,7 +21,7 @@ export default props => ( }]} > - Note: Don't use this. It's subject to change as we evolve our grid system. + Note: Don’t use this. It’s subject to change as we evolve our grid system. diff --git a/ui_framework/doc_site/src/views/gallery/gallery.js b/ui_framework/doc_site/src/views/gallery/gallery.js index 5c13f6a4775c..4678d2583ec2 100644 --- a/ui_framework/doc_site/src/views/gallery/gallery.js +++ b/ui_framework/doc_site/src/views/gallery/gallery.js @@ -20,11 +20,11 @@ export default () => { return (

-

+

Some items

- + @@ -70,11 +70,11 @@ export default () => {
-
+
Some more items
- + diff --git a/ui_framework/doc_site/src/views/gallery/gallery_example.js b/ui_framework/doc_site/src/views/gallery/gallery_example.js index dfdab4a4155e..326c9ab66b1c 100644 --- a/ui_framework/doc_site/src/views/gallery/gallery_example.js +++ b/ui_framework/doc_site/src/views/gallery/gallery_example.js @@ -27,7 +27,7 @@ export default props => ( > Use GalleryButton to show a gallery item. - It's an anchor and accepts all anchor properties. + It’s an anchor and accepts all anchor properties. diff --git a/ui_framework/doc_site/src/views/home/home_view.js b/ui_framework/doc_site/src/views/home/home_view.js index c9e205d544c7..d74ad1f6c228 100644 --- a/ui_framework/doc_site/src/views/home/home_view.js +++ b/ui_framework/doc_site/src/views/home/home_view.js @@ -20,7 +20,7 @@ export const HomeView = () => (

- The Kibana team uses the UI Framework to build Kibana's user interface. Please see + The Kibana team uses the UI Framework to build Kibana’s user interface. Please see the general Kibana docs for information on how to use Kibana, and the plugin-specific section for help developing Kibana plugins. @@ -32,7 +32,7 @@ export const HomeView = () => (

- If you're just getting started with the UI Framework for the first time, you may + If you’re just getting started with the UI Framework for the first time, you may be interested in some of the more commonly-used components:

diff --git a/ui_framework/doc_site/src/views/icon/icon_example.js b/ui_framework/doc_site/src/views/icon/icon_example.js index 16028624b03a..d1244d09a92b 100644 --- a/ui_framework/doc_site/src/views/icon/icon_example.js +++ b/ui_framework/doc_site/src/views/icon/icon_example.js @@ -62,7 +62,7 @@ export default props => ( }]} > - Use this Icon when you don't want to communicate any particular meaning with the icon's + Use this Icon when you don’t want to communicate any particular meaning with the icon’s color. diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js index c55cc9d9b788..42e03c4d5ad2 100644 --- a/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js +++ b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.js @@ -45,12 +45,12 @@ export function LocalNavWithDropdown() { {/* Help text */}
- Here's some help text to explain the purpose of the dropdown. + Here’s some help text to explain the purpose of the dropdown.
{/* Warning */}
- Here's some warning text in case the user has something misconfigured. + Here’s some warning text in case the user has something misconfigured.
diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js index d009b0882a94..eaa2c471e1ba 100644 --- a/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js +++ b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.js @@ -48,7 +48,7 @@ export function LocalNavWithDropdownPanels() { {/* Help text */}
- Here's some help text to explain the purpose of the dropdown. + Here’s some help text to explain the purpose of the dropdown.
@@ -59,7 +59,7 @@ export function LocalNavWithDropdownPanels() { {/* Help text */}
- Here's some help text to explain the purpose of the dropdown. + Here’s some help text to explain the purpose of the dropdown.
diff --git a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js index 3dced032ede9..b429fe0d23ac 100644 --- a/ui_framework/doc_site/src/views/local_nav/local_nav_example.js +++ b/ui_framework/doc_site/src/views/local_nav/local_nav_example.js @@ -61,7 +61,7 @@ export default props => ( ]} > - Here's a simple LocalNav with a Title in the top left corner and Menu in the top right. + Here’s a simple LocalNav with a Title in the top left corner and Menu in the top right. diff --git a/ui_framework/doc_site/src/views/menu_button/menu_button_example.js b/ui_framework/doc_site/src/views/menu_button/menu_button_example.js index 35812940c12a..22d5f979b7dc 100644 --- a/ui_framework/doc_site/src/views/menu_button/menu_button_example.js +++ b/ui_framework/doc_site/src/views/menu_button/menu_button_example.js @@ -89,7 +89,7 @@ export default props => ( }]} > - You can create a MenuButton using a button element, link, or input[type="submit"]. + You can create a MenuButton using a button element, link, or input[type=“submit”]. ( @@ -27,21 +24,14 @@ export default props => ( title="Confirmation Modal" source={[{ type: GuideSectionTypes.JS, - code: kuiConfirmModalSource, + code: staticConfirmModalSource, }, { type: GuideSectionTypes.HTML, - code: kuiConfirmModalHtml, + code: staticConfirmModalHtml, }]} > - {}} - onConfirm={() => {}} - confirmButtonText="Confirm" - cancelButtonText="Cancel" - message="This is a confirmation modal" - title="Confirm Modal Title" - /> + diff --git a/ui_framework/doc_site/src/views/modal/static.js b/ui_framework/doc_site/src/views/modal/static.js new file mode 100644 index 000000000000..f2b14bb18e83 --- /dev/null +++ b/ui_framework/doc_site/src/views/modal/static.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import { + KuiConfirmModal, +} from '../../../../components'; + +export const StaticConfirmModal = () => ( + {}} + onConfirm={() => {}} + confirmButtonText="Confirm" + cancelButtonText="Cancel" + message="This is a confirmation modal" + title="Confirm Modal Title" + /> +); diff --git a/ui_framework/doc_site/src/views/not_found/not_found_view.js b/ui_framework/doc_site/src/views/not_found/not_found_view.js index 472d0a25f57c..164179f1f9b1 100644 --- a/ui_framework/doc_site/src/views/not_found/not_found_view.js +++ b/ui_framework/doc_site/src/views/not_found/not_found_view.js @@ -12,15 +12,17 @@ export const NotFoundView = () => (

- You visited a page which doesn't exist, causing this page to exist. This page thanks + You visited a page which doesn’t exist, causing this page to exist. This page thanks you for summoning it into existence from the raw fabric of reality, but it thinks you may find another page more interesting. Might it suggest - the - home page - ? + the {( + + home page + + )}?

diff --git a/ui_framework/doc_site/src/views/pager/pager_buttons.js b/ui_framework/doc_site/src/views/pager/pager_buttons.js index ba86082f4056..51446d70cf33 100644 --- a/ui_framework/doc_site/src/views/pager/pager_buttons.js +++ b/ui_framework/doc_site/src/views/pager/pager_buttons.js @@ -17,9 +17,9 @@ export class PagerButtons extends React.Component { getPage() { switch (this.state.item) { case 1: - return
I'm Page 1!
; + return
I’m Page 1!
; case 2: - return I'm a button; + return I’m a button; case 3: return
You are at the end
; } diff --git a/ui_framework/doc_site/src/views/popover/popover.js b/ui_framework/doc_site/src/views/popover/popover.js new file mode 100644 index 000000000000..7e40ccd2fdbf --- /dev/null +++ b/ui_framework/doc_site/src/views/popover/popover.js @@ -0,0 +1,48 @@ +import React, { + Component, +} from 'react'; + +import { + KuiPopover, + KuiButton, +} from '../../../../components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isPopoverOpen: false, + }; + } + + onButtonClick() { + this.setState({ + isPopoverOpen: !this.state.isPopoverOpen, + }); + } + + closePopover() { + this.setState({ + isPopoverOpen: false, + }); + } + + render() { + const button = ( + + Click me + + ); + + return ( + +
Popover content that’s wider than the default width
+ + ); + } +} diff --git a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js new file mode 100644 index 000000000000..a5f78f2607c1 --- /dev/null +++ b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js @@ -0,0 +1,77 @@ +import React, { + Component, +} from 'react'; + +import { + KuiPopover, + KuiButton, +} from '../../../../components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isPopoverOpen1: false, + isPopoverOpen2: false, + }; + } + + onButtonClick1() { + this.setState({ + isPopoverOpen1: !this.state.isPopoverOpen1, + }); + } + + closePopover1() { + this.setState({ + isPopoverOpen1: false, + }); + } + + onButtonClick2() { + this.setState({ + isPopoverOpen2: !this.state.isPopoverOpen2, + }); + } + + closePopover2() { + this.setState({ + isPopoverOpen2: false, + }); + } + + render() { + return ( +
+ + Popover anchored to the right. + + )} + isOpen={this.state.isPopoverOpen1} + closePopover={this.closePopover1.bind(this)} + anchorPosition="right" + > + Popover content + + +   + + + Popover anchored to the right. + + )} + isOpen={this.state.isPopoverOpen2} + closePopover={this.closePopover2.bind(this)} + anchorPosition="left" + > + Popover content + +
+ ); + } +} diff --git a/ui_framework/doc_site/src/views/popover/popover_body_class_name.js b/ui_framework/doc_site/src/views/popover/popover_body_class_name.js new file mode 100644 index 000000000000..bdcf9d31767e --- /dev/null +++ b/ui_framework/doc_site/src/views/popover/popover_body_class_name.js @@ -0,0 +1,47 @@ +import React, { + Component, +} from 'react'; + +import { + KuiPopover, + KuiButton +} from '../../../../components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isPopoverOpen: false, + }; + } + + onButtonClick() { + this.setState({ + isPopoverOpen: !this.state.isPopoverOpen, + }); + } + + closePopover() { + this.setState({ + isPopoverOpen: false, + }); + } + + render() { + return ( + + Custom class + + )} + isOpen={this.state.isPopoverOpen} + closePopover={this.closePopover.bind(this)} + bodyClassName="yourClassNameHere" + > + It’s hard to tell but there’s a custom class on this element + + ); + } +} diff --git a/ui_framework/doc_site/src/views/popover/popover_example.js b/ui_framework/doc_site/src/views/popover/popover_example.js new file mode 100644 index 000000000000..da88e038a30d --- /dev/null +++ b/ui_framework/doc_site/src/views/popover/popover_example.js @@ -0,0 +1,76 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import Popover from './popover'; +const popoverSource = require('!!raw!./popover'); +const popoverHtml = renderToHtml(Popover); + +import PopoverAnchorPosition from './popover_anchor_position'; +const popoverAnchorPositionSource = require('!!raw!./popover_anchor_position'); +const popoverAnchorPositionHtml = renderToHtml(PopoverAnchorPosition); + +import PopoverBodyClassName from './popover_body_class_name'; +const popoverBodyClassNameSource = require('!!raw!./popover_body_class_name'); +const popoverBodyClassNameHtml = renderToHtml(PopoverBodyClassName); + +export default props => ( + + + + Use the Popover component to hide controls or options behind a clickable element. + + + + + + + + + + + + + + + + + + + +); diff --git a/ui_framework/doc_site/src/views/table/controlled_table.js b/ui_framework/doc_site/src/views/table/controlled_table.js index 6edeed7f938c..cbc0ec8848ec 100644 --- a/ui_framework/doc_site/src/views/table/controlled_table.js +++ b/ui_framework/doc_site/src/views/table/controlled_table.js @@ -64,13 +64,13 @@ export class ControlledTable extends React.Component { renderPager() { return ( {} } - onPreviousPage={ () => {} } + startNumber={1} + hasNextPage={true} + hasPreviousPage={false} + endNumber={10} + totalItems={100} + onNextPage={() => {}} + onPreviousPage={() => {}} /> ); } @@ -92,14 +92,14 @@ export class ControlledTable extends React.Component { return ( this.toggleItem(rowData) } + isChecked={this.isItemChecked(rowData)} + onChange={() => this.toggleItem(rowData)} /> { rowData.map((cellData, index) => { const align = index === rowData.length - 1 ? RIGHT_ALIGNMENT : LEFT_ALIGNMENT; return ( - + { cellData } ); @@ -114,7 +114,7 @@ export class ControlledTable extends React.Component { return ( - {} } /> + {}} /> @@ -140,8 +140,8 @@ export class ControlledTable extends React.Component { this.toggleItem('header') } + isChecked={this.isItemChecked('header')} + onChange={() => this.toggleItem('header')} /> Title diff --git a/ui_framework/doc_site/src/views/table/controlled_table_loading_items.js b/ui_framework/doc_site/src/views/table/controlled_table_loading_items.js index f396996d8894..042e3f5249c6 100644 --- a/ui_framework/doc_site/src/views/table/controlled_table_loading_items.js +++ b/ui_framework/doc_site/src/views/table/controlled_table_loading_items.js @@ -19,13 +19,13 @@ export class ControlledTableLoadingItems extends React.Component { getPager() { return ( {} } - onPreviousPage={ () => {} } + startNumber={1} + hasNextPage={true} + hasPreviousPage={false} + endNumber={10} + totalItems={100} + onNextPage={() => {}} + onPreviousPage={() => {}} /> ); } @@ -34,7 +34,7 @@ export class ControlledTableLoadingItems extends React.Component { return ( - {} } /> + {}} /> diff --git a/ui_framework/doc_site/src/views/table/controlled_table_with_empty_prompt.js b/ui_framework/doc_site/src/views/table/controlled_table_with_empty_prompt.js index 5abfd5356712..0fb4e7186310 100644 --- a/ui_framework/doc_site/src/views/table/controlled_table_with_empty_prompt.js +++ b/ui_framework/doc_site/src/views/table/controlled_table_with_empty_prompt.js @@ -19,13 +19,13 @@ export class ControlledTableWithEmptyPrompt extends React.Component { getPager() { return ( {} } - onPreviousPage={ () => {} } + startNumber={1} + hasNextPage={true} + hasPreviousPage={false} + endNumber={10} + totalItems={100} + onNextPage={() => {}} + onPreviousPage={() => {}} /> ); } @@ -34,7 +34,7 @@ export class ControlledTableWithEmptyPrompt extends React.Component { return ( - {} } /> + {}} /> @@ -59,7 +59,7 @@ export class ControlledTableWithEmptyPrompt extends React.Component { Add Items } + actions={Add Items} message="Uh oh you have no items!" /> diff --git a/ui_framework/doc_site/src/views/table/controlled_table_with_no_items.js b/ui_framework/doc_site/src/views/table/controlled_table_with_no_items.js index 612083904947..7f9b99bd07d8 100644 --- a/ui_framework/doc_site/src/views/table/controlled_table_with_no_items.js +++ b/ui_framework/doc_site/src/views/table/controlled_table_with_no_items.js @@ -19,13 +19,13 @@ export class ControlledTableWithNoItems extends React.Component { getPager() { return ( {} } - onPreviousPage={ () => {} } + startNumber={1} + hasNextPage={true} + hasPreviousPage={false} + endNumber={10} + totalItems={100} + onNextPage={() => {}} + onPreviousPage={() => {}} /> ); } @@ -34,7 +34,7 @@ export class ControlledTableWithNoItems extends React.Component { return ( - {} } /> + {}} /> diff --git a/ui_framework/doc_site/src/views/table/fluid_table.js b/ui_framework/doc_site/src/views/table/fluid_table.js index 7d483fdb742d..7de2f0d4da1f 100644 --- a/ui_framework/doc_site/src/views/table/fluid_table.js +++ b/ui_framework/doc_site/src/views/table/fluid_table.js @@ -11,7 +11,7 @@ import { export function FluidTable() { return ( - + System diff --git a/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js index aa8c1addba0e..cb45e7df798e 100644 --- a/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js +++ b/ui_framework/doc_site/src/views/table/table_with_menu_buttons.js @@ -48,7 +48,7 @@ export function TableWithMenuButtons() { C - +
); }; diff --git a/ui_framework/components/info_button/info_button.test.js b/ui_framework/src/components/info_button/info_button.test.js similarity index 100% rename from ui_framework/components/info_button/info_button.test.js rename to ui_framework/src/components/info_button/info_button.test.js diff --git a/ui_framework/components/info_panel/_index.scss b/ui_framework/src/components/info_panel/_index.scss similarity index 100% rename from ui_framework/components/info_panel/_index.scss rename to ui_framework/src/components/info_panel/_index.scss diff --git a/ui_framework/components/info_panel/_info_panel.scss b/ui_framework/src/components/info_panel/_info_panel.scss similarity index 100% rename from ui_framework/components/info_panel/_info_panel.scss rename to ui_framework/src/components/info_panel/_info_panel.scss diff --git a/ui_framework/components/link/_index.scss b/ui_framework/src/components/link/_index.scss similarity index 100% rename from ui_framework/components/link/_index.scss rename to ui_framework/src/components/link/_index.scss diff --git a/ui_framework/components/link/_link.scss b/ui_framework/src/components/link/_link.scss similarity index 100% rename from ui_framework/components/link/_link.scss rename to ui_framework/src/components/link/_link.scss diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav_row.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav_row.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav_row.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav_row.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_nav_row_section.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_tab.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_tab.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_tab.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_tab.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_tabs.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_tabs.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_tabs.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_tabs.test.js.snap diff --git a/ui_framework/components/local_nav/__snapshots__/local_title.test.js.snap b/ui_framework/src/components/local_nav/__snapshots__/local_title.test.js.snap similarity index 100% rename from ui_framework/components/local_nav/__snapshots__/local_title.test.js.snap rename to ui_framework/src/components/local_nav/__snapshots__/local_title.test.js.snap diff --git a/ui_framework/components/local_nav/_index.scss b/ui_framework/src/components/local_nav/_index.scss similarity index 100% rename from ui_framework/components/local_nav/_index.scss rename to ui_framework/src/components/local_nav/_index.scss diff --git a/ui_framework/components/local_nav/_local_breadcrumbs.scss b/ui_framework/src/components/local_nav/_local_breadcrumbs.scss similarity index 100% rename from ui_framework/components/local_nav/_local_breadcrumbs.scss rename to ui_framework/src/components/local_nav/_local_breadcrumbs.scss diff --git a/ui_framework/components/local_nav/_local_date_picker.scss b/ui_framework/src/components/local_nav/_local_date_picker.scss similarity index 100% rename from ui_framework/components/local_nav/_local_date_picker.scss rename to ui_framework/src/components/local_nav/_local_date_picker.scss diff --git a/ui_framework/components/local_nav/_local_dropdown.scss b/ui_framework/src/components/local_nav/_local_dropdown.scss similarity index 100% rename from ui_framework/components/local_nav/_local_dropdown.scss rename to ui_framework/src/components/local_nav/_local_dropdown.scss diff --git a/ui_framework/components/local_nav/_local_menu.scss b/ui_framework/src/components/local_nav/_local_menu.scss similarity index 100% rename from ui_framework/components/local_nav/_local_menu.scss rename to ui_framework/src/components/local_nav/_local_menu.scss diff --git a/ui_framework/components/local_nav/_local_nav.scss b/ui_framework/src/components/local_nav/_local_nav.scss similarity index 100% rename from ui_framework/components/local_nav/_local_nav.scss rename to ui_framework/src/components/local_nav/_local_nav.scss diff --git a/ui_framework/components/local_nav/_local_search.scss b/ui_framework/src/components/local_nav/_local_search.scss similarity index 100% rename from ui_framework/components/local_nav/_local_search.scss rename to ui_framework/src/components/local_nav/_local_search.scss diff --git a/ui_framework/components/local_nav/_local_tabs.scss b/ui_framework/src/components/local_nav/_local_tabs.scss similarity index 100% rename from ui_framework/components/local_nav/_local_tabs.scss rename to ui_framework/src/components/local_nav/_local_tabs.scss diff --git a/ui_framework/components/local_nav/_local_title.scss b/ui_framework/src/components/local_nav/_local_title.scss similarity index 100% rename from ui_framework/components/local_nav/_local_title.scss rename to ui_framework/src/components/local_nav/_local_title.scss diff --git a/ui_framework/components/local_nav/index.js b/ui_framework/src/components/local_nav/index.js similarity index 100% rename from ui_framework/components/local_nav/index.js rename to ui_framework/src/components/local_nav/index.js diff --git a/ui_framework/components/local_nav/local_nav.js b/ui_framework/src/components/local_nav/local_nav.js similarity index 89% rename from ui_framework/components/local_nav/local_nav.js rename to ui_framework/src/components/local_nav/local_nav.js index 7594f9d4d6ff..d70e3c24f3d4 100644 --- a/ui_framework/components/local_nav/local_nav.js +++ b/ui_framework/src/components/local_nav/local_nav.js @@ -5,7 +5,7 @@ import React from 'react'; export function KuiLocalNav({ className, children, ...rest }) { const classes = classnames('kuiLocalNav', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/local_nav/local_nav.test.js b/ui_framework/src/components/local_nav/local_nav.test.js similarity index 76% rename from ui_framework/components/local_nav/local_nav.test.js rename to ui_framework/src/components/local_nav/local_nav.test.js index 12ab75cabad2..2c1d5b8a9eda 100644 --- a/ui_framework/components/local_nav/local_nav.test.js +++ b/ui_framework/src/components/local_nav/local_nav.test.js @@ -5,6 +5,6 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalNav } from './local_nav'; test('renders KuiLocalNav', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/local_nav/local_nav_row.js b/ui_framework/src/components/local_nav/local_nav_row.js similarity index 92% rename from ui_framework/components/local_nav/local_nav_row.js rename to ui_framework/src/components/local_nav/local_nav_row.js index 806b7223564f..2d9b577abb3c 100644 --- a/ui_framework/components/local_nav/local_nav_row.js +++ b/ui_framework/src/components/local_nav/local_nav_row.js @@ -7,7 +7,7 @@ export function KuiLocalNavRow({ className, children, isSecondary, ...rest }) { 'kuiLocalNavRow--secondary': isSecondary, }); return ( -
+
{ children }
); diff --git a/ui_framework/components/local_nav/local_nav_row.test.js b/ui_framework/src/components/local_nav/local_nav_row.test.js similarity index 69% rename from ui_framework/components/local_nav/local_nav_row.test.js rename to ui_framework/src/components/local_nav/local_nav_row.test.js index c0ad465aa8d3..0bd55a22a9fa 100644 --- a/ui_framework/components/local_nav/local_nav_row.test.js +++ b/ui_framework/src/components/local_nav/local_nav_row.test.js @@ -5,13 +5,13 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalNavRow } from './local_nav_row'; test('renders KuiLocalNavRow', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); describe('property isSecondary', () => { test('renders the secondary modifier', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); }); diff --git a/ui_framework/components/local_nav/local_nav_row_section.js b/ui_framework/src/components/local_nav/local_nav_row_section.js similarity index 89% rename from ui_framework/components/local_nav/local_nav_row_section.js rename to ui_framework/src/components/local_nav/local_nav_row_section.js index 364d8acd4073..541a60d9f57c 100644 --- a/ui_framework/components/local_nav/local_nav_row_section.js +++ b/ui_framework/src/components/local_nav/local_nav_row_section.js @@ -5,7 +5,7 @@ import React from 'react'; export function KuiLocalNavRowSection({ className, children, ...rest }) { const classes = classnames('kuiLocalNavRow__section', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/local_nav/local_nav_row_section.test.js b/ui_framework/src/components/local_nav/local_nav_row_section.test.js similarity index 74% rename from ui_framework/components/local_nav/local_nav_row_section.test.js rename to ui_framework/src/components/local_nav/local_nav_row_section.test.js index 35235dc017bd..dbc950917712 100644 --- a/ui_framework/components/local_nav/local_nav_row_section.test.js +++ b/ui_framework/src/components/local_nav/local_nav_row_section.test.js @@ -5,6 +5,6 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalNavRowSection } from './local_nav_row_section'; test('renders KuiLocalNavRowSection', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/local_nav/local_tab.js b/ui_framework/src/components/local_nav/local_tab.js similarity index 93% rename from ui_framework/components/local_nav/local_tab.js rename to ui_framework/src/components/local_nav/local_tab.js index e4040367e3e3..823bf4eabbb4 100644 --- a/ui_framework/components/local_nav/local_tab.js +++ b/ui_framework/src/components/local_nav/local_tab.js @@ -8,7 +8,7 @@ export function KuiLocalTab({ className, children, isDisabled, isSelected, ...re 'kuiLocalTab-isSelected': isSelected, }); return ( - + { children } ); diff --git a/ui_framework/components/local_nav/local_tab.test.js b/ui_framework/src/components/local_nav/local_tab.test.js similarity index 67% rename from ui_framework/components/local_nav/local_tab.test.js rename to ui_framework/src/components/local_nav/local_tab.test.js index 0a34baab3729..3dc458768d15 100644 --- a/ui_framework/components/local_nav/local_tab.test.js +++ b/ui_framework/src/components/local_nav/local_tab.test.js @@ -5,20 +5,20 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalTab } from './local_tab'; test('renders KuiLocalTab', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); describe('property isSelected', () => { test('renders the isSelected modifier', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); }); describe('property isDisabled', () => { test('renders the isDisabled modifier', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); }); diff --git a/ui_framework/components/local_nav/local_tabs.js b/ui_framework/src/components/local_nav/local_tabs.js similarity index 89% rename from ui_framework/components/local_nav/local_tabs.js rename to ui_framework/src/components/local_nav/local_tabs.js index 1aaa458d5688..f65f5fe90521 100644 --- a/ui_framework/components/local_nav/local_tabs.js +++ b/ui_framework/src/components/local_nav/local_tabs.js @@ -5,7 +5,7 @@ import React from 'react'; export function KuiLocalTabs({ className, children, ...rest }) { const classes = classnames('kuiLocalTabs', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/local_nav/local_tabs.test.js b/ui_framework/src/components/local_nav/local_tabs.test.js similarity index 76% rename from ui_framework/components/local_nav/local_tabs.test.js rename to ui_framework/src/components/local_nav/local_tabs.test.js index ffc70aeba75b..094495ad0f89 100644 --- a/ui_framework/components/local_nav/local_tabs.test.js +++ b/ui_framework/src/components/local_nav/local_tabs.test.js @@ -5,6 +5,6 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalTabs } from './local_tabs'; test('renders KuiLocalTabs', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/local_nav/local_title.js b/ui_framework/src/components/local_nav/local_title.js similarity index 89% rename from ui_framework/components/local_nav/local_title.js rename to ui_framework/src/components/local_nav/local_title.js index 1d1eb53406f3..0f40d5c19819 100644 --- a/ui_framework/components/local_nav/local_title.js +++ b/ui_framework/src/components/local_nav/local_title.js @@ -5,7 +5,7 @@ import React from 'react'; export function KuiLocalTitle({ className, children, ...rest }) { const classes = classnames('kuiLocalTitle', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/local_nav/local_title.test.js b/ui_framework/src/components/local_nav/local_title.test.js similarity index 75% rename from ui_framework/components/local_nav/local_title.test.js rename to ui_framework/src/components/local_nav/local_title.test.js index f393653afd3a..17d3877f4cad 100644 --- a/ui_framework/components/local_nav/local_title.test.js +++ b/ui_framework/src/components/local_nav/local_title.test.js @@ -5,6 +5,6 @@ import { requiredProps } from '../../test/required_props'; import { KuiLocalTitle } from './local_title'; test('renders KuiLocalTitle', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/menu/__snapshots__/menu.test.js.snap b/ui_framework/src/components/menu/__snapshots__/menu.test.js.snap similarity index 100% rename from ui_framework/components/menu/__snapshots__/menu.test.js.snap rename to ui_framework/src/components/menu/__snapshots__/menu.test.js.snap diff --git a/ui_framework/components/menu/__snapshots__/menu_item.test.js.snap b/ui_framework/src/components/menu/__snapshots__/menu_item.test.js.snap similarity index 100% rename from ui_framework/components/menu/__snapshots__/menu_item.test.js.snap rename to ui_framework/src/components/menu/__snapshots__/menu_item.test.js.snap diff --git a/ui_framework/components/menu/_index.scss b/ui_framework/src/components/menu/_index.scss similarity index 100% rename from ui_framework/components/menu/_index.scss rename to ui_framework/src/components/menu/_index.scss diff --git a/ui_framework/components/menu/_menu.scss b/ui_framework/src/components/menu/_menu.scss similarity index 100% rename from ui_framework/components/menu/_menu.scss rename to ui_framework/src/components/menu/_menu.scss diff --git a/ui_framework/components/menu/index.js b/ui_framework/src/components/menu/index.js similarity index 100% rename from ui_framework/components/menu/index.js rename to ui_framework/src/components/menu/index.js diff --git a/ui_framework/components/menu/menu.js b/ui_framework/src/components/menu/menu.js similarity index 100% rename from ui_framework/components/menu/menu.js rename to ui_framework/src/components/menu/menu.js diff --git a/ui_framework/components/menu/menu.test.js b/ui_framework/src/components/menu/menu.test.js similarity index 84% rename from ui_framework/components/menu/menu.test.js rename to ui_framework/src/components/menu/menu.test.js index 170003121cdd..265703fed390 100644 --- a/ui_framework/components/menu/menu.test.js +++ b/ui_framework/src/components/menu/menu.test.js @@ -7,7 +7,7 @@ import { } from './menu'; test('renders KuiMenu', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/menu/menu_item.js b/ui_framework/src/components/menu/menu_item.js similarity index 100% rename from ui_framework/components/menu/menu_item.js rename to ui_framework/src/components/menu/menu_item.js diff --git a/ui_framework/components/menu/menu_item.test.js b/ui_framework/src/components/menu/menu_item.test.js similarity index 76% rename from ui_framework/components/menu/menu_item.test.js rename to ui_framework/src/components/menu/menu_item.test.js index 7ba271f5e057..1b08117b9c2b 100644 --- a/ui_framework/components/menu/menu_item.test.js +++ b/ui_framework/src/components/menu/menu_item.test.js @@ -7,6 +7,6 @@ import { } from './menu_item'; test('renders KuiMenuItem', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/menu_button/_index.scss b/ui_framework/src/components/menu_button/_index.scss similarity index 100% rename from ui_framework/components/menu_button/_index.scss rename to ui_framework/src/components/menu_button/_index.scss diff --git a/ui_framework/components/menu_button/_menu_button.scss b/ui_framework/src/components/menu_button/_menu_button.scss similarity index 100% rename from ui_framework/components/menu_button/_menu_button.scss rename to ui_framework/src/components/menu_button/_menu_button.scss diff --git a/ui_framework/components/menu_button/_menu_button_group.scss b/ui_framework/src/components/menu_button/_menu_button_group.scss similarity index 100% rename from ui_framework/components/menu_button/_menu_button_group.scss rename to ui_framework/src/components/menu_button/_menu_button_group.scss diff --git a/ui_framework/components/micro_button/_index.scss b/ui_framework/src/components/micro_button/_index.scss similarity index 100% rename from ui_framework/components/micro_button/_index.scss rename to ui_framework/src/components/micro_button/_index.scss diff --git a/ui_framework/components/micro_button/_micro_button.scss b/ui_framework/src/components/micro_button/_micro_button.scss similarity index 100% rename from ui_framework/components/micro_button/_micro_button.scss rename to ui_framework/src/components/micro_button/_micro_button.scss diff --git a/ui_framework/components/micro_button/_micro_button_group.scss b/ui_framework/src/components/micro_button/_micro_button_group.scss similarity index 100% rename from ui_framework/components/micro_button/_micro_button_group.scss rename to ui_framework/src/components/micro_button/_micro_button_group.scss diff --git a/ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap b/ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/confirm_modal.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/confirm_modal.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_body.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_body.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_body.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_body_text.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_body_text.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_footer.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_footer.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_header.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_header.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_header.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_header.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_header_title.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_header_title.test.js.snap diff --git a/ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap b/ui_framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap similarity index 100% rename from ui_framework/components/modal/__snapshots__/modal_overlay.test.js.snap rename to ui_framework/src/components/modal/__snapshots__/modal_overlay.test.js.snap diff --git a/ui_framework/components/modal/_index.scss b/ui_framework/src/components/modal/_index.scss similarity index 100% rename from ui_framework/components/modal/_index.scss rename to ui_framework/src/components/modal/_index.scss diff --git a/ui_framework/components/modal/_modal.scss b/ui_framework/src/components/modal/_modal.scss similarity index 100% rename from ui_framework/components/modal/_modal.scss rename to ui_framework/src/components/modal/_modal.scss diff --git a/ui_framework/components/modal/_modal_overlay.scss b/ui_framework/src/components/modal/_modal_overlay.scss similarity index 100% rename from ui_framework/components/modal/_modal_overlay.scss rename to ui_framework/src/components/modal/_modal_overlay.scss diff --git a/ui_framework/components/modal/confirm_modal.js b/ui_framework/src/components/modal/confirm_modal.js similarity index 87% rename from ui_framework/components/modal/confirm_modal.js rename to ui_framework/src/components/modal/confirm_modal.js index 6655f3050a7f..f1a04c6c761d 100644 --- a/ui_framework/components/modal/confirm_modal.js +++ b/ui_framework/src/components/modal/confirm_modal.js @@ -42,10 +42,10 @@ export function KuiConfirmModal({ return ( { title ? @@ -65,17 +65,17 @@ export function KuiConfirmModal({ {cancelButtonText} {confirmButtonText} diff --git a/ui_framework/components/modal/confirm_modal.test.js b/ui_framework/src/components/modal/confirm_modal.test.js similarity index 92% rename from ui_framework/components/modal/confirm_modal.test.js rename to ui_framework/src/components/modal/confirm_modal.test.js index 216074d7ab2b..2c14f1949362 100644 --- a/ui_framework/components/modal/confirm_modal.test.js +++ b/ui_framework/src/components/modal/confirm_modal.test.js @@ -24,7 +24,7 @@ test('renders KuiConfirmModal', () => { onConfirm={onConfirm} cancelButtonText="Cancel Button Text" confirmButtonText="Confirm Button Text" - { ...requiredProps } + {...requiredProps} />); expect(component).toMatchSnapshot(); }); @@ -37,7 +37,7 @@ test('onConfirm', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - { ...requiredProps } + {...requiredProps} />); component.find('[data-test-subj="confirmModalConfirmButton"]').simulate('click'); sinon.assert.calledOnce(onConfirm); @@ -53,7 +53,7 @@ describe('onCancel', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - { ...requiredProps } + {...requiredProps} />); component.find('[data-test-subj="confirmModalCancelButton"]').simulate('click'); sinon.assert.notCalled(onConfirm); @@ -68,7 +68,7 @@ describe('onCancel', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - { ...requiredProps } + {...requiredProps} />); component.simulate('keydown', { keyCode: 27 }); sinon.assert.notCalled(onConfirm); @@ -85,8 +85,8 @@ describe('defaultFocusedButton', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - defaultFocusedButton={ CANCEL_BUTTON } - { ...requiredProps } + defaultFocusedButton={CANCEL_BUTTON} + {...requiredProps} />); const button = component.find('[data-test-subj="confirmModalCancelButton"]').getDOMNode(); expect(document.activeElement).toEqual(button); @@ -100,8 +100,8 @@ describe('defaultFocusedButton', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - defaultFocusedButton={ CONFIRM_BUTTON } - { ...requiredProps } + defaultFocusedButton={CONFIRM_BUTTON} + {...requiredProps} />); const button = component.find('[data-test-subj="confirmModalConfirmButton"]').getDOMNode(); expect(document.activeElement).toEqual(button); @@ -115,7 +115,7 @@ describe('defaultFocusedButton', () => { onConfirm={onConfirm} cancelButtonText="Cancel" confirmButtonText="Confirm" - { ...requiredProps } + {...requiredProps} />); const button = component.find('[data-test-subj="confirmModalConfirmButton"]').getDOMNode(); expect(document.activeElement).toEqual(button); diff --git a/ui_framework/components/modal/index.js b/ui_framework/src/components/modal/index.js similarity index 70% rename from ui_framework/components/modal/index.js rename to ui_framework/src/components/modal/index.js index e1601d386ba3..2224887434d0 100644 --- a/ui_framework/components/modal/index.js +++ b/ui_framework/src/components/modal/index.js @@ -1,4 +1,8 @@ -export { KuiConfirmModal } from './confirm_modal'; +export { + KuiConfirmModal, + CONFIRM_BUTTON as KUI_MODAL_CONFIRM_BUTTON, + CANCEL_BUTTON as KUI_MODAL_CANCEL_BUTTON, +} from './confirm_modal'; export { KuiModal } from './modal'; export { KuiModalFooter } from './modal_footer'; export { KuiModalHeader } from './modal_header'; diff --git a/ui_framework/components/modal/modal.js b/ui_framework/src/components/modal/modal.js similarity index 88% rename from ui_framework/components/modal/modal.js rename to ui_framework/src/components/modal/modal.js index 8ea7a08b9686..da89951ebae9 100644 --- a/ui_framework/components/modal/modal.js +++ b/ui_framework/src/components/modal/modal.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModal({ className, children, ...rest }) { const classes = classnames('kuiModal', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal.test.js b/ui_framework/src/components/modal/modal.test.js similarity index 77% rename from ui_framework/components/modal/modal.test.js rename to ui_framework/src/components/modal/modal.test.js index 4a393c27a008..948c7da07f99 100644 --- a/ui_framework/components/modal/modal.test.js +++ b/ui_framework/src/components/modal/modal.test.js @@ -7,6 +7,6 @@ import { } from './modal'; test('renders KuiModal', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_body.js b/ui_framework/src/components/modal/modal_body.js similarity index 89% rename from ui_framework/components/modal/modal_body.js rename to ui_framework/src/components/modal/modal_body.js index efd954b834f1..e43d7ab5af18 100644 --- a/ui_framework/components/modal/modal_body.js +++ b/ui_framework/src/components/modal/modal_body.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModalBody({ className, children, ...rest }) { const classes = classnames('kuiModalBody', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal_body.test.js b/ui_framework/src/components/modal/modal_body.test.js similarity index 76% rename from ui_framework/components/modal/modal_body.test.js rename to ui_framework/src/components/modal/modal_body.test.js index b8b4d8e02d80..985b2cdb5a2b 100644 --- a/ui_framework/components/modal/modal_body.test.js +++ b/ui_framework/src/components/modal/modal_body.test.js @@ -7,6 +7,6 @@ import { } from './modal_body'; test('renders KuiModalBody', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_body_text.js b/ui_framework/src/components/modal/modal_body_text.js similarity index 89% rename from ui_framework/components/modal/modal_body_text.js rename to ui_framework/src/components/modal/modal_body_text.js index 197bf7f0a797..55efdc723fa8 100644 --- a/ui_framework/components/modal/modal_body_text.js +++ b/ui_framework/src/components/modal/modal_body_text.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModalBodyText({ className, children, ...rest }) { const classes = classnames('kuiModalBodyText', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal_body_text.test.js b/ui_framework/src/components/modal/modal_body_text.test.js similarity index 75% rename from ui_framework/components/modal/modal_body_text.test.js rename to ui_framework/src/components/modal/modal_body_text.test.js index f71a5f6ed0be..a8d6af9df735 100644 --- a/ui_framework/components/modal/modal_body_text.test.js +++ b/ui_framework/src/components/modal/modal_body_text.test.js @@ -7,6 +7,6 @@ import { } from './modal_body_text'; test('renders KuiModalBodyText', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_footer.js b/ui_framework/src/components/modal/modal_footer.js similarity index 89% rename from ui_framework/components/modal/modal_footer.js rename to ui_framework/src/components/modal/modal_footer.js index a62ba3dccef2..b91240efe570 100644 --- a/ui_framework/components/modal/modal_footer.js +++ b/ui_framework/src/components/modal/modal_footer.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModalFooter({ className, children, ...rest }) { const classes = classnames('kuiModalFooter', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal_footer.test.js b/ui_framework/src/components/modal/modal_footer.test.js similarity index 75% rename from ui_framework/components/modal/modal_footer.test.js rename to ui_framework/src/components/modal/modal_footer.test.js index ab80fa6b1407..9a54e5d8cae5 100644 --- a/ui_framework/components/modal/modal_footer.test.js +++ b/ui_framework/src/components/modal/modal_footer.test.js @@ -7,6 +7,6 @@ import { } from './modal_footer'; test('renders KuiModalFooter', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_header.js b/ui_framework/src/components/modal/modal_header.js similarity index 89% rename from ui_framework/components/modal/modal_header.js rename to ui_framework/src/components/modal/modal_header.js index c6ccc30e2e11..7aa74a1cff9f 100644 --- a/ui_framework/components/modal/modal_header.js +++ b/ui_framework/src/components/modal/modal_header.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModalHeader({ className, children, ...rest }) { const classes = classnames('kuiModalHeader', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal_header.test.js b/ui_framework/src/components/modal/modal_header.test.js similarity index 75% rename from ui_framework/components/modal/modal_header.test.js rename to ui_framework/src/components/modal/modal_header.test.js index 0caaaa07ae89..f3a603bcb256 100644 --- a/ui_framework/components/modal/modal_header.test.js +++ b/ui_framework/src/components/modal/modal_header.test.js @@ -7,6 +7,6 @@ import { } from './modal_header'; test('renders KuiModalHeader', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_header_title.js b/ui_framework/src/components/modal/modal_header_title.js similarity index 89% rename from ui_framework/components/modal/modal_header_title.js rename to ui_framework/src/components/modal/modal_header_title.js index a4a237ad8f1d..5baa3bd0be1e 100644 --- a/ui_framework/components/modal/modal_header_title.js +++ b/ui_framework/src/components/modal/modal_header_title.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; export function KuiModalHeaderTitle({ className, children, ...rest }) { const classes = classnames('kuiModalHeader__title', className); return ( -
+
{ children }
); diff --git a/ui_framework/components/modal/modal_header_title.test.js b/ui_framework/src/components/modal/modal_header_title.test.js similarity index 74% rename from ui_framework/components/modal/modal_header_title.test.js rename to ui_framework/src/components/modal/modal_header_title.test.js index 35fbbca89c95..7f0632ad5b60 100644 --- a/ui_framework/components/modal/modal_header_title.test.js +++ b/ui_framework/src/components/modal/modal_header_title.test.js @@ -7,6 +7,6 @@ import { } from './modal_header_title'; test('renders KuiModalHeaderTitle', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/modal/modal_overlay.js b/ui_framework/src/components/modal/modal_overlay.js similarity index 87% rename from ui_framework/components/modal/modal_overlay.js rename to ui_framework/src/components/modal/modal_overlay.js index 34334e1a7507..4467bdee3667 100644 --- a/ui_framework/components/modal/modal_overlay.js +++ b/ui_framework/src/components/modal/modal_overlay.js @@ -6,8 +6,8 @@ export function KuiModalOverlay({ className, ...rest }) { const classes = classnames('kuiModalOverlay', className); return (
); } diff --git a/ui_framework/components/modal/modal_overlay.test.js b/ui_framework/src/components/modal/modal_overlay.test.js similarity index 75% rename from ui_framework/components/modal/modal_overlay.test.js rename to ui_framework/src/components/modal/modal_overlay.test.js index 94f5015de662..0600b5a45187 100644 --- a/ui_framework/components/modal/modal_overlay.test.js +++ b/ui_framework/src/components/modal/modal_overlay.test.js @@ -7,6 +7,6 @@ import { } from './modal_overlay'; test('renders KuiModalOverlay', () => { - const component = children; + const component = children; expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/notice/_index.scss b/ui_framework/src/components/notice/_index.scss similarity index 100% rename from ui_framework/components/notice/_index.scss rename to ui_framework/src/components/notice/_index.scss diff --git a/ui_framework/components/notice/_notice.scss b/ui_framework/src/components/notice/_notice.scss similarity index 100% rename from ui_framework/components/notice/_notice.scss rename to ui_framework/src/components/notice/_notice.scss diff --git a/ui_framework/components/pager/__snapshots__/pager.test.js.snap b/ui_framework/src/components/pager/__snapshots__/pager.test.js.snap similarity index 100% rename from ui_framework/components/pager/__snapshots__/pager.test.js.snap rename to ui_framework/src/components/pager/__snapshots__/pager.test.js.snap diff --git a/ui_framework/components/pager/__snapshots__/pager_button_group.test.js.snap b/ui_framework/src/components/pager/__snapshots__/pager_button_group.test.js.snap similarity index 100% rename from ui_framework/components/pager/__snapshots__/pager_button_group.test.js.snap rename to ui_framework/src/components/pager/__snapshots__/pager_button_group.test.js.snap diff --git a/ui_framework/components/pager/_index.scss b/ui_framework/src/components/pager/_index.scss similarity index 100% rename from ui_framework/components/pager/_index.scss rename to ui_framework/src/components/pager/_index.scss diff --git a/ui_framework/components/pager/_pager.scss b/ui_framework/src/components/pager/_pager.scss similarity index 100% rename from ui_framework/components/pager/_pager.scss rename to ui_framework/src/components/pager/_pager.scss diff --git a/ui_framework/components/pager/index.js b/ui_framework/src/components/pager/index.js similarity index 100% rename from ui_framework/components/pager/index.js rename to ui_framework/src/components/pager/index.js diff --git a/ui_framework/components/pager/pager.js b/ui_framework/src/components/pager/pager.js similarity index 96% rename from ui_framework/components/pager/pager.js rename to ui_framework/src/components/pager/pager.js index b96d399659df..55d6ab8f39f6 100644 --- a/ui_framework/components/pager/pager.js +++ b/ui_framework/src/components/pager/pager.js @@ -16,7 +16,7 @@ export function KuiPager({ }) { const classes = classNames('kuiPager', className); return ( -
+
{startNumber}–{endNumber} of {totalItems}
{ (startNumber === 1 && endNumber === totalItems) diff --git a/ui_framework/components/pager/pager.test.js b/ui_framework/src/components/pager/pager.test.js similarity index 99% rename from ui_framework/components/pager/pager.test.js rename to ui_framework/src/components/pager/pager.test.js index f588e709cc9c..ab05d73e92d7 100644 --- a/ui_framework/components/pager/pager.test.js +++ b/ui_framework/src/components/pager/pager.test.js @@ -24,7 +24,7 @@ test('renders KuiPager', () => { startNumber={1} endNumber={10} totalItems={20} - { ...requiredProps } + {...requiredProps} />); expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/pager/pager_button_group.js b/ui_framework/src/components/pager/pager_button_group.js similarity index 93% rename from ui_framework/components/pager/pager_button_group.js rename to ui_framework/src/components/pager/pager_button_group.js index daaaada47038..6c105e311409 100644 --- a/ui_framework/components/pager/pager_button_group.js +++ b/ui_framework/src/components/pager/pager_button_group.js @@ -4,7 +4,7 @@ import { KuiButton, KuiButtonIcon, KuiButtonGroup } from '../button'; export function KuiPagerButtonGroup({ className, onPrevious, onNext, hasNext, hasPrevious, ...rest }) { return ( - + { onPrevious={onPrevious} hasNext={true} hasPrevious={true} - { ...requiredProps } + {...requiredProps} />); expect(render(component)).toMatchSnapshot(); }); diff --git a/ui_framework/components/panel/_index.scss b/ui_framework/src/components/panel/_index.scss similarity index 100% rename from ui_framework/components/panel/_index.scss rename to ui_framework/src/components/panel/_index.scss diff --git a/ui_framework/components/panel/_panel.scss b/ui_framework/src/components/panel/_panel.scss similarity index 100% rename from ui_framework/components/panel/_panel.scss rename to ui_framework/src/components/panel/_panel.scss diff --git a/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap b/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap new file mode 100644 index 000000000000..83e3145e6bb9 --- /dev/null +++ b/ui_framework/src/components/popover/__snapshots__/popover.test.js.snap @@ -0,0 +1,82 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`KuiPopover anchorPosition defaults to center 1`] = ` +
+
+`; + +exports[`KuiPopover is rendered 1`] = ` +
+