[UnifiedFieldList] Migrate field list components from Lens to Unified…

…FieldList (#142758) * [UnifiedFieldList] Extract FieldsAccordion component from Lens * [UnifiedFieldList] Extract FieldList component from Lens * [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs' * [UnifiedFieldList] Rename component * [UnifiedFieldList] Start extracting logic for fetching fields existence info * [UnifiedFieldList] Start extracting logic for fetching fields existence info * [UnifiedFieldList] Fix special and runtime fields * [UnifiedFieldList] Start extracting logic for fetching fields existence info * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * [UnifiedFieldList] Make API stricter * [UnifiedFieldList] Make sure that key is specified for items * [UnifiedFieldList] Fetch data for all active data views * [UnifiedFieldList] Refactor some other occurances * [UnifiedFieldList] Update more tests * [UnifiedFieldList] Fix some checks * [UnifiedFieldList] Some progress on updating tests * [UnifiedFieldList] Update more tests * [UnifiedFieldList] Skip redundant request's results * [UnifiedFieldList] Update more tests * [UnifiedFieldList] Improve tests * [UnifiedFieldList] Improve tests * [UnifiedFieldList] Improve tests * [UnifiedFieldList] Move grouping into a customizable hook * [UnifiedFieldList] Fix after the merge * [UnifiedFieldList] Fix checks * Revert "[UnifiedFieldList] Fix after the merge" This reverts commit 500db7e. * [UnifiedFieldList] Handle merge better * [UnifiedFieldList] Update the naming * [UnifiedFieldList] Support Selected fields * [UnifiedFieldList] Update tests * [UnifiedFieldList] Fix grouping * [UnifiedFieldList] Update more tests * [UnifiedFieldList] Fix refetch after adding a field * [UnifiedFieldList] Load es query builder in async way * [UnifiedFieldList] Fix a bug in case of renaming a field * [UnifiedFieldList] Small refactoring * [UnifiedFieldList] Refactor text based view * [UnifiedFieldList] Better types support * [UnifiedFieldList] Simplify props * [UnifiedFieldList] Fix types * [UnifiedFieldList] Async loading for FieldListGrouped code * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add more tests * [UnifiedFieldList] Add docs * [UnifiedFieldList] Clean up * [UnifiedFieldList] Fix onNoData callback * [UnifiedFieldList] Address PR comments * [UnifiedFieldList] Address PR comments * [UnifiedFieldList] Support a custom data-test-subj * [UnifiedFieldList] Fix concurrency handling logic * [UnifiedFieldList] Remove a generic tooltip message. Lens and Discover will have their own tooltips. Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]>
elastic · Nov 2, 2022 · ca1c58d · ca1c58d
1 parent 096d61c
commit ca1c58d
Show file tree

Hide file tree

Showing 69 changed files with 3,258 additions and 2,069 deletions.
diff --git a/src/plugins/unified_field_list/README.md b/src/plugins/unified_field_list/README.md
@@ -6,14 +6,16 @@ This Kibana plugin contains components and services for field list UI (as in fie
 
 ## Components
 
+* `<FieldListGrouped .../>` - renders a fields list which is split in sections (Selected, Special, Available, Empty, Meta fields). It accepts already grouped fields, please use `useGroupedFields` hook for it. 
+
 * `<FieldStats .../>` - loads and renders stats (Top values, Distribution) for a data view field.
 
 * `<FieldVisualizeButton .../>` - renders a button to open this field in Lens.
 
 * `<FieldPopover .../>` - a popover container component for a field.
 
 * `<FieldPopoverHeader .../>` - this header component included a field name and common actions.
-* 
+
 * `<FieldPopoverVisualize .../>` - renders Visualize action in the popover footer.
 
 These components can be combined and customized as the following:
@@ -59,6 +61,47 @@ These components can be combined and customized as the following:
 
 * `loadFieldExisting(...)` - returns the loaded existing fields (can also work with Ad-hoc data views)
 
+## Hooks
+
+* `useExistingFieldsFetcher(...)` - this hook is responsible for fetching fields existence info for specified data views. It can be used higher in components tree than `useExistingFieldsReader` hook.
+
+* `useExistingFieldsReader(...)` - you can call this hook to read fields existence info which was fetched by `useExistingFieldsFetcher` hook. Using multiple "reader" hooks from different children components is supported. So you would need only one "fetcher" and as many "reader" hooks as necessary.
+
+* `useGroupedFields(...)` - this hook groups fields list into sections of Selected, Special, Available, Empty, Meta fields.
+
+An example of using hooks together with `<FieldListGrouped .../>`:
+
+```
+const { refetchFieldsExistenceInfo, isProcessing } = useExistingFieldsFetcher({
+  dataViews,
+  query,
+  filters,
+  fromDate,
+  toDate,
+  ...
+});
+const fieldsExistenceReader = useExistingFieldsReader()
+const { fieldGroups } = useGroupedFields({
+  dataViewId: currentDataViewId,
+  allFields,
+  fieldsExistenceReader,
+  ...
+});
+
+// and now we can render a field list
+<FieldListGrouped
+  fieldGroups={fieldGroups}
+  fieldsExistenceStatus={fieldsExistenceReader.getFieldsExistenceStatus(currentDataViewId)}
+  fieldsExistInIndex={!!allFields.length}
+  renderFieldItem={renderFieldItem}
+  screenReaderDescriptionForSearchInputId={fieldSearchDescriptionId}
+/>
+
+// or check whether a field contains data
+const { hasFieldData } = useExistingFieldsReader();
+const hasData = hasFieldData(currentDataViewId, fieldName) // return a boolean
+```
+
 ## Server APIs
 
 * `/api/unified_field_list/field_stats` - returns the loaded field stats (except for Ad-hoc data views)

diff --git a/...ic/datasources/form_based/field_list.scss → ...onents/field_list/field_list_grouped.scss b/...ic/datasources/form_based/field_list.scss → ...onents/field_list/field_list_grouped.scss
@@ -2,7 +2,7 @@
  * 1. Don't cut off the shadow of the field items
  */
 
-.lnsIndexPatternFieldList {
+.unifiedFieldList__fieldListGrouped {
   @include euiOverflowShadow;
   @include euiScrollBar;
   margin-left: -$euiSize; /* 1 */
@@ -11,7 +11,7 @@
   overflow: auto;
 }
 
-.lnsIndexPatternFieldList__accordionContainer {
+.unifiedFieldList__fieldListGrouped__container {
   padding-top: $euiSizeS;
   position: absolute;
   top: 0;