Chore: SCSS cleanup (#89355)

* remove/migrate normalize.scss * fix typo * migrate _explore styles * make json-formatter styles global
2025-02-25 18:55:37 -06:00 · 2024-06-19 13:28:00 +01:00
parent 6b876f1e38
commit ceaf510a7d
18 changed files with 404 additions and 789 deletions
--- a/packages/grafana-prometheus/src/components/PromCheatSheet.tsx
+++ b/packages/grafana-prometheus/src/components/PromCheatSheet.tsx
@@ -1,7 +1,9 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
+import { css } from '@emotion/css';
 import React from 'react';

-import { QueryEditorHelpProps } from '@grafana/data';
+import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';

 import { PromQuery } from '../types';

@@ -29,23 +31,44 @@ const CHEAT_SHEET_ITEMS = [
  },
 ];

-export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
-  <div>
-    <h2>PromQL Cheat Sheet</h2>
-    {CHEAT_SHEET_ITEMS.map((item, index) => (
-      <div className="cheat-sheet-item" key={index}>
-        <div className="cheat-sheet-item__title">{item.title}</div>
-        {item.expression ? (
-          <button
-            type="button"
-            className="cheat-sheet-item__example"
-            onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
-          >
-            <code>{item.expression}</code>
-          </button>
-        ) : null}
-        <div className="cheat-sheet-item__label">{item.label}</div>
-      </div>
-    ))}
-  </div>
-);
+export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div>
+      <h2>PromQL Cheat Sheet</h2>
+      {CHEAT_SHEET_ITEMS.map((item, index) => (
+        <div className={styles.cheatSheetItem} key={index}>
+          <div className={styles.cheatSheetItemTitle}>{item.title}</div>
+          {item.expression ? (
+            <button
+              type="button"
+              className={styles.cheatSheetExample}
+              onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
+            >
+              <code>{item.expression}</code>
+            </button>
+          ) : null}
+          {item.label}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  cheatSheetItem: css({
+    margin: theme.spacing(3, 0),
+  }),
+  cheatSheetItemTitle: css({
+    fontSize: theme.typography.h3.fontSize,
+  }),
+  cheatSheetExample: css({
+    margin: theme.spacing(0.5, 0),
+    // element is interactive, clear button styles
+    textAlign: 'left',
+    border: 'none',
+    background: 'transparent',
+    display: 'block',
+  }),
+});
--- a/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
+++ b/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
@@ -4,7 +4,8 @@ import { isEqual } from 'lodash';
 import React, { memo, useCallback } from 'react';
 import { usePrevious } from 'react-use';

-import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { InlineFormLabel, RadioButtonGroup, useStyles2 } from '@grafana/ui';

 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
@@ -21,6 +22,7 @@ export interface PromExploreExtraFieldProps {
 export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQuery }: PromExploreExtraFieldProps) => {
  const rangeOptions = getQueryTypeOptions(true);
  const prevQuery = usePrevious(query);
+  const styles = useStyles2(getStyles);

  const onExemplarChange = useCallback(
    (exemplar: boolean) => {
@@ -59,7 +61,8 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
      <div
        data-testid={promExploreExtraFieldTestIds.queryTypeField}
        className={cx(
-          'gf-form explore-input-margin',
+          'gf-form',
+          styles.queryTypeField,
          css({
            flexWrap: 'nowrap',
          })
@@ -144,3 +147,9 @@ export const promExploreExtraFieldTestIds = {
  stepField: 'prom-editor-extra-field-step',
  queryTypeField: 'prom-editor-extra-field-query-type',
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  queryTypeField: css({
+    marginRight: theme.spacing(0.5),
+  }),
+});
--- a/packages/grafana-prometheus/src/components/PromQueryField.tsx
+++ b/packages/grafana-prometheus/src/components/PromQueryField.tsx
@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
-import { cx } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { ReactNode } from 'react';

 import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
@@ -265,8 +265,12 @@ class PromQueryFieldClass extends React.PureComponent<PromQueryFieldProps, PromQ

              {ExtraFieldElement}
              {hint ? (
-                <div className="query-row-break">
-                  <div className="prom-query-field-info text-warning">
+                <div
+                  className={css({
+                    flexBasis: '100%',
+                  })}
+                >
+                  <div className="text-warning">
                    {hint.label}{' '}
                    {hint.fix ? (
                      <button
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
@@ -75,8 +75,12 @@ export const PromQueryBuilder = React.memo<PromQueryBuilderProps>((props) => {
        <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
      </EditorRow>
      {initHints.length ? (
-        <div className="query-row-break">
-          <div className="prom-query-field-info text-warning">
+        <div
+          className={css({
+            flexBasis: '100%',
+          })}
+        >
+          <div className="text-warning">
            {initHints[0].label}{' '}
            {initHints[0].fix ? (
              <button type="button" className={'text-warning'}>
--- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
+++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
@@ -11,6 +11,7 @@ import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
 import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
+import { getJsonFormatterStyles } from './jsonFormatter';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
 import { getPageStyles } from './page';
@@ -31,6 +32,7 @@ export function GlobalStyles() {
        getExtraStyles(theme),
        getFontStyles(theme),
        getFormElementStyles(theme),
+        getJsonFormatterStyles(theme),
        getPageStyles(theme),
        getCardStyles(theme),
        getAgularPanelStyles(theme),
--- a/packages/grafana-ui/src/themes/GlobalStyles/code.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/code.ts
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';

 export function getCodeStyles(theme: GrafanaTheme2) {
  return css({
-    'code, pre': {
+    'code, pre, kbd, samp': {
      ...theme.typography.code,
      fontSize: theme.typography.bodySmall.fontSize,
      backgroundColor: theme.colors.background.primary,
@@ -26,6 +26,7 @@ export function getCodeStyles(theme: GrafanaTheme2) {
      wordBreak: 'break-all',
      wordWrap: 'break-word',
      whiteSpace: 'pre-wrap',
+      overflow: 'auto',
      padding: '10px',

      code: {
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -40,6 +40,10 @@ export function getElementStyles(theme: GrafanaTheme2) {
      margin: theme.spacing(0, 0, 2),
    },

+    textarea: {
+      overflow: 'auto',
+    },
+
    button: {
      letterSpacing: theme.typography.body.letterSpacing,

@@ -67,6 +71,82 @@ export function getElementStyles(theme: GrafanaTheme2) {
      fontStyle: 'normal',
    },

+    'audio, canvas, progress, video': {
+      display: 'inline-block',
+      verticalAlign: 'baseline',
+    },
+
+    // Prevent modern browsers from displaying `audio` without controls.
+    // Remove excess height in iOS 5 devices.
+    'audio:not([controls])': {
+      display: 'none',
+      height: 0,
+    },
+
+    // Address styling not present in Safari.
+    'abbr[title]': {
+      borderBottom: '1px dotted',
+    },
+    dfn: {
+      fontStyle: 'italic',
+    },
+
+    // Prevent `sub` and `sup` affecting `line-height` in all browsers.
+    'sub, sup': {
+      fontSize: '75%',
+      lineHeight: 0,
+      position: 'relative',
+      verticalAlign: 'baseline',
+    },
+    sup: {
+      top: '-0.5em',
+    },
+    sub: {
+      bottom: '-0.25em',
+    },
+
+    // 1. Correct color not being inherited.
+    //    Known issue: affects color of disabled elements.
+    // 2. Correct font properties not being inherited.
+    // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+    'button, input, optgroup, select, textarea': {
+      color: 'inherit',
+      font: 'inherit',
+      margin: 0,
+    },
+
+    // Don't inherit the `font-weight` (applied by a rule above).
+    // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+    optgroup: {
+      fontWeight: 'bold',
+    },
+
+    // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+    //    and `video` controls.
+    // 2. Correct inability to style clickable `input` types in iOS.
+    // 3. Improve usability and consistency of cursor style between image-type
+    //    `input` and others.
+    'button, html input[type="button"], input[type="submit"]': {
+      WebkitAppearance: 'button',
+      cursor: 'pointer',
+    },
+
+    // Remove inner padding and search cancel button in Safari and Chrome on OS X.
+    // Safari (but not Chrome) clips the cancel button when the search input has
+    // padding (and `textfield` appearance).
+    'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration': {
+      WebkitAppearance: 'none',
+    },
+
+    table: {
+      borderCollapse: 'collapse',
+      borderSpacing: 0,
+    },
+
+    'td, th': {
+      padding: 0,
+    },
+
    // Utility classes
    '.muted': {
      color: theme.colors.text.secondary,
--- a/packages/grafana-ui/src/themes/GlobalStyles/jsonFormatter.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/jsonFormatter.ts
@@ -0,0 +1,125 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getJsonFormatterStyles(theme: GrafanaTheme2) {
+  return css({
+    '.json-formatter-row': {
+      fontFamily: 'monospace',
+
+      '&, a, a:hover': {
+        color: theme.colors.text.primary,
+        textDecoration: 'none',
+      },
+
+      '.json-formatter-row': {
+        marginLeft: theme.spacing(2),
+      },
+
+      '.json-formatter-children': {
+        '&.json-formatter-empty': {
+          opacity: 0.5,
+          marginLeft: theme.spacing(2),
+
+          '&::after': {
+            display: 'none',
+          },
+          '&.json-formatter-object::after': {
+            content: "'No properties'",
+          },
+          '&.json-formatter-array::after': {
+            content: "'[]'",
+          },
+        },
+      },
+
+      '.json-formatter-string': {
+        color: theme.isDark ? '#23d662' : 'green',
+        whiteSpace: 'pre-wrap',
+        wordWrap: 'break-word',
+        wordBreak: 'break-all',
+      },
+
+      '.json-formatter-number': {
+        color: theme.isDark ? theme.colors.primary.text : theme.colors.primary.main,
+      },
+      '.json-formatter-boolean': {
+        color: theme.isDark ? theme.colors.primary.text : theme.colors.error.main,
+      },
+      '.json-formatter-null': {
+        color: theme.isDark ? '#eec97d' : '#855a00',
+      },
+      '.json-formatter-undefined': {
+        color: theme.isDark ? 'rgb(239, 143, 190)' : 'rgb(202, 11, 105)',
+      },
+      '.json-formatter-function': {
+        color: theme.isDark ? '#fd48cb' : '#ff20ed',
+      },
+      '.json-formatter-url': {
+        textDecoration: 'underline',
+        color: theme.isDark ? '#027bff' : theme.colors.primary.main,
+        cursor: 'pointer',
+      },
+
+      '.json-formatter-bracket': {
+        color: theme.isDark ? '#9494ff' : theme.colors.primary.main,
+      },
+      '.json-formatter-key': {
+        color: theme.isDark ? '#23a0db' : '#00008b',
+        cursor: 'pointer',
+        paddingRight: theme.spacing(0.25),
+        marginRight: theme.spacing(0.5),
+      },
+
+      '.json-formatter-constructor-name': {
+        cursor: 'pointer',
+      },
+
+      '.json-formatter-array-comma': {
+        marginRight: theme.spacing(0.5),
+      },
+
+      '.json-formatter-toggler': {
+        lineHeight: '16px',
+        fontSize: theme.typography.size.xs,
+        verticalAlign: 'middle',
+        opacity: 0.6,
+        cursor: 'pointer',
+        paddingRight: theme.spacing(0.25),
+
+        '&::after': {
+          display: 'inline-block',
+          transition: 'transform 100ms ease-in',
+          content: "'►'",
+        },
+      },
+
+      // Inline preview on hover (optional)
+      '> a > .json-formatter-preview-text': {
+        opacity: 0,
+        transition: 'opacity 0.15s ease-in',
+        fontStyle: 'italic',
+      },
+
+      '&:hover > a > .json-formatter-preview-text': {
+        opacity: 0.6,
+      },
+
+      // Open state
+      '&.json-formatter-open': {
+        '> .json-formatter-toggler-link .json-formatter-toggler::after': {
+          transform: 'rotate(90deg)',
+        },
+        '> .json-formatter-children::after': {
+          display: 'inline-block',
+        },
+        '> a > .json-formatter-preview-text': {
+          display: 'none',
+        },
+        '&.json-formatter-empty::after': {
+          display: 'block',
+        },
+      },
+    },
+  });
+}