[serverless] Advanced Settings - Field Row components

[clintandrewhall]

Caveat: the functional flow logic here is not one I would encourage, specifically, using "drilled" onChange handlers and a composing component-based store. Ideally, we'd use a redux store, or, at the very least a React reducer.

In the interest of time and compatibility, we've opted to use the pattern from the original components in advancedSettings. We plan to revisit the state management and prop-drilling when advancedSettings is refactored with these components.

Summary

This is a PR for new inputs and field row components for Advanced Settings.

This code was extracted from the advancedSettings plugin and refactored/simplified/typed for a modern Kibana. The PR has been divided into several commits for ease of review: components and stories. Tests and documentation will follow in additional commits.

Next steps

• Abstracting the form and its logic, (if not creating a new one outright) for Serverless
• New page in Serverless
• Integration with new settings service - [Advanced settings] Add settings allowlist #164471

Testing

The Storybook build will be the best way to view/test these new components, aside from applying the code to your branch. These are pure additions-- integration will happen in Serverless soon, and likely in Advanced Settings sometime after.

Code coverage stands at 87%. Some components are incredibly difficult to test, but this coverage is pretty good. Run node scripts/jest packages/kbn-management/settings --coverage for details.

-----------------------------------|---------|----------|---------|---------|-------------------
File                               | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------------------------------|---------|----------|---------|---------|-------------------
All files                          |   87.27 |    85.36 |   84.26 |   87.21 |
 components/field_input            |   71.81 |    78.33 |   33.33 |   71.81 |
  code_editor.tsx                  |    9.67 |        0 |       0 |    9.67 | 38-101
  field_input.tsx                  |     100 |      100 |     100 |     100 |
  services.tsx                     |      75 |       50 |      50 |      75 | 32-35,52
 components/field_input/input      |   91.76 |    93.61 |      92 |   91.66 |
  array_input.tsx                  |     100 |      100 |     100 |     100 |
  boolean_input.tsx                |     100 |      100 |     100 |     100 |
  code_editor_input.tsx            |     100 |    91.66 |     100 |     100 | 89
  color_picker_input.tsx           |     100 |      100 |     100 |     100 |
  image_input.tsx                  |   74.07 |    81.81 |   66.66 |   74.07 | 33,36,67-68,80-83
  index.ts                         |     100 |      100 |     100 |     100 |
  number_input.tsx                 |     100 |      100 |     100 |     100 |
  select_input.tsx                 |     100 |      100 |     100 |     100 |
  text_input.tsx                   |     100 |      100 |     100 |     100 |
 components/field_row              |   95.23 |    81.25 |    87.5 |   95.23 |
  field_row.styles.ts              |     100 |       75 |     100 |     100 | 48
  field_row.tsx                    |     100 |       90 |     100 |     100 | 123
  services.tsx                     |   81.81 |       50 |   66.66 |   81.81 | 42,60
 components/field_row/description  |   96.29 |    81.25 |      75 |   96.29 |
  default_value.tsx                |     100 |     87.5 |     100 |     100 | 47
  deprecation.tsx                  |    87.5 |      100 |      50 |    87.5 | 52
  description.tsx                  |     100 |    66.66 |     100 |     100 | 54,66
 components/field_row/input_footer |   96.55 |      100 |      80 |   96.55 |
  change_image_link.tsx            |    90.9 |      100 |      50 |    90.9 | 73
  input_footer.tsx                 |     100 |      100 |     100 |     100 |
  overridden_message.tsx           |     100 |      100 |     100 |     100 |
  reset_link.tsx                   |     100 |      100 |     100 |     100 |
 components/field_row/title        |     100 |       75 |     100 |     100 |
  icon_custom.tsx                  |     100 |      100 |     100 |     100 |
  icon_unsaved.tsx                 |     100 |       70 |     100 |     100 | 48-53
  title.tsx                        |     100 |      100 |     100 |     100 |
 field_definition                  |   69.23 |    66.66 |      80 |   69.23 |
  get_definition.ts                |   69.23 |    66.66 |      80 |   69.23 | 45-57
 field_definition/is               |     100 |      100 |     100 |     100 |
  field_definition.ts              |     100 |      100 |     100 |     100 |
  unsaved_change.ts                |     100 |      100 |     100 |     100 |
 section_registry                  |     100 |      100 |     100 |     100 |
  section_registry.ts              |     100 |      100 |     100 |     100 |
 utilities                         |     100 |      100 |     100 |     100 |
  get_input_value.ts               |     100 |      100 |     100 |     100 |
  has_unsaved_change.ts            |     100 |      100 |     100 |     100 |
  is_unsaved_value.ts              |     100 |      100 |     100 |     100 |
-----------------------------------|---------|----------|---------|---------|-------------------

Test Suites: 18 passed, 18 total
Tests:       145 passed, 145 total

[jbudz]

packages/kbn-storybook

[ElenaStoeva]

Amazing work @clintandrewhall, thanks a lot for making these improvements! Overall, looks great to me.

I only have a question about the storybook for the select component.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 49eb314
• Storybooks Preview

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/management-settings-components-field-input	-	1	+1
@kbn/management-settings-components-field-row	-	2	+2
@kbn/management-settings-utilities	-	30	+30
total			+33

Unknown metric groups

API count

id	before	after	diff
@kbn/management-settings-components-field-input	-	20	+20
@kbn/management-settings-components-field-row	-	11	+11
@kbn/management-settings-field-definition	-	42	+42
@kbn/management-settings-types	-	71	+71
@kbn/management-settings-utilities	-	39	+39
total			+183

ESLint disabled line counts

id	before	after	diff
@kbn/management-settings-components-field-input	-	1	+1
@kbn/management-settings-components-field-row	-	2	+2
total			+3

References to deprecated APIs

id	before	after	diff
@kbn/management-settings-field-definition	-	1	+1

Total ESLint disabled count

id	before	after	diff
@kbn/management-settings-components-field-input	-	1	+1
@kbn/management-settings-components-field-row	-	2	+2
total			+3

History

• 💔 Build #158096 failed 2fe2fa01bbf6d72f9270269f78862cbb30a307fb
• 💔 Build #158026 failed 06940ab75fb21bfc5beb50aa023e7be2fdb548a4
• 💔 Build #157839 failed 4f4572b4d971a6b2705f607b6e7fd71c0de2b440
• 💔 Build #157391 failed 357f90553e30b6d32974e20652f8e1ad59da1f6b
• 💔 Build #157357 failed 23eac5fab3aa88ed8d3aab2f35a4dab862bb8c6f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream