Skip to content

[8.19] [TSVB/SCSS] Migrate _series_editor.scss file (#220991) #222352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mariairiartef merged 1 commit into from
Jun 3, 2025
Merged

[8.19] [TSVB/SCSS] Migrate _series_editor.scss file (#220991) #222352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions ...rm/plugins/private/vis_types/timeseries/public/application/components/_series_editor.scss
View file
Open in desktop

This file was deleted.

26 changes: 26 additions & 0 deletions ...form/plugins/private/vis_types/timeseries/public/application/components/_series_editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { type UseEuiTheme, useEuiTheme } from '@elastic/eui';
import { css } from '@emotion/react';
import { useMemo } from 'react';

const seriesBodyStyles = ({ euiTheme }: UseEuiTheme) =>
css({
marginLeft: euiTheme.size.xl,
marginTop: euiTheme.size.s,
});

export const useSeriesBodyStyles = () => {
const euiThemeContext = useEuiTheme();
const styles = useMemo(() => {
return seriesBodyStyles(euiThemeContext);
}, [euiThemeContext]);
return styles;
};
9 changes: 7 additions & 2 deletions ...tform/plugins/private/vis_types/timeseries/public/application/components/series_editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,15 @@ import { handleAdd, handleDelete, handleChange } from './lib/collection_actions'
import { newSeriesFn } from './lib/new_series_fn';
import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui';
import { reorder } from './lib/reorder';

import './_series_editor.scss';
import { css } from '@emotion/react';

const DROPPABLE_ID = 'series_editor_dnd';

const styles = ({ euiTheme }) => css`
margin-bottom: ${euiTheme.size.base};
padding: ${euiTheme.size.s};
`;

export class SeriesEditor extends Component {
handleClone = (series) => {
const newSeries = reIdSeries(series);
Expand Down Expand Up @@ -89,6 +93,7 @@ export class SeriesEditor extends Component {
{(provided) => (
<Series
className="tvbSeriesEditor"
css={styles}
colorPicker={colorPicker}
disableAdd={model[name].length >= limit}
disableDelete={model[name].length < 2}
Expand Down
4 changes: 3 additions & 1 deletion ...gins/private/vis_types/timeseries/public/application/components/vis_types/gauge/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
import { createTextHandler } from '../../lib/create_text_handler';
import { Aggs } from '../../aggs/aggs';
import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
import { useSeriesBodyStyles } from '../../_series_editor';

function GaugeSeriesUi(props) {
const {
Expand All @@ -45,6 +46,7 @@ function GaugeSeriesUi(props) {
} = props;

const { euiTheme } = useEuiTheme();
const seriesBodyStyles = useSeriesBodyStyles();

const defaults = { label: '' };
const model = { ...defaults, ...props.model };
Expand Down Expand Up @@ -92,7 +94,7 @@ function GaugeSeriesUi(props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down
4 changes: 3 additions & 1 deletion ...s/private/vis_types/timeseries/public/application/components/vis_types/markdown/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { createTextHandler } from '../../lib/create_text_handler';
import { Aggs } from '../../aggs/aggs';
import { SeriesDragHandler } from '../../series_drag_handler';
import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
import { useSeriesBodyStyles } from '../../_series_editor';

function MarkdownSeriesUi(props) {
const {
Expand All @@ -44,6 +45,7 @@ function MarkdownSeriesUi(props) {
} = props;

const { euiTheme } = useEuiTheme();
const seriesBodyStyles = useSeriesBodyStyles();

const defaults = { label: '', var_name: '' };
const model = { ...defaults, ...props.model };
Expand Down Expand Up @@ -91,7 +93,7 @@ function MarkdownSeriesUi(props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down
4 changes: 3 additions & 1 deletion ...ins/private/vis_types/timeseries/public/application/components/vis_types/metric/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { Split } from '../../split';
import { SeriesDragHandler } from '../../series_drag_handler';
import { createTextHandler } from '../../lib/create_text_handler';
import { Aggs } from '../../aggs/aggs';
import { useSeriesBodyStyles } from '../../_series_editor';

function MetricSeriesUi(props) {
const {
Expand All @@ -45,6 +46,7 @@ function MetricSeriesUi(props) {
} = props;

const { euiTheme } = useEuiTheme();
const seriesBodyStyles = useSeriesBodyStyles();

const defaults = { label: '' };
const model = { ...defaults, ...props.model };
Expand Down Expand Up @@ -92,7 +94,7 @@ function MetricSeriesUi(props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down
5 changes: 4 additions & 1 deletion ...gins/private/vis_types/timeseries/public/application/components/vis_types/table/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
import { createTextHandler } from '../../lib/create_text_handler';
import { FormattedMessage, injectI18n } from '@kbn/i18n-react';
import { Aggs } from '../../aggs/aggs';
import { useSeriesBodyStyles } from '../../_series_editor';

function TableSeriesUI(props) {
const {
Expand All @@ -41,6 +42,8 @@ function TableSeriesUI(props) {
uiRestrictions,
} = props;

const seriesBodyStyles = useSeriesBodyStyles();

const handleChange = createTextHandler(onChange);

let caretIcon = 'arrowDown';
Expand Down Expand Up @@ -76,7 +79,7 @@ function TableSeriesUI(props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down
4 changes: 3 additions & 1 deletion ...private/vis_types/timeseries/public/application/components/vis_types/timeseries/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
import { Split } from '../../split';
import { createTextHandler } from '../../lib/create_text_handler';
import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
import { useSeriesBodyStyles } from '../../_series_editor';

const TimeseriesSeriesUI = injectI18n(function (props) {
const {
Expand All @@ -46,6 +47,7 @@ const TimeseriesSeriesUI = injectI18n(function (props) {
} = props;

const { euiTheme } = useEuiTheme();
const seriesBodyStyles = useSeriesBodyStyles();

const defaults = {
label: '',
Expand Down Expand Up @@ -98,7 +100,7 @@ const TimeseriesSeriesUI = injectI18n(function (props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down
4 changes: 3 additions & 1 deletion ...gins/private/vis_types/timeseries/public/application/components/vis_types/top_n/series.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
import { createTextHandler } from '../../lib/create_text_handler';
import { Aggs } from '../../aggs/aggs';
import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
import { useSeriesBodyStyles } from '../../_series_editor';

export const TopNSeries = injectI18n(function (props) {
const {
Expand All @@ -46,6 +47,7 @@ export const TopNSeries = injectI18n(function (props) {
} = props;

const { euiTheme } = useEuiTheme();
const seriesBodyStyles = useSeriesBodyStyles();

const handleChange = createTextHandler(onChange);

Expand Down Expand Up @@ -90,7 +92,7 @@ export const TopNSeries = injectI18n(function (props) {
);
}
body = (
<div className="tvbSeries__body">
<div className="tvbSeries__body" css={seriesBodyStyles}>
<EuiTabs size="s">
<EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
<FormattedMessage
Expand Down