diff --git a/src/platform/plugins/shared/field_formats/public/index.scss b/src/platform/plugins/shared/field_formats/public/index.scss deleted file mode 100644 index d3dffb385feeb..0000000000000 --- a/src/platform/plugins/shared/field_formats/public/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './lib/converters/index'; -@import './lib/content_types/index'; diff --git a/src/platform/plugins/shared/field_formats/public/lib/content_types/_html_content_type.scss b/src/platform/plugins/shared/field_formats/public/lib/content_types/_html_content_type.scss deleted file mode 100644 index 244be673b4a4d..0000000000000 --- a/src/platform/plugins/shared/field_formats/public/lib/content_types/_html_content_type.scss +++ /dev/null @@ -1,3 +0,0 @@ -.ffArray__highlight { - color: $euiColorMediumShade; -} diff --git a/src/platform/plugins/shared/field_formats/public/lib/content_types/_index.scss b/src/platform/plugins/shared/field_formats/public/lib/content_types/_index.scss deleted file mode 100644 index e2fb515dd800f..0000000000000 --- a/src/platform/plugins/shared/field_formats/public/lib/content_types/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './html_content_type'; diff --git a/src/platform/plugins/shared/field_formats/public/lib/converters/_index.scss b/src/platform/plugins/shared/field_formats/public/lib/converters/_index.scss deleted file mode 100644 index cc13062a3ef8b..0000000000000 --- a/src/platform/plugins/shared/field_formats/public/lib/converters/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './string'; diff --git a/src/platform/plugins/shared/field_formats/public/lib/converters/_string.scss b/src/platform/plugins/shared/field_formats/public/lib/converters/_string.scss deleted file mode 100644 index dd27bded25083..0000000000000 --- a/src/platform/plugins/shared/field_formats/public/lib/converters/_string.scss +++ /dev/null @@ -1,7 +0,0 @@ -.ffString__emptyValue { - color: $euiColorDarkShade; -} - -.lnsTableCell--colored .ffString__emptyValue { - color: unset; -} diff --git a/src/platform/plugins/shared/field_formats/public/plugin.ts b/src/platform/plugins/shared/field_formats/public/plugin.ts index 69c954ae73dc9..b31889556aca1 100755 --- a/src/platform/plugins/shared/field_formats/public/plugin.ts +++ b/src/platform/plugins/shared/field_formats/public/plugin.ts @@ -11,7 +11,6 @@ import { CoreSetup, Plugin } from '@kbn/core/public'; import { FieldFormatsRegistry, FORMATS_UI_SETTINGS } from '../common'; import { baseFormattersPublic } from './lib'; import { FormatFactory } from '../common/types'; -import './index.scss'; export class FieldFormatsPlugin implements Plugin { private readonly fieldFormatsRegistry: FieldFormatsRegistry = new FieldFormatsRegistry(); diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.scss b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.scss deleted file mode 100644 index 224e84ca50b52..0000000000000 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.scss +++ /dev/null @@ -1,14 +0,0 @@ -.sourceViewer__loading { - display: flex; - flex-direction: row; - justify-content: left; - flex: 1 0 100%; - text-align: center; - height: 100%; - width: 100%; - margin-top: $euiSizeS; -} - -.sourceViewer__loadingSpinner { - margin-right: $euiSizeS; -} diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx index 7ce40f81c0ce8..2924acbc41607 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_source/source.tsx @@ -7,18 +7,18 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './source.scss'; - import React, { useEffect, useState } from 'react'; +import { css } from '@emotion/react'; +import { omit } from 'lodash'; import { FormattedMessage } from '@kbn/i18n-react'; import { monaco } from '@kbn/monaco'; import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui'; +import { euiThemeVars } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; import type { DataView } from '@kbn/data-views-plugin/public'; import type { DataTableRecord } from '@kbn/discover-utils/types'; import { ElasticRequestState } from '@kbn/unified-doc-viewer'; import { isLegacyTableEnabled, SEARCH_FIELDS_FROM_SOURCE } from '@kbn/discover-utils'; -import { omit } from 'lodash'; import { getUnifiedDocViewerServices } from '../../plugin'; import { useEsDocSearch } from '../../hooks'; import { getHeight, DEFAULT_MARGIN_BOTTOM } from './get_height'; @@ -102,8 +102,8 @@ export const DocViewerSource = ({ }, [editor, jsonValue, useDocExplorer, setEditorHeight, decreaseAvailableHeightBy]); const loadingState = ( -
- +
+ @@ -153,3 +153,19 @@ export const DocViewerSource = ({ /> ); }; + +const styles = { + loading: css({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'left', + flex: '1 0 100%', + textAlign: 'center', + height: '100%', + width: '100%', + marginTop: euiThemeVars.euiSizeS, + }), + loadingSpinner: css({ + marginRight: euiThemeVars.euiSizeS, + }), +}; diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx index e834bef5d664e..a504549a36c4d 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/legacy/table.tsx @@ -7,7 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import '../table.scss'; import React, { useCallback, useMemo } from 'react'; import { EuiInMemoryTable } from '@elastic/eui'; import { getFieldIconType } from '@kbn/field-utils/src/utils/get_field_icon_type'; diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.scss b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.scss deleted file mode 100644 index 64e700c73fca5..0000000000000 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.scss +++ /dev/null @@ -1,109 +0,0 @@ -.kbnDocViewer { - .euiTableRowCell { - vertical-align: top; - } -} - -.kbnDocViewer__tableRow { - font-size: $euiFontSizeXS; - font-family: $euiCodeFontFamily; - - // set min-width for each column except actions - .euiTableRowCell:nth-child(n+2) { - min-width: $euiSizeM * 9; - } - - .kbnDocViewer__buttons { - // Show all icons if one is focused, - &:focus-within { - .kbnDocViewer__actionButton { - opacity: 1; - } - } - } - - &:hover { - .kbnDocViewer__actionButton { - opacity: 1; - } - } - - .kbnDocViewer__actionButton { - @include euiBreakpoint('m', 'l', 'xl') { - opacity: 0; - } - - &:focus { - opacity: 1; - } - } -} - -.kbnDocViewer__tableActionsCell, -.kbnDocViewer__tableFieldNameCell { - .euiTableCellContent { - align-items: flex-start; - padding: $euiSizeXS; - } -} - -.kbnDocViewer__tableValueCell { - .euiTableCellContent { - flex-direction: column; - align-items: flex-start; - } -} - -.kbnDocViewer__value { - word-break: break-all; - word-wrap: break-word; - white-space: pre-wrap; - line-height: $euiLineHeight; - color: $euiColorFullShade; - vertical-align: top; - - &--highlighted { - font-weight: $euiFontWeightBold; - } - - .euiDataGridRowCell__popover & { - font-size: $euiFontSizeS; - } -} - -.kbnDocViewer__fieldsGrid { - &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader { - border-top: none; - } - - &.euiDataGrid--headerUnderline .euiDataGridHeader { - border-bottom: $euiBorderThin; - } - - &.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover { - background-color: tintOrShade($euiColorLightShade, 50%, 0); - } - - & [data-gridcell-column-id='name'] .euiDataGridRowCell__content { - padding-top: 0; - padding-bottom: 0; - } - - & [data-gridcell-column-id='pin_field'] .euiDataGridRowCell__content { - padding: calc($euiSizeXS / 2) 0 0 $euiSizeXS; - } - - .kbnDocViewer__fieldsGrid__pinAction { - opacity: 0; - } - - & [data-gridcell-column-id='pin_field']:focus-within { - .kbnDocViewer__fieldsGrid__pinAction { - opacity: 1; - } - } - - .euiDataGridRow:hover .kbnDocViewer__fieldsGrid__pinAction { - opacity: 1; - } -} diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx index 8b4468c88fa2c..1e3779556b3ea 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx @@ -7,7 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './table.scss'; import React, { useCallback, useMemo, useState } from 'react'; import useWindowSize from 'react-use/lib/useWindowSize'; import useLocalStorage from 'react-use/lib/useLocalStorage'; @@ -38,6 +37,8 @@ import { canPrependTimeFieldColumn, } from '@kbn/discover-utils'; import type { DocViewRenderProps } from '@kbn/unified-doc-viewer/types'; +import { euiThemeVars } from '@kbn/ui-theme'; + import { getUnifiedDocViewerServices } from '../../plugin'; import { getFieldCellActions, @@ -499,7 +500,7 @@ export const DocViewerTable = ({ {rows.length === 0 ? ( - +

) : ( - + ); }; + +const styles = { + fieldsGridWrapper: css({ + minBlockSize: 0, + display: 'block', + + '.euiDataGridRow': { + '&:hover': { + // we keep using a deprecated shade until proper token is available + backgroundColor: euiThemeVars.euiColorLightestShade, + }, + }, + }), + fieldsGrid: css({ + '&.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader': { + borderTop: 'none', + }, + + '&.euiDataGrid--headerUnderline .euiDataGridHeader': { + borderBottom: euiThemeVars.euiBorderThin, + }, + + '& [data-gridcell-column-id="name"] .euiDataGridRowCell__content': { + paddingTop: 0, + paddingBottom: 0, + }, + + '& [data-gridcell-column-id="pin_field"] .euiDataGridRowCell__content': { + padding: `calc(${euiThemeVars.euiSizeXS} / 2) 0 0 ${euiThemeVars.euiSizeXS}`, + }, + + '.kbnDocViewer__fieldsGrid__pinAction': { + opacity: 0, + }, + + '& [data-gridcell-column-id="pin_field"]:focus-within': { + '.kbnDocViewer__fieldsGrid__pinAction': { + opacity: 1, + }, + }, + + '.euiDataGridRow:hover .kbnDocViewer__fieldsGrid__pinAction': { + opacity: 1, + }, + }), + noFieldsFound: css({ + minHeight: 300, + }), +}; diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx index a7360f02e7fd4..a7e6ef5deef18 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.test.tsx @@ -12,7 +12,7 @@ import { render, screen } from '@testing-library/react'; import { TRUNCATE_MAX_HEIGHT, TRUNCATE_MAX_HEIGHT_DEFAULT_VALUE } from '@kbn/discover-utils'; import type { IUiSettingsClient } from '@kbn/core-ui-settings-browser'; import { userEvent } from '@testing-library/user-event'; -import { TableFieldValue } from './table_cell_value'; +import { TableFieldValue, DOC_VIEWER_DEFAULT_TRUNCATE_MAX_HEIGHT } from './table_cell_value'; import { setUnifiedDocViewerServices } from '../../plugin'; import { mockUnifiedDocViewerServices } from '../../__mocks__'; @@ -30,6 +30,11 @@ mockServices.uiSettings.get = ((key: string) => { setUnifiedDocViewerServices(mockUnifiedDocViewerServices); +const truncationStyles = { + overflow: 'hidden', + maxHeight: `${DOC_VIEWER_DEFAULT_TRUNCATE_MAX_HEIGHT}px`, +}; + let mockScrollHeight = 0; jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => mockScrollHeight); @@ -77,8 +82,8 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('false'); let valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeDefined(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(true); + + expect(valueElement).toHaveStyle(truncationStyles); await userEvent.click(toggleButton); @@ -87,8 +92,8 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('true'); valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeNull(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false); + + expect(valueElement).not.toHaveStyle(truncationStyles); await userEvent.click(toggleButton); @@ -97,8 +102,8 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('false'); valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeDefined(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(true); + + expect(valueElement).toHaveStyle(truncationStyles); }); it('should not truncate a long value when inside a popover', async () => { @@ -119,8 +124,8 @@ describe('TableFieldValue', () => { expect(screen.queryByTestId('toggleLongFieldValue-message')).toBeNull(); const valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeNull(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false); + + expect(valueElement).not.toHaveStyle(truncationStyles); }); it('should truncate a long value in legacy table correctly', async () => { @@ -145,8 +150,7 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('false'); let valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeDefined(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(true); + expect(valueElement).toHaveStyle(truncationStyles); toggleButton.click(); @@ -155,8 +159,7 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('true'); valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeNull(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false); + expect(valueElement).not.toHaveStyle(truncationStyles); toggleButton.click(); @@ -165,8 +168,7 @@ describe('TableFieldValue', () => { expect(toggleButton.getAttribute('aria-expanded')).toBe('false'); valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeDefined(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(true); + expect(valueElement).toHaveStyle(truncationStyles); }); it('should not truncate a long value in legacy table if limit is not reached', async () => { @@ -188,8 +190,7 @@ describe('TableFieldValue', () => { expect(screen.queryByTestId('toggleLongFieldValue-message')).toBeNull(); const valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeNull(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false); + expect(valueElement).not.toHaveStyle(truncationStyles); }); it('should not truncate a long value in legacy table if setting is 0', async () => { @@ -212,7 +213,6 @@ describe('TableFieldValue', () => { expect(screen.queryByTestId('toggleLongFieldValue-message')).toBeNull(); const valueElement = screen.getByTestId('tableDocViewRow-message-value'); - expect(valueElement.getAttribute('css')).toBeNull(); - expect(valueElement.classList.contains('kbnDocViewer__value--truncated')).toBe(false); + expect(valueElement).not.toHaveStyle(truncationStyles); }); }); diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.tsx index 3afe935307ab2..ff0188c02a21c 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell_value.tsx @@ -15,17 +15,16 @@ import { EuiIcon, EuiTextColor, EuiToolTip, - useEuiTheme, useResizeObserver, } from '@elastic/eui'; -import classnames from 'classnames'; import React, { Fragment, useCallback, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { IgnoredReason, TRUNCATE_MAX_HEIGHT } from '@kbn/discover-utils'; import { FieldRecordLegacy } from '@kbn/unified-doc-viewer/types'; +import { euiThemeVars } from '@kbn/ui-theme'; import { getUnifiedDocViewerServices } from '../../plugin'; -const DOC_VIEWER_DEFAULT_TRUNCATE_MAX_HEIGHT = 110; +export const DOC_VIEWER_DEFAULT_TRUNCATE_MAX_HEIGHT = 110; // Keep in memory what field values were expanded by the user and restore this state when the user opens DocViewer again const expandedFieldValuesSet = new Set(); @@ -114,7 +113,6 @@ export const TableFieldValue = ({ isLegacy, isHighlighted, }: TableFieldValueProps) => { - const { euiTheme } = useEuiTheme(); const { uiSettings } = getUnifiedDocViewerServices(); const truncationHeight = isLegacy ? uiSettings.get(TRUNCATE_MAX_HEIGHT) @@ -158,11 +156,6 @@ export const TableFieldValue = ({ const shouldTruncate = isCollapsible && isCollapsed; const valueElementId = `tableDocViewRow-${field}-value`; - const valueClasses = classnames('kbnDocViewer__value', { - 'kbnDocViewer__value--truncated': shouldTruncate, - 'kbnDocViewer__value--highlighted': isHighlighted && !isDetails, - }); - return ( {ignoreReason && ( @@ -174,12 +167,7 @@ export const TableFieldValue = ({ )} {isCollapsible && ( - +

); }; + +const styles = { + docViewerValue: css({ + wordBreak: 'break-all', + wordWrap: 'break-word', + whiteSpace: 'pre-wrap', + lineHeight: euiThemeVars.euiLineHeight, + verticalAlign: 'top', + + '.euiDataGridRowCell__popover &': { + fontSize: euiThemeVars.euiFontSizeS, + }, + }), + docViewerValueHighlighted: css({ + fontWeight: euiThemeVars.euiFontWeightBold, + }), + docViewerValueTruncated: css({ + overflow: 'hidden', + maxHeight: DOC_VIEWER_DEFAULT_TRUNCATE_MAX_HEIGHT, + }), + collapseButtonWrapper: css({ + marginTop: -euiThemeVars.euiSizeXS, + }), +}; diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.scss b/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.scss deleted file mode 100644 index 335805ed28493..0000000000000 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.dscJsonCodeEditor { - width: 100%; -} diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.tsx index 3ed154f86ec56..cf34771dde41e 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor.tsx @@ -7,8 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './json_code_editor.scss'; - import React from 'react'; import { JsonCodeEditorCommon } from './json_code_editor_common'; diff --git a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor_common.tsx b/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor_common.tsx index d92742ac1c29f..1f6162bbd3151 100644 --- a/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor_common.tsx +++ b/src/platform/plugins/shared/unified_doc_viewer/public/components/json_code_editor/json_code_editor_common.tsx @@ -7,9 +7,8 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import './json_code_editor.scss'; - import React from 'react'; +import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import { monaco, XJsonLang } from '@kbn/monaco'; import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; @@ -75,7 +74,7 @@ export const JsonCodeEditorCommon = ({ return codeEditor; } return ( - +
@@ -96,3 +95,9 @@ export const JsonCodeEditorCommon = ({ export const JSONCodeEditorCommonMemoized = React.memo((props: JsonCodeEditorCommonProps) => { return ; }); + +const styles = { + codeEditor: css` + height: 100%; + `, +};