OPG-518: Fix spacer CSS class

package.json

@@ -148,7 +148,7 @@
       "minimatch": "^9.0.7"
     },
     "@typescript-eslint/utils": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "copy-webpack-plugin": {
       "schema-utils": "^4.3.3",
@@ -161,10 +161,10 @@
       "minimatch": "^3.1.4"
     },
     "eslint-webpack-plugin": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "flat-cache": {
-      "flatted": "^3.4.0"
+      "flatted": "^3.4.2"
     },
     "fork-ts-checker-webpack-plugin": {
       "ajv": "^8.18.0",

src/components/ClearFilterData.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { Button, useStyles2 } from '@grafana/ui'
 import { clearFilterEditorData } from '../lib/localStorageService'
 
 export const ClearFilterData: React.FC<{}> = () => {
@@ -10,20 +12,19 @@ export const ClearFilterData: React.FC<{}> = () => {
     setFilterDataCleared(true)
   }
 
+  const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+      margin-top: ${theme.spacing(2)};
+      margin-bottom: ${theme.spacing(2)};
+    `,
+  })
+
+  const s = useStyles2(getStyles)
+
   return (
     <>
-      <style>
-        {
-          `
-          .spacer {
-            margin-top: 10px;
-            margin-bottom: 10px;
-          }
-          `
-      }
-      </style>
-      <h3 className='spacer'>Filter Data</h3>
-      <div className='spacer'>
+      <h3 className={s.spacer}>Filter Data</h3>
+      <div className={s.spacer}>
         OpenNMS Filter Panel data is stored in browser local storage.
         Click here to remove any existing filter data.
       </div>
@@ -34,7 +35,7 @@ export const ClearFilterData: React.FC<{}> = () => {
       </Button>
       {
         filterDataCleared &&
-        <div className='spacer'>Filter data was cleared.</div>
+        <div className={s.spacer}>Filter data was cleared.</div>
       }
     </>
   )

src/datasources/entity-ds/EntityClauseEditor.tsx

@@ -1,4 +1,7 @@
 import React, { useEffect } from 'react'
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { useStyles2 } from '@grafana/ui'
 import { EntityClause } from './EntityClause'
 import { ClauseActionType, OnmsEntityType, SearchOption } from './types'
 import { API } from 'opennms'
@@ -12,6 +15,14 @@ interface EntityClauseEditorProps {
 }
 
 export const EntityClauseEditor = ({ setFilter, loading, propertiesAsArray, clauses, dispatchClauses }: EntityClauseEditorProps) => {
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+    })
+
+    const s = useStyles2(getStyles)
 
     useEffect(() => {
         const updatedFilter = new API.Filter();
@@ -74,7 +85,7 @@ export const EntityClauseEditor = ({ setFilter, loading, propertiesAsArray, clau
                             hasMultipleClauses={clauses.length > 1}
                         />
 
-                        <div className='spacer' />
+                        <div className={s.spacer} />
                     </>
                 )
             })}

src/datasources/entity-ds/EntityQueryEditor.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useReducer } from 'react'
+import { css } from '@emotion/css'
 import {
     InlineField,
     InlineFieldRow,
@@ -7,8 +8,9 @@ import {
     SegmentSection,
     Spinner,
     Switch,
+    useStyles2
 } from '@grafana/ui'
-import { SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { useEntityProperties } from '../../hooks/useEntityProperties';
 import { isInteger } from '../../lib/utils'
 import { EntityClauseEditor } from './EntityClauseEditor';
@@ -84,6 +86,23 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
     const [featuredAttributes, setFeaturedAttributes] = useState(true)
     const { propertiesLoading, propertiesAsArray } = useEntityProperties(value.label || '', featuredAttributes, client)
 
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+        maxInput: css`
+        max-width: 150px;
+        `,
+        biggerLabels: css`
+        label {
+            min-width: 32px;
+        }
+        `
+    })
+
+    const s = useStyles2(getStyles)
+
     useEffect(() => {
         if (propertiesLoading) {
             setLoading(true)
@@ -116,20 +135,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
         })
     }
 
-    return (<div className='bigger-labels'>
-        <style>
-            {`
-                .bigger-labels label {
-                    min-width: 32px;
-                }
-                .spacer {
-                    margin-bottom: 6px;
-                }
-                .max-input {
-                    max-width: 150px;
-                }
-            `}
-        </style>
+    return (<div className={s.biggerLabels}>
         <SegmentSection label='Select'>
             <Segment
                 value={value}
@@ -151,7 +157,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
                 <Spinner />
             </div>}
         </SegmentSection>
-        <div className='spacer' />
+        <div className={s.spacer} />
 
         <EntityClauseEditor
             clauses={clauses}
@@ -167,10 +173,10 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
             searchAttributes={propertiesAsArray}
         />
 
-        <div className='spacer' />
+        <div className={s.spacer} />
         <InlineFieldRow>
             <InlineField label='Limit'>
-                <Input className='max-input' type='number' value={limit}
+                <Input className={s.maxInput} type='number' value={limit}
                     onChange={(ev) => {
                         const elem = (ev.target as HTMLInputElement)
                         if (elem) {
@@ -179,7 +185,7 @@ export const EntityQueryEditor: React.FC<EntityQueryEditorProps> = ({ onChange,
                     }} />
             </InlineField>
         </InlineFieldRow>
-        <div className='spacer' />
+        <div className={s.spacer} />
         <InlineFieldRow>
             <InlineField label='Featured attributes'>
                 <div style={{ display: 'flex', alignItems: 'center', height: '32px' }}>

src/datasources/perf-ds/PerformanceAttribute.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { SelectableValue } from '@grafana/data'
-import { Segment, SegmentAsync, SegmentInput } from '@grafana/ui'
+import { css } from '@emotion/css'
+import { GrafanaTheme2, SelectableValue } from '@grafana/data'
+import { Segment, SegmentAsync, SegmentInput, useStyles2 } from '@grafana/ui'
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon'
 import { ValueOverrideSwitch } from 'components/ValueOverrideSwitch'
 import { getTemplateVariables, isTemplateVariable } from 'lib/variableHelpers'
@@ -40,6 +41,15 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
     const [isResourceOverride, setIsResourceOverride] = useState<boolean>(false)
     const [resourceOverrideValue, setResourceOverrideValue] = useState<string>('')
 
+    const getStyles = (theme: GrafanaTheme2) => ({
+        spacer: css`
+        margin-top: ${theme.spacing(2)};
+        margin-bottom: ${theme.spacing(2)};
+        `,
+    })
+
+    const s = useStyles2(getStyles)
+
     useEffect(() => {
         // Note: this could result in invalid queries if not all parameters have been selected.
         // However, not updating the query results in old parameters still being used. This way,
@@ -154,7 +164,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                 }
             `}
             </style>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Node' icon='tree'>
                 <SegmentAsync
                     value={performanceState?.node}
@@ -177,7 +187,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                 }
             </SegmentSectionWithIcon>
 
