Chore: More SCSS cleanup (#90132)

* convert TagBadge to a functional component

* migrate label and label-tag styles to TagBadge

* migrate filter-table to emotion globals

* migrate query-part styles to emotion globals

* move tag color to be an inline style

.betterer.results

@@ -1216,9 +1216,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/core/components/TimeSeries/utils.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1450,8 +1448,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
     ],
     "public/app/features/admin/UserListAdminPage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -5837,10 +5834,6 @@ exports[`better eslint`] = {
     "public/app/features/variables/pickers/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./OptionsPicker/OptionsPicker\`)", "0"]
     ],
-    "public/app/features/variables/pickers/shared/VariableLink.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/variables/pickers/shared/VariableOptions.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -8,12 +8,14 @@ import { getCardStyles } from './card';
 import { getCodeStyles } from './code';
 import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
+import { getFilterTableStyles } from './filterTable';
 import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
 import { getJsonFormatterStyles } from './jsonFormatter';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
 import { getPageStyles } from './page';
+import { getQueryPartStyles } from './queryPart';
 import { getRcTimePickerStyles } from './rcTimePicker';
 import { getSkeletonStyles } from './skeletonStyles';
 import { getSlateStyles } from './slate';
@@ -27,19 +29,21 @@ export function GlobalStyles() {
     <Global
       styles={[
         getAccessibilityStyles(theme),
+        getAgularPanelStyles(theme),
         getCodeStyles(theme),
         getElementStyles(theme),
         getExtraStyles(theme),
+        getFilterTableStyles(theme),
         getFontStyles(theme),
         getFormElementStyles(theme),
         getJsonFormatterStyles(theme),
-        getPageStyles(theme),
         getCardStyles(theme),
-        getAgularPanelStyles(theme),
         getMarkdownStyles(theme),
+        getPageStyles(theme),
+        getQueryPartStyles(theme),
+        getRcTimePickerStyles(theme),
         getSkeletonStyles(theme),
         getSlateStyles(theme),
-        getRcTimePickerStyles(theme),
         getUplotStyles(theme),
         getLegacySelectStyles(theme),
       ]}

packages/grafana-ui/src/themes/GlobalStyles/filterTable.ts

@@ -0,0 +1,79 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getFilterTableStyles(theme: GrafanaTheme2) {
+  return css({
+    '.filter-table *': {
+      boxSizing: 'border-box',
+    },
+
+    '.filter-table': {
+      width: '100%',
+      borderCollapse: 'separate',
+
+      tbody: {
+        'tr:nth-child(odd)': {
+          background: theme.colors.emphasize(theme.colors.background.primary, 0.02),
+        },
+      },
+
+      th: {
+        width: 'auto',
+        padding: theme.spacing(0.5, 1),
+        textAlign: 'left',
+        lineHeight: '30px',
+        height: '30px',
+        whiteSpace: 'nowrap',
+      },
+
+      td: {
+        padding: theme.spacing(0.5, 1),
+        lineHeight: '30px',
+        height: '30px',
+        whiteSpace: 'nowrap',
+      },
+
+      '.link-td': {
+        padding: 0,
+        lineHeight: '30px',
+        height: '30px',
+        whiteSpace: 'nowrap',
+
+        a: {
+          display: 'block',
+          padding: theme.spacing(0, 1),
+          height: '30px',
+        },
+      },
+
+      '.ellipsis': {
+        display: 'block',
+        width: '100%',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+
+      '.expanded': {
+        borderColor: theme.components.panel.background,
+      },
+
+      '.expanded > td': {
+        paddingBottom: 0,
+      },
+
+      '.filter-table__avatar': {
+        width: '25px',
+        height: '25px',
+        borderRadius: '50%',
+      },
+
+      '&--hover': {
+        'tbody tr:hover': {
+          background: theme.colors.emphasize(theme.colors.background.primary, 0.05),
+        },
+      },
+    },
+  });
+}

packages/grafana-ui/src/themes/GlobalStyles/queryPart.ts

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getQueryPartStyles(theme: GrafanaTheme2) {
+  return css({
+    '.query-part': {
+      backgroundColor: theme.colors.background.secondary,
+
+      '&:hover': {
+        background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),
+      },
+    },
+  });
+}

public/app/core/components/TagFilter/TagBadge.tsx

@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
 import * as React from 'react';
 
-import { getTagColorsFromName, Icon } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { getTagColorsFromName, Icon, useStyles2 } from '@grafana/ui';
 
 export interface Props {
   label: string;
@@ -9,26 +11,39 @@ export interface Props {
   onClick?: React.MouseEventHandler<SVGElement>;
 }
 
-export class TagBadge extends React.Component<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
+export const TagBadge = ({ count, label, onClick, removeIcon }: Props) => {
+  const { color } = getTagColorsFromName(label);
+  const styles = useStyles2(getStyles);
 
-  render() {
-    const { label, removeIcon, count, onClick } = this.props;
-    const { color } = getTagColorsFromName(label);
+  const countLabel = count !== 0 && <span style={{ marginLeft: '3px' }}>{`(${count})`}</span>;
 
-    const tagStyle = {
-      backgroundColor: color,
-    };
+  return (
+    <span
+      className={styles.badge}
+      style={{
+        backgroundColor: color,
+      }}
+    >
+      {removeIcon && <Icon onClick={onClick} name="times" />}
+      {label} {countLabel}
+    </span>
+  );
+};
 
-    const countLabel = count !== 0 && <span style={{ marginLeft: '3px' }}>{`(${count})`}</span>;
-
-    return (
-      <span className={`label label-tag`} style={tagStyle}>
-        {removeIcon && <Icon onClick={onClick} name="times" />}
-        {label} {countLabel}
-      </span>
-    );
-  }
-}
+export const getStyles = (theme: GrafanaTheme2) => ({
+  badge: css({
+    ...theme.typography.bodySmall,
+    backgroundColor: theme.v1.palette.gray1,
+    borderRadius: theme.shape.radius.default,
+    color: theme.v1.palette.white,
+    display: 'inline-block',
+    height: '20px',
+    lineHeight: '20px',
+    padding: theme.spacing(0, 0.75),
+    verticalAlign: 'baseline',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      opacity: 0.85,
+    },
+  }),
+});

