Skip to content

Commit b4f13f3

Browse files
kapantzakkapantzak
committed
Fix direct css imports
1 parent 3955346 commit b4f13f3

File tree

3 files changed

+54
-28
lines changed

3 files changed

+54
-28
lines changed

‎src/QueryEditor.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useState } from 'react';
2-
import { Input, LegacyForms, Select } from '@grafana/ui';
2+
import { Input, LegacyForms, Select, useStyles2 } from '@grafana/ui';
33
import { QueryEditorProps, SelectableValue } from '@grafana/data';
4+
import { css } from '@emotion/css';
45
import { DataSource } from './datasource';
56
import { MyDataSourceOptions, MyQuery } from './shared/types';
67
import { useFetchSpaces } from 'shared/hooks/useFetchSpaces';
7-
import './styles.css';
88
import { useFetchRooms } from 'shared/hooks/useFetchRooms';
99
import { useFetchContexts } from 'shared/hooks/useFetchContexts';
1010
import { useFetchNodes } from 'shared/hooks/useFetchNodes';
@@ -17,7 +17,24 @@ type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
1717

1818
const { FormField } = LegacyForms;
1919

20+
const getStyles = () => ({
21+
mt: css`
22+
margin-top: 1em;
23+
`,
24+
flex: css`
25+
display: flex;
26+
justify-content: space-between;
27+
& > * {
28+
flex: 1;
29+
}
30+
& .gf-form-input {
31+
width: 100% !important;
32+
}
33+
`,
34+
});
35+
2036
const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRunQuery }) => {
37+
const styles = useStyles2(getStyles);
2138
const { baseUrl } = datasource;
2239
const from = range!.from.valueOf();
2340
const to = range!.to.valueOf();
@@ -266,7 +283,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
266283

267284
return (
268285
<>
269-
<div className="flex mt">
286+
<div className={`${styles.flex} ${styles.mt}`}>
270287
<FormField
271288
label="Space*"
272289
inputEl={
@@ -282,7 +299,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
282299
/>
283300
</div>
284301

285-
<div className="mt">
302+
<div className={styles.mt}>
286303
<FormField
287304
label="Nodes"
288305
tooltip="No selected Nodes means 'All Nodes' from the Room"
@@ -298,7 +315,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
298315
}
299316
/>
300317
</div>
301-
<div className="flex mt">
318+
<div className={`${styles.flex} ${styles.mt}`}>
302319
<FormField
303320
label="Context*"
304321
inputEl={
@@ -327,7 +344,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
327344
/>
328345
</div>
329346

330-
<div className="flex mt">
347+
<div className={`${styles.flex} ${styles.mt}`}>
331348
<FormField
332349
label="Grouping by*"
333350
inputEl={
@@ -371,7 +388,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
371388
/>
372389
</div>
373390

374-
<div className="flex mt">
391+
<div className={`${styles.flex} ${styles.mt}`}>
375392
<FormField
376393
label="Filter by"
377394
inputEl={
@@ -399,7 +416,7 @@ const QueryEditor: React.FC<Props> = ({ datasource, query, range, onChange, onRu
399416
/>
400417
</div>
401418

402-
<div className="flex mt">
419+
<div className={`${styles.flex} ${styles.mt}`}>
403420
<FormField label="Unit" labelWidth={8} inputEl={<Input value={units} disabled />} />
404421
<div />
405422
</div>

‎src/styles.css‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6621,7 +6621,7 @@ [email protected]:
66216621
prop-types "^15.5.10"
66226622
raf "^3.1.0"
66236623

6624-
"react-data-grid@github:grafana/react-data-grid#a922856b5ede21d55db3fdffb6d38dc76bdc7c58":
6624+
react-data-grid@grafana/react-data-grid#a922856b5ede21d55db3fdffb6d38dc76bdc7c58:
66256625
version "7.0.0-beta.56"
66266626
resolved "https://codeload.github.com/grafana/react-data-grid/tar.gz/a922856b5ede21d55db3fdffb6d38dc76bdc7c58"
66276627
dependencies:
@@ -7460,8 +7460,16 @@ string-template@~0.2.1:
74607460
resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
74617461
integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
74627462

7463-
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
7464-
name string-width-cjs
7463+
"string-width-cjs@npm:string-width@^4.2.0":
7464+
version "4.2.3"
7465+
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
7466+
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
7467+
dependencies:
7468+
emoji-regex "^8.0.0"
7469+
is-fullwidth-code-point "^3.0.0"
7470+
strip-ansi "^6.0.1"
7471+
7472+
string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
74657473
version "4.2.3"
74667474
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
74677475
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -7543,7 +7551,14 @@ [email protected]:
75437551
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
75447552
integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
75457553

7546-
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
7554+
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
7555+
version "6.0.1"
7556+
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
7557+
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
7558+
dependencies:
7559+
ansi-regex "^5.0.1"
7560+
7561+
strip-ansi@^6.0.0, strip-ansi@^6.0.1:
75477562
version "6.0.1"
75487563
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
75497564
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8249,8 +8264,16 @@ word-wrap@^1.2.5:
82498264
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
82508265
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
82518266

8252-
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
8253-
name wrap-ansi-cjs
8267+
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
8268+
version "7.0.0"
8269+
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
8270+
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
8271+
dependencies:
8272+
ansi-styles "^4.0.0"
8273+
string-width "^4.1.0"
8274+
strip-ansi "^6.0.0"
8275+
8276+
wrap-ansi@^7.0.0:
82548277
version "7.0.0"
82558278
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
82568279
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

0 commit comments

Comments
 (0)