github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-28 11:05:39 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Align SCSS - Emotion migration part 2 with new guidelines (#224586)

Browse source 
## Summary

This pull requests aligns previous SCSS refactor part 2 ([[Discover]
SCSS to Emotions migration part
2/4](https://github.com/elastic/kibana/pull/214729/files#top)) with new
[Emotion
standards](https://docs.google.com/document/d/1CPflY8yCc3lZDg2BQkaMTgIkZlqiAEyMcAAvZbsjcTc/edit?pli=1&tab=t.0#heading=h.4zj1jq66y5an),
so the code is easier to read, maintain and unified across Discover.
This commit is contained in:
Ania Kowalska 2025-06-25 16:00:47 +02:00 • committed by GitHub
parent 1184cc2832
commit 96e6dd5fa2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 114 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/platform/plugins/shared/discover/public/application/context/components/action_bar/action_bar.tsx
View file

@ -20,6 +20,8 @@ import {
EuiSpacer, EuiSpacer,
type UseEuiTheme, type UseEuiTheme,
} from '@elastic/eui'; } from '@elastic/eui';
import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
import { ActionBarWarning } from './action_bar_warning'; import { ActionBarWarning } from './action_bar_warning';
import { SurrDocType } from '../../services/context'; import { SurrDocType } from '../../services/context';
import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../services/constants'; import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../services/constants';
@ -70,6 +72,8 @@ export function ActionBar({
onChangeCount, onChangeCount,
type, type,
}: ActionBarProps) { }: ActionBarProps) {
const styles = useMemoCss(componentStyles);
const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount; const showWarning = !isDisabled && !isLoading && docCountAvailable < docCount;
const isSuccessor = type === SurrDocType.SUCCESSORS; const isSuccessor = type === SurrDocType.SUCCESSORS;
const [newDocCount, setNewDocCount] = useState(docCount); const [newDocCount, setNewDocCount] = useState(docCount);
@ -122,7 +126,7 @@ export function ActionBar({
}) })
} }
compressed compressed
css={cxtSizePickerCss} css={styles.cxtSizePicker}
data-test-subj={`${type}CountPicker`} data-test-subj={`${type}CountPicker`}
disabled={isDisabled} disabled={isDisabled}
min={MIN_CONTEXT_SIZE} min={MIN_CONTEXT_SIZE}
@ -163,13 +167,15 @@ export function ActionBar({
); );
} }
const cxtSizePickerCss = ({ euiTheme }: UseEuiTheme) => css` const componentStyles = {
text-align: center; cxtSizePicker: ({ euiTheme }: UseEuiTheme) =>
width: calc(${euiTheme.size.base} * 5); css({
textAlign: 'center',
width: `calc(${euiTheme.size.base} * 5)`,
&::-webkit-outer-spin-button, '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
&::-webkit-inner-spin-button { appearance: 'none', // Hide increment and decrement buttons for type="number" input.
appearance: none; // Hide increment and decrement buttons for type="number" input. margin: 0,
margin: 0; },
} }),
`; };

47
src/platform/plugins/shared/discover/public/application/context/context_app.tsx
View file

