Skip to content

Commit 14d9bc2

Browse files
dhia-gharsallaouidhia-gharsallaoui
committed
refactor: migrate from deprecated v1 theming to v2 theming system
- Remove injectGlobal usage to prevent CSS collisions with other plugins - Migrate from stylesFactory + useTheme to useStyles2 - Update GrafanaTheme to GrafanaTheme2 - Replace theme.colors.border2 with theme.colors.border.medium - Scope datepicker styles within components instead of global injection
1 parent 69b9380 commit 14d9bc2

File tree

5 files changed

+70
-89
lines changed

5 files changed

+70
-89
lines changed

‎src/builder/abstract/DateInterval.tsx‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React, { ChangeEvent } from 'react';
2-
import { InlineLabel, stylesFactory, useTheme } from '@grafana/ui';
3-
import { GrafanaTheme } from '@grafana/data';
2+
import { InlineLabel, useStyles2 } from '@grafana/ui';
3+
import { GrafanaTheme2 } from '@grafana/data';
44
import { QueryBuilderFieldProps } from './types';
55
import { onBuilderChange } from '.';
6-
import { css, cx, injectGlobal } from '@emotion/css';
6+
import { css, cx } from '@emotion/css';
77
import DatePicker from 'react-datepicker';
88
import 'react-datepicker/dist/react-datepicker.css';
99

10-
injectGlobal(`
11-
.react-datepicker__triangle {
12-
display: none;
13-
}
14-
.react-datepicker-popper {
15-
z-index: 1000 !important;
16-
}
17-
`);
1810