-            <div className='spacer' />
+            <div className={s.spacer} />
             {
                 (performanceState?.node?.id || performanceState?.node?.label) &&
                 <SegmentSectionWithIcon label='Resource' icon='leaf'>
@@ -197,7 +207,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                     }
                 </SegmentSectionWithIcon>
             }
-            <div className='spacer' />
+            <div className={s.spacer} />
             {
                 (performanceState?.node?.id || performanceState?.node?.label) &&
                 (performanceState?.resource?.id || performanceState?.resource?.label) &&
@@ -212,7 +222,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Sub-Attribute' icon='flash'>
                         <SegmentInput
                             value={performanceState?.subAttribute || ''}
@@ -222,7 +232,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Fallback Attribute' icon='tag'>
                         <SegmentAsync
                             value={performanceState?.fallbackAttribute}
@@ -233,7 +243,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                             }}
                         />
                     </SegmentSectionWithIcon>
-                    <div className='spacer' />
+                    <div className={s.spacer} />
                     <SegmentSectionWithIcon label='Aggregation' icon='calendar'>
                         <Segment
                             value={performanceState?.aggregation}
@@ -246,7 +256,7 @@ export const PerformanceAttribute: React.FC<PerformanceAttributesProps> = ({
                     </SegmentSectionWithIcon>
                 </>
             }
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Label' icon='font'>
                 <SegmentInput
                     value={performanceState?.label}

src/datasources/perf-ds/PerformanceConfigEditor.tsx

@@ -1,40 +1,39 @@
 import React from 'react';
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { css } from '@emotion/css'
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui';
 import { InputValueOverrideConfig } from './InputValueOverrideConfig'
 import { NodeAttributeLimitOverrideConfig } from './NodeAttributeLimitOverrideConfig'
 import { PerformanceDataSourceOptions } from './types';
 
 interface Props extends DataSourcePluginOptionsEditorProps<PerformanceDataSourceOptions> { }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+        margin-top: ${theme.spacing(1.25)};
+        margin-bottom: ${theme.spacing(1.25)};
+    `,
+})
+
 export const PerformanceConfigEditor: React.FC<Props> = ({ onOptionsChange, options }) => {
+    const s = useStyles2(getStyles)
+
     return (
         <>
-          <style>
-            {
-              `
-              .spacer {
-                margin-top: 10px;
-                margin-bottom: 10px;
-              }
-              `
-          }
-          </style>
-
          <DataSourceHttpSettings
               defaultUrl="https://api.example.com"
               dataSourceConfig={options}
               onChange={onOptionsChange}
           />
 
-          <h3 className='spacer'>Additional Options</h3>
+          <h3 className={s.spacer}>Additional Options</h3>
 
           <InputValueOverrideConfig
             onOptionsChange={onOptionsChange}
             options={options}
           />
 
-          <div className='spacer' />
+          <div className={s.spacer} />
 
           <NodeAttributeLimitOverrideConfig
             onOptionsChange={onOptionsChange}

src/datasources/perf-ds/PerformanceExpression.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import { SegmentInput } from '@grafana/ui';
+import { css } from '@emotion/css'
+import { GrafanaTheme2 } from '@grafana/data'
+import { SegmentInput, useStyles2 } from '@grafana/ui';
 import { SegmentSectionWithIcon } from 'components/SegmentSectionWithIcon';
 import { PerformanceQuery } from './types'
 
@@ -8,9 +10,16 @@ export interface PerformanceExpressionProps {
     updateQuery: Function;
 }
 
+const getStyles = (theme: GrafanaTheme2) => ({
+    spacer: css`
+        margin-top: ${theme.spacing(1)};
+    `,
+})
+
 export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ query, updateQuery }) => {
     const [expression, setExpression] = useState<string | number>(query.expression || '')
     const [label, setLabel] = useState<string | number>(query.label || '')
+    const s = useStyles2(getStyles)
 
     useEffect(() => {
         updateQuery(expression, label)
@@ -19,7 +28,7 @@ export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ qu
 
     return (
         <>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Expression' icon='calendar'>
                 <SegmentInput
                     value={expression}
@@ -32,7 +41,7 @@ export const PerformanceExpression: React.FC<PerformanceExpressionProps> = ({ qu
                     }}
                 />
             </SegmentSectionWithIcon>
-            <div className='spacer' />
+            <div className={s.spacer} />
             <SegmentSectionWithIcon label='Label' icon='font'>
                 <SegmentInput
                     value={label}