@ -14,11 +14,12 @@ import {
EuiPage, EuiPage,
EuiPageBody, EuiPageBody,
EuiSpacer, EuiSpacer,
useEuiPaddingSize, euiPaddingSize,
useEuiTheme, type UseEuiTheme,
} from '@elastic/eui'; } from '@elastic/eui';
import { css } from '@emotion/react'; import { css } from '@emotion/react';
import { cloneDeep } from 'lodash'; import { cloneDeep } from 'lodash';
import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
import type { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
import { useExecutionContext } from '@kbn/kibana-react-plugin/public'; import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
import { generateFilters } from '@kbn/data-plugin/public'; import { generateFilters } from '@kbn/data-plugin/public';
@ -50,7 +51,8 @@ export interface ContextAppProps {
} }
export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) => { export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) => {
const { euiTheme } = useEuiTheme(); const styles = useMemoCss(componentStyles);
const services = useDiscoverServices(); const services = useDiscoverServices();
const { const {
analytics, analytics,
@ -246,8 +248,6 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
}; };
}; };
const titlePadding = useEuiPaddingSize('m');
return ( return (
<Fragment> <Fragment>
{fetchedState.anchorStatus.value === LoadingStatus.FAILED ? ( {fetchedState.anchorStatus.value === LoadingStatus.FAILED ? (
@ -272,28 +272,12 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
css={styles.docsContent} css={styles.docsContent}
panelProps={{ role: 'main' }} panelProps={{ role: 'main' }}
> >
<EuiText <EuiText data-test-subj="contextDocumentSurroundingHeader" css={styles.title}>
data-test-subj="contextDocumentSurroundingHeader"
css={css`
padding: ${titlePadding} ${titlePadding} 0;
font-weight: ${euiTheme.font.weight.bold};
`}
>
<FormattedMessage <FormattedMessage
id="discover.context.contextOfTitle" id="discover.context.contextOfTitle"
defaultMessage="Documents surrounding {anchorId}" defaultMessage="Documents surrounding {anchorId}"
values={{ values={{
anchorId: ( anchorId: <span css={styles.documentId}>#{anchorId}</span>,
<span
css={css`
background-color: ${euiTheme.colors.backgroundBaseWarning};
color: ${euiTheme.colors.textWarning};
padding: 0 ${euiTheme.size.xs};
`}
>
#{anchorId}
</span>
),
}} }}
/> />
</EuiText> </EuiText>
@ -325,11 +309,26 @@ export const ContextApp = ({ dataView, anchorId, referrer }: ContextAppProps) =>
); );
}; };
const styles = { const componentStyles = {
docsContent: css({ docsContent: css({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
height: '100%', height: '100%',
}), }),
docsPage: kbnFullBodyHeightCss('54px'), // 54px is the action bar height docsPage: kbnFullBodyHeightCss('54px'), // 54px is the action bar height
title: (themeContext: UseEuiTheme) => {
const { euiTheme } = themeContext;
const titlePadding = euiPaddingSize(themeContext, 's');
return css({
padding: `${titlePadding} ${titlePadding} 0`,
fontWeight: euiTheme.font.weight.bold,
});
},
documentId: ({ euiTheme }: UseEuiTheme) =>
css({
backgroundColor: euiTheme.colors.backgroundBaseWarning,
color: euiTheme.colors.textWarning,
padding: `0 ${euiTheme.size.xs}`,
}),
}; };

40
src/platform/plugins/shared/discover/public/application/main/components/layout/discover_documents.tsx
View file

@ -380,7 +380,7 @@ function DiscoverDocumentsComponent({
size="xs" size="xs"
color="accent" color="accent"
position="absolute" position="absolute"
css={progressStyle} css={styles.progress}
/> />
) : null, ) : null,
[isDataLoading] [isDataLoading]
@ -411,7 +411,7 @@ function DiscoverDocumentsComponent({
if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) { if (isDataViewLoading || (isEmptyDataResult && isDataLoading)) {
return ( return (
// class is used in tests // class is used in tests
<div className="dscDocuments__loading" css={dscDocumentsLoadingCss}> <div className="dscDocuments__loading" css={styles.dscDocumentsLoading}>
<EuiText size="xs" color="subdued"> <EuiText size="xs" color="subdued">
<EuiLoadingSpinner /> <EuiLoadingSpinner />
<EuiSpacer size="s" /> <EuiSpacer size="s" />
@ -423,7 +423,7 @@ function DiscoverDocumentsComponent({
return ( return (
// class is used in tests // class is used in tests
<EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={containerStyles}> <EuiFlexItem className="dscTable" aria-labelledby="documentsAriaLabel" css={styles.container}>
<EuiScreenReaderOnly> <EuiScreenReaderOnly>
<h2 id="documentsAriaLabel"> <h2 id="documentsAriaLabel">
<FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" /> <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
@ -499,20 +499,20 @@ function DiscoverDocumentsComponent({
export const DiscoverDocuments = memo(DiscoverDocumentsComponent); export const DiscoverDocuments = memo(DiscoverDocumentsComponent);
const containerStyles = css` const styles = {
position: relative; container: css({
min-height: 0; position: 'relative',
`; minHeight: 0,
}),
const progressStyle = css` progress: css({
z-index: 2; zIndex: 2,
`; }),
dscDocumentsLoading: css({
const dscDocumentsLoadingCss = css` display: 'flex',
display: flex; flexDirection: 'column',
flex-direction: column; justifyContent: 'center',
justify-content: center; textAlign: 'center',
text-align: center; height: '100%',
height: 100%; width: '100%',
width: 100%; }),
`; };

102
src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.tsx
View file

@ -15,8 +15,8 @@ import {
EuiPanel, EuiPanel,
EuiProgress, EuiProgress,
EuiDelayRender, EuiDelayRender,
useEuiTheme,
useEuiBreakpoint, useEuiBreakpoint,
type UseEuiTheme,
} from '@elastic/eui'; } from '@elastic/eui';
import { css } from '@emotion/react'; import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n'; import { i18n } from '@kbn/i18n';
@ -32,6 +32,7 @@ import { popularizeField, useColumns } from '@kbn/unified-data-table';
import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types'; import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
import { BehaviorSubject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common'; import type { DiscoverGridSettings } from '@kbn/saved-search-plugin/common';
import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css'; import { kbnFullBodyHeightCss } from '@kbn/css-utils/public/full_body_height_css';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useSavedSearchInitial } from '../../state_management/discover_state_provider'; import { useSavedSearchInitial } from '../../state_management/discover_state_provider';
@ -91,8 +92,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
ebtManager, ebtManager,
fieldsMetadata, fieldsMetadata,
} = useDiscoverServices(); } = useDiscoverServices();
const { euiTheme } = useEuiTheme(); const styles = useMemoCss(componentStyles);
const pageBackgroundColor = euiTheme.colors.backgroundBasePlain;
const globalQueryState = data.query.getState(); const globalQueryState = data.query.getState();
const { main$ } = stateContainer.dataState.data$; const { main$ } = stateContainer.dataState.data$;
const [query, savedQuery, columns, sort, grid] = useAppStateSelector((state) => [ const [query, savedQuery, columns, sort, grid] = useAppStateSelector((state) => [
@ -372,15 +373,14 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
className="dscPage" // class is used in tests and other styles className="dscPage" // class is used in tests and other styles
data-fetch-counter={fetchCounter.current} data-fetch-counter={fetchCounter.current}
direction="column" direction="column"
css={css` css={[
overflow: hidden; styles.DscPage,
padding: 0; css`
background-color: ${pageBackgroundColor};
${useEuiBreakpoint(['m', 'l', 'xl'])} { ${useEuiBreakpoint(['m', 'l', 'xl'])} {
${kbnFullBodyHeightCss(TABS_ENABLED ? '32px' : undefined)} ${kbnFullBodyHeightCss(TABS_ENABLED ? '32px' : undefined)}
} }
`} `,
]}
> >
<h1 <h1
id="savedSearchTitle" id="savedSearchTitle"
@ -407,19 +407,8 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
isLoading={isLoading} isLoading={isLoading}
onCancelClick={onCancelClick} onCancelClick={onCancelClick}
/> />
<EuiPageBody <EuiPageBody aria-describedby="savedSearchTitle" css={styles.savedSearchTitle}>
aria-describedby="savedSearchTitle" <div ref={setSidebarContainer} css={styles.sidebarContainer}>
css={css`
overflow: hidden;
`}
>
<div
ref={setSidebarContainer}
css={css`
width: 100%;
height: 100%;
`}
>
{dataViewLoading && ( {dataViewLoading && (
<EuiDelayRender delay={300}> <EuiDelayRender delay={300}>
<EuiProgress size="xs" color="accent" position="absolute" /> <EuiProgress size="xs" color="accent" position="absolute" />
@ -450,15 +439,11 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
/> />
} }
mainPanel={ mainPanel={
<div css={dscPageContentWrapperCss}> <div css={styles.dscPageContentWrapper}>
{resultState === 'none' ? ( {resultState === 'none' ? (
<> <>
{React.isValidElement(panelsToggle) ? ( {React.isValidElement(panelsToggle) ? (
<div <div css={styles.mainPanel}>
css={css`
padding: ${euiTheme.size.s};
`}
>
{React.cloneElement(panelsToggle, { {React.cloneElement(panelsToggle, {
renderedFor: 'prompt', renderedFor: 'prompt',
isChartAvailable: false, isChartAvailable: false,
@ -496,7 +481,7 @@ export function DiscoverLayout({ stateContainer }: DiscoverLayoutProps) {
hasShadow={false} hasShadow={false}
hasBorder={false} hasBorder={false}
color="transparent" color="transparent"
css={[dscPageContentCss, contentCentered && dscPageContentCenteredCss]} css={[styles.dscPageContent, contentCentered && styles.dscPageContentCentered]}
> >
{mainDisplay} {mainDisplay}
</EuiPanel> </EuiPanel>
@ -525,24 +510,41 @@ const getOperator = (fieldName: string, values: unknown, operation: '+' | '-') =
return operation; return operation;
}; };
const dscPageContentWrapperCss = css` const componentStyles = {
overflow: hidden; // Ensures horizontal scroll of table dscPage: ({ euiTheme }: UseEuiTheme) =>
display: flex; css({
flex-direction: column; overflow: 'hidden',
height: 100%; padding: 0,
`; backgroundColor: euiTheme.colors.backgroundBasePlain,
}),
const dscPageContentCss = css` savedSearchTitle: css({
position: relative; overflow: 'hidden',
overflow: hidden; }),
height: 100%; sidebarContainer: css({
`; width: '100%',
height: '100%',
const dscPageContentCenteredCss = css` }),
width: auto; mainPanel: ({ euiTheme }: UseEuiTheme) =>
height: auto; css({
align-self: center; padding: euiTheme.size.s,
margin-top: auto; }),
margin-bottom: auto; dscPageContentWrapper: css({
flex-grow: 0; overflow: 'hidden', // Ensures horizontal scroll of table
`; display: 'flex',
flexDirection: 'column',
height: '100%',
}),
dscPageContent: css({
position: 'relative',
overflow: 'hidden',
height: '100%',
}),
dscPageContentCentered: css({
width: 'auto',
height: 'auto',
alignSelf: 'center',
marginTop: 'auto',
marginBottom: 'auto',
flexGrow: 0,
}),
};