[add data] advanced processor dropdown #7146

BigFunger · 2016-05-05T23:32:48Z

Replaced by #7277
Addresses #7061

Uses the angular-ui-select directive (a wrapper for selectize.js) to replace the processors dropdown on the pipeline-setup screen.

BigFunger · 2016-05-17T15:50:24Z

@alt74 said:

can you change the text color for “Select a processor…” or is that going to be the correct dark color (almost black) when you merge your PR into the ../kibana/feature-ingest branch?

BigFunger · 2016-05-17T15:51:27Z

@alt74 said:

only thing that would add some whipped cream to this is if we make the drop down darker when selected. text would be white.
https://projects.invisionapp.com/d/main#/console/4925467/149983785/preview
so drop down goes from light blue (regular state) to darker blue when selected. otherwise I really dig the description under each processor option. I hope text wont be as long as in the 3rd example.

alt74 · 2016-05-18T19:48:32Z

@BigFunger cool! 👍

alt74 · 2016-05-18T19:50:02Z

to make it official here LGTM @BigFunger
:)

Bargs · 2016-05-23T16:21:13Z

A couple of quirks I noticed in Chrome and Safari:

Safari

Clicking the select box to close the drop down adds a processor instead of just closing the box.

Chrome

Clicking the select box when the dropdown is open does nothing. I'd expect it to close the dropdown. Update Now that I've realized the box takes text entry this makes a bit more sense. See thoughts on styling below.

In both browsers, there's a blinking cursor in the select box when the dropdown is open. This isn't a functional issue but looks a little odd. Update I just now realized the cursor was present because you could actually type in the box to filter the results. I only realized this after reading the code and seeing references to $select.search filtering the options. I wonder if we could tweak the design a little to make it more obvious this box takes text entry. Thoughts @alt74?

Bargs · 2016-05-23T19:01:46Z

...blic/settings/sections/indices/add_data_steps/pipeline_setup/processors/append/view_model.js

