github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 03:01:21 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/packages/shared-ux/code_editor/impl
History
Yuliia Naumenko 8fb5a651a0
Extracted DiscoverGrid to a package named @kbn/unified-data-table as UnifiedDataTable component (#163211) 
## Summary

Current PR includes the next set of changes:

1. Moved `DiscoverGrid` component to a package `@kbn/unified-data-table`
and added `@elastic/kibana-data-discovery` as code owners.
2. Changed `@kbn/unified-data-table` package naming for data grid
related components and methods to correspond `UnifiedDataTable` instead
of `Discover`.

3. Moved hooks `useColumns` and `useRowHeightsOptions` to a package as
its logic belongs to `UnifiedDataTable`.
4. Renamed `DiscoverGridContext` to `UnifiedDataTableContext`.
5. Extended `UnifiedDataTable` interface and functionality with the next
customization options:
- `renderDocumentView?: (displayedRows:
DataTableRecord[],displayedColumns: string[]) => JSX.Element |
undefined;` - callback to render DocumentView when the document is
expanded
- `configRowHeight?: number;` - optional value for providing
configuration setting for UnifiedDataTable rows height
- `showMultiFields?: boolean;` - optional value for providing
configuration setting for enabling to display the complex fields in the
table. Default is true.
- `maxDocFieldsDisplayed?: number;` - optional value for providing
configuration setting for maximum number of document fields to display
in the table. Default is 50.
- `externalControlColumns?: EuiDataGridControlColumn[];` - optional
value for providing EuiDataGridControlColumn list of the additional
leading control columns. UnifiedDataTable includes two control columns:
Open Details and Select.
<img width="522" alt="Screenshot 2023-08-22 at 2 26 57 PM"
src="d796b9c8-2fef-4bcc-a3c9-9f5cc6349ab9">

- `externalAdditionalControls?: React.ReactNode;` - optional value for
providing the additional controls available in the UnifiedDataTable
toolbar to manage it's records or state. UnifiedDataTable includes
Columns, Sorting and Bulk Actions.
<img width="673" alt="Screenshot 2023-08-22 at 2 40 28 PM"
src="f7ac0c87-5310-49dd-9084-1ce01ca0f366">

- `rowsPerPageOptions?: number[];` - optional list of number type values
to set custom UnifiedDataTable paging options to display the records per
page.
- `renderCustomGridBody?: (args: EuiDataGridCustomBodyProps) =>
React.ReactNode;` - An optional function called to completely customize
and control the rendering of EuiDataGrid's body and cell placement.
<img width="1658" alt="Screenshot 2023-08-22 at 2 50 27 PM"
src="14adc18d-73af-40f5-9859-b3c708e265b1">

- `trailingControlColumns?: EuiDataGridControlColumn[];` - optional list
of the `EuiDataGridControlColumn` type for setting trailing control
columns standard for `EuiDataGrid`.
- `visibleCellActions?: number;` - optional value for a custom number of
the visible cell actions in the table
<img width="497" alt="Screenshot 2023-08-22 at 2 45 49 PM"
src="57ef3ad9-7401-46bb-9b38-cc8cca2e6a24">

- `externalCustomRenderers?: Record<string,(props:
EuiDataGridCellValueElementProps) => React.ReactNode>;` - an optional
settings for a specified fields rendering like links. Applied only for
the listed fields rendering:
<img width="1121" alt="Screenshot 2023-08-22 at 2 51 07 PM"
src="77501eae-3046-4a2c-90e1-2db487c21e2c">

- `consumer` - optional string value for the name of the
`UnifiedDataTable` consumer component or application.
6. Extended `UnifiedDataGrid` services with the two additional: 
    `storage: Storage;`
    `data: DataPublicPluginStart; `
replaced `core: CoreStart;` with `theme: ThemeServiceStart;`, because
`core` is used only to get `theme`
7. Replaced `DocumentView` property with `renderDocumentView?:
(displayedRows: DataTableRecord[],displayedColumns: string[]) =>
JSX.Element | undefined;` callback function, which allows not to use
`DiscoverGridFlyout` definition for the documents rendering.
```
    /**
   * Document detail view component
   */
  DocumentView?: typeof DiscoverGridFlyout;
```
8. Removed the next properties from the data table interface, because it
was used to render DiscoverGridFlyout:
```
   /**
   * Filters applied by saved search embeddable
   */
  filters?: Filter[];
  /**
   * Query applied by KQL bar or text based editor
   */
  query?: Query | AggregateQuery;
  /**
   * Saved search id used for links to single doc and surrounding docs in the flyout
   */
  savedSearchId?: string;
```
9. Added usage examples and interface description to README file.
10. Changed grid styles naming from `.dscDiscoverGrid*` to
`.udtDataTable*`
11. Migrated discover plugin to use `UnifiedDataTable` instead of
`DiscoverGrid`

Extra changes were needed to avoid the circular dependancies:
- moved `DocViewFilterFn` and `FieldMapping` from discover plugin to
`packages/kbn-discover-utils/src/types.ts`
- added own `export type SortOrder = [string, string];` to avoid deps
for saved-search plugin

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-09-01 23:02:53 -07:00
..
__snapshots__ Extracted DiscoverGrid to a package named @kbn/unified-data-table as UnifiedDataTable component (#163211) 2023-09-01 23:02:53 -07:00
languages [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.stories.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.test.helpers.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.test.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.tsx Extracted DiscoverGrid to a package named @kbn/unified-data-table as UnifiedDataTable component (#163211) 2023-09-01 23:02:53 -07:00
editor.styles.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
index.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
jest.config.js [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
kibana.jsonc fix codeowners 2023-02-01 17:55:44 -06:00
package.json [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
placeholder_widget.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
README.mdx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
register_languages.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
remeasure_fonts.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
tsconfig.json [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00

README.mdx 

---
id: sharedUX/Components/CodeEditor
slug: /shared-ux/components/code-editor
title: Code Editor
description: A code editor to display code and edit code in Kibana.
tags: ['shared-ux', 'component']
date: 2022-12-05
---

## Description

This component is an abstraction of the [Monaco Code Editor](https://microsoft.github.io/monaco-editor/) (and the [React Monaco Editor component](https://github.com/react-monaco-editor/react-monaco-editor)). This component still allows access to the other Monaco features.

## Usage

This editor component allows easy access to:
* [Syntax highlighting (including custom language highlighting)](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
* [Suggestion/autocompletion widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example)
* Function signature widget 
* [Hover widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example)

The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes

## API