public/app/core/components/TagFilter/TagFilter.tsx

@@ -6,7 +6,7 @@ import { escapeStringForRegex, GrafanaTheme2 } from '@grafana/data';
 import { Icon, MultiSelect, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
-import { TagBadge } from './TagBadge';
+import { TagBadge, getStyles as getTagBadgeStyles } from './TagBadge';
 import { TagOption, TagSelectOption } from './TagOption';
 
 export interface TermCount {
@@ -167,31 +167,35 @@ export const TagFilter = ({
 
 TagFilter.displayName = 'TagFilter';
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  tagFilter: css`
-    position: relative;
-    min-width: 180px;
-    flex-grow: 1;
+const getStyles = (theme: GrafanaTheme2) => {
+  const tagBadgeStyles = getTagBadgeStyles(theme);
 
-    .label-tag {
-      margin-left: 6px;
-      cursor: pointer;
-    }
-  `,
-  clear: css`
-    background: none;
-    border: none;
-    text-decoration: underline;
-    font-size: 12px;
-    padding: none;
-    position: absolute;
-    top: -17px;
-    right: 0;
-    cursor: pointer;
-    color: ${theme.colors.text.secondary};
+  return {
+    tagFilter: css({
+      position: 'relative',
+      minWidth: '180px',
+      flexGrow: 1,
 
-    &:hover {
-      color: ${theme.colors.text.primary};
-    }
-  `,
-});
+      [`.${tagBadgeStyles.badge}`]: {
+        marginLeft: '6px',
+        cursor: 'pointer',
+      },
+    }),
+    clear: css({
+      background: 'none',
+      border: 'none',
+      textDecoration: 'underline',
+      fontSize: '12px',
+      padding: 'none',
+      position: 'absolute',
+      top: '-17px',
+      right: 0,
+      cursor: 'pointer',
+      color: theme.colors.text.secondary,
+
+      '&:hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+  };
+};

public/app/features/admin/UserLdapSyncInfo.tsx

@@ -5,6 +5,8 @@ import { Button, LinkButton } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, SyncInfo, UserDTO } from 'app/types';
 