+      'append',
+      'Append',
+      `Appends one or more values to an existing array if the field already exists
+and it is an array. Converts a scalar to an array and appends one or more


Should these be indented at the same level as the first line in the string?

Because I am using the backticks, if I align the additional lines of text with the first, all of the whitespace gets inserted into the string. What is the preferred method/format of setting multi-line string values?

Ah right. I don't think we have guidelines for backticks. This seems fine to me.

alt74 · 2016-05-24T15:48:54Z

@Bargs @BigFunger the drop down menu text should not be selectable. it's just a basic drop down. So no cursor in the button please :)
bootstrap example: http://getbootstrap.com/components/#btn-dropdowns

alt74 · 2016-05-24T16:41:35Z

correcting my earlier comments. since search is built right into the drop down menu button the color should change to white indicating to the user that is a editable search field. thanks @BigFunger for fixing it 👍

## PR change summary `v87.2.0`⏩`v88.1.0` ⚠️ The biggest thing to QA in this PR is several **breaking changes** to `EuiDescriptionList`. ### Description list `columnWidths` prop This PR introduces a new `columnWidths` prop and removes several Kibana instances of custom CSS overrides to title/description column widths. The primary motivation behind this is not just to reduce custom CSS, but also because v88.0.0 introduced an underlying CSS change of `column` description lists to using [`display: grid` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). The new prop allows us to support existing description list custom widths while not requiring Kibana developers to understand or write grid CSS (except for 1 or two scenarios around `max-width`). ⚠️ **No user-facing UI around column widths should have regressed as a result of these changes. If they have, please let us know in this PR.** ### Description list gutter size changes The prop `gutterSize` has been renamed to `rowGutterSize` and the default size is now `s` instead of `m`. The change to `s` from `m` means there is an **expected** smaller gap between list items (see below screenshots): **Current `EuiDescriptionList` with default `rowGutterSize="s"`** <img width="753" alt="" src="https://github.com/elastic/kibana/assets/934879/c17aef28-ed3b-40c4-84c3-396e788b13bb"> **Prior `EuiDescriptionList` with default `gutterSize="m"`** <img width="721" alt="" src="https://github.com/elastic/kibana/assets/934879/84d5f5a2-8fa6-4f99-9dc0-73fd143aa1e1"> If Kibana teams prefer to keep the previous `m` gutter for their instances of `EuiDescriptionList`, you have a couple of options: 1. Let EUI team know in the PR and we can set usage back to what it was before 2. Set `rowGutterSize="m"` yourselves manually --- ## [`88.1.0`](https://github.com/elastic/eui/tree/v88.1.0) - Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` ([#7133](elastic/eui#7133)) - Updated `EuiDescriptionList` with new `columnWidths` prop ([#7146](elastic/eui#7146)) **Bug fixes** - Fixed `EuiDataGrid`'s keyboard shortcuts popover display ([#7146](elastic/eui#7146)) **CSS-in-JS conversions** - Renamed `useEuiFontSize()`'s `measurement` option to `unit` for clarity ([#7133](elastic/eui#7133)) ## [`88.0.0`](https://github.com/elastic/eui/tree/v88.0.0) - Updated `EuiDescriptionList` with a new `columnGutterSize` prop ([#7062](elastic/eui#7062)) **Deprecations** - Deprecated `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7122](elastic/eui#7122)) - Deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead ([#7122](elastic/eui#7122)) - Deprecated `EuiColorStops`. We recommend copying the component to your application if necessary ([#7122](elastic/eui#7122)) - Deprecated `EuiNotificationEvent`. We recommend copying the component to your application if necessary ([#7122](elastic/eui#7122)) **Breaking changes** - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` ([#7062](elastic/eui#7062)) - `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) ([#7062](elastic/eui#7062)) **Accessibility** - Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements ([#7062](elastic/eui#7062)) **CSS-in-JS conversions** - Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize` and `$euiKeyPadMenuMarginSize` ([#7118](elastic/eui#7118)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

## PR change summary `v87.2.0`⏩`v88.1.0` ⚠️ The biggest thing to QA in this PR is several **breaking changes** to `EuiDescriptionList`. ### Description list `columnWidths` prop This PR introduces a new `columnWidths` prop and removes several Kibana instances of custom CSS overrides to title/description column widths. The primary motivation behind this is not just to reduce custom CSS, but also because v88.0.0 introduced an underlying CSS change of `column` description lists to using [`display: grid` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). The new prop allows us to support existing description list custom widths while not requiring Kibana developers to understand or write grid CSS (except for 1 or two scenarios around `max-width`). ⚠️ **No user-facing UI around column widths should have regressed as a result of these changes. If they have, please let us know in this PR.** ### Description list gutter size changes The prop `gutterSize` has been renamed to `rowGutterSize` and the default size is now `s` instead of `m`. The change to `s` from `m` means there is an **expected** smaller gap between list items (see below screenshots): **Current `EuiDescriptionList` with default `rowGutterSize="s"`** <img width="753" alt="" src="https://github.com/elastic/kibana/assets/934879/c17aef28-ed3b-40c4-84c3-396e788b13bb"> **Prior `EuiDescriptionList` with default `gutterSize="m"`** <img width="721" alt="" src="https://github.com/elastic/kibana/assets/934879/84d5f5a2-8fa6-4f99-9dc0-73fd143aa1e1"> If Kibana teams prefer to keep the previous `m` gutter for their instances of `EuiDescriptionList`, you have a couple of options: 1. Let EUI team know in the PR and we can set usage back to what it was before 2. Set `rowGutterSize="m"` yourselves manually --- ## [`88.1.0`](https://github.com/elastic/eui/tree/v88.1.0) - Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` ([elastic#7133](elastic/eui#7133)) - Updated `EuiDescriptionList` with new `columnWidths` prop ([elastic#7146](elastic/eui#7146)) **Bug fixes** - Fixed `EuiDataGrid`'s keyboard shortcuts popover display ([elastic#7146](elastic/eui#7146)) **CSS-in-JS conversions** - Renamed `useEuiFontSize()`'s `measurement` option to `unit` for clarity ([elastic#7133](elastic/eui#7133)) ## [`88.0.0`](https://github.com/elastic/eui/tree/v88.0.0) - Updated `EuiDescriptionList` with a new `columnGutterSize` prop ([elastic#7062](elastic/eui#7062)) **Deprecations** - Deprecated `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiColorStops`. We recommend copying the component to your application if necessary ([elastic#7122](elastic/eui#7122)) - Deprecated `EuiNotificationEvent`. We recommend copying the component to your application if necessary ([elastic#7122](elastic/eui#7122)) **Breaking changes** - Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize` ([elastic#7062](elastic/eui#7062)) - `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of `s` (was previously `m`) ([elastic#7062](elastic/eui#7062)) **Accessibility** - Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to meet WCAG color contrast requirements ([elastic#7062](elastic/eui#7062)) **CSS-in-JS conversions** - Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize` and `$euiKeyPadMenuMarginSize` ([elastic#7118](elastic/eui#7118)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

[add data] prototype for advanced processor dropdown

2627f28

BigFunger added review discuss Feature:Add Data Add Data and sample data feature on Home labels May 5, 2016

BigFunger assigned alt74 May 5, 2016

BigFunger assigned BigFunger and unassigned alt74 May 17, 2016

Merge branch 'feature/ingest' into ingest-ui-selectize

083cd85

BigFunger force-pushed the ingest-ui-selectize branch from aba3378 to cf14815 Compare May 18, 2016 19:06

[add data] changes after merging with feature/ingest. Cleaned up less

f105e7f

BigFunger force-pushed the ingest-ui-selectize branch from cf14815 to f105e7f Compare May 18, 2016 19:19

BigFunger changed the title ~~[add data] prototype for advanced processor dropdown~~ [add data] advanced processor dropdown May 18, 2016

BigFunger assigned alt74 and unassigned BigFunger May 18, 2016

alt74 assigned BigFunger and unassigned alt74 May 18, 2016

BigFunger assigned Bargs and unassigned BigFunger May 18, 2016

Bargs reviewed May 23, 2016
View reviewed changes

Bargs assigned BigFunger and unassigned Bargs May 23, 2016

BigFunger mentioned this pull request May 24, 2016

Ingest pipeline feature processor dropdown #7277

Merged

BigFunger closed this May 31, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[add data] advanced processor dropdown #7146

[add data] advanced processor dropdown #7146

BigFunger commented May 5, 2016 •

edited

Loading

BigFunger commented May 17, 2016

BigFunger commented May 17, 2016 •

edited by alt74

Loading

alt74 commented May 18, 2016

alt74 commented May 18, 2016

Bargs commented May 23, 2016 •

edited

Loading

Bargs May 23, 2016

BigFunger May 24, 2016

Bargs May 24, 2016

alt74 commented May 24, 2016 •

edited

Loading

alt74 commented May 24, 2016 •

edited

Loading

[add data] advanced processor dropdown #7146

[add data] advanced processor dropdown #7146

Conversation

BigFunger commented May 5, 2016 • edited Loading

BigFunger commented May 17, 2016

BigFunger commented May 17, 2016 • edited by alt74 Loading

alt74 commented May 18, 2016

alt74 commented May 18, 2016

Bargs commented May 23, 2016 • edited Loading

Bargs May 23, 2016

Choose a reason for hiding this comment

BigFunger May 24, 2016

Choose a reason for hiding this comment

Bargs May 24, 2016

Choose a reason for hiding this comment

alt74 commented May 24, 2016 • edited Loading

alt74 commented May 24, 2016 • edited Loading

BigFunger commented May 5, 2016 •

edited

Loading

BigFunger commented May 17, 2016 •

edited by alt74

Loading

Bargs commented May 23, 2016 •

edited

Loading

alt74 commented May 24, 2016 •

edited

Loading

alt74 commented May 24, 2016 •

edited

Loading