1911
interface Props extends QueryBuilderFieldProps {
2012
format: string;
@@ -68,8 +60,7 @@ export const DateInterval = (props: Props) => {
6860
onBuilderChange(props, intervalStart + '/' + value);
6961
};
7062
const { label, description, format, time } = props;
71-
const theme = useTheme();
72-
const styles = getStyles(theme);
63+
const styles = useStyles2(getStyles);
7364
return (
7465
<>
7566
<InlineLabel tooltip={description} width="auto">
@@ -105,14 +96,18 @@ export const DateInterval = (props: Props) => {
10596
);
10697
};
10798

108-
const getStyles = stylesFactory((theme: GrafanaTheme) => {
109-
return {
110-
picker: css`
111-
& input {
112-
border: 1px solid ${theme.colors.border2};
113-
height: 32px;
114-
margin-right: 4px;
115-
}
116-
`,
117-
};
99+
const getStyles = (theme: GrafanaTheme2) => ({
100+
picker: css`
101+
& input {
102+
border: 1px solid ${theme.colors.border.medium};
103+
height: 32px;
104+
margin-right: 4px;
105+
}
106+
.react-datepicker__triangle {
107+
display: none;
108+
}
109+
.react-datepicker-popper {
110+
z-index: 1000 !important;
111+
}
112+
`,
118113
});

‎src/builder/abstract/DateTime.tsx‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import React, { ChangeEvent } from 'react';
2-
import { InlineLabel, stylesFactory, useTheme } from '@grafana/ui';
3-
import { GrafanaTheme } from '@grafana/data';
2+
import { InlineLabel, useStyles2 } from '@grafana/ui';
3+
import { GrafanaTheme2 } from '@grafana/data';
44
import { QueryBuilderFieldProps } from './types';
55
import { onBuilderChange } from '.';
6-
import { css, cx, injectGlobal } from '@emotion/css';
6+
import { css, cx } from '@emotion/css';
77
import DatePicker from 'react-datepicker';
88
import 'react-datepicker/dist/react-datepicker.css';
99

10-
injectGlobal(`
11-
.react-datepicker__triangle {
12-
display: none;
13-
}
14-
.react-datepicker-popper {
15-
z-index: 1000 !important;
16-
}
17-
`);
1810

1911
interface Props extends QueryBuilderFieldProps {
2012
format: string;
@@ -45,8 +37,7 @@ export const DateTime = (props: Props) => {
4537
onBuilderChange(props, date.toISOString());
4638
};
4739
const { label, description, format, time } = props;
48-
const theme = useTheme();
49-
const styles = getStyles(theme);
40+
const styles = useStyles2(getStyles);
5041
return (
5142
<>
5243
<InlineLabel tooltip={description} width="auto">
@@ -65,14 +56,18 @@ export const DateTime = (props: Props) => {
6556
);
6657
};
6758

68-
const getStyles = stylesFactory((theme: GrafanaTheme) => {
69-
return {
70-
picker: css`
71-
& input {
72-
border: 1px solid ${theme.colors.border2};
73-
height: 32px;
74-
margin-right: 4px;
75-
}
76-
`,
77-
};
59+
const getStyles = (theme: GrafanaTheme2) => ({
60+
picker: css`
61+
& input {
62+
border: 1px solid ${theme.colors.border.medium};
63+
height: 32px;
64+
margin-right: 4px;
65+
}
66+
.react-datepicker__triangle {
67+
display: none;
68+
}
69+
.react-datepicker-popper {
70+
z-index: 1000 !important;
71+
}
72+
`,
7873
});

‎src/builder/abstract/Row.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import React, { ReactNode } from 'react';
2-
import { InlineFieldRow, stylesFactory, useTheme } from '@grafana/ui';
3-
import { GrafanaTheme } from '@grafana/data';
2+
import { InlineFieldRow, useStyles2 } from '@grafana/ui';
3+
import { GrafanaTheme2 } from '@grafana/data';
44
import { css, cx } from '@emotion/css';
55

66
interface Props {
77
children: ReactNode | ReactNode[];
88
}
99

1010
export const Row = (props: Props) => {
11-
const theme = useTheme();
12-
const styles = getStyles(theme);
11+
const styles = useStyles2(getStyles);
1312
return <InlineFieldRow className={cx(styles.row)}>{props.children}</InlineFieldRow>;
1413
};
1514

16-
const getStyles = stylesFactory((theme: GrafanaTheme) => {
17-
return {
18-
row: css`
19-
width: 100%;
20-
padding-bottom: 5px;
21-
& > & {
22-
border-left: 1px solid ${theme.colors.border2};
23-
padding: 5px 0 5px 10px;
24-
}
25-
`,
26-
};
15+
const getStyles = (theme: GrafanaTheme2) => ({
16+
row: css`
17+
width: 100%;
18+
padding-bottom: 5px;
19+
& > & {
20+
border-left: 1px solid ${theme.colors.border.medium};
21+
padding: 5px 0 5px 10px;
22+
}
23+
`,
2724
});

‎src/configuration/QuerySettings/DruidQueryContextSettings.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ChangeEvent } from 'react';
2-
import { InlineLabel, InlineField, InlineFieldRow, Input, Button, Icon, useTheme, stylesFactory } from '@grafana/ui';
3-
import { GrafanaTheme } from '@grafana/data';
2+
import { InlineLabel, InlineField, InlineFieldRow, Input, Button, Icon, useStyles2 } from '@grafana/ui';
3+
import { GrafanaTheme2 } from '@grafana/data';
44
import { css, cx } from '@emotion/css';
55
import { QuerySettingsProps } from './types';
66

@@ -26,8 +26,7 @@ const useParameters = (props: QuerySettingsProps): any => {
2626
};
2727

2828
export const DruidQueryContextSettings = (props: QuerySettingsProps) => {
29-
const theme = useTheme();
30-
const styles = getStyles(theme);
29+
const styles = useStyles2(getStyles);
3130
const [parameters, setParameters] = useParameters(props);
3231
const onParameterChange = (name: string, parameter: Parameter) => {
3332
setParameters({ ...parameters, [name]: parameter });
@@ -75,16 +74,14 @@ export const DruidQueryContextSettings = (props: QuerySettingsProps) => {
7574
);
7675
};
7776

78-
const getStyles = stylesFactory((theme: GrafanaTheme) => {
79-
return {
80-
row: css`
81-
width: 100%;
82-
& > & {
83-
border-left: 1px solid ${theme.colors.border2};
84-
padding: 5px 0px 0px 10px;
85-
}
86-
`,
87-
};
77+
const getStyles = (theme: GrafanaTheme2) => ({
78+
row: css`
79+
width: 100%;
80+
& > & {
81+
border-left: 1px solid ${theme.colors.border.medium};
82+
padding: 5px 0px 0px 10px;
83+
}
84+
`,
8885
});
8986

9087
interface Parameter {

‎src/configuration/QuerySettings/DruidQueryLogSettings.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { ChangeEvent } from 'react';
2-
import { InlineLabel, InlineFieldRow, InlineField, Input, useTheme, stylesFactory } from '@grafana/ui';
3-
import { GrafanaTheme } from '@grafana/data';
2+
import { InlineLabel, InlineFieldRow, InlineField, Input, useStyles2 } from '@grafana/ui';
3+
import { GrafanaTheme2 } from '@grafana/data';
44
import { css, cx } from '@emotion/css';
55
import { QuerySettingsProps } from './types';
66

77
export const DruidQueryLogSettings = (props: QuerySettingsProps) => {
8-
const theme = useTheme();
9-
const styles = getStyles(theme);
8+
const styles = useStyles2(getStyles);
109
const { options, onOptionsChange } = props;
1110
const { settings } = options;
1211
const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -56,14 +55,12 @@ export const DruidQueryLogSettings = (props: QuerySettingsProps) => {
5655
);
5756
};
5857

59-
const getStyles = stylesFactory((theme: GrafanaTheme) => {
60-
return {
61-
row: css`
62-
width: 100%;
63-
& > & {
64-
border-left: 1px solid ${theme.colors.border2};
65-
padding: 5px 0px 0px 10px;
66-
}
67-
`,
68-
};
58+
const getStyles = (theme: GrafanaTheme2) => ({
59+
row: css`
60+
width: 100%;
61+
& > & {
62+
border-left: 1px solid ${theme.colors.border.medium};
63+
padding: 5px 0px 0px 10px;
64+
}
65+
`,
6966
});

0 commit comments

Comments
 (0)