+import { TagBadge } from '../../core/components/TagFilter/TagBadge';
+
 interface Props {
   ldapSyncInfo: SyncInfo;
   user: UserDTO;
@@ -40,7 +42,7 @@ export class UserLdapSyncInfo extends PureComponent<Props, State> {
                   <td>External sync</td>
                   <td>User synced via LDAP. Some changes must be done in LDAP or mappings.</td>
                   <td>
-                    <span className="label label-tag">LDAP</span>
+                    <TagBadge label="LDAP" removeIcon={false} count={0} onClick={undefined} />
                   </td>
                 </tr>
                 <tr>

public/app/features/variables/pickers/shared/VariableLink.tsx

@@ -7,6 +7,7 @@ import { Icon, useStyles2 } from '@grafana/ui';
 import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
 import { t } from 'app/core/internationalization';
 
+import { getStyles as getTagBadgeStyles } from '../../../../core/components/TagFilter/TagBadge';
 import { ALL_VARIABLE_TEXT } from '../../constants';
 
 interface Props {
@@ -76,34 +77,38 @@ const VariableLinkText = ({ text }: VariableLinkTextProps) => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    max-width: 500px;
-    padding-right: 10px;
-    padding: 0 ${theme.spacing(1)};
-    background-color: ${theme.components.input.background};
-    border: 1px solid ${theme.components.input.borderColor};
-    border-radius: ${theme.shape.radius.default};
-    display: flex;
-    align-items: center;
-    color: ${theme.colors.text};
-    height: ${theme.spacing(theme.components.height.md)};
+const getStyles = (theme: GrafanaTheme2) => {
+  const tagBadgeStyles = getTagBadgeStyles(theme);
 
-    .label-tag {
-      margin: 0 5px;
-    }
+  return {
+    container: css({
+      maxWidth: '500px',
+      paddingRight: '10px',
+      padding: theme.spacing(0, 1),
+      backgroundColor: theme.components.input.background,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      borderRadius: theme.shape.radius.default,
+      display: 'flex',
+      alignItems: 'center',
+      color: theme.colors.text.primary,
+      height: theme.spacing(theme.components.height.md),
 
-    &:disabled {
-      background-color: ${theme.colors.action.disabledBackground};
-      color: ${theme.colors.action.disabledText};
-      border: 1px solid ${theme.colors.action.disabledBackground};
-    }
-  `,
-  textAndTags: css`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-right: ${theme.spacing(0.25)};
-    user-select: none;
-  `,
-});
+      [`.${tagBadgeStyles.badge}`]: {
+        margin: '0 5px',
+      },
+
+      '&:disabled': {
+        backgroundColor: theme.colors.action.disabledBackground,
+        color: theme.colors.action.disabledText,
+        border: `1px solid ${theme.colors.action.disabledBackground}`,
+      },
+    }),
+    textAndTags: css({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      marginRight: theme.spacing(0.25),
+      userSelect: 'none',
+    }),
+  };
+};

public/sass/_angular.scss

@@ -2,6 +2,7 @@
 // once angular is disabled, this file can be deleted
 
 @use 'sass:map';
+@use 'sass:color';
 
 .edit-tab-content {
   flex-grow: 1;
@@ -1935,3 +1936,48 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
     width: 100%;
   }
 }
+
+// Base classes
+.label,
+.badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: $font-size-base * 0.846;
+  font-weight: $font-weight-semi-bold;
+  line-height: 14px; // ensure proper line-height if floated
+  color: $white;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: $gray-1;
+}
+
+// Labels & Badges
+.label-tag {
+  background-color: $purple;
+  color: color.adjust($white, $lightness: -5%);
+  white-space: nowrap;
+  border-radius: 3px;
+  text-shadow: none;
+  font-size: 12px;
+  padding: 0px 6px;
+  line-height: 20px;
+  height: 20px;
+
+  svg {
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    opacity: 0.85;
+    background-color: color.adjust($purple, $lightness: -10%);
+  }
+}
+
+.query-part__link {
+  cursor: pointer;
+
+  &--no-value {
+    color: $text-muted;
+  }
+}

public/sass/_grafana.scss

@@ -16,14 +16,11 @@
 // COMPONENTS
 @import 'components/buttons';
 @import 'components/alerts';
-@import 'components/tags';
 @import 'components/gf-form';
-@import 'components/filter-table';
 @import 'components/modals';
 @import 'components/dropdown';
 @import 'components/infobox';
 @import 'components/query_editor';
-@import 'components/query_part';
 @import 'components/dashboard_grid';
 
 // PAGES

public/sass/components/_filter-table.scss

@@ -1,92 +0,0 @@
-// ==========================================================================
-// FILTER TABLE
-// ==========================================================================
-
-// Table
-// --------------------------------------------------------------------------
-
-.filter-table * {
-  box-sizing: border-box;
-}
-
-.filter-table {
-  width: 100%;
-  border-collapse: separate;
-
-  tbody {
-    tr:nth-child(odd) {
-      background: $table-bg-odd;
-    }
-  }
-
-  th {
-    width: auto;
-    padding: $space-inset-squish-md;
-    text-align: left;
-    line-height: 30px;
-    height: 30px;
-    white-space: nowrap;
-  }
-
-  td {
-    padding: $space-inset-squish-md;
-    line-height: 30px;
-    height: 30px;
-    white-space: nowrap;
-
-    &.filter-table__switch-cell {
-      padding: 0;
-      border-right: 3px solid $page-bg;
-    }
-  }
-
-  .link-td {
-    padding: 0;
-    line-height: 30px;
-    height: 30px;
-    white-space: nowrap;
-
-    &.filter-table__switch-cell {
-      padding: 0;
-      border-right: 3px solid $page-bg;
-    }
-
-    a {
-      display: block;
-      padding: 0px $space-sm;
-      height: 30px;
-    }
-  }
-
-  .ellipsis {
-    display: block;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .expanded {
-    border-color: $panel-bg;
-  }
-
-  .expanded > td {
-    padding-bottom: 0;
-  }
-
-  .filter-table__avatar {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-  }
-
-  &--hover {
-    tbody tr:hover {
-      background: $table-bg-hover;
-    }
-  }
-}
-.filter-table__weak-italic {
-  font-style: italic;
-  color: $text-color-weak;
-}

public/sass/components/_query_editor.scss

@@ -13,12 +13,6 @@
 
 .tight-form-func {
   background: $tight-form-func-bg;
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
 }
 
 input[type='text'].tight-form-func-param {
@@ -53,12 +47,6 @@ input[type='text'].tight-form-func-param {
 
 .tight-form-func {
   background: $tight-form-func-bg;
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
 }
 
 .rst-text::before {

public/sass/components/_query_part.scss

@@ -1,29 +0,0 @@
-.query-part {
-  background-color: $tight-form-func-bg;
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
-
-  .query-part__last {
-    display: none;
-  }
-
-  &:hover .query-part__last {
-    display: inline;
-  }
-
-  &:hover {
-    background: $tight-form-func-highlight-bg;
-  }
-}
-
-.query-part__link {
-  cursor: pointer;
-
-  &--no-value {
-    color: $text-muted;
-  }
-}

public/sass/components/_tags.scss

@@ -1,59 +0,0 @@
-@use 'sass:color';
-// Base classes
-.label,
-.badge {
-  display: inline-block;
-  padding: 2px 4px;
-  font-size: $font-size-base * 0.846;
-  font-weight: $font-weight-semi-bold;
-  line-height: 14px; // ensure proper line-height if floated
-  color: $white;
-  vertical-align: baseline;
-  white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
-  background-color: $gray-1;
-}
-
-// Labels & Badges
-.label-tag {
-  background-color: $purple;
-  color: color.adjust($white, $lightness: -5%);
-  white-space: nowrap;
-  border-radius: 3px;
-  text-shadow: none;
-  font-size: 12px;
-  padding: 0px 6px;
-  line-height: 20px;
-  height: 20px;
-
-  svg {
-    margin-bottom: 0;
-  }
-
-  .icon-tag {
-    position: relative;
-    top: 1px;
-    padding-right: 4px;
-  }
-
-  &.muted {
-    opacity: 0.85;
-    background-color: color.adjust($purple, $lightness: -10%);
-    color: $text-muted;
-  }
-
-  &:hover {
-    opacity: 0.85;
-    background-color: color.adjust($purple, $lightness: -10%);
-  }
-
-  &--gray {
-    opacity: 0.85;
-    background-color: $gray-1;
-    border-color: $gray-2;
-
-    &:hover {
-      background-color: $gray-1;
-    }
-  }
-}